:root {
  --bg: #ffffff;
  --sidebar: #f7f7f5;
  --surface: #ffffff;
  --surface-soft: #f5f5f2;
  --ink: #1f211f;
  --muted: #70746f;
  --line: #e5e6e2;
  --green: #164b3b;
  --green-2: #216a54;
  --mint: #e9f4ef;
  --amber: #c98028;
  --danger: #b34b42;
  --shadow: 0 8px 32px rgba(22, 43, 34, .09);
  --app-height: 100dvh;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html,body { margin: 0; width: 100%; max-width: 100%; min-height: 100%; overflow: hidden; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
code { font-family: "SFMono-Regular", Consolas, monospace; }
.app-shell { display: grid; grid-template-columns: 270px minmax(0,1fr); height: var(--app-height); min-height: 0; max-width: 100vw; overflow: hidden; }
.sidebar { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 13px 12px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.logo-button { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 6px; color: var(--ink); border-radius: 9px; }
.logo-button:hover { background: #ededeb; }
.logo { width: 33px; height: 33px; border-radius: 9px; display: grid; place-items: center; background: var(--green); color: #efbd73; font: italic 21px Georgia, serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); flex: 0 0 auto; }
.logo.large { width: 52px; height: 52px; font-size: 28px; margin-bottom: 16px; }
.brand-copy strong,.brand-copy small { display: block; text-align: left; }.brand-copy strong { font-size: 12px; letter-spacing: .14em; }.brand-copy small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.icon-button { width: 36px; height: 36px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 9px; display: grid; place-items: center; font-size: 17px; }
.icon-button:hover { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
.sidebar-close,.mobile-menu { display: none; }
.new-chat-button { width: 100%; border: 1px solid #dcdeda; border-radius: 10px; background: white; padding: 11px 13px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.02); }
.new-chat-button:hover { background: #fbfbfa; border-color: #cdd2cd; }.new-chat-button span { font-size: 18px; color: var(--green); }
.project-picker-label { margin: 21px 9px 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 9px; font-weight: 800; }
.project-picker { width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 8px 9px; font-weight: 650; color: var(--ink); }
.project-picker:hover { background: #ededeb; }
.conversation-section { flex: 1; min-height: 110px; overflow: hidden; display: flex; flex-direction: column; margin-top: 16px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 9px 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.section-heading button { border: 0; background: transparent; color: var(--muted); font-size: 16px; }
.conversation-list { overflow-y: auto; display: grid; gap: 2px; }
.conversation-item { width: 100%; border: 0; background: transparent; color: #444844; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item:hover { background: #ececea; }.conversation-item.active { background: #e5ebe7; color: var(--green); font-weight: 700; }
.conversation-empty { padding: 12px 9px; color: #969a96; font-size: 11px; line-height: 1.5; }
.utility-nav { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.utility-nav button { border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; color: #565b57; font-size: 12px; text-align: left; }
.utility-nav button:hover,.utility-nav button.active { background: #ececea; color: var(--ink); }.utility-nav span { width: 18px; text-align: center; color: var(--green-2); }
.settings-button { margin-top: 9px; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 13px 8px 5px; display: flex; align-items: center; gap: 11px; text-align: left; color: var(--ink); }
.settings-button:hover { color: var(--green); }.settings-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #e7e9e5; }
.settings-button strong,.settings-button small { display: block; }.settings-button strong { font-size: 11px; }.settings-button small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.sidebar-scrim { display: none; }

.main-area { min-width: 0; width: 100%; height: var(--app-height); display: flex; flex-direction: column; overflow: hidden; }
.chat-header { height: 64px; flex: 0 0 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); z-index: 10; }
.header-title-wrap { min-width: 0; }.header-title-wrap h1 { font-size: 14px; margin: 0; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.save-state { color: #939793; font-size: 9px; display: block; margin-top: 3px; }
.header-actions { display: flex; align-items: center; gap: 8px; }.model-picker { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: white; }.model-picker span { display: block; color: #8c908c; text-transform: uppercase; letter-spacing: .08em; font-size: 7px; font-weight: 800; }.model-picker select { border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; min-width: 96px; outline: 0; }
.view { display: none; min-height: 0; }.view.active { display: block; }
.chat-view.active { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.messages { flex: 1; overflow-y: auto; padding: 30px max(24px, calc((100% - 780px)/2)) 190px; scroll-behavior: smooth; }
.welcome { min-height: calc(100vh - 300px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.welcome .logo { width: 48px; height: 48px; font-size: 26px; border-radius: 14px; margin-bottom: 18px; }.welcome h2 { margin: 0; font: 500 31px Georgia, serif; }.welcome>p { color: var(--muted); max-width: 540px; line-height: 1.6; font-size: 13px; }
.suggestions { width: min(650px,100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 24px; }.suggestion { border: 1px solid var(--line); background: white; border-radius: 12px; padding: 13px 15px; text-align: left; color: #4f544f; font-size: 12px; line-height: 1.4; }.suggestion:hover { border-color: #b9c9c0; background: #fbfcfb; color: var(--green); }
.message { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 13px; margin: 5px 0 30px; }
.message-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #eceeeb; color: #555; font-size: 10px; font-weight: 800; }.message.assistant .message-avatar { background: var(--green); color: #f0bb6d; font: italic 17px Georgia,serif; }
.message-name { margin: 2px 0 7px; font-size: 11px; font-weight: 750; }.message-name span { margin-left: 7px; color: #989c98; font-weight: 450; font-size: 9px; }.message-text { white-space: pre-wrap; font-size: 14px; line-height: 1.68; overflow-wrap: anywhere; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }.message-attachment { min-width: 190px; max-width: 270px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; overflow: hidden; }.message-attachment.image { width: 220px; }.message-attachment img { display: block; width: 100%; max-height: 190px; object-fit: cover; background: #eee; }.attachment-file { display: flex; align-items: center; gap: 10px; padding: 10px; }.file-icon { width: 34px; height: 38px; border-radius: 6px; background: #e7ece8; color: var(--green); display: grid; place-items: center; font-size: 9px; font-weight: 800; }.file-copy { min-width: 0; flex: 1; }.file-copy strong,.file-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-copy strong { font-size: 10px; }.file-copy small { color: var(--muted); margin-top: 3px; font-size: 9px; }.download-attachment { border: 0; background: transparent; color: var(--muted); padding: 5px; }
.run-state { margin: -10px 0 28px 45px; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; }.spinner { width: 12px; height: 12px; border: 2px solid #d7dbd7; border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.composer-dock { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px max(20px,calc((100% - 790px)/2)) 11px; background: linear-gradient(transparent, rgba(255,255,255,.94) 28%, white 58%); }
.composer { border: 1px solid #d5d8d4; background: white; border-radius: 18px; padding: 12px 13px 10px; box-shadow: 0 8px 28px rgba(20,40,32,.1); transition: border-color .2s, box-shadow .2s; }.composer:focus-within,.composer.dragging { border-color: #8eb3a4; box-shadow: 0 8px 34px rgba(20,75,59,.14); }.composer.dragging { background: var(--mint); }
.composer textarea { display: block; width: 100%; min-height: 28px; max-height: 180px; border: 0; outline: 0; resize: none; padding: 4px 3px 8px; color: var(--ink); line-height: 1.5; font-size: 14px; background: transparent; }
.composer-toolbar { display: flex; justify-content: space-between; align-items: center; }.composer-left,.composer-right { display: flex; align-items: center; gap: 8px; }.round-button,.send-button { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; }.round-button { border: 1px solid var(--line); background: white; color: var(--ink); font-size: 19px; }.round-button:hover { background: var(--surface-soft); }.send-button { border: 0; background: var(--green); color: white; font-size: 18px; }.send-button:disabled { opacity: .35; cursor: default; }.attachment-hint,.upload-status { color: #8b908b; font-size: 9px; }.composer-disclaimer { text-align: center; margin: 7px 0 0; color: #a0a3a0; font-size: 8px; }
.pending-attachments { display: flex; gap: 7px; flex-wrap: wrap; }.pending-attachments:empty { display: none; }.pending-chip { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid var(--line); background: #f8f8f6; border-radius: 9px; max-width: 230px; }.pending-thumb { width: 33px; height: 33px; border-radius: 6px; object-fit: cover; background: #e9ebe8; }.pending-doc { width: 33px; height: 33px; border-radius: 6px; display: grid; place-items: center; background: #e5ebe7; color: var(--green); font-size: 8px; font-weight: 800; }.pending-chip div { min-width: 0; }.pending-chip strong,.pending-chip small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.pending-chip strong { font-size: 9px; }.pending-chip small { color: var(--muted); font-size: 8px; margin-top: 2px; }.remove-attachment { border: 0; background: transparent; color: #8d918d; font-size: 16px; padding: 2px; }

.page-view.active { flex: 1; overflow-y: auto; padding: 42px max(28px,calc((100% - 1080px)/2)) 70px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 30px; }.page-head h2 { font: 500 31px Georgia,serif; margin: 3px 0 7px; }.page-head p:not(.kicker) { color: var(--muted); margin: 0; font-size: 12px; }.kicker { color: var(--green-2); font-size: 9px; letter-spacing: .16em; font-weight: 850; margin: 0 0 5px; }
.primary-button,.secondary-button { border-radius: 9px; padding: 10px 15px; font-weight: 700; font-size: 11px; }.primary-button { border: 1px solid var(--green); color: white; background: var(--green); }.secondary-button { border: 1px solid var(--line); color: var(--ink); background: white; }.security-pill { border: 1px solid #cfe0d8; background: var(--mint); color: var(--green-2); border-radius: 999px; padding: 8px 11px; font-size: 9px; white-space: nowrap; }
.surface,.project-card,.metric-card,.integration-card,.connection-card { border: 1px solid var(--line); background: var(--surface); border-radius: 13px; }
.project-grid,.metric-grid,.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.project-card,.metric-card,.integration-card { padding: 18px; }.project-card h3 { font: 500 18px Georgia,serif; margin: 4px 0 7px; }.project-card p,.metric-card p,.integration-card p { color: var(--muted); line-height: 1.5; font-size: 10px; }.project-card small { color: #969a96; font-size: 9px; }
.two-column { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.75fr); gap: 28px; }.two-column h3,.setup-section h3 { font: 500 20px Georgia,serif; }.section-gap { margin-top: 30px!important; }.stack { display: grid; gap: 9px; }.agent-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }.agent-top,.provider-top { display: flex; justify-content: space-between; align-items: center; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c4c8c4; }.status-dot.ready { background: #43a775; box-shadow: 0 0 0 3px #e0f2e8; }.status-dot.off { background: #be6960; }.meta { color: var(--muted); font-size: 9px; margin-top: 5px; }
.form-card { padding: 21px; align-self: start; box-shadow: var(--shadow); }.form-card label { display: grid; gap: 6px; color: #666b66; font-size: 10px; font-weight: 700; margin: 14px 0; }.form-card input,.form-card textarea,.form-card select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbfa; color: var(--ink); }.form-card textarea { resize: vertical; }.task-list { display: grid; }.task-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 11px 2px; font-size: 10px; }.task-item small { color: var(--muted); }.task-status { padding: 5px 7px; border-radius: 99px; background: #eceeeb; text-transform: uppercase; font-size: 8px; }.task-status.completed { background: #def0e6; color: #246b49; }.task-status.failed,.task-status.needs_review { background: #f3dfdc; color: var(--danger); }
.metric-value { font: 31px Georgia,serif; margin: 14px 0 2px; }.metric-label { color: var(--green-2); font-size: 9px; letter-spacing: .12em; font-weight: 850; text-transform: uppercase; }.info-banner { display: flex; gap: 12px; border-left: 3px solid var(--amber); padding: 15px 18px; background: #faf5eb; margin: 20px 0 30px; }.info-banner>span { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: white; display: grid; place-items: center; font: italic 14px Georgia,serif; }.info-banner p { color: var(--muted); font-size: 10px; margin: 4px 0 0; }
.table-surface { border: 1px solid var(--line); border-radius: 13px; overflow: auto; background: white; }table { width: 100%; border-collapse: collapse; font-size: 10px; }th,td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #ecece9; vertical-align: top; }th { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 8px; }td:last-child { max-width: 420px; overflow-wrap: anywhere; color: var(--muted); }

.settings-page { background: linear-gradient(180deg,#fff 0,#fafbf9 100%); }.settings-callout { display: grid; grid-template-columns: 34px 1fr 34px 1fr; gap: 13px; align-items: start; border: 1px solid #dce7e1; background: #f2f8f5; border-radius: 13px; padding: 18px; margin-bottom: 18px; }.callout-icon { width: 29px; height: 29px; border-radius: 50%; background: var(--green); color: white; display: grid; place-items: center; font-weight: 800; font-size: 11px; }.settings-callout strong { font-size: 11px; }.settings-callout p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 4px 0 0; }
.connection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.connection-card { padding: 18px; }.connection-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.connection-identity { display: flex; align-items: center; gap: 11px; }.connection-logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #eef0ed; color: var(--green); font-weight: 850; }.connection-identity strong,.connection-identity small { display: block; }.connection-identity strong { font-size: 12px; }.connection-identity small { color: var(--muted); font-size: 9px; margin-top: 3px; }.connection-status { border-radius: 999px; padding: 5px 8px; font-size: 8px; background: #f0e5e3; color: #995048; }.connection-status.ready { background: #dff1e7; color: #236a48; }.connection-card>p { color: var(--muted); font-size: 10px; line-height: 1.5; min-height: 30px; }.env-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }.env-row code { padding: 5px 7px; background: #f3f4f1; border-radius: 5px; color: #4e544f; font-size: 8px; }.connection-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 11px; }.connection-footer span { color: var(--muted); font-size: 8px; }.connection-footer a { color: var(--green-2); font-size: 9px; text-decoration: none; font-weight: 700; }
.setup-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; padding: 30px 0; margin-top: 22px; border-top: 1px solid var(--line); }.setup-copy p:not(.kicker) { color: var(--muted); line-height: 1.6; font-size: 10px; }.setup-copy code { background: #f0f1ee; padding: 2px 4px; border-radius: 4px; }.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; }.setup-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 0 0 18px; position: relative; }.setup-steps li:not(:last-child)::after { content:""; position:absolute; left:14px; top:29px; bottom:2px; width:1px; background:#d8ddd9; }.setup-steps li>span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #bfd0c7; border-radius: 50%; color: var(--green); background: white; font-size: 9px; font-weight: 800; }.setup-steps strong,.setup-steps code { display: block; }.setup-steps strong { font-size: 10px; margin: 2px 0 6px; }.setup-steps code { color: #5c625d; background: #f2f3f0; padding: 7px 9px; border-radius: 6px; font-size: 8px; line-height: 1.6; }
.attachment-settings { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px; }.attachment-settings strong { font-size: 11px; }.attachment-settings p { color: var(--muted); font-size: 9px; margin: 4px 0 0; }.file-type-row { display: flex; gap: 5px; flex-wrap: wrap; }.file-type-row span { padding: 5px 7px; background: #f0f2ef; border-radius: 5px; color: #657068; font-size: 8px; font-weight: 750; }
.provider-secret-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 28px; padding: 20px; margin-top: 18px; }.provider-secret-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.provider-secret-form { min-width: 0; display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; }.provider-secret-form strong { font-size: 11px; }.provider-secret-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }.provider-secret-form input { min-width: 0; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: white; }.provider-secret-form button { justify-self: start; }
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20,35,29,.8); backdrop-filter: blur(10px); display: grid; place-items: center; }.overlay.hidden { display: none; }.auth-card { width: min(390px,90vw); background: white; border-radius: 16px; padding: 30px; box-shadow: 0 30px 100px rgba(0,0,0,.3); }.auth-card h2 { font: 500 26px Georgia,serif; margin: 8px 0; }.auth-card>p:not(.kicker) { color: var(--muted); line-height: 1.5; font-size: 11px; }.auth-card input { width: 100%; margin: 9px 0; border: 1px solid var(--line); border-radius: 8px; padding: 11px; }.auth-card button { width: 100%; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: 370px; z-index: 60; background: #242824; color: white; border-radius: 9px; padding: 11px 14px; box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(9px); transition: .2s; }.toast.show { opacity: 1; transform: none; }

@media (max-width: 900px) { .app-shell { grid-template-columns: 230px minmax(0,1fr); }.project-grid,.metric-grid,.integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.two-column,.setup-section { grid-template-columns: 1fr; }.settings-callout { grid-template-columns: 34px 1fr; }.connection-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .app-shell { display: block; width: 100vw; height: var(--app-height); }.sidebar { position: fixed; left: 0; top: 0; width: min(310px,86vw); height: var(--app-height); padding-top: max(13px,env(safe-area-inset-top)); transform: translateX(-105%); transition: transform .22s; box-shadow: 16px 0 45px rgba(0,0,0,.12); }.sidebar.open { transform: translateX(0); }.sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 15; }.sidebar-scrim.open { display: block; }.sidebar-close,.mobile-menu { display: grid; }.main-area { width: 100vw; height: var(--app-height); }.chat-header { height: calc(58px + env(safe-area-inset-top)); flex-basis: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; gap: 7px; }.header-title-wrap { flex: 1; min-width: 0; }.header-actions { min-width: 0; flex: 0 1 auto; }.header-actions>.icon-button { display: none; }.model-picker { min-width: 0; max-width: 46vw; padding: 6px 7px; }.model-picker span { display: none; }.model-picker select { min-width: 0; max-width: 42vw; text-overflow: ellipsis; }.messages { padding: 18px 12px calc(155px + env(safe-area-inset-bottom)); }.welcome { min-height: calc(var(--app-height) - 245px); }.welcome h2 { font-size: 26px; }.suggestions { grid-template-columns: 1fr; }.suggestions .suggestion:nth-child(n+3) { display:none; }.composer-dock { width: 100%; max-width: 100vw; padding: 28px 8px calc(8px + env(safe-area-inset-bottom)); }.composer { max-width: 100%; border-radius: 16px; }.attachment-hint { display:none; }.message { grid-template-columns: 28px minmax(0,1fr); gap: 9px; }.message-avatar { width: 27px; height: 27px; }.message-name span { display:block; margin: 3px 0 0; }.message-attachment.image { width: min(220px,100%); }.page-view.active { width: 100%; max-width: 100vw; overflow-x: hidden; padding: 24px 13px calc(45px + env(safe-area-inset-bottom)); }.page-head { align-items: start; flex-direction: column; gap: 14px; }.project-grid,.metric-grid,.integration-grid { grid-template-columns: 1fr; }.attachment-settings { align-items: start; flex-direction: column; }.connection-top,.connection-footer { flex-wrap: wrap; }.env-row code { max-width: 100%; overflow-wrap: anywhere; }.provider-secret-section,.provider-secret-grid { grid-template-columns: 1fr; }.provider-secret-section { gap: 16px; padding: 15px; }.table-surface { width: calc(100vw - 13px); margin-right: -13px; }
  /* iOS Safari zooms the page when a focused form control is below 16px. */
  input,textarea,select { font-size: 16px!important; }
  .messages { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .message,.message>div:last-child,.message-text { min-width: 0; max-width: 100%; }
  .message { width: 100%; overflow: hidden; }
  .composer-dock { left: 0; right: 0; min-width: 0; overflow: hidden; }
  .composer { width: 100%; min-width: 0; }
  .composer textarea { font-size: 16px!important; }
}