@import url("./components.css");
@import url("./live.css?v=20260909-scroll4");
/* Shared presentation bridge; existing layout selectors remain authoritative. */
.rebrand-native-select { display:none!important; }
.rebrand-select { display:block; min-width:0; max-width:100%; }
.rebrand-select .sb-select { min-width:0; width:100%; }
.rebrand-select .sb-select-trigger { width:100%; min-width:120px; min-height:var(--control-height); height:auto; margin:0; padding:var(--space-1) var(--space-3); font-size:var(--text-label); font-weight:var(--weight-regular); line-height:var(--line-label); border:1px solid var(--border-control); background:var(--surface); color:var(--text-primary); border-radius:var(--radius-sm); box-shadow:none; }
.rebrand-select .sb-select-trigger>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rebrand-select .sb-select-trigger>svg { flex:none; }
.rebrand-select .sb-options { z-index:100; }
.rebrand-select .sb-option { border:0; color:var(--text-primary); font-size:var(--text-body); font-weight:var(--weight-regular); padding:var(--space-2) var(--space-3); text-align:left; background:var(--surface); border-radius:var(--radius-sm); }
.rebrand-select .sb-option:hover,.rebrand-select .sb-option[aria-selected="true"] { background:var(--bg-subtle); }
body #app label,body .wizard label,body .drawer label { font-weight:var(--weight-strong); }
body #app label { font-size:var(--text-label); line-height:var(--line-label); }
body #app :is(b,strong) { font-weight:var(--weight-strong); }
body #app h1,body #app h2 { font-size:var(--text-title); line-height:var(--line-title); }
body #app h3,body #app h4 { font-size:var(--text-heading); line-height:var(--line-heading); }
body :is(button,input,textarea) { font-family:var(--font-sans); }
body :is(button,input,textarea,summary,a) { transition:opacity var(--dur-fast) var(--ease); }
body :is(button,input,textarea,summary,a):focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
body #app :is(.primary,.secondary,.team-row-action,.global-tool,.icon-btn),body :is(.wizard,.drawer,.command-dialog) :is(.primary,.secondary,.icon-btn) {
  border-radius:var(--radius-sm); font-size:var(--text-label); font-weight:var(--weight-strong); min-height:var(--control-height); box-shadow:none;
}
body #app :is(.primary,button.primary),body :is(.wizard,.drawer) button.primary { background:var(--action-primary); color:var(--action-on-primary); border-color:var(--action-primary); }
body #app :is(.primary,button.primary):hover:not(:disabled) { background:var(--action-primary-hover); }
body #app .secondary { background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
body #app :is(input:not([type=checkbox]):not([type=radio]),textarea) { border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); border-color:var(--border-control); font-size:var(--text-body); font-weight:var(--weight-regular); }
body #app input::placeholder,body #app textarea::placeholder { color:var(--text-muted); text-align:left; }
body #app :is(.sb-status,.visitor-state,.role-badge,.status,.pill) { border-radius:var(--radius-sm); font-size:var(--text-caption); font-weight:var(--weight-regular); line-height:var(--line-caption); }
body .sb-status[data-tone="success"] { background:var(--positive-bg); color:var(--positive-text); }
body .sb-status[data-tone="warning"] { background:var(--attention-bg); color:var(--attention-text); }
body .sb-status[data-tone="danger"] { background:var(--critical-bg); color:var(--critical-text); }
body .sb-status:is([data-tone="neutral"],[data-tone="info"]) { background:var(--neutral-bg); color:var(--neutral-text); }
body #app .code-ref { border-radius:var(--radius-sm); padding:2px 6px; background:var(--bg-subtle); color:var(--text-secondary); }
body #app .code-ref code { font:var(--weight-regular) var(--text-code)/var(--line-caption) var(--font-mono); }
body #app :is(.card,.visitor-detail,.settings-card,.connection-card,.recommendation-card,.agent-card,.onboarding-card) { border-radius:var(--radius-md); box-shadow:none; }
body #app #inbox-view [data-withdraw] { background:var(--attention-bg); color:var(--attention-text); border:1px solid var(--attention-dot); margin-top:var(--space-2); }
body #app #inbox-view [data-withdraw]:hover:not(:disabled) { box-shadow:inset 0 0 0 1px var(--attention-dot); }
body #app #stat-offers { background:var(--attention-bg); color:var(--attention-text); border-radius:var(--radius-sm); padding:0 var(--space-1); font-variant-numeric:tabular-nums; }
body #app :is(.settings-card,.connection-card,.recommendation-card,.agent-card,.onboarding-card) { padding:var(--card-padding); }
body #app .header-search-group { max-width:420px; }
body #app #global-search-open { min-height:var(--control-height); height:auto; border-radius:var(--radius-sm); justify-content:flex-start; text-align:left; }
body #app .presence-select { gap:var(--space-2); font-size:var(--text-caption); }
body #app .presence-select .rebrand-select { min-width:120px; }
body #app .sidebar { background:var(--bg-sidebar); }
body #app .sidebar .nav { color:var(--sidebar-text); }
body #app .sidebar .nav.active,body #app .sidebar .nav:hover { background:var(--sidebar-selected); color:var(--brand-50); }
body #app .sidebar :is(.logo,.logo span,.account-identity strong) { color:var(--brand-50); }
body #app .sidebar #vendor-name { color:var(--brand-50); }
body #app .sidebar .account-identity small { color:var(--brand-200); }
body #app small { font-size:var(--text-caption); line-height:var(--line-caption); }
body #app .presence-select .sb-select-trigger::before { content:""; width:6px; height:6px; flex:none; border-radius:var(--radius-full); background:var(--neutral-dot); }
body #app .presence-select [data-value="available"]::before { background:var(--positive-dot); }
body #app .presence-select [data-value="away"]::before { background:var(--attention-dot); }
body #app .sidebar .nav svg { stroke-width:1.5; }
body #app :is(.section-head>div>p,.view-intro) { font-size:var(--text-caption); line-height:var(--line-caption); max-width:60ch; color:var(--text-secondary); }
body #app :is(th,td) { font-feature-settings:"tnum" 1,"cv05" 1; }
body #app th { font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--text-muted); }
body #app td { font-size:var(--text-body); }
body #app .team-person strong { font-weight:var(--weight-strong); }
body #app .message.support .bubble,body #app .message.agent .bubble { background:var(--agent-bg); color:var(--agent-text); border-color:var(--agent-bg); }
body #app .message:not(.support):not(.agent):not(.system) .bubble { background:var(--bg-subtle); color:var(--text-primary); }
body #app #inbox-view .message.user .bubble { background:var(--customer-bubble-bg); color:var(--text-primary); }
/* Keep offer timing and its action distinct, including when the row wraps. */
body #app #inbox-view .offer-ticket-footer {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-2) var(--space-4); margin-top:var(--space-3);
}
body #app #inbox-view .offer-ticket-footer>small { min-width:0; overflow-wrap:anywhere; }
body #app #inbox-view .offer-ticket-footer>button { flex-shrink:0; margin:0; }
/* The enhanced select must fit the composer's grid, not its former native width. */
body #app #inbox-view #composer { grid-template-columns:140px minmax(0,1fr) auto; gap:var(--space-3); }
body #app #inbox-view #composer>.rebrand-select { min-width:0; width:100%; }
body #app #inbox-view #composer .sb-select-trigger { min-width:0; width:100%; }
body #app #inbox-view .assignment-control { width:230px; flex:1 1 230px; }
body #app #inbox-view .status-control { width:150px; flex:0 1 150px; }
body #app #inbox-view .conversation-actions .sb-select-trigger { min-width:0; overflow:hidden; }
body #app #inbox-view #composer::after { left:calc(14px + 140px + var(--space-3)); }
body #app .shadow-pair>p.shadow-state { display:block; max-width:100%; margin:var(--space-3) 0; padding:var(--space-2) var(--space-3); overflow-wrap:anywhere; line-height:var(--line-body); }
@media(max-width:540px) {
 body #app #inbox-view #composer { grid-template-columns:minmax(0,1fr) auto; }
 body #app #inbox-view #composer>.rebrand-select { grid-column:1/-1; }
 body #app #inbox-view #composer::after { left:14px; }
}
/* Shared interaction geometry and overlay hierarchy. */
body>.wizard-backdrop,body>.command-backdrop { z-index:100; }
body :is(.wizard,.command-dialog,.drawer) { max-width:calc(100vw - var(--space-4)); max-height:calc(100dvh - var(--space-4)); }
body #app .icon-btn { width:var(--control-lg); min-width:var(--control-lg); height:var(--control-lg); padding:0; display:inline-grid; place-items:center; line-height:1; }
body #app .icon-btn svg { width:18px; height:18px; }
body #app details>summary { position:relative; list-style:none; padding-left:var(--space-5); }
body #app details>summary::-webkit-details-marker { display:none; }
body #app details>summary::before { content:""; position:absolute; left:var(--space-1); top:50%; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-65%) rotate(-45deg); transition:transform var(--dur-fast) var(--ease); }
body #app details[open]>summary::before { transform:translateY(-75%) rotate(45deg); }
body #app :is(.notification-panel,.account-menu,.sb-options) { max-width:calc(100vw - var(--space-4)); }
@media(max-width:980px) and (min-width:601px) {
 body #app #global-search-open { width:var(--touch-target); min-width:var(--touch-target); padding:0; justify-content:center; }
 body #app #global-search-open>span,body #app #global-search-open>kbd { display:none; }
 body #app #global-search-open svg { margin:0; }
}
@media(max-width:820px) and (min-width:601px) { body #app .presence-select { font-size:0; gap:0; } }
@media(max-width:600px) {
 body #app :is(button,.queue-tab,.settings-tab,summary,[role="button"],input:not([type=checkbox]):not([type=radio]),textarea,.sb-select-trigger) { min-height:var(--touch-target); }
 body #app #mobile-menu,body #app #global-search-open,body #app .icon-btn { width:var(--touch-target); min-width:var(--touch-target); height:var(--touch-target); min-height:var(--touch-target); }
 body #app #inbox-view #refresh.icon-btn { width:var(--touch-target); min-width:var(--touch-target); height:var(--touch-target); min-height:var(--touch-target); flex-basis:var(--touch-target); }
 body #app #global-search-open { padding:0; justify-content:center; }
 body #app #global-search-open>span,body #app #global-search-open>kbd { display:none; }
 body #app .live-filter-bar button { min-width:var(--touch-target); }
 body :is(.wizard,.command-dialog) :is(button,input:not([type=checkbox]):not([type=radio]),select,textarea),body .command-search input { min-height:var(--touch-target); }
 body :is(.wizard,.command-dialog) .icon-btn { width:var(--touch-target); min-width:var(--touch-target); height:var(--touch-target); }
 #login :is(.login-methods button,#login-reveal) { min-height:var(--touch-target); }
 body #app :is(.wizard,.command-dialog,.drawer) { max-width:100vw; max-height:100dvh; }
}
/* Neutral references must not consume the brand color. */
body #app :is(.visitor-open-label,.context-kicker,.customer-history-title) { color:var(--text-secondary); }
@media(pointer:coarse) {
  body #app :is(button,input:not([type=checkbox]):not([type=radio]),.sb-select-trigger,.sb-option) { min-height:var(--touch-target); }
}
/* Operator clarity: shared status strip and compact, responsive work surfaces. */
body #app>main { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
body #app>main>header { flex-shrink:0; }
body #app>main>.view { flex:1; height:auto; min-height:0; }
body #app #inbox-view:not(.hidden) { display:flex; flex-direction:column; }
body #app #inbox-view>.workspace { flex:1; min-height:0; height:auto; }
body #app #runtime-status { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); padding:var(--space-2) var(--space-4); background:var(--bg-surface); border-bottom:1px solid var(--border); flex-shrink:0; font-size:var(--text-caption); }
body #app #runtime-status [hidden],body #app .monitoring-panel[hidden] { display:none!important; }
body #app #recommendations-view.coming-soon-view > :not(.coming-soon),body #app #recommendation-count { display:none!important; }
body #app .sidebar .nav[data-view="recommendations"] { gap:6px; }
body #app .sidebar .nav .monitoring-nav-label { width:auto; font-size:12px; white-space:nowrap; }
body #app .sidebar .nav .monitoring-coming-soon { width:auto; margin-left:auto; color:var(--brand-200); font-size:9px; font-weight:var(--weight-regular); white-space:nowrap; }
body #app.nav-collapsed .sidebar .monitoring-nav-label,body #app.nav-collapsed .sidebar .monitoring-coming-soon { display:none; }
body #app .settings-tab[data-settings-panel="ai"],body #app #settings-ai { display:none!important; }
body #app .coming-soon { max-width:640px; margin:clamp(48px, 12vh, 120px) auto; padding:var(--space-5); text-align:center; }
body #app .coming-soon-mark { display:inline-grid; place-items:center; width:56px; height:56px; margin-bottom:var(--space-4); border-radius:50%; background:var(--bg-surface); color:var(--text-primary); font-size:28px; }
body #app .coming-soon h3 { margin:var(--space-2) 0; font-size:clamp(28px, 4vw, 40px); }
body #app .coming-soon p:last-child { color:var(--text-secondary); }
body #app #delivery-indicator { display:inline-flex; align-items:center; width:auto; min-width:0; min-height:var(--control-sm); height:auto; margin:0; background:transparent; color:var(--text-secondary); border:0; border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); font-size:var(--text-caption); font-weight:var(--weight-regular); line-height:var(--line-caption); box-shadow:none; }
body #app #delivery-indicator:hover { color:var(--text-primary); text-decoration:underline; text-underline-offset:var(--space-1); }
body #app #delivery-indicator:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
body #app #presence-health { color:var(--text-secondary); min-width:0; font-size:var(--text-caption); }
body #app #runtime-status[data-presence="unconfirmed"] #presence-health { color:var(--attention-text); }
body #app #retry-presence { width:auto; font-size:var(--text-caption); }
body #app .monitoring-nav { display:flex; flex-wrap:wrap; gap:var(--space-2); border-bottom:1px solid var(--border); margin-bottom:var(--space-4); padding-bottom:var(--space-2); }
body #app .monitoring-nav button { width:auto; min-height:var(--touch-target); padding:var(--space-2) var(--space-3); background:transparent; color:var(--text-secondary); border:1px solid transparent; border-radius:var(--radius-sm); }
body #app .monitoring-nav [aria-pressed="true"] { color:var(--text-primary); background:var(--bg-surface); border-color:var(--border-strong); font-weight:var(--weight-strong); }
body #app .monitoring-note { margin:0 0 var(--space-2); color:var(--text-secondary); font-size:var(--text-body); }
body #app #open-review-history { margin-bottom:var(--space-4); }
body #app .monitoring-testing-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
body #app .offer-ticket-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
body #app .offer-ticket-heading strong { overflow-wrap:anywhere; min-width:0; }
body #app #inbox-view .offer-ticket p { color:var(--text-primary); }
body #app #inbox-view .offer-ticket .offer-delivery-note { color:var(--text-secondary); font-size:var(--text-caption); }
body #app #inbox-view .offer-ticket { cursor:default; }
body #app .offer-reference { margin-top:var(--space-3); font-size:var(--text-caption); color:var(--text-secondary); }
body .offer-recipient { display:grid; gap:var(--space-1); padding:var(--space-3); margin:var(--space-3) 0 var(--space-4); background:var(--bg-subtle); border-radius:var(--radius-sm); font-size:var(--text-body); overflow-wrap:anywhere; }
body .offer-recipient p { margin:var(--space-2) 0 0; }
body .offer-preview .offer-preview-text { white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-surface); }
body .offer-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; font:var(--text-code)/var(--line-body) var(--font-mono); }
body .offer-preview details { margin-top:var(--space-3); }
body #app .team-table .team-more { display:none; }
body #app .team-open-label { display:none; }
body #app .team-person strong { font-size:var(--text-body); color:var(--text-primary); }
body #app #team-view .availability-panel { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
body #app #team-view .coverage-blockers { padding-left:var(--space-5); margin:var(--space-2) 0; }
body #app #team-view #representative-list p { margin:0; }
@media(max-width:1100px) {
 body #app #team-view .team-table tbody tr { grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-3); padding:var(--space-3) 0; }
 body #app #team-view .team-table tbody th { grid-column:1; grid-row:1; min-width:0; }
 body #app #team-view .team-table td:nth-child(2),body #app #team-view .team-table td:nth-child(5),body #app #team-view .team-table td:nth-child(6) { display:none; }
 body #app #team-view .team-table td:nth-child(3) { grid-column:1; grid-row:2; }
 body #app #team-view .team-table td:nth-child(4) { grid-column:2; grid-row:2; align-self:center; }
 body #app #team-view .team-table td:nth-child(7) { grid-column:2; grid-row:1; align-self:center; }
 body #app #team-view .team-table .team-more { display:block; grid-column:1/-1; }
 body #app #team-view .team-table td::before { display:none; }
 body #app #team-view .team-open-label { display:inline; color:var(--text-secondary); }
 body #app #team-view .team-table .team-more summary { min-height:var(--touch-target); display:flex; align-items:center; font-size:var(--text-caption); }
 body #app #team-view .team-more dl { display:flex; gap:var(--space-4); flex-wrap:wrap; margin:var(--space-2) 0; }
 body #app #team-view .team-more dt { font-size:var(--text-caption); color:var(--text-secondary); }
 body #app #team-view .team-more dd { margin:var(--space-1) 0 0; }
 body #app #team-view .team-person { gap:var(--space-2); }
 body #app #team-view .team-person>div { min-width:0; overflow-wrap:anywhere; }
}
@media(max-width:980px) {
 body #app .header-search-group { flex:0 0 var(--touch-target); width:var(--touch-target); min-width:var(--touch-target); max-width:var(--touch-target); }
 body #app .header-search-group #global-search-open.search-tool { display:flex; justify-content:center; width:var(--touch-target); height:var(--touch-target); min-width:var(--touch-target); padding:0; }
 body #app .header-search-group #global-search-open>span,body #app .header-search-group #global-search-open>kbd { display:none; }
}
@media(min-width:981px) {
 body #app .header-search-group #global-search-open>span { display:inline; }
}
@media(max-width:600px) {
 body #app #runtime-status { gap:var(--space-1) var(--space-2); padding:var(--space-1) var(--space-3); }
 body #app #runtime-status #delivery-indicator { min-height:var(--touch-target); }
 body #app #presence-health:not(:empty) { flex-basis:100%; }
 body #app .monitoring-nav { gap:var(--space-1); }
 body #app .monitoring-nav button { padding:var(--space-2); }
}
@media(max-width:600px) {
  body #app .presence-select { font-size:0; gap:0; }
  body #app .presence-select .rebrand-select { min-width:96px; }
  body #app .presence-select .sb-select-trigger { min-width:96px; }
  body #app .team-filters>.rebrand-select { flex:1; }
}

