/* ============================================================ */
/*  COREUCX - app shell & page styles                            */
/*  Tokens + component primitives live in coreucx-lib.css        */
/*  (the Brandbook library). This file layers on top of it.      */
/* ============================================================ */

/* ============================================================ */
/*  App shell                                                    */
/* ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: 192px 1fr;
  grid-template-rows: 38px 1fr;
  /* Fit-to-viewport via transform (not CSS `zoom`, which host overlays can't
     hit-map). Layout box is sized 1/z so scaling by z fills the viewport exactly.
     CRISPNESS LAW: the transform exists ONLY when actually shrinking (html[data-fit-scaled]).
     A permanent scale(1) still promotes the shell to a composited layer, which drops
     text from subpixel to grayscale antialiasing portal-wide - the topbar lockup
     looked softer than the marketing footer's identical lockup. */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
html[data-fit-scaled] .app-shell {
  width: calc(100vw / var(--fit-zoom, 1));
  height: calc(100vh / var(--fit-zoom, 1));
  transform: scale(var(--fit-zoom, 1));
  transform-origin: 0 0;
}
.app-shell[data-nav="collapsed"] { grid-template-columns: 45px 1fr; }

.topbar {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  /* right edge tracks the workspace frame padding (--sp-3, folded from portal.css) */
  padding: 0 var(--sp-3) 0 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.brand {
  display: flex; align-items: center; gap: 5px;
  font-weight: 600; letter-spacing: -0.01em;
  width: 186px;
  font-size: 11px;
}
.brand-mark {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--accent-fg);
  flex-shrink: 0;
}
.brand-mark svg { width: 12px; height: 12px; } /* hub glyph - same art as marketing .logo-glyph, scaled 20/30 -> 12/18 */
.brand-name { color: var(--text); line-height: 1; } /* wordmark colours come from .cx-wordmark (lib) */
.brand-sub {
  font-family: var(--font-mono); font-size: 7px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0; color: var(--text-faint);
  line-height: 1; white-space: nowrap;
  text-align: center; /* centered under the wordmark - matches the marketing header lockup (supersedes the v2.50 edge-justify) */
} /* strapline under the wordmark - portal twin of marketing .wm-sub as rendered in the header (centered, no tracking), scaled to the 33px topbar */

.topbar-search {
  display: flex; align-items: center; gap: 5px;
  padding: 0 8px;
  height: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 256px;
  color: var(--text-muted);
  font-size: 10px;
}
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.topbar-search input {
  background: none; border: 0; outline: 0; color: var(--text); flex: 1;
  font-size: 10px;
}
.topbar-search kbd {
  font-family: var(--font-mono); font-size: 8.5px;
  padding: 1px 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-faint);
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }


.user-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 2px;
  border-radius: 799px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.user-chip:hover { border-color: var(--border-strong); }
.user-chip .avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.15 290), oklch(0.65 0.2 45));
  color: white; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 600;
}
.user-chip .meta { font-size: 9.5px; line-height: 1.1; }
.user-chip .meta .dim { color: var(--text-muted); font-size: 8.5px; font-family: var(--font-mono); }

