/* Kai workspace: one sheet of paper on the landing page's canvas. Tokens live in kai.css. */
@import url('/kai-assets/kai.css');
:root{
  color-scheme:light;
  --canvas:var(--kai-paper);--sheet:var(--kai-surface);--wash:var(--kai-wash);
  --ink:var(--kai-ink);--secondary:var(--kai-secondary);--muted:var(--kai-muted);
  --line:var(--kai-line);--control:var(--kai-control);--focus:var(--kai-focus);
  --accent:var(--kai-accent);--accent-ink:var(--kai-accent-ink);--accent-wash:var(--kai-accent-wash);
  --good:oklch(.43 .12 145);--critical:oklch(.46 .17 25);
  --radius-sheet:var(--kai-radius-sheet);--radius:var(--kai-radius-card);--control-radius:var(--kai-radius-control);
  --sidebar-width:216px;--gutter:32px;--tabbar-height:64px;
  font:14px/1.5 var(--kai-body);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;
}
:root[data-theme=dark]{color-scheme:dark;--good:oklch(.76 .12 145);--critical:oklch(.75 .13 25)}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}button:disabled{opacity:.5;cursor:not-allowed}
a{color:inherit}h1,h2,h3,p{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#main:focus-visible,#page-title:focus-visible{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted)}.small,small{font-size:12px}
.eyebrow{display:block;font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--muted);text-transform:uppercase}

/* Type: the landing page's light Manrope for titles and figures, Geist for everything else. */
h1{font-family:var(--kai-display);font-weight:300;font-size:32px;line-height:1.15;letter-spacing:-1px}
h1::after{content:".";color:var(--muted)}
h2{font-size:15px;font-weight:600;letter-spacing:-.1px}h3{font-size:14px;font-weight:600}