/* Final shell geometry. Keep one header rhythm after the legacy layout layers. */
:root { --header-height:64px; }
body #app>main>header {
  height:var(--header-height);
  min-height:var(--header-height);
  flex:0 0 var(--header-height);
  padding:0 var(--space-5);
  gap:var(--space-4);
}
body #app .header-title { flex:0 1 auto; }
body #app .header-actions {
  min-width:0;
  flex:0 1 auto;
  justify-content:flex-end;
  margin-left:auto;
  gap:var(--space-2);
}
body #app .header-search-group {
  width:min(240px,24vw);
  min-width:var(--touch-target);
  max-width:240px;
  flex:0 1 240px;
  margin-left:0;
}
body #app .header-search-group #global-search-open.search-tool,
body #app #notifications-open,
body #app .presence-select .sb-select-trigger,
body #app #sdk-connection {
  height:var(--touch-target);
  min-height:var(--touch-target);
}
body #app #notifications-open {
  width:var(--touch-target);
  min-width:var(--touch-target);
}
body #app .presence-select { margin:0; }
body #app .presence-select .rebrand-select,
body #app .presence-select .sb-select-trigger { min-width:112px; }
body #app #sdk-connection {
  max-width:180px;
  padding-inline:var(--space-3);
  overflow:hidden;
}
body #app #sdk-connection>span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body #app #runtime-status {
  min-height:36px;
  padding:var(--space-1) var(--space-5);
  gap:var(--space-2) var(--space-4);
}