/* ---- sidebar ---- */
.sidebar {
  grid-row: 2;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 6px 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-section {
  margin-top: 11px;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 5px 10px 3px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.nav-section:first-child { margin-top: 3px; }
.nav-section.collapsible {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none; border-radius: var(--r-sm);
  transition: color 120ms ease, background 120ms ease;
}
.nav-section.collapsible:hover { color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 90%); }
.nav-section.active.collapsible:hover { color: var(--accent); }
.nav-section .sec-caret { flex-shrink: 0; opacity: 0.7; }
.nav-section .sec-count {
  margin-left: auto; font-size: 7.5px; letter-spacing: 0;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 799px; padding: 0 5px; color: var(--text-faint);
}
.nav-section.active { color: var(--accent); }
.nav-section.active .sec-caret { opacity: 1; }

.nav-item.nav-sub { padding-left: 24px; font-size: 9.5px; opacity: 0.82; }
.nav-item.nav-sub.active { opacity: 1; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-md);
  font-size: 10.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  position: relative;
  user-select: none;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  font-weight: 500;
}
.nav-item .icon { width: 13px; height: 13px; flex-shrink: 0; display: grid; place-items: center; }
.nav-item .label { flex: 1; }
.nav-item .badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  /* caps/digits-only content (LIVE, counts): baseline law - see .pill in coreucx-lib */
  padding: calc(0.5px + var(--optics-text, 0px)) 5px 0;
  height: 15px; /* border-box: same visual box as the old 13px content + 2px borders */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 799px;
  color: var(--text-muted);
}
.nav-item.active .badge { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.nav-item .badge.badge-off, .nav-item.active .badge.badge-off { background: var(--bg-2); color: var(--text-muted); border-color: var(--border); }
.nav-item .badge.badge-on, .nav-item.active .badge.badge-on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.nav-sub { padding-left: 24px; font-size: 10px; }

/* ---- main pane ---- */
.main {
  grid-row: 2;
  overflow: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
/* thin orange scrollbar (transparent track) for main content + table areas */
.main { /* folded from portal.css */ scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.main::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.page {
  padding: 16px 19px 32px;
  max-width: 100%;
  display: flex; flex-direction: column;
  gap: 13px;
}
.page-header {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
}
.page-title {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
}
.page-title .crumb {
  color: var(--text-faint);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0;
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
}
.page-subtitle { color: var(--text-muted); font-size: 10.5px; }
.page-actions { margin-left: auto; display: flex; gap: 5px; }


/* ============================================================ */
/*  Toolbar - table page header bar                              */
/* ============================================================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  row-gap: 5px;
}
.toolbar .spacer { flex: 1; }
.toolbar .topbar-search { height: 24px; width: 224px; }
.toolbar .select.sm { height: 24px; padding-right: 21px; }
.toolbar .tabs { border-bottom: 0; margin-bottom: 0; }
.toolbar .tab { padding: 5px 10px; }
/* Button geometry comes from the Global Library ONLY (.btn = 24px): the old
   `.toolbar .btn { height:24px; font-size:9.5px }` override fought .btn.sm (19px)
   at equal specificity - two sources for one control's geometry (the load-order-
   dependent icon shift). Toolbar buttons now use the default .btn object.
   (A stray `.toolbar` selector fragment + the dead unused `.field` rules that
   followed it were removed with it.) */

/* Form controls (.input/.select/.textarea + placeholder law) live in coreucx-lib.css */

/* .checkbox and .switch are form controls, not buttons: they share border, radius, background and
   transition with .btn because every interactive surface in this system does, but they carry input
   semantics (checked state, thumb travel) that .btn has no notion of. Kept local deliberately. */
.checkbox { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; cursor: pointer; user-select: none; }
.checkbox input { width: 11px; height: 11px; accent-color: var(--accent); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; font-size: 10px; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 22px; height: 13px; background: var(--border-strong); border-radius: 799px; transition: background 120ms ease; position: relative; }
.switch .track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: white; border-radius: 50%; transition: transform 140ms ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.switch input:checked ~ .track { background: var(--accent); }
.switch input:checked ~ .track::after { transform: translateX(10px); }

.kbd {
  font-family: var(--font-mono);
  font-size: 8.5px;
  padding: 1px 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}

.divider { height: 1px; background: var(--border); margin: 6px 0; }

/* ============================================================ */
/*  Layout helpers                                               */
/* ============================================================ */

.grid { display: grid; gap: 8px; }
.row { display: flex; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.between { justify-content: space-between; }
.center { align-items: center; }
/* ============================================================ */
/*  Widgets - Dashboard / Wallboard                              */
/* ============================================================ */

/* .card.kpi lives in coreucx-lib.css: CXKpi is a shared object used by portal pages AND the
   documentation, so app.css (portal chrome) is the wrong owner. */

/* ============================================================ */
/*  Omnichannel workspace additions                              */
/* ============================================================ */

/* channel filter chips */
/* unified inbox */
.inbox-scroll { overflow-y: auto; min-height: 0; flex: 1; }


/* message thread (reuses transcript bubble styles, adds inbound/outbound time rows) */
.thread { display: flex; flex-direction: column; gap: 8px; padding: 13px; overflow-y: auto; flex: 1; min-height: 0; }

/* composer */
.composer { border-top: 1px solid var(--border); background: var(--surface); }

/* row actions dropdown */
.row-menu {
  position: fixed; z-index: 200;
  min-width: 128px; padding: 4px;
  background: var(--elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
  animation: rm-in 120ms ease;
}
@keyframes rm-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.row-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; background: transparent;
  border-radius: var(--r-sm); font-size: 10.5px; color: var(--text);
  text-align: left; width: 100%; transition: background 120ms ease;
}
.row-menu-item:hover { background: var(--bg-2); }
.row-menu-item.danger { color: var(--c-danger); }
.row-menu-item.danger:hover { background: var(--c-danger-soft); }
.row-menu-item svg { opacity: 0.75; }

/* live dot */
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--c-danger); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px transparent; }
}

/* ============================================================ */
/*  Agent Workspace                                              */
/* ============================================================ */

.workspace {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 272px;
  gap: 8px;
  padding: 13px;
  flex: 1;
  min-height: 0;
}
.workspace[data-layout="phone-left"] {
  grid-template-columns: 272px minmax(0, 1fr) 224px;
}
.workspace[data-layout="focused"] {
  grid-template-columns: minmax(0, 1fr) 288px;
}

@media (max-width: 1024px) {
  .workspace[data-layout="default"] {
    grid-template-columns: minmax(0, 1fr) 256px;
  }
  .workspace[data-layout="phone-left"] {
    grid-template-columns: 256px minmax(0, 1fr);
  }
}
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 176px 1fr; }
  .brand { width: 176px; }
}