/* Controls: ink primary, tonal secondary, one accent kept for live state. */
.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--control-radius);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;border:0;transition:background .15s,opacity .15s,color .15s}
.primary{background:var(--ink);color:var(--canvas)}.primary:hover{opacity:.88}
.secondary{background:var(--wash);color:var(--secondary)}.secondary:hover{background:color-mix(in oklab,var(--wash),var(--ink) 7%);color:var(--ink)}
.danger{background:var(--wash);color:var(--critical)}
.text-link{color:var(--ink);font-size:14px;text-underline-offset:4px;text-decoration-color:var(--control)}
.icon-button{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--control-radius);color:var(--secondary);font-size:18px;transition:background .15s,color .15s}
.icon-button:hover{background:var(--wash);color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;background:var(--wash);color:var(--secondary);line-height:1.5;white-space:nowrap}
.pill.connected{color:var(--good)}
.count-label{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.count-label b,.live-count b{font-weight:600;color:var(--ink)}
.live-count{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary)}
.live-count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;min-width:0;min-height:38px;padding:8px 12px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--control-radius);font-size:14px;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted)}textarea{resize:vertical;line-height:1.55}
input:not([type=radio]):not([type=checkbox]):hover,select:hover:not(:disabled),textarea:hover{border-color:var(--control)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
select{cursor:pointer}select:disabled{cursor:not-allowed;opacity:.6}
/* Native selects keep their form and keyboard semantics; supporting browsers get the styled picker. */
@supports(appearance:base-select){
  select,select::picker(select){appearance:base-select}
  select{align-items:center;gap:12px;line-height:1.5}
  select:open{border-color:var(--control)}
  select::picker-icon{content:"";width:7px;height:7px;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);color:var(--muted)}
  select:open::picker-icon{transform:rotate(225deg)}
  select::picker(select){background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:5px;margin-block:6px;box-shadow:0 12px 32px #17242e26;max-height:min(340px,60dvh);max-width:calc(100vw - 24px);overflow:auto}
  select option{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;min-height:40px;font:14px/1.5 var(--kai-body);white-space:normal;overflow-wrap:anywhere;cursor:pointer}
  select option:hover,select option:focus{background:var(--wash);outline:none}
  select option:checked{background:var(--wash);color:var(--ink);font-weight:500}
  select option:disabled{color:var(--muted);opacity:.55;cursor:not-allowed}
  select option::checkmark{order:1;margin-left:auto;color:var(--ink)}
}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);flex:none;margin:0}
.checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.field{display:grid;gap:8px}.field>label,legend{font-size:12px;font-weight:500;color:var(--secondary)}
.choice-group{display:grid;gap:10px}.choice-group legend{margin-bottom:8px}
/* Choice cards and chips: show what each option does; the selected one gets an ink ring. */
.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.choice{position:relative;display:block;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--sheet);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.choice:hover{background:var(--wash)}
.choice input,.chip input,.segmented input,.tabs input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice:has(input:focus-visible),.chip:has(input:focus-visible),.segmented label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.choice-body{display:grid;gap:6px}.choice-title{font-size:14px;font-weight:600;color:var(--ink)}
.choice-sample{font-size:12.5px;line-height:1.55;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);font-size:14px;color:var(--secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chip:hover{background:var(--wash)}
.chip:has(input:checked){background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.chip.is-disabled{color:var(--muted);border-style:dashed;cursor:default;background:transparent}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs label{position:relative;flex:none;cursor:pointer}
.tabs span{display:inline-block;padding:10px 12px;margin-bottom:-1px;font-size:14px;color:var(--secondary);border-bottom:2px solid transparent;transition:color .15s}
.tabs label:hover span{color:var(--ink)}
.tabs input:checked+span{color:var(--ink);font-weight:500;border-color:var(--ink)}
.tabs input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px}

/* Shell: unboxed sidebar on the canvas, one raised sheet for the work. */
.skip{position:fixed;left:16px;top:-100px;background:var(--ink);color:var(--canvas);padding:12px;z-index:100;border-radius:8px}.skip:focus{top:12px}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;padding:24px 12px 14px;z-index:20}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 0 0 10px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-name{font-family:var(--kai-display);font-size:30px;font-weight:300;line-height:1;letter-spacing:-1px}
/* Sign-in gate: the whole workspace stays hidden until a session exists. */
.gate{display:none}
body.locked .gate{display:grid;place-items:center;min-height:100dvh;padding:24px}
body.locked .sidebar,body.locked .main-shell,body.locked .tabbar{display:none}
.gate form{width:min(400px,100%);display:grid;gap:14px;padding:36px 32px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-sheet)}
.gate .brand-name{font-size:40px;letter-spacing:-1.4px;margin-bottom:14px}
.gate label{display:grid;gap:6px;font-size:12px;font-weight:500;color:var(--secondary)}
.gate #login-error{color:var(--critical);font-size:13px}.gate #login-error:empty{display:none}
#workspace-nav{display:grid;gap:2px}
#workspace-nav a{display:flex;align-items:center;gap:10px;text-decoration:none;border-radius:10px;padding:9px 12px;font-size:14px;color:var(--secondary);transition:background .15s,color .15s}
#workspace-nav a:hover{background:var(--wash);color:var(--ink)}
#workspace-nav a[aria-current=page]{background:var(--wash);color:var(--ink);font-weight:500}
.sidebar-bottom{margin-top:auto}
.account{position:relative;border-top:1px solid var(--line);padding:10px 0 0}
.account-trigger{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.account-trigger:hover,.account-trigger[aria-expanded=true]{background:var(--wash)}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--sheet);font-size:13px;font-weight:600}
.account-text{min-width:0;flex:1}.account strong{display:block;font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account small{display:block;color:var(--muted);font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);display:grid;gap:2px;padding:6px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #17242e26;z-index:40}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}.menu-item:hover{background:var(--wash)}
.menu-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.menu-item .glyph{width:18px;text-align:center;font-size:16px}
.main-shell{margin-left:var(--sidebar-width);padding:12px 12px 12px 0;min-width:0}
.sheet{min-height:calc(100dvh - 24px);max-width:1640px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-sheet);padding:0 0 32px}
.sheet-top{position:sticky;top:0;z-index:5;background:var(--sheet);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:30px var(--gutter) 18px}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
section[data-page]{padding:0 var(--gutter)}
#notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 var(--gutter) 16px;padding:12px 16px;border-radius:var(--radius);background:var(--wash);font-size:14px;overflow-wrap:anywhere}
#notice .icon-button{margin:-6px -8px -6px 0}
.page-footnote{color:var(--muted);font-size:12px;margin-top:16px}
.empty{padding:24px 16px;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}

