/* TalkShop "Grok Bot Desktop" Simple & Clean Theme — Soft Matte Charcoal-Zinc (Not Pitch Black) + Crisp Light Mode */
:root {
  --bg: #131417;
  --c1: #17181C;
  --c2: #1C1E23;
  --line: rgba(255, 255, 255, 0.08);
  --tx: #F4F4F6;
  --mu: #A1A1AA;
  --k-bg: #131417;
  --k-side: #17181C;
  --k-card: #1C1E23;
  --k-s2: #22242A;
  --k-bd: rgba(255, 255, 255, 0.08);
  --k-t1: #F4F4F6;
  --k-t2: #A1A1AA;
  --k-t3: #71717A;
  --k-pill: #1E2026;
  --k-pri: #2A2A30;
  --k-pri-t: #E4E4E7;
  --k-ok: #10B981;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] {
  --bg: #FFFFFF;
  --c1: #F7F8FA;
  --c2: #FFFFFF;
  --line: rgba(15, 23, 42, 0.08);
  --tx: #111215;
  --mu: #52525B;
  --k-bg: #FFFFFF;
  --k-side: #F7F8FA;
  --k-card: #FFFFFF;
  --k-s2: #F3F4F6;
  --k-bd: rgba(15, 23, 42, 0.08);
  --k-t1: #111215;
  --k-t2: #52525B;
  --k-t3: #71717A;
  --k-pill: rgba(0, 0, 0, 0.04);
  --k-pri: #E4E4E7;
  --k-pri-t: #18181B;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
body, main, .main {
  background: var(--k-bg) !important;
  color: var(--k-t1) !important;
}
aside, #call-history-sidebar, .insp, .top, .bar {
  background: var(--k-side) !important;
  border-color: var(--k-bd) !important;
}
.card, .sn-card, .cc, .c-pill, .tse, .tsr, .tsh-c, .lc, .dl-c {
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
  box-shadow: var(--k-shadow) !important;
}
.warn:before { color: var(--k-t3) !important; }
.sn-card h4, .warn, .badge, .hbx .l > b {
  color: var(--k-t3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  opacity: 1 !important;
}
/* Top-bar & sidebar utility pills: identical, soft matte Grok Bot pills */
.ts-pill, .ts-lic-pill, .top .ghost, .top button.ghost, #aud, .p-chip {
  background: var(--k-pill) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t2) !important;
  font: 500 12px -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  box-shadow: none !important;
}
.ts-pill:hover, .ts-lic-pill:hover, .p-chip:hover {
  color: var(--k-t1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
#take, .bar button:not(.ghost) {
  background: var(--k-pri) !important;
  color: var(--k-pri-t) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.g { background: var(--k-ok) !important; }
.g.idle { background: var(--k-t3) !important; }

/* Hybrid Pro Engine card in Right Inspector */
.hbx {
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
  border-radius: 12px !important;
  box-shadow: var(--k-shadow) !important;
  color: var(--k-t1) !important;
  padding: 14px !important;
}
.hbx h4 {
  font: 600 13px -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: var(--k-t1) !important;
  margin-bottom: 6px !important;
}
.hbx .l {
  border-top: 1px solid var(--k-bd) !important;
  padding: 10px 0 !important;
}
.hbx .v {
  font-weight: 500 !important;
  color: var(--k-t1) !important;
}
.hbx [data-hb="prov"] {
  opacity: 1 !important;
  color: var(--k-t2) !important;
  font-size: 11.5px;
  white-space: nowrap;
}
.hbx [data-hb="prov"]:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-ok);
  margin: 0 5px 1px 6px;
}
.insp .hbx .ch {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px !important;
}
.hbx .ch button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t2) !important;
  border-radius: 8px !important;
  padding: 7px 9px !important;
  font: 500 11.5px -apple-system, system-ui !important;
  text-align: left;
}
.hbx .ch button:before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-t3);
  opacity: 0.5;
}
.hbx .ch button.on {
  color: var(--k-t1) !important;
}
.hbx .ch button.on:before {
  background: var(--k-ok);
  opacity: 1;
}
.hbx label.vm {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 8px 10px;
  background: var(--k-s2);
  border: 1px solid var(--k-bd);
  font-size: 12px;
  color: var(--k-t1);
}
.hbx label.vm:first-of-type {
  border-radius: 8px 8px 0 0;
  margin-top: 6px !important;
}
.hbx label.vm:last-of-type {
  border-radius: 0 0 8px 8px;
  border-top: 0;
}
.hbx label.vm input {
  accent-color: var(--k-pri);
  margin: 0;
}
.hbx textarea, .hbx input.w {
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t1) !important;
  border-radius: 8px !important;
  padding: 8px !important;
}
.hbx .go {
  background: var(--k-pri) !important;
  color: var(--k-pri-t) !important;
  border-radius: 999px !important;
  font: 600 12.5px -apple-system, system-ui !important;
  padding: 9px 14px !important;
}
.hbx .out {
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: var(--k-t2) !important;
}
.hbx .out .st {
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd);
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
.hbx .out b {
  color: var(--k-t1);
  font-weight: 600;
}
.hb-alert {
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  border-left: 2px solid var(--k-t1) !important;
  color: var(--k-t1) !important;
  border-radius: 6px !important;
}
/* Center-stage feed bubbles */
.hb-feed {
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
  border-left: 2px solid var(--k-bd) !important;
  border-radius: 12px !important;
  color: var(--k-t1) !important;
  padding: 10px 13px !important;
  margin: 8px 0 !important;
  font: 13px/1.5 -apple-system, system-ui !important;
}
.hb-feed b {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 11px -apple-system, system-ui;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-t3);
}
.hb-feed b:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-t3);
}
.hb-feed.hb-ai { border-left-color: var(--k-ok) !important; }
.hb-feed.hb-ai b:before { background: var(--k-ok); }
.hb-feed.hb-alert-f { border-left-color: var(--k-t1) !important; }
.msg {
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t1) !important;
  border-radius: 12px !important;
}
.Whisper, .System {
  background: transparent !important;
  border: 0 !important;
  color: var(--k-t3) !important;
}
/* Company logo */
#insp-company-img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.co-badge {
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
}
.co-dom {
  border-color: var(--k-bd) !important;
  color: var(--k-t2);
}
/* Neutralize modals (Help, Plans, Tour) to match Grok Bot soft charcoal + crisp white pills */
#ts-help .tsh, #ts-lic .lbox, #ts-tour-card {
  background: var(--k-side) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t1) !important;
}
.ts-agency-badge, .sn-badge, .sn-badge.hi, .lc .pop-b {
  background: var(--k-pill) !important;
  color: var(--k-t2) !important;
  border: 1px solid var(--k-bd) !important;
}
.ts-card button.p, .tse-b .p, .lc button, .tsh-r button.p, #ts-lic .act button, #ts-gate button.p {
  background: var(--k-pri) !important;
  color: var(--k-pri-t) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.lc.pop { border-color: rgba(255, 255, 255, 0.22) !important; }