/* transcript */
.transcript {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 11px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
@keyframes blink { 50% { opacity: 0; } }

/* phone widget */
.phone {
  display: flex; flex-direction: column; gap: 8px;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.dialpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.dialpad button {
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: all 120ms ease;
}
.dialpad button:hover { background: var(--bg-2); border-color: var(--border-strong); }
.dialpad button:active { transform: scale(0.97); background: var(--accent-soft); }
.dialpad button .sub { font-size: 7px; color: var(--text-faint); letter-spacing: 0.1em; font-weight: 400; }

/* sentiment bar */
.sentiment {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.sentiment .label { font-size: 8.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); display: flex; justify-content: space-between; }
.sentiment .bar { height: 5px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.sentiment .bar .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--c-danger), var(--c-warning), var(--c-success)); }

/* chat */
.chat {
  display: flex; flex-direction: column;
  min-height: 0;
  flex: 1;
}
.chat-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; overflow-y: auto; flex: 1; }
/* .chat-msg and its three children removed: dead since the team-chat widget moved to its own
   .tc-call-chat-msgs markup in portal.css. Nothing in any .jsx/.js/.html referenced them. */

/* ============================================================ */
/*  Misc                                                         */
/* ============================================================ */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 6px 11px;
  font-size: 10px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.tab .count { margin-left: 3px; font-family: var(--font-mono); font-size: 8.5px; color: var(--text-faint); padding: 1px 4px; background: var(--bg-2); border-radius: 799px; }

.empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}
.empty .icon { opacity: 0.3; margin-bottom: 10px; }

/* live activity wave */
.wave {
  display: inline-flex; align-items: end; gap: 2px; height: 13px;
}
.wave span {
  width: 2px; background: currentColor; border-radius: 1px;
  animation: wave 1s ease-in-out infinite;
}
.wave span:nth-child(1) { animation-delay: 0.0s; height: 60%; }
.wave span:nth-child(2) { animation-delay: 0.1s; height: 90%; }
.wave span:nth-child(3) { animation-delay: 0.2s; height: 50%; }
.wave span:nth-child(4) { animation-delay: 0.3s; height: 80%; }
.wave span:nth-child(5) { animation-delay: 0.4s; height: 40%; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes slideup { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }

/* timeline used in call history drill-down */
.timeline { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }



/* ==============================================================
   PRESERVED ng-only rules — 0A V17 CSS library re-sync
   Selectors below exist in the ng portal but NOT anywhere in the
   V17 union (coreucx-lib.css + app.css + portal.css). They style
   live ng components not yet re-ported to V17 widget markup, and
   are kept verbatim so no ng-only rule is silently dropped.
   ============================================================== */

.brand-name .dim { color: var(--text-muted); font-weight: 400; margin-left: 3px; }
.topbar-status {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; height: 24px;
  font-size: 9.5px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.topbar-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-success), transparent 80%); }