/* Conversations: a reading surface, not an admin grid. */
.panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px}
.search-field{position:relative;display:block}.search-field svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:var(--muted)}
.search-field input[type=search]{padding-left:36px;width:220px;background:var(--wash);border-color:transparent}.search-field input[type=search]:focus-visible{background:var(--sheet)}
.conversation-grid{display:grid;grid-template-columns:236px minmax(0,1fr) 264px;min-height:540px;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--sheet)}
.call-list{border-right:1px solid var(--line);padding:8px;max-height:calc(100dvh - 260px);overflow:auto;scrollbar-width:thin}
.day-label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px;font-weight:600}
.call-item{width:100%;display:grid;gap:3px;text-align:left;border-radius:10px;padding:10px 12px;color:var(--ink);transition:background .15s}
.call-item:hover,.call-item.selected{background:var(--wash)}
.call-item-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.call-item strong{font-size:14px;font-weight:550;overflow-wrap:anywhere;min-width:0}
.call-item time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.tag{font-size:12px;color:var(--muted)}
.call-list .empty{padding:32px 12px}
.conversation{display:flex;flex-direction:column;min-width:0}
.conversation-top{display:flex;align-items:center;gap:12px;padding:20px 28px 16px;border-bottom:1px solid var(--line)}
.conversation-top>div{flex:1;min-width:0}
.conversation-top h3{font-size:18px;font-weight:500;letter-spacing:-.2px;margin:6px 0 2px;overflow-wrap:anywhere}
.live-dot{display:none;width:9px;height:9px;border-radius:50%;background:var(--accent);animation:breathe 1.8s ease-out infinite}
.conversation:has(.transcript[data-status=ongoing]) .live-dot{display:inline-block}
@keyframes breathe{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent),transparent 30%)}100%{box-shadow:0 0 0 10px transparent}}
.transcript{height:clamp(360px,calc(100dvh - 380px),640px);padding:8px 28px 20px;overflow-y:auto;scrollbar-width:thin}
.utterance{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:14px 0}
.utterance time{font-size:12px;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}
.utterance strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.utterance p{font-size:15.5px;line-height:1.65;margin-top:4px;color:var(--secondary);overflow-wrap:anywhere;max-width:66ch}
.utterance.agent .utterance-body{border-left:2px solid var(--control);padding-left:16px}
.utterance.agent p{color:var(--ink)}
.transcript-footer{margin-top:auto;display:flex;justify-content:space-between;gap:12px;padding:12px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
/* The orb appears in exactly one place inside the workspace: when there is nothing to read yet. */
.transcript .empty{padding:56px 16px;max-width:36ch;margin:0 auto}
.transcript .empty::before{content:"";display:block;width:110px;height:110px;margin:0 auto 22px;border-radius:47% 53% 42% 58%;background:radial-gradient(ellipse at 30% 35%,#8bc2d7 0,transparent 55%),radial-gradient(ellipse at 75% 60%,#e4aaa5 0,transparent 55%),radial-gradient(ellipse at 40% 80%,#8dace0 0,transparent 60%);filter:blur(14px);opacity:.85}
.call-insights{padding:20px 20px 20px 24px;border-left:1px solid var(--line);min-width:0}
.call-insights h3{font-size:15px;font-weight:600;margin:8px 0}
.call-insights p{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.figures{display:grid;gap:14px;padding:18px 0;margin-top:18px;border-top:1px solid var(--line)}
.figure{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.figure strong{font-family:var(--kai-display);font-weight:300;font-size:30px;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figure span{font-size:13px;color:var(--secondary)}
.figure small{flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.4}
.call-insights dl{margin:0;border-top:1px solid var(--line)}
.call-insights dl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}
dt{color:var(--muted)}dd{margin:0;text-align:right;overflow-wrap:anywhere}
.measurement-note{font-size:12px;color:var(--muted);margin-top:12px}summary{cursor:pointer}.measurement-note p{font-size:12px;padding-top:8px}

/* Agents: configuration that shows what each choice does. */
.setup-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;align-items:start;padding-top:8px}
.setup-grid:has(.try-panel[hidden]){grid-template-columns:minmax(0,1fr);max-width:980px}
.agent-form{display:grid;gap:22px}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line)}
.form-bottom small{max-width:70%;line-height:1.5}
.try-panel{display:grid;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--sheet);position:sticky;top:12px}
.try-panel h2{font-family:var(--kai-display);font-weight:300;font-size:24px;letter-spacing:-.6px}
.test-line{display:grid;gap:6px;background:var(--wash);border-radius:var(--control-radius);padding:14px 16px}
.test-line strong{font-family:var(--kai-display);font-weight:300;font-size:26px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.browser-section{display:grid;gap:12px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.browser-controls{display:flex;flex-wrap:wrap;gap:8px}
.calling #browser-status::before{content:"● ";color:var(--accent)}

/* Integrations: flat rows in one container. */
.section-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-top:8px}
.section-intro p{margin-top:4px;font-size:14px}
.section-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.integration-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.integration-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:16px 20px;background:var(--sheet)}
.integration-row+.integration-row{border-top:1px solid var(--line)}
.integration-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;font-size:15px;font-weight:600;color:var(--secondary);background:var(--wash)}
.integration-text h3{font-size:15px;font-weight:600}.integration-text p{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.5}