/* Transcript bubbles: neutral in both themes, whispers NEVER in a bubble */
html #tx .fd-b[style*="text-align:center"],
html[data-theme="light"] #tx .fd-b[style*="text-align:center"],
html #tx .msg.Whisper,
html[data-theme="light"] #tx .msg.Whisper,
html #tx .Whisper,
html #tx .hb-whisper,
html #tx .fdw,
.Whisper,
.msg.Whisper,
.hb-whisper,
.fdw,
.fd-b.hb-whisper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--k-t2) !important;
  font-size: 12px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 12px 0 !important;
  padding: 2px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}
html #tx .fd-b[style*="text-align:center"]::before,
html #tx .fd-b[style*="text-align:center"]::after,
html #tx .msg.Whisper::before,
html #tx .msg.Whisper::after,
.Whisper::before,
.Whisper::after,
.hb-whisper::before,
.hb-whisper::after,
.fdw::before,
.fdw::after,
.fd-b.hb-whisper::before,
.fd-b.hb-whisper::after {
  content: "" !important;
  flex: 1 1 40px !important;
  height: 1px !important;
  background: var(--k-bd) !important;
}
html #tx .fd-b[style*="text-align:center"] * { color: var(--k-t2) !important; }
.hb-guardrail {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px dashed var(--k-bd) !important;
  border-bottom: 1px dashed var(--k-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--k-t2) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 6px 10px !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html[data-theme="light"] #tx [class*=ai],
html[data-theme="light"] #tx [class*=agent],
html[data-theme="light"] #tx .a,
html[data-theme="light"] #tx .msg:nth-child(even),
html[data-theme="light"] #tx .msg.Julie,
html[data-theme="light"] #tx .msg.Alex,
html[data-theme="light"] #tx .fd-b[style*="0 8px auto"] {
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  color: var(--k-t1) !important;
}
html[data-theme="light"] #tx .hb-feed.hb-ai { border-left: 2px solid var(--k-ok) !important; }