.toolbar .btn { height: 24px; font-size: 9.5px; }
.toolbar .live-dot { font-size: 8px; }
/* fields */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cfg-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cfg-field > div:first-child {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 8.5px;
  color: var(--text-faint);
}
.cfg-field .input, .cfg-field .select, .cfg-field .textarea { width: 100%; }
.field label { font-size: 9px; color: var(--text-muted); font-weight: 500; }
.field label .hint { color: var(--text-faint); font-weight: 400; margin-left: 3px; font-family: var(--font-mono); font-size: 8.5px; }
.gap-2 { gap: 6px; }
.gap-3 { gap: 10px; }
.gap-4 { gap: 13px; }
/* ============================================================ */
/*  Widgets - Dashboard / Wallboard                              */
/* ============================================================ */

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.kpi-label {
  font-size: 8.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  display: flex; align-items: center; gap: 5px;
}
.kpi-value {
  font-size: 22.5px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: flex; align-items: baseline; gap: 5px;
}
.kpi-value .unit, .kpi-value .total { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.kpi-delta { font-size: 9px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; font-family: var(--font-mono); }
.kpi-delta.up { color: var(--c-success); }
.kpi-delta.down { color: var(--c-danger); }
.kpi .sparkline { position: absolute; right: 10px; bottom: 10px; opacity: 0.4; }
/* ============================================================ */
/*  Omnichannel workspace additions                              */
/* ============================================================ */

/* channel filter chips */
.chan-filter { display: flex; gap: 3px; flex-wrap: wrap; }
.chan-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 7px;
  border-radius: 799px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  font-size: 9px; cursor: pointer; transition: all 100ms ease;
  user-select: none;
}
.chan-chip:hover { border-color: var(--border-strong); color: var(--text); }
.chan-chip.active { background: var(--accent-soft); color: var(--accent-soft-fg); border-color: transparent; }
.chan-chip .cc-count { font-family: var(--font-mono); font-size: 8px; opacity: 0.7; }
.chan-chip svg { width: 10px; height: 10px; }
/* unified inbox */
.omni-inbox { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.inbox-group {
  padding: 6px 10px 4px;
  font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); position: sticky; top: 0; background: var(--surface); z-index: 1;
  display: flex; align-items: center; gap: 5px;
}
.inbox-item {
  display: flex; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 100ms ease; position: relative;
}
.inbox-item:hover { background: var(--bg-2); }
.inbox-item.active { background: var(--accent-soft); }
.inbox-item.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
}
.inbox-item .ii-av {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 600;
  position: relative;
}
.inbox-item .ii-ch {
  position: absolute; right: -2px; bottom: -2px;
  width: 13px; height: 13px; border-radius: 4px;
  display: grid; place-items: center; border: 2px solid var(--surface);
}
.inbox-item.active .ii-ch { border-color: var(--accent-soft); }
.inbox-item .ii-ch svg { width: 7px; height: 7px; color: #fff; }
.inbox-item .ii-body { flex: 1; min-width: 0; }
.inbox-item .ii-row1 { display: flex; align-items: baseline; gap: 5px; }
.inbox-item .ii-name { font-weight: 500; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item .ii-time { margin-left: auto; font-family: var(--font-mono); font-size: 8px; color: var(--text-faint); flex-shrink: 0; }
.inbox-item .ii-msg { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.inbox-item .ii-tags { display: flex; gap: 3px; margin-top: 4px; align-items: center; }
.inbox-item .ii-unread {
  min-width: 13px; height: 13px; padding: 0 3px; border-radius: 799px;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  display: grid; place-items: center;
}
/* conversation header (text channels) */
.conv-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 6px;
}
.conv-head .ch-av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 11px; position: relative; flex-shrink: 0;
}
.conv-head .ch-meta { flex: 1; min-width: 96px; }
.conv-head .ch-name { font-size: 12px; font-weight: 600; }
.conv-head .ch-sub { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.conv-head .ch-actions { display: flex; gap: 5px; flex-shrink: 0; margin-left: auto; }
.thread-day { text-align: center; font-family: var(--font-mono); font-size: 8px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin: 3px 0; }
.composer-suggest { display: flex; gap: 5px; padding: 8px 10px 0; flex-wrap: wrap; }
.suggest-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 799px;
  border: 1px solid color-mix(in oklab, var(--c-ai), transparent 70%);
  background: color-mix(in oklab, var(--c-ai), transparent 93%);
  color: var(--text); font-size: 9.5px; cursor: pointer; transition: all 100ms ease;
  max-width: 100%; text-align: left;
}
.suggest-chip:hover { background: color-mix(in oklab, var(--c-ai), transparent 86%); border-color: var(--c-ai); }
.suggest-chip svg { width: 10px; height: 10px; color: var(--c-ai); flex-shrink: 0; }
.composer-box { display: flex; gap: 6px; align-items: flex-end; padding: 10px; }
.composer-box textarea {
  flex: 1; resize: none; min-height: 30px; max-height: 96px;
  padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text); font-size: 11px; font-family: var(--font-sans);
  outline: none; line-height: 1.45;
}
.composer-box textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); background: var(--surface); }
.composer-tools { display: flex; align-items: center; gap: 3px; padding: 0 10px 8px; }
.composer-tools .spacer { flex: 1; }
.composer-tools .hint { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-faint); }
/* copilot / context tabs in right column */
.copilot-action {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-2);
}
.copilot-action .ic { width: 21px; height: 21px; border-radius: 6px; background: color-mix(in oklab, var(--c-ai), transparent 88%); color: var(--c-ai); display: grid; place-items: center; flex-shrink: 0; }
.copilot-action .ca-t { font-size: 10px; font-weight: 500; }
.copilot-action .ca-d { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
.kb-snippet { padding: 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: 10px; }
.kb-snippet .kb-src { font-family: var(--font-mono); font-size: 8px; color: var(--c-ai); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
/* channel timeline dot in customer history */
.cust-hist { display: flex; flex-direction: column; gap: 0; }
.cust-hist .ch-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cust-hist .ch-item:last-child { border-bottom: 0; }
.cust-hist .ch-dot { width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.cust-hist .ch-dot svg { width: 10px; height: 10px; }
/* softphone collapse */
.softphone-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 11px; background: var(--surface); border: 0; border-top: 1px solid var(--border);
  color: var(--text); font-size: 10px; font-weight: 500; cursor: pointer;
}
.softphone-toggle:hover { background: var(--bg-2); }
/* live dot */
.live-dot {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-danger);
}
.live-dot::before {
  content: ""; width: 5px; height: 5px; background: var(--c-danger); border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
.workspace[data-layout="focused"] .ws-col-left { display: none; }
.ws-col-left, .ws-col-center, .ws-col-right {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.ws-col-center { min-width: 0; }
/* agent card */
.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 11px;
  display: flex; flex-direction: column; gap: 8px;
}
.agent-avatar {
  width: 35px; height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.15 290), oklch(0.65 0.2 45));
  color: white; display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  position: relative;
}
.agent-avatar::after {
  content: ""; position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-success);
  border: 2px solid var(--surface);
}
.agent-name { font-weight: 600; font-size: 11px; }
.agent-meta { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); }
.agent-status-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.agent-status-bar.available { border-left: 2px solid var(--c-success); }
.agent-status-bar.on-call { border-left: 2px solid var(--c-info); background: color-mix(in oklab, var(--c-info), transparent 92%); }
.agent-status-bar.on-pause { border-left: 2px solid var(--c-warning); background: color-mix(in oklab, var(--c-warning), transparent 92%); }
.agent-status-bar.post-handoff { border-left: 2px solid var(--c-ai); background: color-mix(in oklab, var(--c-ai), transparent 92%); }
/* current call card */
.call-hero {
  display: flex; gap: 13px;
  padding: 13px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
}
.call-hero .caller-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.12 220), oklch(0.6 0.15 260));
  color: white; display: grid; place-items: center;
  font-size: 16px; font-weight: 600;
  flex-shrink: 0;
}
.call-hero .meta { flex: 1; min-width: 0; }
.call-hero .name { font-size: 13px; font-weight: 600; }
.call-hero .number { font-family: var(--font-mono); color: var(--text-muted); font-size: 10.5px; }
.call-hero .duration {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}
.call-hero .duration-label { font-size: 8.5px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.call-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.call-action {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 9px;
  color: var(--text-muted);
  flex: 1;
  min-width: 56px;
  transition: all 120ms ease;
}
.call-action:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-strong); }
.call-action.active { background: var(--accent-soft); color: var(--accent-soft-fg); border-color: transparent; }
.call-action.danger { color: var(--c-danger); border-color: color-mix(in oklab, var(--c-danger), transparent 70%); }
.call-action.danger:hover { background: var(--c-danger); color: white; }
.call-action svg { width: 14px; height: 14px; }
.tx-msg {
  display: flex; gap: 8px;
  max-width: 88%;
}
.tx-msg.caller { align-self: flex-start; }
.tx-msg.agent { align-self: flex-end; flex-direction: row-reverse; }
.tx-msg.ai { align-self: flex-start; }
.tx-msg .who-avatar {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 8px; font-weight: 600; color: white;
  flex-shrink: 0;
}
.tx-msg.caller .who-avatar { background: oklch(0.6 0.15 220); }
.tx-msg.agent .who-avatar { background: var(--accent); color: var(--accent-fg); }
.tx-msg.ai .who-avatar { background: var(--c-ai); }
.tx-bubble {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.tx-meta {
  font-size: 8.5px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  display: flex; gap: 6px;
}
.tx-text {
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text);
}
.tx-msg.agent .tx-text { background: var(--accent-soft); border-color: transparent; color: var(--accent-soft-fg); }
.tx-msg.ai .tx-text { background: color-mix(in oklab, var(--c-ai), transparent 92%); border-color: color-mix(in oklab, var(--c-ai), transparent 80%); }
.tx-text.partial::after {
  content: "▍";
  color: var(--text-muted);
  animation: blink 1s steps(2, end) infinite;
}
.phone-ext {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.phone-ext .num { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.phone-ext .reg { margin-left: auto; }
/* queue table */
.queue-row { cursor: pointer; }
.queue-row.queue-level td { font-weight: 500; }
.queue-row.queue-level .answer-btn { background: var(--c-success); color: white; border-color: transparent; }
.level-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 3px;
}
.level-tag.did { background: color-mix(in oklab, var(--c-info), transparent 88%); color: var(--c-info); }
.level-tag.condition { background: color-mix(in oklab, var(--c-warning), transparent 88%); color: oklch(0.55 0.16 75); }
:root[data-theme="dark"] .level-tag.condition { color: var(--c-warning); }
.level-tag.ivr { background: color-mix(in oklab, var(--c-ai), transparent 88%); color: var(--c-ai); }
.level-tag.queue { background: color-mix(in oklab, var(--c-success), transparent 88%); color: var(--c-success); }
.sentiment .bar .marker {
  position: absolute; top: -2px; width: 2px; height: 8px;
  background: var(--text); border-radius: 1px;
}
/* AI summary card */
.ai-summary {
  padding: 10px;
  background: color-mix(in oklab, var(--c-ai), transparent 94%);
  border: 1px solid color-mix(in oklab, var(--c-ai), transparent 75%);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 6px;
}
.ai-summary .header {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-ai);
}
.ai-summary p { margin: 0; font-size: 10px; color: var(--text); line-height: 1.55; }
.ai-summary ul { margin: 0; padding-left: 13px; font-size: 10px; color: var(--text); line-height: 1.6; }
.chat-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 10px; }
.chat-msg .who { font-weight: 500; color: var(--text); }
.chat-msg .at { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-faint); margin-left: auto; }
.chat-msg .text { color: var(--text-muted); flex: 1; }
.chat-input {
  display: flex; gap: 5px; padding: 6px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.chat-input input { flex: 1; height: 21px; line-height: normal; padding: 0 6px; font-size: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); outline: none; }