/* Dialogs */
dialog{background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 32px);padding:32px 28px 28px;box-shadow:0 24px 60px #17242e2e}
dialog::backdrop{background:#18232c66;backdrop-filter:blur(6px)}
dialog form{display:grid;gap:14px}
dialog h2{font-family:var(--kai-display);font-weight:300;font-size:28px;letter-spacing:-.8px;line-height:1.2}
dialog p{font-size:14px}
dialog label{display:grid;gap:6px;font-size:12px;font-weight:500;color:var(--secondary)}
.close-dialog{position:absolute;right:12px;top:12px;width:36px;height:36px;color:var(--secondary);border-radius:8px;font-size:22px}
#integration-fields,#outbound-add .form-grid{display:grid;gap:14px}#outbound-add .form-grid{padding-top:12px}
#outbound-add summary{font-size:13px;color:var(--secondary)}
#login-error,#integration-error,#outbound-error,#knowledge-error{color:var(--critical);overflow-wrap:anywhere;font-size:13px}
/* Knowledge: two source cards, then the list (reuses the integration rows). */
.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.knowledge-card{display:grid;gap:12px;align-content:start;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--sheet)}.knowledge-card h3{font-size:15px;font-weight:600}.knowledge-card .primary{justify-self:start}
.file-field{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:56px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--radius-control);background:var(--wash);cursor:pointer;transition:border-color .15s,background .15s}
.file-field:hover,.file-field.dragover{border-color:var(--control);background:var(--sheet)}.file-field:focus-within{outline:2px solid var(--focus);outline-offset:2px}
#file-field>input[type=file]{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer} /* the real control covers the whole field: click and drop both work natively */
.file-button{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:30px;background:var(--sheet);font-size:13px;font-weight:500;color:var(--ink);pointer-events:none}
.file-name{flex:1;min-width:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere;pointer-events:none}.file-name.chosen{color:var(--ink)}
.pill.failed{color:var(--critical)}
.depth-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.depth-row fieldset{flex:1 1 auto;min-width:0}.depth-row .primary{margin-left:auto}
body:not([data-page=conversations]) #new-call{display:none}
.source-meta{font-size:12.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}.source-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

#login-error:empty,#integration-error:empty,#outbound-error:empty,#knowledge-error:empty{display:none}
[aria-busy=true]{cursor:progress}