/* Clean Left Sidebar Agent Header (.ch-hero) — No rainbow ring, no spinning orb, no multi-color equalizer clutter, clean live indicator */
.ch-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  margin: 4px 8px 8px !important;
  background: var(--k-card) !important;
  border: 1px solid var(--k-bd) !important;
  border-radius: 10px !important;
  text-align: left !important;
}
.ch-hero .orb {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  box-shadow: none !important;
  margin: 0 !important;
  animation: none !important;
  transform: none !important;
}
.ch-hero .orb::before, .ch-hero .orb::after {
  display: none !important;
}
.ch-hero .orb img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 7px !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
}
/* Hide the cluttered red/green equalizer bars under the avatar */
.ch-hero .eq {
  display: none !important;
}
.ch-hero b, .ch-hero .ag-name {
  flex: 1 !important;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: var(--k-t1) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ch-hero > span:last-child, .ch-hero .ag-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: var(--k-t1) !important;
  background: var(--k-s2) !important;
  border: 1px solid var(--k-bd) !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.ch-hero > span:last-child::before, .ch-hero .ag-live::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--k-ok) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
/* Hide any top-bar or footer theme pills outside Settings */
.top .ts-tp, .ch-foot .ts-tp {
  display: none !important;
}

/* BYO-AI Brain Selector & Caller-Safe Speech Firewall */
.hbx .hb-prov-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.hbx .hb-prov-sel,
.hbx .hb-model-sel,
.hbx .hb-byo input {
  width: 100%;
  background: var(--k-s2) !important;
  color: var(--k-t1) !important;
  border: 1px solid var(--k-bd) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  font: 500 11.5px -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
  outline: none;
}
.hbx .hb-byo {
  margin-top: 6px;
  padding: 8px;
  background: var(--k-s2);
  border: 1px solid var(--k-bd);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hbx .hb-byo-line {
  display: flex;
  gap: 5px;
  align-items: center;
}
.hbx .hb-save-key {
  white-space: nowrap;
  border: 1px solid var(--k-bd) !important;
  background: var(--k-cta-bg) !important;
  color: var(--k-cta-fg) !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font: 600 11px -apple-system, system-ui !important;
  cursor: pointer;
}
.hbx .hb-fw-box {
  margin-top: 8px;
  padding: 8px 9px;
  background: var(--k-s2);
  border: 1px solid var(--k-bd);
  border-radius: 8px;
}
.hbx .hb-fw-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--k-t1);
  margin-bottom: 5px;
}
.hbx .hb-fw-sub {
  font-size: 10.5px;
  color: var(--k-t2);
  margin-bottom: 6px;
  line-height: 1.35;
}
.hbx .hb-fw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hbx .hb-fw-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--k-bd);
  background: var(--k-s1);
  color: var(--k-t2);
  font: 500 10.5px -apple-system, system-ui;
  cursor: pointer;
  user-select: none;
}
.hbx .hb-fw-tag.on {
  color: var(--k-t1);
  border-color: var(--k-bd2);
}
.hbx .hb-fw-tag.on::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--k-ok);
}

