/* Component layout lives in a lower layer so shared button tokens always win. */
@layer components {
:root {
 color-scheme:light; --canvas:#ffffff; --surface-1:#f7f8fa; --surface-2:#eff0f3; --surface-3:#e9ebf0; --surface-4:#e8eaf2; --line:#e9eaee; --ink:#202127; --muted:#4b4f59; --subtle:#646975; --brand-color:#5e6ad2; --accent:var(--brand-color); --focus:var(--brand-color); --sidebar-brand-tint:color-mix(in srgb,var(--brand-color) 20%,var(--surface-1)); --player-surface:var(--surface-2);
 --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px; --text-xl:21px; --text-xxl:24px;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-synthesis:none; font-size:var(--text-sm);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--surface-1); color:var(--ink); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; padding:12px 16px; border-radius:6px; background:var(--surface-4); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.app-shell { --ui-scale:1; --sidebar-width:248px; display:grid; grid-template-columns:0px var(--sidebar-width) minmax(0,1fr); min-height:100vh; min-height:calc(100dvh / var(--ui-scale)); background:#141516; zoom:var(--ui-scale); transition:grid-template-columns 240ms cubic-bezier(.22,1,.36,1); }
.app-shell.rail-open { grid-template-columns:64px var(--sidebar-width) minmax(0,1fr); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.facility-rail { position:relative; z-index:2; display:flex; align-items:center; flex-direction:column; gap:24px; width:64px; padding:24px 8px; background:#141516; border-right:1px solid #23252a; visibility:hidden; opacity:0; transform:translateX(-64px); pointer-events:none; transition:opacity 200ms ease,transform 240ms cubic-bezier(.22,1,.36,1),visibility 0s linear 240ms; }
.rail-open .facility-rail { visibility:visible; opacity:1; transform:translateX(0); pointer-events:auto; transition-delay:0s; }
.facility-list { display:flex; flex-direction:column; gap:12px; }
.add-space { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:#989da8; cursor:pointer; transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,transform 160ms ease; }
.add-space svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.add-space:hover,.add-space:focus-visible { color:#f7f8f8; background:#23252a; border-color:#34343a; }
.add-space:focus-visible { outline-color:#828fff; }
.add-space:active { transform:scale(.94); }
dialog { width:min(400px,calc(100% - 32px)); padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); color:var(--ink); }
dialog::backdrop { background:rgb(1 1 2 / .35); }
dialog h2 { margin:0; font-size:var(--text-lg); font-weight:600; letter-spacing:-.3px; }
dialog h2 { padding-right:32px; }
.dialog-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--subtle); cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.dialog-close:hover { background:var(--surface-2); color:var(--ink); }
.dialog-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
dialog p { color:var(--subtle); font-size:var(--text-sm); line-height:20px; margin:8px 0 24px; }
dialog label { display:block; margin-bottom:8px; font-size:var(--text-sm); }
dialog input { width:100%; min-height:40px; border:1px solid #8a8f98; border-radius:6px; padding:8px 12px; background:var(--canvas); color:var(--ink); font:inherit; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.dialog-actions button { min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface-1); color:var(--ink); cursor:pointer; }
.dialog-actions .dialog-submit { background:var(--accent); color:#fff; border-color:var(--accent); }
.dialog-submit:hover { background:#515cbc; }
.dialog-cancel:hover { background:var(--surface-3); }
.facility-button { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #34343a; border-radius:10px; background:#23252a; color:#d0d6e0; font-size:var(--text-xs); font-weight:600; cursor:pointer; }
.facility-button { transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease; }
.facility-button:hover { background:#303239; color:#f7f8f8; transform:translateY(-1px); }
.facility-button:active { transform:scale(.96); }
.facility-button[aria-pressed="true"] { border-color:#828fff; background:#303448; color:#f7f8f8; }
.facility-button:focus-visible { outline-color:#828fff; }
.facility-notification { position:absolute; top:-3px; right:-3px; width:10px; height:10px; border:2px solid #141516; border-radius:50%; background:#f05252; }
.facility-button[aria-pressed="true"]::before { content:""; position:absolute; left:-9px; top:13px; bottom:13px; width:3px; border-radius:0 2px 2px 0; background:#828fff; }
.facility-tooltip { display:none; position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); z-index:5; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font-size:var(--text-xs); line-height:18px; font-weight:400; white-space:nowrap; pointer-events:none; }
.facility-button:hover .facility-tooltip,.facility-button:focus-visible .facility-tooltip { display:block; }
.facility-rail.tooltips-dismissed .facility-tooltip { display:none; }
.demo-label { margin-left:8px; font-size:var(--text-xs); border:1px solid var(--line); border-radius:4px; padding:1px 4px; }
.sidebar { display:flex; flex-direction:column; background-color:var(--surface-1); background-image:linear-gradient(to top,var(--sidebar-brand-tint),var(--surface-1) 260px); padding:0 24px 0 12px; margin:8px 0; border-radius:12px 0 0 12px; }
.workspace { min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:var(--text-xl); font-weight:600; letter-spacing:-.4px; border-radius:4px; }
.brand-mark { width:25px; height:25px; display:grid; place-items:center; }
.brand-mark svg { width:22px; height:22px; fill:var(--accent); }
.workspace-caption { margin:0 12px 24px; color:var(--subtle); font-size:var(--text-xs); line-height:18px; }
.space-selector { position:relative; display:flex; align-items:center; min-height:40px; margin:0 4px 24px; padding:8px 30px 8px 42px; border:1px solid #d1d4dc; border-radius:8px; background:var(--canvas); color:var(--ink); font-size:var(--text-sm); text-align:left; cursor:pointer; transition:border-color 140ms ease,background-color 140ms ease; }
#space-name-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.space-selector[aria-expanded="true"] { border-color:var(--accent); background:#f3f4fc; }
.space-selector:hover { border-color:#8a8f98; }
.space-selector:focus-within { outline:2px solid var(--focus); outline-offset:3px; }
.space-avatar { position:absolute; left:10px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#eceefa; color:#515cbc; font-size:var(--text-xs); font-weight:600; pointer-events:none; }
.space-chevron { position:absolute; right:10px; width:16px; height:16px; fill:none; stroke:var(--subtle); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.navigation-container { display:flex; flex-direction:column; flex:1; padding-bottom:12px; }
.primary-nav { display:grid; gap:4px; }
.nav-group-toggle { display:flex; align-items:center; gap:8px; min-height:36px; padding:8px 12px; border:0; border-radius:6px; background:transparent; color:var(--subtle); text-align:left; font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.nav-group-toggle:hover { background:var(--surface-2); color:var(--ink); }
.group-icon { display:none; }
.group-chevron { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms ease; }
.nav-group-toggle[aria-expanded="false"] .group-chevron { transform:rotate(-90deg); }
.conversation-links { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows 180ms ease,opacity 140ms ease; }
.conversation-links.is-closed { grid-template-rows:0fr; opacity:0; }
.conversation-links-inner { min-height:0; overflow:hidden; padding:0 4px; }
.conversation-links .nav-link { padding-left:12px; }
.nav-link { position:relative; display:flex; align-items:center; gap:10px; min-height:40px; margin:2px 0; padding:9px 12px; color:var(--muted); border-radius:6px; font-size:var(--text-sm); line-height:20px; transition:background-color 120ms ease,color 120ms ease; }
.nav-link svg,.menu-toggle svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-link svg { color:var(--subtle); }
.nav-link:hover { background:var(--surface-2); color:var(--ink); }
.nav-link[aria-current="page"] { background:var(--surface-4); color:var(--ink); font-weight:500; }
.nav-link[aria-current="page"] svg { color:var(--accent); }
.sidebar-bottom { margin-top:auto; padding-top:40px; }
.scale-controls { display:flex; align-items:center; justify-content:space-between; width:126px; margin:0 12px 16px; padding:2px; border:1px solid var(--line); border-radius:6px; }
.scale-controls button { min-width:30px; height:30px; padding:0 5px; border:0; border-radius:4px; color:var(--muted); background:transparent; cursor:pointer; font-size:var(--text-sm); font-variant-numeric:tabular-nums; transition:background-color 140ms ease,color 140ms ease,transform 140ms ease; }
.scale-controls button:hover { background:var(--surface-3); color:var(--ink); }
.scale-controls button:active { transform:scale(.94); }
.scale-controls button:disabled { opacity:.6; cursor:default; transform:none; }
.profile { display:flex; align-items:center; gap:6px; margin-left:auto; padding:4px 0 4px 12px; }
.profile-details { text-align:left; }
.avatar { width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border:1px solid #d1d4dc; border-radius:50%; background:var(--surface-3); font-size:var(--text-xs); font-weight:500; }
.profile-name,.profile-description { display:block; line-height:16px; }
.profile-name { font-size:var(--text-xs); }
.profile-description { font-size:var(--text-xs); color:var(--subtle); }
main { position:relative; display:flex; flex-direction:column; min-width:0; margin:8px 8px 8px -12px; background:var(--canvas); border:1px solid var(--line); border-radius:12px; overflow:clip; }
main:focus { outline:none; }
.page-header { position:relative; min-height:64px; display:flex; align-items:center; gap:16px; padding:0 24px; border-bottom:1px solid var(--line); }
.breadcrumbs { display:flex; align-items:center; gap:6px; min-width:0; font-size:var(--text-xs); line-height:18px; }
.breadcrumbs { gap:10px; }
.breadcrumbs .breadcrumb-back.ui-button { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; }
.breadcrumbs .breadcrumb-parent.ui-button { min-height:32px; height:32px; padding:0; font-size:var(--text-xs); line-height:18px; }
.breadcrumb-parent { min-height:32px; padding:4px 0; border:0; background:transparent; color:var(--subtle); white-space:nowrap; cursor:pointer; }
.breadcrumb-parent:hover { color:var(--ink); }
.breadcrumbs svg { width:12px; height:12px; flex-shrink:0; fill:none; stroke:var(--subtle); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#breadcrumb-current { color:var(--ink); font-weight:500; white-space:nowrap; }
.header-search { display:flex; align-items:center; gap:8px; width:280px; min-width:140px; margin-left:auto; padding:0 10px; min-height:36px; border:1px solid #d1d4dc; border-radius:7px; background:var(--surface-1); transition:border-color 140ms ease,background-color 140ms ease; }
.header-search:focus-within { background:var(--canvas); outline:2px solid var(--focus); outline-offset:2px; }
.header-search svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:var(--subtle); stroke-width:2; stroke-linecap:round; }
.header-search input { width:100%; min-width:0; padding:8px 0; border:0; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-sm); }
.header-search input::placeholder { color:var(--subtle); opacity:1; }
.header-search kbd { color:var(--subtle); font:inherit; font-size:var(--text-xs); border:1px solid var(--line); border-radius:3px; padding:0 4px; }
.page-header .profile { margin-left:0; padding-left:6px; flex-shrink:0; }
@media(max-width:1000px) {
 .page-header { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; gap:12px; }
 .breadcrumbs { flex:1; }
 .header-search { order:2; width:100%; flex-basis:100%; }
}
.notifications-button { position:relative; display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--subtle); cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.notifications-button:hover,.notifications-button[aria-expanded="true"] { background:var(--surface-2); color:var(--ink); }
.notifications-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.notification-dot { position:absolute; top:5px; right:6px; width:8px; height:8px; border:2px solid var(--canvas); border-radius:50%; background:#d92d3d; }
.notifications-panel { position:absolute; top:calc(100% - 4px); right:20px; z-index:5; width:min(300px,calc(100% - 40px)); padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--canvas); }
.notifications-panel h2 { margin:0 0 12px; font-size:var(--text-sm); font-weight:600; }
.notifications-panel p { margin:0 0 8px; font-size:var(--text-sm); line-height:20px; }
.notification-demo { color:var(--subtle); font-size:var(--text-xs); }
h1 { margin:0; font-size:var(--text-sm); line-height:22px; font-weight:500; letter-spacing:-.05px; }
.page-content { flex:1; }
.page-description { max-width:680px; margin:0; padding:24px; color:var(--subtle); font-size:var(--text-md); line-height:24px; }
.calls-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px 16px; }
.call-history-context { align-items:center; justify-content:space-between; gap:12px; margin:0 24px 16px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface-1); color:var(--muted); font-size:var(--text-xs); }
.call-history-context:not([hidden]) { display:flex; }
.call-history-context button { min-height:32px; padding:5px 8px; border:0; border-radius:4px; background:transparent; color:var(--accent); font:inherit; white-space:nowrap; cursor:pointer; }
.call-history-context button:hover { background:var(--surface-3); }
#contact-source-dialog .dialog-actions { flex-wrap:wrap; }
.call-filters,.alert-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:10px; background:var(--surface-1); }
.call-filters button,.alert-tabs button { min-height:32px; padding:5px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease; }
.call-filters button:hover,.alert-tabs button:hover { color:var(--ink); background:var(--surface-2); }
.call-filters button[aria-pressed="true"],.alert-tabs button[aria-selected="true"] { background:var(--canvas); border-color:var(--line); color:var(--ink); font-weight:500; }
.calls-count { color:var(--subtle); font-size:var(--text-xs); white-space:nowrap; }
.calls-toolbar { flex-wrap:wrap; }
.calls-toolbar-right { display:flex; align-items:center; gap:16px; margin-left:auto; }
.calls-toolbar-right { flex-wrap:wrap; }
.intent-filter { position:relative; }
#intent-trigger { justify-content:space-between; gap:10px; }
#intent-trigger .intent-chevron { width:14px; height:14px; flex-shrink:0; stroke-width:2; stroke-linejoin:round; transition:transform 140ms ease; }
#intent-trigger[aria-expanded="true"] .intent-chevron { transform:rotate(180deg); }
.intent-options { position:absolute; top:calc(100% + 6px); right:0; z-index:10; min-width:190px; padding:4px; border:1px solid #d1d4dc; border-radius:8px; background:var(--canvas); }
.intent-options button { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:6px 8px; border:0; border-radius:4px; background:transparent; color:var(--ink); text-align:left; font-size:var(--text-xs); cursor:pointer; }
.intent-options button:hover,.intent-options button:focus-visible { background:var(--surface-2); outline-offset:-2px; }
.intent-check { width:14px; color:var(--accent); }
.call-alerts { display:flex; flex-wrap:wrap; gap:4px; max-width:220px; }
.call-alerts[data-limit-alert-lines] { width:220px; }
.call-alerts .intent-badge[hidden] { display:none; }
.call-alert-overflow { display:inline-flex; align-items:center; padding:5px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--muted); font-size:var(--text-xs); line-height:18px; font-weight:500; white-space:nowrap; }
.intent-icon { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.intent-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 6px; border:1px solid color-mix(in srgb,var(--intent-color) 20%,var(--canvas)); border-radius:5px; background:linear-gradient(90deg,color-mix(in srgb,var(--intent-color) 6%,var(--canvas)),color-mix(in srgb,var(--intent-color) 26%,var(--canvas))); color:var(--ink); font-size:var(--text-xs); line-height:18px; font-weight:400; white-space:nowrap; }
.date-filter-button { display:flex; align-items:center; gap:8px; min-height:32px; padding:5px 10px; border:1px solid #d1d4dc; border-radius:6px; background:var(--canvas); color:var(--muted); font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease; }
.date-filter-button:hover { background:var(--surface-1); }
.date-filter-button.has-filter { color:var(--accent); border-color:var(--accent); }
.date-filter-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.date-dialog { width:min(360px,calc(100% - 32px)); }
.date-dialog p { margin-bottom:16px; }
.date-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.date-presets button { min-height:32px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface-1); color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.date-presets button:hover { background:var(--surface-3); }
.date-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.date-fields input { display:block; margin-top:8px; font-size:var(--text-xs); }
.calendar-header { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; font-size:var(--text-sm); font-weight:500; }
.calendar-header button { width:32px; height:32px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:var(--text-lg); cursor:pointer; }
.calendar-header button:hover { background:var(--surface-2); }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-weekdays span { text-align:center; padding:6px 0; color:var(--subtle); font-size:var(--text-xs); }
.calendar-days button { height:32px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.calendar-days button:hover { background:var(--surface-2); }
.calendar-days button.in-range { background:var(--surface-4); }
.calendar-days button[aria-current="date"] { border-color:#8a8f98; }
.calendar-days button[aria-pressed="true"] { background:var(--accent); color:white; }
.date-dialog .date-error { margin:12px 0 0; color:#b42332; font-size:var(--text-xs); }
.calls-table-scroll { overflow-x:auto; }
.calls-table-scroll:focus-visible { outline-offset:-3px; }
.calls-table { width:100%; table-layout:fixed; border-collapse:collapse; white-space:normal; text-align:left; font-size:var(--text-sm); }
.calls-table th { height:38px; background:var(--surface-1); color:var(--subtle); font-size:var(--text-xs); font-weight:500; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 16px; }
.calls-table td { height:58px; padding:10px 16px; border-bottom:1px solid #eff0f3; color:var(--muted); }
.calls-table th:first-child,.calls-table td:first-child { padding-left:24px; }
.calls-table th:last-child,.calls-table td:last-child { padding-right:24px; }
.calls-table .call-play-column { width:auto; padding-right:8px; }
.call-play-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:66px; height:30px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.call-play-button svg { width:16px; height:16px; fill:currentColor; }
.call-play-button:hover:not(:disabled) { background:var(--surface-2); color:var(--accent); }
.call-play-button:disabled { cursor:default; color:var(--subtle); }
.call-record-view { padding:0; }
.record-back { min-height:36px; padding:6px 0; border:0; background:transparent; color:var(--accent); font-size:var(--text-sm); cursor:pointer; }
.call-record-view h2 { margin:24px 0 4px; font-size:var(--text-xxl); font-weight:600; letter-spacing:-.4px; }
.record-subtitle { margin:0 0 24px; color:var(--subtle); font-size:var(--text-xs); }
.record-metadata { display:grid; grid-template-columns:140px minmax(0,1fr); gap:14px; max-width:600px; padding:20px; border:1px solid var(--line); border-radius:8px; font-size:var(--text-sm); }
.record-metadata dt { color:var(--subtle); }
.record-metadata dd { margin:0; overflow-wrap:anywhere; }
.record-audio-state { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:8px; max-width:600px; }
.record-audio-state h3 { margin:0; font-size:var(--text-sm); font-weight:500; }
.record-audio-state p { color:var(--subtle); font-size:var(--text-sm); }
.page-header:has(.header-search[hidden]) .profile { margin-left:auto; }
.record-layout { display:grid; grid-template-columns:240px minmax(0,1fr) 280px; gap:0; min-height:calc(100dvh / var(--ui-scale) - 300px); }
.record-layout > section { min-width:0; }
.record-alerts { border-right:1px solid var(--line); }
.record-details { border-left:1px solid var(--line); }
.record-layout > section > h3 { display:flex; align-items:center; min-height:52px; margin:0; padding:14px 20px; border-bottom:1px solid var(--line); font-size:var(--text-sm); font-weight:500; }
.record-details-content { padding:20px; }
.record-details-content h2 { margin:0 0 6px; font-size:var(--text-lg); }
.record-layout .record-metadata { margin:0; padding:0; border:0; border-radius:0; grid-template-columns:1fr; gap:6px; }
.record-layout .record-metadata dd { margin-bottom:12px; }
.record-transcript { padding-bottom:24px; }
#record-transcript-content { padding:12px; }
#record-alert-list { padding:8px; }
.record-alert-item { display:block; width:100%; margin:4px 0; padding:12px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease; }
.record-alert-item:hover { background:var(--surface-1); }
.record-alert-item[aria-pressed="true"] { border-color:transparent; background:var(--surface-4); color:var(--ink); }
.record-alert-item[aria-pressed="true"] .intent-badge svg { color:var(--intent-color); }
.record-alert-category { display:block; font-size:var(--text-sm); font-weight:500; }
.record-alert-time { display:block; margin-top:6px; color:var(--accent); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.record-alert-summary { display:block; margin-top:8px; color:var(--subtle); font-size:var(--text-xs); line-height:18px; }
.record-alert-empty { margin:12px; color:var(--subtle); font-size:var(--text-xs); line-height:20px; }
.transcript-segment { display:flex; gap:16px; padding:16px; border:1px solid transparent; border-radius:8px; transition:background-color 140ms ease,border-color 140ms ease; }
.transcript-segment.segment-current { background:var(--surface-1); border-color:var(--line); }
.transcript-playable > .segment-timestamp { flex-shrink:0; align-self:flex-start; padding:4px; border:0; border-radius:4px; background:transparent; color:var(--accent); font-size:var(--text-xs); font-variant-numeric:tabular-nums; cursor:pointer; }
.segment-speaker { font-size:var(--text-xs); color:var(--subtle); }
.transcript-segment p { margin:6px 0 8px; font-size:var(--text-md); line-height:26px; }
.segment-flag { display:inline-block; }
.call-player { position:sticky; bottom:0; z-index:4; margin-top:auto; padding:20px 24px 24px; border-top:1px solid color-mix(in srgb,var(--brand-color) 18%,var(--line)); background:var(--player-surface); }
.player-heading { display:flex; justify-content:space-between; gap:16px; color:var(--subtle); font-size:var(--text-xs); line-height:18px; }
.player-timeline { position:relative; margin:16px 0 20px; padding-top:8px; }
#player-waveform { display:block; width:100%; height:72px; cursor:pointer; }
.waveform-base { fill:color-mix(in srgb,var(--brand-color) 38%,var(--canvas)); }
.waveform-played { fill:var(--brand-color); }
#player-seek { display:block; appearance:none; width:100%; height:4px; margin:0; border-radius:2px; background:var(--seek-background,linear-gradient(to right,var(--accent) var(--played,0%),#d1d4dc var(--played,0%))); cursor:pointer; }
#player-seek::-webkit-slider-thumb { appearance:none; width:12px; height:12px; border-radius:50%; background:var(--accent); }
#player-seek::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:var(--accent); }
.timeline-marker { position:absolute; top:4px; height:76px; padding:0; border:1px solid color-mix(in srgb,var(--intent-color) 30%,transparent); border-bottom:3px solid var(--intent-color); border-radius:4px; background:color-mix(in srgb,var(--intent-color) 10%,transparent); cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease; }
.timeline-marker:hover,.timeline-marker[aria-expanded="true"] { background:color-mix(in srgb,var(--intent-color) 20%,transparent); border-color:var(--intent-color); }
.marker-popover { position:absolute; bottom:calc(100% + 8px); z-index:8; width:min(300px,100%); padding:16px; border:1px solid #d1d4dc; border-radius:8px; background:var(--canvas); color:var(--ink); }
.marker-popover::after { content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.marker-popover h4 { margin:0 0 6px; font-size:var(--text-sm); font-weight:600; }
.marker-popover-time { color:var(--subtle); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.marker-popover p { margin:12px 0; font-size:var(--text-sm); line-height:21px; }
.marker-popover button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface-1); color:var(--ink); font-size:var(--text-xs); cursor:pointer; }
.marker-popover button svg { width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.marker-popover button:hover { background:var(--surface-3); }
.player-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.player-controls button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--muted); font-size:var(--text-xs); cursor:pointer; }
.player-controls button:hover:not(:disabled) { background:var(--surface-2); }
.player-controls button:disabled { color:var(--subtle); cursor:default; }
#player-play svg { width:14px; height:14px; fill:currentColor; }
.player-time { padding:0 8px; color:var(--subtle); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.player-flag-list { display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.player-flag-list .player-flag { border-color:color-mix(in srgb,var(--intent-color) 20%,var(--canvas)); color:var(--ink); background:linear-gradient(90deg,color-mix(in srgb,var(--intent-color) 6%,var(--canvas)),color-mix(in srgb,var(--intent-color) 26%,var(--canvas))); font-size:var(--text-xs); }
.player-flag svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.player-flag span { font-variant-numeric:tabular-nums; }
@media(max-width:1250px) { .record-layout { grid-template-columns:210px minmax(0,1fr); } .record-details { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } .record-layout .record-metadata { grid-template-columns:140px minmax(0,1fr); } }
@media(max-width:800px) { .record-layout { grid-template-columns:minmax(0,1fr); } .record-alerts { border-right:0; } .record-transcript { border-top:1px solid var(--line); } }
.calls-table tbody tr { transition:background-color 140ms ease; }
.calls-table tbody tr:hover { background:#fafafb; }
.calls-table tbody .call-row-processing { background:var(--surface-2); color:var(--muted); }
.calls-table tbody .call-row-processing:hover { background:var(--surface-3); }
.call-row-processing .call-person { color:var(--muted); }
.calls-table th button { display:inline-flex; align-items:center; gap:8px; min-height:24px; padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.calls-table th button:hover { color:var(--ink); }
.sort-arrow { color:var(--subtle); opacity:.45; font-size:var(--text-sm); }
.calls-table th[aria-sort="ascending"] .sort-arrow,.calls-table th[aria-sort="descending"] .sort-arrow { color:var(--accent); opacity:1; }
.call-id,.call-number,.call-time,.call-duration,.call-person-id { font-variant-numeric:tabular-nums; }
.call-time-date,.call-time-meta { display:block; white-space:nowrap; }
.call-time-meta { margin-top:4px; color:var(--subtle); font-size:var(--text-xs); }
.calls-table .call-id { color:var(--subtle); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--text-xs); }
.call-person { display:block; color:var(--ink); font-weight:500; }
.call-person-id { display:block; margin-top:3px; color:var(--subtle); font-size:var(--text-xs); }
.contact-suggestion { display:flex; align-items:center; gap:6px; min-height:24px; margin:2px 0 -2px; padding:1px 0; border:0; border-radius:3px; background:transparent; color:var(--subtle); font-size:var(--text-xs); cursor:pointer; }
.contact-suggestion:hover .contact-name { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.contact-unknown { display:block; margin-top:4px; color:var(--subtle); font-size:var(--text-xs); }
.contact-source-details { display:grid; grid-template-columns:72px 1fr; gap:10px; font-size:var(--text-sm); line-height:20px; }
.contact-source-details dt { color:var(--subtle); }
.contact-source-details dd { margin:0; }
#contact-source-excerpt { margin:20px 0; padding:12px 16px; border-left:2px solid var(--accent); background:var(--surface-1); font-size:var(--text-md); line-height:24px; }
.direction-symbol { display:inline-block; margin-right:6px; color:var(--subtle); }
.call-direction { display:inline-flex; align-items:center; font-size:var(--text-xs); }
.call-direction.inbound { color:#b42332; }
.call-direction.outbound { color:#18794e; }
.call-direction .direction-symbol { color:inherit; font-size:var(--text-md); }
.processing-label { display:inline-flex; align-items:center; gap:7px; font-size:var(--text-xs); }
.processing-dot { width:6px; height:6px; border-radius:50%; background:#8a8f98; }
.processing-label.processing .processing-dot { width:10px; height:10px; border:1.5px solid color-mix(in srgb,var(--brand-color) 25%,transparent); border-top-color:var(--brand-color); background:transparent; animation:processing-spin 800ms linear infinite; }
@keyframes processing-spin { to { transform:rotate(360deg); } }
.processing-label.needs_attention { color:#8d4900; }
.processing-label.needs_attention .processing-dot { background:#ad5c00; }
.call-alert-label { display:inline-flex; align-items:center; min-height:24px; padding:2px 7px; border:1px solid #f2d5d7; border-radius:5px; background:#fff5f5; color:#b42332; font-size:var(--text-xs); }
.call-pending { color:var(--subtle); font-size:var(--text-xs); }
.calls-empty { margin:0; padding:48px 24px; color:var(--subtle); text-align:center; font-size:var(--text-sm); }
.calls-empty p { margin:0 0 16px; }
.calls-empty button { min-height:36px; padding:7px 12px; border:1px solid #d1d4dc; border-radius:6px; background:var(--canvas); color:var(--ink); font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease; }
.calls-empty button:hover { background:var(--surface-2); border-color:#8a8f98; }
.calls-footer { display:flex; justify-content:space-between; gap:12px; padding:16px 24px; color:var(--subtle); font-size:var(--text-xs); }
.menu-toggle { display:none; align-items:center; justify-content:center; width:40px; height:40px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.sidebar-toggle { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; padding:0; border:0; border-radius:6px; color:var(--subtle); background:transparent; cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.sidebar-toggle:hover { background:var(--surface-3); color:var(--ink); }
.sidebar-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(min-width:641px) {
 .sidebar-collapsed { --sidebar-width:76px; }
 .sidebar-collapsed .sidebar { min-width:0; padding:0 20px 0 8px; }
 .sidebar-collapsed .workspace { padding:0; justify-content:center; }
 .sidebar-collapsed .brand { display:none; }
 .sidebar-collapsed .sidebar-toggle { width:40px; height:40px; }
 .sidebar-collapsed .space-selector { width:44px; min-height:44px; margin:0 0 24px; padding:0; }
 .sidebar-collapsed .space-avatar { left:10px; }
 .sidebar-collapsed #space-name-label,.sidebar-collapsed .space-chevron { display:none; }
 .sidebar-collapsed .nav-link { width:44px; padding:12px 13px; gap:0; }
 .sidebar-collapsed .conversation-links-inner { padding:0; }
 .sidebar-collapsed .nav-group-toggle { width:44px; padding:10px 13px; min-height:40px; }
 .sidebar-collapsed .nav-group-toggle span,.sidebar-collapsed .group-chevron { display:none; }
 .sidebar-collapsed .group-icon { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
 .sidebar-collapsed .nav-link span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .sidebar-collapsed .scale-controls { display:none; }
}
@media(max-width:640px) {
 .app-shell,.app-shell.rail-open { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr; }
 .facility-rail { width:auto; flex-direction:row; gap:16px; max-height:0; padding:0 12px; overflow:hidden; border-right:0; border-bottom:0; transform:translateY(-8px); transition:max-height 240ms cubic-bezier(.22,1,.36,1),padding 240ms cubic-bezier(.22,1,.36,1),opacity 200ms ease,transform 240ms cubic-bezier(.22,1,.36,1),visibility 0s linear 240ms; }
 .rail-open .facility-rail { max-height:80px; padding:8px 12px; border-bottom:1px solid #23252a; transition-delay:0s; }
 .facility-list { flex-direction:row; gap:8px; overflow-x:auto; padding:4px; }
 .facility-button[aria-pressed="true"]::before { left:13px; right:13px; top:auto; bottom:-9px; width:auto; height:3px; border-radius:2px 2px 0 0; }
 .facility-tooltip { left:50%; top:calc(100% + 8px); transform:translateX(-50%); }
 .sidebar { border-bottom:0; margin:0 8px 8px; padding:0 12px; border-radius:10px; }
 main { margin:0 8px 8px; border-radius:10px; }
 .workspace { min-height:64px; padding:0 8px; }
 .menu-toggle { display:flex; }
 .sidebar-toggle { display:none; }
 .navigation-container { display:flex; flex:initial; max-height:0; padding-bottom:0; overflow:hidden; visibility:hidden; transition:max-height 180ms ease,visibility 180ms; }
 .sidebar.is-open .navigation-container { max-height:600px; padding-bottom:12px; visibility:visible; overflow:visible; }
 .workspace-caption { margin-bottom:12px; }
 .sidebar-bottom { padding-top:12px; }
 .nav-link { min-height:44px; }
 .page-header { padding:0 20px; }
 .page-description { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } .processing-label.processing .processing-dot { animation:none; } }

/* Persistent player, clear transport controls and independent transcript scrolling. */
.intent-badge { gap:7px; padding:5px 9px; border-radius:14px; border-color:color-mix(in srgb,var(--intent-color) 70%,var(--canvas)); background:linear-gradient(90deg,color-mix(in srgb,var(--intent-color) 6%,var(--canvas)),color-mix(in srgb,var(--intent-color) 26%,var(--canvas))); font-weight:500; }
.player-controls > button { min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--canvas); color:var(--ink); font-size:var(--text-sm); box-shadow:0 1px 2px #20212708; transition:background-color 140ms ease,transform 140ms ease; }
.player-controls > button:hover:not(:disabled) { background:var(--surface-3); }
.player-controls > button:active:not(:disabled) { transform:scale(.96); }
.player-controls > button:disabled { opacity:.5; }
.player-controls > #player-play { min-width:104px; border-color:var(--brand-color); background:var(--brand-color); color:white; font-weight:600; }
.player-controls > #player-play:hover:not(:disabled) { background:color-mix(in srgb,var(--brand-color) 85%,#202127); }
#player-play svg { width:20px; height:20px; }
#player-back svg,#player-forward svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.player-time { font-size:var(--text-sm); color:var(--ink); }
.player-flag-list .player-flag { border-radius:14px; border-color:color-mix(in srgb,var(--intent-color) 70%,var(--canvas)); }
main.record-mode { height:calc(100dvh / var(--ui-scale) - 16px); }
.record-mode .page-content { flex:1; min-height:0; overflow:hidden; }
.record-mode .call-record-view,.record-mode #call-record-content { height:100%; }
.record-mode .record-layout { height:100%; min-height:0; grid-template-columns:280px minmax(0,1fr) 260px; }
.record-mode .record-layout > section { display:flex; flex-direction:column; min-height:0; }
.record-mode .record-layout > section > h3 { flex-shrink:0; }
.record-mode .record-transcript { padding-bottom:0; }
.record-mode #record-transcript-content { overflow-y:auto; flex:1; min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
.record-mode .call-player { position:relative; flex-shrink:0; }
.record-mode .record-details { grid-column:auto; border-top:0; border-left:1px solid var(--line); }
.record-mode .record-metadata { grid-template-columns:1fr; }
@media(max-width:1000px) { .record-mode .record-layout { grid-template-columns:170px minmax(0,1fr) 200px; } .record-mode .record-details-content { padding:12px; } }
@media(max-width:800px) { .record-mode .record-layout { grid-template-columns:140px minmax(220px,1fr) 190px; overflow-x:auto; } .record-mode .record-transcript { border-top:0; } .record-mode .record-alerts { border-right:1px solid var(--line); } }

.record-transcript-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 16px 8px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.record-transcript-heading h3 { margin:0; font-size:var(--text-sm); font-weight:500; }

.record-view-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-shrink:0; padding:0 16px; border-bottom:1px solid var(--line); overflow-x:auto; }
.record-view-tabs { display:flex; gap:20px; flex-shrink:0; }
.record-view-toolbar .record-header-actions { margin-left:auto; flex-shrink:0; flex-wrap:nowrap; }
.record-alerts-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:6px 12px 6px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.record-alerts-heading h3 { margin:0; font-size:var(--text-sm); font-weight:500; }
.record-alerts-heading .alert-tabs { margin:0; margin-left:auto; align-self:auto; flex-wrap:nowrap; }
.record-view-tabs [role="tab"] { position:relative; min-height:40px; padding:10px 0; border:0; background:transparent; color:var(--subtle); font-size:var(--text-sm); font-weight:500; line-height:20px; cursor:pointer; }
.record-view-tabs [role="tab"]:hover { color:var(--ink); }
.record-view-tabs [aria-selected="true"] { color:var(--ink); }
.record-view-tabs [aria-selected="true"]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--brand-color); border-radius:2px; }
.record-view-panel { flex:1; min-height:0; }
.has-record-tabs { display:flex; flex-direction:column; min-height:0; }
.record-call-panel { display:flex; flex-direction:column; overflow-x:auto; }
.record-mode .record-call-panel > .record-layout { flex:1; height:auto; }
.has-record-tabs > .record-view-toolbar { margin-bottom:16px; }
.record-insights-panel { padding:16px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

.mark-review-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 10px; border:1px solid var(--brand-color); border-radius:6px; background:var(--brand-color); color:white; font:inherit; font-size:var(--text-xs); cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease; }
.mark-review-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mark-review-button:hover { background:color-mix(in srgb,var(--brand-color) 85%,#202127); }
.mark-review-button[aria-pressed="true"] { color:white; border-color:var(--brand-color); background:var(--brand-color); }
.mark-review-button[aria-pressed="true"]:hover { background:color-mix(in srgb,var(--brand-color) 85%,#202127); }

.call-play-button[data-visited="false"] { background:var(--brand-color); border-color:var(--brand-color); color:white; font-weight:500; }
.call-play-button[data-visited="false"]:hover:not(:disabled) { background:color-mix(in srgb,var(--brand-color) 85%,#202127); color:white; }
.call-play-button[data-visited="true"] { background:var(--surface-2); border-color:var(--line); color:var(--muted); }
.call-play-button[data-visited="true"]:hover:not(:disabled) { background:var(--surface-3); color:var(--ink); }

.intent-badge .intent-icon,.player-flag .intent-icon { color:var(--intent-color); }
.player-flag-list .player-flag:hover:not(:disabled) { color:var(--ink); background:linear-gradient(90deg,color-mix(in srgb,var(--intent-color) 10%,var(--canvas)),color-mix(in srgb,var(--intent-color) 32%,var(--canvas))); }

.player-controls > #player-add-note { margin-left:auto; }
#player-add-note svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#call-note-context { color:var(--subtle); font-size:var(--text-sm); }
#call-note-form label { display:block; margin-bottom:8px; font-size:var(--text-sm); }
#call-note-text { display:block; width:100%; min-height:120px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-sm); line-height:22px; }
#call-note-error { color:#b42332; font-size:var(--text-sm); }

/* Intent chips: neutral surfaces, category color only on the icon. */
.intent-badge { border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); box-shadow:0 1px 2px #20212708; }

#call-note-dialog { position:fixed; inset:auto; margin:0; z-index:20; width:min(360px,calc(100vw - 16px)); padding:20px; border-radius:8px; overflow-y:auto; box-shadow:0 8px 28px #20212718,0 2px 6px #2021270a; }
#call-note-dialog .dialog-actions { margin-top:16px; }

.player-seek-track { position:relative; height:24px; margin-top:-10px; margin-bottom:-10px; }
.player-seek-track #player-seek { position:absolute; top:50%; transform:translateY(-50%); height:4px; transition:height 160ms ease; }
.player-seek-track:hover #player-seek,.player-seek-track:focus-within #player-seek { height:7px; }
#timeline-add-note { position:absolute; top:50%; left:0; z-index:2; display:grid; place-items:center; width:24px; height:24px; padding:0; transform:translate(-50%,-50%) scale(.9); border:1px solid #b8bdc7; border-radius:50%; background:#d8dce4; color:#343943; font:inherit; font-size:calc(18px * var(--font-scale,1)); line-height:1; cursor:pointer; opacity:0; pointer-events:none; transition:opacity 160ms ease,transform 160ms ease,background-color 160ms ease,width 160ms ease,height 160ms ease,font-size 160ms ease; box-shadow:0 1px 3px #20212712; }
.player-seek-track:hover #timeline-add-note,#timeline-add-note:focus-visible { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
#timeline-add-note:hover { background:#cbd0da; }

.record-alert-heading { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.record-alert-heading .record-alert-time { margin-top:0; color:var(--subtle); white-space:nowrap; }

.note-assignment { margin-top:16px; }
#note-assignee-label { display:block; margin-bottom:8px; font-size:var(--text-sm); }
#note-assignee-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-sm); cursor:pointer; }
#note-assignee-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
#note-assignee-panel { margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); }
#note-assignee-search { min-height:36px; font-size:var(--text-sm); }
#note-assignee-options { max-height:180px; overflow-y:auto; margin-top:4px; }
#note-assignee-options button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:6px; border:0; border-radius:4px; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-sm); text-align:left; cursor:pointer; }
#note-assignee-options button:hover,#note-assignee-options button:focus-visible { background:var(--surface-4); }
#note-assignee-options small { display:block; margin-top:3px; font-size:var(--text-xs); color:var(--subtle); }
.assignee-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surface-4); color:var(--accent); font-size:var(--text-xs); flex-shrink:0; }
.assignee-check { margin-left:auto; color:var(--accent); }

.note-intent { margin-top:16px; }
#note-intent-label { display:block; margin-bottom:8px; font-size:var(--text-sm); }
#note-intent-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-sm); cursor:pointer; }
#note-intent-value { display:inline-flex; align-items:center; gap:8px; }
#note-intent-trigger > svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
#note-intent-options { margin-top:6px; padding:4px; max-height:210px; overflow-y:auto; border:1px solid var(--line); border-radius:6px; background:var(--canvas); }
#note-intent-options button { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; padding:6px 8px; border:0; border-radius:4px; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-sm); text-align:left; cursor:pointer; }
#note-intent-options button:hover,#note-intent-options button:focus-visible { background:var(--surface-4); }
.note-intent-check { color:var(--accent); }

/* Dropdowns float outside the note box without affecting its layout. */
#note-assignee-panel,#note-intent-options { position:fixed; z-index:40; margin:0; overflow-y:auto; box-shadow:0 8px 24px #20212718,0 2px 6px #2021270a; }

.timeline-note-marker { position:absolute; top:50%; z-index:3; display:grid; place-items:center; width:28px; height:28px; padding:0; transform:translate(-50%,-50%); border:1px solid #c9ccd3; border-radius:6px; background:var(--canvas); color:var(--muted); cursor:pointer; box-shadow:0 1px 3px #20212712; transition:background-color 140ms ease; }
.timeline-note-marker svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.timeline-note-marker:hover { background:var(--surface-4); }
#call-note-form #call-note-delete { color:#b42332; background:var(--canvas); border-color:#e6c5c8; }
#call-note-form .dialog-actions { flex-wrap:wrap; }

#note-intent-value { flex-wrap:wrap; min-width:0; }
#note-intent-trigger > svg { flex-shrink:0; }

#note-assignee-panel { padding:8px; border-radius:8px; }
#note-assignee-search { appearance:none; box-sizing:border-box; display:block; width:100%; min-height:38px; margin:0 0 8px; padding:8px 10px; border:1px solid var(--line); border-radius:5px; background:var(--surface-1); color:var(--ink); font:inherit; font-size:var(--text-sm); }
#note-assignee-search:focus-visible { outline:2px solid color-mix(in srgb,var(--brand-color) 25%,transparent); outline-offset:1px; border-color:var(--brand-color); background:var(--canvas); }
#note-assignee-search::placeholder { color:var(--subtle); }
#note-assignee-options { margin-top:0; max-height:208px; scrollbar-width:thin; }
#note-assignee-options button { min-height:48px; padding:7px 8px; }
#note-assignee-panel .assignee-avatar { width:30px; height:30px; background:var(--surface-2); color:var(--muted); }
#note-intent-options .add-intent-action { justify-content:flex-start; border-top:1px solid var(--line); margin-top:4px; border-radius:0 0 4px 4px; color:var(--accent); font-weight:500; }
.add-intent-editor { display:flex; flex-wrap:wrap; gap:6px; padding:8px 4px 4px; border-top:1px solid var(--line); }
.add-intent-editor input { flex:1; min-width:0; width:150px; min-height:36px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-sm); }
#note-intent-options .add-intent-editor button { width:auto; min-height:36px; padding:6px 10px; color:white; background:var(--brand-color); }
.add-intent-editor p { flex-basis:100%; margin:0; color:#b42332; font-size:var(--text-xs); }

.field-optional { color:var(--subtle); font-weight:400; }

.transcript-segment.segment-selected { background:var(--surface-4); border-color:transparent; }
.transcript-segment.segment-selected .segment-speaker { color:var(--ink); font-weight:500; }

#timeline-add-note[aria-expanded="true"] { width:32px; height:32px; font-size:calc(24px * var(--font-scale,1)); opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; background:#cbd0da; }

/* Light gray player surface within the light workspace. */
.call-player { --player-surface:var(--surface-2); --player-ink:var(--ink); --player-muted:var(--subtle); --player-track:#c9cdd5; --player-accent:var(--brand-color); background:var(--player-surface); border-top-color:var(--line); color:var(--player-ink); }
.call-player .player-heading { color:var(--player-muted); }
.call-player .player-time { color:var(--player-ink); }
.call-player .player-controls > button { border-color:var(--line); background:var(--canvas); color:var(--player-ink); box-shadow:0 1px 2px #20212708; }
.call-player .player-controls > button:hover:not(:disabled) { background:var(--surface-3); }
.call-player .player-controls > #player-play { background:var(--brand-color); border-color:var(--brand-color); color:white; }
.call-player .player-controls > #player-play:hover:not(:disabled) { background:color-mix(in srgb,var(--brand-color) 85%,#202127); }
.call-player .waveform-base { fill:color-mix(in srgb,var(--brand-color) 38%,var(--canvas)); }
.call-player .waveform-played { fill:var(--player-accent); }
.call-player #player-seek::-webkit-slider-thumb { background:var(--player-accent); }
.call-player #player-seek::-moz-range-thumb { background:var(--player-accent); }

.player-audio-layout { display:flex; align-items:flex-start; gap:16px; }
.player-audio-layout .player-timeline { flex:1; min-width:0; }
.player-speakers { width:140px; flex-shrink:0; padding-top:24px; }
.player-speaker { display:flex; align-items:center; gap:7px; height:36px; font-size:var(--text-xs); color:var(--subtle); }
.player-speaker > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.speaker-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.inmate-speaker .speaker-dot { background:var(--brand-color); }
.outside-speaker .speaker-dot { background:#217f91; }
.speaker-track-line { stroke:#daddE4; stroke-width:.7; }
.speaker-wave-0 { fill:color-mix(in srgb,var(--brand-color) 65%,var(--canvas)); }
.speaker-wave-1 { fill:#7eb8c2; }
.speaker-wave-played-0 { fill:var(--brand-color); }
.speaker-wave-played-1 { fill:#217f91; }
@media(max-width:800px) { .player-speakers { width:100px; } .player-audio-layout { gap:8px; } }

#player-split-speakers svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.call-player .player-controls > #player-split-speakers[aria-pressed="true"] { background:var(--surface-4); border-color:var(--brand-color); color:var(--brand-color); }

.player-audio-layout .player-speakers { width:0; opacity:0; overflow:hidden; transition:width 300ms cubic-bezier(.22,1,.36,1),opacity 200ms ease; }
.player-audio-layout { gap:0; transition:gap 300ms cubic-bezier(.22,1,.36,1); }
.player-audio-layout.is-split { gap:16px; }
.player-audio-layout.is-split .player-speakers { width:140px; opacity:1; }
.player-speaker { min-width:140px; }
#player-waveform:not(.is-split) .speaker-wave-1 { fill:color-mix(in srgb,var(--brand-color) 65%,var(--canvas)); }
#player-waveform:not(.is-split) .speaker-wave-played-1 { fill:var(--brand-color); }
@media(max-width:800px) { .player-audio-layout.is-split .player-speakers { width:100px; } .player-audio-layout.is-split { gap:8px; } .player-speaker { min-width:100px; } }

.transcript-playable { cursor:pointer; }
.transcript-segment:hover { background:var(--surface-1); }
.transcript-segment.segment-selected:hover { background:var(--surface-4); }

.transcript-segment { position:relative; display:block; }
.transcript-playable { display:flex; gap:16px; border-radius:5px; }
.transcript-playable > div { flex:1; min-width:0; }
.transcript-playable .segment-speaker { display:block; padding-right:170px; min-height:24px; }
.transcript-actions { position:absolute; top:10px; right:12px; display:flex; align-items:center; gap:5px; opacity:0; pointer-events:none; transition:opacity 140ms ease; }
.transcript-segment:hover .transcript-actions,.transcript-segment:focus-within .transcript-actions { opacity:1; pointer-events:auto; }
.transcript-actions button { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 8px; border:1px solid var(--line); border-radius:5px; background:var(--canvas); color:var(--muted); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.transcript-actions button:hover { background:var(--surface-3); color:var(--ink); }
.transcript-actions svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(hover:none) { .transcript-actions { opacity:1; pointer-events:auto; } }

/* Compact player after removing the heading captions. */
.call-player { padding:0; }
.call-player .player-audio-layout { padding:12px 24px 0; }
.player-audio-layout .player-timeline { margin:0 0 12px; padding-top:4px; }
#player-waveform { height:48px; }
.timeline-marker { top:2px; height:52px; }
.player-audio-layout .player-speakers { padding-top:4px; }
.player-speaker { height:24px; }

.transcript-annotations { display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin:8px 0 0 58px; }
.transcript-note-label { display:inline-flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; max-width:100%; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.transcript-note-label > svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }
.transcript-note-label:hover { background:var(--surface-2); }
.annotation-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.manual-alert-categories { display:flex; flex-wrap:wrap; gap:5px; }
.manual-alert-source { display:block; margin-top:8px; color:var(--subtle); font-size:var(--text-xs); }

/* Source ranges sit beneath the waveform instead of enclosing tall rectangles. */
.timeline-marker { top:auto; bottom:8px; height:6px; min-width:6px; border:0; border-radius:3px; background:var(--intent-color); transition:height 140ms ease,box-shadow 140ms ease; }
.timeline-marker::before { content:""; position:absolute; inset:-10px -3px; }
.timeline-marker:hover,.timeline-marker[aria-expanded="true"] { height:8px; background:var(--intent-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--intent-color) 12%,transparent); }

/* Annotations share the utterance row rather than extending it vertically. */
.transcript-segment:has(.transcript-annotations) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; }
.transcript-segment:has(.transcript-annotations) .transcript-playable { min-width:0; }
.transcript-annotations { align-self:center; max-width:240px; margin:24px 0 0; gap:4px; }
.transcript-note-label { padding:0; border:0; background:transparent; box-shadow:none; }
.transcript-note-label:hover { background:transparent; }
.transcript-note-label .annotation-text { max-width:160px; }
@media(max-width:800px) { .transcript-segment:has(.transcript-annotations) { gap:8px; } .transcript-annotations { max-width:140px; } }

.call-player .player-controls { margin:0; width:100%; border-top:1px solid var(--line); padding:20px 24px 16px; background:var(--surface-3); }

.transcript-annotations { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

.player-audio-layout .player-timeline { margin-bottom:24px; }

#player-waveform { height:56px; }
.player-speaker { height:28px; }

.transcript-playable .segment-speaker { padding-right:270px; }
.note-context-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 16px; }
.note-context-row #call-note-context { margin:0; }
#call-note-share { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:var(--canvas); color:var(--muted); font:inherit; font-size:var(--text-xs); cursor:pointer; white-space:nowrap; }
#call-note-share svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

#record-note-list { padding:8px; }
.record-note-item { display:block; width:100%; padding:12px; margin:4px 0; border:0; border-radius:6px; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.record-note-item:hover { background:var(--surface-4); }
.record-note-heading { display:flex; align-items:center; gap:8px; font-size:var(--text-xs); color:var(--subtle); }
.record-note-heading svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.record-note-text { display:block; margin-top:8px; font-size:var(--text-sm); line-height:20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.record-note-intents { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.record-note-assignee { display:block; margin-top:8px; font-size:var(--text-xs); color:var(--subtle); }
.record-mode #record-alert-list,.record-mode #record-note-list { flex:1; min-height:0; overflow-y:auto; }

.transcript-intent-action { display:inline-flex; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; border-radius:6px; }
.transcript-note-icon { position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); cursor:pointer; }
.transcript-note-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.transcript-note-icon:hover { background:var(--surface-3); }
.note-unread-dot { position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%; background:#d92d3d; box-shadow:0 0 0 2px var(--canvas); }

.alert-tabs { margin:12px 12px 4px; align-self:flex-start; flex-shrink:0; }

.transcript-note-author { font-size:var(--text-xs); color:var(--subtle); white-space:nowrap; }
.record-note-author { display:block; margin-top:6px; font-size:var(--text-xs); color:var(--subtle); }
#call-note-author { margin:0 0 16px; font-size:var(--text-xs); color:var(--subtle); }

.transcript-playable .segment-speaker { padding-right:40px; }
.transcript-action-options { display:flex; gap:5px; max-width:0; opacity:0; overflow:hidden; transform:translateX(6px); transition:max-width 220ms cubic-bezier(.22,1,.36,1),opacity 160ms ease,transform 220ms cubic-bezier(.22,1,.36,1); }
.transcript-action-options button { white-space:nowrap; flex-shrink:0; }
.transcript-actions.is-open .transcript-action-options { max-width:300px; opacity:1; transform:translateX(0); }
.transcript-actions .transcript-action-plus { width:32px; height:32px; padding:0; justify-content:center; font-size:calc(24px * var(--font-scale,1)); flex-shrink:0; }
.transcript-actions.is-open .transcript-action-plus { background:var(--surface-3); color:var(--ink); }

.record-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.record-transcript-heading { flex-wrap:wrap; }
.record-download-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.record-download-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.record-download-button:hover:not(:disabled) { background:var(--surface-2); color:var(--ink); }
.record-download-button:disabled { opacity:.45; cursor:default; }

.timeline-create-menu { position:absolute; bottom:24px; z-index:9; width:168px; padding:5px; border:1px solid var(--line); border-radius:8px; background:var(--canvas); box-shadow:0 6px 20px #20212715; }
.timeline-create-menu button { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:7px 9px; border:0; border-radius:5px; background:transparent; color:var(--ink); text-align:left; font:inherit; font-size:var(--text-sm); cursor:pointer; }
.timeline-create-menu button:hover,.timeline-create-menu button:focus-visible { background:var(--surface-4); }
.timeline-create-menu svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.transcript-highlight { position:relative; color:inherit; background:transparent; text-decoration-line:underline; text-underline-offset:4px; text-decoration-thickness:2px; text-decoration-skip-ink:none; border-radius:2px; }
.highlight-identity { text-decoration-color:color-mix(in srgb,var(--brand-color) 40%,var(--canvas)); text-decoration-style:dotted; }
.highlight-intent { text-decoration-color:color-mix(in srgb,var(--highlight-color,var(--brand-color)) 40%,var(--canvas)); }
.transcript-highlight:hover,.transcript-highlight:focus-visible { background:var(--surface-4); }
.transcript-highlight::after { content:attr(data-explanation); position:absolute; left:0; top:calc(100% + 8px); z-index:10; display:none; width:260px; max-width:60vw; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); font-size:var(--text-xs); font-weight:400; line-height:18px; text-decoration:none; box-shadow:0 4px 12px #20212714; pointer-events:none; }
.transcript-highlight:hover::after,.transcript-highlight:focus-visible::after { display:block; }

.record-manual-alert { padding:14px 12px; }
.record-manual-alert .record-alert-heading { gap:8px; align-items:flex-start; }
.manual-alert-categories { flex:1 1 100%; gap:5px; }
.record-manual-alert .manual-alert-time { color:var(--ink); font-weight:500; }
.record-manual-alert .record-alert-summary { margin-top:10px; color:var(--ink); font-size:var(--text-sm); line-height:21px; }
.record-manual-alert .manual-alert-source { margin-top:10px; padding-top:8px; border-top:1px solid var(--line); color:var(--subtle); font-size:var(--text-xs); line-height:18px; }

.record-insights-content { flex:1; min-height:0; overflow-y:auto; padding:16px; }
.insights-caption { margin:0 0 20px; color:var(--subtle); font-size:var(--text-xs); line-height:18px; }
.insight-group { margin-bottom:24px; }
.insight-group h4 { margin:0 0 10px; color:var(--subtle); font-size:var(--text-xs); font-weight:500; }
.insight-card { margin:0 0 10px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); }
.insight-card h5 { margin:0; color:var(--ink); font-size:var(--text-sm); font-weight:500; }
.insight-card p { margin:8px 0 12px; color:var(--subtle); font-size:var(--text-xs); line-height:18px; }
.insight-card blockquote { margin:12px 0 6px; padding-left:9px; border-left:2px solid var(--line); color:var(--muted); font-size:var(--text-xs); line-height:18px; }
.insight-source { display:inline-flex; min-height:24px; align-items:center; color:var(--accent); font-size:var(--text-xs); border-radius:3px; }
.insight-source:hover { text-decoration:underline; text-underline-offset:3px; }
.insight-type { margin-bottom:8px; font-size:var(--text-xs); color:var(--subtle); }
.insight-evidence-list { display:grid; gap:12px; }
.insight-evidence { padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--surface-1); min-width:0; }
.insight-source-meta { font-size:var(--text-xs); color:var(--subtle); line-height:18px; }
.insight-card .insight-evidence blockquote { margin:8px 0; }
.insight-card .insight-limit { padding-top:12px; border-top:1px solid var(--line); }
.insight-card .insight-review-state { margin:12px 0; color:var(--muted); font-size:var(--text-xs); }
.insight-card[data-review-state="confirmed"] { border-left:3px solid var(--brand-color); }
.insight-card[data-review-state="dismissed"] .insight-evidence-list { display:none; }
.insight-actions { display:flex; flex-wrap:wrap; gap:6px; }
.insight-compare { flex-basis:100%; }
.insight-comparison { width:min(780px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; }
.insight-comparison-sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.insight-comparison blockquote { margin:12px 0; font-size:var(--text-sm); line-height:21px; }
.insight-comparison .insight-source-number,.insight-comparison .insight-unavailable { font-size:var(--text-xs); margin:12px 0; }
@media (max-width:640px) { .insight-comparison-sources { grid-template-columns:1fr; } }
.insight-filters { display:flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:6px; background:var(--surface-2); margin-bottom:16px; }
.insight-filter[aria-pressed="true"] { background:var(--canvas); box-shadow:0 1px 2px rgb(0 0 0 / .06); }
.insight-relation-view { margin:14px 0; padding:12px 8px; border-radius:6px; background:var(--surface-1); }
.insight-entity { display:flex; align-items:center; justify-content:center; gap:8px; font-size:var(--text-sm); font-weight:500; }
.insight-entity svg { width:20px; height:20px; fill:none; stroke:var(--brand-color); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.insight-matches { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin:10px 0 16px; }
.insight-match { font-size:var(--text-xs); color:var(--muted); background:var(--canvas); border:1px solid var(--line); border-radius:4px; padding:3px 6px; }
.insight-mini-timeline { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.insight-mini-timeline::before { content:""; position:absolute; top:10px; left:25%; right:25%; border-top:2px dashed var(--line); }
.insight-timepoint { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 2px 4px; color:var(--ink); background:transparent; border:0; border-radius:4px; cursor:pointer; font-family:inherit; }
.insight-timepoint:hover { background:var(--surface-2); }
.insight-time-dot { width:20px; height:20px; border:2px solid var(--brand-color); background:var(--canvas); border-radius:50%; box-shadow:inset 0 0 0 4px var(--canvas); background-color:var(--brand-color); transition:transform 140ms ease; }
.insight-timepoint:hover .insight-time-dot { transform:scale(1.12); }
.insight-point-label { font-size:var(--text-xs); line-height:16px; text-align:center; }
.insight-point-time { color:var(--brand-color); font-size:var(--text-xs); }
.insight-time-gap { margin-top:10px; padding-top:8px; border-top:1px solid var(--line); text-align:center; color:var(--subtle); font-size:var(--text-xs); }
.insight-evidence-disclosure > summary { padding:8px 0; cursor:pointer; font-size:var(--text-xs); color:var(--muted); }
.insight-evidence-disclosure[open] { margin-bottom:14px; }
.insight-card[data-review-state="confirmed"] .insight-mini-timeline::before { border-top-style:solid; border-color:var(--brand-color); }
.insight-card[data-review-state="dismissed"] .insight-relation-view { opacity:.65; }
.insight-findings { border:1px solid var(--line); border-radius:6px; margin:16px 0; overflow:hidden; }
.insight-finding { display:grid; grid-template-columns:140px 1fr; gap:16px; padding:12px; background:var(--surface-1); font-size:var(--text-sm); line-height:20px; }
.insight-finding + .insight-finding { border-top:1px solid var(--line); }
.insight-finding-label { color:var(--subtle); font-size:var(--text-xs); }
.insight-source-heading { font-size:var(--text-sm); font-weight:500; margin:0 0 12px; }
@media(max-width:640px) { .insight-finding { grid-template-columns:1fr; gap:4px; } }
@media(prefers-reduced-motion:reduce) { .insight-time-dot { transition:none; } }
.insights-empty { color:var(--subtle); font-size:var(--text-xs); line-height:20px; }
.record-layout > section > h3,.record-transcript-heading { min-height:var(--record-header-height,52px); }

.record-mode .record-layout { position:relative; grid-template-columns:28% 40% 32%; min-width:780px; }
.record-mode #call-record-content { overflow-x:auto; }
.record-panel-resizer { position:absolute; top:0; bottom:0; z-index:4; width:12px; transform:translateX(-50%); cursor:col-resize; touch-action:none; outline-offset:-3px; }
.record-panel-resizer::after { content:""; position:absolute; top:0; bottom:0; left:5px; width:2px; background:transparent; transition:background-color 140ms ease; }
.record-panel-resizer::before { content:""; position:absolute; top:50%; left:3px; width:6px; height:32px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); opacity:0; transition:opacity 140ms ease; }
.record-panel-resizer:hover::after,.record-panel-resizer:focus-visible::after,.is-resizing .record-panel-resizer::after { background:var(--brand-color); }
.record-panel-resizer:hover::before,.record-panel-resizer:focus-visible::before { opacity:1; }
.record-layout.is-resizing { user-select:none; cursor:col-resize; }
@media(prefers-reduced-motion:reduce) { .record-panel-resizer::before,.record-panel-resizer::after { transition:none; } }

.record-details { position:relative; overflow:hidden; }
.call-details-entry { width:100%; gap:10px; justify-content:flex-start; margin-bottom:20px; border-bottom:1px solid var(--line); }
.call-details-chevron { margin-left:auto; }
.call-details-drawer { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; background:var(--canvas); transform:translateX(100%); visibility:hidden; transition:transform 240ms cubic-bezier(.2,.8,.2,1),visibility 240ms; }
.record-details.is-details-open .call-details-drawer { transform:translateX(0); visibility:visible; }
.call-details-drawer-heading { display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:var(--record-header-height,52px); border-bottom:1px solid var(--line); flex-shrink:0; }
.call-details-drawer-heading h3 { margin:0; flex:1; font-size:var(--text-sm); font-weight:500; }
.call-details-drawer-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.call-details-drawer-body .record-details-content { padding:20px; }
.call-profile-link { color:inherit; text-decoration:none; }
.call-profile-link:hover { color:var(--brand-color); }
.call-details-drawer-body .record-metadata { grid-template-columns:minmax(100px,.8fr) minmax(0,1fr); padding-top:20px; margin-top:20px; border-top:1px solid var(--line); gap:14px; font-size:var(--text-xs); }
.call-details-drawer-body .record-metadata dd { margin:0; overflow-wrap:anywhere; }
.record-details > .record-insights-content { transition:opacity 160ms ease,transform 240ms ease; }
.record-details.is-details-open > .record-insights-content { opacity:0; transform:translateX(-20px); }
@media(prefers-reduced-motion:reduce) { .call-details-drawer,.record-details > .record-insights-content { transition:none; } }
.call-details-entry svg,.call-details-drawer-heading svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

}

.notifications-panel{width:min(420px,calc(100vw - 32px));padding:0;overflow:hidden}
.notifications-heading{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.notifications-heading h2{margin:0;font-size:var(--text-sm);font-weight:500}
.notifications-unread-count{padding:2px 6px;border-radius:4px;background:var(--surface-3);color:var(--muted);font-size:var(--text-xs)}
.notifications-mark-read.ui-button{margin-left:auto}
.notifications-list{max-height:min(520px,calc(100dvh - 160px));overflow:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
.notifications-list:hover,.notifications-list:focus-within{scrollbar-color:var(--subtle) transparent}
.notifications-list::-webkit-scrollbar{width:6px}.notifications-list::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}.notifications-list:hover::-webkit-scrollbar-thumb,.notifications-list:focus-within::-webkit-scrollbar-thumb{background:var(--subtle)}
.notification-row+.notification-row{border-top:1px solid var(--line)}
.notification-link{display:flex;align-items:flex-start;gap:10px;padding:16px;color:var(--ink);text-decoration:none}
.notification-row[data-unread=true]{background:var(--surface-1)}
.notification-link:hover{background:var(--surface-2)}
.notification-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.notification-avatar{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--muted);font-size:var(--text-xs);font-weight:500}
.notification-avatar-new-call{color:var(--accent);background:var(--surface-4)}
.notification-content{flex:1;min-width:0}
.notifications-panel .notification-headline{margin:0 0 4px;font-size:var(--text-xs);line-height:18px;color:var(--ink)}
.notification-headline strong{font-weight:500}
.notification-context,.notification-time{display:block;font-size:var(--text-xs);line-height:18px;color:var(--subtle)}
.notifications-panel .notification-snippet{margin:8px 0;color:var(--muted);font-size:var(--text-xs);line-height:18px;overflow-wrap:anywhere}
.notification-time{margin-top:6px}
.notification-item-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--accent);margin-top:6px}
.notification-item-dot[hidden],.notification-dot[hidden]{display:none}
.notifications-panel .notifications-empty{padding:24px 16px;margin:0;color:var(--subtle);text-align:center;font-size:var(--text-xs)}

.notifications-panel{max-height:calc(100dvh - 80px)}
.notifications-list{max-height:min(520px,calc(100dvh - 200px))}
.notifications-footer{position:sticky;bottom:0;padding:8px 12px;border-top:1px solid var(--line);background:var(--elevated-surface,var(--canvas));z-index:1}
.notifications-see-all.ui-button{width:100%;justify-content:center}
#notifications-view{padding-top:0}
.notifications-page > .notifications-heading{padding:12px 0 16px;border-bottom:0;max-width:880px}
.notifications-page .notifications-list{max-width:880px;max-height:none;overflow:visible;border:1px solid var(--line);border-radius:8px;background:var(--canvas)}
.notifications-page .notification-row:first-child{border-radius:7px 7px 0 0}
.notifications-page .notification-row:last-child{border-radius:0 0 7px 7px}
.notifications-page .notification-link{padding:20px}
.notifications-page .notification-headline,.notifications-page .notification-snippet{font-size:var(--text-sm);line-height:20px;margin:0 0 4px}
.notifications-page .notification-snippet{margin:8px 0;color:var(--muted)}
.notifications-page .notifications-empty{padding:32px 20px;text-align:center;color:var(--subtle);font-size:var(--text-xs)}