/* Collapsed sidebar and the phone tab bar. */
.tabbar{display:none}
.phone-bar,#back-to-calls{display:none}
body.nav-collapsed{--sidebar-width:96px}
.nav-collapsed #workspace-nav a span,.nav-collapsed .account-text{display:none}
.nav-collapsed .brand-name{font-size:22px;letter-spacing:-.6px}
.nav-collapsed .brand-row{padding:0;justify-content:center;gap:2px}.nav-collapsed #collapse-nav{margin:0;width:24px;height:28px;font-size:16px}
/* Desktop: the sheet and its title stay put; the page's content scrolls inside the sheet. */
@media(min-width:801px){
  .sheet{height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  .sheet-top,#notice,.phone-bar{flex:none}
  section[data-page]{flex:1;min-height:0;overflow:auto;padding-bottom:32px;scrollbar-width:thin}
}
/* Conversations on wide screens: only the call list, the transcript and the details column
   scroll, each inside its own pane. */
@media(min-width:1201px){
  .sheet:has(section[data-page=conversations]:not([hidden])){height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  .sheet-top,#notice{flex:none}
  section[data-page=conversations]{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:16px}
  section[data-page=conversations] .conversation-panel{flex:1;min-height:0;display:flex;flex-direction:column}
  section[data-page=conversations] .panel-toolbar{flex:none}
  section[data-page=conversations] .conversation-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
  section[data-page=conversations] .call-list{max-height:none;min-height:0;overflow:auto}
  section[data-page=conversations] .conversation{min-height:0}
  section[data-page=conversations] .transcript{flex:1;height:auto;min-height:0}
  section[data-page=conversations] .call-insights{min-height:0;overflow:auto;scrollbar-width:thin}
  section[data-page=conversations] .page-footnote{flex:none;margin-top:12px}
}
.nav-collapsed #workspace-nav a{justify-content:center}.nav-collapsed .account-trigger{justify-content:center;padding:8px 0}.nav-collapsed .account-menu{right:auto;min-width:180px}
@media(min-width:1700px){.conversation-grid{grid-template-columns:260px minmax(0,1fr) 300px}}
@media(max-width:1200px){
  :root{--gutter:24px}
  .conversation-grid{grid-template-columns:220px minmax(0,1fr)}
  .call-insights{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:20px 0 0}
  .call-insights dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.figures{grid-template-columns:1fr 1fr}
  .setup-grid{grid-template-columns:1fr}.try-panel{position:static}
}
@media(max-width:800px){
  :root{--gutter:16px}
  .sidebar{display:none}.main-shell{margin:0;padding:0}
  .sheet{border:0;border-radius:0;min-height:100dvh;padding-bottom:calc(var(--tabbar-height) + 24px + env(safe-area-inset-bottom))}
  .sheet-top{padding:16px var(--gutter) 12px}h1{font-size:28px}
  .phone-bar{display:flex;align-items:center;gap:12px;padding:14px var(--gutter) 0}.phone-bar .brand-name{font-size:22px;letter-spacing:-.6px}
  #phone-account{flex:1;min-width:0;display:flex;justify-content:flex-end}#phone-account .account{padding:0;border:0;margin:0;max-width:100%}
  #phone-account .account-trigger{flex-direction:row-reverse;gap:8px;padding:6px 8px;width:auto}#phone-account .account-text{text-align:right}
  #phone-account .account-menu{bottom:auto;top:calc(100% + 6px);left:auto;right:0;min-width:200px}
  .header-actions #mode{display:none}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--sheet);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:6px 2px;border-radius:10px;font-size:10.5px;color:var(--muted);text-decoration:none}
  .tabbar a svg{width:20px;height:20px}
  .tabbar a[aria-current=page]{color:var(--ink);font-weight:500;background:var(--wash)}
  /* One pane at a time: the list, then the conversation you tapped, with a back arrow. */
  .conversation-grid{display:block;min-height:0;border:0;border-radius:0}.conversation-grid.detail{margin-top:0}
  .call-list{display:block;overflow:visible;max-height:none;border:0;padding:4px 0}
  .call-item{padding:12px 10px;border-bottom:1px solid var(--line);border-radius:0}.call-item:last-child{border-bottom:0}.call-item strong{font-size:15px}
  .conversation-grid .conversation,.conversation-grid .call-insights{display:none}
  section[data-page=conversations]:has(.conversation-grid.detail) .panel-toolbar{display:none}
  .conversation-grid.detail .call-list{display:none}.conversation-grid.detail .conversation{display:flex}.conversation-grid.detail .call-insights{display:block}
  #back-to-calls:not([hidden]){display:inline-flex;flex:none;font-size:26px;line-height:1;margin-left:-8px}
  .conversation-top{padding:8px 0 12px;gap:8px}.transcript{height:auto;max-height:none;padding:4px 0 16px}
  .transcript-footer{padding:12px 0;flex-wrap:wrap}
  .call-insights{padding:16px 0 0;border-left:0}.call-insights dl{grid-template-columns:1fr}
  .toolbar-actions{width:100%;padding-bottom:12px}.search-field{flex:1}.search-field input[type=search]{width:100%}
  .primary,.secondary,.danger,input:not([type=radio]):not([type=checkbox]),select,.chip{min-height:44px}.icon-button{width:44px;height:44px}.tabs span{padding:12px}
  /* Icon, then title + description with the status beneath, action on the right. */
  .integration-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;padding:14px 14px 14px 12px;align-items:start}
  .integration-icon{grid-row:1/3;width:40px;height:40px;font-size:14px}.integration-text h3{font-size:15px}.integration-text p{font-size:12.5px}
  .integration-row .pill{grid-column:2;grid-row:2;justify-self:start}
  .integration-row .primary,.integration-row .secondary{grid-column:3;grid-row:1/3;align-self:center;min-height:40px;padding:0 14px;font-size:13px}
  .form-bottom{flex-wrap:wrap}.form-bottom small{max-width:none}
  .knowledge-grid{grid-template-columns:1fr}.source-actions{flex-direction:column;align-items:stretch}
  .chip .wide,#call-count{display:none}.chips{gap:6px}.chip{padding:0 12px}.depth-row .primary{margin-left:0}
  dialog{padding:24px 20px 20px}
}
@media(max-width:540px){.cards,.figures{grid-template-columns:1fr}.sheet-top{gap:12px}.search-field{flex:1 1 100%;order:-1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}