.ts-tp, .ts-app-row { display: none !important; }


/* === TOP-TIER HEADER BAR LAYOUT & UNIFIED GROK BOT PALETTE === */
:root, html, html[data-theme="dark"] {
  --bg: #18181B !important;
  --c1: #141417 !important;
  --c2: #202024 !important;
  --line: rgba(255, 255, 255, 0.08) !important;
  --tx: #E4E4E7 !important;
  --mu: #A1A1AA !important;
  --sb: #141417 !important;
  --st: #18181B !important;
  --ins: #141417 !important;
  --card: #202024 !important;
  --ln: rgba(255, 255, 255, 0.08) !important;
  --ln-strong: rgba(255, 255, 255, 0.13) !important;
  --t1: #E4E4E7 !important;
  --t2: #A1A1AA !important;
  --t3: #71717A !important;
  --wm: #E4E4E7 !important;
  --hov: #27272A !important;
  --sel: #2A2A30 !important;
  --k-bg: #18181B !important;
  --k-side: #141417 !important;
  --k-card: #202024 !important;
  --k-s1: #1C1C20 !important;
  --k-s2: #27272A !important;
  --k-bd: rgba(255, 255, 255, 0.08) !important;
  --k-bd2: rgba(255, 255, 255, 0.14) !important;
  --k-t1: #E4E4E7 !important;
  --k-t2: #A1A1AA !important;
  --k-t3: #71717A !important;
  --k-pill: #232328 !important;
  --k-pri: #2A2A30 !important;
  --k-pri-t: #E4E4E7 !important;
  --k-cta-bg: #2A2A30 !important;
  --k-cta-fg: #E4E4E7 !important;
  --k-ok: #10B981 !important;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="light"] {
  --bg: #F4F4F5 !important;
  --c1: #ECECEE !important;
  --c2: #FAFAFA !important;
  --line: rgba(24, 24, 27, 0.09) !important;
  --tx: #18181B !important;
  --mu: #52525B !important;
  --sb: #ECECEE !important;
  --st: #F4F4F5 !important;
  --ins: #ECECEE !important;
  --card: #FAFAFA !important;
  --ln: rgba(24, 24, 27, 0.09) !important;
  --ln-strong: rgba(24, 24, 27, 0.15) !important;
  --t1: #18181B !important;
  --t2: #52525B !important;
  --t3: #71717A !important;
  --wm: #18181B !important;
  --hov: #E4E4E7 !important;
  --sel: #DCDCE0 !important;
  --k-bg: #F4F4F5 !important;
  --k-side: #ECECEE !important;
  --k-card: #FAFAFA !important;
  --k-s1: #F4F4F5 !important;
  --k-s2: #E4E4E7 !important;
  --k-bd: rgba(24, 24, 27, 0.09) !important;
  --k-bd2: rgba(24, 24, 27, 0.15) !important;
  --k-t1: #18181B !important;
  --k-t2: #52525B !important;
  --k-t3: #71717A !important;
  --k-pill: #E4E4E7 !important;
  --k-pri: #E4E4E7 !important;
  --k-pri-t: #18181B !important;
  --k-cta-bg: #E4E4E7 !important;
  --k-cta-fg: #18181B !important;
  --k-ok: #10B981 !important;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Unified Grok Bot App Surfaces — Zero Stark White or Pitch Black */
body, #center-pane, .wrap {
  background: var(--st) !important;
  color: var(--t1) !important;
}
.top, #call-history-sidebar, #caller-snapshot {
  background: var(--sb) !important;
  border-color: var(--ln) !important;
  color: var(--t1) !important;
}
.sn-card, .card, .cc, .c-pill, .seg, .ch-search input, .ch-search button, .wbar input, .sn-note input, input.f, select.f, textarea.f, #tx-idle-card {
  background: var(--card) !important;
  border: 1px solid var(--ln) !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}