/* ============================================================ */
/*  IVR builder canvas                                           */
/* ============================================================ */

.flow-canvas {
  position: relative;
  background: var(--bg-2);
  background-image:
    radial-gradient(circle, var(--grid-line) 1px, transparent 1px);
  background-size: 13px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  height: 416px;
  overflow: hidden;
}
.flow-node {
  position: absolute;
  width: 176px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 9.5px;
}
.flow-node .head {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 5px;
  font-weight: 500;
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.flow-node .head.start { background: color-mix(in oklab, var(--c-info), transparent 90%); color: var(--c-info); }
.flow-node .head.ivr-node { background: color-mix(in oklab, var(--c-ai), transparent 90%); color: var(--c-ai); }
.flow-node .head.queue { background: color-mix(in oklab, var(--c-success), transparent 90%); color: var(--c-success); }
.flow-node .head.vm { background: color-mix(in oklab, var(--c-warning), transparent 90%); color: oklch(0.55 0.16 75); }
:root[data-theme="dark"] .flow-node .head.vm { color: var(--c-warning); }
.flow-node .body { padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.flow-node .body .key { font-family: var(--font-mono); color: var(--text-muted); font-size: 9px; }
.flow-node .body .val { color: var(--text); }
.flow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.flow-node .port { position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); transform: translateY(-50%); }
.flow-node .port.in { left: -4px; right: auto; background: var(--text-muted); }
.flow-edge { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.flow-edge.active { stroke: var(--accent); }
.flow-edge-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 8px; }
/* dotgrid bg used for some panels */
.dotgrid {
  background-image: radial-gradient(circle, var(--grid-line) 1px, transparent 1px);
  background-size: 10px 10px;
}
/* incoming call toast */
.incoming-toast {
  position: fixed;
  right: 19px;
  bottom: 19px;
  width: 256px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 11px 13px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: flex; gap: 10px; align-items: center;
  animation: slideup 240ms ease;
}
.incoming-toast.urgent { border-color: var(--c-success); box-shadow: 0 0 0 1px var(--c-success), var(--shadow-lg); }
.incoming-toast .ringing { color: var(--c-success); animation: ring 1.2s ease-in-out infinite; }
.tl-item { display: flex; gap: 8px; align-items: flex-start; position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: 5px; top: 13px; bottom: -6px; width: 1px; background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); z-index: 1; margin-top: 3px; flex-shrink: 0; }
.tl-item.success .dot { border-color: var(--c-success); }
.tl-item.ai .dot { border-color: var(--c-ai); }
.tl-item.warning .dot { border-color: var(--c-warning); }
.tl-item .ts { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-faint); margin-right: 5px; }
.tl-item .label { font-size: 10px; }
.tl-item .body { color: var(--text-muted); font-size: 9px; margin-top: 2px; }
/* latency waterfall */
.waterfall { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; }
.wf-row { display: grid; grid-template-columns: 128px 1fr 51px; align-items: center; gap: 6px; font-size: 9.5px; }
.wf-row .name { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }
.wf-row .track { height: 10px; background: var(--bg-2); border-radius: 2px; position: relative; overflow: hidden; }
.wf-row .fill { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.wf-row .fill.ai { background: var(--c-ai); }
.wf-row .fill.network { background: var(--c-info); }
.wf-row .fill.audio { background: var(--c-success); }
.wf-row .fill.warn { background: var(--c-warning); }
.wf-row .val { font-family: var(--font-mono); font-size: 9px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
/* placeholder content */
.placeholder-shimmer {
  background: linear-gradient(90deg, var(--bg-2), var(--surface-2), var(--bg-2));
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--r-sm);
}

@media (max-width: 1184px) {
  .conv-head .ch-actions .btn-label { display: none; }
  .conv-head .ch-actions .btn.sm { width: 24px; padding: 0; justify-content: center; }
}

@media (max-width: 1024px) {
  .workspace[data-layout="default"] .ws-col-left { display: none; }
  .workspace[data-layout="phone-left"] .ws-col-right { display: none; }
}