body[data-view="inbox"] #app>main>header {
  height:var(--header-height);
  min-height:var(--header-height);
  flex-basis:var(--header-height);
  padding-inline:var(--space-4);
  gap:var(--space-4);
}
body[data-view="inbox"] .inbox-workspace-switcher,
body[data-view="inbox"] #app .inbox-header-avatar {
  height:40px;
  min-height:40px;
}
body[data-view="inbox"] #app .inbox-header-avatar {
  width:40px;
  min-width:40px;
  max-width:40px;
  max-height:40px;
  flex-basis:40px;
}
body[data-view="inbox"] #inbox-view { padding-top:0; }

@media(max-width:1199px) {
  body #app .header-search-group {
    width:var(--touch-target);
    min-width:var(--touch-target);
    max-width:var(--touch-target);
    flex:0 0 var(--touch-target);
    gap:0;
  }
  body[data-view="inbox"] #app .header-search-group {
    width:var(--touch-target);
    min-width:var(--touch-target);
    max-width:var(--touch-target);
    flex-basis:var(--touch-target);
  }
  body #app .header-search-group #global-search-open.search-tool {
    width:var(--touch-target);
    min-width:var(--touch-target);
    padding:0;
    justify-content:center;
  }
  body #app .header-search-group #global-search-open.search-tool>span,
  body #app .header-search-group #global-search-open.search-tool>kbd,
  body #app .presence-select { font-size:0; }
}

@media(max-width:820px) {
  :root { --header-height:56px; }
  body #app>main>header,
  body[data-view="inbox"] #app>main>header {
    padding-inline:var(--space-2);
    gap:var(--space-1);
  }
  body[data-view="inbox"] #app>main>header .header-title { order:0; }
  body[data-view="inbox"] .inbox-workspace-switcher { order:1; }
  body[data-view="inbox"] #app>main>header .header-actions { order:2; }
  body[data-view="inbox"] #app .inbox-header-avatar { display:none; }
  body[data-view="inbox"] #app #inbox-view .visitor-workspace:not(.has-selection)>#ticket-detail { display:none; }
  body[data-view="inbox"] #app #inbox-view .visitor-workspace:not(.has-selection)>.ticket-list { display:grid; }
}

@media(max-width:760px) {
  body #app .presence-select { display:none !important; }
}

@media(max-width:520px) {
  body #app .presence-select .rebrand-select,
  body #app .presence-select .sb-select-trigger { min-width:88px; width:88px; }
  body #app #sdk-connection { width:var(--touch-target); min-width:var(--touch-target); padding:0; justify-content:center; }
  body #app #sdk-connection>span { display:none; }
}

/* Conversations intentionally inherits the shared sidebar styles from Accounts. */