/* Top Header Bar Layout */
.top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  background: var(--sb) !important;
  border-bottom: 1px solid var(--ln) !important;
  flex-wrap: nowrap !important;
}
.top-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
.top-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}
.top .top-brand {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.top .pill {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  white-space: nowrap !important;
}
.top-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* All Top Header Buttons & Action Buttons: Unified Grok Bot Matte Zinc (No Stark White/Black Contrast) */
.top-cluster button,
.top-cluster button.ghost,
.top-cluster #take,
.top-settings-btn,
.wbar button,
.sn-note button,
.wbtn {
  margin: 0 !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  background: var(--card) !important;
  border: 1px solid var(--ln-strong) !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}
.top-cluster button:hover,
.top-cluster button.ghost:hover,
.top-cluster #take:hover,
.top-settings-btn:hover,
.wbar button:hover,
.sn-note button:hover,
.wbtn:hover {
  background: var(--hov) !important;
  border-color: var(--k-bd2) !important;
  color: var(--t1) !important;
}
.top-settings-btn,
.top-cluster #take,
.wbar button,
.sn-note button {
  background: var(--sel) !important;
  font-weight: 600 !important;
}
#fd-sugg .fd-sp, #fd-sugg button {
  background: var(--card) !important;
  border: 1px solid var(--ln) !important;
  color: var(--t2) !important;
}
#fd-sugg .fd-sp:hover, #fd-sugg button:hover {
  background: var(--hov) !important;
  color: var(--t1) !important;
}
.top-div {
  width: 1px !important;
  height: 16px !important;
  background: var(--ln-strong) !important;
  display: inline-block !important;
  flex: 0 0 1px !important;
}
.ts-lic-pill, .top .ts-pill, .ch-foot .ts-pill {
  display: none !important;
}

.hbx > *, .hbx-left, .hbx-right, .hbx select { min-width: 0 !important; max-width: 100% !important; }

/* === STRICT 12PX SIDEBAR ALIGNMENT & LIVE LINES DROPDOWN (t296u/t297u) === */
/* 1. Strict 12px Left/Right Grid Alignment Across Every Element in #call-history-sidebar */
#call-history-sidebar {
  padding: 0 !important;
  background: var(--sb, #141417) !important;
  border-right: 1px solid var(--ln, rgba(255, 255, 255, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-head,
#call-history-sidebar .ch-search {
  padding: 12px 12px 6px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-srch,
#call-history-sidebar .ch-search input,
#call-history-sidebar #ch-q {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: #1C1C20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--t1, #E4E4E7) !important;
  font: 400 12.5px/30px -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-srch:focus,
#call-history-sidebar .ch-search input:focus {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #202024 !important;
}

#call-history-sidebar .ch-new,
#call-history-sidebar .ch-search button {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #1C1C20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--t1, #E4E4E7) !important;
  font: 500 16px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-new:hover,
#call-history-sidebar .ch-search button:hover {
  background: #242429 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Julie Agent Row (.ag-card / .ch-hero / #ai-agent-header): Exact same 12px left & 12px right edges as .ch-head */
#call-history-sidebar .ag-card,
#call-history-sidebar .ch-hero,
#call-history-sidebar #ai-agent-header {
  margin: 0 12px 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #1C1C20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

#call-history-sidebar .ch-hero .orb,
#call-history-sidebar .ag-card .orb {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #232329 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

#call-history-sidebar .ch-hero .orb img,
#call-history-sidebar .ag-card .orb img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
}

#call-history-sidebar .ch-hero b,
#call-history-sidebar .ch-hero .ag-name,
#call-history-sidebar .ag-card .ag-name {
  flex: 1 1 auto !important;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: var(--t1, #E4E4E7) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Flat inline status indicator inside Julie card: NO nested pill box, NO duplicate bullet */
#call-history-sidebar .ag-st,
#call-history-sidebar .ch-hero > span:last-child,
#call-history-sidebar .ch-hero .ag-live,
#call-history-sidebar #ch-hero-live {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: #10B981 !important;
  white-space: nowrap !important;
}

/* Disable old ::before pseudo-dot when .dot span is present, or use single 6px dot on #ch-hero-live */
#call-history-sidebar .ch-hero > span:last-child::before,
#call-history-sidebar .ch-hero .ag-live::before {
  display: none !important;
  content: none !important;
}

#call-history-sidebar .ag-st .dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  display: inline-block !important;
  flex: 0 0 6px !important;
  box-shadow: none !important;
}

/* Section headers & empty states aligned to exact 12px left/right edge */
#call-history-sidebar .ch-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#call-history-sidebar .sec-lbl,
#call-history-sidebar .ch-sec {
  padding: 10px 12px 4px !important;
  margin: 0 !important;
  font: 600 10.5px/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--t3, #71717A) !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .empty-calls,
#call-history-sidebar .ch-empty {
  padding: 4px 12px 10px !important;
  margin: 0 !important;
  font: 400 12.5px/1.4 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: var(--t3, #71717A) !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .c-item,
#call-history-sidebar .ch-row {
  margin: 2px 12px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-foot {
  padding: 8px 12px !important;
  margin: 0 !important;
  border-top: 1px solid var(--ln, rgba(255, 255, 255, 0.08)) !important;
  box-sizing: border-box !important;
}

#call-history-sidebar .ch-foot button {
  padding: 7px 10px !important;
  border-radius: 8px !important;
  width: 100% !important;
  font-size: 12px !important;
  color: var(--t2, #A1A1AA) !important;
}

/* 2. Top-Left "Live Lines" Matte Charcoal-Zinc Dropdown Pill & Popover */
.ts-lines-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.top .pill.ts-lines-btn,
button.ts-lines-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 32px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: var(--card, #202024) !important;
  border: 1px solid var(--ln-strong, rgba(255, 255, 255, 0.13)) !important;
  color: var(--t1, #E4E4E7) !important;
  font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  user-select: none !important;
}

.top .pill.ts-lines-btn:hover,
button.ts-lines-btn:hover,
.top .pill.ts-lines-btn[aria-expanded="true"] {
  background: var(--hov, #27272A) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.ts-lines-btn .g {
  margin: 0 !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  flex: 0 0 7px !important;
}

.ts-lines-caret {
  font-size: 11px !important;
  color: var(--t2, #A1A1AA) !important;
  margin-left: 2px !important;
  line-height: 1 !important;
}

.ts-lines-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 340px !important;
  background: #202024 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
  z-index: 9999 !important;
  color: #E4E4E7 !important;
}

.ts-lines-menu[hidden] {
  display: none !important;
}

.ts-lines-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px 5px !important;
  font: 600 10.5px/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #71717A !important;
}

.ts-lines-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #E4E4E7 !important;
  text-align: left !important;
  cursor: pointer !important;
  margin: 1px 0 !important;
  font: 400 12.5px/1.35 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
}

.ts-lines-item:hover {
  background: #27272A !important;
}

.ts-lines-item.on {
  background: #2A2A30 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.ts-lines-item-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.ts-lines-item-main b {
  font: 600 12.5px/1.25 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: #F4F4F6 !important;
}

.ts-lines-item-main span {
  font: 400 11.5px/1.25 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: #A1A1AA !important;
}

.ts-lines-tag {
  flex: 0 0 auto !important;
  font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
}

.ts-lines-sep {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 5px 4px !important;
}

.ts-lines-manage {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #D4D4D8 !important;
  text-decoration: none !important;
  font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif !important;
}

.ts-lines-manage:hover {
  background: #27272A !important;
  color: #F4F4F6 !important;
}

@media (max-width: 860px) {
  .ts-lines-btn .ts-line-sub {
    display: none !important;
  }
  .ts-lines-menu {
    width: min(320px, 92vw) !important;
  }
}