/* Migration v40.95 pass-1: cascade layers replace #__never__ hack (normal-priority rules only) */
@layer base, overrides;

@layer base, overrides;

@layer base {

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

nav.mobile-topnav { display: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); letter-spacing: -0.02em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--overlay-w-08); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

.sidebar { flex-shrink: 0; top: 0; overflow-y: auto; z-index: var(--z-sidebar); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 1; min-width: 0; overflow: hidden; padding-right: 16px; max-width: 50%; }

.page-title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--text-primary); }
.hero-headline { font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: var(--text-primary); margin-bottom: var(--space-3); }
.main-content { flex: 1; padding: var(--space-4) var(--space-6) var(--space-8); overflow-x: hidden; }

.sidebar-header { margin-bottom: var(--space-2); }

.brand { display: flex; align-items: center; gap: var(--space-3); }
.nav-item {
  color: var(--text);
  padding: .7rem .9rem;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background .12s ease, border-color .12s ease;
}
.nav-item:hover { background: var(--overlay-w-04); }
.nav-item.active { background: rgba(30, 136, 229, 0.14); border-color: rgba(30, 136, 229, 0.28); color: var(--primary-strong); }

#sidebar-history-list .history-item { display: block; background: transparent; border: none; border-radius: 8px; color: var(--muted); padding: 8px 12px; line-height: 1.3; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease; }
#sidebar-history-list .history-item .history-title { color: var(--text); font-weight: 500; font-size: .78rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
#sidebar-history-list .history-item .history-meta { color: var(--faint); font-size: .68rem; letter-spacing: .02em; }
#sidebar-history-list .history-item:hover { color: var(--text); background: var(--overlay-w-04); border: none; }

#sidebar-history-list { display: flex; flex-direction: column; gap: var(--space-2); }
#sidebar-history-list .empty-state { color: var(--faint); font-size: var(--text-sm); padding: var(--space-2); }
.status-row { display: flex; gap: var(--space-2); flex-wrap: nowrap; align-items: center; overflow: hidden; min-width: 0; flex-shrink: 1; }

.pill {
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.pill.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.pill.warn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(232, 175, 52, .14); }
.pill.down::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }
.sync-indicator { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }.sync-dot--warn  { background: var(--warning); box-shadow: 0 0 0 4px rgba(232, 175, 52, .14); }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.hero-card { padding: var(--space-8); }
.hero-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; pointer-events: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; margin-bottom: var(--space-3); }
.hero-card h2, .hero-card .hero-headline { font-family: var(--font-display); line-height: 1.1; max-width: 22ch; margin-bottom: var(--space-3); }
.sidebar-footer--v1940 .footer-notif-btn,
.sidebar-footer--v1940 .footer-settings-btn {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: rgba(230, 232, 235, 0.70);
    border-radius: 8px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {   cursor: pointer;  }
.panel { padding: var(--space-5); }
.panel-title, .panel h3, .panel h4 { font-size: var(--text-base); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-3); }

.summary-item { display: flex; justify-content: space-between; gap: var(--space-3); padding: .85rem 0; border-top: 1px solid var(--overlay-w-05); color: var(--muted); font-size: var(--text-sm); }
.summary-item:first-of-type { border-top: 0; padding-top: 0; }
.summary-item strong { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; }

.division-view .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.kpi-card { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); color: inherit; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; cursor: pointer; }
.kpi-card:hover { box-shadow: var(--shadow-md); }

.kpi-label { font-weight: 500; }
.kpi-value { font-family: var(--font-display); }
.kpi-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.kpi-trend { font-size: .8rem; font-weight: 600; color: var(--muted); }
.kpi-trend.up    { color: var(--success); }
.kpi-trend.down  { color: var(--danger); }
.kpi-trend.warn  { color: var(--warning); }
.kpi-unavailable { color: var(--faint); font-size: .72rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--overlay-w-02); white-space: nowrap; letter-spacing: .02em; }
.sparkline { flex-shrink: 0; opacity: .7; }
.skeleton-card { display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton-line { height: 12px; background: linear-gradient(90deg, var(--overlay-w-04) 0%, rgba(255,255,255,0.1) 50%, var(--overlay-w-04) 100%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px; }
.skeleton-label { width: 50%; }
.skeleton-value { height: 22px; width: 70%; }
.skeleton-sub { width: 40%; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.dashboard-lower { display: grid; grid-template-columns: 1.35fr .85fr; gap: var(--space-6); }

.chat-panel { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-height: 440px; position: relative; overflow: hidden; }
.chat-panel::after { content: ''; position: absolute; left: -40px; bottom: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(30, 136, 229, .14), transparent 70%); pointer-events: none; }
.chat-panel .eyebrow { margin-bottom: var(--space-2); }
.chat-panel h3 { font-size: 1.55rem; font-weight: 800; max-width: 22ch; letter-spacing: -0.025em; line-height: 1.1; }
.chat-messages { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; max-height: 440px; overflow-y: auto; padding-right: var(--space-2); }

.chat-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.015);
}.msg-error {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--danger);
}.chat-textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  outline: none;
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 48px;
  transition: border-color .12s ease;
}
.chat-textarea:focus { border-color: var(--primary); }

.right-section { padding: var(--space-5); }
.right-section > h3, .right-section > .section-label { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-3); letter-spacing: -0.01em; color: var(--text); }

.automation-row { justify-content: space-between; border-top: none; }
.automation-sub { font-size: .78rem; margin-top: 2px; color: var(--muted); }
.auto-status { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; display: inline-block; }
.activity-item:first-child { border-top: 0; padding-top: 0; }
.activity-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--primary); box-shadow: 0 0 0 4px rgba(30, 136, 229, .14); }
.automation-meta,
.activity-body { flex: 1; min-width: 0; }
.activity-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.activity-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }

.empty-state {
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:hover { background: var(--overlay-w-02); }
.auto-name { font-weight: 600; color: var(--text); }

.toggle-track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; transition: background .12s ease; cursor: pointer; }
.toggle-track::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .14s ease, background .14s ease;
}
.dashboard-view, .reports-view { display: flex; flex-direction: column; gap: var(--space-6); }.report-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);  cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.report-card:hover { transform: translateY(-2px); }
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.report-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.floating-chat-toggle:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* v41.96 Task I: Ask FAB opens a right-side panel (not a small popup).
   ~420px on desktop, full width on mobile, full viewport height minus topbar.
   Uses fixed positioning so it always docks to the viewport right edge. */
.floating-chat-panel {
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  display: none;
  flex-direction: column;
  background: var(--bg-card, #1c1c1e);
  border-left: 1px solid var(--border, #2a2a2a);
  box-shadow: -8px 0 32px rgba(0,0,0,0.35);
  z-index: 1200;
  transform: translateX(20px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.floating-chat.open .floating-chat-panel {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}
.btn-close { background: transparent; border: 0; color: var(--muted); font-size: 1.35rem; cursor: pointer; line-height: 1; }
.btn-close:hover { color: var(--text); }.floating-chat-composer .chat-textarea { min-height: 44px; }

.toast-container { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.toast {
  pointer-events: auto;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .7rem 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  animation: toastIn .24s ease;
}@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal { position: fixed; inset: 0; background: var(--shadow-alpha-55); display: grid; place-items: center; z-index: var(--z-modal); backdrop-filter: blur(6px); animation: toastIn .2s ease; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); width: min(480px, 90vw); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-box h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.modal-box label { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.modal-box input, .modal-box textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: .7rem .85rem; font-size: var(--text-sm); outline: none; }
.modal-box input:focus,
.modal-box textarea:focus { border-color: var(--primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

.division-view { display: flex; flex-direction: column; gap: var(--space-5); }.settings-view .panel label { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-top: 1px solid var(--overlay-w-05); font-size: var(--text-sm); }
.settings-view .panel label:first-of-type { border-top: 0; }

@media (max-width: 1280px) {
  .page-hero, .dashboard-lower { grid-template-columns: 1fr; }

  .coo-kpi-grid { grid-template-columns: repeat(4, 1fr); }

  html body .gl-dash-pack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* v41.58h: component:chat block L253-L294 moved to mobile-v2.css */
/* v40.14 - Ask panel mobile bottom-sheet, moved to its own <=820px block so
   it stops exactly where the new >=821px right-side-panel rule (~line 2577)
   begins. Same cutoff the customer drawer (.rt-crm-sheet) uses, so both
   panels switch from bottom-sheet to side-rail at the same width and never
   overlap in a half-applied middle state. Content unchanged from the prior
   <=900px behavior below - just retargeted to <=820px and now driven by
   translateY so it matches the drawer's mobile slide-up pattern. */
/* v41.58h: component:chat block L302-L326 moved to mobile-v2.css */
@media (max-width: 560px) {
  .hero-card { padding: var(--space-5); }
  .hero-card h2 { font-size: 1.75rem; }
  .chat-panel { padding: var(--space-5); }
  /* v41.96 Task I: mobile full-width side panel */
  .floating-chat-panel { width: 100vw !important; max-width: 100vw !important; right: 0 !important; }
}

.kpi-card .kpi-label { font-size: .78rem; letter-spacing: .005em; text-transform: none; }
.kpi-card .kpi-value { font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-card .kpi-footer { margin-top: auto; }
.kpi-card .sparkline { width: 56px; height: 20px; }

body:not([data-route="/dashboard"]) .page-subtitle { display: none; }

.floating-chat { position: fixed; right: var(--space-6); bottom: var(--space-6); pointer-events: none; }
.floating-chat > .floating-chat-toggle,
.floating-chat > button.floating-chat-toggle { pointer-events: auto; position: relative; z-index: 1301; cursor: pointer; }

.settings-view h3, .reports-view h3 { font-size: 1.1rem; margin-bottom: var(--space-3); font-weight: 600; }

.division-view h2 { font-size: 1.6rem; letter-spacing: -0.025em; font-weight: 700; margin-bottom: var(--space-2); }
.division-view .btn-ghost { align-self: flex-start; margin-bottom: var(--space-2); }
.btn-ghost:hover { color: var(--primary-strong); }
.division-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}@media (max-width: 1080px) {
  .division-lower { grid-template-columns: 1fr; }

  .gl-floating-pill.gl-floating-pill--topbar { display: none; }
}
.ai-insight-card, .division-reports { border: 1px solid var(--border); }
.ai-insight-card .insight-streaming { font-size: .88rem; color: var(--muted); line-height: 1.65; margin-top: var(--space-2); }
.division-reports #division-report-links a {
  display: inline-block;
  margin-right: var(--space-2);
  margin-top: var(--space-2);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 136, 229, 0.08);
  color: var(--primary-strong);
  font-size: .78rem;
  text-decoration: none;
  border: 1px solid rgba(30, 136, 229, 0.18);
}.kpi-loading,
.text-muted { color: var(--faint); }

.sync-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; text-transform: capitalize; letter-spacing: .02em; }

body[data-route^="/division/"] .page-subtitle, body[data-route="/reports"] .page-subtitle, body[data-route="/settings"] .page-subtitle, body[data-route="/automations"] .page-subtitle, body[data-route="/ask"] .page-subtitle { display: none; }

.sidebar { width: 280px !important; }

.sidebar .sidebar-header { margin-bottom: 0; padding: 0 0.35rem; }
.sidebar .sidebar-section { gap: 0.1rem !important; padding: 0 0.1rem; }

.sidebar .nav-item { font-size: 0.9rem; font-weight: 500; justify-content: space-between; }
.sidebar .sidebar-history { flex: 0 1 auto; min-height: 0; }
.sidebar #sidebar-history-list { gap: 0.3rem !important; padding: 0 0.1rem; }
.sidebar #sidebar-history-list .history-item { backdrop-filter: blur(6px); }
.sidebar #sidebar-history-list .history-item .history-meta {  font-size: 0.66rem !important; }

.sidebar .sidebar-footer { border: 1px solid var(--border-soft) !important; border-radius: 14px !important; margin-top: auto; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--overlay-w-05); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(30, 136, 229, 0.25); }.floating-chat-messages:empty::before {
  color: var(--muted);
  font-size: var(--text-sm);
  content: 'What do you want to know?';
}html body .glass-composer .chat-textarea {
  padding: 0.35rem 0.25rem;
  min-height: 34px;
  font-size: 0.88rem;
  resize: none;
  outline: none;
}
html body .glass-composer .chat-textarea:focus { border: 0; box-shadow: none; }

.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.composer-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}.composer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}.composer-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.composer-send { font-size: 1rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: transform 0.12s ease, background 0.15s ease; }
.composer-send:hover { background: var(--fg-inverse); transform: translateY(-1px); }
.composer-send:active { transform: translateY(0); }

.floating-chat-composer .btn-primary { display: none; }

.floating-chat-toggle::before { content: ''; width: 10px; height: 10px; border-radius: 50%; opacity: 1; }

.sidebar > * + * { margin-top: 0; }

#chat-history-list { display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; padding-right: 2px; }
#chat-history-list .history-item { border-radius: 10px; padding: 0.6rem 0.75rem; color: var(--muted); cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
#chat-history-list .history-item .history-meta { font-size: 0.68rem; letter-spacing: 0.015em; }
#chat-history-list .empty-state { color: var(--faint); font-size: 0.78rem; padding: 0.5rem; }
#chat-history-list::-webkit-scrollbar { width: 6px; }
#chat-history-list::-webkit-scrollbar-thumb { background: var(--overlay-w-05); border-radius: 4px; }
.card,
.hero-card,
.floating-chat-panel,

.sidebar { padding-bottom: 0; }
.topbar,
.main-content { background-clip: padding-box; }

.sidebar-history::-webkit-scrollbar { width: 4px; }
.sidebar-history::-webkit-scrollbar-thumb { background: rgba(30, 136, 229, 0.18); border-radius: 4px; }
.sidebar-history::-webkit-scrollbar-thumb:hover { background: rgba(30, 136, 229, 0.32); }
.pill,

.eyebrow,

.page-title,
.card h2,
.card h3 { color: #e8efe9; }
.kpi-label { color: #8a9690 !important; }

.live-clock { font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 500; }

.kpi-card:hover,

.sidebar #sidebar-history-list .history-item { background: transparent !important; border: none !important; }
.sidebar #sidebar-history-list .history-item:hover { background: var(--overlay-w-04) !important; border: none !important; }
.sidebar #sidebar-history-list .history-item .history-title { color: #e2e6e9 !important; }
.sidebar #sidebar-history-list .history-item .history-meta { color: #7a8086 !important; }

.hero-card { position: relative; overflow: hidden; }
.hero-card::after { background: radial-gradient(circle, rgba(30, 136, 229, 0.14), transparent 70%) !important; }.page-title { color: #e8ecef !important; }.kpi-label,

.eyebrow { color: var(--brand-blue-hover-pure) !important; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-8);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: var(--ntl-main) !important;
  border-bottom: 1px solid var(--ntl-sep) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar .nav-item:hover { color: var(--fg-inverse) !important; }
.sidebar .nav-item.active { box-shadow: none; }
.sidebar #sidebar-history-list .history-item:hover, .sidebar #sidebar-history-list .history-item .history-title, #chat-history-list .history-item .history-title { color: var(--ntl-title) !important; }
.sidebar #sidebar-history-list .history-item .history-meta, #chat-history-list .history-item .history-meta { color: var(--ntl-tab-text) !important; }

.card, .hero-card, .kpi-card, .summary-stack, .report-card, .ai-insight-card { background: var(--ntl-main); border: 1px solid var(--ntl-tab-outline); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.pill, .sync-chip { background: transparent; border: 1px solid var(--ntl-tab-outline); color: var(--ntl-tab-text); backdrop-filter: none; }

.page-title,
.hero-headline { color: var(--ntl-title) !important; }
.page-subtitle { font-size: 0.82rem; letter-spacing: 0.005em; line-height: 1.35; max-width: 58ch; }
.eyebrow,
.kpi-label,
.section-label { color: var(--ntl-tab-text); }

.btn-primary:not(.btn-close) { background: var(--ntl-tab-active); color: var(--ntl-title); border: 1px solid var(--ntl-tab-outline); }
.btn-primary:not(.btn-close):hover { background: #3a5c71; filter: none; }
.btn-ghost { background: transparent; border: 1px solid var(--ntl-tab-outline); color: var(--ntl-title); }

.btn-ghost:hover { background: var(--overlay-w-03) !important; border-color: var(--overlay-w-12) !important; }
html body .glass-composer .chat-textarea { color: var(--ntl-chatbox-text); background: transparent; border: 0; }

html body .glass-composer .chat-textarea::placeholder { color: rgba(197, 197, 196, 0.45); }

html body .composer-chip { background: var(--ntl-upload-bg); border: 1px solid var(--ntl-tab-outline); }
.composer-chip .cc-ico { font-size: 0.82rem; line-height: 1; }
.composer-chip--context { background: var(--ntl-upload-bg); border-color: var(--ntl-tab-outline); color: var(--ntl-upload-text); }
html body .composer-chip--context .cc-ico { color: var(--ntl-accent); }
html body .composer-chip-plus { background: transparent; border: 0; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease; color: var(--ntl-upload-text); }
html body .composer-chip-plus:hover { background: var(--ntl-upload-bg); color: var(--ntl-title); }

html body .composer-mic {
 background: transparent;
 border: 0;
 width: 30px; height: 30px;
 border-radius: 8px;
 cursor: pointer;
 font-size: 0.95rem;
 display: grid; place-items: center;
 transition: background 0.15s ease, color 0.15s ease;
 color: var(--ntl-dictate); }
html body .composer-send:hover { background: #e8e7e5; }

.btn-primary, .pill, .card, .eyebrow { text-shadow: none; }

.sparkline path, .sparkline polyline { stroke: var(--ntl-tab-text); }

.ai-insight-card { border-left: 2px solid var(--ntl-tab-active); }

.division-header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--ntl-sep); }

/* v41.58h: component:kpi block L475-L485 moved to mobile-v2.css */
.dashboard-view .kpi-grid, .main-content .kpi-grid, .kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
@media (max-width: 980px) {
  .dashboard-view .kpi-grid,
  .main-content .kpi-grid,
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .coo-kpi-grid {
 grid-template-columns: repeat(2, 1fr) !important; }
  .coo-kpi-btn--3, .coo-kpi-btn--2 { grid-column: span 1 !important; }
}

.kpi-card { min-height: 120px; padding: 0.75rem 1rem; gap: 0.4rem; }
.kpi-card .kpi-label, .kpi-label { font-size: 0.85rem; color: var(--ntl-tab-text); text-transform: none; letter-spacing: 0; }
.kpi-card .kpi-value, .kpi-value { font-size: 2rem; font-weight: 800; color: var(--ntl-title); letter-spacing: -0.035em; line-height: 1.02; }
.kpi-card:hover { border-color: var(--overlay-w-12); background: #1c1d1e !important; }

.sidebar { display: flex; flex-direction: column; height: 100vh; padding: 0.9rem 0.8rem; gap: 0.6rem; }
.sidebar-header { flex: 0 0 auto; margin-bottom: 0; }
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 0.55rem; padding-right: 0.15rem; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--overlay-w-08); border-radius: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

.sidebar-history { background: var(--ntl-panel-wrap); border: 1px solid var(--overlay-w-03); border-radius: 10px; padding: 0.55rem; min-height: 0; overflow-y: auto; padding-bottom: 0.5rem; flex: 0 0 auto; max-height: none; overflow: visible; }
@media (max-height: 780px) {
  .sidebar-history {
 max-height: none; }
}
.sidebar-footer { flex-shrink: 0; position: relative; z-index: 2; flex: 0 0 auto; margin-top: 0.25rem !important; }

.chat-panel .panel-title { font-size: 0.95rem; color: var(--ntl-title); font-weight: 600; margin-bottom: 0.5rem; }
.chat-panel .chat-empty { color: var(--ntl-tab-text); font-size: 0.85rem; padding: 0.4rem 0.15rem; background: transparent; border: 0; }

.automation-row:first-child { border-top: none; padding-top: 0; }
.automation-row:hover { border-color: var(--overlay-w-12); }

.division-reports .report-card, .division-reports .report-card:hover, .division-reports #division-report-links a, .division-reports #division-report-links a:hover { border: 1px solid var(--ntl-tab-outline) !important; color: var(--ntl-title) !important; }
.division-reports #division-report-links a:hover { background: var(--overlay-w-03) !important; }

.msg-bubble { padding: .95rem 1.05rem; max-width: 92%; line-height: 1.6; font-size: var(--text-sm); word-wrap: break-word; }

.chat-textarea { caret-color: var(--ntl-chatbox-text); }

html body .floating-chat-toggle { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }

.hero-card .eyebrow { color: var(--ntl-tab-text); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.hero-card .hero-headline { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.35rem; color: var(--ntl-title); }
.hero-card .hero-lead { color: var(--ntl-tab-text); font-size: 0.85rem; margin-top: 0.25rem; }

.summary-stack .card, .summary-stack .panel { border: 1px solid var(--ntl-tab-outline); background: var(--ntl-main); border-radius: 12px; box-shadow: none; }

.pill.live::before { background: #525788 !important; }
.auto-status.on { background: #525788; box-shadow: 0 0 0 4px rgba(82, 87, 136, 0.18); }
.auto-status.off { background: var(--ntl-tab-text); box-shadow: none; }

.coo-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
.coo-kpi-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
  font-family: inherit;
  min-height: 86px;
  padding: 0.95rem 1.05rem;
  background: #1c1d1e !important;
  border: 1px solid var(--ntl-tab-outline) !important;
  border-radius: 12px;
  gap: 0.3rem;
}
.coo-kpi-btn:hover { background: #222326 !important; border-color: #4a5262; }
.coo-kpi-btn, .coo-kpi-btn * { transform: none; }
.coo-kpi-btn--3 { grid-column: span 2; }
.coo-kpi-btn--2 { grid-column: span 3; }
.coo-kpi-label { font-family: var(--font-display, 'Cabinet Grotesk', 'Satoshi', sans-serif); font-size: 0.95rem; font-weight: 600; color: var(--ntl-title); letter-spacing: -0.01em; line-height: 1.2; }
.coo-kpi-src { font-size: 0.74rem; color: var(--ntl-tab-text); letter-spacing: 0.02em; line-height: 1.3; }

.summary-stack {   box-shadow: none;  }
.summary-stack > .card, .summary-stack > .panel, .summary-stack .card.panel { background: var(--ntl-main); border: 1px solid var(--ntl-tab-outline); border-radius: 14px; box-shadow: none; }

.hero-card::after { display: none; content: none; }

.division-reports #division-report-links a, .report-link {
  background: #1c1d1e !important;
  border: 1px solid var(--ntl-tab-outline) !important;
  color: var(--ntl-title) !important;
  border-radius: 999px;
  padding: 6px 14px !important;
  display: inline-flex;
  align-items: center !important;
  gap: 0.35rem;
  font-size: 0.78rem;
  text-decoration: none;
  margin-right: 0.4rem;
  margin-top: 0.4rem;
}
.division-reports #division-report-links a:hover, .report-link:hover { background: #222326 !important; border-color: #4a5262 !important; }
.report-link-slug { color: var(--ntl-title) !important; }
.report-link-arrow { color: var(--ntl-tab-text); }

.division-header-bar .btn-ghost { background: transparent; border: 1px solid var(--ntl-tab-outline); color: var(--ntl-title); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; }

.report-card { border: 1px solid var(--ntl-tab-outline) !important; }
.report-card:hover { background: #1c1d1e !important; border-color: #4a5262 !important; }
.report-card .report-title { color: var(--ntl-title); font-weight: 600; }
.report-card .report-meta { color: var(--ntl-tab-text); }

.settings-view { display: flex; flex-direction: column; max-width: none; width: 100%; gap: 1.1rem; }
.settings-view h3 { color: var(--ntl-title); font-size: 1rem; font-weight: 600; margin: 0 0 0.7rem; text-transform: none; letter-spacing: 0; }

.settings-view .data-table { width: 100%; }
.settings-view .data-table th { color: var(--ntl-tab-text); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; border-bottom: 1px solid var(--ntl-sep); padding-bottom: 0.55rem; text-align: left; }
.settings-view .data-table td { border-bottom: 1px solid var(--ntl-sep); padding: 0.75rem 0; color: var(--ntl-title); font-size: 0.88rem; }
.settings-view .data-table tr:last-child td { border-bottom: 0; }
.settings-view .data-table .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ntl-tab-outline);
  color: var(--ntl-tab-text);
  font-size: 0.72rem;
}#chat-history-list .history-item { background: rgba(255,255,255,0.025); border: 1px solid var(--ntl-tab-outline); border-radius: 10px; padding: 0.55rem 0.7rem; }
#chat-history-list .history-item:hover { background: var(--overlay-w-05); border-color: #4a5262; }
#chat-history-list .history-item .history-title { color: var(--ntl-title) !important; }
#chat-history-list .history-item .history-meta { color: var(--ntl-tab-text) !important; }

.chat-panel.card { background: var(--ntl-main); border: 1px solid var(--ntl-tab-outline); border-radius: 14px; padding: 1rem 1rem; }

.automations-view .btn-primary, .automations-view .btn-ghost, .automations-view button { border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 500; }
.automations-view .data-table .btn-ghost:hover { background: var(--overlay-w-04); border-color: #4a5262; }

.sidebar-section { display: flex; flex-direction: column; gap: 0.3rem; }
.sidebar .nav-item { padding: 0.52rem 0.75rem; margin: 0; transition: background .12s ease, border-color .12s ease; }
html body .pill.live::before, html body .floating-chat-toggle::before, html body .sync-dot--ok, html body .auto-status.on, html body #etl-pill::before { background: #525788; box-shadow: 0 0 0 3px rgba(82, 87, 136, 0.22); }

.sidebar::before { content: ''; position: absolute; inset: 0; pointer-events: none; filter: blur(24px); opacity: 0.9; animation: sidebar-morph 22s ease-in-out infinite alternate; z-index: 0; }

@media (prefers-reduced-motion: reduce) {

  .sidebar::before, .sidebar::after { animation: none !important; }
}
body, .main, .main *, .card, .card *, table, th, td, p, span, div, li, a, label, strong, em, small { color: inherit; }
body { background: var(--ntl-main) !important; min-height: 100vh; display: flex; }

.empty-state, .report-card-body, .report-meta, .report-link-slug, .data-table td, .data-table th, .summary-item, .summary-item strong, .division-badge, .division-header, .division-header-bar, .settings-view, .settings-view *, .automations-view, .automations-view * { color: #D6D8DE !important; }
.empty-state,
.report-meta,

.sidebar .section-label, .sidebar [class*="section-title"] { color: var(--n4-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0.8rem 0.65rem 0.45rem; opacity: 0.88; }

.sidebar .sidebar-section + .sidebar-section,
.sidebar nav[aria-label*="Division" i],
.sidebar nav[aria-label*="division" i] { gap: 0.3rem; }

.sidebar .nav-item, .sidebar [class*="division"] a.nav-item { border: 1px solid rgba(255,255,255,0.035) !important; border-radius: 10px !important; margin-bottom: 0.25rem !important; }

.main .card, .main .report-card, .main .data-table, .main .summary-stack > *, .main .summary-item, .main .settings-view .card, .main .division-view .card, .main .division-reports, .main .automations-view .card, .main .reports-division .report-card, .main .report-link, .main .division-badge, .main .sync-chip, .main .pill, .dashboard-lower .card{ border-color: var(--accent-hover-soft-22); background: rgba(25, 118, 210, 0.05); color: #CEEEF3; }
.main .division-badge, .main .report-card .division-badge { background: rgba(33, 150, 243, 0.16); border-color: rgba(33, 150, 243, 0.30); color: var(--accent-primary-lighter); font-weight: 600; }

.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th { text-transform: uppercase; font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--n4-accent-soft); padding: 1rem 1.4rem; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--fg-faint-cool); text-align: left; white-space: nowrap; }
.data-table td { font-size: var(--text-sm); border-top: 1px solid var(--overlay-w-04); padding: 1rem 1.4rem !important; border-bottom: 1px solid var(--overlay-w-04) !important; vertical-align: middle !important; color: #D6D8DE !important; }
.data-table tr:last-child td { border-bottom: 0; }

.reports-division .report-cards { gap: 1.1rem !important; }
.report-card { background: var(--bg-card) !important; border-radius: 14px !important; }

.division-reports { background: var(--bg-card) !important; border-radius: 14px !important; padding: 1.2rem 1.3rem !important; }
.division-reports a, .division-reports .report-link, .division-view .report-link { background: rgba(25, 118, 210, 0.06); border: 1px solid var(--accent-hover-soft-22); color: #CEEEF3; border-radius: 999px; padding: 0.4rem 0.9rem; }.summary-stack > .card, .summary-stack > .summary-item, .dashboard-lower > .card { border: 1px solid var(--n4-accent-soft); background: var(--bg-card); border-radius: 14px; }

.division-view a[href*="reports"] { background: rgba(25, 118, 210, 0.05); border: 1px solid var(--accent-hover-soft-22); color: #CEEEF3; border-radius: 999px; }

.coo-kpi-grid .coo-kpi-btn, .coo-kpi-btn--3, .coo-kpi-btn--2 { background: var(--bg-card) !important; border: 1px solid var(--n4-accent-soft) !important; }
.coo-kpi-btn .kpi-label { color: #D6D8DE; }
.automations-view button, .settings-view button { border: 1px solid var(--n4-accent-soft); border-radius: 999px; color: #D6D8DE; background: var(--bg-card); }
.automations-view button:hover { background: rgba(25, 118, 210, 0.08); border-color: rgba(25, 118, 210, 0.4); }
.footer-settings-btn {
    order: 0;
    margin: 0 auto;
    position: relative;
    width: 28px;
    height: 28px;
}

.summary-item, .summary-stack .summary-item, .dashboard-lower .summary-item { border: 0; background: transparent; padding: 0.7rem 0; border-bottom: 1px solid var(--overlay-w-05); border-radius: 0; }
.summary-stack .card .summary-item:last-child, .summary-stack .card .summary-item:last-of-type { border-bottom: 0; }

.summary-stack { background: transparent; border: 0; padding: 0; gap: 1rem; display: flex; flex-direction: column; }
.summary-stack > .card, .summary-stack > .card.panel { border: 1px solid var(--accent-hover-soft-28) !important; background: var(--bg-card) !important; border-radius: 14px !important; padding: 0.9rem 1.1rem !important; }
.summary-stack .panel-title { color: #D6D8DE; margin: 0 0 0.6rem 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; border: 0; }
.sidebar-footer, .main .card, .main .panel, .main .kpi-card, .main .report-card, .main .data-table, .main .division-reports, .main .ai-insight-card, .main .division-kpi-grid .kpi-card, .main .settings-view .card, .main .automations-view .card, .main .chat-panel, .main .reports-division .report-card, .main .reports-view .report-card { border: 1px solid var(--accent-hover-soft-28) !important; background: var(--bg-card) !important; border-radius: 14px !important; }
.main .section-label, .division-view .section-label, .ai-insight-card .section-label, .division-reports .section-label { color: var(--fg-faint-cool); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

.division-lower { display: grid; margin-top: var(--space-3); }
.division-view .ai-insight-card, .division-view .division-reports { border: 1px solid var(--accent-hover-soft-28); background: var(--bg-card); border-radius: 14px; padding: 1.2rem 1.4rem; }

.division-view .report-link, .division-reports .report-link { background: rgba(25, 118, 210, 0.05); border: 1px solid var(--accent-hover-soft-28); color: #CEEEF3; border-radius: 999px; padding: 0.45rem 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0.35rem 0 0; }
.division-view .report-link:hover { background: rgba(25, 118, 210, 0.13); border-color: rgba(25, 118, 210, 0.5); }

#division-report-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }

.dashboard-lower > .card, .dashboard-lower .chat-panel { border: 1px solid var(--accent-hover-soft-28) !important; background: var(--bg-card) !important; }

.kpi-grid > *, .kpi-card, .division-kpi-grid > * { border: 1px solid var(--accent-hover-soft-28) !important; background: var(--bg-card) !important; border-radius: 14px !important; }

.sidebar { overflow: hidden; }

.sidebar::before, .sidebar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; z-index: 0; animation: sidebar-bubble 26s ease-in-out infinite alternate; filter: blur(30px); }
.sidebar::before { background: radial-gradient(320px 240px at 20% 20%, rgba(78, 85, 108, 0.32), transparent 72%), radial-gradient(280px 220px at 85% 70%, rgba(55, 83, 101, 0.25), transparent 72%) !important; }
.sidebar::after { background: radial-gradient(300px 220px at 70% 30%, rgba(52, 67, 96, 0.32), transparent 72%), radial-gradient(260px 200px at 25% 82%, rgba(62, 69, 84, 0.28), transparent 72%) !important; animation-delay: -9s; animation-duration: 32s; }
@keyframes sidebar-bubble {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-10px, 6px, 0) scale(1.04); }
  100% { transform: translate3d(8px, -4px, 0) scale(1.02); }
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar, .sidebar *, .sidebar a, .sidebar button, .sidebar span, .sidebar .nav-item, .sidebar .history-item, .sidebar .history-item * { color: var(--fg-primary-warm) !important; }
.sidebar-header { display: flex; align-items: center; gap: 0.7rem; }
.sidebar [class*="new-chat"], .sidebar button:first-of-type { background: rgba(55, 83, 101, 0.45); border: 1px solid rgba(234, 235, 236, 0.12); color: var(--fg-primary-warm); border-radius: 10px; backdrop-filter: blur(6px); }
.sidebar [class*="new-chat"]:hover { background: rgba(55, 83, 101, 0.65); border-color: rgba(25, 118, 210, 0.4); }

.sidebar .nav-item { background: transparent; color: var(--fg-primary-warm); border-radius: 10px; margin-bottom: 0.25rem; }
.sidebar .nav-item:hover { background: var(--overlay-w-08, rgba(55, 83, 101, 0.35)) !important; }
.sidebar .nav-item.active { background: var(--accent-hover-soft-28, rgba(25, 118, 210, 0.14)) !important; border: 1px solid var(--accent-hover-soft-45, rgba(25, 118, 210, 0.28)) !important; color: var(--accent-primary-deep, var(--fg-primary-warm)) !important; }

.sidebar [class*="recent-chats"], .sidebar [class*="recent-chat-wrapper"] { background: rgba(55, 83, 101, 0.55); border: 1px solid rgba(234, 235, 236, 0.08); border-radius: 14px; padding: 0.75rem 0.7rem; margin: 0.5rem 0.7rem; backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.sidebar .history-item, .sidebar [class*="recent-chats"] a, .sidebar [class*="recent-chats"] li { background: transparent !important; border: none !important; color: var(--fg-primary-warm) !important; border-radius: 8px !important; }
.sidebar .history-item:hover { background: var(--overlay-w-04) !important; border: none !important; }
.sidebar .history-item time, .sidebar .history-item small { color: rgba(234, 235, 236, 0.65); }

.sidebar-footer, .sidebar .sidebar-footer { border-top: 1px solid var(--accent-hover-soft-28) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--fg-primary-warm) !important; }

.dashboard-lower .chat-panel, .dashboard-lower > .card.chat-panel { background: radial-gradient(ellipse 500px 320px at 10% 10%, rgba(37, 54, 87, 0.45), rgba(37, 54, 87, 0) 72%), linear-gradient(180deg, #2A3857 0%, #363946 100%) !important; color: var(--fg-primary-warm) !important; }

.sidebar .sync-dot--ok,
.sidebar .nav-item .pill.live::before { background: var(--accent-primary-hover); }

.sidebar { position: relative; }

.sidebar-collapse-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(234, 235, 236, 0.06);
  border: 1px solid rgba(234, 235, 236, 0.14);
  border-radius: 8px;
  color: var(--fg-primary-warm);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  z-index: 20;
}
.sidebar-collapse-btn:hover { background: var(--accent-hover-soft-18); border-color: var(--accent-hover-alpha-55); color: var(--accent-primary-hover); }
.sidebar-collapse-btn:active { transform: scale(0.94); }
.sidebar-collapse-btn svg { display: block; }

body.sidebar-collapsed .sidebar .sidebar-footer, body.sidebar-collapsed .sidebar .pill { display: none; }

.rich-composer { position: relative; border-radius: 14px; background: var(--bg-card); border: 1px solid rgba(234, 235, 236, 0.08); box-shadow: 0 1px 0 var(--overlay-w-04) inset, 0 8px 24px rgba(0, 0, 0, 0.28); color: var(--fg-primary-warm); }
.rich-composer:focus-within { border-color: rgba(25, 118, 210, 0.85); box-shadow: 0 1px 0 var(--overlay-w-08) inset, 0 0 0 3px var(--accent-hover-soft-18), 0 10px 28px var(--shadow-alpha-45); }
.rc-textarea { width: 100%; max-height: 240px; resize: none; border: 0; outline: 0; background: transparent; color: var(--fg-primary-warm); font: inherit; line-height: 1.45; }
.rc-left, .rc-right { display: flex; align-items: center; gap: 0.4rem; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-notif-btn, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-link,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-btn, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-link {
    width: 44px;
    min-width: 44px;
    margin: 0 auto;
}
.rc-icon-btn:hover { border-color: var(--accent-hover-alpha-55); color: var(--accent-primary-hover); }
.rc-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; font-size: 0.78rem; font-weight: 500; color: var(--fg-primary-warm); background: rgba(234, 235, 236, 0.05); border: 1px solid rgba(234, 235, 236, 0.14); border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
/* v41.58j: legacy mobile-only model chip. Hidden - v41.96 replaces it with .rc-chip--model on all viewports. */
.rc-chip.rc-chip--model-mobile { display: none; }
/* v41.96: unified model pill, visible on every viewport. Shows model icon,
   short label, and a chevron to signal it's a picker. Click opens a popover
   (desktop) or bottom sheet (mobile). */
.rc-chip.rc-chip--model { display: inline-flex; }
.rc-chip.rc-chip--model .rc-chip-caret { opacity: 0.65; margin-left: 0.05rem; flex: 0 0 auto; }
.rc-chip.rc-chip--model .rc-chip-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chip.rc-chip--model:hover .rc-chip-caret { opacity: 1; }
/* v41.96: hide the legacy <select> we keep for state-sync only. */
.rc-model-select.rc-model-select--hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.rc-chip:hover { background: var(--accent-hover-soft-14); border-color: var(--accent-hover-alpha-55); color: var(--accent-primary-hover); }
.rc-chip svg { opacity: 0.85; }

/* v41.96: desktop upward popover for the model picker. Match existing
   .rc-plus-* / .rc-model-sheet vibe (raised surface, 1px border, 12px radius,
   shadow). Position is set inline by JS. */
#rc-model-popover .rc-model-pop-backdrop { position: fixed; inset: 0; z-index: 9998; background: transparent; }
/* Base glass — ask-chrome.css wins with chip-matched hairline + vibrancy. */
#rc-model-popover .rc-model-pop { position: fixed; z-index: 9999; min-width: 240px; max-width: 320px; max-height: 60vh; overflow-y: auto; background: var(--chrome-glass, rgba(255, 255, 255, 0.06)); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--chrome-glass-border, var(--border, #3A3A3A)); border-radius: 12px; padding: 0.4rem 0.35rem; box-shadow: 0 12px 40px var(--shadow-alpha-45, rgba(0,0,0,0.38)), inset 0 1px 0 var(--overlay-w-08, rgba(255,255,255,0.08)); }
#rc-model-popover .rc-model-pop-group { padding: 0.5rem 0.7rem 0.25rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--chrome-glass-muted, rgba(255,255,255,0.5)); font-weight: 600; }
#rc-model-popover .rc-model-pop-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.5rem 0.7rem; background: transparent; border: 0; color: var(--chrome-glass-ink, rgba(255,255,255,0.92)); font-size: 0.85rem; font-weight: 500; text-align: left; border-radius: 8px; cursor: pointer; }
#rc-model-popover .rc-model-pop-item:hover { background: var(--chrome-glass-hover, rgba(255,255,255,0.06)); color: var(--fg-primary, #ffffff); }
#rc-model-popover .rc-model-pop-item--selected { background: var(--chrome-glass-selected, rgba(255,255,255,0.10)); }
#rc-model-popover .rc-model-pop-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: rgba(255,255,255,0.85); flex: 0 0 18px; }
#rc-model-popover .rc-model-pop-name { flex: 1 1 auto; }
#rc-model-popover .rc-model-pop-check { flex: 0 0 auto; }

/* v41.96: mobile 390px - drop the ".5" so "Sonnet 4.5" -> "Sonnet" if needed. */
@media (max-width: 390px) {
  .rc-chip.rc-chip--model .rc-chip-label { max-width: 70px; }
}

.rc-model { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.55rem 0.28rem 0.6rem; background: rgba(234, 235, 236, 0.05); border: 1px solid rgba(234, 235, 236, 0.14); border-radius: 999px; color: var(--fg-primary-warm); }
.rc-model svg { opacity: 0.85; }
.rc-model-select { background: transparent; color: var(--fg-primary-warm); border: 0; outline: 0; font-size: 0.78rem; font-weight: 500; padding: 0 0.15rem; cursor: pointer; max-width: 160px; }
.rc-model-select option { background: var(--bg-card); color: var(--fg-primary-warm); }

.rc-mic--on { background: var(--accent-hover-soft-28); border-color: var(--accent-primary-hover); color: var(--accent-primary-hover); animation: rc-mic-pulse 1.4s ease-in-out infinite; }
@keyframes rc-mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.45); }
  50%     { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0); }
}

.rc-send { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--accent-primary-hover) 0%, #1565C0 100%); color: #0E1B25; cursor: pointer; box-shadow: 0 4px 12px var(--accent-hover-soft-35); transition: transform .1s ease, filter .15s ease, box-shadow .15s ease; }
.rc-send:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(25, 118, 210, 0.5); }
.rc-send:active { transform: scale(0.94); }
.rc-send svg { display: block; stroke: #0E1B25; }

.rc-attachments { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rc-attachments:empty { display: none; }
.rc-file-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; font-size: 0.74rem; color: var(--fg-primary-warm); background: var(--accent-hover-soft-14); border: 1px solid var(--accent-hover-soft-45); border-radius: 999px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.route-ask .topbar h2, body.route-ask .topbar p, body.route-ask .topbar .topbar-left, body.route-ask .topbar > h2, body.route-ask .topbar > p { display: none; }
body.route-ask .topbar { background: transparent; border-bottom: 0; box-shadow: none; justify-content: flex-end; padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.route-ask .topbar .topbar-right,
body.route-ask .topbar .pill { display: inline-flex; }

body.route-ask-new .topbar { display: none; }
body.route-ask-new .main { padding-top: 0; }
body.sidebar-collapsed .sidebar .sidebar-footer, body.sidebar-collapsed .sidebar .pill, body.sidebar-collapsed .sidebar .nav-item > .pill, body.sidebar-collapsed .sidebar h4, body.sidebar-collapsed .sidebar h5, body.sidebar-collapsed .sidebar p {
  display: none;
  visibility: hidden !important;
}body.sidebar-collapsed .sidebar .sidebar-header {

  justify-content: center !important;
}body.sidebar-collapsed .sidebar .sidebar-history, body.sidebar-collapsed .sidebar [id*="chat-history"], body.sidebar-collapsed .sidebar .sidebar-footer { display: none; }

.sidebar .sidebar-section { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.9rem; }

.sidebar .sidebar-history { margin-top: 0.9rem; }.sidebar #sidebar-history-list .history-item { position: relative; display: block; padding: 8px 12px !important; border-radius: 8px !important; background: transparent; border: none; color: var(--fg-primary-warm) !important; text-decoration: none; transition: background .15s ease; }
.sidebar #sidebar-history-list .history-title { font-size: 0.86rem; font-weight: 500; color: var(--fg-primary-warm); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar #sidebar-history-list .history-meta { font-size: 0.72rem; color: rgba(234, 235, 236, 0.55); margin-top: 0.2rem; }
.sidebar #sidebar-history-list .empty-state { font-size: 0.82rem; color: rgba(234, 235, 236, 0.5); padding: 0.5rem 0.35rem; margin: 0; }

.history-hover-card {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 320px;
  max-width: 60vw;
  padding: 0.7rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--accent-hover-soft-45);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-alpha-55);
  color: var(--fg-primary-warm);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
  z-index: 100;
}
.sidebar #sidebar-history-list .history-item:hover .history-hover-card { opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s, 0s, 0s; }
.hhc-title { font-family: 'Cabinet Grotesk', 'Satoshi', ui-sans-serif, system-ui, sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--fg-primary-warm); margin-bottom: 0.4rem; line-height: 1.3; }
.hhc-body { font-size: 0.8rem; color: rgba(234, 235, 236, 0.82); line-height: 1.5; max-height: 170px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }

body.cockpit-hidden .sidebar .sidebar-section:not(.sidebar-history) { display: none; }

body.cockpit-hidden .sidebar { width: 280px; min-width: 280px; }
body.cockpit-hidden .main { margin-left: 280px !important; }

body.cockpit-hidden .sidebar .sidebar-history { margin-top: 1.1rem; }

body.cockpit-hidden .sidebar #sidebar-history-list { max-height: calc(100vh - 240px); overflow-y: auto; padding-right: 0.2rem; }
body.cockpit-hidden .sidebar #sidebar-history-list::-webkit-scrollbar { width: 6px; }
body.cockpit-hidden .sidebar #sidebar-history-list::-webkit-scrollbar-thumb { background: rgba(234,235,236,0.12); border-radius: 999px; }

.history-hover-card { z-index: 9999 !important; }

.history-hover-card--portal {
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  max-width: 60vw;
  padding: 0.75rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--accent-hover-alpha-55);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
  color: var(--fg-primary-warm);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  pointer-events: none;
  z-index: 10000;
}
.history-hover-card--portal.is-open { opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s, 0s, 0s; }

.sidebar #sidebar-history-list .history-hover-card:not(.history-hover-card--portal) { display: none; }

.sidebar .sidebar-label--toggle { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; }
.sidebar .sidebar-section.is-collapsed .section-body { display: none; }
.sidebar .section-body { display: flex; flex-direction: column; gap: 0.15rem; }

body.cockpit-hidden .sidebar [data-section="workspace"], body.cockpit-hidden .sidebar [data-section="divisions"] { display: none; }
body.cockpit-hidden.cockpit-revealed .sidebar [data-section="workspace"], body.cockpit-hidden.cockpit-revealed .sidebar [data-section="divisions"] { display: block; }

body.route-ask .main-content { padding: 0; }

.ai-view { display: flex; flex-direction: column; min-height: calc(100vh - 64px); max-width: 780px; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; position: relative; }

.ai-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  min-height: 40vh;
}
.ai-messages { display: flex; flex-direction: column; gap: 1.75rem; padding: 0 0 1rem; width: 100%; }

body.ai-has-messages .ai-hero { display: none; }body.ai-has-messages .ai-view { justify-content: flex-start; }

body.route-ask .ai-composer-wrap { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg-card) 0%, var(--bg-card) 70%, transparent 100%); padding: 1rem 0 0.5rem; margin-top: auto; }
@keyframes aiDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

body.sidebar-collapsed .sidebar { max-width: 62px; overflow: hidden; }
body.sidebar-collapsed .sidebar .sidebar-label--toggle, body.sidebar-collapsed .sidebar [data-section="divisions"], body.sidebar-collapsed .sidebar [data-section="history"], body.sidebar-collapsed .sidebar .sidebar-collapse-btn { display: none; }

body.sidebar-collapsed .sidebar .sidebar-header { justify-content: center; position: relative; }
body.sidebar-collapsed .sidebar .brand { justify-content: center; gap: 0; padding: 0; }

body.sidebar-collapsed .sidebar .section-body { align-items: center; }
body.sidebar-collapsed .sidebar [data-section="workspace"] .section-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem 0; }
body.sidebar-collapsed .sidebar .nav-item {
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  border-radius: 10px;
}body.sidebar-collapsed .sidebar .nav-item.active { background: var(--accent-hover-soft-14); }
body.sidebar-collapsed .sidebar-section { border: none; background: transparent; padding: 0; margin: 0; }
body.sidebar-collapsed .sidebar-scroll { padding: 0; }
body.sidebar-collapsed .sidebar-footer { padding: 0.5rem 0 !important; justify-content: center; }

.page-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 1.25rem; align-items: stretch; }
.page-hero > .hero-card { min-height: 100%; }
.page-hero > .summary-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.page-hero > .summary-stack > .card { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 1rem 1.1rem; }
.page-hero > .summary-stack > .card .panel-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint-slate); margin: 0 0 0.6rem; }
.page-hero > .summary-stack > .card .summary-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--overlay-w-05); font-size: 0.88rem; }
.page-hero > .summary-stack > .card .summary-item:last-child { border-bottom: none; }
.page-hero > .summary-stack > .card .summary-item span { color: var(--fg-faint-slate); }
.page-hero > .summary-stack > .card .summary-item strong { color: var(--fg-primary-warm); font-weight: 500; text-align: right; }

@media (max-width: 1100px) {
  .page-hero { grid-template-columns: 1fr; }
}

body.sidebar-collapsed.cockpit-revealed .sidebar { width: 260px; min-width: 260px; max-width: 260px; }
body.sidebar-collapsed.cockpit-revealed .sidebar .sidebar-label--toggle { display: flex; }

body.sidebar-collapsed.cockpit-revealed .sidebar [data-section="divisions"], body.sidebar-collapsed.cockpit-revealed .sidebar [data-section="history"] { display: block; }body.sidebar-collapsed.cockpit-revealed .sidebar .nav-item { width: auto; height: auto; padding: 0.55rem 0.75rem; justify-content: flex-start; margin: 0; border-radius: 8px; }

body.sidebar-collapsed.cockpit-hidden .sidebar { width: 62px; min-width: 62px; max-width: 62px; }
body.sidebar-collapsed.cockpit-hidden .main { margin-left: 62px !important; }
body.sidebar-collapsed.cockpit-hidden .sidebar [data-section="workspace"] { display: block; }
body.sidebar-collapsed.cockpit-hidden .sidebar [data-section="workspace"] .section-body { display: flex; }
body.sidebar-collapsed.cockpit-hidden .sidebar [data-section="divisions"], body.sidebar-collapsed.cockpit-hidden .sidebar [data-section="history"] { display: none; }

body:not(.sidebar-collapsed).route-ask.cockpit-hidden .sidebar { width: 260px; min-width: 260px; }
body:not(.sidebar-collapsed).route-ask.cockpit-hidden .main { margin-left: 260px !important; }

body.cockpit-revealed .sidebar { width: 260px; min-width: 260px; }
body.cockpit-revealed .main { margin-left: 260px !important; }

body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar { width: 260px; min-width: 260px; max-width: 260px; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar [data-section="divisions"], body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar [data-section="history"] { display: block; }body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .nav-item {
  width: auto;
  height: auto;
  padding: 0.55rem 0.75rem;
  justify-content: flex-start;
  margin: 0;
  border-radius: 8px;
}body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .sidebar-header { padding: 1rem 1rem 0.5rem; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .brand {
  justify-content: flex-start;
  gap: 0.6rem;
}body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .sidebar-label--toggle {
  display: flex;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  font-size: 0.68rem;
}body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar [data-section="history"] .sidebar-label--toggle, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar [data-section="workspace"] .sidebar-label--toggle, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar [data-section="divisions"] .sidebar-label--toggle { justify-content: space-between; width: 100%; }

body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar span, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .sidebar-label--toggle > span, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .history-item, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .history-item *, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .sidebar-footer, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar p { display: revert; visibility: visible; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .nav-item { display: flex; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .sidebar-label--toggle > span { color: #B8BFC9; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: inline-block; visibility: visible; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .history-item { display: flex; flex-direction: column; visibility: visible; }
body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .sidebar .history-item > * { display: block; visibility: visible; }

body.cockpit-hidden .main, body.sidebar-collapsed.cockpit-hidden .main, body:not(.sidebar-collapsed).route-ask.cockpit-hidden .main, body.cockpit-revealed .main, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .main { margin-left: 0; }
.sidebar .sidebar-section .section-body { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }

.sidebar .sidebar-section .section-body > .nav-item, .sidebar .sidebar-section .section-body > a.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  margin: 0;
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--overlay-w-08) !important;
  border-radius: 10px !important;
  color: var(--fg-primary-warm) !important;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease !important;
  position: relative;
}
.sidebar .sidebar-section .section-body .history-item, .sidebar .sidebar-section .section-body #sidebar-history-list > .history-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  margin: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--fg-primary-warm) !important;
  text-decoration: none;
  transition: background 140ms ease !important;
  position: relative;
}

.sidebar .sidebar-section .section-body > .nav-item:hover, .sidebar .sidebar-section .section-body > a.nav-item:hover { background: var(--overlay-w-08) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.sidebar .sidebar-section .section-body .history-item:hover { background: var(--overlay-w-04) !important; border: none !important; }
.sidebar .sidebar-section .section-body > .nav-item.active { background: rgba(25, 118, 210, 0.12); border-color: var(--accent-hover-soft-35); }

.sidebar #sidebar-history-list { width: 100%; display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar .sidebar-section .section-body .history-item { flex-direction: column !important; align-items: flex-start !important; gap: 0.15rem !important; }
.sidebar .sidebar-section .section-body .history-item .history-title { font-size: 0.82rem; font-weight: 500; color: var(--fg-primary-warm); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.sidebar .sidebar-section .section-body .history-item .history-meta { font-size: 0.7rem; color: rgba(234, 235, 236, 0.5); font-weight: 400; }

.sidebar .sidebar-section.is-collapsed > .section-body { display: none; }

.sidebar .sidebar-section .sidebar-label--toggle { display: flex; align-items: center; justify-content: space-between; color: rgba(234, 235, 236, 0.55); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.sidebar .sidebar-section .sidebar-label--toggle:hover { color: rgba(234, 235, 236, 0.85); }

body:not(.cockpit-hidden) .sidebar .sidebar-section .section-body > .nav-item { justify-content: flex-start; }
body.cockpit-revealed .sidebar,

.sidebar .sidebar-scroll { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.sidebar .sidebar-section { width: 100%; }

.sidebar .sidebar-section .section-body .empty-state { padding: 0.55rem 0.75rem; font-size: 0.8rem; color: rgba(234, 235, 236, 0.5); background: var(--overlay-w-02); border: 1px dashed var(--overlay-w-08); border-radius: 10px; margin: 0; }

.sidebar .sidebar-history, .sidebar-history, .sidebar .sidebar-section { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.sidebar .sidebar-section, .sidebar .sidebar-history { margin-top: 0; padding: 0; }
.sidebar .sidebar-section + .sidebar-section { margin-top: 0.2rem; }

.sidebar .sidebar-section.is-collapsed + .sidebar-section { margin-top: 0.15rem; }

.sidebar .sidebar-section .sidebar-label--toggle { border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--overlay-w-07); padding: 0.5rem 0.75rem; margin: 0; width: 100%; box-sizing: border-box; transition: background 140ms ease, border-color 140ms ease; }
.sidebar .sidebar-section .sidebar-label--toggle:hover { background: var(--border-soft) !important; border-color: var(--overlay-w-12); }

.sidebar .sidebar-scroll { padding: 0.25rem 0 0.75rem !important; gap: 0.25rem !important; }

.sidebar .sidebar-section .section-body { padding: 0.25rem 0 0.35rem !important; gap: 0.22rem !important; }

.rc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 0; padding-top: 0; margin-top: 0.15rem; background: transparent; }

.rich-composer { padding: 0.6rem 0.7rem 0.55rem 0.7rem; gap: 0.3rem; }
.rc-textarea { min-height: 34px; padding: 0.15rem 0.15rem; font-size: 0.95rem; }

body.route-ask:not(.ai-has-messages) .ai-view { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: calc(100vh - 80px); padding: 1rem 1.5rem 2rem; gap: 0.75rem; max-width: 780px; margin: 0 auto; }
body.route-ask:not(.ai-has-messages) .ai-hero { flex: 0 0 auto; min-height: 0; padding: 0 0 1rem; }

html body.route-ask:not(.ai-has-messages) .ai-composer-wrap { position: static; background: transparent; padding: 0; margin-top: 0; }

.floating-chat-toggle, button.floating-chat-toggle {
  background: rgba(31, 33, 33, 0.82) !important;
  border: 1px solid var(--border-overlay-10) !important;
  color: var(--fg-primary-warm) !important;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  box-shadow:
    0 1px 0 var(--overlay-w-05) inset,
    0 6px 18px var(--shadow-alpha-35) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease !important;
}
html body .floating-chat-toggle:hover, html body .floating-chat-toggle::before { background: #1976D2; box-shadow: 0 0 8px rgba(25, 118, 210, 0.55); }
.floating-chat-toggle .fc-icon { color: var(--fg-primary-warm); font-weight: 500; }

body.route-ask:not(.ai-has-messages) .ai-view.ai-home { min-height: calc(100vh - 80px); justify-content: flex-start; padding-top: 3.5rem; max-width: 980px; gap: 1rem; }
body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero { padding: 1.5rem 0 0.75rem; }

body.route-ask.ai-has-messages .ai-view { min-height: calc(100vh - 64px); max-width: 780px; padding: 1rem 1.5rem 0; gap: 0; }
body.route-ask.ai-has-messages .ai-messages { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 160px); overflow-y: auto; overflow-x: hidden; padding-right: 0.25rem; padding-bottom: 1.25rem; scroll-behavior: smooth; }
body.route-ask.ai-has-messages .ai-messages::-webkit-scrollbar { width: 8px; }
body.route-ask.ai-has-messages .ai-messages::-webkit-scrollbar-thumb { background: var(--overlay-w-08); border-radius: 4px; }
html body.route-ask.ai-has-messages .ai-composer-wrap { position: sticky; bottom: 0; background: linear-gradient(to top, var(--ntl-main) 0%, var(--ntl-main) 65%, rgba(25,26,26,0.85) 85%, transparent 100%); padding: 0.75rem 0 1rem; margin-top: 0; z-index: 3; }

body.ai-has-messages .home-launcher { display: none; }

.home-launcher { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 1.5rem; width: 100%; }
.home-tabs-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.4rem; width: 100%; }
.home-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.35rem;
  background: var(--overlay-w-03);
  border: 1px solid var(--overlay-w-07);
  border-radius: 10px;
  color: #C8CFD9;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-tab:hover { background: rgba(25, 118, 210, 0.08); border-color: var(--accent-hover-soft-35); color: var(--fg-primary-warm); }
.home-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary-hover); opacity: 0.7; flex: 0 0 auto; }
.home-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.home-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 0.75rem; width: 100%; }
.home-dash-card { background: var(--bg-card); border: 1px solid var(--overlay-w-07); border-radius: 12px; padding: 0.9rem 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 130px; transition: border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease; }
.home-dash-card:hover { border-color: rgba(25, 118, 210, 0.3); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.home-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.home-dash-eyebrow { font-size: 0.68rem; color: var(--fg-faint-slate); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.home-dash-title { font-size: 0.88rem; font-weight: 600; color: var(--fg-primary-warm); }
.home-dash-kpi { display: flex; align-items: baseline; gap: 0.4rem; }
.home-dash-value { font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--fg-primary-warm); letter-spacing: -0.01em; }
.home-dash-unit { font-size: 0.72rem; color: var(--fg-faint-slate); }

body.route-chats .main-content { padding: 1.25rem 1.5rem 2rem; }
.chats-view { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.chats-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chats-title { font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--fg-primary-warm); margin: 0; letter-spacing: -0.01em; }
.chats-new-btn { background: rgba(25, 118, 210, 0.12); border: 1px solid var(--accent-hover-soft-35); color: var(--fg-primary-warm); font-size: 0.82rem; font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.chats-new-btn:hover { background: rgba(25, 118, 210, 0.2); border-color: rgba(25, 118, 210, 0.6); }
.chats-search { width: 100%; background: var(--overlay-w-03); border: 1px solid var(--overlay-w-08); border-radius: 10px; padding: 0.65rem 0.9rem; color: var(--fg-primary-warm); font-size: 0.9rem; font-family: 'Satoshi', system-ui, sans-serif; }
.chats-search:focus { outline: none; border-color: var(--accent-hover-soft-45); background: var(--overlay-w-05); }
.chats-search::placeholder { color: #6B737E; }
.chats-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; }
.chats-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--overlay-w-02);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.chats-row:hover { background: rgba(25, 118, 210, 0.06); border-color: rgba(25, 118, 210, 0.3); transform: translateY(-1px); }
.chats-row-main { flex: 1 1 auto; min-width: 0; }
.chats-row-title { font-size: 0.95rem; font-weight: 600; color: var(--fg-primary-warm); margin-bottom: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats-row-preview { font-size: 0.82rem; color: var(--fg-faint-slate); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chats-row-meta { font-size: 0.74rem; color: #6B737E; white-space: nowrap; padding-top: 0.1rem; }
.chats-skeleton, .chats-empty { color: var(--fg-faint-slate); font-size: 0.88rem; padding: 2rem 1rem; text-align: center; background: var(--overlay-w-02); border: 1px dashed var(--overlay-w-08); border-radius: 10px; }
.chats-empty a { color: #7CC4D0; text-decoration: underline; }

.sidebar-history-viewall { display: block; text-align: center; padding: 0.4rem 0.5rem 0.25rem; margin-top: 0.25rem; font-size: 0.76rem; color: var(--fg-faint-slate); text-decoration: none; border-radius: 6px; transition: color 120ms ease, background 120ms ease; }
.sidebar-history-viewall:hover { color: var(--accent-primary-hover); background: rgba(25, 118, 210, 0.06); }

a.brand { text-decoration: none; color: inherit; cursor: pointer; }
/* v41.58h: misc block L1154-L1157 moved to mobile-v2.css */
/* v41.58h: misc block L1158-L1161 moved to mobile-v2.css */

.ai-hero-logo { display: block; margin: 0 auto 0.75rem; max-width: 320px; width: 55%; height: auto; filter: drop-shadow(0 0 28px rgba(30, 136, 229, 0.22)); drop-shadow(0 2px 6px var(--shadow-alpha-35)); brightness(1.15); saturate(1.1); }

html body .floating-chat.open .floating-chat-panel, html body .floating-chat-header .panel-title { font-size: 0.98rem; }
.floating-chat-composer { align-items: flex-end; background: transparent; border-top: 1px solid var(--border-soft); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
html body .floating-chat-composer .chat-textarea, html body .floating-chat-composer textarea#floating-chat-input {
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  min-height: 44px;
  resize: none;
  transition: border-color 140ms ease, background 140ms ease;
}
html body .floating-chat-composer .chat-textarea:focus, html body .floating-chat-composer textarea#floating-chat-input:focus { outline: none; border-color: rgba(25, 118, 210, 0.45); background: rgba(255, 255, 255, 0.055); }
html body .floating-chat-composer .composer-toolbar { padding: 0; background: transparent; border: none; }
html body .floating-chat-composer .composer-chip { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #C8CFD9; padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.74rem; display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1; }
html body .floating-chat-composer .composer-chip .cc-ico { opacity: 0.8; font-size: 0.78rem; }
html body .floating-chat-composer .composer-chip-plus:hover { background: rgba(255,255,255,0.07); }
html body .floating-chat-composer .composer-mic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
html body .floating-chat-composer .composer-send { font-weight: 700; transition: background 120ms ease, transform 120ms ease; }
.floating-chat-composer .composer-send:hover { transform: translateY(-1px); }

.reports-subheader .btn-ghost { font-size: 0.82rem; color: var(--fg-faint-slate); text-decoration: none; padding: 0.35rem 0.65rem; border-radius: 6px; transition: background 120ms ease, color 120ms ease; }
.reports-subheader .btn-ghost:hover { background: rgba(25, 118, 210, 0.08); color: var(--fg-primary-warm); }

.ai-hero .ai-hero-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.4rem 2.25rem 1.55rem;
  background: rgba(68, 73, 88, 0.55);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(68, 73, 88, 0.75);
  border-radius: 20px;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 var(--border-overlay-10);
  margin: 0 auto;
}

@media (max-width: 720px) {
  .ai-hero .ai-hero-card { padding: 1.1rem 1.4rem 1.25rem; border-radius: 16px; }
  .ai-hero .ai-hero-card .ai-hero-logo { max-width: 220px; }
}
.ai-hero .ai-hero-card::before { border-radius: inherit;  }

  12% { opacity: 0.95; }
  60% { opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}

.ai-hero .ai-hero-card .ai-hero-logo {
  position: relative;
  margin: 0 0 0.1rem;
  max-width: 300px !important;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.30))
    drop-shadow(0 0 24px var(--overlay-w-08)) !important;
  animation: glLogoRise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}
@keyframes glLogoRise {
  0%   { opacity: 0; transform: translateY(6px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
html body .rich-composer,
html body .rich-composer.glass-composer,
html body .ai-composer-wrap .rich-composer,
html body .ai-view .rich-composer { background: var(--gl-chat-bg); background-image: none; border: 1px solid var(--gl-chat-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .rich-composer:focus-within, html body .ai-view .rich-composer:focus-within { border-color: #3C3A38; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(122, 121, 120, 0.22); }
html body .rich-composer .chat-textarea,
html body .rich-composer textarea,
html body .rich-composer input[type="text"] { background: transparent; border: 0; color: var(--gl-chat-text); box-shadow: none; }
html body .rich-composer .chat-textarea::placeholder,
html body .rich-composer textarea::placeholder { color: var(--gl-chat-muted); }

html body .rich-composer .composer-send,
html body .ai-composer-wrap .composer-send,
html body .ai-view .composer-send,
html body .floating-chat-composer .composer-send { box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
html body .rich-composer .composer-send:hover,
html body .ai-composer-wrap .composer-send:hover,
html body .ai-view .composer-send:hover,
html body .rich-composer .composer-send svg,
html body .ai-composer-wrap .composer-send svg,
html body .floating-chat-composer .composer-send svg { color: var(--gl-chat-send-ink); stroke: var(--gl-chat-send-ink); fill: var(--gl-chat-send-ink); }

html body .floating-chat.open .floating-chat-panel,
html body .floating-chat-panel { backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--gl-chat-text); }
html body .floating-chat-composer .chat-textarea,
html body .floating-chat-composer textarea#floating-chat-input { background: rgba(255,255,255,0.03); border: 1px solid var(--gl-chat-border); color: var(--gl-chat-text); box-shadow: inset 0 1px 0 rgba(0,0,0,0.25); }
html body .floating-chat-composer .chat-textarea::placeholder,
html body .floating-chat-composer textarea#floating-chat-input::placeholder { color: var(--gl-chat-muted); }

html body .floating-chat-toggle { background: var(--gl-chat-send); color: var(--gl-chat-send-ink); border: 1px solid rgba(255,255,255,0.08); }
html body .floating-chat-toggle:hover { background: #8C8B8A; }

html body .ai-messages .msg-bubble,
html body .floating-chat-messages .msg-bubble { background: var(--gl-chat-bg); border: 1px solid var(--gl-chat-border); color: var(--gl-chat-text); border-radius: 12px; }
html body .rich-composer .composer-chip { background: rgba(255,255,255,0.04); border: 1px solid var(--gl-chat-border); color: var(--gl-chat-text); }
html body .rich-composer .composer-chip:hover { background: rgba(255,255,255,0.08); }

html body .rich-composer .rc-send,
html body .ai-view .rc-send { background: var(--gl-chat-send); background-image: none; box-shadow: 0 2px 8px rgba(0,0,0,0.4); color: var(--gl-chat-send-ink); }
html body .rich-composer .rc-send:hover,
html body .ai-view .rc-send:hover { background: #8C8B8A; box-shadow: 0 4px 12px rgba(0,0,0,0.5); filter: none; }
html body .rich-composer .rc-send svg,
html body .ai-view .rc-send svg { stroke: var(--gl-chat-send-ink); color: var(--gl-chat-send-ink); }

html body .rich-composer .rc-chip,
html body .ai-view .rc-chip { background: rgba(255,255,255,0.03); border: 1px solid var(--gl-chat-border); color: var(--gl-chat-text); }
html body .rich-composer .rc-chip:hover,
html body .ai-view .rc-chip:hover { background: rgba(255,255,255,0.06); }
html body .rich-composer .rc-icon-btn,
html body .ai-view .rc-icon-btn { color: var(--gl-chat-muted); }
html body .rich-composer .rc-icon-btn:hover,
html body .ai-view .rc-icon-btn:hover { color: var(--gl-chat-text); }
html body .rich-composer .rc-model,
html body .ai-view .rc-model,
html body .rich-composer .rc-model-select,
html body .ai-view .rc-model-select { background: rgba(255,255,255,0.03); color: var(--gl-chat-text); border-color: var(--gl-chat-border); }

html body .floating-chat-toggle svg { color: var(--gl-chat-send-ink); stroke: var(--gl-chat-send-ink); }

.ai-hero .ai-hero-card .ai-hero-stage, .ai-hero-stage { position: relative; display: block; width: 420px; max-width: 100%; min-height: 128px; margin: 0 auto; }
.ai-hero .ai-hero-card .ai-hero-logo--canvas, .ai-hero-logo--canvas {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  filter: drop-shadow(0 2px 10px var(--shadow-alpha-35)) !important;
  pointer-events: auto;
  cursor: crosshair;
  z-index: 2;
}

.plex-think {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--plex-size, 20px);
  height: var(--plex-size, 20px);
  min-width: var(--plex-size, 20px);
  min-height: var(--plex-size, 20px);
  flex: 0 0 auto;
  line-height: 0;
  color: var(--accent-primary-hover);
  filter: drop-shadow(0 0 6px var(--accent-hover-soft-45));
}
.plex-think-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.plex-think-petals { transform-origin: 12px 12px; transform-box: fill-box; animation: plexSpin 2.4s linear infinite; }
.plex-bar { fill: currentColor; transform-origin: 12px 12px; transform-box: view-box; animation: plexPulse 1.6s ease-in-out infinite; }

.plex-bar--0   { --plex-rot:   0deg; }
.plex-bar--60  { --plex-rot:  60deg; animation-delay: -0.53s; }
.plex-bar--120 { --plex-rot: 120deg; animation-delay: -1.06s; }

@keyframes plexSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes plexPulse {
  0%, 100% { opacity: 0.55; transform: rotate(var(--plex-rot, 0deg)) scale(0.82); }
  50%      { opacity: 1;    transform: rotate(var(--plex-rot, 0deg)) scale(1.0);  }
}

.msg-thinking-plex { display: inline-flex; align-items: center; gap: 0.5rem; color: #A3ABB5; font-size: 0.88rem; letter-spacing: 0.01em; }
.msg-thinking-plex .plex-think { --plex-size: 18px; }
.msg-thinking-text::after { content: ''; display: inline-block; animation: aiDots 1.4s steps(4, end) infinite; }



.sidebar .sidebar-header .brand.brand--logo-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.55rem 0.65rem;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
  position: relative;
}
.sidebar .sidebar-header .brand.brand--logo-only::before, .sidebar .sidebar-header .brand.brand--logo-only::after { content: none; }
.sidebar .sidebar-header .brand.brand--logo-only:hover { background: rgba(255,255,255,0.035); }
.sidebar .sidebar-header .brand.brand--logo-only:active { transform: scale(0.985); }
.sidebar .sidebar-header .brand.brand--logo-only:focus-visible { outline: 2px solid rgba(210,213,216,0.35); outline-offset: 2px; }

body.sidebar-collapsed .sidebar .sidebar-header .brand.brand--logo-only { padding: 0.45rem 0.3rem; }

.sidebar .sidebar-footer { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.75rem; background: transparent; }

.sidebar .sidebar-header, .sidebar-header { background: transparent; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: 0.75rem 0.75rem 0.85rem; margin: 0 0 0.5rem 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

.sidebar .sidebar-footer, .sidebar-footer { background: transparent; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; margin: 0.35rem 0 0 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.sidebar .sidebar-section .sidebar-label--toggle, .sidebar .sidebar-label--toggle {
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase !important;
  padding: 0.55rem 0.45rem 0.4rem;
  margin: 0.25rem 0 0.1rem;
  opacity: 0.95;
  transition: color 140ms ease, opacity 140ms ease !important;
}
.sidebar .sidebar-label--toggle:hover { background: var(--fg-faint-alpha); border: 0; border-radius: 12px; color: var(--accent-slate-deep); opacity: 1; }

html body .floating-chat .btn-close, html body .floating-chat-header .btn-close { appearance: none; -webkit-appearance: none; min-width: 28px; margin: 0; }
.floating-chat .btn-close:hover,

.card.panel .summary-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; }
.card.panel .summary-item > span:first-child { flex: 0 0 auto; color: rgba(234, 235, 236, 0.65); font-size: 0.85rem; }
.card.panel .summary-item > strong {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 500;
  color: var(--fg-primary-warm);

  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
}

#status-sources { white-space: normal; word-break: keep-all; overflow-wrap: normal; }

.home-dash-card.home-dash-card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; position: relative; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.home-dash-card.home-dash-card--link:hover { transform: translateY(-2px); border-color: var(--accent-hover-soft-45); background: rgba(25, 118, 210, 0.06); box-shadow: 0 8px 20px -14px rgba(25, 118, 210, 0.5); }
.home-dash-card .home-dash-head { display: flex; align-items: center; gap: 0.5rem; }
.home-dash-card .home-dash-cta {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.1);
  color: var(--accent-primary-hover);
  font-size: 12px;
  opacity: 0.75;
  transition: opacity 140ms ease, background 140ms ease;
}
.home-dash-card.home-dash-card--link:hover .home-dash-cta { opacity: 1; background: rgba(25, 118, 210, 0.2); }

.home-dash-card .home-dash-eyebrow, .home-dash-card .home-dash-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar, aside.sidebar { background-image: none; background-color: #2A334A; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025), 0 0 60px rgba(0, 0, 0, 0.30); }

.sidebar .sidebar-collapse-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--overlay-w-08) !important;
  color: rgba(210, 213, 216, 0.78) !important;
  z-index: 5 !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sidebar .sidebar-collapse-btn:hover { background: var(--accent-hover-soft-14); border-color: var(--accent-hover-soft-45); color: var(--fg-primary-warm); }
.sidebar .sidebar-collapse-btn svg { width: 14px; height: 14px; }

.sidebar .sidebar-header { padding-right: 44px !important; }

body.sidebar-collapsed .sidebar .sidebar-collapse-btn { right: 50% !important; transform: translateX(50%) !important; top: 8px !important; }
body.sidebar-collapsed .sidebar .sidebar-header { padding-right: 0.65rem !important; padding-top: 42px; }

.pill { background-color: rgba(31, 33, 33, 0.88); background-image: linear-gradient(180deg, rgba(25, 118, 210, 0.03), rgba(25, 118, 210, 0) 60%); border-color: var(--accent-hover-soft-22) !important; }
html body .composer-chips, html body .composer-actions, html body .composer-toolbar { background-image: none; background-color: transparent; border: none; box-shadow: none; }
.composer-chip-plus, .composer-mic { background-image: none; background-color: var(--overlay-w-04); }
.composer-send { background-color: #D6D5D4; }

html body .composer-chip { background-color: rgba(30, 42, 64, 0.72); border-color: rgba(25, 118, 210, 0.18); color: #D2D5D8; }
html body .composer-chip:hover { background-color: rgba(25, 118, 210, 0.12); border-color: rgba(25, 118, 210, 0.42); color: #EAEBEC; }
body.sidebar-collapsed .sidebar .brand, body.sidebar-collapsed .sidebar .brand--logo-only, body.sidebar-collapsed .sidebar-header img { display: none; }

body.sidebar-collapsed .sidebar .sidebar-label--toggle { display: none; }body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }

body.sidebar-collapsed .sidebar { padding-top: 0; }
body.sidebar-collapsed .sidebar .sidebar-header { min-height: 48px; padding: 0; border-bottom: 1px solid var(--overlay-w-04); }
body.sidebar-collapsed .sidebar-collapse-btn { top: 10px; left: 50%; right: auto; transform: translateX(-50%); }

body.sidebar-collapsed .sidebar .sidebar-collapse-btn, body.sidebar-collapsed.cockpit-hidden .sidebar .sidebar-collapse-btn, body.sidebar-collapsed.cockpit-revealed .sidebar .sidebar-collapse-btn {
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  right: auto;
  transform: translateX(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
  z-index: 50 !important;
  background: rgba(25, 118, 210, 0.15) !important;
  border: 1px solid var(--accent-hover-soft-35) !important;
  color: var(--accent-primary-hover) !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
body.sidebar-collapsed .sidebar .sidebar-collapse-btn:hover { background: var(--accent-hover-soft-28); border-color: var(--accent-hover-alpha-55); }

body.sidebar-collapsed .sidebar .sidebar-collapse-btn svg { display: block; transform: rotate(180deg); }

body.sidebar-collapsed .sidebar .sidebar-header { cursor: pointer; }

body.sidebar-collapsed .sidebar-footer, body.sidebar-collapsed .sidebar-footer img { display: none; }

.sidebar .nav-item { border: 1px solid transparent; background-color: transparent; box-shadow: none; }
.sidebar .nav-item:hover { background-color: var(--overlay-w-03) !important; border-color: var(--border-soft) !important; }
.sidebar .nav-item.active, .sidebar .nav-item[aria-current="page"], .sidebar .nav-item.is-active { background-color: var(--accent-hover-soft-10) !important; border-color: var(--accent-hover-soft-35) !important; color: var(--fg-primary-warm) !important; }

html body .rich-composer .rc-chip.rc-chip--active, html body .ai-view .rc-chip.rc-chip--active { background: rgba(33, 150, 243, 0.15); border-color: rgba(33, 150, 243, 0.35); color: #2196F3; box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.30); }
.rich-composer .rc-chip.rc-chip--active svg, .ai-view .rc-chip.rc-chip--active svg { opacity: 1; }

.tool-trace { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem 0; }
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--overlay-w-05);
  color: rgba(234,235,236,0.82);
  border: 1px solid var(--border-overlay-10);
}
.modal-box.modal-box--wide { width: min(760px, 92vw); max-height: 82vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.2rem; }
.modal-head h3 { margin: 0; }
.modal-close { background: transparent; border: 1px solid var(--border-overlay-10); color: rgba(234,235,236,0.82); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.modal-close:hover { background: var(--border-soft); }
.modal-sub { color: rgba(234,235,236,0.55); font-size: 12.5px; margin-bottom: 0.85rem; }

.preview-stats-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.8rem 0; }
.preview-stat { padding: 0.3rem 0.6rem; border-radius: 10px; background: var(--accent-hover-soft-10); border: 1px solid var(--accent-hover-soft-28); color: #CFEAEE; font-size: 12px; }
.preview-stat b { color: #5FE2F0; font-weight: 700; margin-right: 0.3rem; }

.action-preview-body { max-height: 52vh; overflow: auto; padding: 0.6rem 0.75rem; background: var(--overlay-w-02); border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 0.9rem; }

html, body { overflow-x: clip; }
.main-content,
.reports-view,
.settings-view,
.automations-view { max-width: 100%; overflow-x: hidden; }
pre, code { overflow-x: auto; max-width: 100%; }

/* v41.58f: 767px shell block (107 lines) deleted - mobile-v2.css owns entirely */

/* v41.58d: bumped 769 -> 821 so this block stops leaking into 769-820px mobile */
.sidebar { background: linear-gradient(180deg, var(--fg-secondary-alpha) 0%, rgba(226, 236, 248, 0.72) 100%) !important; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border-right: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.9), 0 20px 40px rgba(15, 23, 42, 0.08) !important; color: var(--accent-slate-deep) !important; }

.sidebar, .sidebar a, .sidebar button, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar svg { color: var(--accent-slate-deep) !important; fill: currentColor; }

.sidebar .sidebar-header, .sidebar .sidebar-footer { border-color: rgba(148, 163, 184, 0.22); }

.sidebar .sidebar-collapse-btn, .sidebar #sidebar-collapse-btn { color: var(--accent-slate-deep) !important; background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; }

.chat-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(226, 236, 248, 0.68) 100%) !important; backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); border-left: 1px solid rgba(255, 255, 255, 0.75); color: var(--accent-slate-deep) !important; }

.rich-composer, .ai-composer-wrap { transition: border-color 180ms ease, box-shadow 180ms ease; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .sidebar, html body .chat-panel, html body .rich-composer, html body .chat-composer, html body .ai-composer-wrap { background: rgba(245, 248, 253, 0.98); }
}

.ai-hero .ai-hero-card .ai-hero-logo, .ai-hero .ai-hero-card .ai-hero-logo--canvas { filter: drop-shadow(0 1px 2px rgba(13, 71, 161, 0.18)); drop-shadow(0 0 10px rgba(13, 71, 161, 0.06)) !important; }

html body .rich-composer .rc-toolbar button:not(.primary):not(.send), html body .rich-composer .rc-toolbar button:not(.primary):not(.send):hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(25, 118, 210, 0.4); }

.rich-composer {
  background: var(--bg-card) !important;
  border: 1px solid var(--surface-charcoal) !important;
  border-radius: 14px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 var(--overlay-w-03),
    0 8px 24px rgba(0, 0, 0, 0.32) !important;
  color: var(--border-card-light) !important;
  overflow: visible;
}

.rich-composer:focus-within,

html body .rich-composer textarea, html body .rich-composer input[type="text"], html body .ai-composer-wrap textarea, html body .ai-composer-wrap input[type="text"] { border-color: transparent; border-radius: 14px; }

html body .floating-chat-composer, html body .glass-composer { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
html body .floating-chat-composer:focus-within, html body .glass-composer:focus-within { border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.48); }
html body .glass-composer .chat-textarea, html body .floating-chat-composer .chat-textarea { border-color: transparent; }
html body .glass-composer .chat-textarea::placeholder, html body .floating-chat-composer .chat-textarea::placeholder { color: #9ca3af; }

.home-tab.is-active, .home-tab[aria-selected="true"], .pill.is-active { background: var(--gl-green-soft) !important; border-color: var(--gl-green-border) !important; color: var(--border-card-warm) !important; }

.home-tab.is-active, .home-tab[aria-selected="true"] { outline: 1px solid var(--gl-neutral-border) !important; outline-offset: -1px; }

html body .rich-composer:focus-within, html body .ai-composer-wrap:focus-within, html body .glass-composer:focus-within, html body .floating-chat-composer:focus-within { border-color: var(--gl-neutral-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.48); }

[class*="kpi"] [class*="accent"] { background: var(--gl-green); }

.btn-primary, button.primary { background: var(--gl-green) !important; border-color: var(--gl-green) !important; color: var(--fg-inverse) !important; }
.btn-primary:hover, button.primary:hover { background: var(--brand-blue-hover-pure) !important; border-color: var(--brand-blue-hover-pure) !important; }

.sidebar svg[stroke], .home-tab svg[stroke] { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }

.sidebar.is-collapsed, body.sidebar-collapsed .sidebar { width: 72px !important; min-width: 72px !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
html body .rc-send, html body button.rc-send { background: var(--gl-green); background-image: linear-gradient(180deg, #1E88E5 0%, #1976D2 100%); border-color: var(--gl-green); color: #fff; }
html body .rc-send:hover { background-image: linear-gradient(180deg, #1E88E5 0%, #1976D2 100%); }
body, .main, .main-content, .ai-view { background-color: var(--bg-app, var(--ask-bg, var(--surface-charcoal-deep))) !important; }

html body .rich-composer, html body .ai-composer-wrap, html body .floating-chat-composer, html body .glass-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121));
  background-image: none;
  background: var(--composer-bg, var(--bg-card, #1F2121));
  border: 1px solid var(--gl-chat-border, #444545);
  border-radius: 18px;
  color: var(--gl-chat-text, #C5C5C4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 10px 28px rgba(0, 0, 0, 0.35);
}
html body .rich-composer:focus-within, html body .glass-composer:focus-within, html body .floating-chat-composer:focus-within, html body .ai-composer-wrap:focus-within { border-color: #6a6b6b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.45); }

html body .rich-composer textarea, html body .rich-composer input[type="text"], html body .rich-composer .rc-textarea, html body .glass-composer textarea, html body .glass-composer .chat-textarea, html body .floating-chat-composer .chat-textarea, html body .ai-composer-wrap textarea, html body .ai-composer-wrap input[type="text"] { background: transparent; border: none; color: var(--gl-chat-text, #C5C5C4); caret-color: var(--gl-chat-text, #C5C5C4); }
html body .rich-composer textarea::placeholder, html body .rich-composer .rc-textarea::placeholder, html body .glass-composer .chat-textarea::placeholder, html body .floating-chat-composer .chat-textarea::placeholder, html body .ai-composer-wrap textarea::placeholder { color: var(--gl-chat-muted, #7a7a79); }

html body .rc-send, html body button.rc-send, html body .composer-send { background: #D6D5D4; background-image: none; border: none; border-radius: 999px; width: 36px; height: 36px; color: #1E1D1C; box-shadow: none; }
html body .rc-send svg, html body .composer-send svg, html body .rc-send * { color: #1E1D1C; stroke: #1E1D1C; fill: #1E1D1C; }

html body .rc-send:hover { background: #e5e4e3; }

.rc-send:disabled { background: #3a3b3b; opacity: 0.6; }

.rc-send:disabled svg, .rc-send:disabled * { color: #949494; stroke: #949494; fill: #949494; }

html body .rc-icon-btn, html body .rich-composer label[for*="attach"] { background: var(--chrome-fill, #2B2F2F); border: 1px solid var(--border, #3a3e3e); color: var(--chrome-ink, #D5D4D4); border-radius: 999px; }
.rc-icon-btn svg { display: block; color: var(--fg-secondary-warm); stroke: var(--fg-secondary-warm); }

.rc-icon-btn:hover { background: #333838 !important; }

html body .rc-chip, html body .rc-model, html body .rich-composer .rc-toolbar select { background: var(--chrome-fill, #2B2F2F); border: 1px solid var(--border, #3a3e3e); color: var(--chrome-ink, #D5D4D4); border-radius: 999px; }
html body .rc-chip:hover, html body .rc-model:hover { background: #333838; border-color: #4a4e4e; }

html body .rc-mic, html body .composer-mic, html body button[aria-label*="ictate"], html body button[aria-label*="mic" i] { background: transparent; border: 1px solid #3a3e3e; color: #949494; border-radius: 999px; }
.rc-mic svg, .composer-mic svg, button[aria-label*="ictate"] svg, button[aria-label*="mic" i] svg { color: #949494; stroke: #949494; }
.rc-mic:hover, .composer-mic:hover { background: #2B2F2F; color: var(--fg-muted-warm-light); }
.rc-mic:hover svg, .composer-mic:hover svg { color: var(--fg-muted-warm-light); stroke: var(--fg-muted-warm-light); }

html body .floating-chat-composer.glass-composer, html body div.floating-chat-composer.glass-composer, html body .glass-composer.floating-chat-composer { background-color: var(--composer-bg, var(--bg-card, #1F2121)); background-image: none; background: var(--composer-bg, var(--bg-card, #1F2121)); border: 1px solid var(--gl-chat-border, #444545); border-radius: 18px; color: var(--gl-chat-text, #C5C5C4); }

[class*="greeting"] { background-color: var(--bg-card); background-image: none; border: 1px solid #444545; }

aside.sidebar, aside.sidebar.is-collapsed, body.sidebar-collapsed aside.sidebar {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    var(--fg-secondary-alpha) 0%,
    rgba(226, 236, 248, 0.72) 100%
  ) !important;
  background: linear-gradient(
    180deg,
    var(--fg-secondary-alpha) 0%,
    rgba(226, 236, 248, 0.72) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.9),
    0 20px 40px rgba(15, 23, 42, 0.08) !important;
  color: var(--accent-slate-deep) !important;
}

[data-app-theme="light"] aside.sidebar, [data-app-theme="light"] aside.sidebar a, [data-app-theme="light"] aside.sidebar button, [data-app-theme="light"] aside.sidebar .nav-item, [data-app-theme="light"] aside.sidebar h1, [data-app-theme="light"] aside.sidebar h2, [data-app-theme="light"] aside.sidebar h3, [data-app-theme="light"] aside.sidebar h4, [data-app-theme="light"] aside.sidebar svg { color: #1e293b !important; fill: currentColor; }

aside.sidebar .sidebar-label--toggle { color: #64748b; background: transparent; }

[data-app-theme="light"] aside.sidebar .nav-item.active { background: rgba(25, 118, 210, 0.14) !important; border-color: rgba(25, 118, 210, 0.35) !important; color: #0D47A1 !important; }
aside.sidebar .nav-item:hover { background: var(--fg-muted-alpha) !important; }

[data-app-theme="light"] aside.sidebar button[class*="new-chat"] { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.12); color: #1e293b; }

aside.sidebar .sidebar-label--toggle, aside.sidebar button.sidebar-label--toggle { border-radius: 12px !important; overflow: hidden; }

aside.sidebar .sidebar-label--toggle:hover, aside.sidebar button.sidebar-label--toggle:hover { border-radius: 12px; }

[data-app-theme="light"] aside.sidebar .nav-item, [data-app-theme="light"] aside.sidebar .nav-item .nav-label, [data-app-theme="light"] aside.sidebar .history-item, [data-app-theme="light"] aside.sidebar .history-item * { color: #1e293b !important; }
[data-app-theme="light"] aside.sidebar .history-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 12px; color: #334155; font-size: 0.82rem; }
aside.sidebar .history-item::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.7;
}

aside.sidebar .sidebar-header, aside.sidebar .brand { display: flex; align-items: center; gap: 0.5rem; }
aside.sidebar .sidebar-header::before, aside.sidebar .brand::before {
  content: "";
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  background: var(--accent-slate-deep);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  opacity: 0.9;
}

[data-app-theme="light"] aside.sidebar .nav-item.active, [data-app-theme="light"] aside.sidebar .nav-item.active .nav-label { background: rgba(25, 118, 210, 0.14); color: #0D47A1; border-color: rgba(25, 118, 210, 0.38); border-radius: 12px; }

aside.sidebar .nav-item:hover, aside.sidebar .history-item:hover { background: var(--fg-muted-alpha); border-radius: 12px; }

[data-app-theme="light"] aside.sidebar .sidebar-section .section-body > .nav-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body > a.nav-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body #sidebar-history-list > .history-item { color: #1e293b !important; background: rgba(15, 23, 42, 0.03) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; }
aside.sidebar .sidebar-section .section-body > .nav-item:hover, aside.sidebar .sidebar-section .section-body > a.nav-item:hover, aside.sidebar .sidebar-section .section-body .history-item:hover { background: rgba(255, 255, 255, 0.6); border-color: var(--accent-hover-soft-35); border-radius: 12px; }
aside.sidebar .sidebar-section .section-body .history-item::before { background: #334155; }
aside.sidebar .sidebar-section .section-body .history-item > .history-title { flex: 1; min-width: 0; }

aside.sidebar button.brand::before {
  content: "";
  display: inline-block;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  background: var(--accent-slate-deep) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  order: -1;
}
aside.sidebar button.brand { display: flex; align-items: center; gap: 0.5rem; }

[data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item .history-title, [data-app-theme="light"] aside.sidebar .sidebar-section.sidebar-history .section-body .history-item .history-title, [data-app-theme="light"] aside.sidebar #sidebar-history-list .history-item .history-title { color: #1e293b; font-weight: 500; }
aside.sidebar .sidebar-section .section-body .history-item .history-meta,

aside.sidebar button.brand.brand--logo-only::before, aside.sidebar > button.brand::before, aside.sidebar button[class*="brand"]::before {
  content: "";
  display: block;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  background-color: var(--accent-slate-deep) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  margin-right: 0.4rem !important;
  order: -1 !important;
}

aside.sidebar.sidebar button.brand.brand--logo-only[type="button"]::before, aside.sidebar button.brand.brand--logo-only[onclick*="refreshToHome"]::before {
  content: "";
  display: block;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  background-color: var(--accent-slate-deep) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  position: absolute !important;
  left: -24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

aside.sidebar button.brand.brand--logo-only { position: relative; overflow: visible; }

/* Light-mode secondary text in sidebar */
[data-app-theme="light"] aside.sidebar .history-meta,
[data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item .history-meta,
[data-app-theme="light"] aside.sidebar #sidebar-history-list .history-item .history-meta { color: rgba(10, 10, 10, 0.55); font-weight: 400; }

[data-app-theme="light"] aside.sidebar .sidebar-label--toggle, [data-app-theme="light"] aside.sidebar .sidebar-label--toggle span { color: rgba(10, 10, 10, 0.5); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; }
aside.sidebar .sidebar-label--toggle { padding: 0.4rem 0.75rem; margin-top: 0.4rem; border: none; }

[data-app-theme="light"] aside.sidebar .nav-item svg { color: #1F2121; stroke: #1F2121; opacity: 0.85; }

[data-app-theme="light"] aside.sidebar .nav-item.active, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body > .nav-item.active { background: rgba(25, 118, 210, 0.18) !important; border-color: rgba(25, 118, 210, 0.5) !important; color: #1F2121 !important; }
[data-app-theme="light"] aside.sidebar .nav-item.active .nav-label, [data-app-theme="light"] aside.sidebar .nav-item.active svg { color: #1F2121; stroke: #1F2121; font-weight: 600; }

aside.sidebar .sidebar-section[data-section="history"] .section-body .history-item { flex-direction: row; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; }
[data-app-theme="light"] aside.sidebar .sidebar-section[data-section="history"] .section-body .history-item::before { background-color: #1F2121; opacity: 0.7; }
aside.sidebar .sidebar-section[data-section="history"] .section-body .history-item .history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 500; }
aside.sidebar .sidebar-section[data-section="history"] .section-body .history-item .history-meta { flex-shrink: 0; font-size: 0.68rem; margin-left: auto; }

body.sidebar-collapsed .sidebar [data-section="divisions"] { display: block; }
body.sidebar-collapsed .sidebar [data-section="divisions"] .sidebar-label--toggle { display: none; }
body.sidebar-collapsed .sidebar [data-section="divisions"] .section-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0;

  border-top: 1px solid rgba(10, 10, 10, 0.08);
  margin-top: 0.4rem;
  padding-top: 0.7rem;
}

aside.sidebar .sidebar-scroll { padding-bottom: 16px; }

aside.sidebar .sidebar-footer { padding: 0.6rem 0.7rem 0.9rem; background: transparent; border-top: 1px solid var(--border-soft); position: relative; }
aside.sidebar .sidebar-footer .footer-settings-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--fg-faint-alpha);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--bg-card);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
aside.sidebar .sidebar-footer .footer-settings-link:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(25, 118, 210, 0.4); transform: translateY(-1px); }
aside.sidebar button.brand::before, aside.sidebar button.brand.brand--logo-only::before, aside.sidebar button.brand.brand--logo-only[type="button"]::before, aside.sidebar button.brand.brand--logo-only[onclick*="refreshToHome"]::before, aside.sidebar.sidebar button.brand.brand--logo-only[type="button"]::before { content: none; display: none; }

aside.sidebar .sidebar-header::before {
  background-color: var(--bg-card);
  opacity: 0.85;
}.settings-view .btn-primary { background: var(--accent-primary-hover); color: var(--fg-inverse); border: none; padding: 0.6rem 1.1rem; border-radius: 9px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 140ms ease, transform 120ms ease; }


.settings-view .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.settings-view .toggle-switch input { opacity: 0; width: 0; height: 0; }

body.sidebar-collapsed aside.sidebar .sidebar-section[data-section="divisions"] .sidebar-label--toggle { display: none; }

[data-app-theme="light"] aside.sidebar .sidebar-section .section-body > .nav-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body > a.nav-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body #sidebar-history-list > .history-item, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body > .nav-item .nav-label, [data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item .history-title { color: #1F2121 !important; }
[data-app-theme="light"] aside.sidebar .sidebar-section .section-body .history-item .history-meta { color: rgba(10, 10, 10, 0.55) !important; }



aside.sidebar .sidebar-header { padding-top: 2.75rem !important; }

body.sidebar-collapsed aside.sidebar .sidebar-header { padding-top: 2.4rem; }


.automation-row { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--accent-hover-soft-28); background: var(--bg-card); border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 0.5rem; }








.floating-chat.open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.001); pointer-events: none; }
.floating-chat-panel {
  padding: 0;
}.floating-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: transparent;
  padding: 0.9rem 1rem;
}
.floating-chat-composer .composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.floating-chat-composer .composer-chips { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex: 1; min-width: 0; }
html body .floating-chat-composer .composer-chip, html body .floating-chat-composer .composer-chip-plus { display: inline-flex; align-items: center; gap: 0.3rem; height: 28px; border-radius: 999px; border: 1px solid rgba(234, 235, 236, 0.14); background: rgba(255, 255, 255, 0.02); color: #D5D4D4; white-space: nowrap; cursor: pointer; }
html body .floating-chat-composer .composer-chip-plus { width: 28px; padding: 0; justify-content: center; font-size: 16px; line-height: 1; }
.floating-chat-composer .composer-chip--context, .floating-chat-composer .composer-chip--context .cc-ico { color: var(--accent-primary-hover); border-color: var(--accent-hover-soft-35); }
html body .floating-chat-composer .composer-send { border-color: #D6D5D4; }
.floating-chat-backdrop { position: fixed; inset: 0; z-index: 1150; opacity: 0; pointer-events: none; }
.floating-chat-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.floating-chat.open .floating-chat-panel,
.floating-chat.open .floating-chat-toggle { z-index: 1200; position: relative; }

.quick-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.qa-btn {
  background: #1A1B1B !important;
  border: 1px solid var(--accent-hover-soft-28);
  border-radius: 12px;
  color: var(--fg-primary-warm);
  padding: 0.6rem 0.6rem;
  font-family: var(--font-display), 'Cabinet Grotesk', system-ui, sans-serif;
  font-size: 0.82rem !important;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease !important;
  text-align: center;
}
.qa-btn:hover { transform: translateY(-1px) !important; }

.floating-chat-composer .composer-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
html body .floating-chat-composer .composer-mic, html body .floating-chat-composer .composer-send {
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  box-sizing: border-box;
}

html body .floating-chat-composer .composer-mic { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(234, 235, 236, 0.18); color: #D5D4D4; }

html body .floating-chat-composer .composer-send { background: #D6D5D4; border: 1px solid #D6D5D4; color: #1E1D1C; }
.floating-chat-composer .composer-mic svg, .floating-chat-composer .composer-send svg { width: 12px; height: 12px; display: block; }

.automations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.automations-sub { color: rgba(234, 235, 236, 0.6); font-size: 0.92rem; font-family: var(--font-body); }
.btn-primary.btn-primary--sm { height: 34px; padding: 0 0.9rem; font-size: 0.85rem; border-radius: 10px; background: var(--accent-primary-hover); color: var(--bg-card); border: 1px solid #1565C0; font-weight: 600; cursor: pointer; }
html body .btn-primary.btn-primary--sm:hover { background: #1E88E5; }
.automations-cards { display: flex; flex-direction: column; gap: 0.7rem; }
.automation-card-skeleton { height: 82px; border-radius: 12px; background: linear-gradient(90deg, var(--overlay-w-03) 0%, var(--border-soft) 50%, var(--overlay-w-03) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border: 1px solid var(--accent-hover-soft-18); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.automation-card { background: var(--bg-card); border: 1px solid var(--accent-hover-soft-28); border-radius: 12px; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.automation-card-head { display: flex; align-items: center; gap: 0.7rem; }



.automation-card-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.automation-card-title { color: var(--fg-primary-warm); font-family: var(--font-display), system-ui, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-card-status { font-size: 0.78rem; color: rgba(234, 235, 236, 0.55); }
.automation-card-desc { color: rgba(234, 235, 236, 0.72); font-size: 0.85rem; line-height: 1.4; }
.automation-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--overlay-w-05); }
.automation-card-metric { color: rgba(234, 235, 236, 0.6); font-size: 0.82rem; }
.automation-card-metric strong { color: var(--fg-primary-warm); font-weight: 600; margin-right: 0.25rem; }
.btn-ghost.btn-ghost--sm { height: 28px; padding: 0 0.65rem; font-size: 0.8rem; border-radius: 8px; background: transparent; border: 1px solid rgba(234, 235, 236, 0.18); color: var(--fg-secondary-warm); cursor: pointer; }
.btn-ghost.btn-ghost--sm:hover { background: var(--overlay-w-05); border-color: rgba(234, 235, 236, 0.3); }

.toggle-switch.toggle-switch--inline { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-switch.toggle-switch--inline input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch.toggle-switch--inline .toggle-track { position: absolute; inset: 0; background: rgba(234, 235, 236, 0.18); border-radius: 999px; cursor: pointer; transition: background 160ms ease; }
.toggle-switch.toggle-switch--inline .toggle-track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg-inverse); transition: transform 160ms ease; }
.toggle-switch.toggle-switch--inline input:checked + .toggle-track { background: var(--accent-primary-hover); }
.toggle-switch.toggle-switch--inline input:checked + .toggle-track::before { transform: translateX(16px); }

/* v41.58e: 420px .quick-actions-grid 1fr rule removed - mobile-v2.css owns 2-col at <=820px */

html body .floating-chat-composer.glass-composer { gap: 0.5rem; display: flex; flex-direction: column; backdrop-filter: none; -webkit-backdrop-filter: none; background: #17181A; border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 0.7rem 0.85rem; }
html body .floating-chat-composer .chat-textarea { border-radius: 12px; color: var(--fg-primary-warm, #EAEBEC); font-size: 0.95rem; transition: border-color 220ms ease, box-shadow 220ms ease; }


.floating-chat-backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity 220ms ease; }
html body .floating-chat-panel { background: #17181A; border: 1px solid rgba(25, 118, 210, 0.24); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); overflow: hidden; }
.floating-chat-header { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(25, 118, 210, 0.06), transparent); }
.floating-chat-header .panel-title { color: var(--fg-primary-warm); font-family: var(--font-display), system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.floating-chat-header .btn-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--overlay-w-04);
  border: 1px solid rgba(234, 235, 236, 0.14);
  color: var(--fg-secondary-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.floating-chat-header .btn-close:hover { background: var(--border-overlay-10); border-color: rgba(234, 235, 236, 0.3); color: var(--fg-inverse); }

.floating-chat .floating-chat-panel { transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease; }
.floating-chat.open .floating-chat-panel { transform: translateY(0) scale(1); opacity: 1; }

/* v40.14b - Ask AI: right-side slide-in panel on desktop.
   Fixes over previous v40.14:
   - Kill the base translateY(16px)/scale(0.98) rule that made the panel float 16px down from top.
   - Override position:relative from .floating-chat.open .floating-chat-panel with position:fixed !important.
   - Solid background so page content can't peek through the right edge.
   - Panel is flush to viewport top (top:0) and right (right:0) with no gap. */
html body .qa-btn, html body .automation-card, html body .automation-row, html body .kpi-card, html body .kpi-grid > *, html body .btn-primary, html body .btn-ghost, html body .btn-ghost--sm, html body .btn-primary--sm, html body .composer-mic, html body .composer-send, html body .composer-chip, html body .composer-chip-plus, html body .nav-item, html body .floating-chat-toggle { transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }

html body .qa-btn:active, html body .btn-primary:active, html body .btn-ghost:active, html body .composer-send:active, html body .composer-mic:active, html body .btn-ghost--sm:active, html body .btn-primary--sm:active { transform: translateY(1px); transition-duration: 60ms; }

html body .floating-chat-composer .composer-send:hover { background: #1976D2; border-color: #1976D2; color: #FFF; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); }
.floating-chat-composer .composer-mic:hover { background: var(--accent-hover-soft-10); border-color: var(--accent-hover-soft-45); color: var(--fg-primary-warm); }

.automation-card:hover { border-color: rgba(25, 118, 210, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transform: translateY(-1px); }

.qa-btn:hover { background: var(--accent-hover-soft-10) !important; border-color: rgba(25, 118, 210, 0.5); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }

html body .floating-chat-toggle { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(25, 118, 210, 0.35) inset; }
html body .floating-chat.open .floating-chat-toggle { display: none; }

html body .floating-chat { z-index: 1000; }
html body .floating-chat.open { z-index: 1300; }

html body .floating-chat-composer .composer-actions .composer-mic, html body .floating-chat-composer .composer-actions .composer-send { width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
html body .floating-chat-composer .composer-actions .composer-mic { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: #949494; }

.floating-chat-composer .composer-actions .composer-mic:hover { background: var(--overlay-w-08); color: var(--fg-secondary-warm); }

html body .floating-chat-composer .composer-actions .composer-send { background: #D6D5D4; border: none; color: #1E1D1C; }

.floating-chat-composer .composer-actions .composer-send:hover { background: var(--accent-primary-hover); color: var(--fg-inverse); }
.composer-actions .composer-mic svg, .composer-actions .composer-send svg { width: 12px; height: 12px; }

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body > .nav-item, body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body > a.nav-item, body:not(.sidebar-collapsed) aside.sidebar.sidebar #sidebar-history-list .history-item, body:not(.sidebar-collapsed) aside.sidebar.sidebar [data-section] .nav-item {
  border: 0 solid transparent;
  border-top: 0 solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 0 solid transparent;
  border-width: 0;
  border-style: none;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

body:not(.sidebar-collapsed) aside.sidebar.sidebar #sidebar-history-list .history-item .history-title { font-size: 0.81rem; font-weight: 500; letter-spacing: 0.005em; color: var(--fg-faint-warm); }

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item svg { width: 16px; height: 16px; }
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body > .nav-item, body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body > a.nav-item { padding: 0.42rem 0.7rem; gap: 0.55rem; border-radius: 999px; min-height: 0; }

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item:hover { background: rgba(13, 71, 161, 0.06); background-color: rgba(13, 71, 161, 0.06); background-image: none; border: 0 solid transparent; color: var(--accent-primary-deep); }

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active { background: var(--accent-hover-soft-18); background-color: var(--accent-hover-soft-18); background-image: none; border: 0 solid transparent; color: var(--accent-primary-deep); }
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active svg { color: var(--accent-primary-deep); stroke: var(--accent-primary-deep); }

body.sidebar-collapsed aside.sidebar .nav-item { background: transparent; border: none; box-shadow: none; width: 40px; height: 40px; border-radius: 10px; }
body.sidebar-collapsed aside.sidebar .nav-item:hover { background: rgba(13, 71, 161, 0.10); border: none; }

body.sidebar-collapsed aside.sidebar .nav-item.active { background: rgba(13, 71, 161, 0.14); border: none; }

body.sidebar-collapsed aside.sidebar [data-section="divisions"] .section-body { border-top: none; padding-top: 0.25rem; margin-top: 0.25rem; }

body.sidebar-collapsed aside.sidebar [data-section="workspace"] .section-body, body.sidebar-collapsed aside.sidebar [data-section="divisions"] .section-body { gap: 0.15rem !important; }

body.sidebar-collapsed aside.sidebar [data-section="history"] { display: block; }body.sidebar-collapsed aside.sidebar [data-section="history"] .sidebar-label--toggle {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0.15rem auto;
  padding: 0;
  border-radius: 10px !important;
  background: transparent;
  border: none;
  color: var(--bg-card) !important;
  cursor: pointer;
  position: relative;
}body.sidebar-collapsed aside.sidebar [data-section="history"] .sidebar-label--toggle::before {
  content: "";
  display: block;
  width: 18px !important;
  height: 18px !important;
  background: currentColor !important;
  opacity: 0.8;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 2.1-5.77'/><polyline points='3 3 3 8 8 8'/><line x1='12' y1='7' x2='12' y2='12'/><line x1='12' y1='12' x2='15' y2='14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 2.1-5.77'/><polyline points='3 3 3 8 8 8'/><line x1='12' y1='7' x2='12' y2='12'/><line x1='12' y1='12' x2='15' y2='14'/></svg>");
}
body.sidebar-collapsed aside.sidebar [data-section="history"] .sidebar-label--toggle:hover { background: rgba(13, 71, 161, 0.10); }

body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.34rem 0.65rem; border-radius: 6px; background: transparent; border: none; min-height: 0; position: relative; }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item::before { display: none; }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item .history-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 400; color: var(--fg-muted-warm); line-height: 1.25; }

body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item .history-meta { display: none; }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item:hover { background: rgba(13, 71, 161, 0.07); }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active { background: rgba(13, 71, 161, 0.11) !important; color: var(--accent-primary-deep) !important; }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active .history-title { color: var(--accent-primary-deep); font-weight: 500; }

aside.sidebar [data-section="history"] .section-body .history-item[data-thinking="1"]::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-primary-hover); box-shadow: 0 0 0 0 var(--accent-hover-alpha-55); animation: gl-thinking-pulse 1.6s ease-out infinite; margin-left: 0.35rem; }
@keyframes gl-thinking-pulse {
  0% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0); }
}

body:not(.sidebar-collapsed) aside.sidebar .sidebar-history-viewall { font-size: 0.72rem; color: var(--fg-faint); padding: 0.3rem 0.65rem; display: inline-block; margin-top: 0.25rem; }
body:not(.sidebar-collapsed) aside.sidebar .sidebar-history-viewall:hover { color: var(--accent-primary-deep) !important; }

body:not(.sidebar-collapsed) aside.sidebar.sidebar [data-section="history"] { display: flex; flex-direction: column; min-height: 180px; flex: 1 1 200px; overflow: hidden; }
body:not(.sidebar-collapsed) aside.sidebar.sidebar [data-section="history"] .section-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(13, 71, 161, 0.3) transparent; }
body:not(.sidebar-collapsed) aside.sidebar.sidebar [data-section="history"] .section-body::-webkit-scrollbar { width: 5px; }
body:not(.sidebar-collapsed) aside.sidebar.sidebar [data-section="history"] .section-body::-webkit-scrollbar-thumb { background: rgba(13, 71, 161, 0.3); border-radius: 3px; }

.ai-thinking { align-items: center; gap: 0.75rem; color: var(--fg-muted-warm); font-size: 0.88rem; display: block; padding: 0.6rem 0 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--overlay-w-08); }
.ai-thinking .thinking-stream { display: flex; flex-direction: column; gap: 0.38rem; margin-top: 0.5rem; max-width: 100%; padding-left: 0.15rem; }
.ai-thinking .thinking-step { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.22rem 0; font-size: 0.84rem; line-height: 1.45; color: rgba(229, 229, 229, 0.78); opacity: 0; transform: translateY(4px); animation: gl-step-in 260ms ease forwards; }
@keyframes gl-step-in {
  to { opacity: 1; transform: translateY(0); }
}
.ai-thinking .thinking-step.is-active { color: var(--border-card-light); font-weight: 500; }
.ai-thinking .thinking-step.is-done { color: rgba(184, 184, 184, 0.78); }

.ai-thinking .ai-thinking-text { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: rgba(229, 229, 229, 0.78); letter-spacing: 0.01em; text-transform: none; padding-left: 0.25rem; }
.ai-thinking .plex-think { vertical-align: middle; }

.ai-thinking.is-collapsed { border-bottom: 1px solid var(--border-soft); padding: 0.4rem 0 0.5rem; margin-bottom: 0.65rem; opacity: 0.85; }

body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item, body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > a.nav-item, body.sidebar-collapsed aside.sidebar.sidebar [data-section="workspace"] .section-body > .nav-item {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 solid transparent;
  border-width: 0;
  border-radius: 10px;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  gap: 0;
}

body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item:hover { background: rgba(13, 71, 161, 0.10) !important; background-color: rgba(13, 71, 161, 0.10) !important; border: 0 solid transparent !important; color: var(--accent-primary-deep) !important; }
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active, body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > a.nav-item.active { background: var(--accent-hover-soft-18) !important; background-color: var(--accent-hover-soft-18) !important; border: 0 solid transparent !important; color: var(--accent-primary-deep) !important; }
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active svg { color: var(--accent-primary-hover) !important; stroke: var(--accent-primary-hover) !important; }

.gl-floating-pill {
  position: sticky;
  top: 0.85rem;
  z-index: 55;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.75rem auto 0.25rem auto;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 30px rgba(15, 23, 42, 0.08);
  width: fit-content;
  max-width: calc(100% - 2rem);
  /* agent3 demo-day fix: 10 pill items can overflow on 1024-1280 laptops.
  Allow horizontal scroll instead of wrap/clip. Items keep their pixel
  size; scrollbar is hidden so visual is identical at full width. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gl-floating-pill::-webkit-scrollbar { display: none; }
.gl-floating-pill .gfp-item,
.gl-floating-pill .gfp-sep,
.gl-floating-pill .gfp-item--newchat { flex-shrink: 0; }
.gl-floating-pill .gfp-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(15, 23, 42, 0.72);
  text-decoration: none;
  border: 0 solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease;
  font-family: inherit;
}
.gl-floating-pill .gfp-item:hover { background: rgba(13, 71, 161, 0.06); color: var(--accent-primary-deep); }
.gl-floating-pill .gfp-item.active { background: var(--accent-hover-soft-18); color: var(--accent-primary-deep); font-weight: 600; }
.gl-floating-pill .gfp-item--newchat { color: rgba(15, 23, 42, 0.82); font-weight: 600; }
.gl-floating-pill .gfp-item--newchat svg { opacity: 0.9; }
.gl-floating-pill .gfp-item--newchat:hover { background: var(--accent-hover-soft-14); color: var(--accent-primary-deep); }
.gl-floating-pill .gfp-sep { display: inline-block; width: 1px; height: 18px; margin: 0 0.25rem; background: rgba(15, 23, 42, 0.12); flex-shrink: 0; }

/* v41.58h: component:panel block L2555-L2586 moved to mobile-v2.css */
section.main { display: flex; flex-direction: column; min-height: 100vh; }

.gl-divisions-view { padding: 0.5rem 1.5rem 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }

.gl-division-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.5rem;
  padding: 1.25rem 1.15rem 1.1rem 1.15rem;
  border-radius: 18px;
  background: var(--fg-primary-alpha);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  cursor: pointer;
  min-height: 160px;
}
.gl-division-card:hover { transform: translateY(-2px); border-color: var(--accent-hover-soft-35); box-shadow: 0 4px 12px var(--border-card-light-alpha), 0 14px 32px rgba(13, 71, 161, 0.10); }
.gl-division-card .gdc-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(25, 118, 210, 0.12); color: var(--accent-primary-deep); }
.gl-division-card .gdc-title { font-size: 1.05rem; font-weight: 600; color: var(--accent-primary-deep); letter-spacing: -0.005em; }
.gl-division-card .gdc-cta { align-self: end; font-size: 0.82rem; font-weight: 500; color: var(--accent-primary-deep); opacity: 0.82; transition: opacity 140ms ease, transform 140ms ease; }

.gl-floating-pill.gl-floating-pill--topbar {
  position: static;
  top: auto;
  align-self: center !important;
  margin: 0 auto;
  z-index: auto;
  max-width: none;
  flex: 0 1 auto;

  background: var(--border-soft) !important;
  border: 1px solid var(--border-overlay-10) !important;
  box-shadow:
    inset 0 1px 0 var(--overlay-w-05),
    0 6px 22px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
          backdrop-filter: blur(14px) saturate(160%) !important;
  padding: 0.22rem;
}
.gl-floating-pill.gl-floating-pill--topbar .gfp-item { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.gl-floating-pill.gl-floating-pill--topbar .gfp-item:hover { background: rgba(25, 118, 210, 0.16); color: var(--accent-primary-light); }
.gl-floating-pill.gl-floating-pill--topbar .gfp-item.active { background: rgba(25, 118, 210, 0.26); color: #DFF6E6; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.38); }
.gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat { color: var(--fg-inverse-strong); font-weight: 600; }
.gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat:hover { background: var(--accent-hover-soft-22); color: #DFF6E6; }
.gl-floating-pill.gl-floating-pill--topbar .gfp-sep { background: rgba(255, 255, 255, 0.14); }

aside.sidebar .sidebar-quick-nav { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.35rem 0 0.5rem 0; margin: 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 0.55rem; }
aside.sidebar .sidebar-quick-item {
  display: flex;
  align-items: center !important;
  gap: 0.6rem;
  padding: 0.48rem 0.72rem;
  border-radius: 999px;
  background: transparent;
  border: 0 solid transparent;
  color: var(--fg-muted-warm) !important;
  font-size: 0.83rem !important;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.005em;
  transition: background-color 140ms ease, color 140ms ease !important;
  min-height: 34px !important;
  width: 100%;
}
aside.sidebar .sidebar-quick-item .sqi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg-faint);
}aside.sidebar .sidebar-quick-item .sqi-badge { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: rgba(13, 71, 161, 0.08); color: var(--accent-primary-deep); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; min-width: 18px; text-align: center; }
[data-app-theme="light"] aside.sidebar .sidebar-quick-item:hover { background: rgba(13, 71, 161, 0.06); color: #0D47A1; }
[data-app-theme="light"] aside.sidebar .sidebar-quick-item:hover .sqi-icon { color: #0D47A1; }
[data-app-theme="light"] aside.sidebar .sidebar-quick-item.active { background: rgba(25, 118, 210, 0.18); color: #0D47A1; font-weight: 600; }
[data-app-theme="light"] aside.sidebar .sidebar-quick-item.active .sqi-icon { color: #0D47A1; }

body.sidebar-collapsed aside.sidebar .sidebar-quick-item { height: 40px !important; border-radius: 10px !important; }
body.sidebar-collapsed aside.sidebar .sidebar-quick-item .sqi-label, body.sidebar-collapsed aside.sidebar .sidebar-quick-item .sqi-badge { display: none; }
body.sidebar-collapsed aside.sidebar .sidebar-quick-nav { align-items: center; border-bottom: 1px solid rgba(15, 23, 42, 0.07); margin-bottom: 0.4rem; padding-bottom: 0.4rem; }
.gl-cn-title { font-size: 1.6rem; font-weight: 600; color: var(--accent-primary-deep); margin: 0 0 0.35rem 0; letter-spacing: -0.01em; }
.gl-cn-sub { font-size: 0.92rem; color: rgba(15, 23, 42, 0.65); margin: 0 0 1rem 0; max-width: 62ch; }
.gl-cn-stats { display: inline-flex; gap: 1.25rem; font-size: 0.82rem; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; color: rgba(15, 23, 42, 0.6); }
.gl-cn-stats .gl-cn-stat strong { color: var(--accent-primary-deep); font-weight: 600; }
.gl-cn-section + .gl-cn-section { margin-top: 1.75rem; }
.gl-cn-cat { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(15, 23, 42, 0.5); margin: 0 0 0.75rem 0; padding-left: 0.2rem; }
.gl-cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.gl-cn-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.6rem 0.9rem; padding: 1.1rem 1.1rem 0.95rem 1.1rem; border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.gl-cn-card:hover { transform: translateY(-1px); border-color: rgba(25, 118, 210, 0.3); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(13, 71, 161, 0.08); }
/* v41.66: connected background uses Totaly blue tint, NOT green. */
.gl-cn-card.is-connected { border-color: var(--accent-hover-soft-45); background: linear-gradient(180deg, rgba(227, 242, 253, 0.92) 0%, rgba(255, 255, 255, 0.9) 100%); }
.gl-cn-card .gds-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(25, 118, 210, 0.12); color: var(--accent-primary-deep); grid-row: 1 / span 2; flex-shrink: 0; }
.gl-cn-card.is-connected .gds-icon { background: var(--accent-hover-soft-22); }
.gl-cn-card .gds-body { min-width: 0; }
.gl-cn-card .gds-title-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.gl-cn-card .gds-title { font-size: 0.98rem; font-weight: 600; color: var(--accent-primary-deep); letter-spacing: -0.003em; }
.gl-cn-card .gds-chip { font-size: 0.7rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--border-card-light-alpha); color: rgba(15, 23, 42, 0.58); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
.gl-cn-card .gds-chip--connected { background: var(--accent-hover-soft-18); color: var(--accent-primary-deep); }
.gl-cn-card .gds-desc { font-size: 0.82rem; line-height: 1.5; color: rgba(15, 23, 42, 0.62); margin: 0; }
.gl-cn-card .gds-cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.7rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--fg-inverse);
  background: var(--accent-primary-hover);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  font-family: inherit;
}
.gl-cn-card .gds-cta:hover { background: var(--accent-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 10px var(--accent-hover-soft-28); }
.gl-cn-card .gds-cta--disconnect { background: transparent; color: var(--accent-primary-deep); box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.25); }
.gl-cn-card .gds-cta--disconnect:hover { background: rgba(13, 71, 161, 0.06); color: var(--accent-primary-deep); box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.4); }

.gl-cn-card .gds-auth-notice {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  color: rgba(13, 71, 161, 0.82);
  font-size: 0.76rem;
  line-height: 1.4;
}
.gl-cn-card .gds-auth-notice[hidden] { display: none; }

.topbar.topbar--with-pill { display: flex; align-items: center; gap: 1.25rem; position: relative; justify-content: flex-start; }

.topbar.topbar--with-pill .topbar-right { flex: 0 1 auto; margin-left: auto; min-width: 0; overflow: hidden; padding-right: 16px; }

.topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(226, 236, 248, 0.76) 100%) !important;
  border: 1px solid var(--fg-muted-alpha) !important;
  box-shadow:
    inset 0 1px 0 var(--fg-muted-alpha),
    0 1px 2px var(--border-card-light-alpha),
    0 10px 28px rgba(15, 23, 42, 0.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
          backdrop-filter: blur(22px) saturate(1.5) !important;
  padding: 0.25rem;
  z-index: 4 !important;
}

.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item { color: rgba(15, 23, 42, 0.72); font-weight: 500; background: transparent; box-shadow: none; letter-spacing: 0.002em; }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:hover { background: rgba(13, 71, 161, 0.06); color: var(--accent-primary-deep); }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active { background: var(--accent-primary-hover); color: var(--fg-inverse); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.35), 0 2px 8px var(--accent-hover-soft-28); }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat { color: rgba(15, 23, 42, 0.82); font-weight: 600; }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat:hover { background: rgba(13, 71, 161, 0.08); color: var(--accent-primary-deep); }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-sep { background: rgba(15, 23, 42, 0.12); }

@media (max-width: 1180px) {
  .topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar { display: none; }

  .gl-cn-view .gl-cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.topbar .pill.pill--glass {
  background: var(--overlay-w-08) !important;
  border: 1px solid var(--overlay-w-12) !important;
  color: var(--fg-primary-alpha) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
          backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 var(--overlay-w-05),
    0 4px 14px rgba(0, 0, 0, 0.18) !important;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
  display: inline-flex;
  align-items: center !important;
  gap: 0.45rem;
}
.topbar .pill.live.pill--glass::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-primary-hover); box-shadow: 0 0 0 3px var(--accent-hover-soft-22); animation: gl-etl-pulse 1.8s ease-in-out infinite; display: inline-block; flex-shrink: 0; }
@keyframes gl-etl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(25, 118, 210, 0.12); }
}
.topbar .pill-clock.pill--glass .sync-dot, .topbar .pill-clock.pill--glass .sync-dot--ok, .topbar .pill-clock.pill--glass .sync-dot--warn { background: var(--accent-primary-hover); box-shadow: 0 0 0 3px var(--accent-hover-soft-22); }

.topbar .pill[data-tooltip] { position: relative; cursor: help; }
.topbar .pill[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  background: rgba(15, 23, 42, 0.96);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 50;
}
.topbar .pill[data-tooltip]:hover::after, .topbar .pill[data-tooltip]:focus-visible::after { opacity: 1; }

.gl-cn-view {
  max-width: 1120px;
  margin: 1.25rem auto 3rem auto;
  padding: 1.75rem 2rem 2.25rem 2rem;
  background: linear-gradient(180deg, var(--fg-secondary-alpha) 0%, rgba(255, 255, 255, 0.62) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 18px 42px rgba(15, 23, 42, 0.08);
}

body[data-route="/data-sources"] .main-content, body[data-route="/connectors"] .main-content { padding: 1rem 1.5rem 0 1.5rem; }

.gl-cn-stats .gl-cn-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; }

.gl-cn-card { background: var(--fg-inverse-strong) !important; border-color: var(--border-card-light-alpha) !important; }

aside.sidebar .sidebar-quick-item { justify-content: flex-start; text-align: left; }
aside.sidebar .sidebar-quick-item .sqi-label { color: inherit; font-size: inherit; font-weight: inherit; text-align: left; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

aside.sidebar .sidebar-quick-item[data-route="/ask"] .sqi-icon svg { stroke-width: 1.7; }

html body .floating-chat .floating-chat-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #DFF6E6;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.32);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
html body .floating-chat .floating-chat-toggle:hover { background: rgba(25, 118, 210, 0.18); border-color: rgba(25, 118, 210, 0.38); color: #F0FDF4; transform: translateY(-1px); filter: none; }
html body .floating-chat .floating-chat-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); display: inline-block; }
html body .floating-chat .floating-chat-toggle .fc-icon { font-size: 0.88rem; font-weight: 600; letter-spacing: 0; }

html body .glass-composer .chat-textarea, html body .floating-chat-composer .chat-textarea { border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0.75rem 0.9rem 0.4rem 0.9rem; }

html body .glass-composer .chat-textarea:focus, html body .floating-chat-composer .chat-textarea:focus { border: 0; outline: 0; box-shadow: none; }
.floating-chat-composer > * { border-color: transparent; }

textarea#floating-chat-input, textarea#floating-chat-input:focus, textarea#floating-chat-input:hover, .floating-chat-composer textarea#floating-chat-input, .floating-chat-composer textarea#floating-chat-input:focus, .floating-chat-composer textarea#floating-chat-input:hover, .floating-chat-composer.glass-composer textarea#floating-chat-input, .floating-chat-composer.glass-composer textarea#floating-chat-input:focus, .glass-composer textarea.chat-textarea, .glass-composer textarea.chat-textarea:focus {
  border: 0;
  border-width: 0;
  border-style: none;
  border-color: transparent;
  outline: 0;
  outline-width: 0;
  box-shadow: none;
  background: transparent;
}

.topbar #etl-pill::before, .topbar #etl-pill.pill--glass::before { animation: gl-etl-pulse 1.8s ease-in-out infinite !important; }
.topbar #sync-indicator .sync-dot, .topbar #sync-indicator .sync-dot--ok, .topbar #sync-indicator .sync-dot--warn { background: var(--accent-primary-hover); box-shadow: 0 0 0 3px var(--accent-hover-soft-22); }

.topbar .pill.pill--glass, .topbar #etl-pill.pill--glass, .topbar #sync-indicator.pill--glass { background: rgba(31, 33, 33, 0.92); background-image: none; border: 1px solid var(--surface-charcoal); color: var(--fg-muted-warm); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.topbar #sync-indicator.pill--glass .live-clock, .topbar .pill-clock.pill--glass .live-clock { color: var(--fg-muted-warm) !important; }

.topbar #etl-pill.pill--glass, .topbar #etl-pill.pill--glass * { color: var(--fg-muted-warm) !important; }
.topbar #backfill-pill.pill--glass { background: rgba(31, 33, 33, 0.92); background-image: none; border: 1px solid var(--surface-charcoal); color: var(--fg-muted-warm); }

html body .floating-chat .floating-chat-toggle, html body button.floating-chat-toggle, html body .floating-chat.open .floating-chat-toggle { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(226, 236, 248, 0.76) 100%); border: 1px solid rgba(255, 255, 255, 0.55); color: rgba(15, 23, 42, 0.88); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.18); }
html body .floating-chat .floating-chat-toggle:hover, html body button.floating-chat-toggle:hover { background: linear-gradient(180deg, rgba(240, 253, 244, 0.90) 0%, rgba(220, 246, 232, 0.82) 100%); border-color: rgba(25, 118, 210, 0.45); color: #0D47A1; transform: translateY(-1px); filter: none; }
html body .floating-chat .floating-chat-toggle::before, html body button.floating-chat-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); display: inline-block; }
html body .floating-chat .floating-chat-toggle .fc-icon, html body button.floating-chat-toggle .fc-icon { color: #0D47A1; font-weight: 700; }

.topbar.topbar--no-header .topbar-left { display: none; }
.topbar.topbar--with-pill.topbar--no-header { min-height: 44px !important; padding-top: 6px !important; padding-bottom: 6px !important; align-items: center !important; }

.topbar.topbar--with-pill.topbar--no-header .gl-floating-pill.gl-floating-pill--topbar { top: 50% !important; transform: translate(-50%, -50%) !important; }

.topbar .pill.pill--glass, .topbar #etl-pill.pill--glass, .topbar #sync-indicator.pill--glass { height: var(--pill-h); min-height: var(--pill-h); padding: 0 var(--pill-pad-x); font-family: var(--pill-font); font-size: var(--pill-font-size); letter-spacing: var(--pill-letter); line-height: 1; border-radius: var(--pill-radius); }

.topbar .gl-floating-pill.gl-floating-pill--topbar { padding: 4px; border-radius: var(--pill-radius); height: var(--pill-h); min-height: var(--pill-h); }

.topbar #sync-indicator.pill--glass .live-clock, .topbar .pill-clock.pill--glass .live-clock { font-family: var(--pill-font); font-size: var(--pill-font-size); letter-spacing: var(--pill-letter); font-weight: 600; }

.topbar #etl-pill.pill--glass { font-family: var(--pill-font); font-size: var(--pill-font-size); font-weight: 500; }

.topbar .gl-floating-pill--topbar .gfp-item.active { font-weight: 700; }

html body .sidebar-quick-nav { gap: 4px; }

.sidebar-footer { padding: 14px 14px 18px !important; }

.footer-org-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

.footer-org-pill[data-org-long="1"] .footer-org-name { font-size: 0.75rem; }
.footer-org-pill[data-org-long="2"] .footer-org-name { font-size: 0.70rem; }
.footer-org-tier {
  display: block;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(13, 71, 161, 0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar .gl-floating-pill--topbar .gfp-item, .topbar .gl-floating-pill--topbar .gfp-item--newchat, .topbar .gl-floating-pill--topbar .gfp-item--newchat span, .topbar #etl-pill.pill--glass, .topbar #etl-pill.pill--glass *, .topbar #sync-indicator.pill--glass, .topbar #sync-indicator.pill--glass .live-clock {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif !important;
  font-weight: 500;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

.topbar .gl-floating-pill--topbar .gfp-item.active, .topbar .gl-floating-pill--topbar .gfp-item.active span { font-weight: 600; }

.topbar .gl-floating-pill--topbar .gfp-item--newchat svg { width: 13px; height: 13px; stroke-width: 2; opacity: 0.85; }

.sidebar-footer .footer-settings-link.footer-org-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: rgba(15, 23, 42, 0.92);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 10px 8px;
  border-radius: 12px;
}
.sidebar-footer .footer-settings-link.footer-org-pill:hover { background: rgba(13, 71, 161, 0.06); border: 0; box-shadow: none; transform: none; }

.footer-org-avatar { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; width: 32px; height: 32px; }
.footer-org-avatar-img { width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 0; object-fit: contain; filter: none; }

.footer-org-tier-row { display: flex; align-items: center; margin-top: 3px; }
.footer-org-tier-badge {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  padding: 0 7px;
  border-radius: 6px;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: var(--fg-inverse) !important;
  background: #3B4EE3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 1.5px rgba(15, 23, 42, 0.18) !important;
  white-space: nowrap;
}

.footer-org-tier-badge[data-tier="max"] { background: linear-gradient(180deg, #FF8E5B 0%, #F06A2E 100%) !important; color: #1A0F06 !important; }
.footer-org-tier-badge[data-tier="enterprise"] { background: linear-gradient(180deg, #4A5FE8 0%, #3B4EE3 100%) !important; color: var(--fg-inverse) !important; }
.footer-org-tier-badge[data-tier="trial"],
.footer-org-tier-badge[data-tier="starter"] {
  background: linear-gradient(180deg, #5B8DEF 0%, #3D6FD8 100%) !important;
  color: var(--fg-inverse) !important;
}
#etl-pill[data-state="sample"] {
  opacity: 0.95;
}

.footer-org-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; gap: 0; line-height: 1.1; }
.footer-org-name { line-height: 1.15; }

aside.sidebar#sidebar .sidebar-header, aside.sidebar#sidebar .sidebar-header.brand, aside.sidebar#sidebar > .sidebar-header { display: none; }

.sidebar .sidebar-scroll, .sidebar .sidebar-scroll--simple { padding-top: 0 !important; }

.topbar .pill[data-tooltip]::after {

  top: calc(100% + 10px);
  bottom: auto;
  transform: translate(-50%, -4px) !important;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 252, 0.96) 100%) !important;
  color: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 var(--fg-primary-alpha) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
          backdrop-filter: blur(18px) saturate(1.4) !important;
  font-weight: 500;
}
.topbar .pill[data-tooltip]:hover::after, .topbar .pill[data-tooltip]:focus-visible::after { transform: translate(-50%, 0) !important; }

aside.sidebar#sidebar .sidebar-scroll, aside.sidebar#sidebar .sidebar-scroll--simple { padding-top: 0 !important; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 { display: flex; flex-direction: column; border: 0; border-bottom: 0; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item {

  width: 100%;
  border-radius: 10px !important;
  background: transparent;
  border: 0;
  color: var(--fg-muted-warm) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease !important;
}
[data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:hover { background: rgba(13, 71, 161, 0.07); color: #0D47A1; }
[data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active { background: rgba(25, 118, 210, 0.16); color: #0D47A1; font-weight: 600; }
[data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open { background: rgba(13, 71, 161, 0.05); color: #0D47A1; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-icon { width: 18px; height: 18px; color: var(--fg-faint); }
[data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:hover .sqi-icon, [data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon, [data-app-theme="light"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open .sqi-icon { color: #0D47A1; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929, aside.sidebar#sidebar .sidebar-quick-nav--v1929 + * { border-top: 0; border-bottom: 0; }
aside.sidebar#sidebar .sidebar-history--v1929 .sidebar-history-viewall { display: inline-block; font-size: 0.72rem; padding: 4px 2px; color: var(--fg-faint); }
[data-app-theme="light"] aside.sidebar#sidebar .sidebar-history--v1929 .sidebar-history-viewall:hover { color: #0D47A1; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 { align-items: center; border: 0; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item { height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-label, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-badge { display: none; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-history--v1929 { display: none; }

.main-content .settings-view--v1929 { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px 24px; color: rgba(15, 23, 42, 0.88); font-family: 'Satoshi', system-ui, -apple-system, sans-serif; }



.settings-view--v1929 .settings-block-head h2 { font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em; color: rgba(15, 23, 42, 0.94); margin: 0; }





.settings-view--v1929 .srl-title { font-size: 0.92rem; font-weight: 500; color: rgba(15, 23, 42, 0.94); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-view--v1929 .srl-value { font-size: 0.82rem; color: rgba(15, 23, 42, 0.58); line-height: 1.4; }
.settings-view--v1929 .settings-row-muted { font-size: 0.78rem; color: rgba(15, 23, 42, 0.45); flex-shrink: 0; }

.settings-view--v1929 .settings-outline-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: rgba(15, 23, 42, 0.88);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
}


.settings-view--v1929 .settings-inline-link { color: var(--accent-primary-deep); text-decoration: none; font-size: 0.82rem; font-weight: 500; }

.settings-view--v1929 .settings-sep { color: rgba(15, 23, 42, 0.30); margin: 0 6px; }



.settings-view--v1929 .settings-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--accent-primary-deep) 0%, var(--accent-primary-hover) 100%);
  color: var(--fg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.settings-view--v1929 .settings-identity-name { font-size: 1rem; font-weight: 600; color: rgba(15, 23, 42, 0.95); }
.settings-view--v1929 .settings-identity-handle { font-size: 0.82rem; color: rgba(15, 23, 42, 0.55); }

.settings-view--v1929 .sub-tier-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-inverse);
  vertical-align: middle;
  margin-left: 6px;
}
.settings-view--v1929 .settings-promo { background: linear-gradient(135deg, rgba(25, 118, 210, 0.12) 0%, rgba(25, 118, 210, 0.06) 100%); border: 1px solid var(--accent-hover-soft-28); border-radius: 14px; padding: 14px 16px; margin: 10px 0 0 0; }

.settings-view--v1929 .settings-promo-title { font-size: 0.9rem; font-weight: 600; color: var(--accent-primary-light); margin-bottom: 2px; }
.settings-view--v1929 .settings-promo-sub { font-size: 0.78rem; color: rgba(197, 197, 196, 0.78); }
.settings-view--v1929 .settings-promo-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent-primary-deep);
  border: 0;
  color: var(--fg-inverse);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}


.settings-view--v1929 .settings-danger { color: #c0392b; }

body[data-theme="dark"] .settings-view--v1929 { color: rgba(255, 255, 255, 0.88); }


body[data-theme="dark"] .settings-view--v1929 .settings-block-head h2 { color: rgba(255, 255, 255, 0.95); }











.gl-cn-view .gl-cn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* v41.58h: misc block L3106-L3108 moved to mobile-v2.css */

.gl-cn-view .gl-cn-card { padding: 14px 14px 12px 14px; min-height: 140px; }
html body .gl-cn-view .gl-cn-card .gds-title { font-size: 0.92rem !important; }
.gl-cn-view .gl-cn-card .gds-desc { font-size: 0.78rem; line-height: 1.4; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

aside.sidebar#sidebar .sidebar-footer, aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill { padding: 12px 10px; display: flex; align-items: center; gap: 12px; border-radius: 12px; }
aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill:hover { background: rgba(13, 71, 161, 0.05) !important; }

aside.sidebar#sidebar .footer-org-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px;
  background: var(--fg-inverse-strong) !important;
  border: 1.5px solid rgba(13, 71, 161, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px var(--border-card-light-alpha) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0;
  position: relative;
}

aside.sidebar#sidebar .footer-org-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; padding: 0; filter: none; border-radius: 999px; display: block; }

aside.sidebar#sidebar .footer-org-avatar-img.brand-img--totaly { width: 78%; height: 78%; object-fit: contain; }

aside.sidebar#sidebar .footer-org-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.15; }
aside.sidebar#sidebar .footer-org-name { font-family: 'Satoshi', system-ui, -apple-system, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; color: rgba(15, 23, 42, 0.94); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

aside.sidebar#sidebar .footer-org-pill[data-org-long="1"] .footer-org-name { font-size: 0.88rem; }
aside.sidebar#sidebar .footer-org-pill[data-org-long="2"] .footer-org-name { font-size: 0.82rem; }

aside.sidebar#sidebar .footer-org-tier-row { margin-top: 0; display: flex; align-items: center; }
aside.sidebar#sidebar .footer-org-tier-badge {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  padding: 0 7px;
  border-radius: 999px;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: var(--fg-inverse) !important;
  border: 0;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.18) !important;
}

aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"] { background: linear-gradient(180deg, var(--accent-primary-hover) 0%, var(--accent-primary-deep) 100%) !important; color: var(--fg-inverse) !important; }

aside.sidebar#sidebar .footer-org-tier-badge[data-tier="max"] { background: linear-gradient(180deg, var(--accent-primary-lighter) 0%, var(--accent-primary-light) 100%) !important; color: var(--fg-inverse) !important; box-shadow: 0 1px 2px var(--accent-primary-soft-28) !important; }

body.sidebar-collapsed aside.sidebar#sidebar .footer-org-text { display: none; }
body.sidebar-collapsed aside.sidebar#sidebar .footer-settings-link.footer-org-pill { justify-content: center; padding: 8px 0; }

.settings-inline-edit { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.settings-inline-edit input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: var(--fg-inverse);
  color: var(--accent-slate-darkest);
  font: 500 0.88rem/1 'Satoshi', system-ui, sans-serif;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.settings-inline-edit input:focus { border-color: var(--accent-primary-hover); box-shadow: 0 0 0 3px var(--accent-hover-soft-18); }

.settings-inline-edit .settings-inline-save { background: var(--accent-primary-hover); color: var(--fg-inverse); border-color: var(--accent-primary-hover); }

.settings-inline-edit .settings-inline-cancel { background: transparent; color: #475569; border-color: rgba(15, 23, 42, 0.16); }


.gl-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--fg-primary-cream);
  border: 1px solid var(--overlay-w-08);
  border-radius: 12px;
  padding: 10px 16px;
  font: 500 0.88rem/1.3 'Satoshi', system-ui, sans-serif;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 99999;
  max-width: min(92vw, 460px);
}
.gl-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.gl-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  opacity: 0;
  animation: glConfirmIn 180ms ease forwards;
}
@keyframes glConfirmIn { to { opacity: 1; } }
.gl-confirm, .gl-confirm--glass {
  background:
    linear-gradient(180deg, rgba(42, 44, 46, 0.96) 0%, rgba(30, 32, 34, 0.96) 100%);
  color: var(--fg-primary-cream);
  border-radius: 16px;
  padding: 22px 22px 20px;
  width: min(92vw, 460px);
  border: 1px solid var(--overlay-w-08);
  box-shadow:
    inset 0 1px 0 var(--overlay-w-05),
    0 32px 80px var(--shadow-alpha-55);
  font-family: 'Satoshi', system-ui, sans-serif;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.gl-confirm h3, .gl-confirm--glass h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 700; color: #F5F4F1; }
.gl-confirm p, .gl-confirm--glass p { margin: 0 0 16px; color: #B8B7B4; font-size: 0.92rem; line-height: 1.5; }
.gl-confirm .gl-textarea, .gl-confirm--glass .gl-textarea, .gl-confirm .gl-pw-input, .gl-confirm--glass .gl-pw-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(20, 22, 24, 0.9) !important;
  color: var(--fg-primary-cream) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px;
  padding: 12px 14px;
  font: 500 0.92rem/1.45 'Satoshi', system-ui, sans-serif;
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  caret-color: var(--accent-primary-lighter);
}
.gl-confirm .gl-textarea:focus, .gl-confirm--glass .gl-textarea:focus { border-color: rgba(100, 181, 246, 0.55); box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.16); }
.gl-confirm .gl-pw-error, .gl-confirm--glass .gl-pw-error { color: #F87171; font-size: 0.85rem; margin: 8px 0 0; }
.gl-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.gl-confirm-btn { height: 38px; padding: 0 18px; border-radius: 999px; font: 600 0.86rem/1 'Satoshi', system-ui, sans-serif; cursor: pointer; border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease, filter 120ms ease; }
.gl-confirm-btn--cancel { background: transparent; color: var(--fg-muted-warm-light); border-color: var(--border-strong-alpha); }
.gl-confirm-btn--cancel:hover { background: var(--overlay-w-05); border-color: rgba(255, 255, 255, 0.28); }
.gl-confirm-btn--primary { background: linear-gradient(180deg, var(--brand-blue-hover-pure) 0%, #1565C0 100%); color: var(--fg-inverse); box-shadow: 0 2px 10px rgba(30, 136, 229, 0.35); }
.gl-confirm-btn--primary:hover { filter: brightness(1.08); }
.gl-confirm-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }

.gl-confirm .gl-upload-btn, .gl-confirm--glass .gl-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--overlay-w-04);
  border: 1px dashed rgba(100, 181, 246, 0.45);
  color: #90CAF9;
  font: 600 0.82rem/1 'Satoshi', system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.gl-confirm .gl-upload-btn:hover, .gl-confirm--glass .gl-upload-btn:hover { background: rgba(100, 181, 246, 0.08); border-color: rgba(100, 181, 246, 0.65); color: #BBDEFB; }
.gl-confirm .gl-upload-list, .gl-confirm--glass .gl-upload-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.gl-upload-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--overlay-w-08); border-radius: 10px; font: 500 0.82rem/1.2 'Satoshi', system-ui, sans-serif; color: var(--fg-primary-cream); }
.gl-upload-chip-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-upload-chip-size { color: var(--fg-faint-warm); font-size: 0.76rem; flex: 0 0 auto; }
.gl-upload-chip-remove { background: transparent; border: 0; color: var(--fg-faint-warm); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; transition: color 120ms ease, background 120ms ease; }
.gl-upload-chip-remove:hover { color: #F87171; background: rgba(248, 113, 113, 0.08); }

.settings-avatar.settings-avatar--image { background-size: cover; background-position: center center; background-repeat: no-repeat; color: transparent; }


.settings-outline-btn--danger:hover, button.settings-outline-btn--danger:hover { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.55); }

body.is-auth-page aside.sidebar, body.is-auth-page .floating-chat, body.is-auth-page .sidebar-footer, body.is-auth-page .home-launcher, body.is-auth-page .gl-floating-pill, body.is-auth-page #gl-floating-pill, body.is-auth-page .topbar-right { display: none; }
body.is-auth-page #main-content { margin: 0; padding: 0; width: 100%; max-width: none; background: #0E0F10 !important; min-height: 100vh !important; position: relative; }

.auth-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--accent-hover-soft-10) 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 100%, rgba(13, 71, 161, 0.18) 0%, transparent 55%),
    #0E0F10;
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(25, 26, 26, 0.72);
  border: 1px solid var(--overlay-w-08);
  border-radius: 20px;
  padding: 32px 28px;
  color: var(--fg-primary-cream);
  box-shadow:
    0 30px 80px var(--shadow-alpha-50),
    inset 0 1px 0 var(--border-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}
.auth-logo { display: inline-flex; margin-bottom: 14px; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; color: #F5F4F1; letter-spacing: -0.01em; }
.auth-sub { font-size: 0.92rem; color: #9CA3A3; margin: 0 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 0.78rem; font-weight: 600; color: var(--fg-muted-warm-light); letter-spacing: 0.02em; }
.auth-field input { height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-overlay-10); background: rgba(15, 16, 17, 0.9); color: #F5F4F1; font: 500 0.92rem/1 'Satoshi', system-ui, sans-serif; outline: none; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.auth-field input::placeholder { color: #6B6F70; }
.auth-card--glass .auth-field input::placeholder {
  color: rgba(243, 242, 239, 0.38);
  font-weight: 400;
}
.auth-field input:focus { border-color: rgba(25, 118, 210, 0.65); background: rgba(15, 16, 17, 1); box-shadow: 0 0 0 3px var(--accent-hover-soft-22); }
.auth-row-between { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; margin: -4px 0 4px; }
.auth-check { display: inline-flex; align-items: center; gap: 6px; color: #9CA3A3; cursor: pointer; }
.auth-check input { accent-color: var(--accent-primary-hover); }
.auth-link, .auth-link-muted { color: var(--accent-primary-light); text-decoration: none; font-weight: 600; font-size: 0.84rem; }
.auth-link:hover { text-decoration: underline; }
.auth-link-muted { color: #9CA3A3; font-weight: 500; }
.auth-link-muted:hover { color: var(--fg-muted-warm-light); }
.auth-primary-btn {
  height: 44px;
  margin-top: 6px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, var(--accent-primary-hover) 0%, var(--accent-primary-hover) 100%);
  color: var(--fg-inverse);
  font: 700 0.95rem/1 'Satoshi', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 10px 24px var(--accent-hover-soft-28);
}
.auth-primary-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-primary-btn:active { transform: translateY(0); }
.auth-primary-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.auth-error, .auth-info { font-size: 0.84rem; padding: 10px 12px; border-radius: 8px; margin-top: 2px; line-height: 1.4; }
.auth-error { background: rgba(229, 72, 77, 0.12); color: #FCA5A5; border: 1px solid rgba(229, 72, 77, 0.35); }
.auth-info  { background: rgba(25, 118, 210, 0.12);  color: var(--accent-primary-light); border: 1px solid var(--accent-hover-soft-35); }
.auth-foot  { font-size: 0.86rem; color: #9CA3A3; margin: 20px 0 0; }
.auth-workspace-prompt {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 16px; box-sizing: border-box;
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.auth-workspace-prompt__card {
  width: min(360px, 100%);
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: var(--overlay-w-04, rgba(255,255,255,0.04));
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--fg-primary-cream, #F3F2EF);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}








.settings-view.settings-view--compact .settings-outline-btn:hover { background: var(--overlay-w-04); border-color: rgba(255, 255, 255, 0.24); }

.settings-view.settings-view--compact .settings-outline-btn--danger:hover { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.55); }








.settings-view.settings-view--compact .settings-inline-edit input {
  flex: 1 1 auto; min-width: 0;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #121314;
  color: #F5F4F1;
  caret-color: var(--accent-primary-hover);
  font: 500 0.88rem/1 'Satoshi', system-ui, sans-serif;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.settings-view.settings-view--compact .settings-inline-edit input::selection { background: var(--accent-hover-soft-35); color: var(--fg-inverse); }




.settings-view.settings-view--compact .settings-inline-cancel:hover { background: var(--overlay-w-04); border-color: rgba(255,255,255,0.24); }






.gl-confirm .gl-pw-input, .gl-confirm input[type="password"], .gl-confirm textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: #F8FAFB;
  color: var(--accent-slate-darkest);
  font: 500 0.9rem/1 'Satoshi', system-ui, sans-serif;
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gl-confirm .gl-textarea { height: auto; min-height: 100px; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.gl-confirm input[type="password"]:focus, .gl-confirm .gl-pw-input:focus, .gl-confirm textarea:focus { border-color: var(--accent-primary-hover); box-shadow: 0 0 0 3px var(--accent-hover-soft-18); }
.gl-confirm .gl-pw-error { color: #B91C1C; font-size: 0.82rem; margin-bottom: 10px; padding: 6px 10px; background: rgba(220, 38, 38, 0.08); border-radius: 6px; }

body.sidebar-collapsed aside.sidebar .sqi-icon, body.sidebar-collapsed aside.sidebar .sqi-icon svg, body.sidebar-collapsed aside.sidebar .sidebar-quick-item .sqi-icon { display: inline-flex; visibility: visible; width: 18px; height: 18px; }
body.sidebar-collapsed aside.sidebar .sidebar-quick-item { justify-content: center !important; padding: 10px 0 !important; width: 40px !important; margin: 2px auto !important; }

body.sidebar-collapsed aside.sidebar .sidebar-footer { display: flex; padding: 8px 10px 14px; justify-content: center; }
body.sidebar-collapsed aside.sidebar .sidebar-footer .footer-org-pill { padding: 4px; width: 44px; height: 44px; border-radius: 12px; justify-content: center; gap: 0; }
body.sidebar-collapsed aside.sidebar .sidebar-footer .footer-org-avatar, body.sidebar-collapsed aside.sidebar .sidebar-footer .footer-org-avatar img, body.sidebar-collapsed aside.sidebar .sidebar-footer .footer-org-avatar-img { display: inline-flex; visibility: visible; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
body.sidebar-collapsed aside.sidebar .sidebar-footer .footer-org-text { display: none; }

body.sidebar-collapsed aside.sidebar .sidebar-scroll { padding: 8px 6px; }

.auth-view.auth-view--glass { background: radial-gradient(1200px 700px at 50% -15%, var(--overlay-w-05) 0%, transparent 60%), radial-gradient(900px 500px at 10% 110%, var(--overlay-w-03) 0%, transparent 55%), #0C0D0E; }
.auth-card.auth-card--glass { background: var(--overlay-w-04) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; color: var(--fg-primary-cream) !important; box-shadow: 0 30px 80px var(--shadow-alpha-55), inset 0 1px 0 var(--overlay-w-08) !important; backdrop-filter: blur(22px) saturate(140%) !important; -webkit-backdrop-filter: blur(22px) saturate(140%) !important; }
.auth-card--glass .auth-field input:hover { border-color: var(--border-strong-alpha); background: rgba(255, 255, 255, 0.055); }
.auth-card--glass .auth-field input:focus { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.065); box-shadow: 0 0 0 3px var(--overlay-w-08); }

.auth-card--glass .auth-primary-btn { background: linear-gradient(180deg, var(--fg-inverse-strong) 0%, rgba(240,240,240,0.88) 100%) !important; color: #0C0D0E !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; font-weight: 700; }
.auth-card--glass .auth-primary-btn:hover { filter: none; background: linear-gradient(180deg, var(--fg-inverse) 0%, #F5F5F4 100%); box-shadow: 0 16px 34px var(--shadow-alpha-45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

.auth-card--glass .auth-link, .auth-card--glass .auth-link-muted { color: var(--fg-muted-warm-light) !important; }
.auth-card--glass .auth-link:hover { color: #F3F2EF; }
.auth-card--glass .auth-link-muted:hover { color: var(--fg-primary-cream); }
.auth-card--glass .auth-check input { accent-color: var(--fg-muted-warm-light); }

.auth-oauth-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.auth-oauth-btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--overlay-w-04);
  border: 1px solid var(--overlay-w-12);
  color: #F3F2EF;
  font: 600 0.92rem/1 'Satoshi', system-ui, sans-serif;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-oauth-btn:hover { background: var(--overlay-w-08); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.auth-oauth-btn:active { transform: translateY(0); }
.auth-oauth-btn svg { width: 18px; height: 18px; flex: none; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6B6F70; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--overlay-w-08); }

.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.pw-eye-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #8E9192;
  cursor: pointer;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}
.pw-eye-btn:hover { color: var(--fg-primary-cream); background: var(--border-soft); }
.pw-eye-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.26); outline-offset: 2px; }

.auth-card--glass .pw-wrap .pw-eye-btn { color: #9A9D9E; }
.auth-card--glass .pw-wrap .pw-eye-btn:hover { color: #F3F2EF; }

.gl-pw-input { width: 100%; }
.gl-pw-input + .pw-eye-btn { right: 8px; }

body.is-auth-page { min-height: 100vh; overflow-y: auto; }
.auth-view, .auth-view--glass { min-height: 100vh; padding: 18px 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.auth-card, .auth-card.auth-card--glass { max-width: 360px !important; padding: 22px 22px 20px !important; border-radius: 16px !important; }

.auth-card--glass .auth-logo { margin-bottom: 8px; }
.auth-card--glass .auth-logo svg { width: 34px; height: 34px; }

.auth-card--glass .auth-title { color: #F3F2EF; font-weight: 650; letter-spacing: -0.015em; font-size: 1.18rem; margin: 0 0 2px; }
.auth-card--glass .auth-sub { color: #9A9D9E; font-size: 0.82rem; margin: 0 0 14px; }

.auth-card--glass .auth-form { gap: 9px; }
.auth-card--glass .auth-field { gap: 4px; }
.auth-card--glass .auth-field > span { color: #B8BABA; font-weight: 550; letter-spacing: 0.015em; font-size: 0.72rem; }

.auth-card--glass .auth-field input { background: var(--overlay-w-04); border: 1px solid var(--border-overlay-10); color: #F3F2EF; caret-color: #B8BABA; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; height: 36px; padding: 0 12px; font-size: 0.85rem; border-radius: 8px; }
.auth-card--glass .pw-wrap > input { padding-right: 38px; }
.auth-card--glass .pw-eye-btn { width: 26px; height: 26px; }
.auth-card--glass .pw-eye-btn svg { width: 15px; height: 15px; }

.auth-card--glass .auth-primary-btn { height: 38px !important; font-size: 0.88rem; margin-top: 2px !important; border-radius: 9px !important; }

.auth-card--glass .auth-oauth-list { gap: 8px; margin: 2px 0 6px; }
.auth-card--glass .auth-oauth-btn { height: 38px; font-size: 0.85rem; border-radius: 9px; gap: 8px; }
.auth-card--glass .auth-oauth-btn svg { width: 15px; height: 15px; }

.auth-card--glass .auth-divider { margin: 6px 0 2px; font-size: 0.66rem; letter-spacing: 0.14em; }

.auth-card--glass .auth-row-between { font-size: 0.74rem; margin: -2px 0 2px; }
.auth-card--glass .auth-link,
.auth-card--glass .auth-link-muted { font-size: 0.76rem !important; }

.auth-card--glass .auth-foot { font-size: 0.78rem; margin: 12px 0 0; color: #8E9192; }
.auth-card--glass .auth-error, .auth-card--glass .auth-info { font-size: 0.76rem; padding: 7px 10px; }

@media (max-height: 760px) {
  .auth-view, .auth-view--glass { align-items: flex-start !important; padding-top: 24px !important; padding-bottom: 24px !important; }
}

img.brand-img--totaly {

  filter: none;
  -webkit-filter: none;
  background: transparent;
  background-color: transparent;
  mix-blend-mode: normal;
  opacity: 1;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-card--glass .auth-logo.auth-logo--totaly { width: 56px; height: 56px; margin: 0 auto 10px; background: transparent; border-radius: 0; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.auth-card--glass .auth-logo.auth-logo--totaly img { image-rendering: crisp-edges; width: 56px; height: 56px; object-fit: contain; filter: none; background: transparent; }
/* Login/signup: same .brand-logo-svg as sidebar chrome, Totaly blue */
.auth-logo.auth-logo--chrome { display: flex; justify-content: center; margin-bottom: 12px; color: #1B76D3; }
.auth-logo.auth-logo--chrome .brand-logo-svg,
.auth-logo.auth-logo--chrome .auth-chrome-mark { width: 56px; height: 56px; display: block; color: #1B76D3; }
.auth-logo.auth-logo--chrome .brand-logo-svg [fill]:not([fill="none"]),
.auth-logo.auth-logo--chrome .auth-chrome-mark [fill]:not([fill="none"]) { fill: #1B76D3; }
.auth-card--glass .auth-logo.auth-logo--chrome { margin-bottom: 10px; }

.composer-chip, [class*="chip"], [class*="tag"] { border-color: var(--chip-outline); background-color: var(--chip-bg); }
.footer-org-tier-badge, [data-tier] { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; line-height: 1.3; }

.footer-org-tier-badge[data-tier="max"], [data-tier="max"] { color: var(--tier-max-ink); background: var(--tier-max-bg); border-color: var(--tier-max-outline); }

.footer-org-tier-badge[data-tier="enterprise"], [data-tier="enterprise"] { color: var(--tier-ent-ink); background: var(--tier-ent-bg); border-color: var(--tier-ent-outline); }

.footer-org-pill { display: flex; align-items: center; gap: 10px; }
.footer-org-avatar { border: 1px solid var(--border-soft); }

.auth-logo--totaly img { image-rendering: crisp-edges; width: 64px; height: 64px; }

.settings-loading { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }

.topbar .pill.pill--status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: var(--pill-h);
  min-height: var(--pill-h);
  padding: 0 var(--pill-pad-x);
  border-radius: var(--pill-radius);
  font-family: var(--pill-font);
  font-size: var(--pill-font-size);
  letter-spacing: var(--pill-letter);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  box-sizing: border-box;
}

.topbar .pill--status .pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; color: var(--totaly-blue-500, var(--brand-blue-pure)); position: relative; }

.topbar .pill--status .pill-label { display: inline-block; font-family: var(--pill-font); font-size: var(--pill-font-size); letter-spacing: var(--pill-letter); line-height: 1; font-weight: 600; color: var(--text, #E8EAED); }

html body .topbar #etl-pill[data-state="idle"] .etl-spinner { display: none; }
.topbar #etl-pill[data-state="idle"] .etl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--totaly-blue-500, var(--brand-blue-pure)); box-shadow: 0 0 8px var(--accent-primary-alpha-55); }

html body .topbar #etl-pill[data-state="syncing"] .etl-dot { display: none; }
.topbar #etl-pill[data-state="syncing"] .etl-spinner { display: block; width: 12px; height: 12px; color: var(--totaly-blue-400, var(--accent-primary-light)); animation: etlSpin 0.9s linear infinite; transform-origin: 50% 50%; }

html body .topbar #etl-pill[data-state="offline"] .etl-spinner { display: none; }
.topbar #etl-pill[data-state="offline"] .etl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: rgba(160, 168, 176, 0.7); box-shadow: none; }
.topbar #etl-pill[data-state="offline"] .pill-label { color: var(--muted, var(--fg-faint-google)); }

html body .topbar #etl-pill .etl-spinner { display: none; }
html body .topbar #etl-pill .etl-dot { display: inline-block; }

.topbar #sync-indicator .pill-icon--clock { color: var(--muted, var(--fg-faint-google)); }
.topbar #sync-indicator .pill-icon--clock svg { width: 12px; height: 12px; }

@keyframes etlSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.topbar #etl-pill, .topbar #sync-indicator { width: auto; min-width: 0; }



/* ════════════════════
   WAVE-2 THEME SYSTEM - three real themes: dark (default) | light | og
   All app components reference these tokens; bar fills #1976D2 stay locked.
   ════════════════════ */





/* ── OG (Original Greenleaf - leafy green-on-cream) ────────────────── */


/* ============================================================
   Theme Tokens - Phase 1 additions (v40.90)
   54 new tokens, generated by .audit/generate_phase1_css.py
   Baseline: v40.89

   IMPORTANT: dark values equal the raw literals they replace, so
   Phase 2's rewrite is a pixel-identical no-op in dark theme.
   ============================================================ */







/* ============================================================
   Theme Tokens - Phase 2b additions (v40.92)
   22 new tokens for the strict-rejected literals
   Baseline: v40.91

   Each dark value equals the raw literal it replaces, so the
   Phase 2b rewrite is a pixel-identical no-op in dark theme.
   Light and og values are hand-derived per theme.
   ============================================================ */







/* ── Light & OG: global structural overrides ────────────────────
   These replace the hardcoded dark-only values on major surfaces.
   Bar fills (#1976D2) are intentionally NOT overridden here.  */
[data-app-theme="light"],
[data-app-theme="og"] {
  /* Page / layout */
  background: var(--bg-app);
  color: var(--fg-primary);
}

[data-app-theme="light"] body,
[data-app-theme="og"] body {
  background: var(--bg-app);
  color: var(--fg-primary);
}

/* Sidebar */
[data-app-theme="light"] aside.sidebar,
[data-app-theme="og"] aside.sidebar {
  background: var(--bg-sidebar);
  border-right-color: var(--border-soft);
}

[data-app-theme="light"] .sidebar-quick-item,
[data-app-theme="og"] .sidebar-quick-item {
  color: var(--fg-secondary);
}

[data-app-theme="light"] .sidebar-quick-item:hover,
[data-app-theme="og"] .sidebar-quick-item:hover {
  background: var(--bg-card-hover);
  color: var(--fg-primary);
}

[data-app-theme="light"] .sidebar-quick-item.active,
[data-app-theme="og"] .sidebar-quick-item.active {
  background: var(--bg-card);
  color: var(--fg-primary);
}

/* Cards / surfaces */
[data-app-theme="light"] .kpi-card,
[data-app-theme="og"] .kpi-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  color: var(--fg-primary);
}

[data-app-theme="light"] .kpi-card:hover,
[data-app-theme="og"] .kpi-card:hover {
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card-hover);
}



[data-app-theme="light"] .home-dash-card,
[data-app-theme="og"] .home-dash-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

/* Topbar */
[data-app-theme="light"] .topbar,
[data-app-theme="og"] .topbar {
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-primary);
}

/* Main content area */
[data-app-theme="light"] .main,
[data-app-theme="og"] .main {
  background: var(--bg-app);
}

[data-app-theme="light"] .main-content,
[data-app-theme="og"] .main-content {
  background: var(--bg-app);
}

/* Floating pill nav */
[data-app-theme="light"] .gl-floating-pill,
[data-app-theme="og"] .gl-floating-pill {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

[data-app-theme="light"] .gfp-item,
[data-app-theme="og"] .gfp-item {
  color: var(--fg-secondary);
}

[data-app-theme="light"] .gfp-item:hover,
[data-app-theme="og"] .gfp-item:hover {
  color: var(--fg-primary);
  background: var(--bg-card-hover);
}

[data-app-theme="light"] .gfp-item.active,
[data-app-theme="og"] .gfp-item.active {
  color: var(--accent-primary);
}

/* Text colors */
[data-app-theme="light"] .kpi-label,
[data-app-theme="og"] .kpi-label {
  color: var(--fg-muted);
}

[data-app-theme="light"] .kpi-value,
[data-app-theme="og"] .kpi-value {
  color: var(--fg-primary);
}

/* Account menu */

[data-app-theme="light"] .account-menu-item,
[data-app-theme="og"] .account-menu-item {
  color: var(--fg-primary);
}

[data-app-theme="light"] .account-menu-item:hover,
[data-app-theme="og"] .account-menu-item:hover {
  background: var(--bg-card-hover);
}

[data-app-theme="light"] .account-menu-divider,
[data-app-theme="og"] .account-menu-divider {
  background: var(--border-soft);
}

[data-app-theme="light"] .account-submenu,
[data-app-theme="og"] .account-submenu {
  background: var(--bg-card);
  border-color: var(--border-card);
}

/* Settings view */
[data-app-theme="light"] .settings-view,
[data-app-theme="og"] .settings-view {
  color: var(--fg-primary);
}



[data-app-theme="light"] .settings-block-head h2,
[data-app-theme="og"] .settings-block-head h2 {
  color: var(--fg-primary);
}



[data-app-theme="light"] .srl-title,
[data-app-theme="og"] .srl-title {
  color: var(--fg-primary);
}

[data-app-theme="light"] .srl-value,
[data-app-theme="og"] .srl-value {
  color: var(--fg-muted);
}

[data-app-theme="light"] .settings-outline-btn,
[data-app-theme="og"] .settings-outline-btn {
  border-color: var(--border-strong);
  color: var(--fg-primary);
  background: transparent;
}



/* Modals */
[data-app-theme="light"] .account-menu,
[data-app-theme="og"] .account-menu,
[data-app-theme="light"] .modal-box,
[data-app-theme="og"] .modal-box {
    background: var(--bg-card);
    border-color: var(--border-card);
    box-shadow: var(--shadow-card-hover);
    color: var(--fg-primary);
}

/* Chat / AI view */
[data-app-theme="light"] .ai-view,
[data-app-theme="og"] .ai-view {
  background: var(--bg-app);
}

[data-app-theme="light"] .glass-composer,
[data-app-theme="og"] .glass-composer {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

[data-app-theme="light"] .chat-textarea,
[data-app-theme="og"] .chat-textarea {
  color: var(--fg-primary);
  background: transparent;
}

/* Notification panel */
[data-app-theme="light"] .notif-panel,
[data-app-theme="og"] .notif-panel {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card-hover);
}

/* OG special: green sidebar accent */
[data-app-theme="og"] .sidebar-quick-item.active {
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
}

[data-app-theme="og"] .brand-logo-svg {
  stroke: var(--accent-primary);
}

[data-app-theme="og"] .brand-logo-svg circle {
  fill: var(--accent-primary);
}

/* OG: sidebar footer */

/* Light: sidebar footer */
[data-app-theme="light"] .sidebar-footer--v1940,
[data-app-theme="og"] .sidebar-footer--v1940 {
    background: var(--bg-sidebar);
    border-top-color: var(--border-soft);
}

/* Notif panel/history */
[data-app-theme="light"] .notif-history-modal,
[data-app-theme="og"] .notif-history-modal {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}

/* Pill nav (topbar) */
[data-app-theme="light"] #etl-pill,
[data-app-theme="light"] #sync-indicator,
[data-app-theme="og"] #etl-pill,
[data-app-theme="og"] #sync-indicator {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-muted);
}

/* Section headings / eyebrows */

/* Connectors page */

/* Report / division cards */
[data-app-theme="light"] .report-card,
[data-app-theme="og"] .report-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  color: var(--fg-primary);
}

/* Scrollbars */
[data-app-theme="light"] ::-webkit-scrollbar-track,
[data-app-theme="og"] ::-webkit-scrollbar-track {
  background: var(--bg-app);
}

[data-app-theme="light"] ::-webkit-scrollbar-thumb,
[data-app-theme="og"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

/* Theme-switcher segmented control (in Settings) */
.theme-switcher {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-strong, var(--border-strong-alpha));
  background: var(--bg-app, #171614);
  width: fit-content;
}

.theme-switcher-btn {
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  background: transparent;
  color: var(--fg-muted, var(--fg-faint-cool));
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  font-family: inherit;
}

.theme-switcher-btn:not(:last-child) {
  border-right: 1px solid var(--border-strong, var(--border-strong-alpha));
}

.theme-switcher-btn.active,
.theme-switcher-btn[aria-pressed="true"] {
  background: var(--accent-primary, var(--accent-primary-hover));
  color: var(--fg-inverse);
}

.theme-switcher-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: var(--bg-card-hover, #252727);
  color: var(--fg-primary, var(--fg-primary));
}

/* Color picker swatch row (in Settings) */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.color-picker-item label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fg-faint-cool));
}

.color-picker-item input[type="color"] {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, var(--border-strong-alpha));
  padding: 2px;
  background: var(--bg-card, var(--bg-card));
  cursor: pointer;
}

/* Logo upload area */
.logo-upload-area {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.logo-preview-wrap {
  width: 80px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-card, var(--overlay-w-07));
  background: var(--bg-card-hover, #252727);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-preview-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.ai-hero .ai-hero-card { position: relative; overflow: hidden; isolation: isolate; }

.ai-hero .ai-hero-card::before {
  content: '';
  position: absolute !important;
  inset: 0;
  pointer-events: none;

  background: transparent;
  background-image: none;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  mix-blend-mode: normal;

  opacity: 0;
  transform: none;
  z-index: 1;

  animation: none;
}

.ai-hero .ai-hero-card:hover::before, .ai-hero .ai-hero-card:focus-within::before { animation: none; opacity: 0; }

.ai-hero .ai-hero-card > * { position: relative; z-index: 2; }

.report-cards, .reports-view .report-cards, .reports-division .report-cards { display: grid; grid-template-columns: repeat(auto-fit, 280px); justify-content: center; gap: 18px; width: 100%; margin-left: auto; margin-right: auto; max-width: 1320px; padding: 4px 8px; }



.reports-view { padding-top: 0.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }

/* v41.96 Task H: responsive divisions grid - auto-fit so all cards always fit
   from 1024px through 1920px without clipping the right edge. Cards target
   ~260px but flex-shrink to fill the row. */
.report-cards, .reports-view .report-cards, .reports-division .report-cards, .gl-divisions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); justify-content: center; align-items: stretch; gap: 16px; padding: 4px 8px; }

.report-cards .report-card, .gl-divisions-grid .gl-division-card { flex: 1 1 240px !important; width: auto !important; min-width: 0 !important; max-width: none !important; }

.topbar.topbar--with-pill.topbar--no-header, header.topbar.topbar--with-pill, header.topbar { height: 44px !important; min-height: 44px !important; padding-top: 6px !important; padding-bottom: 6px !important; align-items: center !important; }

.topbar.topbar--with-pill.topbar--no-header .gl-floating-pill.gl-floating-pill--topbar, header.topbar .gl-floating-pill.gl-floating-pill--topbar, header.topbar .gl-floating-pill { top: 11px; left: 50%; right: auto; transform: translateX(-50%); margin: 0; }

.topbar.topbar--with-pill .topbar-right, header.topbar .topbar-right { top: 11px !important; }

.main-content { padding-top: 0; }

.ai-view { padding-top: 0; }
.ai-view .ai-messages { margin-top: 0; padding-top: 12px !important; }

.ai-view:not(.ai-home) .ai-hero, .ai-view .ai-messages:not(:empty) ~ .ai-composer-wrap ~ .ai-hero { display: none; }

.ai-view:has(.ai-messages > *) .ai-hero { display: none; }



.gl-divisions-title { font-size: 1.6rem; font-weight: 600; color: var(--accent-primary-deep); margin: 0 0 0.35rem 0; letter-spacing: -0.01em; text-align: center; width: 100%; }



.topbar.topbar--with-pill.topbar--no-header, header.topbar.topbar--with-pill, header.topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }

.main-content { border-top: 0; }

header.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--overlay-w-07); pointer-events: none; }

body.sidebar-collapsed aside.sidebar [data-section="history"] .section-body, body.sidebar-collapsed aside.sidebar [data-section="history"] .sidebar-label--toggle span, body.sidebar-collapsed aside.sidebar [data-section="history"] .sidebar-label--toggle .core-caret, .ai-thinking[hidden], .ai-thinking.is-collapsed .thinking-stream, aside.sidebar .sidebar-section[data-section="workspace"], aside.sidebar .sidebar-section[data-section="divisions"], .topbar #backfill-pill:empty, .topbar #backfill-pill:not([data-has-backfills="1"]), body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark, aside.sidebar#sidebar .sidebar-collapse-btn:not(.sidebar-collapse-btn--v1944), body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-label, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-badge, aside.sidebar#sidebar #sidebar-history-list .history-item .history-meta { display: none; }

body.is-auth-page main#main-content, body.is-auth-page #main-content, body.is-auth-page .main-content { padding-top: 0; margin-top: 0; min-height: 100dvh; background: var(--color-bg, #0b0c0d); }

body.is-auth-page .auth-view, body.is-auth-page .auth-view--glass { min-height: 100dvh; padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; }

.auth-logo--favicon {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-logo--favicon img { width: 96px; height: 96px; display: block; border-radius: 20px; }

body.is-auth-page, body.is-auth-page::before { background-image: none; }

body.is-auth-page main#main-content,
body.is-auth-page #main-content,
body.is-auth-page .main-content,
body.is-auth-page .auth-view,
body.is-auth-page { padding-top: 0; }
body.is-auth-page::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0); background: #171614 !important; z-index: 9999; pointer-events: none; }

/* iter12d audit: BUG - the selector list started with bare `html` (no scope),
   which painted the entire html element BLACK globally on every page, not
   just auth. This is the source of the bottom black band under the composer
   on chat (visible when content/composer don't fully cover the viewport).
   Scoped to auth pages only. Also removed two dangling selector fragments
   above (`body.is-auth-page,` and `body.is-auth-page::before,` with no own
   block) that were getting glued to this rule. */
html:has(body.is-auth-page), body.is-auth-page, body.is-auth-page::before { background: #000; background-color: #000; background-image: none; }

body.is-auth-page #main-content, body.is-auth-page main, body.is-auth-page .main-content, body.is-auth-page .auth-view, body.is-auth-page .auth-view--glass { background: transparent; background-color: transparent; background-image: none; }

body.is-auth-page .auth-card, body.is-auth-page .auth-card--glass { background: rgba(28, 30, 33, 0.92) !important; border: 1px solid var(--overlay-w-08) !important; }

body.is-auth-page::after { content: ""; position: fixed; inset: 0; background: #000; z-index: -1; pointer-events: none; }

body.is-auth-page section#main.main, body.is-auth-page .main { background: #000; background-color: #000; background-image: none; }

body.is-auth-page header.topbar, body.is-auth-page #topbar, body.is-auth-page .topbar, body.is-auth-page .topbar--with-pill, body.is-auth-page .topbar--no-header { display: none; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; }

.rc-plus-wrap { position: relative; display: inline-flex; align-items: center; }
.rc-plus-btn { color: var(--fg-primary-cream); }
.rc-plus-btn svg { stroke-width: 2.2; }

.rc-plus-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 148px;
  display: none;
  flex-direction: column;
  padding: 6px;
  background: rgba(22, 24, 27, 0.98);
  border: 1px solid var(--overlay-w-08);
  border-radius: 12px;
  box-shadow: 0 14px 40px var(--shadow-alpha-55),
              inset 0 1px 0 var(--overlay-w-05);
  z-index: 40;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.rc-plus-menu--open { display: flex; }
.rc-plus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--fg-primary-cream);
  font-size: 13px;
  font-weight: 540;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.rc-plus-item:hover, .rc-plus-item:focus-visible { background: var(--accent-primary-soft-15); color: var(--brand-blue-pure); outline: none; }
.rc-plus-item svg { flex: 0 0 auto; color: #B8BABA; }
.rc-plus-item:hover svg, .rc-plus-item:focus-visible svg { color: var(--brand-blue-pure); }
/* v41.53: sectioned plus menu */
.rc-plus-menu { min-width: 200px; }
.rc-plus-section {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6b7684;
}
.rc-plus-divider {
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.06);
}
/* v41.53: run-mode selector */
.rc-mode {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  color: #cfd4dc;
}
.rc-mode svg { color: #8b95a3; }
.rc-mode:hover { border-color: rgba(33,150,243,.35); }
.rc-mode-select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; color: inherit;
  padding: 4px 22px 4px 4px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238b95a3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
}
.rc-mode-select option { background: var(--bg-card, #16181B); color: var(--fg-primary, #f0f2f5); }
/* [moved to mobile-v2.css v41.58k — was L5064-L5068 @media (max-width: 820px)] */

html body .rich-composer { display: flex; flex-direction: column; }
.rich-composer .rc-textarea { order: 1; }
html body .rich-composer .rc-toolbar { order: 2; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; }
.rich-composer .rc-toolbar .rc-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.rich-composer .rc-toolbar .rc-left::-webkit-scrollbar { display: none; }
.rich-composer .rc-toolbar .rc-right { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 0 0 auto; }

html body .rich-composer .rc-chip { flex: 0 0 auto; white-space: nowrap; }

.rich-composer .rc-plus-wrap { flex: 0 0 auto; position: sticky; left: 0; z-index: 2; background: inherit; }

.ai-hero { opacity: var(--hero-opacity, 1); transition: opacity 120ms linear; will-change: opacity; }

.ai-hero .ai-hero-card { opacity: 1; animation: none; }

@keyframes bgmark-shimmer-once {
  0%   { background-position: 180% 0%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: -80% 0%;  opacity: 0; }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* Dot indicators - shared between iMessage and Brain pills */
.topbar #brain-pill .brain-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: rgba(160, 168, 176, 0.7); margin-left: 4px; transition: background 180ms ease, box-shadow 180ms ease; }

/* iMessage pill - blue when active, green-tinted when idle/engaged,
   amber when stale, red when the table is empty/down. */

/* Brain pill - green when up, amber degraded, red down. */
.topbar #brain-pill[data-state="up"] .brain-dot { background: #34C759; box-shadow: 0 0 6px rgba(52, 199, 89, 0.45); }
.topbar #brain-pill[data-state="degraded"] .brain-dot { background: #FFB020; box-shadow: 0 0 6px rgba(255, 176, 32, 0.45); }
.topbar #brain-pill[data-state="down"] .brain-dot { background: rgba(240, 80, 80, 0.85); box-shadow: 0 0 6px rgba(240, 80, 80, 0.45); }

/* Icon opacity mirrors state - muted when down, lively when up */
.topbar #imsg-pill[data-state="down"] .pill-icon--imsg,
.topbar #brain-pill[data-state="down"] .pill-icon--brain { opacity: 0.5; }
.topbar .pill-icon--brain { display: inline-flex; align-items: center; gap: 3px; }

/* On narrow screens, hide both pills to protect clock/ETL - they're
   still accessible via dashboard widgets if we build them later. */

/* Globally kill the caret on the greeting and its parents - covers
   every focus path including contenteditable bleed-through. */

/* Light-grey text - overrides every earlier #C8CFD9 declaration. */

/* Live badge on automations that read realtime from production data */
.automation-card-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #34C759;
  background: rgba(52, 199, 89, 0.12);
  border: 1px solid rgba(52, 199, 89, 0.35);
  border-radius: 999px;
  vertical-align: middle;
}

/* Stats strip below description on the iMessage card */
.automation-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 0 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  color: var(--text-muted, #9aa3ad);
}

.automation-card-stats .automation-stat strong { color: var(--text-default, #E4E8EE); font-weight: 600; margin-right: 3px; }

/* Footer button group */
.automation-card-actions { display: inline-flex; gap: 6px; }



.stl-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #797876);
  margin-bottom: 8px;
}
.stl-template-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--overlay-w-04);
  border: 1px solid var(--border-overlay-10);
  border-radius: 10px;
  color: var(--text-default, #E4E8EE);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.stl-template-textarea:focus { outline: none; border-color: #4F98A3; }
.stl-template-textarea--sub { margin: 6px 0 4px 12px; width: calc(100% - 12px); }
.stl-template-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.stl-stats-row { display: flex; gap: 20px; padding-top: 2px; }
.stl-stats-row[data-state="loading"], .stl-stats-row[data-state="error"] { opacity: 0.6; }
.stl-stat { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.stl-stat-value { font-size: 20px; font-weight: 700; color: var(--text-default, #E4E8EE); }
.stl-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #797876); }

/* Small variant of the Hood iOS switch, used for the followup-ladder
   sub-rows so it reads visually subordinate to the main toggle above it. */




/* Editor modal - rules grid */
.automation-editor-rules { display: flex; flex-direction: column; gap: 16px; }
.automation-rule-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; align-items: center; }

.automation-rule-label strong { display: block; color: var(--text-default, #E4E8EE); font-weight: 600; margin-bottom: 2px; }
.automation-rule-input.input--ghost {
  width: 100%;
  padding: 9px 12px;
  background: var(--overlay-w-04);
  border: 1px solid var(--border-overlay-10);
  border-radius: 8px;
  color: var(--text-default, #E4E8EE);
  font-size: 0.88rem;
  transition: border-color 140ms ease, background 140ms ease;
}


/* Modal foot buttons need a small layout helper */
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-soft); }

html body .ai-hero .ai-hero-card.ai-hero-card::before,
html body .ai-hero .ai-hero-card.ai-hero-card:hover::before,
html body .ai-hero .ai-hero-card.ai-hero-card:focus-within::before,
html body .ai-view .ai-hero-card.ai-hero-card::before {
  content: '';
  animation: none;
  background: transparent;
  background-image: none;
  background-color: transparent;
  opacity: 0;
  transform: none;
  visibility: hidden;
  pointer-events: none;
}

/* Also bump greeting color win - earlier override at line 6417 may not
   beat all later cascade entries. Make this the final word. */

html body .ai-hero, html body .ai-hero .ai-hero-card, html body .ai-hero .ai-hero-card *, html body .ai-hero-stage, html body .ai-hero-stage * { box-shadow: none; border-right: 0; border-left: 0; }

/* Chip background - confirm #1F2121 (final word) */
html body .ai-hero .ai-hero-card,
html body .ai-view .ai-hero-card { background: #1F2121; background-color: #1F2121; background-image: none; }

/* Chip border - #414242 */
html body .ai-hero .ai-hero-card { color: #8C8D8D; }

/* v2003c - final-final greeting color: must beat html body .ai-hero .ai-hero-card #ai-greeting#ai-greeting (spec 0,2,3) */

/* (1) Topbar: kill the white inset shadow + extend dark bg full-width
  (covers expanded AND sidebar-collapsed layouts) */
html body header.topbar,
html body header.topbar.topbar--with-pill,
html body header.topbar.topbar--no-header,
html body.sidebar-collapsed header.topbar {
  background: #1A1B1B;
  background-color: #1A1B1B;
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid #2A2A2A;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* (2) Floating pill in topbar: dark border, no white outline */
html body header.topbar .gl-floating-pill,
html body header.topbar nav.gl-floating-pill,
html body .gl-floating-pill.gl-floating-pill--topbar { border: 1px solid #444545; border-color: #444545; box-shadow: none; background: rgba(31, 33, 33, 0.85); }

/* (3) Welcome chip border to MATCH composer (#444545) */
html body .ai-hero .ai-hero-card,
html body .ai-view .ai-hero-card { border: 1px solid #444545 !important; border-color: #444545 !important; }

/* (4) Bead canvas: kill the blue drop-shadow tint so #8C8D8D reads pure */
html body #ai-hero-canvas,
html body .ai-hero-logo--canvas,
html body .ai-hero .ai-hero-card .ai-hero-logo--canvas { filter: none; -webkit-filter: none; mix-blend-mode: normal; }




html body header.topbar.topbar--with-pill.topbar--no-header,
html body header.topbar.topbar--with-pill,
html body.route-ask header.topbar,
html body.route-ask header.topbar.topbar--with-pill,
html body.route-ask header.topbar.topbar--with-pill.topbar--no-header,
html body.sidebar-collapsed header.topbar,
html body.sidebar-collapsed header.topbar.topbar--with-pill {
  background: #1A1B1B !important;
  background-color: #1A1B1B !important;
  background-image: none;
  border-bottom: 1px solid #2A2A2A !important;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

/* Pill: must beat .topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar (0,4,0).
   Use html body + .topbar.topbar--with-pill + .gl-floating-pill.gl-floating-pill--topbar (0,5,2). */
html body .topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar, html body .topbar.topbar--with-pill nav.gl-floating-pill.gl-floating-pill--topbar, html body header.topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar, /* Topbar-right buttons (Brain, time, Offline, etc.): match dark glass too */
html body header.topbar .topbar-right > button, html body header.topbar .topbar-right > a, html body header.topbar .topbar-right > [class*="pill"] {
  background: rgba(31, 33, 33, 0.92);
  background-color: rgba(31, 33, 33, 0.92);
  background-image: none;
  border: 1px solid #444545;
  border-color: #444545;
  box-shadow: none;
  color: #C8CFD9;
}

/* Defensive: no Ask-route height override should fight our scroll-lock */


/* Topbar: transparent (white glass is supplied by the pill itself) */
html body header.topbar,
html body header.topbar.topbar--with-pill,
html body header.topbar.topbar--no-header,
html body header.topbar.topbar--with-pill.topbar--no-header,
html body.route-ask header.topbar,
html body.route-ask header.topbar.topbar--with-pill,
html body.route-ask header.topbar.topbar--with-pill.topbar--no-header,
html body.sidebar-collapsed header.topbar,
html body.sidebar-collapsed header.topbar.topbar--with-pill { background: transparent; background-color: transparent; background-image: none; border-bottom: 0; box-shadow: none; }

/* Center pill: dark glass */
html body .topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar,
html body .topbar.topbar--with-pill nav.gl-floating-pill.gl-floating-pill--topbar,
html body header.topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar,
html body header.topbar.topbar--with-pill nav.gl-floating-pill.gl-floating-pill--topbar {
  background: rgba(31, 33, 33, 0.92) !important;
  background-image: none;
  background-color: rgba(31, 33, 33, 0.92) !important;
  border: 1px solid #2A2A2A !important;
  border-color: #2A2A2A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Right-side pills (Offline / Brain / time): dark glass */

html body header.topbar .topbar-right > *:not(.status-row),
html body header.topbar .topbar-right button,
html body header.topbar .topbar-right a,
html body header.topbar .topbar-right [class*="pill"],
html body header.topbar .topbar-right [class*="Pill"] {
  background: rgba(31, 33, 33, 0.92) !important;
  background-image: none;
  background-color: rgba(31, 33, 33, 0.92) !important;
  border: 1px solid #2A2A2A !important;
  border-color: #2A2A2A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  color: #B8B8B8 !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Non-active items: muted grey text on dark glass */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat span,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item {
  color: #B8B8B8 !important;
  font-family: var(--pill-font, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--pill-font-size, 13px);
  letter-spacing: 0.002em;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  opacity: 1;
}

/* Hover: light lift */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:hover,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat:hover { color: #E5E5E5 !important; background: rgba(255, 255, 255, 0.06) !important; }

/* Active tab: blue pill with WHITE text - uniform weight with others */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active span,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item.active { background: #1976D2; background-image: none; color: #FFF; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.35), 0 2px 8px rgba(25, 118, 210, 0.28); }

/* Right-side pills (Offline / Brain / time): black text, same family */
html body header.topbar .topbar-right,
html body header.topbar .topbar-right *,
html body header.topbar .topbar-right button,
html body header.topbar .topbar-right a,
html body header.topbar .topbar-right [class*="pill"],
html body header.topbar .topbar-right [class*="pill"] *,
html body header.topbar .topbar-right .live-clock { color: #B8B8B8 !important; font-family: var(--pill-font, 'Inter', system-ui, sans-serif); font-weight: 500; text-shadow: none; }



/* Lock html/body/main/view - beat every prior rule */


/* WebKit: hide the scrollbar track entirely */


/* 1) Un-paint the .status-row wrapper - it was a container, not a pill */

html body header.topbar .topbar-right .status-row,
html body header.topbar .topbar-right > .status-row {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  padding: 0;
  border-radius: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 2) Dark-glass on the individual pills inside .status-row */
html body header.topbar .topbar-right .status-row > .pill,
html body header.topbar .topbar-right .status-row > .pill.pill--glass,
html body header.topbar .topbar-right .status-row > #etl-pill,
html body header.topbar .topbar-right .status-row > #brain-pill,
html body header.topbar .topbar-right .status-row > #sync-indicator,
html body header.topbar .topbar-right .status-row > .pill-clock {
  background: rgba(31, 33, 33, 0.92) !important;
  background-image: none;
  background-color: rgba(31, 33, 33, 0.92) !important;
  border: 1px solid #2A2A2A !important;
  border-color: #2A2A2A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-radius: 999px;
  padding: 4px 10px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 3) Uniform blue icon dots across all three chips */
html body header.topbar .topbar-right .status-row .etl-dot,
html body header.topbar .topbar-right .status-row .brain-dot,
html body header.topbar .topbar-right .status-row .sync-dot,
html body header.topbar .topbar-right .status-row .sync-dot--ok,
html body header.topbar .topbar-right .status-row #etl-pill .etl-dot,
html body header.topbar .topbar-right .status-row #brain-pill .brain-dot,
html body header.topbar .topbar-right .status-row #sync-indicator .sync-dot { background: #1976D2; background-color: #1976D2; background-image: none; box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.18); }

/* SVG icons inside the chip (spinner ring, brain, clock) → same blue */
html body header.topbar .topbar-right .status-row .pill-icon svg,
html body header.topbar .topbar-right .status-row .pill-icon--etl svg,
html body header.topbar .topbar-right .status-row .pill-icon--brain svg,
html body header.topbar .topbar-right .status-row .pill-icon--clock svg { color: #1976D2; stroke: #1976D2; }

/* 4) Uniform text - muted grey on dark glass */
html body header.topbar .topbar-right .status-row,
html body header.topbar .topbar-right .status-row *,
html body header.topbar .topbar-right .status-row .pill,
html body header.topbar .topbar-right .status-row .pill *,
html body header.topbar .topbar-right .status-row .pill-label,
html body header.topbar .topbar-right .status-row .live-clock,
html body header.topbar .topbar-right .status-row #etl-pill-label,
html body header.topbar .topbar-right .status-row #brain-pill-label {
  color: #B8B8B8 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11.7px;
  font-weight: 500;
  letter-spacing: 0.002em;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
}

/* 5) Extend the top header scrim full-width on collapsed sidebar
  so the dark band runs edge-to-edge without a seam at the rail */
html body.sidebar-collapsed.ai-scroll-fade-on::after,
html body.sidebar-collapsed::after { left: 0; right: 0; width: 100vw; z-index: 1;  /* behind sidebar rail so rail stays interactive */; }

/* Hardest override for clock pill - every descendant of #sync-indicator */
html body header.topbar .topbar-right #sync-indicator,
html body header.topbar .topbar-right #sync-indicator *,
html body header.topbar .topbar-right #sync-indicator .live-clock,
html body header.topbar .topbar-right #sync-indicator span { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11.7px; font-weight: 500; color: #B8B8B8 !important; letter-spacing: 0.002em; font-feature-settings: 'tnum' 1; }

/* Extend the ::after scrim behind the collapsed rail.
   Use 100vw and ensure it starts at the true viewport left. */
html body.sidebar-collapsed::after,
html body.sidebar-collapsed.ai-scroll-fade-on::after,
html body.route-ask.sidebar-collapsed::after,
html body.route-ask.sidebar-collapsed.ai-scroll-fade-on::after {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw !important;
  height: 86px !important;
  z-index: 1 !important;
  content: "";
  pointer-events: none;
}

/* Also push the sidebar rail's TOP to match the topbar - paint the
   first 60px of the rail with the same dark body bg so there's no seam */
html body.sidebar-collapsed aside.sidebar,
html body.sidebar-collapsed aside.sidebar::before { background-color: var(--ask-bg, #0b0c0d); }

/* If the rail has a top border/line, remove it on collapsed state */
html body.sidebar-collapsed aside.sidebar { border-top: 0; box-shadow: none; }

/* 1) Strip background/border/shadow from EVERY descendant of a pill -
  only the pill root shows the white glass. No nested boxes. */
html body header.topbar .topbar-right .status-row > .pill > *,
html body header.topbar .topbar-right .status-row > .pill *,
html body header.topbar .topbar-right .status-row .pill-label,
html body header.topbar .topbar-right .status-row .pill-icon,
html body header.topbar .topbar-right .status-row .pill-icon--etl,
html body header.topbar .topbar-right .status-row .pill-icon--brain,
html body header.topbar .topbar-right .status-row .pill-icon--clock,
html body header.topbar .topbar-right .status-row .live-clock {
  background: transparent;
  background-image: none;
  background-color: transparent;
  border: 0;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Re-assert: the colored dots keep their solid blue bg + glow */
html body header.topbar .topbar-right .status-row .etl-dot,
html body header.topbar .topbar-right .status-row .brain-dot,
html body header.topbar .topbar-right .status-row .sync-dot,
html body header.topbar .topbar-right .status-row .sync-dot--ok {
  background: #1976D2;
  background-color: #1976D2;
  background-image: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.18);
  display: inline-block;
}

/* 2) Brain pill had BOTH an anatomy <svg> AND a .brain-dot - hide the
  SVG so it matches the other chips (single blue dot only). */
html body header.topbar .topbar-right #brain-pill .pill-icon--brain svg,
html body header.topbar .topbar-right .status-row #brain-pill svg { display: none; }

/* ETL pill had a spinner <svg> plus an .etl-dot - hide the spinner too
   when the pill is idle (it stays invisible in our three-equal look) */
html body header.topbar .topbar-right #etl-pill .pill-icon--etl svg.etl-spinner { display: none; }

/* Clock pill has only a dot (no SVG) so nothing to hide there */

/* 3) Sidebar brand logo - force stroke AND fill to the exact blue #1B76D3
  in both expanded and collapsed sidebar states. */
html body aside.sidebar .brand-logo-svg,
html body aside.sidebar svg.brand-logo-svg,
html body aside.sidebar .brand .brand-logo-svg,
html body.sidebar-collapsed aside.sidebar .brand-logo-svg,
html body.sidebar-collapsed aside.sidebar svg.brand-logo-svg { color: #1B76D3; stroke: #1B76D3; }
html body aside.sidebar .brand-logo-svg *,
html body aside.sidebar svg.brand-logo-svg *,
html body.sidebar-collapsed aside.sidebar .brand-logo-svg *,
html body.sidebar-collapsed aside.sidebar svg.brand-logo-svg * { stroke: #1B76D3; }
html body aside.sidebar .brand-logo-svg [fill]:not([fill="none"]):not([fill="transparent"]),
html body aside.sidebar svg.brand-logo-svg [fill]:not([fill="none"]):not([fill="transparent"]) { fill: #1B76D3; }

/* 4) Header band / scrim - solid extension behind the collapsed rail.
  Use a direct fixed-position strip instead of relying on ::after */
html body.route-ask::before,
html body.route-ask.sidebar-collapsed::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 60px;   /* matches topbar height */
  background: var(--ask-bg, #0b0c0d);
  z-index: 1;
  pointer-events: none;
}

/* Ensure topbar and sidebar paint ABOVE this strip so they stay interactive */



/* Kill any hairline at the sidebar top edge */
html body aside.sidebar,
html body.sidebar-collapsed aside.sidebar { border-top: 0; }

html body.route-ask::before,
html body.route-ask.sidebar-collapsed::before,
html body.route-ask.ai-scroll-fade-on::before { background: var(--ask-bg, #191A1A); background-color: var(--ask-bg, #191A1A); }

/* Also make the sidebar rail top match so there's no tonal shift */
html body aside.sidebar,
html body.sidebar-collapsed aside.sidebar { background-color: var(--bg-sidebar, var(--ask-bg, #191A1A)) !important; }

html body aside.sidebar,
html body.sidebar-collapsed aside.sidebar,
html body.route-ask aside.sidebar,
html body.route-ask.sidebar-collapsed aside.sidebar { border-right: 0; border: 0; box-shadow: none; }

html body aside.sidebar::before,
html body.sidebar-collapsed aside.sidebar::before,
html body.route-ask aside.sidebar::before,

/* Nuke any ::after overlay on sidebar that could add a gradient/line too */
html body aside.sidebar::after,
html body.sidebar-collapsed aside.sidebar::after { background: transparent; background-image: none; border: 0; box-shadow: none; }

html body aside.sidebar,
html body.sidebar-collapsed aside.sidebar,
html body.route-ask aside.sidebar,
html body.route-ask.sidebar-collapsed aside.sidebar {
  background: var(--bg-sidebar, var(--ask-bg, #191A1A)) !important;
  background-image: none;
  background-color: var(--bg-sidebar, var(--ask-bg, #191A1A)) !important;
  border-right: 1px solid var(--border-strong-warm, var(--border-soft, #2A2A2A)) !important;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--fg-muted-warm, #B8B8B8) !important;
}

/* v2008i: neutralize any ::before overlay - was pushing the rail brighter. Keep transparent so only the aside gradient reads. */
html body aside.sidebar::before,
html body.sidebar-collapsed aside.sidebar::before,
html body.route-ask aside.sidebar::before,
html body.route-ask.sidebar-collapsed aside.sidebar::before { background: transparent; background-image: none; background-color: transparent; box-shadow: none; border: 0; }

/* 1) Expanded-state brand: reserve 44px for hex so it aligns with nav icons */
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  margin-left: 0;
}
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only .brand-logo-svg { width: 22px; height: 22px; flex: 0 0 22px; margin-left: 11px; margin-right: 11px; }
/* Remove any outer padding on the header so our internal 11px lands the hex at x=21 */
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 { padding: 0; min-height: 44px; }
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark { margin-left: 0; padding-left: 0; }

/* 2) Wordmark: light on dark sidebar */
html body aside.sidebar#sidebar .brand-logo-wordmark,
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark { color: #E5E5E5 !important; }

/* iter12d audit: REMOVED html body::after seam at top: 54px - it was a
   1px white-tint horizontal line that read as a STRAND on mobile dark
   background. Topbar/header dividers are not used on mobile (transparent
   topnav per iter12 rule 1). Kept only as a no-op so other rules that
   reference body::after (e.g. ai-scroll-fade-on) still cascade harmlessly. */
html body::after {
  content: none;
}
/* Hide the seam when mobile drawer is open or on mobile viewport */

/* (1) Neutralize the 86px top scrim that was creating the band */
html body.ai-scroll-fade-on::after,
html body.sidebar-collapsed::after,
html body.sidebar-collapsed.ai-scroll-fade-on::after,
html body.route-ask.sidebar-collapsed::after,
html body.route-ask.sidebar-collapsed.ai-scroll-fade-on::after { background: transparent; background-image: none; background-color: transparent; }

/* (2) Kill my v2008l body::after seam - replaced by a stable header.topbar::after below */
/* (overrides the rule at line 7314 by setting matching properties to none) */
@media (min-width: 901px) {
  /* Defensive: even if media query wins, ensure no seam from this pseudo */
  html body::after { background: transparent; height: 0; top: -10px; }
}

/* v40.5ds B5: gradual top fade. The old attempts here were 1px strands that
   read as a hard line; Branson flagged the top edge repeatedly ("it is not
   gradual, it looks really bad"). Replace the no-op with a proper SOFT scrim:
   a 56px multi-stop ramp in the page bg colour (#191A1A) that sits directly
   below the sticky topbar so scrolling content dissolves into the header
   instead of hitting the old solid-edge + 1px divider. Stop 0 == the topbar's
   own bg, so there is no seam; it fades to fully transparent by 56px. */
header.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  bottom: auto;   /* cancel the leaked bottom:0 from the earlier 1px-seam rule so the box is sized by top+height, not over-constrained */
  height: 56px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--surface-charcoal-deep) 0%,
    rgba(25, 26, 26, 0.85) 18%,
    rgba(25, 26, 26, 0.55) 38%,
    rgba(25, 26, 26, 0.22) 62%,
    rgba(25, 26, 26, 0) 100%
  );
}
/* Drop the hard 1px divider - the soft scrim above is the only transition now. */
header.topbar { border-bottom: 0 !important; }

/* v41.96 Task J + K: kill the 56px topbar::after scrim on Call List, My Hood,
   Messages, Chat history, Customers, Divisions, and Predictions. On a map,
   dense list, iMessage-style hub, or threads page the gradient reads as a
   broken "fade" strip / empty header band. The topbar itself stays; only
   the trailing scrim. */
body.route-route header.topbar::after,
body.route-hood header.topbar::after,
body.route-messages header.topbar::after,
html body.route-messages header.topbar::after,
html body.route-messages .topbar::after,
body.route-chats header.topbar::after,
html body.route-chats header.topbar::after,
html body.route-chats .topbar::after,
body.route-customers header.topbar::after,
html body.route-customers header.topbar::after,
body.route-divisions header.topbar::after,
html body.route-divisions header.topbar::after,
body.route-predictions header.topbar::after,
html body.route-predictions header.topbar::after {
  content: none !important;
  background: none !important;
  height: 0 !important;
  display: none !important;
}

/* v41.96 Task J: skeleton row look inside .route-view--skel */
.route-view--skel {
  padding: 12px 14px;
}
.rt-call-row--skel {
  background: #1C1B19;
  border: 1px solid var(--border-strong-warmer, #2a2926);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.route-list > .route-stop,
.route-list > .rt-row {
  animation: rt-fade-in 150ms ease-out;
}
@keyframes rt-fade-in { from { opacity: 0.4; } to { opacity: 1; } }

html body aside.sidebar .sidebar-header,
html body aside.sidebar#sidebar .sidebar-header,
html body aside.sidebar#sidebar .sidebar-header--v1944,
html body.sidebar-collapsed aside.sidebar .sidebar-header,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 { border-bottom: 0; }

/* Header in light mode */

/* Inner list: the only scroll region inside the panel */
html body .notif-panel .notif-panel-body { overflow-y: auto; overflow-x: hidden; max-height: calc(62vh - 70px); padding: 8px 8px 10px 8px; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.18) transparent; }
html body .notif-panel .notif-panel-body::-webkit-scrollbar-track { background: transparent; }
html body .notif-panel .notif-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.30); }

/* ALL items get the light-blue chip treatment + blue dot.
   `is-unread` no longer required for the visual treatment. */
html body .notif-panel .notif-item {
  background: linear-gradient(
    180deg,
    rgba(33, 150, 243, 0.10) 0%,
    rgba(33, 150, 243, 0.04) 100%
  ) !important;
  border: 1px solid rgba(33, 150, 243, 0.14) !important;
  border-radius: 12px;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  cursor: default;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}
html body .notif-panel .notif-item:last-child { margin-bottom: 0; }
html body .notif-panel .notif-item:hover { background: linear-gradient(180deg, rgba(33, 150, 243, 0.16) 0%, rgba(33, 150, 243, 0.08) 100%) !important; border-color: rgba(33, 150, 243, 0.24) !important; }
html body .notif-panel .notif-item-dot {
  background: #1976D2;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  margin-top: 6px;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.16);
}

/* Dark text on light panel */
html body .notif-panel .notif-item-title { color: #0F172A; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
html body .notif-panel .notif-item-body { color: rgba(15, 23, 42, 0.66); font-size: 0.85rem; margin-top: 3px; }
html body .notif-panel .notif-item-meta { color: rgba(15, 23, 42, 0.45); font-size: 0.74rem; margin-top: 4px; }

/* Read items: very subtly muted - same treatment, slightly lower contrast */

/* Empty state on light panel */

/* Toolbar in panel header now hosts both See-all and Mark-all-read */

/* Per-item checkbox - custom styled to match light panel */
html body .notif-panel .notif-item { position: relative; }

html body .notif-item-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex: 0 0 18px;
  cursor: pointer;
  user-select: none;
}
html body .notif-item-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
html body .notif-item-check .notif-item-check-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.25px solid rgba(15, 23, 42, 0.22);
  background: rgba(255, 255, 255, 0.85);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  position: relative;
}
html body .notif-item-check:hover .notif-item-check-box { border-color: rgba(25, 118, 210, 0.55); }
html body .notif-item-check input[type="checkbox"]:checked + .notif-item-check-box { background: #1976D2; border-color: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.14); }
html body .notif-item-check input[type="checkbox"]:checked + .notif-item-check-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* History modal - centered glassy panel over a dimmed backdrop */
html body .notif-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .notif-history-overlay.is-open { opacity: 1; pointer-events: auto; }

html body .notif-history-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: 70vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 238, 246, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow: hidden;
  transform: translateY(8px) scale(0.985);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
}
html body .notif-history-overlay.is-open .notif-history-modal { transform: translateY(0) scale(1); }

html body .notif-history-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px 16px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); flex: 0 0 auto; }
html body .notif-history-title { font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #0F172A; letter-spacing: 0.002em; }
html body .notif-history-close {
  appearance: none;
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  color: rgba(15, 23, 42, 0.55);
  font-size: 16px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}
html body .notif-history-close:hover { background: rgba(15, 23, 42, 0.06); color: #0F172A; }

html body .notif-history-body { padding: 8px 8px 12px 8px; overflow-y: auto; flex: 1 1 auto; max-height: calc(70vh - 60px); }
html body .notif-history-body::-webkit-scrollbar { width: 6px; }
html body .notif-history-body::-webkit-scrollbar-track { background: transparent; }
html body .notif-history-body::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 999px; }

/* History items reuse .notif-item visuals; cleared rows are muted */
html body .notif-history-body .notif-item.is-cleared .notif-item-dot { background: rgba(25, 118, 210, 0.35); box-shadow: none; }

/* v2008o.1 - boost text contrast inside history modal (default styles inherited
   from the dark panel rendered too faint on the light modal) */

/* Layout: items become a 3-column flex so the action button sits on the right */
html body .notif-history-body .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 9px; margin: 4px 6px; }
html body .notif-history-body .notif-item-main { flex: 1 1 auto; min-width: 0; }

/* Force the blue chip treatment on every unread row in the history modal,
   overriding the panel-only :not(.is-unread) muted rule from v2008n. */
html body .notif-history-body .notif-item.is-unread .notif-item-dot {
  background: #1976D2 !important;
  box-shadow: 0 0 10px rgba(25, 118, 210, 0.45) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  flex: 0 0 8px !important;
  margin-top: 6px !important;
}
/* Read (but not cleared) rows stay calm */
html body .notif-history-body .notif-item:not(.is-unread):not(.is-cleared) .notif-item-dot {
  background: rgba(25, 118, 210, 0.35);
  box-shadow: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  margin-top: 6px;
}

/* Mark unread button - small ghost pill on the right */

/* ── KILL the grey treatment that v2008p added to read rows in the modal ── */
html body .notif-history-body .notif-item:not(.is-unread):not(.is-cleared) { background: transparent; border: 1px solid rgba(15, 23, 42, 0.05); }

/* ── PANEL + HISTORY: unread = same transparent pale-blue glass everywhere ── */
html body .notif-panel .notif-item.is-unread,
html body .notif-panel .notif-item.is-unread .notif-item-dot,

/* ── PANEL: read rows now match - transparent, no grey/white block ── */
html body .notif-panel .notif-item:not(.is-unread) .notif-item-dot { background: rgba(25, 118, 210, 0.42); box-shadow: none; }

/* ── Read-toggle button (replaces v2008p's Mark-unread-only button) ── */
html body .notif-item-readtoggle {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #0F172A;
  font: 500 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.002em;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 2px;
  white-space: nowrap;
  align-self: flex-start;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
html body .notif-item-readtoggle:hover { background: rgba(25, 118, 210, 0.10); border-color: rgba(25, 118, 210, 0.40); color: #1976D2; }
html body .notif-item-readtoggle:active { transform: translateY(1px); }

/* On unread rows, the toggle button reads "Mark read" - slightly tinted to match the chip */
html body .notif-item.is-unread .notif-item-readtoggle { background: rgba(255, 255, 255, 0.92); border-color: rgba(33, 150, 243, 0.28); }

/* ── PANEL items must become a flex row to host checkbox + dot + body + toggle ── */
html body .notif-panel .notif-item-main { flex: 1 1 auto; min-width: 0; }

/* The history modal already gets display:flex from v2008p - just keep button alignment consistent */
html body .notif-history-body .notif-item .notif-item-readtoggle { margin-top: 2px; }

/* Title - solid dark, identical everywhere */
html body .notif-panel .notif-item-title,
html body .notif-history-body .notif-item-title { color: #0F172A; font-weight: 600; font-size: 0.92rem; line-height: 1.3; opacity: 1; }

/* Body copy - same transparent slate, identical in both views, both states */
html body .notif-panel .notif-item-body,
html body .notif-history-body .notif-item-body { color: rgba(15, 23, 42, 0.66); font-size: 0.85rem; margin-top: 3px; opacity: 1; }

/* Meta (timestamp) - same transparent slate everywhere */
html body .notif-panel .notif-item-meta,
html body .notif-history-body .notif-item-meta { color: rgba(15, 23, 42, 0.48); font-size: 0.74rem; margin-top: 4px; opacity: 1; }

/* Cleared rows: keep them readable - match the read style, not faded */
html body .notif-history-body .notif-item.is-cleared { opacity: 1;          /* override v2008o opacity:0.62 */; }
html body .notif-history-body .notif-item.is-cleared .notif-item-title,
html body .notif-history-body .notif-item.is-cleared .notif-item-body{ color: #0F172A; }
html body .notif-history-body .notif-item.is-cleared .notif-item-body  { color: rgba(15, 23, 42, 0.66); }
html body .notif-history-body .notif-item.is-cleared .notif-item-meta  { color: rgba(15, 23, 42, 0.48); }

/* ── Outline: every chip gets a uniform 1px border. Unread = blue, read/cleared = slate. ── */
html body .notif-panel .notif-item,
html body .notif-history-body .notif-item { border: 1px solid rgba(15, 23, 42, 0.10); background: transparent; }

/* Unread overlay: same blue gradient + blue border, same opacity in both views */
html body .notif-panel .notif-item.is-unread,

/* Dots stay consistent */
html body .notif-panel .notif-item:not(.is-unread) .notif-item-dot,
html body .notif-history-body .notif-item:not(.is-unread) .notif-item-dot { background: rgba(25, 118, 210, 0.42); box-shadow: none; }
html body .notif-panel .notif-item.is-unread .notif-item-dot,
html body .notif-history-body .notif-item.is-unread .notif-item-dot { background: #1976D2 !important; box-shadow: 0 0 10px rgba(25, 118, 210, 0.45) !important; }

html body .notif-history-body .notif-section { display: block; margin: 0; }

html body .notif-history-body .notif-section-header {
  text-align: left;
  /* Match the chip blue used by .notif-item.is-unread border */
  color: #1976D2;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 6px 10px;
  margin: 0;
}

/* Thin blue line directly above the Read section header - same blue as the chip glass */
html body .notif-history-body .notif-section--read .notif-section-divider { display: block; height: 1px; margin: 8px 10px 4px 10px; background: rgba(33, 150, 243, 0.28);  /* matches .is-unread border tone */; border: 0; }

/* First section needs a touch of breathing room at the top */
html body .notif-history-body .notif-section--unread .notif-section-header { padding-top: 4px; }

html body .notif-panel .notif-panel-body .notif-section { display: block; margin: 0; }

html body .notif-panel .notif-panel-body .notif-section-header {
  text-align: left;
  color: #1976D2;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 6px 10px;
  margin: 0;
}

html body .notif-panel .notif-panel-body .notif-section--unread .notif-section-header { padding-top: 4px; }

/* Thin chip-blue divider above the Read section header */
html body .notif-panel .notif-panel-body .notif-section--read .notif-section-divider { display: block; height: 1px; margin: 8px 10px 4px 10px; background: rgba(33, 150, 243, 0.28); border: 0; }

/* Mobile fallback - keep the cards readable on the dark theme */



/* Mobile: totals chip below the 6 cards (single column or 2-col stack). */
/* v41.58d: bumped 720 -> 821 so this block stops leaking into 720-820px mobile */

/* ── Studio 5K / Ultra-Wide: expand dashboard beyond 980px cap ─────────
   Overrides the max-width: 980px set in @media (min-width: 720px) above.
   Does NOT remove the laptop max-width rules - only adds upper-bound
   breakpoints so 5K canvases use ≥80% of available width.
   ──────────────────── */
@media (min-width: 2560px) {
  

  .sidebar {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }

  .history-title {
    max-width: 240px;
  }

  

  .dashboard-view .kpi-grid,
  .main-content .kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

@media (min-width: 3840px) {
  
}

/* ── Toggles row (always visible, both desktop and mobile) ── */
.home-dash-toggles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
}
.home-dash-toggle {
  appearance: none;
  -webkit-appearance: none;
  /* Light-grey wash — same for period/vs/avg/reload (v42.6.35). */
  background: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--border-card-warm);
  border-radius: 999px;
  padding: 0 20px;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  user-select: none;
  overflow: visible;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
}
.home-dash-toggle:hover,
.home-dash-toggle:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.22); outline: none; }
.home-dash-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.26); }
.home-dash-toggle .home-dash-toggle-label { color: rgba(229, 231, 235, 0.7); font-weight: 500; letter-spacing: 0.01em; line-height: 1; }
.home-dash-toggle .home-dash-toggle-value { color: #F3F4F6; font-weight: 700; line-height: 1; }
.home-dash-toggle .home-dash-toggle-caret { color: rgba(229, 231, 235, 0.55); font-size: 0.7rem; margin-left: 2px; flex: 0 0 auto; line-height: 1; }
.home-dash-toggle-divider { display: inline-block; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.14); }

/* ── Toggle popover (listbox) ── */
.home-dash-toggle-pop {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: rgba(20, 22, 25, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-overlay-10);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-alpha-45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: home-dash-toggle-pop-in 120ms ease-out;
}
@keyframes home-dash-toggle-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-dash-toggle-pop-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--border-card-warm);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1;
  padding: 9px 12px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease;
}
.home-dash-toggle-pop-item:hover,
.home-dash-toggle-pop-item:focus-visible { background: var(--overlay-w-08); outline: none; }
.home-dash-toggle-pop-item.is-selected { background: rgba(99, 165, 250, 0.18); color: #DBEAFE; font-weight: 700; }

/* ── Custom date-range picker ── */
.home-dash-datepicker {
  position: fixed;
  z-index: 9999;
  width: 560px;
  max-width: calc(100vw - 16px);
  background: rgba(20, 22, 25, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-overlay-10);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow-alpha-55);
  padding: 12px 14px 12px;
  font-family: Inter, system-ui, sans-serif;
  color: var(--border-card-warm);
  animation: home-dash-toggle-pop-in 140ms ease-out;
}
.home-dash-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.home-dash-dp-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(229, 231, 235, 0.85); }
.home-dash-dp-nav {
  appearance: none;
  background: var(--border-soft);
  border: 1px solid var(--border-overlay-10);
  color: var(--border-card-warm);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.home-dash-dp-nav:hover { background: var(--border-overlay-10); }
.home-dash-dp-months { display: flex; gap: 14px; }
.home-dash-dp-month { flex: 1 1 0; min-width: 0; }
.home-dash-dp-mhead { text-align: center; font-size: 0.74rem; font-weight: 700; color: rgba(229, 231, 235, 0.85); margin-bottom: 6px; letter-spacing: 0.01em; }
.home-dash-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.home-dash-dp-dow { font-size: 0.62rem; text-align: center; color: rgba(229, 231, 235, 0.45); font-weight: 600; padding: 4px 0; letter-spacing: 0.04em; }
.home-dash-dp-day {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--border-card-warm);
  font-family: inherit;
  font-size: 0.74rem;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.home-dash-dp-day:hover { background: var(--overlay-w-08); }
.home-dash-dp-day.is-today { box-shadow: inset 0 0 0 1px rgba(99, 165, 250, 0.55); }
.home-dash-dp-day.is-in-range { background: rgba(99, 165, 250, 0.15); border-radius: 0; }
.home-dash-dp-day.is-start,
.home-dash-dp-day.is-end { background: rgba(99, 165, 250, 0.85); color: #0b0c0d; font-weight: 700; }
.home-dash-dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--overlay-w-08); }
.home-dash-dp-range { font-size: 0.74rem; color: rgba(229, 231, 235, 0.75); font-variant-numeric: tabular-nums; }
.home-dash-dp-actions { display: flex; gap: 8px; }
.home-dash-dp-btn {
  appearance: none;
  background: var(--border-soft);
  border: 1px solid var(--border-overlay-10);
  color: var(--border-card-warm);
  font-family: inherit;
  font-size: 0.74rem;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms ease;
}
.home-dash-dp-btn:hover { background: var(--border-overlay-10); }
.home-dash-dp-btn--primary { background: rgba(99, 165, 250, 0.85); color: #0b0c0d; font-weight: 700; border-color: transparent; }
.home-dash-dp-btn--primary:hover { background: rgba(99, 165, 250, 1); }
.home-dash-dp-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Hide any leftover foot-row remnants (in case a v2008ao build is cached). */

/* Read-only avg chip: same filled chrome as siblings (no opacity / inherit). */
.home-dash-toggle--display { cursor: default; user-select: none; opacity: 1; }
.home-dash-toggle--display:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
}
.home-dash-toggle--display .home-dash-toggle-caret { display: none; }

.home-dash-toggle.is-readonly { cursor: default; pointer-events: none; opacity: 0.65; }
.home-dash-toggle.is-readonly .home-dash-toggle-caret { opacity: 0.35; }

.home-dash-toggle-pop-item.is-disabled { opacity: 0.32; pointer-events: none; cursor: not-allowed; color: inherit; }
.home-dash-toggle-pop-item.is-disabled .home-dash-toggle-pop-tag { display: none; }

.home-dash-toggle-pop-tag { margin-left: 6px; font-size: 11px; opacity: 0.6; font-weight: 400; }

/* v2008be.41 - Visual divider between clickable and unclickable VS options. */
.home-dash-toggle-pop-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--border-overlay-10);
}

/* v2008be.41 - 'Current View' pill state ('as is' VS selected): hide the
   leading 'vs' label so the pill reads as 'Current View' standalone. The
   button still opens the full dropdown on click. */
.home-dash-toggle--vs.is-current-view .home-dash-toggle-label { display: none; }

/* Mobile - keep the chips visible with same ALL-CAPS / black text style. */

/* Laptop check - squeeze a little more vertically when viewport is short. */
@media (min-width: 720px) and (max-height: 900px) {
  html body .ai-view .home-dash-grid { grid-template-rows: minmax(140px, 1fr) minmax(140px, 1fr) minmax(58px, 0.4fr); }
  html body .ai-view .home-dash-grid .home-dash-week-bars--full { height: 84px; }
  html body .ai-view .home-dash-grid .home-dash-value { font-size: 1.5rem; }
  html body .ai-view .home-dash-grid .home-dash-bucket-value { font-size: 1.4rem; }
}

/* v2008az.1 - Tighten the hero CARD itself (was 178px). */

/* v2008az.2 - restore enough hero card height for greeting line. */

/* Compact mode for shorter laptop viewports (≤860px content). */
@media (min-width: 720px) and (max-height: 860px) {
  html body .ai-view .ai-hero .ai-hero-stage,
  html body .ai-view .ai-hero .ai-hero-logo,
  html body .ai-view .ai-hero .ai-hero-logo--canvas { height: 36px; min-height: 36px; max-height: 36px; }
  html body .ai-view .home-dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 116px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 116px; }
  html body .ai-view .home-dash-grid .home-dash-bucket-value { font-size: 1.3rem; }
  html body .ai-view .home-dash-grid .home-dash-value { font-size: 1.4rem; }

  html body .ai-view .ai-hero .ai-hero-logo,
  html body .ai-view .ai-hero .ai-hero-logo--canvas { height: 38px; max-height: 38px; }
  html body .ai-view .ai-hero .ai-hero-card,
  html body .ai-view.ai-home .ai-hero .ai-hero-card { padding: 10px 20px 12px; }

  html body.route-ask:not(.ai-has-messages) .ai-view { padding-top: 28px; padding-bottom: 14px; }
  
  

  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value { font-size: 1.35rem; line-height: 1; letter-spacing: -0.02em; font-family: "Cabinet Grotesk", Satoshi, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
}

/* v2008be.1 - Greeting lives inside .ai-hero-stage (not .ai-hero-card).
   Fix only the LOGO height; let the stage auto-size to include the greeting. */

/* Laptop short - even tighter. */

/* Laptop short - keep slightly smaller but matching family/tracking. */

/* View container + grid */



/* Toolbar (header bar above cards) */

html body .automations-view .automations-sub {
  color: #B8B8B8;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border: 0;
  padding: 0;
}

/* + New automation button */
html body .automations-view .btn-primary.btn-primary--sm {
  background: #2196F3;
  border: 1px solid #2196F3;
  color: #FFF;
  border-radius: 8px;
  height: 32px;
  padding: 0 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
html body .automations-view .btn-primary.btn-primary--sm:hover {
  background: #1976D2;
  border-color: #1976D2;
  color: #FFF;
}

/* Kill background on every descendant pill/wrap so they don't bleed boxes */


/* Card surface - locked palette */
html body .automations-view .automation-card.automation-card,
html body .automations-view div.automation-card {
  background: #1F2121;
  background-color: #1F2121;
  background-image: none;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.9rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 120ms ease;
}
html body .automations-view .automation-card.automation-card:hover,
html body .automations-view div.automation-card:hover {
  border-color: #3A3A3A;
  box-shadow: none;
  transform: none;
}

/* Card head row */


/* Status dot */

html body .automations-view .automation-card .auto-status.on {
  background: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18);
}
html body .automations-view .automation-card .auto-status.off {
  background: #8A8A8A;
  box-shadow: none;
}

/* Title wrap */


/* Title text */
html body .automations-view .automation-card-title {
  color: #E5E5E5;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status sub-line */
html body .automations-view .automation-card-status,
html body .automations-view .automation-card-status * {
  color: #8A8A8A;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* Description */


/* Footer: divider + metric + actions */


/* Metric ("12 runs") */

html body .automations-view .automation-card-metric strong {
  color: #E5E5E5;
  font-weight: 700;
  margin-right: 0.2rem;
}

/* Action button row */


/* Ghost / generic action buttons on the card */
html body .automations-view .automation-card .btn-ghost,
html body .automations-view .automation-card .btn-ghost--sm,
html body .automations-view .automation-card-actions button {
  height: 26px;
  padding: 0 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  box-shadow: none;
}
html body .automations-view .automation-card .btn-ghost:hover,
html body .automations-view .automation-card .btn-ghost--sm:hover,
html body .automations-view .automation-card-actions button:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #3A3A3A;
}

/* The card footer "Run now" remains primary blue */
html body .automations-view .automation-card-actions .btn-primary,
html body .automations-view .automation-card-actions .btn-primary--sm {
  background: #2196F3;
  border-color: #2196F3;
  color: #FFF;
}
html body .automations-view .automation-card-actions .btn-primary:hover,
html body .automations-view .automation-card-actions .btn-primary--sm:hover {
  background: #1976D2;
  border-color: #1976D2;
}

/* Toggle switch (paused/active) */

html body .automations-view .automation-card .toggle-switch.toggle-switch--inline .toggle-track {
  background: #2A2A2A;
  border-radius: 999px;
}




/* "Live" badge next to title */


/* iMessage live stats panel */

html body .automations-view .automation-card-stats .text-muted { color: #8A8A8A; }
html body .automations-view .automation-card-stats .automation-stat strong {
  color: #E5E5E5;
  font-weight: 700;
}

/* Skeleton loader */


/* Empty state */


/* v2008be.23-floatingchat - Match floating chat widget to AI page (#/ask).
   Surgical, additive overrides scoped to .floating-chat / .floating-chat-panel
   / .floating-chat-toggle / .floating-chat-header / .floating-chat-messages /
   .floating-chat-composer. Does NOT touch AI page main view, Overview,
   Automations, topbar, sidebar. AI page tokens used:
  surface  : #1F2121
  border   : rgba(234, 235, 236, 0.08)
  ink  : #EAEBEC
  muted  : #8F8E8C
  send  : #D6D5D4 (ink #1E1D1C)
   Locked rules respected: neutral monochrome, rare blue accent, Satoshi
   typography, panel border-radius 12px (composer keeps AI page 18px). */

/* Panel container - match AI page surface, drop blue tint on border. */
html body .floating-chat .floating-chat-panel,
html body .floating-chat.open .floating-chat-panel {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  border: 1px solid rgba(234, 235, 236, 0.08) !important;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--fg-primary-warm, #EAEBEC) !important;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, "Segoe UI",
               sans-serif !important;
  overflow: hidden;
}

/* Header - quiet, no gradient, match AI page tone. */
html body .floating-chat .floating-chat-header { background: transparent; border-bottom: 1px solid rgba(234, 235, 236, 0.08); padding: 0.85rem 1rem; }
html body .floating-chat .floating-chat-header .panel-title { color: #EAEBEC; font-family: 'Satoshi', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
html body .floating-chat .floating-chat-header .btn-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(234, 235, 236, 0.1);
  color: #B5B7BE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .floating-chat .floating-chat-header .btn-close:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(234, 235, 236, 0.2); color: #EAEBEC; }

/* Messages area - match panel surface, fix empty placeholder typography. */
html body .floating-chat .floating-chat-messages { background: transparent; padding: 1rem; color: #EAEBEC; font-family: 'Satoshi', 'Inter', system-ui, sans-serif; font-size: 0.875rem; line-height: 1.5; }
html body .floating-chat .floating-chat-messages:empty::before {
  content: 'Ask anything…';
  color: #8F8E8C;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  display: block;
  padding-top: 0.25rem;
}

/* Message bubbles - same as AI page bubbles. */
html body .floating-chat .floating-chat-messages .msg-bubble {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(234, 235, 236, 0.08);
  color: #EAEBEC;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}
html body .floating-chat .floating-chat-messages .msg-bubble[data-role="user"] { background: rgba(234, 235, 236, 0.06); }

/* Composer - mirror AI page rich-composer styling. */
html body .floating-chat .floating-chat-composer,
html body .floating-chat .floating-chat-composer.glass-composer,
html body div.floating-chat-composer.glass-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121));
  background-image: none;
  border: 1px solid rgba(234, 235, 236, 0.08);
  border-radius: 18px;
  margin: 0.75rem 1rem 1rem;
  padding: 0.4rem 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              0 8px 24px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 0.4rem;
}
html body .floating-chat .floating-chat-composer:focus-within { border-color: rgba(234, 235, 236, 0.16); }

/* Composer textarea - flat, transparent, AI page typography. */
html body .floating-chat .floating-chat-composer .chat-textarea,
html body .floating-chat .floating-chat-composer textarea#floating-chat-input {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--fg-primary-warm, #EAEBEC);
  caret-color: var(--fg-primary-warm, #EAEBEC);
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 0.4rem 0.5rem;
  min-height: 34px;
}
html body .floating-chat .floating-chat-composer .chat-textarea::placeholder,
html body .floating-chat .floating-chat-composer textarea#floating-chat-input::placeholder { color: #8F8E8C; }
html body .floating-chat .floating-chat-composer .chat-textarea:focus,
html body .floating-chat .floating-chat-composer textarea#floating-chat-input:focus { outline: none; border: 0; box-shadow: none; background: transparent; }

/* Composer chips - match AI page rc-chip. */
html body .floating-chat .floating-chat-composer .composer-chip,
html body .floating-chat .floating-chat-composer .composer-chip-plus {
  height: 28px !important;
  border-radius: 999px;
  border: 1px solid rgba(234, 235, 236, 0.12) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #D5D4D4 !important;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 500;
  padding: 0 0.7rem;
  letter-spacing: 0;
}
html body .floating-chat .floating-chat-composer .composer-chip-plus { width: 28px; padding: 0; font-size: 15px; }
html body .floating-chat .floating-chat-composer .composer-chip:hover,
html body .floating-chat .floating-chat-composer .composer-chip-plus:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(234, 235, 236, 0.18); }

/* Mic + send - AI page sizing & treatment. */
html body .floating-chat .floating-chat-composer .composer-mic,
html body .floating-chat .floating-chat-composer .composer-actions .composer-mic { width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(234, 235, 236, 0.12); color: #B5B7BE; }
html body .floating-chat .floating-chat-composer .composer-mic:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(234, 235, 236, 0.2); color: var(--fg-primary-warm, #EAEBEC); }
html body .floating-chat .floating-chat-composer .composer-send,
html body .floating-chat .floating-chat-composer .composer-actions .composer-send {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #D6D5D4;
  border: 0;
  color: #1E1D1C;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html body .floating-chat .floating-chat-composer .composer-send:hover { background: #EAEBEC; color: #1E1D1C; transform: translateY(-1px); }
html body .floating-chat .floating-chat-composer .composer-send svg,
html body .floating-chat .floating-chat-composer .composer-mic svg { width: 14px; height: 14px; display: block; }

/* Toggle button - neutral surface w/ rare blue dot status, AI page typography. */
html body .floating-chat .floating-chat-toggle,
html body button.floating-chat-toggle,
html body .floating-chat.open .floating-chat-toggle {
  background: #1F2121;
  border: 1px solid rgba(234, 235, 236, 0.1);
  color: #EAEBEC;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  height: 36px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .floating-chat .floating-chat-toggle:hover,
html body button.floating-chat-toggle:hover { background: #262828; border-color: rgba(234, 235, 236, 0.18); color: #EAEBEC; filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .floating-chat .floating-chat-toggle::before,
html body button.floating-chat-toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
  border-radius: 50%;
  display: inline-block;
}
html body .floating-chat .floating-chat-toggle .fc-icon,
html body button.floating-chat-toggle .fc-icon,
html body .floating-chat .floating-chat-toggle svg,
html body button.floating-chat-toggle svg { color: #EAEBEC; stroke: #EAEBEC; }

/* Mobile: keep panel framing consistent. */

/* v2008be.23-settings - Settings page polish: unify Satoshi font, neutralize discount chip, tighten spacing */

/* 1) Unify fonts across the entire Settings view to a single Satoshi stack */
.settings-view,
.settings-view *,
.settings-view h1, .settings-view h2, .settings-view h3, .settings-view h4,
.settings-view p, .settings-view span, .settings-view div,
.settings-view button, .settings-view a, .settings-view label,
.settings-view input, .settings-view select, .settings-view textarea { font-family: 'Satoshi', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; }

.settings-view h2, .settings-view .settings-block-head h2 {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(214, 216, 222, 0.82);
  margin: 0;
}
.settings-view .srl-title,
.settings-view .srl-title--sub { font-size: 0.85rem; font-weight: 600; color: rgba(232, 231, 229, 0.92); letter-spacing: 0; }
.settings-view .srl-value { font-size: 0.82rem !important; color: rgba(197, 197, 196, 0.78) !important; }
.settings-view .settings-row-muted { font-size: 0.78rem; color: rgba(197, 197, 196, 0.62); }




/* 3) Discount chip - replace blue gradient panel with quiet neutral graphite,
  matching the AI page chatbox surface (#1F2121 with #EAEBEC text). */





.settings-view .settings-promo-btn:hover,
.settings-view.settings-view--compact .settings-promo-btn:hover { background: var(--border-overlay-10); border-color: rgba(255, 255, 255, 0.22); }

/* 4) Subscription tier chip - neutralize from any blue tint, match graphite. */










/* v2008be.23-dashdivisions - P2b Dashboards/Divisions swap.
   Goal:
  • /#/reports renders the division-tile grid (was /#/divisions content).
  • /#/divisions/<id> renders a dense pack of dashboards (12-16 cards) that
  fill 1440x900. Visual style mirrors the AI page tokens: white frosted
  cards (rgba(255,255,255,0.92)), Satoshi/Inter, neutral monochrome,
  single rare blue accent (#1976D2). Hand-built inline SVG only.
   Cards are square-ish, radius 12px, ALL CAPS singular titles.
*/

/* Frosted division tiles (used by both /#/reports and /#/divisions root) */
html body .gl-divisions-view { padding: 1.25rem 1.5rem 3rem; max-width: 1320px; margin: 0 auto; }

html body .gl-divisions-title { font-family: 'Satoshi','Inter',system-ui,sans-serif; font-weight: 700; font-size: 1.65rem; letter-spacing: -0.01em; color: #E8E7E5; margin: 0 0 .35rem; }
html body .gl-divisions-sub { font-family: 'Satoshi','Inter',system-ui,sans-serif; font-size: .9rem; color: #B5B7BE; margin: 0; max-width: 60ch; }
html body .gl-divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
  max-width: 1320px !important;
  margin: 0;
  padding: 0;
  flex: unset;
}

html body .gl-division-card:hover { transform: translateY(-2px); border-color: rgba(25,118,210,0.38); box-shadow: 0 8px 24px -14px rgba(25,118,210,0.45); }
html body .gl-division-card .gdc-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(25,118,210,0.10); color: #1976D2; }
html body .gl-division-card .gdc-title { font-weight: 700; font-size: .95rem; letter-spacing: 0.06em; text-transform: uppercase; color: #191A1A; }
html body .gl-division-card .gdc-cta { margin-top: auto; font-size: .78rem; font-weight: 600; color: #1976D2; letter-spacing: 0.02em; }

/* /#/reports rendered as Divisions: drop the legacy "reports-division" header
   and any leftover dark-card pattern that came from fetchAndRenderReports. */


/* ── Division detail page (packed dashboards) ──────────────────── */
html body .gl-dash-pack-view { padding: 1rem 1.25rem 2.5rem !important; max-width: 1320px; margin: 0 auto; font-family: 'Satoshi','Inter',system-ui,sans-serif; }
html body .gl-dash-pack-head { display: flex; align-items: center; gap: .9rem; margin: 0 0 .85rem; }
html body .gl-dash-pack-back { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #B5B7BE; text-decoration: none; padding: .35rem .6rem; border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; background: rgba(255,255,255,0.02); transition: border-color 140ms ease, color 140ms ease; }
html body .gl-dash-pack-back:hover { border-color: rgba(25,118,210,0.45); color: #E8E7E5; }
html body .gl-dash-pack-title,
html body .gl-dash-pack-sub { display: none; }

/* The pack grid: target ~12-16 tiles filling 1440x900 viewport. */
html body .gl-dash-pack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); gap: 12px; width: 100%; }

/* v41.58h: misc block L7817-L7819 moved to mobile-v2.css */

/* ── Studio 5K / wide-display scaling (≥ 2560px) ──────────────────── */
@media (min-width: 2560px) {
  html body .gl-divisions-view {
    max-width: min(90vw, 2400px);
    margin: 0 auto;
  }
  html body .gl-divisions-grid {
    max-width: none;
    grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 18vw, 420px), 1fr)) !important;
    gap: clamp(14px, 1vw, 24px) !important;
  }
  html body .gl-dash-pack-view {
    max-width: min(90vw, 3200px) !important;
    margin: 0 auto;
  }
  html body .gl-dash-pack {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
  
}

html body .gl-dash-tile {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  padding: .85rem .9rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-decoration: none;
  color: #191A1A;
  font-family: 'Satoshi','Inter',system-ui,sans-serif;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  min-height: 160px;
}
html body .gl-dash-tile:hover { transform: translateY(-2px); border-color: rgba(25,118,210,0.38); box-shadow: 0 8px 24px -14px rgba(25,118,210,0.45); }
html body .gl-dash-tile .gdt-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(25,26,26,0.55); }
html body .gl-dash-tile .gdt-title { font-size: .82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #191A1A; line-height: 1.15; }
html body .gl-dash-tile .gdt-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.025em; color: #191A1A; line-height: 1.05; margin: .1rem 0 0; }
html body .gl-dash-tile .gdt-delta { font-size: .72rem; font-weight: 600; color: #1976D2; letter-spacing: 0.01em; }
html body .gl-dash-tile .gdt-delta--down { color: #B23A48; }
html body .gl-dash-tile .gdt-foot { margin-top: auto; font-size: .68rem; color: rgba(25,26,26,0.55); letter-spacing: 0.02em; }
html body .gl-dash-tile .gdt-chart { width: 100%; height: 44px; display: block; }
html body .gl-dash-tile .gdt-chart rect { fill: #1976D2; }
html body .gl-dash-tile .gdt-chart polyline { stroke: #1976D2; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body .gl-dash-tile .gdt-chart circle.gdt-donut-bg { stroke: rgba(25,26,26,0.10); }
html body .gl-dash-tile .gdt-chart circle.gdt-donut-fg { stroke: #1976D2; }
html body .gl-dash-tile .gdt-chart .gdt-axis { stroke: rgba(25,26,26,0.10); stroke-width: 1; }

/* Override darker dashboard-page rules that try to repaint these tiles. */
html body[data-route^="/divisions/"] .main .card,
html body[data-route^="/divisions/"] .gl-dash-tile,
html body[data-route="/reports"] .gl-division-card,
html body[data-route="/divisions"] .gl-division-card { background: rgba(255,255,255,0.92); border-color: rgba(15,23,42,0.08); border-radius: 12px; color: #191A1A; }

/* v2008be.25-no-suggestions - Branson directive: no query suggestion chips in chat composer */
/* Hides any suggestion chip containers if present or added in future builds. */
[class*="suggestion-chip"], [class*="querySuggestion"], [class*="query-suggestion"], [data-role="suggestion"], [data-type="suggestion-chip"] { display: none; visibility: hidden; pointer-events: none; }

/* v2008be.24-kpis - P3 KPI Dashboards
   Adds period switcher (TODAY/WTD/MTD/YTD), red-flag glyph, unit suffix,
   and skeleton state to the existing .gl-dash-tile system from v23.
   Hand-built inline SVG remains the only chart type. Accent #1976D2 only.
   Keep selectors high-specificity (html body) to win the cascade.
*/

/* Period switcher pills */
html body .gl-dash-pack-head .gl-dash-pack-period {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  padding: 3px;
  border-radius: 10px;
  background: rgba(25, 26, 26, 0.04);
  border: 1px solid rgba(25, 26, 26, 0.08);
}
html body .gl-dash-pack-head .gl-dash-pack-period .gdpp {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 11px;
  font: 600 11px/1 'Satoshi', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(25, 26, 26, 0.62);
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
html body .gl-dash-pack-head .gl-dash-pack-period .gdpp:hover { color: rgba(25, 26, 26, 0.92); background: rgba(25, 118, 210, 0.06); }
html body .gl-dash-pack-head .gl-dash-pack-period .gdpp.is-active { background: #1976D2; color: #FAFAFA; box-shadow: 0 1px 2px rgba(25, 118, 210, 0.25); }

/* Canon tile tweaks - sit on top of .gl-dash-tile from v23 */
html body .gl-dash-tile.gdt-canon { position: relative; }

/* Unit suffix next to big number */
html body .gl-dash-tile .gdt-value .gdt-unit { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: rgba(25, 26, 26, 0.55); margin-left: 4px; text-transform: lowercase; }

/* Red-flag chevron next to title */
html body .gl-dash-tile .gdt-title .gdt-flag { display: inline-block; margin-left: 6px; font-size: 11px; color: #B23A48; vertical-align: 1px; line-height: 1; }
html body .gl-dash-tile.gdt-redflag { box-shadow: 0 1px 2px rgba(178, 58, 72, 0.10), 0 0 0 1px rgba(178, 58, 72, 0.18) inset; }
html body .gl-dash-tile.gdt-redflag .gdt-value { color: #8E2A36; }

/* Skeleton state - quietly render shape so layout never jumps */
html body .gl-dash-tile.gdt-skeleton { pointer-events: none; opacity: 0.55; }
html body .gl-dash-tile.gdt-skeleton .gdt-title,
html body .gl-dash-tile.gdt-skeleton .gdt-value { color: rgba(25, 26, 26, 0.32); }
html body .gl-dash-tile.gdt-skeleton .gdt-chart rect,
html body .gl-dash-tile.gdt-skeleton .gdt-chart polyline,
html body .gl-dash-tile.gdt-skeleton .gdt-chart circle.gdt-donut-fg { opacity: 0.18; }

/* Make sure period switcher sits on the same row as the title */
html body .gl-dash-pack-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
html body .gl-dash-pack-back { white-space: nowrap; }
html body .gl-dash-pack-title { margin-right: auto; }

.recent-actions-wrap .activity-item { padding: 6px 0; }
.recent-actions-wrap .activity-title { font-size: 0.86rem; color: var(--bg-card); }
.recent-actions-wrap .activity-meta { font-size: 0.72rem; color: var(--fg-faint-google); }
.scheduler-jobs-card { padding: 14px 16px; border: 1px solid var(--overlay-k-06); }
.scheduler-jobs-card .activity-title { font-size: 0.88rem; color: var(--bg-card); }
.scheduler-jobs-card .activity-meta { font-size: 0.74rem; color: var(--fg-faint-google); }
.scheduler-jobs-card .text-muted { color: var(--fg-faint-google); }

/* ────────────────────
   v2008be.27 - Studio Display KPI grid sizing fix (revised)
   Problem on Studio (1700+ × 1300+):
  1. KPI cards balloon vertically because grid rows use 1fr
  2. Big gap between composer and the cards (.ai-view uses
  justify-content: center on a tall flex column, pushing children apart)
   Fix:
  • Clamp grid rows to a fixed pixel size (no 1fr stretching)
  • Clamp each card max-height
  • Tighten .ai-view vertical layout so welcome→composer→grid stack
  compactly at top; remove vertical centering on tall screens
   ──────────────────── */
@media (min-width: 720px) {

  /* EQUAL CORNER RULE: bottom row height == right column width == 140px.
  Grid is 4 columns (3 KPI + 1 totals) × 3 rows (2 KPI + 1 totals).
  Pin the totals column to 140px, totals row to 140px - the bottom-right
  corner cell is therefore a perfect 140×140 square. KPI rows stay 200px
  so cards don't balloon. */
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 140px;
    grid-template-rows: 200px 200px 140px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Clamp each KPI card. */
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .home-dash-grid .home-dash-card {
    min-height: 0;
    max-height: 200px !important;
    height: 100%;
    padding: 0.85rem 1rem 0.8rem;
  }

  /* Totals chips (right column + bottom row): match the 140px pin. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .home-dash-grid .home-dash-bucket-chip {
    min-height: 0;
    max-height: 200px !important;
    height: 100%;
  }

  /* Bar chart area cap. */
  html body .ai-view .home-dash-card .home-dash-week-bars--full,

  /* The .ai-view (route-ask main column) defaults to centering on tall
  screens, leaving big composer↔grid gap. Pin to top + tight gap. */
  html body.route-ask .ai-view,

  /* Composer should not stretch and create extra space below itself. */
  html body.route-ask .ai-view .ai-composer-wrap,
  html body .ai-view .ai-composer-wrap {
    margin-bottom: 0;
  }

  /* Welcome chip → composer gap stays modest. */
  html body.route-ask .ai-view .ai-hero,
  html body .ai-view .ai-hero {
    margin-bottom: 0;
  }
}

/* On extra-tall viewports keep things tighter - maintain equal corner. */

/* ────────────────────
   v2008be.28 - Today hourly bars + (as is) hide + totals delta colors
   Goals:
  1. Restore green/red color on the totals "ticker" percentage line
  (an earlier hard-override around line 7330-7339 painted everything
  black; this block beats it by appending later).
  2. Hide the totals ticker entirely on the (as is) trio
  (period=Today / WTD as is / MTD as is) - JS adds .is-hidden-asis.
  3. Tighten bar count-label size now that Today renders 14 hourly bars
  instead of 8 two-hour buckets, so labels don't collide.
   ──────────────────── */

/* (1) Re-color totals ticker percentage line. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-up {
  color: #2E7D32;  /* up-token */
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-down {
  color: #C62828;  /* down-token */
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-flat {
  color: rgba(60,64,67,0.85);
}

/* Big totals number color reflects direction - tint green if up, red if down. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value {
  color: #2E7D32;
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value {
  color: #C62828;
}

/* Subtle border tint to match. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up {
  border-color: rgba(22, 163, 74, 0.30);
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down {
  border-color: rgba(220, 38, 38, 0.30);
}

/* (2) Hide the ticker line entirely on (as is) selections. */
html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-hidden-asis {
  display: none;
}

/* ────────────────────
   v2008be.29 - Two-track sizing: laptop default + Studio Display tuned
   Issue: v2008be.27 set rows to 200/200/140 which fits Studio but pushes
   the bottom totals row off-screen on a 1364×848 laptop. Also Studio still
   shows dead space below the cards - we want composer + cards to hug the
   bottom on Studio.
   Strategy:
  • Laptop default (≤1099px tall): rows 170/170/120, equal corner = 120px,
  cards/chips clamp to 170px. All 3 rows fit above the fold.
  • Studio Display (≥1100px tall): rows 200/200/140, equal corner = 140px,
  AND switch .ai-view from flex-start to flex-end so welcome chip stays
  up top, composer+grid hug the bottom (tight gap, no extra dead space).
   ──────────────────── */

/* Laptop default - beats v2008be.27 by virtue of being later in the file.
   Equal corner = 110px. All 3 rows fit on an ~800px-tall viewport. */
@media (min-width: 720px) {
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 110px;
    grid-template-rows: 160px 160px 110px;
    max-width: 1100px;
    gap: 10px;
  }
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-card .home-dash-week-bars--full,
  /* Laptop: tighter top padding + smaller gap so 3 rows fit. */
  html body.route-ask .ai-view,
  html body .ai-view {
    justify-content: flex-start !important;
    padding-top: 16px !important;
    gap: 10px !important;
  }
}

/* Studio Display - taller viewport. Restore 200/200/140 + 140px equal corner,
   AND let the layout hug the bottom (welcome top, composer+grid bottom). */
@media (min-height: 1100px) {
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 140px !important;
    grid-template-rows: 200px 200px 140px !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .home-dash-grid .home-dash-bucket-chip {
    max-height: 200px !important;
  }
  html body .ai-view .home-dash-card .home-dash-week-bars--full,

  /* Studio-only: hug the bottom. Welcome chip floats at the top; composer
  and grid stick to the bottom by spacing the composer with margin-top:
  auto (the flex spacer trick on a column flex container).
  Specificity (0,3,3) matches line 7428 rule so this wins by order.  */
  html body.route-ask:not(.ai-has-messages) .ai-view {
    justify-content: flex-start !important;
    padding-top: 32px !important;
    padding-bottom: 24px !important;
    gap: 14px !important;
  }
  /* Hug-the-bottom strategy: hero gets margin-bottom: auto to consume all
  spare flex space, pushing composer + launcher (grid+toggles) to the
  bottom edge of .ai-view. Specificity bumped with .ai-view.ai-home and
  :not(.ai-has-messages) to beat earlier (0,5,3) rules. */
  
  
  

  
}

/* (2) Totals - big number stays black, top-align text, much larger value.
   Applies to BOTH the right-column chip (TOTAL OFFICE / TOTAL D2D / GRAND
   TOTAL) and the bottom-row chips (TOTAL PEST / TOTAL WEED / TOTAL TERMITE
   / GRAND TOTAL).
   Beats earlier .is-up/.is-down value tinting at lines 7165-7167. */
@media (min-width: 720px) {
  /* Force the value to stay black regardless of direction. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value {
    color: #191A1A;
  }
  /* Top-align all text so the eyebrow lines up with the data-card eyebrows
  to the left, and progressively cascade down (eyebrow → value → unit →
  ticker) - same vertical reading order as the bar-chart cards. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 0.7rem !important;     /* matches data-card padding-top of 0.7rem */
  }
  /* Make the big number actually big - clear hierarchy. Bottom row gets the
  largest treatment since the cells are wider. Specificity bumped to (0,6,3)
  using :not() to beat earlier 1.1rem rule that also uses :not(). */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value {
    font-size: 2.2rem !important;
    margin-top: 0.35rem !important;
  }
  /* Right column is narrower - slightly smaller number to fit. Use :not() on
  a different class to bump specificity above earlier rules. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 1.9rem !important;
    margin-top: 0.35rem !important;
  }
  /* Modest spacing between value and the meta lines below. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit {
    margin-top: 0.25rem !important;
  }
}

/* (3) Laptop - v2008be.46: grow cards/bars/chips to use the 30-40px slack
   that was sitting between the grid and the toggle bar. Day labels and bar
   counts are also bumped via SVG font-size in renderBars(). Two viewport
   tiers so that 1364x848 / 1280x800 don't overflow:
  * tall laptop  (>=880px high) → 174 / 174 / 116, bars 82
  * short laptop (<880px high)  → 158 / 158 / 108, bars 70 (modest grow over v45) */
@media (min-width: 720px) and (min-height: 880px) and (max-height: 1099px) {
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 148px;
    grid-template-rows: 196px 196px 156px;
    gap: 10px;
  }
  html body .ai-view .home-dash-grid .home-dash-card,
  /* Bottom-row chips clamp to 156; right-column chips (office/d2d) stretch to 196. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right),
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="d2d"],
  html body .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="all"],
  html body .ai-view .home-dash-card .home-dash-week-bars--full,
  html body.route-ask .ai-view,
  /* Slightly smaller value on laptop right-column to fit the 116px wide chip. */
  /* Bottom row laptop - keep big but not absurd in the 116px height. */
}

/* Pull the period-toggle bar all the way to the bottom of the available area on
   laptop viewports. Two parts:
   1. Reduce the ai-view's top padding (3.5rem default is too much on <=900h)
  and bottom padding so launcher has more vertical room.
   2. justify-content: space-between on home-launcher pushes toggle to the
  bottom and lets grid stay anchored at top - slack lives between them. */
@media (min-width: 720px) and (max-height: 1099px) {
  
  html body .ai-view .home-launcher,
  html body .ai-view #home-launcher.home-launcher {
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0;
    margin-bottom: 0;
  }
  /* Grid hugs the composer up top; toggle hugs the bottom of the launcher.
  No dead space anywhere. */
  html body .ai-view .home-launcher .home-dash-grid,
  html body .ai-view #home-launcher.home-launcher .home-dash-grid {
    margin-top: 0;
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    max-height: none;
  }
  html body .ai-view .home-launcher .home-dash-toggles,
  html body .ai-view #home-launcher.home-launcher .home-dash-toggles {
    margin-top: auto;
    margin-bottom: 0;
  }
  /* Tighten composer-to-grid distance: reduce ai-view gap and any margin on
  home-launcher so the dashboard sits right under the composer. */
  
  html body .ai-view .home-launcher,
  html body .ai-view #home-launcher.home-launcher {
    margin-top: 0;
    padding-top: 0;
  }
}

/* Short-laptop tier (e.g. 1364x848, 1280x800): keep modest grow over v45 baseline
   so grid + toggle fit inside the available vertical room. */
@media (min-width: 720px) and (min-height: 820px) and (max-height: 879px) {
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 138px;
    grid-template-rows: 178px 178px 144px;
    gap: 9px;
  }
  html body .ai-view .home-dash-grid .home-dash-card,
  /* Bottom-row chips clamp to 144; right-column chips (office/d2d) stretch to 178. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right),
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="d2d"],
  html body .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="all"],
  html body .ai-view .home-dash-card .home-dash-week-bars--full,
}

/* Tiny-laptop tier (vh < 820, e.g. MBP14 with toolbar = ~800): shrink further so
   the bottom totals row + toggle bar both fit without clipping. */
@media (min-width: 720px) and (max-height: 819px) {
  html body .ai-view .home-dash-grid,
  html body .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 128px;
    grid-template-rows: 162px 162px 130px;
    gap: 8px;
  }
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .home-dash-grid .home-dash-card {
    max-height: 162px !important;
    padding: 0.55rem 0.85rem 0.5rem;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right),
  html body .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) {
    max-height: 130px;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="d2d"],
  html body .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"],
  html body .home-dash-grid .home-dash-bucket-chip--right[data-bucket="d2d"] {
    max-height: 162px;
    height: 162px;
    align-self: stretch;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="all"],
  html body .home-dash-grid .home-dash-bucket-chip--right[data-bucket="all"] {
    max-height: 130px;
  }
  html body .ai-view .home-dash-card .home-dash-week-bars--full,
  html body .home-dash-card .home-dash-week-bars--full {
    height: 76px !important;
    max-height: 76px !important;
  }
  html body.route-ask .ai-view,
  html body .ai-view {
    padding-top: 8px !important;
    gap: 5px !important;
  }
}

/* ────────────────────
   v2008be.31 - Right-column totals match bottom-row totals.
   Diagnosis: right column values were 28.5px / left:11px while bottom row
   was 33px / left:13px. Eyebrows misaligned 2px horizontally too.
   Fix: bump right-column value to match bottom row (and a touch bigger
   on Studio since right-col chips have 200px height vs bottom row's 140px).
   Also align horizontal padding so eyebrows share the same x axis as
   bottom-row eyebrows.
   ──────────────────── */
@media (min-width: 720px) {
  /* Match horizontal padding across all totals chips so eyebrows + values
  share the same left x-axis. Bottom row uses 13px left padding (0.85rem
  from the data-card baseline). Right column was at 11px (8px from chip
  padding + 3px from eyebrow). Lock both to 0.85rem 0.85rem 0.55rem
  so eyebrow x-axis matches bottom row exactly. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  /* Right-column big number: was 1.9rem (28.5px). Bottom row is 2.2rem
  (33px). Make right column EVEN larger than bottom row since the cells
  are 200px tall (rows 1+2) - more breathing room. The 140px-wide cells
  can accommodate 3-digit values up to ~2.6rem before the value risks
  touching the right edge. Set to 2.4rem on Studio. Tabular nums keep
  digit widths consistent. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 2.4rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
  }
  /* Bottom row stays at 2.2rem to match. Both columns now share same family,
  same weight (700), same letter-spacing, and tabular numerics. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value {
    font-size: 2.2rem !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
  }
  /* Grand-total cell (row 3 of right column) is only 140px tall - the
  same height as the bottom row. Match the bottom-row size exactly
  there so 4-digit values don't risk wrap. */
}
/* Laptop override - same proportional bump for the tighter layout. */
@media (min-width: 720px) and (max-height: 1099px) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 1.85rem;  /* up from 1.5rem; 152px tall cells */
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value {
    font-size: 1.85rem !important;  /* up from 1.65rem */
  }
}

/* ────────────────────
   v2008be.32 - ONE size for all totals on each viewport.
   Diagnosis after measuring live:
  Studio  - TOTAL OFFICE/D2D were 36px while everyone else was 33px.
  Laptop  - GRAND TOTAL was 25.5px while everyone else was 27.75px.
   Fix: lock every totals chip to ONE font-size per viewport. Use the bottom-
   row size (which Branson already approved) as the canonical size.
   ──────────────────── */
@media (min-width: 720px) {
  /* STUDIO/desktop - lock everything to 2.2rem (= 33px) regardless of
  right-column vs bottom-row, regardless of [data-bucket="all"]. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right[data-bucket="all"]:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 2.2rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
  }
}

/* ────────────────────
   v2008be.33 - Totals chip eyebrow inherits the data-card title row.
   Data-card title row ("OFFICE SALES · PEST") at Studio is:
  • font-size 11.7px (0.78rem)
  • font-weight 700 (eyebrow) / 800 (title)
  • letter-spacing 0.936px ; uppercase
  • sits 16.6px from card top (in a row that begins at 11.5px from top)
   The totals eyebrow was 9px and sat at 11.5px - visibly smaller and on a
   different baseline. Match the data-card numbers exactly.
   Push the value top down accordingly so the big number doesn't crowd the
   eyebrow.
   ──────────────────── */
@media (min-width: 720px) {
  /* Eyebrow on every totals chip = exactly the same as data-card title. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-eyebrow {
    font-size: 0.78rem;        /* = 11.7px */
    font-weight: 700;
    letter-spacing: 0.936px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1;
  }
  /* Match the y-axis: data-card title is on a row whose contents sit at
  ~16.6px from the card top. The chip's eyebrow is the only thing in its
  header row, so we use padding-top instead. Chips already have 0.7rem top
  padding. To get from 11.5 → 16.6 we need +5px. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  /* Now push the big value down so it doesn't visually crowd the larger
  eyebrow. Was 28.8px; with the +5 padding shift it would be 33.8 - add
  a bit of margin so the value sits at ~38px. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value {
    margin-top: 0.25rem !important;
  }
}
@media (min-width: 720px) and (max-height: 1099px) {
  /* Laptop: scale eyebrow proportionally. Data-card title at laptop is
  ~10.4px (computed from .home-dash-eyebrow at viewport-driven scale).
  Use 0.7rem = 10.5px to match. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-eyebrow {
    font-size: 0.7rem;         /* = 10.5px */
    letter-spacing: 0.84px;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
    padding-top: 0.85rem !important;
  }
}

/* ────────────────────
   v2008be.34 - Center the whole totals group both axes; size up the number.
   Before: chips were flex-start/flex-start so the eyebrow+number+unit+ticker
   crammed top-left and the bottom half was dead. After: center both axes so
   the four-line stack reads as a single centered group. Then bump the
   headline number now that there's no top-anchor crowding.
   ──────────────────── */
@media (min-width: 720px) {
  /* Center entire group both axes on every totals chip. Override v32/v33
  padding-top and value margin-top so nothing nudges off-center. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.85rem;          /* even all sides */
    gap: 0;
  }
  /* Eyebrow keeps the 11.7px / 700 / 0.936px tracking from v33. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-eyebrow {
    margin: 0 0 0.4rem 0;
    line-height: 1;
  }
  /* The big number - all chips uniform, larger than v32 since we have room.
  v32 used a 5-selector chain at high specificity - match it so we win
  the cascade. 2.6rem = 39px on Studio. 3-digit values (e.g. 197/264/461)
  fit easily in 140px-wide chips with 13px padding each side. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right[data-bucket="all"]:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 2.6rem !important;
    line-height: 1;
    margin: 0;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    letter-spacing: -0.02em;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-unit {
    margin: 0.45rem 0 0.2rem 0;
    line-height: 1;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-ticker {
    margin: 0;
    line-height: 1;
  }
}
@media (min-width: 720px) and (max-height: 1099px) {
  /* Laptop: 104px-wide chips on the right column. At 700/tabular each digit
  ~0.62 of the font size, so a 3-digit "461" at 2.0rem (30px) is ~56px,
  fits in 104 - 26 padding = 78px usable. Use 2.0rem to play safe. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right:not(.home-dash-bucket-chip-x) .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.home-dash-bucket-chip--right[data-bucket="all"]:not(.home-dash-bucket-chip-x) .home-dash-bucket-value {
    font-size: 2.0rem;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-eyebrow {
    margin-bottom: 0.3rem !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-unit {
    margin-top: 0.3rem !important;
  }
}

/* ────────────────────
   v2008be.35 - Two changes:
   (A) Totals chips revert to left-aligned + top-anchored (kill v34 center).
  Keep the bigger eyebrow + value sizes from v33/v34.
   (B) Data cards push chart to BOTTOM of card (was: chart hugged top with
  62px dead space below). Free that space for larger header type.
  Bump headline number + small text uniformly.
   ──────────────────── */
@media (min-width: 720px) {
  /* (A) Totals chip: title eyebrow stays LEFT + TOP aligned. The value +
  "today" + delta center as a group in the remaining space below the
  eyebrow.
  Technique: chip is flex column. Eyebrow gets margin-bottom:auto (push
  EVERYTHING below it down). Ticker gets margin-bottom:auto as well
  (push it back up). With auto-margins on both sides of the value-group,
  the value-group lands in the geometric center of the remaining space. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    padding: 0.85rem 0.85rem 0.85rem;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-eyebrow {
    align-self: flex-start !important;
    text-align: left;
    margin: 0 0 auto 0 !important;       /* eyebrow stays top, push rest down */
    flex: 0 0 auto !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-value {
    margin: 0;
    text-align: center;
    width: 100%;
    flex: 0 0 auto;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-unit {
    margin: 0.35rem 0 0.2rem 0;
    text-align: center;
    width: 100%;
    flex: 0 0 auto !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > .home-dash-bucket-ticker {
    margin: 0 0 auto 0 !important;       /* push self back up → centers group */
    text-align: center;
    width: 100%;
    flex: 0 0 auto !important;
  }

  /* (B) Data card layout - push the chart to the BOTTOM. */
  html body .ai-view .home-dash-grid .home-dash-card {
    justify-content: flex-start !important;
    gap: 0;
  }
  /* Pin the chart to the bottom by giving it auto top-margin. Targets the
  existing bars div (.home-dash-week-bars) and the today hourly variant. */
  html body .ai-view .home-dash-grid .home-dash-card > .home-dash-week-bars,
  html body .ai-view .home-dash-grid .home-dash-card > [class*="week-bars"],
  html body .ai-view .home-dash-grid .home-dash-card > [class*="hourly"],
  html body .ai-view .home-dash-grid .home-dash-card > svg {
    margin-top: auto;
  }

  /* (B-cont) Bump headline number on data cards. Was 16.5px (1.1rem).
  There's 62px of vertical headroom - take it to 1.6rem (24px). */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-value {
    font-size: 1.6rem !important;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  /* Bump the data-card title row to better balance the larger value below. */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-title {
    font-size: 0.85rem !important;       /* was 11.7px ; now 12.75px */
    letter-spacing: 1.0px;
  }
  /* The small "this week" + "WTD avg 25" + bar labels + day axis labels were
  all 9px (0.6rem). Bump to 11px (0.733rem) so they're legible at glance. */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-unit,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-ytd-inline {
    font-size: 0.7rem !important;
    letter-spacing: 0.4px;
  }
  /* Bar value labels + day axis labels live inside the SVG/chart. Targeting
  the SVG text elements globally inside the card. */
  html body .ai-view .home-dash-grid .home-dash-card svg text,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-week-bars text,
  html body .ai-view .home-dash-grid .home-dash-card [class*="bar-label"],
  html body .ai-view .home-dash-grid .home-dash-card [class*="axis-label"],
  html body .ai-view .home-dash-grid .home-dash-card [class*="day-label"] {
    font-size: 11px;          /* was 9px */
  }
  /* Reflect the chart growing slightly taller (more room) so bars don't look
  squashed under the bigger label. */
  html body .ai-view .home-dash-grid .home-dash-card > .home-dash-week-bars,
}
@media (min-width: 720px) and (max-height: 1099px) {
  /* Laptop - same idea, scaled. */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-value {
    font-size: 1.35rem;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-title {
    font-size: 0.78rem !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-unit,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-ytd-inline {
    font-size: 0.65rem !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card svg text,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-week-bars text {
    font-size: 10px;
  }
  html body .ai-view .home-dash-grid .home-dash-card > .home-dash-week-bars,
  html body .ai-view .home-dash-grid .home-dash-card > [class*="week-bars"],
  html body .ai-view .home-dash-grid .home-dash-card > [class*="hourly"] {
    min-height: 70px;
  }
}

/* ────────────────────
   v2008be.36 - Stack the data-card KPI row into two centered rows,
  uppercase ALL text on cards, slight size bump on the
  headline number.

   Per ask:
   • Row 1: big number + period label ("THIS WEEK" / "TODAY") side-by-side,
  centered horizontally and vertically as a unit.
   • Row 2: comparison/avg label ("DAILY AVG 25" / "WEEKLY AVG 22"), centered.
   • Card title row stays LEFT-aligned + TOP-anchored (unchanged from v35).
   • Chart stays bottom-pinned (unchanged from v35).
   • All text on cards rendered uppercase for uniformity.
   • Slight size bump on big number: 1.6rem → 1.75rem (Studio),
  1.35rem → 1.45rem (laptop).
   ──────────────────── */
@media (min-width: 720px) {
  /* Stack the .home-dash-kpi container into a centered column */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  /* Row 1: big number + period unit, side-by-side, baseline-aligned */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-value,
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-unit {
    display: inline-block;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-value {
    font-size: 1.75rem !important;          /* was 1.6rem in v35 */
    line-height: 1.0;
    letter-spacing: -0.01em;
    margin-right: 0.4rem !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-unit {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
    margin: 0;
    vertical-align: baseline;
  }
  /* Wrap value+unit onto Row 1 by emitting them inside an implicit flex line.
  Easiest approach: convert .home-dash-kpi to a flex column where the first
  two children sit on the same line via display: contents on a wrapper
  isn't possible without DOM change - so instead use flex-wrap with both
  value and unit being inline-flex. We achieve "two rows" by sizing the
  ytd-inline to width 100% so it forces a wrap. */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-ytd-inline {
    position: static;        /* override absolute positioning from earlier rule */
    inset: auto;
    width: 100%;
    flex-basis: 100%;
    text-align: center;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
    margin-top: 0.18rem !important;
  }
  /* Ensure the row1 group (value + unit) is centered as a unit horizontally */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    align-content: center;
  }
  /* Allow .home-dash-kpi to grow vertically - older CSS may have set fixed h */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    min-height: 56px !important;
    height: auto;
  }

  /* Uppercase ALL TEXT on cards for uniformity. Targets every text-bearing
  element inside data cards AND totals chips (right column + bottom row). */
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .ai-view .home-dash-grid .home-dash-card *,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip *,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right * {
    text-transform: uppercase;
  }
}

/* Laptop - same stacked layout, scaled type */
@media (min-width: 720px) and (max-height: 1099px) {
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-value {
    font-size: 1.45rem;          /* was 1.35rem in v35 */
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-unit {
    font-size: 0.66rem !important;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-ytd-inline {
    font-size: 0.66rem !important;
  }
}

/* ────────────────────
   v2008be.37 - Reload chip (next to "avg" toggle) + loading shimmer
   on all dashboard cards while a refresh is in flight.
   ──────────────────── */
@media (min-width: 720px) {
  /* The reload chip itself - match the size/feel of the other toggle chips
  but tighter (icon-only, square). */
  html body .ai-view .home-dash-toggle.home-dash-toggle--reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    min-width: 40px;
    width: 40px;
    cursor: pointer;
    /* v42.6.35 — same light-grey wash as period/vs/avg. */
    color: #E5E7EB;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    height: 40px;
    min-height: 40px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  html body .ai-view .home-dash-toggle.home-dash-toggle--reload:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    color: #F3F4F6;
  }
  html body .ai-view .home-dash-toggle.home-dash-toggle--reload:active {
    transform: scale(0.94);
  }
  html body .ai-view .home-dash-toggle.home-dash-toggle--reload .home-dash-reload-icon {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }
  /* Spinning state while reload is in flight */
  html body .ai-view .home-dash-toggle.home-dash-toggle--reload.is-spinning .home-dash-reload-icon {
    animation: totaly-reload-spin 0.85s linear infinite;
  }
  @keyframes totaly-reload-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
  }

  /* Loading shimmer overlay on each card while data refreshes.
  We dim the live content and overlay a moving gradient bar. */
  html body .ai-view .home-launcher.is-loading .home-dash-card,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip--right {
    position: relative;
    overflow: hidden;
  }
  html body .ai-view .home-launcher.is-loading .home-dash-card > *,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip > *,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip--right > * {
    opacity: 0.35;
    transition: opacity 0.18s ease;
  }
  html body .ai-view .home-launcher.is-loading .home-dash-card::after,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip::after,
  html body .ai-view .home-launcher.is-loading .home-dash-bucket-chip--right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(33, 150, 243, 0.10) 35%,
      rgba(33, 150, 243, 0.20) 50%,
      rgba(33, 150, 243, 0.10) 65%,
      rgba(255, 255, 255, 0.00) 100%
    ) !important;
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: totaly-shimmer 1.1s linear infinite;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
  }
  @keyframes totaly-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
  }
}

/* ============================================================
   v2008be.38 - Color ONLY the % delta + bigger totals subtext
   ============================================================
   - Big totals value stays BLACK (override every prior is-up/is-down rule)
   - ONLY the .home-dash-pct span (data-card baseline) and
  .home-dash-bucket-ticker (totals chip) get green/red/neutral
   - Bump .home-dash-bucket-unit and .home-dash-bucket-ticker font sizes
  so the period label (YTD) and growth ticker are readable
   ============================================================ */

/* 1) Force big totals number to stay BLACK regardless of chip class */
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-eyebrow,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-eyebrow,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-eyebrow,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-unit,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-unit,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-unit {
  color: #191A1A;
}

/* 2) Color the totals chip ticker (only the % element) */
html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-up,
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-up   { color: #2E7D32; }
html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-down,
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-down { color: #C62828; }
html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-flat,
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-flat { color: rgba(60,64,67,0.85); }

/* 3) Color the data-card baseline % span (only the +__% inside .home-dash-pct) */
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-pct.is-up,
html body .ai-view .home-dash-ytd-inline .home-dash-pct.is-up,
.home-dash-pct.is-up   { color: #2E7D32; font-weight: 700; }
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-pct.is-down,
html body .ai-view .home-dash-ytd-inline .home-dash-pct.is-down,
.home-dash-pct.is-down { color: #C62828; font-weight: 700; }
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-pct.is-flat,
html body .ai-view .home-dash-ytd-inline .home-dash-pct.is-flat,
.home-dash-pct.is-flat { color: rgba(60,64,67,0.85); font-weight: 700; }

/* 4) Bump totals chip subtext sizes (Studio default + laptop override) */
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit {
  font-size: 13px !important;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.02em;
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
  font-size: 14px !important;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 2px !important;
}

/* Laptop (≤1500px) - slightly smaller */
@media (max-width: 1500px) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit   { font-size: 12px !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker { font-size: 13px !important; }
}

/* Mobile - keep readable */
/* v41.58h: component:ai-view block L9395-L9398 moved to mobile-v2.css */

/* 5) Data-card baseline label tightening - keep neutral on the static text */
html body .ai-view .home-dash-grid .home-dash-ytd-inline {
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* ============================================================
   v2008be.42 - Card subtext two-row layout + chip centering
   ============================================================
   - Card baseline subtext now renders as TWO rows:
  row1: "CURRENT VS PREVIOUS" (uppercase, neutral)
  row2: "±N · ±%" (green up / red down / neutral flat)
   - When chip has .is-current-view (i.e. an *_as_is mode), the
  totals column renders centered (no ticker line below the value).
   ============================================================ */
/* v2008be.42 - Override the absolute right-pinned positioning from v2008ay
   so the two-row baseline (CURRENT VS PREVIOUS / ±N · ±%) sits cleanly
   underneath the big number rather than overlapping it. */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-ytd-inline,
html body .ai-view .home-dash-grid .home-dash-ytd-inline {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  text-align: center;
  line-height: 1.05;
  margin-top: 2px !important;
  width: 100%;
}
/* The KPI row should now stack vertically: value+unit, then baseline below. */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
  flex-wrap: wrap !important;
  position: relative;
}
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row1 {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
  color: rgba(60,64,67,0.65) !important;
}
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2 {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums !important;
}
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-up   { color: #2E7D32; }
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-down { color: #C62828; }
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-flat { color: rgba(60,64,67,0.85); }

/* Inherit the row's color so the embedded ±N and ±% spans match. */
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2 .home-dash-diff,
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2 .home-dash-pct {
  color: inherit;
  font-weight: 700;
}

/* Center totals chip column contents when no comparison is active. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-current-view {
  align-items: center;
  text-align: center;
  justify-content: center;
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-current-view .home-dash-bucket-eyebrow,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-current-view .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-current-view .home-dash-bucket-unit {
  text-align: center;
  width: 100%;
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-current-view .home-dash-bucket-ticker {
  display: none;
}

/* ============================================================
   v2008be.44 - Universal chip ticker fit (ALL viewports)
   ============================================================
   v2008be.43's media query approach didn't catch the user's
   actual laptop width (>1500px). The chip ticker '±N · ±%'
   was being clipped by the chip's existing `overflow: hidden`.
   Strategy:
  1) Cap ticker to a width-safe size at ALL viewports
  2) Override chip overflow so anything still spilling is visible
  3) Center alignment + nowrap so it never wraps mid-readout
   ============================================================ */
/* Allow the ticker line to extend slightly past the chip if needed,
   instead of being silently clipped (which was hiding the % sign). */
html body .ai-view .home-dash-grid .home-dash-bucket-chip {
  overflow: visible;
}

/* Bucket-chip ticker base - small & tight at every viewport. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
  font-size: 12px !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums !important;
  margin-top: 1px !important;
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit {
  white-space: nowrap;
}

/* Right-column chips (TOTAL OFFICE / TOTAL D2D / GRAND TOTAL)
   live in the fixed-width 110-132px column - tightest of all. */

/* Card baseline two-row (CURRENT VS PREVIOUS / ±N · ±%) -
   keep nowrap, tabular nums, modest font so it hugs card width. */
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row1 {
  font-size: 9.5px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2 {
  font-size: 11.5px !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* Laptop (≤1600px) - shrink another notch */
@media (max-width: 1600px) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
    font-size: 10.5px !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-ticker {
    font-size: 9px !important;
    letter-spacing: -0.025em;
  }
}

/* Narrow laptop (≤1400px) - even tighter */
@media (max-width: 1400px) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
    font-size: 9.5px !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-ticker {
    font-size: 8.5px !important;
  }
  html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2 {
    font-size: 10px !important;
  }
}

/* Pills row beneath composer (only on home / desktop) */
.kpi-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0 8px;
}
.kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--fg-inverse-strong);
  border: 1px solid rgba(60,64,67,0.18);
  color: rgba(60,64,67,0.92);
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kpi-pill:hover {
  background: var(--fg-inverse);
  border-color: var(--accent-hover-soft-45);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--accent-hover-soft-10);
}
.kpi-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary-hover);
}
/* v2008be.47d - stubs render at full color (production-ready look). They
   remain non-interactive (no hover lift, not-allowed cursor) until wired up. */

/* Default (collapsed) state - KPI grid hidden, pills visible */


/* Active state - pills hidden, KPI grid visible (already styled by v46 rules) */
body.kpi-active .kpi-pills-row { display: none; }

/* Position the launcher relative so the minimize button can pin to its corner */
.home-launcher { position: relative; }

/* Minimize button - top-left of grid, only visible when active */
.kpi-minimize {
  display: none;
  position: absolute;
  top: 4px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fg-inverse-strong);
  border: 1px solid rgba(60,64,67,0.18);
  color: rgba(60,64,67,0.78);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  z-index: 5;
  padding: 0;
}
body.kpi-active .kpi-minimize { display: inline-flex; }
.kpi-minimize:hover {
  background: var(--fg-inverse);
  border-color: var(--accent-hover-soft-45);
  color: var(--accent-primary-hover);
}

/* Mobile: hide pill row on small screens for now (KPI grid is desktop-only) */
/* v41.58h: component:kpi block L9124-L9126 moved to mobile-v2.css */

/* ============================================================
   v2008be.47b - Collapsed-state composer centering
   Default (no .kpi-active):
  - composer + pills group sits in the vertical center of
  the main display, shifted up so the composer itself is
  at the visual midpoint (sidebar excluded horizontally).
  - hero (welcome chip) is absolutely positioned and gets
  its inline `top` set by JS so it is centered between
  the top header edge and the composer top.
   Active (.kpi-active):
  - existing laptop layout takes over (composer near top,
  grid hugs bottom).
   ============================================================ */



/* Hero - absolute, JS sets its `top` to (composerTop - heroH) / 2 */



/* Pull the centered group up by half the pills height so the
   composer (not the group) is at the visual vertical midpoint. */


/* When KPI is active, no overrides - the existing v46 laptop rules and
   the base ai-home rules take over (composer near top, grid hugs bottom). */

/* Mobile: keep existing behavior */
/* v41.58h: Ask block L9676-L9681 moved to mobile-v2.css Section 4b */

@media (min-width: 720px) {
  /* Composer floats down so it sits just above the grid */
  html body.kpi-active .ai-view.ai-home .ai-composer-wrap {
    margin-top: auto;
  }
  /* Launcher snaps to the bottom: grid hugs toggle, no slack below */
  html body.kpi-active .ai-view .home-launcher,
  html body.kpi-active .ai-view #home-launcher.home-launcher {
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
  }
  html body.kpi-active .ai-view .home-launcher .home-dash-toggles,
  html body.kpi-active .ai-view #home-launcher.home-launcher .home-dash-toggles {
    margin-top: 0;
  }
  /* Constrain grid so it doesn't overflow on shorter viewports - let it
  size naturally and use available space without growing past it. */
  html body.kpi-active .ai-view .home-launcher .home-dash-grid,
  html body.kpi-active .ai-view #home-launcher.home-launcher .home-dash-grid {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
  }
}

/* =========================================================================
   v2008be.47f - Chat history sidebar redesign
   1. Strip chip bg/border from history items
   2. Left-align to icon column position
   3. Fade list into footer
   4. Match washed nav text color
   5. Clock icon hover-morph + collapse toggle (JS-driven)
   ========================================================================= */

/* Strip chip styling - beat all the cascading !important rules */
aside.sidebar#sidebar #sidebar-history-list .history-item,
aside.sidebar#sidebar .sidebar-history #sidebar-history-list .history-item,
aside.sidebar#sidebar .sidebar-section.sidebar-history .section-body .history-item {
  background: transparent;
  background-color: transparent;
  border: 0;
  border-color: transparent;
  border-radius: 6px;
  padding: 0.32rem 0.72rem;
  margin: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: block;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}

/* Subtle hover only - no border, no chip back - LIGHT MODE ONLY */
html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item:hover {
  background: rgba(13, 71, 161, 0.05);
  border: 0;
}

/* Match washed/faded nav-label color - LIGHT/OG MODE ONLY */
html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item,
html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item .history-title,
html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item *,
html:not([data-app-theme="dark"]) aside.sidebar#sidebar .sidebar-section.sidebar-history #sidebar-history-list .history-item .history-title {
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item:hover,
html:not([data-app-theme="dark"]) aside.sidebar#sidebar #sidebar-history-list .history-item:hover .history-title {
  color: rgba(15, 23, 42, 0.82);
}

/* Hide history-meta (timestamp) - keep list compact */
aside.sidebar#sidebar #sidebar-history-list .history-item .history-meta {
  display: none;
}

/* Title: single-line, left-aligned */
aside.sidebar#sidebar #sidebar-history-list .history-item .history-title {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.4;
}

/* Tighter list spacing */
aside.sidebar#sidebar #sidebar-history-list {
  gap: 0;
  padding: 0;
  margin-top: 0.15rem !important;
}

aside.sidebar#sidebar .sidebar-history.sidebar-section[data-section="history"] {
  position: relative;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* Hide "View all chats →" link - clean fade, no extra chrome */
aside.sidebar#sidebar .sidebar-history-viewall { display: none; }

/* When the user collapses via the clock-icon-arrow toggle, hide the list */
aside.sidebar#sidebar .sidebar-history.sidebar-section.is-collapsed > .section-body {
  display: none;
}

/* ---- Chat history toggle icon ----
   Default: clock, no pill background.
   Hover (anywhere on row): clock fades, arrow appears in a circular pill.
  - Expanded → arrow points DOWN  (click to collapse).
  - Collapsed → arrow points RIGHT (click to expand). */
/* Toggle icon container is the same 44px column as Home/DS so the icon sits at
   the same x-center (cx=34). Inside, a 26px circular highlight pill appears on
   icon hover only. */
/* The visible 26px pill is rendered as a pseudo behind the icon, only on hover */

/* Two icons stacked, only one visible at a time */
/* Default: clock visible, arrow hidden */

/* On ICON hover only (not the whole row): icon turns blue, clock fades, arrow appears.
   The 26px circular pill is provided by the ::before pseudo above. */

/* Arrow direction: down when expanded, right when collapsed */
/* When collapsed, default-show the arrow (no need to hover to see direction cue) */

/* ---- Strip the persistent "is-open" pill background from Chat history ----
   Make Chat history visually identical to Home / Connectors when not on /chats. */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open,
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history[aria-expanded="true"],
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history[aria-expanded="false"] {
  background: transparent;
  color: rgba(15, 23, 42, 0.84);
  font-weight: 500;
}
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-label {
  color: rgba(15, 23, 42, 0.84);
  font-weight: 500;
}

/* Row hover state - EXACT match to Home / Connectors hover */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover,
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open:hover {
  background: rgba(13, 71, 161, 0.07);
  color: var(--accent-primary-deep);
}
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label {
  color: var(--accent-primary-deep);
}
/* IMPORTANT: row hover must NOT activate the inner toggle pill or arrow.
   Only the clock-icon container's :hover triggers that. */

/* Active state when on /chats route - keep blue background pill (matching Home/DS active),
   but the LABEL TEXT stays grey (per user: chat history is the ONLY tab whose text doesn't
   go blue when active). */
body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open {
  background: rgba(25, 118, 210, 0.16) !important;
  font-weight: 400;
}

body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-icon {
  color: var(--fg-faint-warm) !important;
}

/* Hide the right-side caret (chevron-down on the right) - toggle handled by left icon now */

/* Kill the legacy backdrop-filter blur that was painting a phantom pill on Chat history
   (it inherited from `.sidebar button:first-of-type` rule earlier in the cascade). */
aside.sidebar#sidebar .sidebar-quick-item--history,
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}

/* ---- Lock sidebar-header + nav vertical metrics across expanded/collapsed states.
   No Y movement on logo, Home, Connectors, Chat history when toggling sidebar width. */
aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 {
  padding: 14px 14px 10px !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Logo button is fixed 44×44 in both states */
aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  width: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  height: 44px !important;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible;
  opacity: 1;
}
/* In collapsed state, the wordmark hides but the logo stays */
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark { display: none; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only { display: inline-flex; }
/* Lock collapse-toggle button to a fixed 32×32 */
aside.sidebar#sidebar .sidebar-header--v1944 .sidebar-collapse-btn--v1944,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .sidebar-collapse-btn--v1944 {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
}
/* In collapsed state, hide the collapse button so the logo can stay centered */
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .sidebar-collapse-btn--v1944 {
  display: none;
}
/* Center logo when collapsed (justify-content shifts it from edge to center) */
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 {
  justify-content: center !important;
}

/* Quick-nav items - lock vertical metrics across both states */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center !important;
  border-radius: 10px !important;
}
/* Quick-nav icon column - fixed 44px wide, icon centered, in BOTH states.
   Override the legacy collapsed rule that shrinks to 18px. */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon {
  width: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
/* Inner SVG keeps consistent 16px size in both states (skip the Chat history toggle
   which has its own 16/14px stacked SVGs positioned absolutely). */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:not(.sidebar-quick-item--history) .sqi-icon > svg,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:not(.sidebar-quick-item--history) .sqi-icon > svg {
  width: 16px;
  height: 16px;
}

/* Lock sidebar-quick-nav padding/margins so first nav-item y is identical between states */
aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929 {
  padding: 6px 8px !important;
  margin: 0;
  gap: 2px !important;
  border-bottom: 0;
  align-items: stretch !important;
}
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929 .sidebar-quick-item {
  width: 100%;
  margin: 0;
}

/* ===== v2008be.47k - TRUE icon position lock + grey hover refinement =====
   Root cause of 13.5px Y-shift + 3.5px X-shift: .sidebar element padding
   differs between expanded (0.9rem 0.8rem) and collapsed (line 2411 0.5rem).
   Fix: lock identical padding on .sidebar in BOTH states. */

aside.sidebar#sidebar,
body:not(.sidebar-collapsed) aside.sidebar#sidebar,
body.sidebar-collapsed aside.sidebar#sidebar,
.sidebar.is-collapsed,
body.sidebar-collapsed .sidebar {
  padding: 12px 8px 0 !important;
  gap: 6px !important;
}

/* Reset legacy outer padding rules so the lock above wins */
body.sidebar-collapsed .sidebar { padding-top: 12px; padding-left: 8px; padding-right: 8px; padding-bottom: 0; }

/* Header is fixed-height in both - already set, but reaffirm */
aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0;
  margin: 0 0 6px 0;
}

/* Quick nav padding/margin identical in both states */
aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929 {
  padding: 0;
  margin: 0;
  gap: 2px !important;
  border-bottom: 0;
}

/* Quick-nav row: fixed 44 in both, no x-shift */
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav.sidebar-quick-nav--v1929 .sidebar-quick-item {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0;
  padding: 0;
  border-radius: 10px !important;
  display: flex;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Logo brand inside header - locked 44×44, no padding shift */
aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0;
  margin: 0;
}

/* Chat history row: row hover bg matches Home/DS = grey-blue subtle.
   Text stays the same washed grey as idle (NOT blue - user wants it to match content grey). */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover {
  background: rgba(13, 71, 161, 0.07);
  background-color: rgba(13, 71, 161, 0.07);
  background-image: none;
  color: #8F8E8C;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label {
  color: #8F8E8C !important;
}

/* Active route blue stays as-is - restated to outrank any override */
html body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-active,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history[aria-current="page"] {
  background: rgba(25, 118, 210, 0.16);
  background-color: rgba(25, 118, 210, 0.16);
  background-image: none;
  color: #0D47A1;
}

/* Arrow morph on chat-history toggle ONLY when hovering THE ICON - not the row.
   Uses the actual class names .sqi-icon-clock / .sqi-icon-arrow from index.html. */
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon { position: relative; width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px; margin-left: 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: background 140ms ease; cursor: pointer; }
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon .sqi-icon-clock { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; transition: opacity 140ms ease !important; color: rgba(15,23,42,0.6) !important;
 opacity: 1;
}
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon:hover { background: rgba(13, 71, 161, 0.12); }
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon:hover .sqi-icon-clock { opacity: 0; }

/* When history list is collapsed, arrow points right (rotated). Toggle by aria-expanded on parent button. */

/* Cancel ANY stale rule that morphs the arrow based on ROW hover (not icon hover) */
html body aside.sidebar#sidebar .sidebar-quick-item--history:hover #sqi-history-icon:not(:hover) .sqi-icon-clock { opacity: 1; }
html body aside.sidebar#sidebar .sidebar-quick-item--history:hover #sqi-history-icon:not(:hover) { background: transparent; }

/* ===== v2008be.47l - Logo expand button on hover, label hover blue, kill double-pill badge ===== */

/* Expand-arrow overlay on the logo: hidden by default, only visible when sidebar is collapsed AND logo is hovered */
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0D47A1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

/* Make brand button positioning relative so absolute child works */
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  transition: background 140ms ease;
}

/* Expanded state: NEVER show the expand-arrow (clicking goes home) */
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow {
  display: none;
}

/* Collapsed state: show arrow ONLY on hover, fade out the logo */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow {
  display: block;
  opacity: 0;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover .brand-logo-svg {
  opacity: 0;
  transition: opacity 140ms ease;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover .brand-expand-arrow {
  opacity: 1;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover {
  background: rgba(13, 71, 161, 0.07) !important;
}

/* Smooth opacity transition on the logo SVG */
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-svg {
  transition: opacity 140ms ease;
  opacity: 1;
}

/* ─── Quick-nav label color: turn blue on hover (matches Home/DS hover behavior) ─── */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:hover .sqi-label {
  color: #0D47A1;
}
/* Active (current page) - already blue but reaffirm to outrank the .55 alpha rule */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-label,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item[aria-current="page"] .sqi-label {
  color: #0D47A1;
}

/* ─── Kill the badge "double pill" - the floating "·" count chip on Connectors ─── */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-badge {
  display: none;
}

/* ===== v2008be.47m - BUG FIXES =====
   1. Kill stale "header hover swap" rule (lines 5473-5476) that hides logo on hover
   2. Lock pointer-events:auto on brand+arrow so logo stays clickable
   3. Restore Chat history icon column to 44px (matching Home/DS) with 26px pill INSIDE */

/* FIX 1+2: Brand stays visible & clickable in collapsed state, even when header is hovered */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944:hover .brand.brand--logo-only,
html body.sidebar-collapsed aside.sidebar#sidebar .brand.brand--logo-only {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  display: inline-flex;
}
/* The collapse-btn is hidden in collapsed (we use logo as toggle) */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944:hover .sidebar-collapse-btn--v1944,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* FIX 3: Chat history icon column = 44px (matches Home/DS).
   The 26px circular hover pill is drawn INSIDE the column via background-clip. */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon {
  position: relative;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  flex: 0 0 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The 26px circular hover pill is drawn via ::before, centered in the 44px column */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: transparent;
  transition: background 140ms ease;
  pointer-events: none;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon:hover::before {
  background: rgba(13, 71, 161, 0.12);
}
/* Clock & arrow svgs are centered, the same way they were */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon .sqi-icon-clock {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  transition: opacity 140ms ease !important;
}

/* Logo arrow & svg ALL pointer-events:none so the BUTTON receives the click */
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-svg,
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow,
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-wordmark {
  pointer-events: none;
}
/* But the brand button itself: ALWAYS clickable */
html body aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  pointer-events: auto;
  z-index: 2;
  cursor: pointer;
}

/* ===== v2008be.47n - text + icon size match + round logo expand pill ===== */

/* FIX 1: Chat history clock/arrow svgs MUST render at 16px (matching Home/DS).
   Override the line 5557 rule which forces all .sqi-icon svg to 22×22. */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon .sqi-icon-clock {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

/* FIX 2: Chat history label color/weight = match Connectors (washed grey) */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-label {
  color: rgba(10, 10, 10, 0.55);
  font-weight: 400;
  font-size: 12.3px;
}
/* On hover the label turns regular content grey (matching main display body text), NOT blue */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label {
  color: #8F8E8C !important;
  font-weight: 400;
}

/* FIX 3: Logo expand pill must be a circle, not a square */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-clip: padding-box;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover {
  background: rgba(13, 71, 161, 0.07) !important;
  border-radius: 999px;

  background: rgba(13, 71, 161, 0.14) !important;
  border-radius: 999px;

}

html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-label,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-label,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-label,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.sidebar-quick-item--history,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active {
    color: #8f8e8c;
    font-weight: 400;
}
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-icon,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-icon,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-icon,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-icon {
  color: #8F8E8C !important;
}

html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open:hover {
  background: rgba(143, 142, 140, 0.10) !important;
  border-color: rgba(143, 142, 140, 0.35) !important;
  color: #8F8E8C !important;
}
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-icon {
  color: #8F8E8C !important;
}
/* Active on /chats - keep grey text but use grey-tinted bg (no blue) */
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active {
  background: rgba(143, 142, 140, 0.16) !important;
  border-color: rgba(143, 142, 140, 0.35) !important;
}

html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open:hover {
  background: rgba(13, 71, 161, 0.07) !important;
  border-color: transparent;
  color: #0D47A1 !important;
}
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label,
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-icon {
  color: #0D47A1 !important;
}
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active {
  background: rgba(25, 118, 210, 0.16) !important;
  border-color: transparent;
}
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-label,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-label {
  color: #0D47A1 !important;
  font-weight: 600;
}
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-icon,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-icon {
  color: #0D47A1;
}

#sidebar-history-list .history-item[data-hover-tip],
#chat-history-list .history-item[data-hover-tip] {
  position: relative;
}
#sidebar-history-list .history-item[data-hover-tip]::after,
#chat-history-list .history-item[data-hover-tip]::after {
  content: attr(data-hover-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-card);
  border: 1px solid #2A2928;
  border-radius: 12px;
  color: var(--fg-faint-warm);
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px var(--shadow-alpha-35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  z-index: 10001;
}

/* ============================================================
   v47p.7 - Two fixes:
   1) CH active should NOT be bold (was 600, now 400 to match
  visual weight of inactive Home/DS rendering)
   2) Sidebar custom tooltip via [data-sidebar-tip] - replaces
  native browser title= tooltip on sidebar tab + clock icon.
  Matches AI composer style: bg #1F2121, border #2A2928,
  text #8F8E8C, radius 12px.
   ============================================================ */

/* CH active - un-bold */
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-label,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-label {
  font-weight: 400;
}

/* Custom sidebar tooltip - matches AI composer styling */
[data-sidebar-tip] {
  position: relative;
}
[data-sidebar-tip]::after {
  content: attr(data-sidebar-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-card);
  border: 1px solid #2A2928;
  border-radius: 12px;
  color: var(--fg-faint-warm);
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px var(--shadow-alpha-35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  z-index: 10001;
}
#sidebar-history-list .history-item[data-hover-tip]:hover::after,
#chat-history-list .history-item[data-hover-tip]:hover::after,
[data-sidebar-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.4s, 0.4s, 0s;
}
/* Logo (collapsed only) tooltip should appear below not to the right */
.brand--logo-only[data-sidebar-tip]::after {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.brand--logo-only[data-sidebar-tip]:hover::after {
  transform: translateX(-50%) translateY(0);
}
/* Don't show logo tooltip when sidebar is expanded (logo already shows brand) */
body:not(.sidebar-collapsed) .brand--logo-only[data-sidebar-tip]::after {
  display: none;
}

/* ============================================================
   v47p.8 - Hover-card on each chat history item now matches
   AI composer: bg #1F2121, border #2A2928, all text #8F8E8C,
   regular weight, 12px radius. Title is no longer bold/blue.
   Body text muted to same #8F8E8C.
   Also: kill the per-item ::after tooltip (we have the big
   portal card now - no need for two tooltips).
   ============================================================ */
html body .history-hover-card,
html body .history-hover-card--portal {
  background: #1F2121;
  border: 1px solid #2A2928;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #8F8E8C;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
}
html body .history-hover-card .hhc-title,
html body .history-hover-card--portal .hhc-title {
  color: #8F8E8C;
  font-weight: 400;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.86rem;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
html body .history-hover-card .hhc-body,
html body .history-hover-card--portal .hhc-body {
  color: #8F8E8C;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Remove the small per-item ::after tooltip - the big hover-card is enough */
#sidebar-history-list .history-item[data-hover-tip]::after,
#chat-history-list .history-item[data-hover-tip]::after {
  display: none;
}

/* Position: anchor to RIGHT of sidebar, so it lines up with sidebar's right edge.
   BUG 1 FIX: base rule hidden by default; only .is-open is visible. */
html body .notif-panel {
  display: none;           /* hidden until JS sets display:block */
  position: fixed !important;
  left: 228px !important;             /* expanded sidebar right edge */
  right: auto;
  top: auto;
  bottom: 16px !important;
  width: 380px !important;
  min-width: 360px !important;
  max-width: 380px !important;
  max-height: 70vh !important;
  padding: 0;
  border-radius: 14px !important;
  background: #1F2121 !important;
  border: 1px solid #2A2928 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden !important;
  z-index: 1200 !important;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* Mobile fallback - anchor to bottom over content */
/* v41.58h: component:panel block L10005-L10014 moved to mobile-v2.css */

/* Header - title sentence-case, kebab menu instead of two big buttons */
html body .notif-panel .notif-panel-header {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px 12px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: transparent;
}
html body .notif-panel .notif-panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #E8E7E5;
}

/* Body - scroll area */
html body .notif-panel .notif-panel-body {
  padding: 4px 0 8px 0 !important;
  background: transparent;
  overflow-y: auto;
  max-height: calc(70vh - 56px) !important;
}

/* Hide the section headers - Perplexity has no Unread/Read labels */
html body .notif-panel .notif-section-header,

/* "You're all caught up" stub */
html body .notif-panel .notif-caughtup-stub,

/* Each notification row - Perplexity-tight layout */
html body .notif-panel .notif-item {
  display: grid;
  grid-template-columns: 36px 1fr auto !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s ease !important;
}
html body .notif-panel .notif-item:hover {
  background: rgba(255,255,255,0.03) !important;
}
html body .notif-panel .notif-item:last-child {
  border-bottom: 0;
}

/* Hide the giant checkbox + dot + Mark-read button - replace with avatar circle + time */
html body .notif-panel .notif-item .notif-item-check,
html body .notif-panel .notif-item .notif-item-check-box,
html body .notif-panel .notif-item .notif-item-readtoggle,
html body .notif-panel .notif-item .notif-item-dot {
  display: none;
}

/* Avatar circle (icon column) - small bell-ish dot, will use ::before */
html body .notif-panel .notif-item::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8E8C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='14' rx='2'/><path d='M3 8h18'/><circle cx='7' cy='6' r='0.5' fill='%238F8E8C'/><circle cx='9' cy='6' r='0.5' fill='%238F8E8C'/><path d='M7 13l2 2 4-4'/></svg>");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 32px;
}

/* Item text */
html body .notif-panel .notif-item .notif-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body .notif-panel .notif-item .notif-item-title {
  font-size: 0.86rem;
  font-weight: 500;
  color: #E8E7E5;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
html body .notif-panel .notif-item .notif-item-body {
  font-size: 0.78rem;
  font-weight: 400;
  color: #8F8E8C;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
/* Time meta - moved to right column via grid */
html body .notif-panel .notif-item .notif-item-meta {
  display: none;
}
html body .notif-panel .notif-item::after {
  content: attr(data-time);
  font-size: 0.72rem;
  color: #8F8E8C;
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 2px;
}

/* Unread indicator - small blue dot prepended to title */
html body .notif-panel .notif-item.is-unread .notif-item-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2196F3;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Section spacing */
html body .notif-panel .notif-section {
  margin: 0;
  padding: 0;
}

/* Anchor flush with sidebar's right edge - no gap.
   BUG 1 FIX: keep display:none on base rule; only add overrides here. */
html body .notif-panel {
  display: none;          /* hidden by default */
  left: 228px !important;
  bottom: 12px !important;
  width: 400px !important;
  min-width: 380px !important;
  max-width: 400px !important;
  max-height: 78vh !important;       /* taller - at least 3 read items visible */
  min-height: 360px !important;
}
html body .notif-panel.is-open {
  display: block;
}

/* Header - title only, kebab/buttons removed via index.html edit */
html body .notif-panel .notif-panel-header {
  padding: 16px 18px 12px 18px !important;
}

/* Body grows + scrolls - minimum height for ~3 read items + caught-up stub */
html body .notif-panel .notif-panel-body {
  max-height: calc(78vh - 56px) !important;
  min-height: 304px !important;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
html body .notif-panel .notif-panel-body::-webkit-scrollbar { width: 6px; }
html body .notif-panel .notif-panel-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10); border-radius: 999px;
}

/* "You're all caught up" stub - sits above the grey divider */
html body .notif-panel .notif-caughtup-stub,
html body .notif-panel .notif-empty {
  padding: 18px 18px 16px 18px;
  font-size: 0.84rem;
  color: #8F8E8C;
  font-weight: 400;
  background: transparent;
  border-bottom: none;
}

/* Section divider above Read - NEUTRAL GREY, not blue */
html body .notif-panel .notif-section-divider {
  display: none;          /* using border-top instead */
  border: 0;
  background: rgba(255,255,255,0.08) !important;
}

/* Override any lingering blue ::before/::after shenanigans on read divider */
html body .notif-panel .notif-section--read::before,
html body .notif-panel .notif-section--read::after {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.08);
}

/* Bell unread dot - tight to top-right of bell icon */
html body .footer-notif-btn .footer-notif-dot,
html body .sidebar-footer--v1940 .footer-notif-btn .footer-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2196F3;
  box-shadow: 0 0 0 1.5px #1F2121, 0 0 6px rgba(33,150,243,0.6);
  display: none;
  pointer-events: none;
}

html body .notif-panel .notif-item.is-unread,
html body .notif-history-body .notif-item.is-unread {
  background: rgba(255, 255, 255, 0.04);
  background-image: none;
  border: 0;
  border-radius: 12px;
  margin: 4px 10px;
  padding: 12px 14px;
  border-bottom: 0;
}
html body .notif-panel .notif-item:not(.is-unread) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
  margin: 0;
}

/* Kill any blue accent strips on items */
html body .notif-panel .notif-item::before,
html body .notif-panel .notif-item.is-unread::before {
  background-color: rgba(255,255,255,0.06);
}
html body .notif-panel .notif-item .notif-item-dot,
html body .notif-panel .notif-item.is-unread .notif-item-dot {
  display: none;
}

/* Section divider (above Read) - neutral grey, not blue */
html body .notif-panel .notif-section--read {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
  padding-top: 4px;
}
html body .notif-panel .notif-section-divider { display: none; }

/* BUG 1 FIX: only position override here, display:none already set above */
html body .notif-panel {
  left: 240px !important;
}
html body.sidebar-collapsed .notif-panel,
html body.sidebar-collapsed .notif-panel.is-open {
  left: 64px;
}

html body aside.sidebar#sidebar .sidebar-footer .footer-notif-btn .footer-notif-dot,
html body .sidebar-footer .footer-notif-btn .footer-notif-dot,
html body #footer-notif-btn .footer-notif-dot,
html body #footer-notif-btn #footer-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: auto;
  left: auto;
  width: 7px;
  height: 7px;
  background: #2196F3;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px #1F2121, 0 0 6px rgba(33,150,243,0.55);
  pointer-events: none;
}
html body #footer-notif-btn[data-has-unread="true"] #footer-notif-dot,
html body .footer-notif-btn[data-has-unread="true"] .footer-notif-dot {
  display: block;
}
html body #footer-notif-btn:not([data-has-unread="true"]) #footer-notif-dot,
html body .footer-notif-btn:not([data-has-unread="true"]) .footer-notif-dot {
  display: none;
}

/* ===== v47p.15 - thinner bell dot border + footer hover separation ===== */
html body #footer-notif-btn #footer-notif-dot,
html body .footer-notif-btn .footer-notif-dot {
  box-shadow: 0 0 0 1px #1F2121, 0 0 6px rgba(33,150,243,0.55);
}
/* Hover separation: account pill on left, bell on right become distinct zones */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill {
  border-radius: 10px !important;
  transition: background-color 140ms ease !important;
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill:hover {
  background: rgba(255,255,255,0.08);
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn {
  border-radius: 8px;
  transition: background-color 140ms ease !important;
}

/* ========================================================================
 * v47p.16 - Account menu (Perplexity-style) + footer hover layout
 * - org pill is now a button (not a link); opens account menu above it
 * - vertical divider line between org pill and bell (NOT rounded gap)
 * - stronger hover that fills the pill area, including caret
 * - account menu: header (avatar+name+email), All settings, Appearance > Dark/Light, Sign out
 * ====================================================================== */

/* Override v47p.15: keep the org-pill hover but make it square-feeling on the right edge,
   add a thin divider line on the right side of the pill so it visually splits from the bell */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 {
  position: relative;
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  border-radius: 10px !important;
  transition: background-color 140ms ease !important;
  padding-right: 28px !important; /* room for caret */
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill:hover,
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill[aria-expanded="true"] {
  background: rgba(255,255,255,0.10) !important;
}

/* Caret beside name */
html body .footer-settings-link.footer-org-pill .footer-org-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}

/* Bell button: keep its own hover, but tighten radius to look square-like */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn {
  border-radius: 8px;
  transition: background-color 140ms ease !important;
  position: relative;
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* Vertical divider line between pill and bell (always visible, subtle) */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255,255,255,0.10);
  pointer-events: none;
}

/* ── Account menu container ──────────────────── */
.account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 4px;
  right: 4px;
  background: var(--bg-card);
  border: 1px solid #2A2928;
  border-radius: 14px;
  box-shadow: 0 24px 48px var(--shadow-alpha-55), 0 8px 16px var(--shadow-alpha-35);
  padding: 6px;
  z-index: 9999;
  display: none;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
}
.account-menu[aria-hidden="false"] {
  display: block;
}
/* When sidebar is collapsed, panel anchors near the avatar with fixed width */
aside.sidebar.is-collapsed .account-menu,
aside.sidebar[data-collapsed="true"] .account-menu {
  left: 8px;
  right: auto;
  width: 280px;
}

/* Header */
.account-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
}
.account-menu-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: visible;
  flex: 0 0 34px;
  display: inline-block;
}
.account-menu-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.account-menu-tier-badge {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  font-size: 7.5px;
  line-height: 1;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 999px;
  background: #2A2928;
  color: var(--fg-inverse);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu-tier-badge[data-tier="enterprise"] {
  background: var(--accent-primary-hover);
  color: var(--fg-inverse);
}
.account-menu-tier-badge[data-tier="max"] {
  background: var(--fg-inverse);
  color: var(--bg-card);
}
.account-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.account-menu-name {
  color: var(--fg-inverse);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-email {
  color: #B8B7B4;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider */
.account-menu-divider {
  height: 1px;
  background: var(--overlay-w-08);
  margin: 4px 6px;
}

/* Items */
.account-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--fg-inverse);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}
.account-menu-item:hover,
.account-menu-item[aria-expanded="true"] {
  background: var(--overlay-w-07);
}
.account-menu-icon {
  flex: 0 0 16px;
  color: var(--fg-inverse);
}
.account-menu-label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.account-menu-label-main {
  color: var(--fg-inverse);
  font-size: 13px;
  line-height: 1.2;
}
.account-menu-label-sub {
  color: #B8B7B4;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 2px;
}
.account-menu-chev {
  flex: 0 0 10px;
  color: var(--fg-faint-warm);
}

/* Appearance submenu - slides out to the right when expanded */
.account-submenu {
  display: none;
  margin: 4px 6px;
  padding: 4px;
  background: var(--overlay-w-03);
  border-radius: 10px;
}
.account-submenu[aria-hidden="false"] {
  display: block;
}
.account-submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--fg-primary-cream);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}
.account-submenu-item:hover {
  background: var(--border-soft);
}
.account-submenu-item svg:first-child {
  flex: 0 0 16px;
  color: #C8C7C4;
}
.account-submenu-item span {
  flex: 1 1 auto;
}
.account-submenu-check {
  display: none;
  color: var(--brand-blue-pure);
}
.account-submenu-item[aria-checked="true"] .account-submenu-check {
  display: inline-block;
}

html body aside.sidebar .account-menu,
html body aside.sidebar .account-menu * {
  color: #FFF;
}
html body aside.sidebar .account-menu .account-menu-name { color: #FFF; }
html body aside.sidebar .account-menu .account-menu-email { color: #B8B7B4; }
html body aside.sidebar .account-menu .account-menu-label-main { color: #FFF; }
html body aside.sidebar .account-menu .account-menu-label-sub { color: #B8B7B4 !important; }
html body aside.sidebar .account-menu .account-menu-icon { color: #FFF; }
html body aside.sidebar .account-menu .account-menu-chev { color: #B8B7B4; }
html body aside.sidebar .account-menu .account-submenu-item { color: #FFF; }
html body aside.sidebar .account-menu .account-submenu-check { color: #2196F3; }
html body aside.sidebar .account-menu .account-menu-tier-badge { color: #FFF; }
html body aside.sidebar .account-menu .account-menu-tier-badge[data-tier="enterprise"] { color: #FFF; background: #1976D2; }
html body aside.sidebar .account-menu .account-menu-tier-badge[data-tier="max"] { color: #1F2121; background: #FFF; }
/* Stroke for SVGs uses currentColor; force it white */
html body aside.sidebar .account-menu svg {
  stroke: currentColor;
}

/* v47p.18 - footer org pill (button element) needs explicit left-align;
   browsers default <button> text-align to center which was pushing the
   name + Enterprise badge toward the middle of the row */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill,
html body aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill {
  text-align: left;
  justify-content: flex-start;
}
html body aside.sidebar .footer-org-text,
html body aside.sidebar .footer-org-name,
html body aside.sidebar .footer-org-tier-row,
html body aside.sidebar .footer-org-tier-badge {
  text-align: left;
}

/* v47p.19 - match menu item text to email muted color + remove blue focus ring */
html body aside.sidebar .account-menu .account-menu-item,
html body aside.sidebar .account-menu .account-menu-item .account-menu-label,
html body aside.sidebar .account-menu .account-menu-item .account-menu-label-main,
html body aside.sidebar .account-menu .account-submenu-item,
html body aside.sidebar .account-menu .account-submenu-item span {
  color: #B8B7B4;
}
html body aside.sidebar .account-menu .account-menu-item .account-menu-icon,
html body aside.sidebar .account-menu .account-submenu-item svg:first-child {
  color: #B8B7B4;
  stroke: #B8B7B4;
}
html body aside.sidebar .account-menu .account-menu-item:hover,
html body aside.sidebar .account-menu .account-menu-item:hover .account-menu-label-main,
html body aside.sidebar .account-menu .account-submenu-item:hover,
html body aside.sidebar .account-menu .account-submenu-item:hover span {
  color: #FFF;
}
html body aside.sidebar .account-menu .account-menu-item:hover .account-menu-icon,
html body aside.sidebar .account-menu .account-submenu-item:hover svg:first-child {
  color: #FFF;
  stroke: #FFF;
}
/* Sub-label (the "Dark"/"Light" line under Appearance) stays a touch dimmer */
html body aside.sidebar .account-menu .account-menu-label-sub {
  color: #8F8E8C !important;
}

/* Remove the persistent blue focus ring on menu items (was keeping
   "All settings" highlighted in blue after click) */
html body aside.sidebar .account-menu .account-menu-item,
html body aside.sidebar .account-menu .account-menu-item:focus,
html body aside.sidebar .account-menu .account-menu-item:active,
html body aside.sidebar .account-menu .account-submenu-item,
html body aside.sidebar .account-menu .account-submenu-item:focus,
html body aside.sidebar .account-menu .account-submenu-item:active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
/* Keyboard focus-visible: a faint white ring instead of blue */
html body aside.sidebar .account-menu .account-menu-item:focus-visible,
html body aside.sidebar .account-menu .account-submenu-item:focus-visible {
  outline: 1px solid rgba(255,255,255,0.18);
  outline-offset: -1px;
}

/* v47p.20 - bump footer hover backgrounds way up so they're clearly visible */
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill:hover,
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-link.footer-org-pill[aria-expanded="true"] {
  background: rgba(255,255,255,0.22) !important;
}
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn:hover,
html body aside.sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.22);
}

/* v47p.21 - make account-menu-header a clickable button with hover */
html body aside.sidebar .account-menu .account-menu-header {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 120ms ease;
  outline: none;
}
html body aside.sidebar .account-menu .account-menu-header:hover {
  background: rgba(255,255,255,0.07);
}
html body aside.sidebar .account-menu .account-menu-header:focus,
html body aside.sidebar .account-menu .account-menu-header:active {
  outline: none;
  box-shadow: none;
}
html body aside.sidebar .account-menu .account-menu-header:focus-visible {
  outline: 1px solid rgba(255,255,255,0.18);
  outline-offset: -1px;
}

/* v47p.22 - pill hover override using #sidebar to beat ID-specificity rules
   that were forcing the hover background back down to ~0.04 alpha */
/* Same for the bell button so it stays at 0.22 */
html body aside.sidebar#sidebar .sidebar-footer .footer-notif-btn#footer-notif-btn:hover,
html body aside.sidebar#sidebar .sidebar-footer .footer-notif-btn#footer-notif-btn[aria-expanded="true"],
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn:hover,
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-notif-btn#footer-notif-btn[aria-expanded="true"],
html body aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill:hover,
html body aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill[aria-expanded="true"],
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-settings-link.footer-org-pill:hover,
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-settings-link.footer-org-pill[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.22);
    background-color: rgba(255, 255, 255, 0.22);
}

/* ────────────────────
   v47p.23 - Tasks 4 + 7
   T7: kill black overscroll bleed + lock topbar opaque
   T4: text-thread chat layout, spinning Totaly hex thinking, soft composer,
  dotted connector chips, vertically-centered topbar pills
   ──────────────────── */

/* T7-1: html bg matches body bg → no rubber-band flash of black/white */
html { background: var(--surface-charcoal-deep) !important; }
html, body { overscroll-behavior: none; }

/* T7-2: topbar must be FULLY opaque + above content; content should never
   bleed past its bottom border on scroll */
header.topbar#topbar {
  background: var(--surface-charcoal-deep) !important;
  background-color: var(--surface-charcoal-deep) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 950 !important;
  isolation: isolate;
}
/* paint guard: solid overlay behind sticky topbar */
header.topbar#topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-charcoal-deep);
  z-index: -1;
}

/* T4-1: vertically center the topbar pills (etl/brain/clock) with the
   floating nav pill. Force every direct child onto the same baseline by
   matching padding & line-height. */
header.topbar#topbar { align-items: center !important; min-height: 64px; }
header.topbar#topbar > .topbar-right,
header.topbar#topbar > nav.gl-floating-pill {
  align-self: center;
}
header.topbar#topbar .status-row {
  align-items: center;
  height: 100%;
}
header.topbar#topbar .pill { line-height: 1; padding: 0.5rem 0.85rem; }

/* T4-2 - Text-thread layout: user msgs right-aligned, NO bubble on AI msg */
.ai-messages, .floating-chat-messages { display: flex; flex-direction: column; gap: 0.75rem; }

/* User: right-aligned, soft pill, max-width */
.ai-messages .msg-bubble.msg-user,
.floating-chat-messages .msg-bubble.msg-user {
  align-self: flex-end;
  margin-left: auto;
  max-width: 72%;
  background: var(--accent-primary-soft-08);
  border: 1px solid rgba(33,150,243,0.20);
  border-radius: 18px 18px 4px 18px;
  padding: 0.7rem 0.95rem;
  color: rgba(255,255,255,0.95);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Assistant: left-aligned, NO surrounding bubble, transparent bg */
.ai-messages .msg-bubble.msg-assistant,
.floating-chat-messages .msg-bubble.msg-assistant {
  align-self: flex-start;
  margin-right: auto;
  max-width: 90%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0;
  box-shadow: none;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose {
  color: var(--fg-inverse-strong);
  font-size: 0.95rem;
  line-height: 1.65;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose > *:first-child { margin-top: 0; }
.ai-messages .msg-bubble.msg-assistant .ai-prose > *:last-child { margin-bottom: 0; }
.ai-messages .msg-bubble.msg-assistant .ai-prose strong { color: var(--fg-inverse); font-weight: 600; }
.ai-messages .msg-bubble.msg-assistant .ai-prose code,
.ai-messages .msg-bubble.msg-assistant .ai-prose pre {
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--overlay-w-08) !important;
  border-radius: 8px;
  padding: 0.15rem 0.35rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose pre { padding: 0.7rem 0.9rem; }
.ai-messages .msg-bubble.msg-assistant .ai-prose table {
  border-collapse: collapse; margin: 0.5rem 0; font-size: 0.88rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose th,
.ai-messages .msg-bubble.msg-assistant .ai-prose td {
  border-bottom: 1px solid var(--border-overlay-10);
  padding: 0.4rem 0.7rem; text-align: left;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose th { color: rgba(255,255,255,0.7); font-weight: 600; }

/* T4-3 - Thinking state: pulsing "Thinking…" word + spinning Totaly hex */

.ai-thinking, .msg-thinking-plex {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem;
  padding: 0.4rem 0;
  border: 0;
  margin: 0 0 0.4rem 0;
  width: 100%;
}

/* v40.5h: Force normal whitespace inside the thinking block AND the
   parsed-markdown prose. The parent .msg-bubble sets
   white-space: pre-wrap (line 24543) which was making every newline
   in the rendered HTML render as a real line break - each
   thinking-step was rendering 5-6 blank lines below the label and
   ballooning to 130px tall, and bullet lists in .ai-prose were
   getting 25-30px of empty space between every <li>. The parsed
   markdown already has proper block elements (<p>, <ul>, <li>) so
   pre-wrap is wrong here. */
.ai-thinking, .ai-thinking *,
.msg-thinking-plex, .msg-thinking-plex *,
.ai-messages .msg-bubble.msg-assistant .ai-prose,
.ai-messages .msg-bubble.msg-assistant .ai-prose *,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose * {
  white-space: normal;
}

/* Claude-Code-style tight prose for assistant markdown output:
   compact bullets, short paragraph gaps. Match the dense feel of
   Claude Code chat output. */
.ai-messages .msg-bubble.msg-assistant .ai-prose p,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose p {
  margin: 0 0 0.5rem 0;
  line-height: 1.55;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose p:last-child,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose p:last-child {
  margin-bottom: 0;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose ul,
.ai-messages .msg-bubble.msg-assistant .ai-prose ol,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose ul,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose ol {
  margin: 0.35rem 0 0.6rem 0;
  padding-left: 1.35rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose li,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose li {
  margin: 0.15rem 0;
  padding: 0;
  line-height: 1.5;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose li > p,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose li > p {
  margin: 0;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose h1,
.ai-messages .msg-bubble.msg-assistant .ai-prose h2,
.ai-messages .msg-bubble.msg-assistant .ai-prose h3,
.ai-messages .msg-bubble.msg-assistant .ai-prose h4,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h1,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h2,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h3,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h4 {
  margin: 0.9rem 0 0.35rem 0;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose h1,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h1 {
  font-size: 1.1rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose h2,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h2 {
  font-size: 1rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose h3,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h3 {
  font-size: 0.94rem;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose h4,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose h4 {
  font-size: 0.9rem !important;
  color: var(--fg-primary-alpha) !important;
}
/* First heading flush to top */
.ai-messages .msg-bubble.msg-assistant .ai-prose > h1:first-child,
.ai-messages .msg-bubble.msg-assistant .ai-prose > h2:first-child,
.ai-messages .msg-bubble.msg-assistant .ai-prose > h3:first-child,
.ai-messages .msg-bubble.msg-assistant .ai-prose > h4:first-child,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose > h1:first-child,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose > h2:first-child,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose > h3:first-child,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose > h4:first-child {
  margin-top: 0;
}
/* Inline code chip - Claude Code style */
.ai-messages .msg-bubble.msg-assistant .ai-prose code,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose code {
  font-size: 0.86em;
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  background: var(--overlay-w-07);
  color: var(--fg-inverse-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ai-messages .msg-bubble.msg-assistant .ai-prose pre code,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose pre code {
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
}
/* Bold weight match */
.ai-messages .msg-bubble.msg-assistant .ai-prose strong,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose strong {
  font-weight: 600;
  color: rgba(255,255,255,0.96);
}
.ai-messages .msg-bubble.msg-assistant .ai-prose hr,
.floating-chat-messages .msg-bubble.msg-assistant .ai-prose hr {
  margin: 0.7rem 0;
  border: 0;
  border-top: 1px solid var(--overlay-w-12);
}
.ai-thinking .ai-thinking-text,
.msg-thinking-plex .msg-thinking-text {
  color: var(--fg-primary-alpha);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  animation: totaly-thinking-pulse 1.4s ease-in-out infinite;
  text-transform: none;
}
@keyframes totaly-thinking-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
/* Totaly thinking spinner (legacy standalone). Superseded by the .cl-thinking-spinner dots. */
/* Hide the legacy perplexity flower; the Claude-faithful row owns the header. */
.ai-thinking .plex-think,
.msg-thinking-plex .plex-think { display: none; }

/* T4-4 - Composer softening (idle + active states) */
.glass-composer, .chat-composer, .floating-chat-composer {
  border-radius: 22px !important;
  border: 1px solid var(--border-overlay-10) !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow:
    0 1px 0 var(--overlay-w-04) inset,
    0 18px 40px -22px var(--shadow-alpha-55) !important;
  padding: 0.85rem 0.95rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.glass-composer:focus-within, .chat-composer:focus-within, .floating-chat-composer:focus-within {
  border-color: rgba(33,150,243,0.45);
  background: var(--overlay-w-05);
}
.glass-composer textarea, .chat-composer textarea, .floating-chat-composer textarea {
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--fg-inverse);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  line-height: 1.55;
}

/* T4-5 - Connector chips: dotted outline by default, no fill */
.composer-chips .composer-chip,
.composer-chips .composer-chip-plus {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.22);
  color: var(--fg-secondary-alpha);
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
html body .composer-chips .composer-chip-plus { padding: 0.34rem 0.55rem; }
.composer-chips .composer-chip:hover,
.composer-chips .composer-chip-plus:hover {
  background: var(--accent-primary-soft-08);
  border-color: var(--accent-primary-alpha-55);
  color: var(--fg-inverse);
}
.composer-chips .composer-chip.is-selected, .composer-chips .composer-chip[aria-pressed="true"] {
  border: 1.5px dashed rgba(33,150,243,0.85);
  background: var(--accent-primary-soft-10);
  color: var(--fg-inverse);
}
.composer-chips .composer-chip .cc-ico { opacity: 0.85; }

/* T4-6 - Composer right-side controls (mic + send + model dropdown) */
.composer-actions .composer-mic,
.composer-actions .composer-send {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border-overlay-10) !important;
  background: var(--overlay-w-04) !important;
  color: var(--fg-primary-alpha) !important;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
}
.composer-actions .composer-mic:hover { background: var(--overlay-w-08); }
.composer-actions .composer-send {
  border-color: transparent;
}
.composer-actions .composer-send:hover { transform: translateY(-1px); }

/* T4-7 - Resolution polish: crisper text, sharper icons */
body, body * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.composer-chip svg, .composer-chip-plus svg, .composer-actions svg { shape-rendering: geometricPrecision; }

/* T4-8 - When chat is open ("ai-has-messages"), hide the KPI shortcut row
   and let the composer breathe */



/* T7-3 - main-content guard: don't allow content to render above topbar */
section.main { background: var(--surface-charcoal-deep) !important; }
main#main-content.main-content { background: transparent; }

/* ────────────────────
   v47p.24 - Task 11 - Brand color picker UI inside Appearance submenu
   ──────────────────── */
.account-submenu .brand-color-row { padding: 0.4rem 0 0.2rem; }
.account-submenu .account-submenu-divider {
  height: 1px;
  background: var(--overlay-w-08);
  margin: 0.4rem 0.6rem;
}
.account-submenu .brand-color-section { padding: 0.5rem 0.7rem 0.7rem; }
.account-submenu .brand-color-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--fg-primary-alpha);
  margin-bottom: 0.45rem;
  letter-spacing: 0.01em;
}
.account-submenu .brand-color-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}
.account-submenu .brand-color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.account-submenu .brand-color-swatch::-webkit-color-swatch { border: none; border-radius: 6px; }
.account-submenu .brand-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 6px; }
.account-submenu .brand-color-hex {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  background: var(--overlay-w-04);
  border: 1px solid var(--border-overlay-10);
  border-radius: 8px;
  color: var(--fg-inverse-strong);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  outline: 0;
}
.account-submenu .brand-color-hex:focus {
  border-color: rgba(33, 150, 243, 0.5);
  background: var(--border-soft);
}
.account-submenu .brand-color-reset {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border-overlay-10);
  border-radius: 8px;
  color: var(--fg-secondary-alpha);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.account-submenu .brand-color-reset:hover {
  background: var(--border-soft);
  color: var(--fg-inverse);
  border-color: var(--border-strong-alpha);
}
.account-submenu .brand-color-help {
  font-size: 0.7rem;
  color: var(--fg-muted-alpha);
  line-height: 1.35;
}

/* ════════════════════
   Task 15 - Division BI Dashboards  (.bi-*)
   Locked design: card bg rgba(255,255,255,0.92), 12px radius, ALL CAPS.
   Bar fill #1976D2; up #2E7D32; down #C62828; flat rgba(60,64,67,0.85).
   ════════════════════ */

/* ── Page wrapper ── */
.bi-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  background: transparent;
}

/* ── Sticky header ── */
.bi-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: rgba(18,19,20,0.96);
  border-bottom: 1px solid var(--overlay-w-07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bi-back-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bi-back-link:hover { color: var(--fg-inverse); }
.bi-header-title {
  display: none;
}
.bi-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.bi-period-sel {
  padding: 0.3rem 0.55rem;
  background: var(--overlay-w-08);
  border: 1px solid var(--overlay-w-12);
  border-radius: 7px;
  color: rgba(255,255,255,0.88);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  outline: none;
}
.bi-period-sel option { background: #1c1d1e; color: var(--fg-inverse); }

/* ── Refresh button ── */
.bi-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: rgba(25,118,210,0.15);
  border: 1px solid var(--accent-hover-soft-35);
  border-radius: 7px;
  color: #90CAF9;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, opacity 0.14s;
}
.bi-refresh-btn:hover:not(:disabled) {
  background: var(--accent-hover-soft-28);
  border-color: var(--accent-hover-alpha-55);
  color: #BBDEFB;
}
.bi-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bi-refresh-btn--spinning svg {
  animation: bi-spin 0.9s linear infinite;
}
@keyframes bi-spin {
  to { transform: rotate(360deg); }
}

/* ── Body scroll area ── */
.bi-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 2rem;
}

/* ── Generic card ── */
.bi-card {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
.bi-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(25,26,26,0.55);
  margin-bottom: 0.75rem;
}

/* ── KPI Strip ── */
.bi-kpi-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.6rem;
}
@media (max-width: 1100px) { .bi-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
/* v41.58h: component:kpi block L11212-L11212 moved to mobile-v2.css */

.bi-kpi-card {
  position: relative;
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 0.65rem 0.75rem 0.55rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.bi-kpi-flag--red {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 16px;
  height: 16px;
  background: var(--status-danger);
  color: var(--fg-inverse);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
}
.bi-kpi-eyebrow {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(25,26,26,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-kpi-value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--surface-charcoal-deep);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-kpi-delta {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bi-delta--up   { color: var(--status-success-deep); }
.bi-delta--down { color: var(--status-danger); }
.bi-delta--flat { color: rgba(60,64,67,0.85); }

.bi-sparkline {
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 0.25rem;
}
.bi-sparkline rect { fill: var(--accent-primary-hover); }

/* ── Hero grid ── */
/* [moved to mobile-v2.css v41.58k — was L11260-L11260 @media (max-width: 900px)] */

.bi-hero-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}

/* ── Heatmap ── */
.bi-heatmap-card { overflow-x: auto; }
.bi-heatmap-svg {
  display: block;
  width: 100%;
  min-width: 320px;
  height: auto;
}
.bi-heatmap-empty {
  color: rgba(25,26,26,0.45);
  font-size: 0.82rem;
  padding: 1rem 0;
  text-align: center;
}

/* ── Detail table ── */
.bi-table-card { overflow: hidden; }
.bi-table-wrap {
  overflow-x: auto;
  max-height: 340px;
  overflow-y: auto;
}
.bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.bi-table thead {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.96);
  z-index: 2;
}
.bi-table th {
  text-align: left;
  padding: 0.4rem 0.65rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(25,26,26,0.5);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  white-space: nowrap;
}
.bi-table td {
  padding: 0.38rem 0.65rem;
  color: var(--surface-charcoal-deep);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.bi-table tbody tr:hover td { background: rgba(25,118,210,0.04); }
.bi-table tbody tr:last-child td { border-bottom: none; }

/* ── C4: Division tab expansion -- extra_sections chrome ──────────────────
   New components for Sales/D2D/Operations/Retention/Finance extra sections:
   funnel, leaderboard, waterfall, pacing, cohort heatmap wrapper, route-map
   placeholder, generic TODO card. Reuses .bi-card chrome (rgba(255,255,255,.92)
   bg, 12px radius) and the C4_BLUE (#2196F3) accent per spec. */
.bi-extra-sections,
.bi-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
/* v41.58h: misc block L11341-L11341 moved to mobile-v2.css */

.bi-extra-card { min-width: 0; }
.bi-extra-note {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-style: italic;
  color: rgba(25,26,26,0.4);
}

/* ── Funnel ── */

/* ── Leaderboard ── */
.bi-funnel-svg,
.bi-leaderboard-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Waterfall (P&L / MRR movement) ── */
.bi-waterfall-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

/* ── Season pacing projection strip ── */
.bi-pacing-projection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--overlay-k-06);
  font-size: 0.72rem;
  color: rgba(25,26,26,0.55);
}
.bi-pacing-projection strong { color: var(--surface-charcoal-deep); font-weight: 800; }

/* ── Route map placeholder (TODO: no geo view wired yet, R5) ── */
.bi-route-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border: 1.5px dashed var(--accent-primary-soft-35);
  border-radius: 10px;
  background: rgba(33,150,243,0.04);
}
.bi-route-map-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-primary-soft-12);
  color: var(--brand-blue-pure);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.bi-route-map-placeholder-text {
  font-size: 0.78rem;
  color: rgba(25,26,26,0.55);
  text-align: center;
  max-width: 280px;
}

/* ── Generic TODO/placeholder card (unwired connectors) ── */
.bi-todo-card { border: 1.5px dashed rgba(33,150,243,0.3); }
.bi-todo-body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(25,26,26,0.6);
  line-height: 1.4;
}
.bi-todo-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--accent-primary-soft-14);
  color: #1565C0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* v41.58h: misc block L11438-L11441 moved to mobile-v2.css */

/* ── Finance report sections ── */
.bi-report-sections { display: flex; flex-direction: column; gap: 0.75rem; }
.bi-section {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}
.bi-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(25,26,26,0.6);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--overlay-k-06);
  user-select: none;
}
.bi-section-title::-webkit-details-marker { display: none; }
.bi-section[open] .bi-section-title { color: var(--surface-charcoal-deep); }
.bi-section-source {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(25,118,210,0.8);
  background: rgba(25,118,210,0.08);
  border-radius: 4px;
  padding: 1px 5px;
}
.bi-section-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.bi-section-table td { padding: 0.42rem 1rem; }
.bi-row-label {
  color: rgba(25,26,26,0.6);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  width: 50%;
}
.bi-row-value {
  color: var(--surface-charcoal-deep);
  font-weight: 700;
  font-size: 0.85rem;
}
.bi-row-acct { font-size: 0.7rem; font-weight: 400; color: rgba(25,26,26,0.45); }
.bi-row-qb-stub .bi-row-value { color: rgba(25,26,26,0.35); }
.bi-qb-stub-val { font-size: 0.72rem; font-style: italic; }
.bi-section-table tr:nth-child(even) td { background: rgba(0,0,0,0.018); }
.bi-section-table tr:last-child td { border-top: 1px solid var(--overlay-k-06); font-weight: 800; }

/* ── QuickBooks CTA ── */
.bi-qb-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(25,118,210,0.05);
  border-bottom: 1px solid var(--accent-hover-soft-10);
  font-size: 0.78rem;
  color: rgba(25,26,26,0.7);
}
.bi-qb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #2CA01C;
  color: var(--fg-inverse);
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}
.bi-qb-link {
  color: var(--accent-primary-hover);
  font-weight: 600;
  text-decoration: none;
}
.bi-qb-link:hover { text-decoration: underline; }

/* Task 23: QB connection status pill in Finance dashboard. */
.bi-qb-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 12px 0;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.bi-qb-pill--ok {
  background: #E8F5E9;
  color: #1B5E20;
  border-color: #A5D6A7;
}
.bi-qb-pill--off {
  background: #FFF3E0;
  color: #6D4C00;
  border-color: #FFCC80;
}
.bi-qb-pill--warn {
  background: #FFEBEE;
  color: #842029;
  border-color: #F5C2C7;
}
.bi-qb-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.bi-qb-pill-link {
  color: inherit;
  text-decoration: underline;
  margin-left: auto;
  font-weight: 700;
}
.bi-qb-connect-btn {
  background: #2C5F2D;
  color: var(--fg-inverse);
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: auto;
}
.bi-qb-connect-btn:hover { background: #1B5E20; }

/* ── Alerts bar ── */
.bi-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bi-alert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
}
.bi-alert-icon {
  width: 18px;
  height: 18px;
  background: var(--status-danger);
  color: var(--fg-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Insights card ── */
.bi-insights-card .bi-insights-body { font-size: 0.85rem; color: rgba(25,26,26,0.75); line-height: 1.6; }
.bi-insights-loading { color: rgba(25,26,26,0.4); font-style: italic; font-size: 0.8rem; }
.bi-insight-text { margin: 0; }
.bi-insights-na { color: rgba(25,26,26,0.38); font-size: 0.78rem; font-style: italic; margin: 0; }

/* ── Skeleton loaders ── */
.bi-skeleton { display: flex; flex-direction: column; gap: 0.75rem; }
.bi-skel-strip {
  height: 80px;
  background: var(--overlay-w-12);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out infinite;
}
.bi-skel-heroes {
  height: 200px;
  background: var(--overlay-w-08);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out 0.1s infinite;
}
.bi-skel-heat {
  height: 150px;
  background: var(--border-soft);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out 0.2s infinite;
}
.bi-skel-table {
  height: 200px;
  background: var(--overlay-w-05);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out 0.3s infinite;
}
@keyframes bi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Error / retry ── */
.bi-error {
  padding: 1.5rem;
  text-align: center;
  color: rgba(198,40,40,0.85);
  font-size: 0.85rem;
  font-weight: 600;
}
.bi-retry-btn {
  margin-left: 0.5rem;
  padding: 0.25rem 0.7rem;
  background: rgba(198,40,40,0.1);
  border: 1px solid rgba(198,40,40,0.25);
  border-radius: 6px;
  color: var(--status-danger);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── KPI strip empty ── */
.bi-kpi-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.38);
  font-size: 0.82rem;
  padding: 1.5rem 0;
}

/* Task 17: missing CSS rules from Pass 4 audit (UC-01..UC-03) */
.automations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.account-menu-item--submenu {
  position: relative;
  padding-right: 1.5rem;
}
.account-menu-item--submenu::after {
  content: '\203A';
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-secondary-light-alpha);
  font-size: 0.95rem;
}

/* ── Task 18: Mobile responsiveness (iPhone primary, iPad portrait) ─────
   All rules scoped to max-width 1023px so desktop layout is untouched.
*/
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; max-width: 100vw; }  .topbar { display: none; }
  .main-content, .reports-view, .settings-view {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  /* Touch target floor (Apple HIG: 44pt) */
  button, a.nav-item, .rc-chip, .rc-icon-btn, .composer-chip, .composer-mic, .composer-send {
    min-height: 44px;
  }
  .rc-send,
  .composer-send,
  .composer-mic { min-width: 44px; min-height: 44px; }

  /* Chart responsive wrapper utility */

  /* BI dashboards reflow */
  .bi-page { padding: 12px !important; }
  .bi-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .bi-hero-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bi-kpi-card { padding: 12px !important; }
  .bi-card { padding: 12px !important; }
  .bi-hero-svg, .bi-heatmap-svg, .bi-sparkline { max-width: 100%; height: auto; }
  .bi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bi-header { flex-wrap: wrap; gap: 8px; }

  /* KPI grids reflow */
  .kpi-grid,
  .report-cards,
  .home-dash-grid,
  .coo-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .home-dash-card,
  .gl-dash-tile,
  .gl-division-card { padding: 12px !important; }

  /* Card padding tighter */
  .card { padding: 12px !important; }

  /* Page hero stacks */
  .page-hero {
    flex-direction: column !important;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Composer: anchor send button row to bottom; safe-area-inset */
  .ai-composer-wrap,
  .floating-chat,
  .rich-composer { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  html body .rc-textarea { max-height: 120px; font-size: 16px; }

  /* Composer chips row scrolls instead of overflow */
  .composer-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .composer-chips::-webkit-scrollbar { display: none; }

  /* Period/compare pill rows on Ask scroll horizontally */
  .gl-floating-pill {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100vw;
  }

  /* Modal full-screen on mobile */
  .modal-box, .modal-box--wide {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: 0;
    max-height: 100dvh !important;
    margin: 0;
    top: 0;
    left: 0;
  }
  .modal { padding: 0; align-items: flex-end; }  .data-table thead { display: none; }
  .data-table tr {
    background: var(--overlay-w-03);
    border: 1px solid var(--overlay-w-08);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .data-table td {
    padding: 0.3rem 0;
    border: none;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  img { max-width: 100%; height: auto; }
  .preset-iframe, iframe { width: 100%; max-width: 100vw; }

  /* Floating chat anchored bottom-right with safe-area */
  #floating-chat,
  .floating-chat-toggle {
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
  }
}

/* iPhone Plus and below: single-column KPI strips */
/* v41.58h: component:kpi block L11836-L11839 moved to mobile-v2.css */

/* iPhone 12 and below: tighten further */
/* v41.58h: component:kpi block L11842-L11852 moved to mobile-v2.css */
/* ── Mobile UX deep-fix (composer strands + nav corrections) ── */
@media (max-width: 1023px) {

  /* ── 1. Chat composer: eliminate top and bottom strand artifacts ────
  The strand at top comes from the gradient background (linear-gradient
  to transparent) on .ai-composer-wrap bleeding into the view above.
  The strand at bottom is a transparent gap between the fixed wrap and
  the viewport edge. Fix: solid background, no transparent fade, clean
  safe-area padding, no top border or pseudo-element divider.
  */

  /* Remove the gradient that creates the top strand on sticky/fixed composer */
  

  /* Fixed composer (set by enforceMobileAskLayout) needs solid bg + safe area */
  .ai-view .ai-composer-wrap {
    background: #1c1c1e !important;
    background-image: none;
    border-top: none;
    /* Extend bg into the safe area so no grey strip shows at bottom */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    box-shadow: none;
  }

  /* The rich-composer box itself: no top border, clean radius at bottom */
  .ai-view .rich-composer,
  body.route-ask .ai-view .rich-composer {
    border-top: none;
    margin-bottom: 0;
  }

  /* Floating-chat composer: remove the top border that creates a visible line
  (the strand) at the seam where the composer meets the messages area */
  .floating-chat-composer {
    border-top: none;
    background: var(--bg-card) !important;
    background-image: none;
  }

  /* Home launcher (period/compare pills): ensure no bottom overlap with composer */
  .ai-view .home-launcher {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }

  /* Period pills / compare pills: no overflow strand */
  .gl-floating-pill {
    border: none;
    border-bottom: none;
  }

  /* ── 2. Divisions grid: tighten on mobile ──────────────────── */
  .gl-divisions-grid {
    padding: 0 12px 80px;
  }

  /* ── 3. Dashboard tile grid: single col on small phones ──────────── */
  .gl-dash-pack {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px 80px;
  }

  /* ── 4. Dashboard pack view: back link + title padding ───────────── */
  .gl-dash-pack-view {
    padding: 12px 0;
  }
  .gl-dash-pack-head {
    padding: 0 12px;
  }
  .gl-dash-pack-sub {
    padding: 0 12px;
  }

  /* ── 5. Divisions view: bottom padding so content clears the topbar ─ */
  

  /* ── 6. Period pills (gdpp): unselected pills visible on dark mobile bg ─
  Desktop uses rgba(25,26,26,0.62) text on a near-transparent container
  which becomes invisible on the dark page bg. Mobile override makes
  unselected pills readable without touching the active (#1976D2) state.
  */
  html body .gl-dash-pack-period {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  html body .gl-dash-pack-period .gdpp {
    color: rgba(255, 255, 255, 0.72);
  }
  html body .gl-dash-pack-period .gdpp:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.10);
  }
  html body .gl-dash-pack-period .gdpp.is-active {
    background: #1976D2;
    color: #FAFAFA;
  }

  /* ── 7. Strand fix: clear .main double-padding on mobile ─────────────
  body already sets padding-top for the fixed mobile topnav height.
  .main inherits a desktop padding-top that creates a second gap
  (the horizontal strand/seam) between the topnav and the content.
  Uses html body specificity prefix to beat the 820px rule at line ~3089.
  */
  html body section.main,
  html body .main,
  html body section#main,
  html body section#main.main {
    padding-top: 0;
  }
}

/* v41.58h: misc block L11949-L11954 moved to mobile-v2.css */

/* ────────────────────
   Task 31: Admin Error Log Viewer (/admin/errors)
   Uses existing tokens. Reuses .bi-table style for the data table.
   No new colors except tones already in the design system.
   ──────────────────── */
.ae-page { display: flex; flex-direction: column; gap: var(--space-5, 16px); padding: var(--space-2, 8px) 0; }
.ae-header,
.ae-eyebrow,
.ae-title { display: none; }

.ae-forbidden { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6, 24px); text-align: center; }
.ae-forbidden-title { font-weight: 700; letter-spacing: .1em; color: var(--text); margin-bottom: 6px; }
.ae-forbidden-sub,
.ae-subtitle {
    color: var(--muted);
    font-size: var(--text-sm);
}

.ae-filters { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); align-items: center; padding: var(--space-3, 12px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ae-filter-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ae-filter-label { font-size: .68rem; font-weight: 700; color: var(--muted); letter-spacing: .12em; margin-right: 4px; }
.ae-filter-chip { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.ae-filter-chip:hover { color: var(--text); border-color: var(--primary-strong, var(--accent-primary-hover)); }

.ae-route-input { padding: 6px 10px; font-size: var(--text-sm); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, var(--surface)); color: var(--text); min-width: 220px; }
.ae-route-input:focus { outline: none; border-color: var(--primary, var(--accent-primary-hover)); }

.ae-refresh-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ae-refresh-btn:hover { color: var(--primary-strong, var(--accent-primary-hover)); border-color: var(--primary-strong, var(--accent-primary-hover)); }

.ae-table-host { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ae-table-wrap { width: 100%; overflow-x: auto; }
.ae-table { width: 100%; }
.ae-table th { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.ae-row { cursor: pointer; transition: background .12s ease; }
.ae-row:hover { background: rgba(30, 136, 229, 0.04); }
.ae-row--open { background: rgba(30, 136, 229, 0.08); }
.ae-col-when { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; font-size: .8rem; }
.ae-col-route { color: var(--muted); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-col-class { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78rem; color: var(--text); white-space: nowrap; }
.ae-col-msg { color: var(--text); font-size: var(--text-sm); max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ae-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-danger); box-shadow: 0 0 0 0 rgba(198,40,40,0.7); animation: ae-pulse 1.4s infinite; }
@keyframes ae-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198,40,40,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(198,40,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); }
}

.ae-drawer-row { background: var(--surface-2, var(--surface)); }
.ae-drawer { padding: var(--space-4, 14px) var(--space-5, 18px); display: flex; flex-direction: column; gap: var(--space-3, 12px); border-top: 1px solid var(--border); }
.ae-drawer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3, 12px); }
.ae-drawer-grid > div { display: flex; flex-direction: column; gap: 2px; }
.ae-drawer-key { font-size: .62rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.ae-drawer-val { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .8rem; color: var(--text); word-break: break-all; }
.ae-drawer-section { display: flex; flex-direction: column; gap: 4px; }
.ae-drawer-msg { font-family: inherit; font-size: var(--text-sm); white-space: pre-wrap; }
.ae-drawer-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; line-height: 1.5; color: var(--text); overflow-x: auto; max-height: 320px; }
.ae-drawer-stack { white-space: pre; }
.ae-drawer-na { color: var(--muted); font-size: .78rem; font-style: italic; }
.ae-drawer-actions { display: flex; gap: 8px; align-items: center; }
.ae-resolve-btn { background: var(--primary, var(--accent-primary-hover)); color: var(--primary-ink, var(--fg-inverse)); border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: .76rem; letter-spacing: .04em; cursor: pointer; }
.ae-resolve-btn:hover { filter: brightness(1.08); }
.ae-resolve-btn:disabled { opacity: .6; cursor: default; }
.ae-resolved-mark { color: var(--status-success-deep); font-size: .76rem; font-weight: 600; letter-spacing: .03em; }
.ae-resolved-mark--inline { background: rgba(46,125,50,0.1); padding: 1px 7px; border-radius: 999px; font-size: .65rem; }

.ae-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: var(--space-2, 8px); }
.ae-pager-info { color: var(--muted); font-size: .76rem; margin-right: auto; }
.ae-pager-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: .72rem; font-weight: 600; cursor: pointer; }
.ae-pager-btn:hover:not(:disabled) { color: var(--primary-strong, var(--accent-primary-hover)); border-color: var(--primary-strong, var(--accent-primary-hover)); }
.ae-pager-btn:disabled { opacity: .4; cursor: default; }

.ae-loading, .ae-error, .ae-empty { padding: var(--space-6, 24px); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.ae-error { color: var(--status-danger); }
.ae-empty-title { font-weight: 700; letter-spacing: .12em; color: var(--text); margin-bottom: 6px; }
.ae-empty-sub { color: var(--muted); font-size: .82rem; }
.ae-drawer-loading, .ae-drawer-error { padding: var(--space-4, 14px); color: var(--muted); font-size: var(--text-sm); }

/* ────────────────────
   Mobile Chat Home Overhaul - chathome-fix
   All rules are mobile-only (max-width: 1023px) and scoped to route-ask
   or the mt-switch component to avoid touching desktop chat or desktop home.
   Added AFTER the parallel subagent's last edit (2026-04-26 12:18:51 UTC).
   ──────────────────── */
@media (max-width: 1023px) {

  /* ── Issue 1: Chat is the home view ────────────────────
  After login the hash is set to #/ask by existing JS logic.
  No JS change needed - the CSS here ensures the chat view looks right
  as the landing screen. */

  /* ── Issue 2: Hide the topbar chip pair (mt-switch) on mobile chat ───── */

  /* ── Issue 3: Hide time-range pill row on mobile chat ───────────────────
  .home-dash-toggles is the "Showing / vs / avg" row inside .home-launcher.
  We hide it on the ask route; the rest of the launcher (KPI tabs) can stay. */
  

  /* ── Issues 4 + 5: Composer strand fix (top + bottom) ───────────────────
  Top strand: the previous fix set background:#1c1c1e which creates a solid
  opaque slab above the composer. Instead use a soft fade from transparent
  to the page bg so the composer flows out of the page without a visible seam.
  Bottom strand: ensure the composer is flush with the safe area at the bottom.
  */
  

  /* Ensure body::after pseudo-element color also matches the fade */
  

  /* ── Issue 6: Glass composer ────────────────────
  Apply glassmorphism to the rich-composer on mobile chat view.
  Using the same blur/saturate tokens used by floating-chat-toggle.
  Override the flat solid #2a2b2c set by the earlier deep-fix rule.
  */
  

  

  /* ── Issue 7: Layout - raise composer, clean void ────────────────────
  The totaly logo is centered in the viewport via .ai-bg-mark (position:fixed,
  top:50%, transform:-50%). The composer is fixed at bottom:0.
  We position the composer so it sits at ~60% down the viewport, and
  the gap between logo and composer becomes intentional breathing room.

  We do this by moving the composer up - it's currently at bottom:0.
  Set bottom to a value that places the top of the composer at ~62% viewport.
  Composer is approx 100px tall + safe-area. At 844px viewport, 62% = 524px from top,
  so bottom = 844 - 524 - 100 = 220px. Use dvh for precision.
  */
  

  /* When messages are present, pin back to bottom */
  

  /* Adjust home-launcher (KPI tabs) to sit just above the raised composer */
  

  /* Center the logo mark vertically between topbar and composer ──────────── */
  
}

/* =========================================================================
   ZIP CODE RETENTION HEATMAP - Task 36
   Scoped to .zip-heatmap-* classes - never touches existing selectors.
   Added at END per conflict-avoidance rule (mobile audit files absent).
   Yellow #F9A825 authorized by task spec as one-time addition for heatmap.
   ========================================================================= */

/* Card chrome */
.zh-card {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 20px 20px 16px;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 24px;
}

.zh-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(60,64,67,0.6);
  margin-bottom: 4px;
}

.zh-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.85);
  margin-bottom: 14px;
}

/* Summary bar */
.zh-summary-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: rgba(60,64,67,0.8);
}
.zh-summary-sep { color: rgba(60,64,67,0.35); }
.zh-summary-green { color: var(--status-success-deep); }
.zh-summary-yellow { color: #F9A825; }
.zh-summary-red { color: var(--status-danger); }
.zh-summary-total { color: rgba(60,64,67,0.9); }

/* Map layout */
.zh-map-area {
  display: flex;
  gap: 0;
  position: relative;
}
.zh-map-wrap {
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.zh-map-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
}

/* Zip polygons */
.zh-zip-poly {
  cursor: pointer;
  outline: none;
}
.zh-zip-poly:focus > path {
  stroke-width: 2.5;
  stroke: rgba(25,118,210,0.8);
}

/* Pulse animation on click */
@keyframes zh-pulse {
  0%   { opacity: 1; }
  40%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.zh-zip-pulse {
  animation: zh-pulse 0.55s ease-out;
}

/* Labels */
.zh-zip-label {
  pointer-events: none;
  user-select: none;
}

/* Direction icons */
.zh-dir-icon { font-size: 0.72em; }
.zh-dir-up   { color: var(--status-success-deep); }
.zh-dir-mid  { color: #F9A825; }
.zh-dir-down { color: var(--status-danger); }

/* Tooltip */
.zh-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(255,255,255,0.97);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  padding: 10px 14px;
  min-width: 160px;
  max-width: 240px;
  pointer-events: auto;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.07);
}
.zh-tip-zip {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(10,10,10,0.85);
  margin-bottom: 4px;
}
.zh-tip-retention {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1;
}
.zh-tip-row {
  font-size: 11px;
  color: rgba(60,64,67,0.8);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zh-tip-row strong { color: rgba(10,10,10,0.85); }
.zh-tip-nodata {
  font-size: 11px;
  color: var(--fg-secondary-light-alpha);
  font-style: italic;
  margin-top: 4px;
}
.zh-tip-detail-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid var(--accent-hover-soft-35);
  border-radius: 5px;
  background: transparent;
  color: var(--accent-primary-hover);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s;
}
.zh-tip-detail-btn:hover {
  background: rgba(25,118,210,0.08);
}

/* Drill-down panel */
.zh-drilldown-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  border-radius: 0 8px 8px 0;
  box-shadow: -4px 0 20px rgba(0,0,0,0.10);
  transition: width 0.25s ease;
  z-index: 10;
}
.zh-drilldown-panel--open {
  width: 260px;
  min-height: 300px;
  padding: 16px;
}
.zh-drill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.zh-drill-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(10,10,10,0.85);
}
.zh-drill-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: rgba(60,64,67,0.6);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.zh-drill-close:hover { background: var(--overlay-k-06); }
.zh-drill-kpis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zh-drill-kpi {
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  padding: 10px 12px;
}
.zh-drill-kpi-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(60,64,67,0.65);
  margin-bottom: 4px;
}
.zh-drill-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: rgba(10,10,10,0.85);
  line-height: 1;
}
.zh-drill-kpi-sub {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-secondary-light-alpha);
  margin-top: 3px;
}
.zh-drill-kpi--down { color: var(--status-danger); }
.zh-drill-nodata {
  font-size: 12px;
  color: var(--fg-secondary-light-alpha);
  font-style: italic;
}
.zh-drill-note {
  font-size: 10px;
  color: rgba(60,64,67,0.5);
  font-style: italic;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
  line-height: 1.5;
}

/* Legend */
.zh-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.025);
  border-radius: 8px;
}
.zh-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60,64,67,0.75);
}
.zh-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.12);
}

/* Loading skeleton */
.zh-skeleton {
  padding: 8px 0;
}
.zh-skel-bar {
  height: 20px;
  background: linear-gradient(90deg, var(--overlay-k-06) 25%, rgba(0,0,0,0.10) 50%, var(--overlay-k-06) 75%);
  background-size: 400% 100%;
  animation: zh-shimmer 1.4s infinite;
  border-radius: 4px;
  margin-bottom: 12px;
  width: 60%;
}
.zh-skel-map {
  height: 360px;
  background: linear-gradient(90deg, var(--overlay-k-06) 25%, rgba(0,0,0,0.10) 50%, var(--overlay-k-06) 75%);
  background-size: 400% 100%;
  animation: zh-shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes zh-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Empty state */
.zh-empty-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(60,64,67,0.6);
}
.zh-empty-sub {
  font-size: 12px;
  color: rgba(60,64,67,0.45);
}

/* Error state */
.zh-empty-state,
.zh-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
}
.zh-error-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--status-danger);
}
.zh-reload-btn {
  padding: 7px 16px;
  border: 1px solid rgba(25,118,210,0.4);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-primary-hover);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.15s;
}
.zh-reload-btn:hover { background: rgba(25,118,210,0.07); }

/* Outer wrapper (appended to BI body) */
.zh-sales-heatmap-outer {
  margin-top: 16px;
}

/* Mobile responsiveness */
/* v41.58h: component:panel block L12580-L12597 moved to mobile-v2.css */

/* Print-friendly (for report button PDF) */
@media print {
  .zh-drilldown-panel { display: none; }
  .zh-card { box-shadow: none; border: 1px solid rgba(0,0,0,0.12); }
  .zh-legend { break-inside: avoid; }
}

/* Dark mode awareness */
@media (prefers-color-scheme: dark) {
  .zh-card {
    background: rgba(30,30,32,0.92);
    color: rgba(255,255,255,0.88);
  }
  .zh-card-title { color: var(--fg-primary-alpha); }
  .zh-card-eyebrow { color: rgba(255,255,255,0.5); }
  .zh-tooltip {
    background: rgba(30,30,32,0.97);
    color: rgba(255,255,255,0.88);
    border-color: var(--overlay-w-08);
  }
  .zh-tip-zip { color: rgba(255,255,255,0.9); }
  .zh-drilldown-panel {
    background: rgba(30,30,32,0.96);
    color: rgba(255,255,255,0.88);
  }
  .zh-drill-kpi { background: var(--border-soft); }
  .zh-legend { background: var(--overlay-w-04); }
  .zh-legend-item { color: rgba(255,255,255,0.65); }
}

.rb-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
  background: rgba(255,255,255,0.80);
  color: rgba(60,64,67,0.65);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s, color 0.18s;
  z-index: 20;
  line-height: 1;
}
.rb-btn:hover,
.rb-btn:focus {
  opacity: 1;
  background: rgba(255,255,255,0.96);
  color: var(--accent-primary-hover);
  border-color: var(--accent-hover-soft-35);
  outline: none;
}
.rb-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-hover-soft-45);
}

/* Always show on mobile */
/* v41.58h: misc block L12581-L12583 moved to mobile-v2.css */

/* Show on card hover */
.bi-kpi-card:hover .rb-btn,
.bi-card:hover .rb-btn,
.zh-card:hover .rb-btn {
  opacity: 1;
}

.rb-btn-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Popover */
.rb-popover {
  background: rgba(255,255,255,0.97);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 172px;
  z-index: 99999;
  overflow: hidden;
}
.rb-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: rgba(30,30,30,0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.rb-pop-item:last-child { border-bottom: none; }
.rb-pop-item:focus {
  outline: none;
  background: var(--accent-hover-soft-10);
}

/* Print: hide report buttons */
@media print {
  .rb-btn, .rb-popover { display: none; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .rb-btn {
    background: rgba(30,30,32,0.80);
    color: rgba(255,255,255,0.5);
    border-color: var(--border-overlay-10);
  }
  .rb-btn:hover, .rb-btn:focus {
    background: rgba(30,30,32,0.97);
    color: #90CAF9;
  }
  .rb-popover {
    background: rgba(30,30,32,0.97);
    border-color: var(--overlay-w-08);
  }
  .rb-pop-item { color: rgba(255,255,255,0.80); }
  .rb-pop-item:hover { color: #90CAF9; background: var(--border-soft); }
}

/* ----------------------------------------------------------
   FIX 1: Edge-to-edge horizontal scroll for dashboard chart
   The home-dash-grid (KPI card grid + week-bar charts) bleeds
   outside the ai-view side padding on mobile so users can
   scroll the chart timeline from left viewport edge to right.
   ---------------------------------------------------------- */
/* v41.58h: Ask block L13216-L13292 moved to mobile-v2.css Section 4b */

/* ----------------------------------------------------------
   FIX 4: General mobile scroll quality improvements
   - Momentum scrolling on all scroll containers
   - overscroll-behavior to prevent scroll chaining + pull-to-refresh
   - 100dvh on mobile-specific min-height rules that previously used 100vh
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Momentum scrolling on key scroll containers */
  .main, section#main, .main-content, .ai-messages, .chat-messages, .floating-chat-messages, .sidebar-scroll, .sidebar-history, #chat-history-list, .bi-body, .bi-table-wrap, .reports-view, .settings-view, .home-launcher {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent body scroll chaining when inner container scrolls */
  .main,
  section#main,
  .main-content {
    overscroll-behavior-y: contain;
  }

  /* Scrollable inner containers: contain scroll, prevent pull-to-refresh bubble-up */
  .ai-messages,
  .chat-messages,
  .floating-chat-messages,
  .sidebar-scroll,
  #chat-history-list,
  .bi-table-wrap {
    overscroll-behavior: contain;
  }

  /* Horizontal-only scrollers: restrict touch-action */
  .bi-table-wrap, .home-launcher .home-dash-grid, .ai-view .home-dash-grid, .composer-chips, .home-launcher:not(.home-dash-grid) {
    touch-action: pan-x;
  }

  /* 100dvh fixes: replace 100vh on mobile-specific height constraints
  that cause the content to be hidden under the iOS address bar */
  .auth-view,
  .auth-view--glass {
    min-height: 100dvh !important;
  }

  /* Sticky elements: ensure explicit top for iOS Safari rubber-band safety */
    .ai-view {
    position: relative;
  }
}

/* Narrower mobile: stronger dvh fix for the locked-height views */
/* v41.58h: Ask block L13342-L13355 moved to mobile-v2.css Section 4b */

/* ────────────────────
   Task 32: Mobile composer polish + model picker (mob-composer)
   Scope: gated entirely behind @media (max-width: 768px). Desktop pixels
   are NOT modified. The .rc-model-chip element is hidden on desktop.
   ──────────────────── */

/* Desktop: hide the new chip. Desktop continues to use the existing <select>. */

/* v41.58h: component:rich-composer block L12720-L12790 moved to mobile-v2.css */

/* ── Model picker bottom sheet (modal - full-viewport overlay) ───────────── */
/* #model-sheet-root contains .ms-overlay and .ms-sheet as SIBLINGS. */

/* ── Task 33: Product Metrics dashboard (.apm-*) ──────────────────── */
.apm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.apm-header {
  position: relative;
  margin-bottom: 12px;
  min-height: 40px;
}
.apm-eyebrow,
.apm-h1,
.apm-subtitle {
  display: none;
}
.apm-refresh-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: var(--fg-inverse-strong);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-primary-hover);
  cursor: pointer;
  transition: background 0.15s ease;
}
.apm-refresh-btn:hover { background: var(--fg-inverse); }
.apm-refresh-btn:disabled { opacity: 0.6; cursor: progress; }
.apm-refresh-btn--spinning svg { animation: apm-spin 0.9s linear infinite; }
@keyframes apm-spin { to { transform: rotate(360deg); } }

.apm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
/* v41.58h: misc block L12782-L12782 moved to mobile-v2.css */

.apm-card {
  background: var(--fg-inverse-strong);
  border: 1px solid var(--fg-muted-light-alpha);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 130px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.06);
}
.apm-card--span2 { grid-column: span 2; }
/* v41.58h: misc block L12793-L12793 moved to mobile-v2.css */
.apm-card--wide {
  background: var(--fg-inverse-strong);
  border: 1px solid var(--fg-muted-light-alpha);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.06);
}

.apm-title {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--surface-charcoal-deep);
}
.apm-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--surface-charcoal-deep);
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.apm-num--sm { font-size: 20px; }
.apm-sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(60, 64, 67, 0.85);
}
.apm-split {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.apm-split-cell { flex: 1 1 50%; }
.apm-split-key {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(60, 64, 67, 0.65);
  margin-bottom: 2px;
}

.apm-spark {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 8px;
}
.apm-hbar {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
}

.apm-empty-mini {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--fg-secondary-light-alpha);
  padding: 18px 0;
}

.apm-overall {
  display: flex;
  gap: 24px;
  margin: 6px 0 14px;
}
.apm-overall-cell {
  background: rgba(60, 64, 67, 0.04);
  padding: 8px 14px;
  border-radius: 8px;
  min-width: 80px;
}

.apm-cohort-wrap { overflow-x: auto; }
.apm-cohort {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.apm-cohort th, .apm-cohort td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(60, 64, 67, 0.08);
}
.apm-cohort th {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(60, 64, 67, 0.65);
  text-transform: uppercase;
}
.apm-cohort td { font-weight: 600; color: var(--surface-charcoal-deep); }

/* Skeleton loading */
.apm-card--loading {
  position: relative;
  overflow: hidden;
}
.apm-card--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--fg-faint-alpha), transparent);
  animation: apm-shimmer 1.4s infinite;
}
@keyframes apm-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.apm-skel-eyebrow,
.apm-skel-title,
.apm-skel-num,
.apm-skel-line {
  background: var(--fg-muted-light-alpha);
  border-radius: 4px;
  margin-bottom: 8px;
}
.apm-skel-eyebrow { width: 60%; height: 10px; }
.apm-skel-title  { width: 40%; height: 14px; }
.apm-skel-num    { width: 50%; height: 28px; }
.apm-skel-line   { width: 100%; height: 12px; }

.apm-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--status-danger);
  letter-spacing: 0.04em;
}

.apm-forbidden {
  background: var(--fg-inverse-strong);
  border: 1px solid var(--fg-muted-light-alpha);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}
.apm-forbidden-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--surface-charcoal-deep);
  margin-bottom: 6px;
}
.apm-forbidden-sub {
  font-size: 12px;
  color: rgba(60, 64, 67, 0.85);
}

/* ────────────────────
   mob6fix: 6 mobile bug fixes (≤768px only). Desktop pixels untouched.
   FIX 1 chip uniformity, FIX 2 composer keyboard hug, FIX 3 top nav pill,
   FIX 4 hide suggestion row, FIX 5 fade chat thread, FIX 6 hide footer strand.
   ──────────────────── */
/* v41.58h: component:ai-view block L13571-L13712 moved to mobile-v2.css */

/* === LEGACY MOBILE BLOCKS REMOVED iter11 (see iter11 below) === */

/* ================================================================
   ███ MOBILE TOPNAV - PRODUCTION REBUILD iter10 (2026-04-26) ███

   Replaces 189 fragmented legacy rules with ONE definitive block.
   Selectors use html#__doc body#__b[data-app] to push specificity to
   (3,1,2) per ancestor chain → wins over every legacy rule. Each rule
   inside this block is the only one that should win.

   Layout:
  - Avatar 44x44 perfect circle (left, x: 14)
  - Switch oval pill 44 tall, auto width, 4px inner padding
  - Two segments: "Chat" + "Dashboards", each 36 tall, padding 0 18px
  - Active segment: blue #1976D2 background, white text
  - Inactive: transparent, 0.72 white text
  - Kebab 44x44 perfect circle (right, x: -14 from edge)

   Background:
  - Nav strip: 100% transparent. NO band, NO border, NO blur.
  - Each chip carries its own glass material via backdrop-filter.
  - Document scrolls under the strip - chips float above.

   Pill perfect-center fixes:
  - .mt-switch: align-items: center, padding 4px (4 top + 36 + 4 bottom = 44)
  - .mt-switch-opt: line-height 1, height 36, padding-top/bottom 0 with
  align-items: center on flex, so text sits centered to 36 box.
  - ::after pseudo content uses font-feature-settings to prevent leading
  imbalance.

   Scrolling:
  - body min-height: 100dvh + 200px (forces real scroll headroom so
  Comet's auto-collapse heuristic actually fires on user gesture).
  - html, body, #main: overflow-y: auto, overscroll-behavior: auto.
   ================================================================ */
/* v41.58h: Ask block L13843-L14038 moved to mobile-v2.css Section 4b */

/* ── Wave 2: Chat Streaming + Thinking States ──────────────────── */

/* 3-dot thinking pulse: used inside .chat-msg.assistant during inference */

/* Source-checking spinning ring -- pure CSS, no deps */

/* Phase label row shown while thinking */
.cs-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--fg-muted-alpha);
  padding: 0.2rem 0;
  min-height: 22px;
}

/* Token fade-in: each new chunk fades from transparent to full */

/* Source chip row above the bubble */
.cs-sources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.cs-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(25, 118, 210, 0.12);
  border: 1px solid var(--accent-hover-soft-28);
  color: rgba(100, 160, 240, 0.9);
  font-size: 0.72rem;
  text-decoration: none;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cs-source-chip:hover {
  background: var(--accent-hover-soft-22);
  border-color: rgba(25, 118, 210, 0.5);
  color: #90caf9;
}

/* "Thought for X.Xs" footer under the bubble */
.chat-msg-meta {
  font-size: 0.75rem;
  color: var(--muted, var(--fg-faint-cool));
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}



/* Smooth append wrapper for streamed text -- children fade in */

/* ════════════════════
   iMessage Flow Builder -- #/automations/imessage
   Constraints: border-radius 12px, ALL CAPS titles, no em dashes
   ════════════════════ */

/* Page layout */
.imsg-flow-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-charcoal-deep);
  overflow: hidden;
}

.imsg-flow-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--surface-charcoal);
  background: var(--bg-card);
  flex-shrink: 0;
}

.imsg-flow-back { flex-shrink: 0; }

.imsg-flow-title-wrap,
.imsg-flow-eyebrow,
.imsg-flow-title {
  display: none;
}

.imsg-flow-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Status chip */
.imsg-flow-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid;
}

.imsg-flow-status-chip--active {
  background: rgba(76, 175, 80, 0.12);
  color: var(--status-success);
  border-color: rgba(76, 175, 80, 0.35);
}

.imsg-flow-status-chip--paused {
  background: rgba(239, 83, 80, 0.10);
  color: var(--status-danger-soft);
  border-color: rgba(239, 83, 80, 0.3);
}

.imsg-flow-status-chip--test {
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
  border-color: rgba(33, 150, 243, 0.30);
}

/* Body split */
.imsg-flow-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

.imsg-flow-left {
  overflow-y: auto;
  padding: 18px 20px;
  border-right: 1px solid var(--surface-charcoal);
  background: var(--surface-charcoal-deep);
}

.imsg-flow-right {
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section titles */
.imsg-section-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-charcoal);
}

/* Treemap container */
.imsg-treemap-container {
  background: var(--surface-charcoal-deep);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: 18px;
  min-height: 220px;
}

.imsg-treemap-container svg {
  min-width: 100%;
}

/* Node hover */
.tmap-node rect:first-child {
  transition: filter 0.15s;
}
.tmap-node:hover rect:first-child {
  filter: brightness(1.25);
}

/* Route mode */
.imsg-route-mode-row {
  margin-bottom: 18px;
}

.imsg-route-mode-radios {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.imsg-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--surface-charcoal);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-faint);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}

.imsg-radio input[type=radio] {
  display: none;
}

.imsg-radio.is-active,
.imsg-radio:has(input:checked) {
  border-color: var(--brand-blue-pure);
  color: var(--accent-primary-wash);
  background: var(--accent-primary-soft-10);
}

/* Route badges */
.imsg-route-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.imsg-route-badge--ai {
  background: rgba(76, 175, 80, 0.12);
  color: var(--status-success);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.imsg-route-badge--hybrid {
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.imsg-route-badge--manual {
  background: rgba(239, 83, 80, 0.10);
  color: var(--status-danger-soft);
  border: 1px solid rgba(239, 83, 80, 0.3);
}

.imsg-route-desc {
  font-size: 11.5px;
  color: var(--fg-faint);
  line-height: 1.5;
  max-width: 480px;
}

.imsg-route-desc--warn {
  color: var(--status-danger-soft);
}

/* Inspector panel */
.imsg-inspector {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 14px;
  min-height: 120px;
  margin-bottom: 4px;
}

.imsg-inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  gap: 6px;
  color: var(--fg-faint);
  font-size: 12px;
}

.imsg-inspector-empty-icon {
  font-size: 20px;
  opacity: 0.4;
}

.imsg-inspector-header {
  margin-bottom: 12px;
  padding-left: 10px;
}

.imsg-inspector-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.imsg-inspector-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
}

.imsg-inspector-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.imsg-inspector-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* Form fields */
.imsg-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.imsg-field-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.imsg-input,
.imsg-select,
.imsg-textarea {
  background: var(--surface-charcoal-deep);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--border-card-light);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  outline: none;
}

.imsg-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.imsg-field-hint {
  font-size: 10px;
  color: var(--fg-faint);
  margin-top: 2px;
}

/* Config panel */
.imsg-config-panel {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 14px;
}

.imsg-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.imsg-config-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.imsg-config-item--span {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.imsg-send-test-note {
  font-size: 11px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview phone mockup */
.imsg-preview-phone {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 0;
  max-width: 340px;
  overflow: hidden;
  margin-bottom: 18px;
}

.imsg-preview-carrier {
  background: var(--surface-charcoal-deep);
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  font-size: 9px;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--surface-charcoal);
}

.imsg-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-charcoal);
}

.imsg-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-blue-pure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-inverse);
  flex-shrink: 0;
}

.imsg-preview-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
}

.imsg-preview-bubble-wrap {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.imsg-preview-bubble {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border-radius: 12px 12px 12px 3px;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
  word-break: break-word;
  white-space: pre-wrap;
}

.imsg-preview-char,
.imsg-preview-sub {
    font-size: 10px;
    color: var(--fg-faint);
}

.imsg-preview-char.is-over {
  color: var(--status-danger-soft);
  font-weight: 600;
}

/* Automation card -- test mode status indicator */

/* ════════════════════
   v40.5ap.dashboards-routing - Dashboards dropdown + BI routing (DARK)
   Locked palette: bg #191A1A, card #1F2121, border #2A2A2A,
   text #E5E5E5 / #B8B8B8 / #8A8A8A, accent #2196F3, accent-soft #E3F2FD
   System font stack. ALL CAPS section titles + eyebrows.
   ════════════════════ */

/* ── Dashboards dropdown wrapper ── */
.dr-dd-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ── Dropdown trigger button ── */
.dr-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  padding: 0 0.6rem;
  height: 32px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  color: var(--fg-muted-warm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dr-dd-trigger:hover {
  background: var(--accent-primary-soft-10);
  color: var(--border-card-light);
  border-color: var(--surface-charcoal);
}
.dr-dd-trigger.active {
  background: rgba(33,150,243,0.16);
  color: var(--brand-blue-pure);
  border-color: rgba(33,150,243,0.40);
  font-weight: 700;
}
.dr-dd-trigger[aria-expanded="true"] {
  background: var(--accent-primary-soft-12);
  color: var(--border-card-light);
  border-color: var(--surface-charcoal);
}

/* ── Caret rotates when open ── */
.dr-dd-caret {
  transition: transform 0.18s ease;
  opacity: 0.6;
  flex-shrink: 0;
}
.dr-dd-wrapper.is-open .dr-dd-caret { transform: rotate(180deg); opacity: 1; }

/* ── Dropdown menu ── */
.dr-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  box-shadow: 0 10px 28px var(--shadow-alpha-55), 0 2px 8px var(--shadow-alpha-35);
  z-index: 200;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity 0.15s, transform 0.15s;
}
.dr-dd-menu[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}
.dr-dd-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Menu items ── */
.dr-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-muted-warm);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.dr-dd-item:hover {
  background: var(--accent-primary-soft-10);
  color: var(--border-card-light);
}
.dr-dd-item.active {
  background: var(--accent-primary-soft-14);
  color: var(--brand-blue-pure);
  font-weight: 600;
}
.dr-dd-item-icon {
  opacity: 0.6;
  flex-shrink: 0;
  color: var(--fg-faint);
}
.dr-dd-item-icon svg { display: block; }
.dr-dd-item:hover .dr-dd-item-icon { opacity: 1; color: var(--brand-blue-pure); }
.dr-dd-item.active .dr-dd-item-icon { color: var(--brand-blue-pure); opacity: 1; }

/* ── Dashboards overview page ── */
.dr-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* ── Section label (charts / tables / reports / AI) ── */
.dr-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  text-transform: uppercase;
  padding: 0.75rem 0 0.4rem;
}

/* ── Essentials bar ── */
.dr-essentials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 0 0.5rem;
}
.dr-essential-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--surface-charcoal);
  background: var(--bg-card);
  color: var(--fg-muted-warm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  white-space: nowrap;
}
.dr-essential-btn:hover {
  background: var(--accent-primary-soft-10);
  color: var(--border-card-light);
  border-color: rgba(33,150,243,0.30);
}
.dr-essential-btn:active { transform: scale(0.98); }

/* ── Division summary cards (on sales page) ── */
.dr-division-summary-section {
  margin-top: 1.5rem;
}
.dr-section-eyebrow {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.dr-division-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.dr-div-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--surface-charcoal);
  text-decoration: none;
  color: var(--border-card-light);
  transition: box-shadow 0.15s, transform 0.13s, border-color 0.15s;
}
.dr-div-summary-card:hover {
  box-shadow: 0 4px 14px var(--shadow-alpha-45);
  transform: translateY(-1px);
  border-color: rgba(33,150,243,0.30);
}
.dr-div-summary-icon { color: var(--brand-blue-pure); opacity: 0.85; }
.dr-div-summary-name {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--border-card-light);
}
.dr-div-summary-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dr-div-stat-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dr-div-stat-label { font-size: 0.72rem; color: var(--fg-faint); }
.dr-div-stat-value { font-size: 0.8rem; font-weight: 700; color: var(--border-card-light); }
.dr-div-stat-loading { font-size: 0.72rem; color: #6A6A6A; font-style: italic; }
.dr-div-stat-na { font-size: 0.72rem; color: #6A6A6A; }
.dr-div-summary-link {
  font-size: 0.7rem;
  color: var(--brand-blue-pure);
  font-weight: 600;
  margin-top: auto;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Report links list ── */
.dr-reports-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dr-report-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-muted-warm);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
}
.dr-report-link:hover { background: var(--accent-primary-soft-10); color: var(--brand-blue-pure); }

/* ── Reports card variant ── */
.bi-card--reports { margin-top: 0.5rem; }

/* ── Responsive: division summary grid ── */
/* [moved to mobile-v2.css v41.58k — was L13778-L13783 @media (max-width: 600px)] */

/* ── Mobile: dropdown as inline bottom-sheet ── */
/* v41.58h: misc block L13804-L13822 moved to mobile-v2.css */

/* ── Sidebar-collapsed: hide caret, show icon only ── */
body.sidebar-collapsed .dr-dd-trigger .dr-dd-caret { display: none; }

/* ════════════════════
   WAVE-2 CHARTS-100 - chart dashboard grid & cards
   Matches gl-dash-tile layout/coloring: rgba(255,255,255,0.92) on light,
   rgba(25,26,26,0.82) on dark. Big number value is ALWAYS --fg-primary
   (never red). Red only on --accent-down delta chips.
   ════════════════════ */

.ch100-overview {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
}
.ch100-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.ch100-overview-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  margin: 0;
}
.ch100-overview-sub {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin: 0.25rem 0 0;
}
.ch100-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.ch100-dash-card {
  background: var(--fg-inverse-strong);
  border: 1px solid var(--border-card, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.13s ease, box-shadow 0.13s ease, border-color 0.13s ease;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.08));
}
[data-app-theme="dark"] .ch100-dash-card,
:root .ch100-dash-card {
  background: rgba(31, 33, 33, 0.92);
  border-color: rgba(255,255,255,0.07);
}
.ch100-dash-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, 0 6px 20px rgba(0,0,0,0.16));
  border-color: rgba(25,118,210,0.38);
}
.ch100-dash-card-name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fg-faint-cool));
  /* RECONCILE-FIX: prevent soft-hyphen (U+00AD) word-split in card titles
  such as 'Termite' and 'Dashboards' appearing as 'Ter-mite' / 'Dash-boards'. */
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ch100-dash-card-count {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg-primary, var(--fg-primary));
  line-height: 1.05;
}
.ch100-dash-card-label {
  font-size: 0.75rem;
  color: var(--fg-muted, var(--fg-faint-cool));
}

/* ── Chart dashboard page ──────────────────── */
.ch100-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ch100-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ch100-back {
  font-size: 0.82rem;
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.12s ease;
}
.ch100-back:hover { color: var(--fg-primary); }
.ch100-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  margin: 0;
  flex: 1;
}
.ch100-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-card, rgba(31,33,33,0.6));
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 3px 10px;
}

.ch100-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  grid-auto-rows: minmax(120px, auto);
  grid-auto-flow: dense;
}
@media (max-width: 1280px) {
  .ch100-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ch100-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* base chart card - matches gl-dash-tile specs exactly */
.ch100-card {
  background: var(--fg-inverse-strong);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
  box-shadow: 0 1px 4px var(--overlay-k-06);
  transition: transform 0.13s ease, box-shadow 0.13s ease;
  overflow: hidden;
}
[data-app-theme="dark"] .ch100-card,
:root .ch100-card {
  background: rgba(31, 33, 33, 0.92);
  border-color: rgba(255,255,255,0.07);
}
.ch100-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  border-color: rgba(25,118,210,0.30);
}

/* eyebrow - ALL CAPS, 10px, muted */
.ch100-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fg-faint-cool));
  line-height: 1;
  margin-bottom: 2px;
}

/* big number value - ALWAYS fg-primary (black/near-white), NEVER red */
.ch100-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--fg-primary, var(--fg-primary));  /* dark theme near-white */
}
/* light theme override */
[data-app-theme="light"] .ch100-value {
  color: #191A1A;
}
[data-app-theme="og"] .ch100-value {
  color: #1C2B1E;
}

.ch100-value-unavail {
  font-size: 1.1rem;
  color: var(--fg-muted);
  font-weight: 400;
}
.ch100-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary, var(--fg-muted-cool));
  margin-top: 2px;
}

/* bar chart inside a card */
.ch100-bar-wrap {
  margin-top: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.ch100-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.ch100-bar-label {
  font-size: 0.65rem;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}
.ch100-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(25,118,210,0.12);
  border-radius: 3px;
  overflow: hidden;
}
.ch100-bar-fill {
  height: 100%;
  background: var(--accent-primary-hover);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ch100-bar-val {
  font-size: 0.65rem;
  color: var(--fg-secondary);
  white-space: nowrap;
  width: 52px;
  text-align: right;
}

/* line/sparkline SVG */
.ch100-line-svg {
  width: 100%;
  height: 44px;
  display: block;
  margin-top: 8px;
  overflow: visible;
}
.ch100-line-path {
  fill: none;
  stroke: var(--accent-primary-hover);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* donut SVG */
.ch100-donut-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ch100-donut-svg {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.ch100-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.ch100-donut-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch100-donut-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* table inside a card */
.ch100-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  margin-top: 6px;
}
.ch100-table th {
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 4px;
  text-align: left;
  border-bottom: 1px solid var(--border-card, var(--overlay-w-07));
}
.ch100-table td {
  padding: 3px 4px;
  color: var(--fg-secondary, var(--fg-muted-cool));
  border-bottom: 1px solid var(--border-card, var(--overlay-w-05));
}
.ch100-table tr:last-child td { border-bottom: none; }
.ch100-table td:first-child { color: var(--fg-primary); font-weight: 500; }

/* wide cards for table/line types */
/* v41.58h: misc block L14161-L14163 moved to mobile-v2.css */
/* loading/skeleton */
.ch100-skeleton {
  opacity: 0.5;
  pointer-events: none;
}
.ch100-skeleton .ch100-value {
  background: var(--fg-muted);
  color: transparent;
  border-radius: 4px;
  width: 60%;
  min-height: 1.75rem;
  display: block;
}

/* error chip */
.ch100-error-chip {
  font-size: 0.62rem;
  color: var(--fg-muted);
  background: rgba(198,40,40,0.10);
  border: 1px solid rgba(198,40,40,0.20);
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 4px;
  display: inline-block;
}

.ch100-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  line-height: 1.2;
  width: fit-content;
}
.ch100-delta-arrow { font-size: 0.78rem; line-height: 1; }
.ch100-delta-pct { font-variant-numeric: tabular-nums; }
.ch100-delta-label {
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 2px;
}

.automation-not-wired-note {
  font-size: 0.78rem;
  color: #f59e0b;
  margin: 4px 0 2px 0;
  opacity: 0.85;
}

/* ── wave5: Notification sounds settings UI ──────────────────── */
/* gainValue 0.06 ~= 20 * log10(0.06) ~= -24.4 dB - barely audible */
.settings-sounds-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.settings-sounds-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.settings-sounds-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-sounds-toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--overlay-w-12);
  border: 1px solid var(--border-strong-alpha);
  position: relative;
  transition: background 180ms ease;
}


.settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track::after {
  left: 18px;
  background: var(--fg-inverse);
}
.settings-sounds-toggle-label {
  font-size: 0.8rem;
  color: rgba(232,231,229,0.7);
  min-width: 22px;
}
.settings-sounds-slider-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 180ms ease;
}
.settings-sounds-slider-label {
  font-size: 0.78rem;
  color: rgba(232,231,229,0.55);
  white-space: nowrap;
}
.settings-sounds-slider-wrap input[type="range"] {
  width: 90px;
  accent-color: var(--accent-primary, var(--accent-primary-hover));
  cursor: pointer;
}
.settings-sounds-vol {
  font-size: 0.78rem;
  color: rgba(232,231,229,0.55);
  min-width: 28px;
  text-align: right;
}





/* ════════════════════
   2026-05-07 - Overnight theme uniformity sweep.
   Forces every surface that previously hardcoded dark/light values to
   honor the active --bg-card / --fg-primary / --border-card tokens so
   dark, light, and OG modes look consistent across:
  • Division cards on /divisions and the new sales drilldown
  • Canon KPI tiles (.gdt-card)
  • Report tiles and report grid
  • Division BI widgets (.kpi-card, .division-kpi-card)
  • Breadcrumbs in the sales drilldown
  • Floating pill nav, topbar, sidebar (already covered above; reinforce)
   Bar fills (#1976D2), up-green (#2E7D32), down-red (#C62828) and the
   chip outline blues are intentionally NOT overridden - those are brand
   anchors and must remain identical across every theme.
   ════════════════════ */

html[data-app-theme="dark"] body .gl-division-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-title {
  color: var(--fg-primary);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-icon {
  background: rgba(25, 118, 210, 0.18);
  color: #64B5F6;
}

[data-app-theme="og"] html body .gl-division-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
[data-app-theme="og"] html body .gl-division-card .gdc-title {
  color: var(--fg-primary);
}
[data-app-theme="og"] html body .gl-division-card .gdc-icon {
  background: rgba(46, 93, 58, 0.12);
  color: var(--accent-primary);
}
[data-app-theme="og"] html body .gl-division-card .gdc-cta {
  color: var(--accent-primary);
}

html[data-app-theme="dark"] body[data-route^="/divisions"] .gl-division-card,
html[data-app-theme="dark"] body[data-route^="/reports"] .gl-division-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
[data-app-theme="og"] html body[data-route^="/divisions"] .gl-division-card,
[data-app-theme="og"] html body[data-route^="/reports"] .gl-division-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}

/* Headings on /divisions */





/* ── CANON KPI TILES (.gdt-card) ──────────────────── */
[data-app-theme="dark"] .ch100-dash-card,
[data-app-theme="dark"] .ch100-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
  box-shadow: var(--shadow-card);
}
[data-app-theme="dark"] .gdt-card .gdt-eyebrow {
  color: var(--fg-muted);
}
[data-app-theme="dark"] .gdt-card .gdt-value {
  color: var(--fg-primary);
}
[data-app-theme="og"] .gdt-card .gdt-eyebrow { color: var(--fg-muted); }
[data-app-theme="og"] .gdt-card .gdt-value { color: var(--fg-primary); }

[data-app-theme="dark"] .report-card,
[data-app-theme="dark"] .reports-division .report-card,
[data-app-theme="dark"] .division-reports .report-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
[data-app-theme="og"] .report-card,
[data-app-theme="og"] .reports-division .report-card,
[data-app-theme="og"] .division-reports .report-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}

/* ── DIVISION BI / KPI CARDS ──────────────────── */
[data-app-theme="dark"] .kpi-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
[data-app-theme="og"] .kpi-card {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  color: var(--fg-primary) !important;
}

/* ── BREADCRUMBS in the sales drilldown ──────────────────── */
html[data-app-theme="dark"] body .ds-view .ds-crumbs a {
  color: #64B5F6;
}
html[data-app-theme="dark"] body .ds-view .ds-crumbs span[aria-current="page"] {
  color: var(--fg-primary);
}
html[data-app-theme="dark"] body .ds-view .ds-crumbs .ds-crumb-sep {
  color: var(--fg-muted);
}
[data-app-theme="og"] html body .ds-view .ds-crumbs a {
  color: var(--accent-primary);
}
[data-app-theme="og"] html body .ds-view .ds-crumbs span[aria-current="page"] {
  color: var(--fg-primary);
}
[data-app-theme="og"] html body .ds-view .ds-crumbs .ds-crumb-sep {
  color: var(--fg-muted);
}

[data-app-theme="dark"] .ds-dk-frame-wrap {
  background: var(--bg-card);
  border-color: var(--border-card);
}
[data-app-theme="og"] .ds-dk-frame-wrap {
  background: var(--bg-card);
  border-color: var(--border-card);
}

/* ── DARK-MODE TILE-LEVEL CHIP CONTRAST FIXES ──────────────────── */
[data-app-theme="dark"] .gdt-card .gdt-foot {
  color: var(--fg-muted) !important;
}
[data-app-theme="og"] .gdt-card .gdt-foot {
  color: var(--fg-muted) !important;
}

/* Major surfaces ─ Light theme */
[data-app-theme="light"] .dashboard-view .card.chat-panel,
[data-app-theme="light"] .kpi-card,
[data-app-theme="light"] .report-card,
[data-app-theme="light"] .division-reports,
[data-app-theme="light"] .summary-stack > .card,
[data-app-theme="light"] .summary-stack > .summary-item,
[data-app-theme="light"] .dashboard-lower > .card,
[data-app-theme="light"] .coo-kpi-grid .coo-kpi-btn,
[data-app-theme="light"] .coo-kpi-btn--3,
[data-app-theme="light"] .coo-kpi-btn--2,
[data-app-theme="light"] .automations-view button,
[data-app-theme="light"] .settings-view button,
[data-app-theme="light"] .topbar .pill,
[data-app-theme="light"] .topbar .pill.live,
[data-app-theme="light"] .topbar > button,
[data-app-theme="light"] .summary-stack > .card.panel,
[data-app-theme="light"] .sidebar-footer,
[data-app-theme="light"] .main .card,
[data-app-theme="light"] .main .panel,
[data-app-theme="light"] .main .kpi-card,
[data-app-theme="light"] .main .report-card,
[data-app-theme="light"] .main .data-table,
[data-app-theme="light"] .main .division-reports,
[data-app-theme="light"] .main .ai-insight-card,
[data-app-theme="light"] .main .division-kpi-grid .kpi-card,
[data-app-theme="light"] .main .settings-view .card,
[data-app-theme="light"] .main .automations-view .card,
[data-app-theme="light"] .main .chat-panel,
[data-app-theme="light"] .main .reports-division .report-card,
[data-app-theme="light"] .main .reports-view .report-card,
[data-app-theme="light"] .division-view .ai-insight-card,
[data-app-theme="light"] .division-view .division-reports,
[data-app-theme="light"] .dashboard-lower .chat-panel,
[data-app-theme="light"] .kpi-grid > *,
[data-app-theme="light"] .division-kpi-grid > *,
[data-app-theme="light"] .rich-composer,
[data-app-theme="light"] .bi-card,
[data-app-theme="light"] .bi-kpi-card,
[data-app-theme="light"] .bi-page,
[data-app-theme="light"] .dr-overview-card,
[data-app-theme="light"] .dr-essential-btn,
[data-app-theme="light"] .dr-div-summary-card,
[data-app-theme="light"] .dr-bi-page {
  background: var(--bg-card);
  color: var(--fg-primary);
  border-color: var(--border-card);
}

[data-app-theme="light"] .kpi-card:hover,
[data-app-theme="light"] .report-card:hover,
[data-app-theme="light"] .dr-overview-card:hover,
[data-app-theme="light"] .dr-div-summary-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

/* Page chrome & containers ─ Light */
[data-app-theme="light"] .main,
[data-app-theme="light"] #main-content,
[data-app-theme="light"] .dashboard-view,
[data-app-theme="light"] .division-view,
[data-app-theme="light"] .reports-view,
[data-app-theme="light"] .settings-view,
[data-app-theme="light"] .automations-view,
[data-app-theme="light"] .chats-view {
  background: var(--bg-app);
  color: var(--fg-primary);
}

/* Major surfaces ─ OG theme (mirror) */
[data-app-theme="og"] .dashboard-view .card.chat-panel,
[data-app-theme="og"] .kpi-card,
[data-app-theme="og"] .report-card,
[data-app-theme="og"] .division-reports,
[data-app-theme="og"] .summary-stack > .card,
[data-app-theme="og"] .summary-stack > .summary-item,
[data-app-theme="og"] .dashboard-lower > .card,
[data-app-theme="og"] .coo-kpi-grid .coo-kpi-btn,
[data-app-theme="og"] .coo-kpi-btn--3,
[data-app-theme="og"] .coo-kpi-btn--2,
[data-app-theme="og"] .automations-view button,
[data-app-theme="og"] .settings-view button,
[data-app-theme="og"] .topbar .pill,
[data-app-theme="og"] .topbar .pill.live,
[data-app-theme="og"] .topbar > button,
[data-app-theme="og"] .summary-stack > .card.panel,
[data-app-theme="og"] .sidebar-footer,
[data-app-theme="og"] .main .card,
[data-app-theme="og"] .main .panel,
[data-app-theme="og"] .main .kpi-card,
[data-app-theme="og"] .main .report-card,
[data-app-theme="og"] .main .data-table,
[data-app-theme="og"] .main .division-reports,
[data-app-theme="og"] .main .ai-insight-card,
[data-app-theme="og"] .main .division-kpi-grid .kpi-card,
[data-app-theme="og"] .main .settings-view .card,
[data-app-theme="og"] .main .automations-view .card,
[data-app-theme="og"] .main .chat-panel,
[data-app-theme="og"] .main .reports-division .report-card,
[data-app-theme="og"] .main .reports-view .report-card,
[data-app-theme="og"] .division-view .ai-insight-card,
[data-app-theme="og"] .division-view .division-reports,
[data-app-theme="og"] .dashboard-lower .chat-panel,
[data-app-theme="og"] .kpi-grid > *,
[data-app-theme="og"] .division-kpi-grid > *,
[data-app-theme="og"] .rich-composer,
[data-app-theme="og"] .bi-card,
[data-app-theme="og"] .bi-kpi-card,
[data-app-theme="og"] .bi-page,
[data-app-theme="og"] .dr-overview-card,
[data-app-theme="og"] .dr-essential-btn,
[data-app-theme="og"] .dr-div-summary-card,
[data-app-theme="og"] .dr-bi-page {
  background: var(--bg-card);
  color: var(--fg-primary);
  border-color: var(--border-card);
}

[data-app-theme="og"] .kpi-card:hover,
[data-app-theme="og"] .report-card:hover,
[data-app-theme="og"] .dr-overview-card:hover,
[data-app-theme="og"] .dr-div-summary-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

/* Page chrome & containers ─ OG */
[data-app-theme="og"] .main,
[data-app-theme="og"] #main-content,
[data-app-theme="og"] .dashboard-view,
[data-app-theme="og"] .division-view,
[data-app-theme="og"] .reports-view,
[data-app-theme="og"] .settings-view,
[data-app-theme="og"] .automations-view,
[data-app-theme="og"] .chats-view {
  background: var(--bg-app);
  color: var(--fg-primary);
}

/* Text contrast helpers ─ both non-dark themes */
[data-app-theme="light"] .kpi-label,
[data-app-theme="light"] .kpi-value,
[data-app-theme="light"] .report-card *,
[data-app-theme="light"] .bi-kpi-eyebrow,
[data-app-theme="light"] .bi-kpi-value,
[data-app-theme="light"] .dr-div-stat-label,
[data-app-theme="light"] .dr-div-stat-value,
[data-app-theme="og"] .kpi-label,
[data-app-theme="og"] .kpi-value,
[data-app-theme="og"] .report-card *,
[data-app-theme="og"] .bi-kpi-eyebrow,
[data-app-theme="og"] .bi-kpi-value,
[data-app-theme="og"] .dr-div-stat-label,
[data-app-theme="og"] .dr-div-stat-value {
  color: var(--fg-primary);
}

/* Muted secondary text ─ keep readable on light bg */

/* ════════════════════
   v2008be.flow.v2 - STL Drag-and-Drop Canvas styles
   imsg-dd- prefix. No !important. No locked token overrides.
   ════════════════════ */

/* Full-view layout override for dd mode */
.imsg-flow-view--dd {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.imsg-flow-body--dd {
  display: grid;
  grid-template-columns: 180px 1fr 300px;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Palette */
.imsg-dd-palette {
  background: var(--surface-charcoal-deep);
  border-right: 1px solid var(--surface-charcoal);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex-shrink: 0;
}

.imsg-dd-palette-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-charcoal);
}

.imsg-dd-palette-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid;
  background: var(--bg-card);
  cursor: grab;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  user-select: none;
  transition: background 0.12s, opacity 0.12s;
}

.imsg-dd-palette-item:hover {
  background: var(--bg-elev-1);
}

.imsg-dd-palette-item:active {
  cursor: grabbing;
  opacity: 0.75;
}

/* Canvas wrapper */
.imsg-dd-canvas-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--surface-charcoal);
  background: var(--surface-charcoal-deep);
}

/* Canvas scroll area */
.imsg-dd-canvas {
  flex: 1;
  overflow: auto;
  padding: 20px;
  min-height: 0;
  position: relative;
  background: var(--surface-charcoal-deep);
}

/* Canvas SVG base */
#imsg-dd-canvas-svg {
  cursor: default;
}

/* Node hover brightness */
.imsg-dd-node rect:first-child {
  transition: filter 0.12s;
}

.imsg-dd-node:hover > rect:first-child {
  filter: brightness(1.2);
}

/* Wire handle (+) hover */
.imsg-dd-wire-handle {
  transition: r 0.12s, opacity 0.12s;
  opacity: 0.7;
}

.imsg-dd-wire-handle:hover {
  opacity: 1;
  r: 9;
}

/* Edge hover */
.imsg-edge {
  transition: stroke 0.12s, stroke-width 0.12s;
}

.imsg-edge:hover {
  stroke: rgba(239,83,80,0.5);
  stroke-width: 3;
}

/* Right panel (inspector) in dd mode */
.imsg-flow-right--dd {
  overflow-y: auto;
  padding: 14px 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* AI section header */
.imsg-ai-section-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--brand-blue-pure);
  margin: 14px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(33,150,243,0.20);
}

/* AI context checkboxes */
.imsg-ai-ctx-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.imsg-ai-ctx-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--border-card-light);
  cursor: pointer;
}

.imsg-ai-ctx-check input[type=checkbox] {
  accent-color: var(--brand-blue-pure);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* AI temperature slider */
.imsg-ai-slider {
  width: 100%;
  accent-color: var(--brand-blue-pure);
  height: 4px;
  cursor: pointer;
  margin-top: 4px;
}

/* Responsive: stack palette below canvas on narrow screens */
/* v41.58h: misc block L14813-L14828 moved to mobile-v2.css */

/* ────────────────────
   v2008be.composer.singlemodel - single, borderless model picker
   User feedback: "two boxes in the actual chat experience…model picker is
   messy…no borders around it just the text and a dotted line very faintly".
   - Removes the duplicate .rc-model-chip button (now hidden if any cached
  markup still renders it).
   - Strips all borders/backgrounds from .rc-model on every viewport.
   - Adds a faint dotted line under the model label so users still see it
  is interactive.
   ──────────────────── */

/* Hide any lingering chip duplicate on every viewport (defensive). */

/* Restore the .rc-model wrapper on all viewports (overrides the
   @media (max-width:768px) block at line ~14156 that hid it). */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model {
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92) !important;
  height: auto;
  min-height: 0;
}

/* Star icon: faint, no blue tint. */
html body .rich-composer .rc-model > svg,
html body .ai-view .rich-composer .rc-model > svg {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.55;
  color: rgba(255, 255, 255, 0.7) !important;
  stroke: rgba(255, 255, 255, 0.7) !important;
  flex: 0 0 auto !important;
}

/* The native select is the model picker. Borderless, transparent, with a
   faint dotted underline. Padding-bottom leaves room for the underline. */
html body .rich-composer .rc-model-select,
html body .ai-view .rich-composer .rc-model-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: none;
  border: 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.22) !important;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.2;
  padding: 1px 14px 1px 0 !important;
  margin: 0;
  cursor: pointer;
  max-width: 180px !important;
  /* Custom caret painted via background-image so it stays even with
  appearance:none. Faint and small. */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(-45deg, transparent 50%, rgba(255,255,255,0.55) 50%) !important;
  background-position:
    calc(100% - 6px) 55%,
    calc(100% - 2px) 55% !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
}

html body .rich-composer .rc-model-select:hover,
html body .ai-view .rich-composer .rc-model-select:hover {
  border-bottom-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

html body .rich-composer .rc-model-select:focus,
html body .ai-view .rich-composer .rc-model-select:focus {
  border-bottom-color: rgba(75, 159, 232, 0.65);
  color: #fff;
}

/* Light/og themes: dotted underline goes dark against light bg. */
[data-app-theme="light"] html body .rich-composer .rc-model-select,
[data-app-theme="og"] html body .rich-composer .rc-model-select,
html[data-app-theme="light"] body .rich-composer .rc-model-select,
html[data-app-theme="og"] body .rich-composer .rc-model-select {
  border-bottom-color: rgba(0, 0, 0, 0.22);
  color: #1E1D1C;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
    linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.55) 50%) !important;
}
[data-app-theme="light"] html body .rich-composer .rc-model > svg,
[data-app-theme="og"] html body .rich-composer .rc-model > svg,
html[data-app-theme="light"] body .rich-composer .rc-model > svg,
html[data-app-theme="og"] body .rich-composer .rc-model > svg {
  color: rgba(30, 29, 28, 0.55);
  stroke: rgba(30, 29, 28, 0.55);
}

/* ────────────────────
   v2008be.composer.cleanup2 - 2026-05-08
   User feedback (2:38 AM MST):
   1. Remove blue focus glow on composer wrapper.
   2. Kill double-border on chat-history composer.
   3. Model picker: show literal text "Model" + caret, no border, no
  dotted underline. Still functional as a model picker.
   4. Send button: match chip styling (transparent bg, blue border ring,
  white icon stroke).
   ──────────────────── */

/* (1) No blue focus glow on composer wrap or rich composer. */
html body .rich-composer:focus-within,
html body .ai-view .rich-composer:focus-within,
html body .ai-composer-wrap:focus-within,
html body .ai-composer-wrap .rich-composer:focus-within,
html body .glass-composer:focus-within,
html body .floating-chat-composer:focus-within,
html body .chat-composer:focus-within {
  border-color: var(--gl-chat-border, rgba(255,255,255,0.08));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  outline: 0;
}

/* (2) Kill outer wrap border so only the rich-composer rim shows. */
html body .ai-composer-wrap,
html body .ai-view .ai-composer-wrap,
html body section#main .ai-view .ai-composer-wrap {
  border: 0;
  outline: 0;
  box-shadow: none;
}
html body .ai-composer-wrap:focus-within {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* (3) Model picker: literal "Model" + caret, no border, no underline.
   Strategy: keep the native <select> functional for value & dropdown,
   but visually overlay the word "Model" via a ::before on .rc-model.
   The select text/caret are hidden; clicks pass through to the native
   select to open the dropdown. */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model {
  position: relative;
  display: inline-flex;
  align-items: center !important;
  padding: 0;
  height: 28px !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Hide the star icon; "Model" speaks for itself. */
html body .rich-composer .rc-model > svg,
html body .ai-view .rich-composer .rc-model > svg {
  display: none;
}

/* The select: stays clickable but visually invisible; sits on top of
   the ::before overlay so clicks open the native dropdown. */
html body .rich-composer .rc-model-select,
html body .ai-view .rich-composer .rc-model-select {
  position: relative;
  z-index: 2 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 28px !important;
  padding: 0;
  margin: 0;
  background: transparent;
  background-image: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  font-size: 13px !important;
  cursor: pointer;
  /* Make the option text invisible while it's the selected display. */
  -webkit-text-fill-color: transparent;
}

/* The native dropdown options must still be readable when the menu opens. */
html body .rich-composer .rc-model-select option,
html body .ai-view .rich-composer .rc-model-select option {
  color: var(--fg-primary-warm, #EAEBEC);
  -webkit-text-fill-color: var(--fg-primary-warm, #EAEBEC);
  background: var(--composer-bg, var(--bg-card, #1F2121));
  text-shadow: none;
}
[data-app-theme="light"] html body .rich-composer .rc-model-select option,
[data-app-theme="og"] html body .rich-composer .rc-model-select option,
html[data-app-theme="light"] body .rich-composer .rc-model-select option,
html[data-app-theme="og"] body .rich-composer .rc-model-select option {
  color: #1E1D1C;
  -webkit-text-fill-color: #1E1D1C;
  background: #fff;
}

/* "Model ⌄" label painted over the invisible select. */
html body .rich-composer .rc-model::before,
html body .ai-view .rich-composer .rc-model::before {
  content: "Model";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Caret triangle painted via ::after, also non-interactive. */
html body .rich-composer .rc-model::after,
html body .ai-view .rich-composer .rc-model::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.4px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1.4px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-65%) rotate(45deg);
  z-index: 1;
  pointer-events: none;
}

/* Hover: brighten the label + caret. */
html body .rich-composer .rc-model:hover::before,
html body .ai-view .rich-composer .rc-model:hover::before {
  color: #fff;
}
html body .rich-composer .rc-model:hover::after,
html body .ai-view .rich-composer .rc-model:hover::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* Light/og themes: dark-on-light label + caret. */
[data-app-theme="light"] html body .rich-composer .rc-model::before,
[data-app-theme="og"]    html body .rich-composer .rc-model::before,
html[data-app-theme="light"] body .rich-composer .rc-model::before,
html[data-app-theme="og"]    body .rich-composer .rc-model::before {
  color: rgba(30, 29, 28, 0.82);
}
[data-app-theme="light"] html body .rich-composer .rc-model::after,
[data-app-theme="og"]    html body .rich-composer .rc-model::after,
html[data-app-theme="light"] body .rich-composer .rc-model::after,
html[data-app-theme="og"]    body .rich-composer .rc-model::after {
  border-right-color: rgba(30, 29, 28, 0.65);
  border-bottom-color: rgba(30, 29, 28, 0.65);
}

/* (4) Send button: match the .rc-chip look - transparent bg, blue rim,
   white icon stroke. Active/has-input state stays the same blue rim. */
html body .rich-composer .rc-send,
html body .ai-view .rich-composer .rc-send {
  background: transparent;
  background-image: none;
  border: 1px solid rgba(75, 159, 232, 0.65) !important;
  color: #fff !important;
  box-shadow: none;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
}
html body .rich-composer .rc-send svg,
html body .rich-composer .rc-send svg *,
html body .ai-view .rich-composer .rc-send svg,
html body .ai-view .rich-composer .rc-send svg * {
  color: #fff;
  stroke: #fff;
  fill: none;
}
html body .rich-composer .rc-send:hover,
html body .ai-view .rich-composer .rc-send:hover {
  background: rgba(75, 159, 232, 0.12) !important;
  border-color: rgba(75, 159, 232, 0.85) !important;
}
html body .rich-composer.rc-has-input .rc-send,
html body .ai-view .rich-composer.rc-has-input .rc-send {
  background: rgba(25, 118, 210, 0.18);
  border-color: #1976D2;
}

/* Outer wrap: zero box-model decoration, but provides a soft blur veil and
   a gradient mask so chat content fades behind it cleanly. */
html body .ai-composer-wrap,
html body .ai-view .ai-composer-wrap,
html body section#main .ai-view .ai-composer-wrap,
html body.route-ask .ai-composer-wrap,
html body.route-ask.ai-has-messages .ai-composer-wrap,
html body.route-ask:not(.ai-has-messages) .ai-composer-wrap {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Soft blur veil: a non-interactive ::before that sits behind the inner
   .rich-composer and blurs whatever scrolls underneath. Only applies in
   history mode where the composer is sticky. */
html body.route-ask.ai-has-messages .ai-composer-wrap {
  position: sticky !important;
  bottom: 0;
  z-index: 3 !important;
  padding: 12px 0 12px !important;
  margin-top: 0;
  isolation: isolate;
}
html body.route-ask.ai-has-messages .ai-composer-wrap::before {
  content: "";
  position: absolute;
  inset: -16px 0 0 0; /* extend slightly above for soft fade */
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: linear-gradient(
    to bottom,
    rgba(25, 26, 26, 0)   0%,
    rgba(25, 26, 26, 0.55) 22%,
    rgba(25, 26, 26, 0.92) 55%,
    rgba(25, 26, 26, 1)   100%
  ) !important;
  /* Mask the very top so the blur tapers in, no hard line. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.6) 18%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.6) 18%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,1) 100%
  );
}

/* Light/og: veil tint follows theme bg. */



/* Make sure the inner rich-composer is the only rounded rim with elevation. */


/* Ensure the chat messages region has bottom padding so content can scroll
   under the veil without being hidden when at rest. */


/* ────────────────────
   v2008be.composer.cleanup4 - 2026-05-08 02:48 MST
   User feedback:
   1. Sidebar history rows: titles fill row width; allow up to 3 lines so
  summaries don't truncate halfway.
   2. Profile picture missing in sidebar footer (handled separately by
  ensuring fallback initials render correctly and by extending Google
  OAuth picture pull - requires backend; covering CSS/styling here).
   3. Sidebar background must EXACTLY match composer interior color in
  dark + OG modes. Drop the bluish/grey tint.
   4. Apply matching surface color across every route/tab/page (cards,
  panels, history items) so colors look uniform; nudge contrast.
   ──────────────────── */

/* ── (1) HISTORY ROW: fill width + 3 lines ──────────────────── */
html body .sidebar #sidebar-history-list .history-item,
html body #chat-history-list .history-item {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
}
html body .sidebar #sidebar-history-list .history-item .history-title,
html body #chat-history-list .history-item .history-title,
html body .sidebar #sidebar-history-list .history-item .history-title *,
html body #chat-history-list .history-item .history-title * {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.3;
}

/* ── (3) DARK MODE: sidebar bg = composer interior (#1F2121) ──────────── */
/* Default theme is dark unless [data-app-theme] is "light" or "og". */
html body .sidebar,
html body aside.sidebar,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body aside.sidebar {
  background: #1F2121;
  background-image: none;
  background-color: #1F2121;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: #E5E7EB;
}

/* Sidebar internal sections inherit, but make sure no inner blocks paint
   a different surface color. */
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar .sidebar-section,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar .sidebar-header,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar .sidebar-footer,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar .sidebar-scroll {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border-color: rgba(255, 255, 255, 0.06);
}

/* History item bg slightly lifted from sidebar so rows have edge. */
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar #sidebar-history-list .history-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #C8CDD3;
}
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar #sidebar-history-list .history-item:hover {
  background: rgba(75, 159, 232, 0.10);
  border-color: rgba(75, 159, 232, 0.35);
}
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar #sidebar-history-list .history-item .history-title {
  color: #ECEEF1;
}
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .sidebar #sidebar-history-list .history-item .history-meta {
  color: #8C9097;
}

/* Body / main also use same family in dark mode. App bg one notch darker
   than composer/sidebar so cards lift visually. */
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .main,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body section#main,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .main-content,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .ai-view,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .content {
  background: #191A1A;
  background-color: #191A1A;
  color: #E5E7EB;
}

/* Cards / panels in dark mode: same family, lift via subtle border. */
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .card,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .panel,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .kpi-card,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .report-card,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .home-dash-card,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .automation-card,
html:not([data-app-theme="light"]):not([data-app-theme="og"]) body .chat-panel {
  background: #1F2121;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #E5E7EB;
}

/* ── (3b) OG MODE: sidebar bg = composer interior (--bg-card #F4F1E6) ── */
html[data-app-theme="og"] body .sidebar,
html[data-app-theme="og"] body aside.sidebar,
[data-app-theme="og"] body .sidebar,
[data-app-theme="og"] body aside.sidebar {
  background: #F4F1E6;
  background-image: none;
  background-color: #F4F1E6;
  border-right: 1px solid rgba(46, 93, 58, 0.10);
  box-shadow: none;
  color: #1C2B1E;
}
[data-app-theme="og"] body .sidebar #sidebar-history-list .history-item {
  background: rgba(46, 93, 58, 0.05);
  border: 1px solid rgba(46, 93, 58, 0.10);
  color: #2E5D3A;
}
[data-app-theme="og"] body .sidebar #sidebar-history-list .history-item:hover {
  background: rgba(46, 93, 58, 0.10);
  border-color: rgba(46, 93, 58, 0.22);
}
[data-app-theme="og"] body .sidebar #sidebar-history-list .history-item .history-title {
  color: #1C2B1E;
}
[data-app-theme="og"] body .sidebar #sidebar-history-list .history-item .history-meta {
  color: #5A7A5E;
}

/* ── (3c) LIGHT MODE: sidebar bg = composer interior (--bg-card) ──────── */
html[data-app-theme="light"] body .sidebar,
html[data-app-theme="light"] body aside.sidebar,
[data-app-theme="light"] body .sidebar,
[data-app-theme="light"] body aside.sidebar {
  background: var(--bg-card, #FFF);
  background-image: none;
  background-color: var(--bg-card, #FFF);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
}
[data-app-theme="light"] body .sidebar #sidebar-history-list .history-item {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1E1D1C;
}

/* ── (2) PROFILE FOOTER PILL: ensure visible avatar w/ initials fallback ─ */
html body .footer-org-pill .footer-org-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1976D2 0%, #4B9FE8 100%);
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
html body .footer-org-pill .footer-org-avatar img.footer-org-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* ────────────────────
   v2008be.thinking.cleanup - 2026-05-08 02:56 MST
   User feedback:
   - "Thinking…" pulses forever then stays as "Thought for X.Xs" still pulsing
  and bright. Want it to stop pulsing and turn dark grey when done.
   - Phase label ("Understanding your question…") looks ugly: a stray small
  blue dot with near-invisible blue text. Want a cleaner, readable label.
   - Wants tokens to stream visibly. (Backend already streams; just make sure
  phases are clearly visible while waiting for first token.)
   ──────────────────── */

/* (1) Stop the pulse and dim the "Thought for X.Xs" header once collapsed. */
html body .ai-messages .ai-thinking.is-collapsed .ai-thinking-text,
html body .ai-thinking.is-collapsed .ai-thinking-text {
  animation: none;
  opacity: 1;
  color: rgba(255, 255, 255, 0.42) !important;
  font-weight: 500;
  cursor: pointer;
}
html body .ai-messages .ai-thinking.is-collapsed .ai-thinking-text:hover,
html body .ai-thinking.is-collapsed .ai-thinking-text:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* Add an inline chevron so the user knows it's expandable. */
html body .ai-messages .ai-thinking.is-collapsed .ai-thinking-text::after,
html body .ai-thinking.is-collapsed .ai-thinking-text::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
  opacity: 0.7;
  /* override the legacy "..." dot animation */
  animation: none;
}
/* When the panel is expanded (no .is-collapsed), the chevron points up. */
html body .ai-messages .ai-thinking:not(.is-collapsed):not([hidden]) .ai-thinking-text::after,
html body .ai-thinking:not(.is-collapsed):not([hidden]) .ai-thinking-text::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(2px) rotate(225deg);
  opacity: 0.7;
  animation: none;
}

/* Hide the legacy ..." dots animation that the line-1413 rule appends to
   .msg-thinking-text. We render our own chevron instead. */
html body .msg-thinking-text::after,
html body .ai-thinking-text::after {
  animation: none;
}

/* (2) Phase row: cleaner shimmer label, no tiny blue dot. */
html body .ai-messages .cs-phase-row,
html body .cs-phase-row {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 4px 0 !important;
  min-height: 24px !important;
}

/* Thinking-dots: use neutral grey instead of bright blue. */

/* Source ring: keep but tone the blue down to match neutral palette. */

/* Phase label: brighter grey, NOT blue (which was nearly invisible on dark bg). */
@keyframes cs-phase-shimmer {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

/* (3) Thinking step rows inside the panel: better contrast. */
html body .thinking-stream .thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
html body .thinking-stream .thinking-step.is-active {
  color: rgba(255, 255, 255, 0.92);
}
html body .thinking-stream .thinking-step.is-done {
  color: rgba(255, 255, 255, 0.45);
}

/* Step icon dots (left of the label): soft circles sized for clarity. */
html body .thinking-stream .thinking-step::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}
html body .thinking-stream .thinking-step.is-active::before {
  background: #4B9FE8;
  box-shadow: 0 0 0 4px rgba(75, 159, 232, 0.18);
  animation: cs-phase-shimmer 1.4s ease-in-out infinite;
}
html body .thinking-stream .thinking-step.is-done::before {
  background: rgba(255, 255, 255, 0.30);
  box-shadow: none;
  animation: none;
}

/* Hide the existing "Thinking…" header text while inside the active stream
   so only the phase row carries the live label (cleaner). User keeps the
   chevron header to expand-collapse the transcript afterwards. */
html body .ai-thinking:not(.is-collapsed) .ai-thinking-text {
  /* Pulsing intensity reduced; final state will swap to "Thought for…" */
  animation: cs-phase-shimmer 1.6s ease-in-out infinite !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* (4) "Thought for X.Xs" footer line under the bubble: dark grey, no pulse. */



/* Light/og: dark text on light bg. */
[data-app-theme="light"] html body .ai-thinking.is-collapsed .ai-thinking-text,
[data-app-theme="og"] html body .ai-thinking.is-collapsed .ai-thinking-text {
  color: rgba(28, 30, 34, 0.55);
}


/* ────────────────────
   v2008be.darkpolish - 2026-05-08 03:08 PDT
   User feedback (rev 00568 follow-up):
   1. Phase row "Thinking..." stays on forever AND is showing TWO labels at
  once (the bold "Thinking..." header + a phase row "Understanding your
  question..."). The blue-rimmed dot still appears. Hide the redundant
  header while phase row is visible. Convert remaining blue micro-dots
  to neutral grey to match palette.
   2. Send button: flip default <-> hover. Default should be the soft blue
  tint, hover should be transparent.
   3. Sidebar history items still show blue text on hover/title accents in
  dark mode. Force grey palette tokens (--fg-*, --border-soft) so it
  matches the rest of the app uniformly.
   4. Standardize dark surfaces to existing tokens (--bg-app #171614,
  --bg-card #1F2121, --bg-sidebar #191A1A, --fg-* greys).
   ──────────────────── */

/* (1) Hide the redundant ".ai-thinking-text Thinking…" header while the
  live phase row is rendering inside the same .ai-thinking container.
  The phase row already says what's happening. */
html body .ai-thinking:not(.is-collapsed):has(.cs-phase-row) .ai-thinking-text {
  display: none;
}
html body .ai-thinking:not(.is-collapsed):has(.cs-phase-row) .plex-think,
html body .ai-thinking:not(.is-collapsed):has(.cs-phase-row) .msg-thinking-plex {
  display: none;
}

/* (1b) Kill the blue tint on .tk-dot inside thinking-stream rows. Use grey. */
html body .thinking-stream .thinking-step.is-active::before {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}

/* (1c) Phase row dots - also force neutral grey, no glow. */

/* (1d) Phase label: stop the shimmer on light/og where it was already grey,
  keep gentle shimmer on dark with neutral grey. */

/* (1e) Plex flower: in any theme, render in neutral grey, NOT blue. */
html body .plex-bar { fill: rgba(255, 255, 255, 0.55); }
[data-app-theme="light"] html body .plex-bar,
[data-app-theme="og"]    html body .plex-bar { fill: rgba(28, 30, 34, 0.55); }

/* (2) Send button: flip default <-> hover.
  Default = soft blue tint with rim. Hover = transparent (slight darken). */
html body .rich-composer .rc-send,
html body .ai-view .rich-composer .rc-send {
  background: rgba(75, 159, 232, 0.12) !important;
  background-image: none;
  border: 1px solid rgba(75, 159, 232, 0.85) !important;
}
html body .rich-composer .rc-send:hover,
html body .ai-view .rich-composer .rc-send:hover {
  background: transparent;
  border-color: rgba(75, 159, 232, 0.65) !important;
}

/* (3) Sidebar history items: use grey palette only. Strip blue hover/border. */
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item,
html[data-app-theme="dark"] body #chat-history-list .history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--fg-secondary, #B5B7BE);
}
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item:hover,
html[data-app-theme="dark"] body #chat-history-list .history-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item .history-title,
html[data-app-theme="dark"] body #chat-history-list .history-item .history-title {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item .history-meta,
html[data-app-theme="dark"] body #chat-history-list .history-item .history-meta {
  color: var(--fg-muted, #8A8F9C);
}
/* Strip the legacy blue link colours inside history items (a, span, time). */
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item *,
html[data-app-theme="dark"] body #chat-history-list .history-item * {
  color: inherit;
}
html[data-app-theme="dark"] body .sidebar #sidebar-history-list .history-item .history-title {
  color: var(--fg-primary, #E3E1DD);
}

/* (4) Uniform dark surface tokens - kill any leftover #2a2e33 / #2c2f33
  backgrounds and route everything through the dark token palette. */
html[data-app-theme="dark"] body {
  background: var(--bg-app, #171614);
}
html[data-app-theme="dark"] body .main {
  background: var(--bg-app, #171614);
}
html[data-app-theme="dark"] body .sidebar {
  background: var(--bg-sidebar, #191A1A);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
/* Topbar pills + section buttons: neutral surface, not blue. */
html[data-app-theme="dark"] body .topbar .pill,
html[data-app-theme="dark"] body .topbar > button,
html[data-app-theme="dark"] body .automations-view button,
html[data-app-theme="dark"] body .settings-view button {
  background: var(--bg-card, #1F2121);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.07));
  color: var(--fg-secondary, #B5B7BE);
}
/* Composer wrap interior matches card. */
html[data-app-theme="dark"] body .card,
html[data-app-theme="dark"] body .panel,
html[data-app-theme="dark"] body .kpi-card,
html[data-app-theme="dark"] body .report-card,
html[data-app-theme="dark"] body .home-dash-card,
html[data-app-theme="dark"] body .ch100-dash-card,
html[data-app-theme="dark"] body .ch100-card,
html[data-app-theme="dark"] body .division-reports,
html[data-app-theme="dark"] body .ai-insight-card,
html[data-app-theme="dark"] body .data-table,
html[data-app-theme="dark"] body .rich-composer {
    background: var(--bg-card, #1f2121);
    border: 1px solid var(--border-card, rgba(255, 255, 255, 0.07));
}
/* Body text fallbacks. */
html[data-app-theme="dark"] body { color: var(--fg-primary, #E3E1DD); }
html[data-app-theme="dark"] body .muted,
html[data-app-theme="dark"] body .text-muted,
html[data-app-theme="dark"] body small.muted {
  color: var(--fg-muted, #8A8F9C);
}

/* ────────────────────
   v2008be.darkpolish.v2 - 2026-05-08 03:18 PDT
   Sidebar STILL showing dark blue text on dark bg in dark mode (lines 2426,
   2467, 2620, 2878 force #1e293b / #1F2121 text into the sidebar with
   !important and high specificity). Override with stronger selector chain
   that wins on dark mode only.
   Also kill the live phase row's 3-dot indicator entirely + Plex flower -
   the user wants ONE clean indicator while thinking, not three.
   ──────────────────── */

/* (A) Sidebar text contrast in DARK MODE - beat lines 2426/2467/2620/2878. */
html[data-app-theme="dark"] body aside.sidebar,
html[data-app-theme="dark"] body aside.sidebar *,
html[data-app-theme="dark"] body aside.sidebar a,
html[data-app-theme="dark"] body aside.sidebar button,
html[data-app-theme="dark"] body aside.sidebar span,
html[data-app-theme="dark"] body aside.sidebar .nav-item,
html[data-app-theme="dark"] body aside.sidebar .nav-label,
html[data-app-theme="dark"] body aside.sidebar .history-item,
html[data-app-theme="dark"] body aside.sidebar .history-item *,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item *,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item .history-title,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item .history-meta {
  color: #E3E1DD;
}

/* Inactive nav labels + meta = secondary grey, NOT dark blue. */
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body .history-item .history-title,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section.sidebar-history .section-body .history-item .history-title,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item .history-title {
  color: #E3E1DD;
  font-weight: 500;
}
html[data-app-theme="dark"] body aside.sidebar .history-meta,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body .history-item .history-meta,
html[data-app-theme="dark"] body aside.sidebar #sidebar-history-list .history-item .history-meta {
  color: #8A8F9C;
}
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body > .nav-item,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body > a.nav-item,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body .history-item,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body #sidebar-history-list > .history-item {
  color: #E3E1DD;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body > .nav-item .nav-label,
html[data-app-theme="dark"] body aside.sidebar .sidebar-section .section-body .history-item .history-title {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item .nav-label,
html[data-app-theme="dark"] body:not(.sidebar-collapsed) aside.sidebar.sidebar #sidebar-history-list .history-item .history-title {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item .history-title {
  color: #E3E1DD;
}
/* Active state */
html[data-app-theme="dark"] body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #FFF;
}
/* Active nav-item highlight: keep the soft blue Home pill but ensure text is white not blue */
html[data-app-theme="dark"] body aside.sidebar .nav-item.active,
html[data-app-theme="dark"] body aside.sidebar a.nav-item.active {
  color: #FFF;
}
html[data-app-theme="dark"] body aside.sidebar .nav-item.active *,
html[data-app-theme="dark"] body aside.sidebar a.nav-item.active * {
  color: #FFF;
}

/* (B) Thinking phase row - remove the 3-dot block AND the Plex flower
  entirely while live. Keep only the shimmer label (one indicator). */
html body .ai-thinking .plex-think,
html body .ai-thinking .msg-thinking-plex,
html body .ai-thinking-text + .plex-think,
html body .msg-thinking-plex {
  display: none;
}
/* Belt-and-braces: the duplicate "Thinking…" header text disappears entirely
   while the phase row is rendering. Use both :has() and an attribute fallback. */
html body .ai-thinking:not(.is-collapsed) .ai-thinking-text {
  display: none;
}
/* When the panel collapses to "Thought for X.Xs", show the header again. */
html body .ai-thinking.is-collapsed .ai-thinking-text {
  display: inline-flex;
  align-items: center !important;
}

/* (C) Phase label only: subtle shimmer, no dot, with leading thin spinner ring. */

/* ════════════════════
   v2008be.stlpolish - STL palette recolor + KPI dashboard + IS routing CSS
   All new rules appended here. Overrides existing neon values for STL nodes
   and adds styles for Builder|KPI tab pill, KPI grid, leaderboard, chart.
   Updated by v40.5ak builder-palette cleanup: all colors locked to palette.
   ════════════════════ */

/* Canvas edge lines: palette-locked #2A2A2A */
.imsg-edge:hover {
  stroke: rgba(239,83,80,0.5);
  stroke-width: 3px;
}

/* Preview bubble: accent blue #2196F3 */
.imsg-preview-bubble {
  background: var(--brand-blue-pure);
}

/* Preview avatar: accent blue */
.imsg-preview-avatar {
  background: var(--brand-blue-pure);
}
/* Route badge hybrid: palette blue */
.imsg-route-badge--hybrid {
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
  border: 1px solid rgba(33,150,243,0.30);
}

/* AI section header: palette blue */
.imsg-ai-section-hdr {
  color: var(--brand-blue-pure);
  border-bottom-color: rgba(33,150,243,0.20);
}

/* AI checkboxes/sliders: palette blue */
.imsg-ai-ctx-check input[type=checkbox] {
  accent-color: var(--brand-blue-pure);
}
.imsg-ai-slider {
  accent-color: var(--brand-blue-pure);
}

/* Input focus rings: palette blue */
.imsg-input:focus,
.imsg-select:focus,
.imsg-textarea:focus {
  border-color: var(--brand-blue-pure);
}

/* Test mode status indicator on automation cards */

/* ── Builder | KPI Dashboard tab pill toggle ── */
.stl-tab-pill-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--overlay-w-04);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  flex-shrink: 0;
}

.stl-tab-pill {
  padding: 5px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--fg-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.4;
}

.stl-tab-pill:hover {
  color: var(--border-card-light);
  background: var(--overlay-w-04);
}

.stl-tab-pill--active {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  font-weight: 700;
}

/* Light theme tab pill */
[data-app-theme="light"] .stl-tab-pill-group,
[data-app-theme="og"] .stl-tab-pill-group {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.07);
}

[data-app-theme="light"] .stl-tab-pill,
[data-app-theme="og"] .stl-tab-pill {
  color: rgba(0,0,0,0.6);
}

[data-app-theme="light"] .stl-tab-pill:hover,
[data-app-theme="og"] .stl-tab-pill:hover {
  color: rgba(0,0,0,0.85);
  background: rgba(0,0,0,0.06);
}

/* ── KPI Dashboard pane ── */
.stl-kpi-pane {
  max-width: 900px;
}

.stl-kpi-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fg-faint-cool));
  margin-bottom: 14px;
}

.stl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stl-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stl-kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.stl-kpi-sub {
  font-size: 10px;
  color: var(--fg-faint);
  margin-bottom: 4px;
}

.stl-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--border-card-light);
  line-height: 1.1;
}

.stl-kpi-awaiting {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(42,42,42,0.5);
  color: var(--fg-faint);
  border: 1px solid var(--surface-charcoal);
  text-transform: uppercase;
  vertical-align: middle;
  display: inline-block;
}

.stl-kpi-muted {
  font-size: 11px;
  color: var(--fg-faint);
}

.stl-kpi-section {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.stl-kpi-section-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 4px;
}

.stl-kpi-section-sub {
  font-size: 10.5px;
  color: var(--fg-faint);
  margin-bottom: 10px;
}

.stl-kpi-chart-wrap {
  padding: 4px 0;
  overflow-x: auto;
}

.stl-kpi-loading {
  color: var(--fg-faint);
  font-size: 12px;
  padding: 20px 0;
}

/* Leaderboard table */
.stl-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.stl-lb-table th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 4px 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--surface-charcoal);
}

.stl-lb-table td {
  padding: 7px 8px;
  color: var(--border-card-light);
  border-bottom: 1px solid rgba(42,42,42,0.5);
}

.stl-lb-table tr:last-child td {
  border-bottom: none;
}

.stl-lb-table td:nth-child(2),
.stl-lb-table td:nth-child(3) {
  text-align: right;
  color: var(--fg-muted-warm);
}

/* Light theme KPI cards */

[data-app-theme="light"] .stl-kpi-card,
[data-app-theme="og"] .stl-kpi-card,
[data-app-theme="light"] .stl-kpi-section,
[data-app-theme="og"] .stl-kpi-section {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.07);
}

/* v2008be.divisiondash - per-division live dashboard layout */
.div-dash-view {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.5rem 0;
  max-width: 1400px;
}
.div-dash-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--overlay-w-07);
}
.div-dash-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-primary, var(--fg-primary));
  margin: 0;
  flex: 1;
}
.div-dash-back {
  font-size: 0.82rem;
  color: var(--fg-secondary, var(--fg-muted-cool));
  text-decoration: none;
  opacity: 0.8;
}
.div-dash-back:hover {
  opacity: 1;
}
.div-dash-refresh {
  margin-left: auto;
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}
.div-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}
.div-kpi-card {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 1rem 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 90px;
}
html[data-app-theme="dark"] .div-kpi-card,
body.dark .div-kpi-card,
.dark .div-kpi-card {
  background: #1F2121;
}
.div-kpi-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fg-faint-cool));
}
.div-kpi-num {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-primary, var(--fg-primary));
}
.div-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.div-chart-card {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
html[data-app-theme="dark"] .div-chart-card,
body.dark .div-chart-card,
.dark .div-chart-card {
  background: #1F2121;
}
.div-mini-chart {
  display: block;
  width: 100%;
  height: 44px;
}
.div-table-card {
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
html[data-app-theme="dark"] .div-table-card,
body.dark .div-table-card,
.dark .div-table-card {
  background: #1F2121;
}
.div-chart-title,
.div-table-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted, var(--fg-faint-cool));
}
.div-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ────────────────────
   v2008be.darkaudit - 2026-05-08 overnight audit
   Root cause analysis:
   (A) v2008be.47f used high-specificity #sidebar + #sidebar-history-list
  IDs for history items, beating all dark-mode overrides.
   (B) gl-dash-tile has no dark-mode override (always white).
   (C) v2008be.darkpolish block used wrong [data-app-theme="dark"] html body
  selector (attr on ancestor of html - never matches). Fixed inline via
  global replace to html[data-app-theme="dark"] body.
   Fixes applied below use matching-or-higher specificity to win.
   ──────────────────── */

/* v2008be.darkaudit.sidebar
   (A) Beat the v2008be.47f #sidebar ID selectors in dark mode.
   Those selectors: aside.sidebar#sidebar #sidebar-history-list .history-item
   = 2 IDs + 2 classes + 2 elements.
   Our override: html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item
   = 1 attr + 2 IDs + 2 classes + 3 elements - wins specificity + source order.
*/
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-history #sidebar-history-list .history-item,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-section.sidebar-history .section-body .history-item {
  background: transparent;
  border: 0;
  color: var(--fg-secondary, #B5B7BE);
}

html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item,
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item .history-title,
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item *,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-section.sidebar-history #sidebar-history-list .history-item .history-title {
  color: var(--fg-secondary, #B5B7BE);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item:hover,
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item:hover .history-title {
  color: var(--fg-primary, #E3E1DD);
  background: rgba(255, 255, 255, 0.06);
}

html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item.active,
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item.active .history-title {
  color: #FFF;
  background: rgba(255, 255, 255, 0.09);
}

/* Also fix the .history-title display rule which only sets layout, keep it: */
html[data-app-theme="dark"] aside.sidebar#sidebar #sidebar-history-list .history-item .history-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.4;
  color: var(--fg-secondary, #B5B7BE);
}

/* Sidebar toggle icon - make it white-ish in dark mode */

/* Sidebar nav items (non-history) - ensure good contrast on dark bg */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-icon {
  color: rgba(255, 255, 255, 0.55);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item {
  color: var(--fg-secondary, #B5B7BE);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:hover {
  color: var(--fg-primary, #E3E1DD);
  background: rgba(255, 255, 255, 0.06);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open {
  color: #64B5F6;
  background: rgba(25, 118, 210, 0.14);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open .sqi-icon {
  color: #64B5F6 !important;
}

/* Sidebar history "view all" link */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-history-viewall {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-history-viewall:hover {
  color: var(--fg-secondary, #B5B7BE);
}

/* Sidebar footer org-name */
html[data-app-theme="dark"] aside.sidebar#sidebar .footer-org-name {
  color: var(--fg-primary, #E3E1DD);
}

/* History item when active in collapsed sidebar mode: bright white  */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-item--history.is-open {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-item--history.is-open .sqi-icon {
  color: rgba(255, 255, 255, 0.55);
}

/* v2008be.darkaudit.kpi-tiles
   (B) gl-dash-tile cards: hardcoded white background, no dark mode override exists.
   These appear on /reports, /divisions/[x], /dashboard.
   Rule at line ~8870 uses html body (no specificity boost) but has !important.
   Use html[data-app-theme="dark"] body to win source-order + add theme guard.
*/
html[data-app-theme="dark"] body .gl-dash-tile,
html[data-app-theme="dark"] body .gl-dash-tile.gdt-canon {
  background: var(--bg-card, #1F2121);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-dash-tile:hover,
html[data-app-theme="dark"] body .gl-dash-tile.gdt-canon:hover {
  background: #262828;
  border-color: rgba(25, 118, 210, 0.38);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-eyebrow {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-title {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-value {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-foot {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-delta {
  color: #64B5F6;
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-delta--down {
  color: #F87171;
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-chart circle.gdt-donut-bg {
  stroke: rgba(255, 255, 255, 0.10);
}
html[data-app-theme="dark"] body .gl-dash-tile .gdt-chart .gdt-axis {
  stroke: rgba(255, 255, 255, 0.10);
}
/* Skeleton tiles */
html[data-app-theme="dark"] body .gl-dash-tile.gdt-skeleton {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

/* Beat the body[data-route] override that hardcodes white for division tiles */
html[data-app-theme="dark"] body[data-route^="/divisions/"] .main .card,
html[data-app-theme="dark"] body[data-route^="/divisions/"] .gl-dash-tile,
html[data-app-theme="dark"] body[data-route="/reports"] .gl-division-card,
html[data-app-theme="dark"] body[data-route="/divisions"] .gl-division-card {
  background: var(--bg-card, #1F2121);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}

/* v2008be.darkaudit.divisions
   Division index cards (.gl-division-card) already have dark mode rules in v2008be.theme
   but the [data-app-theme="dark"] html body selector was broken (fixed above).
   With the fix in place these now work. Belt-and-braces version using correct html[...] form:
*/
html[data-app-theme="dark"] body .gl-division-card {
  background: var(--bg-card, #1F2121);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-title {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-cta {
  color: #64B5F6;
}

/* v41.66: .gl-cn-grid is LAYOUT-ONLY.
   Previously painted #1F2121 (same as the card), causing every category
   to render as one filled slab with faint seams instead of discrete cards,
   and empty trailing grid cells to show as grey voids. Grid is transparent.
   Cards are lifted to #212424 below to sit above the #191B1A page. */
html[data-app-theme="dark"] body .gl-cn-grid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
html[data-app-theme="dark"] body .ds-view,
html[data-app-theme="dark"] body .gl-cn-card {
  background: var(--bg-card, #1F2121);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-cn-card .gdc-title,
html[data-app-theme="dark"] body .gl-cn-card .ds-card-name {
  color: var(--fg-primary, #E3E1DD);
}

/* v2008be.darkaudit.settings
   settings-view--v1929 uses rgba(15,23,42) palette with no dark guard.
   Apply dark tokens for settings rows and section headers.
*/
html[data-app-theme="dark"] body .settings-view--v1929,
html[data-app-theme="dark"] body .main-content .settings-view--v1929 {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-block-head h2 {
  color: var(--fg-primary, #E3E1DD);
}


html[data-app-theme="dark"] body .settings-view--v1929 .srl-title {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .settings-view--v1929 .srl-value {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-row-muted {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-identity-handle {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-outline-btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--fg-secondary, #B5B7BE);
  background: transparent;
}


/* v2008be.darkaudit.automations
   automation-card used in automations-view. Beat any light-mode hardcoded colors.
*/
html[data-app-theme="dark"] body .automations-view .automation-card {
  background: var(--bg-card, #1F2121);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}



/* v2008be.darkaudit.home-cards
   Home page cards (lower section) appear light-colored.
   Beat the rgba(255,255,255,0.92) in html body .gl-dash-tile (already done above).
   Also fix the home-dash-card overrides which use wrong theme selector.
*/
html[data-app-theme="dark"] body .home-dash-card,
html[data-app-theme="dark"] body .home-dash-grid .home-dash-card {
  background: var(--bg-card, #1F2121);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .home-dash-card .home-dash-label,
html[data-app-theme="dark"] body .home-dash-card .home-dash-title {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .home-dash-card .home-dash-sub, html[data-app-theme="dark"] body .home-dash-card .home-dash-meta, one place, no specificity wars.
 * Strategy: scope everything to html[data-app-theme="dark"] and let
 * natural cascade order (this block is last in file) handle wins.
 * ============================================================ */

/* ── A. All cards on overview, dashboards, automations, data-sources, divisions ── */
html[data-app-theme="dark"] body .card, html[data-app-theme="dark"] body .hero-card, html[data-app-theme="dark"] body .panel, html[data-app-theme="dark"] body .kpi-card, html[data-app-theme="dark"] body .right-section, html[data-app-theme="dark"] body .chat-panel, html[data-app-theme="dark"] body .coo-kpi-btn, html[data-app-theme="dark"] body .automations-view .card, html[data-app-theme="dark"] body .connectors-view .card, html[data-app-theme="dark"] body .dashboards-view .card, html[data-app-theme="dark"] body .divisions-view .card, html[data-app-theme="dark"] body .bi-page .card {
  background: #1F2121;
  background-color: #1F2121;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: none;
  color: #E3E1DD;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── B. UNIFIED TEXT in chips: large white, sub light grey, NEVER blue ── */
/* Title row of every chip */
html[data-app-theme="dark"] body .coo-kpi-btn .coo-kpi-label,
html[data-app-theme="dark"] body .coo-kpi-btn .coo-kpi-val,
html[data-app-theme="dark"] body .coo-kpi-btn h3,
html[data-app-theme="dark"] body .coo-kpi-btn strong,
html[data-app-theme="dark"] body .kpi-card .kpi-label,
html[data-app-theme="dark"] body .kpi-card .kpi-val,
html[data-app-theme="dark"] body .kpi-card .kpi-value,
html[data-app-theme="dark"] body .kpi-card h3,
html[data-app-theme="dark"] body .kpi-card strong,
html[data-app-theme="dark"] body .right-section .row-key,
html[data-app-theme="dark"] body .right-section .row-val,
html[data-app-theme="dark"] body .right-section strong,
html[data-app-theme="dark"] body .hero-card h1,
html[data-app-theme="dark"] body .hero-card h2 {
  color: #E3E1DD;
}

/* Subtext / source label / unit suffix */
html[data-app-theme="dark"] body .coo-kpi-btn .coo-kpi-src,
html[data-app-theme="dark"] body .coo-kpi-btn .coo-kpi-sub,
html[data-app-theme="dark"] body .coo-kpi-btn small,
html[data-app-theme="dark"] body .kpi-card .kpi-src,
html[data-app-theme="dark"] body .kpi-card .kpi-sub,
html[data-app-theme="dark"] body .kpi-card small,
html[data-app-theme="dark"] body .hero-card .hero-lead,
html[data-app-theme="dark"] body .right-section .row-key,
html[data-app-theme="dark"] body .right-section small,
html[data-app-theme="dark"] body .right-section .label {
  color: #B5B7BE;
}

/* Kill blue color anywhere it leaked into chip text */
html[data-app-theme="dark"] body .coo-kpi-btn *:not(.icon):not(svg):not(svg *),
html[data-app-theme="dark"] body .kpi-card *:not(.icon):not(svg):not(svg *),
html[data-app-theme="dark"] body .right-section *:not(.icon):not(svg):not(svg *) {
  text-decoration-color: inherit;
}

/* Default values back to white when set to blue */
html[data-app-theme="dark"] body .kpi-card[style*="color"] .kpi-val,
html[data-app-theme="dark"] body .coo-kpi-btn [class*="value"],
html[data-app-theme="dark"] body .kpi-card [class*="value"] {
  color: #E3E1DD;
}

/* ── C. Kill the kpi-pills-row container oval (the [class*="kpi-pill"] match) ── */
html[data-app-theme="dark"] body .kpi-pills-row,
html[data-app-theme="dark"] body div.kpi-pills-row {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Restore the .kpi-pill (singular, child buttons) override since [class*=] hit both */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill,
html[data-app-theme="dark"] body .kpi-pills-row > .kpi-pill {
  background: rgba(255, 255, 255, 0.04);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow: none;
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill svg,
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill svg * {
  stroke: none;
  fill: currentColor;
}

/* ── D. Hide Ask Anything on overview routes ──
 * Two surfaces: (1) inline .chat-panel inside .dashboard-lower
 *  (2) floating #floating-chat pill bottom-right
 */
html[data-app-theme="dark"] body[data-route="/"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/"] .dashboard-view .ask-anything-card,
html[data-app-theme="dark"] body[data-route="/home"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/overview"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/coo"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/operations"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/digital-coo"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/dashboard"] .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/dashboard"] .dashboard-view .ask-anything-card,
html[data-app-theme="dark"] body.route-dashboards .dashboard-view .chat-panel,
html[data-app-theme="dark"] body.route-dashboard .dashboard-view .chat-panel,
html[data-app-theme="dark"] body[data-route="/"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/home"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/overview"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/coo"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/operations"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/digital-coo"] #floating-chat,
html[data-app-theme="dark"] body[data-route="/dashboard"] #floating-chat,
html[data-app-theme="dark"] body.route-dashboards #floating-chat,
html[data-app-theme="dark"] body.route-dashboard #floating-chat,
html[data-app-theme="dark"] body[data-route="/"] .floating-chat,
html[data-app-theme="dark"] body[data-route="/dashboard"] .floating-chat,
html[data-app-theme="dark"] body.route-dashboards .floating-chat,
html[data-app-theme="dark"] body.route-dashboard .floating-chat,
html[data-app-theme="dark"] body[data-route="/home"] .floating-chat,
html[data-app-theme="dark"] body[data-route="/overview"] .floating-chat {
  display: none;
  visibility: hidden;
}

/* ── E. Automations: kill grey sub-chip inset boxes ── */
html[data-app-theme="dark"] body .automations-view .automation-row,
html[data-app-theme="dark"] body .automations-view .automation-item,
html[data-app-theme="dark"] body .automations-view .card .row,
html[data-app-theme="dark"] body[data-route="/automations"] .card .row,
html[data-app-theme="dark"] body .automations-view ul li,
html[data-app-theme="dark"] body .automations-view .automation-list > * {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow: none;
}

/* ── F. Quick Actions buttons: kill the half-circle bleed ── */
html[data-app-theme="dark"] body .quick-actions .btn {
  background: rgba(255, 255, 255, 0.04);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  box-shadow: none;
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .quick-actions .btn::before,
html[data-app-theme="dark"] body .quick-actions .btn::after {
  display: none;
}

/* ── G. Kill "data unavailable" badge dark box ── */
html[data-app-theme="dark"] body .kpi-card .badge,
html[data-app-theme="dark"] body .kpi-card .pill,
html[data-app-theme="dark"] body .kpi-card .empty-state,
html[data-app-theme="dark"] body .kpi-card [class*="unavailable"] {
  background: transparent;
  background-color: transparent;
  border: none;
  color: #8B8D93;
  padding: 0;
}

/* ── H. Compact KPI card heights to reduce deadspace ── */
@media (min-width: 720px) {
  html[data-app-theme="dark"] body .dashboard-view .kpi-grid .kpi-card {
    min-height: auto;
    padding: 14px 16px;
  }
  
  
}

/* ── I. Recent actions list (third screenshot): kill grey row boxes ── */
html[data-app-theme="dark"] body[data-route="/automations"] .recent-actions > * 

/* v2008be.syncpalette.v10 - right-panel rows use unclassed <span>/<strong>
 * Today's Focus + System Status rows: labels are <span>, values are <strong>.
 * Eyebrow "DIGITAL COO" and panel titles "Today's focus" / "System status"
 * also need explicit dark-theme colors.
 */
html[data-app-theme="dark"] body .right-panel .card span,
html[data-app-theme="dark"] body .right-panel .card > div > span,
html[data-app-theme="dark"] body .right-section span,
html[data-app-theme="dark"] body .right-section > div > span,
html[data-app-theme="dark"] body .summary-stack .card span,
html[data-app-theme="dark"] body .summary-stack .card > div > span,
html[data-app-theme="dark"] body .summary-stack .panel span {
  color: #B5B7BE;
}

html[data-app-theme="dark"] body .right-panel .card strong,
html[data-app-theme="dark"] body .right-panel .card > div > strong,
html[data-app-theme="dark"] body .right-section strong,
html[data-app-theme="dark"] body .right-section > div > strong,
html[data-app-theme="dark"] body .summary-stack .card strong,
html[data-app-theme="dark"] body .summary-stack .card > div > strong,
html[data-app-theme="dark"] body .summary-stack .panel strong {
  color: #E3E1DD;
}

/* Eyebrows + panel titles (DIGITAL COO, TODAY'S FOCUS, SYSTEM STATUS) */
html[data-app-theme="dark"] body .dashboard-view .eyebrow,
html[data-app-theme="dark"] body .dashboard-view .panel-title,
html[data-app-theme="dark"] body .right-panel .eyebrow,
html[data-app-theme="dark"] body .right-panel .panel-title,
html[data-app-theme="dark"] body .summary-stack .eyebrow,
html[data-app-theme="dark"] body .summary-stack .panel-title {
  color: #B5B7BE;
}

/* Sidebar bits that still showed light-mode color */
html[data-app-theme="dark"] body .brand-logo-wordmark,
html[data-app-theme="dark"] body .sqi-label,
html[data-app-theme="dark"] body .sidebar-history-viewall,
html[data-app-theme="dark"] body .footer-org-tier-badge,
html[data-app-theme="dark"] body .pill-label {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .brand-logo-wordmark {
  color: #E3E1DD;
}

/* ============================================================
 * v2008be.syncpalette.v11 - overview lower section layout + dark theme
 * Targets: .dashboard-lower > .right-panel containing
 *   - #automations-section (Automations card with .automation-row items)
 *   - #activity-section (Recent Activity with .activity-item entries)
 * Goals: proper card surfaces, row dividers, white/grey text hierarchy,
 * tight spacing matching the rest of the overview.
 * ============================================================ */

/* Layout: dashboard-lower as a clean grid */


html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .right-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Each right-section card */
html[data-app-theme="dark"] body .dashboard-view .right-panel .card.right-section {
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: none;
  color: #E3E1DD;
  min-height: auto;
}

/* Section heading inside right-section (the "AUTOMATIONS" / "RECENT ACTIVITY" eyebrow) */
html[data-app-theme="dark"] body .dashboard-view .right-panel .right-section .eyebrow,
html[data-app-theme="dark"] body .dashboard-view .right-panel .right-section h2,
html[data-app-theme="dark"] body .dashboard-view .right-panel .right-section h3,
html[data-app-theme="dark"] body .dashboard-view .right-panel .right-section .panel-title {
  color: #B5B7BE;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

/* Automation rows: clean dividers, no chip boxes */



/* Automation status dot (the radio-looking thing) */


/* Automation name + sub */
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .automation-name {
  color: #E3E1DD;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .automation-sub,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .text-muted {
  color: #8B8D93;
  font-size: 12px;
  margin: 2px 0 0 0;
}

/* Recent activity items */


html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-title {
  color: #E3E1DD;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-body,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-meta,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-sub {
  color: #8B8D93;
  font-size: 12px;
  margin: 2px 0 0 0;
}

/* Compact stack overall */
@media (min-width: 720px) {
  
}

/* Cap visible rows */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .automation-row:nth-child(n+4),
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list .automation-row:nth-child(n+4),
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-section .activity-item:nth-child(n+4),
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed .activity-item:nth-child(n+4) {
  display: none;
}

/* "View all" footer link via ::after on the inner list container */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list::after,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed::after {
  content: "View all →";
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #B5B7BE;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: right;
  cursor: pointer;
  transition: color 120ms ease;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list:hover::after,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed:hover::after {
  color: #E3E1DD;
}

/* Tighten card padding now that content is short */
html[data-app-theme="dark"] body .dashboard-view .right-panel .card.right-section {
  padding: 16px 18px 14px;
}

/* v12 addendum - activity-dot was rendering as a thin blue vertical bar */

html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  margin-top: 7px;
  display: inline-block;
}
/* Type-coloured dots for action variants if present */



/* ============================================================================
 * OVERVIEW PAGE - clean rebuild (v22)
 *
 * Replaces v13..v21 patch stack with one consolidated block.
 * Single source of truth for overview layout in dark theme.
 *
 * Sections:
 *   1. Page container fits one viewport (no scroll on laptop)
 *   2. Hero card + COO chips (compact)
 *   3. 6 KPI tiles inside hero (vertical, centered, 2x3)
 *   4. Hero summary stack (Today's Focus, System Status, Quick Actions)
 *   5. Lower row (Automations + Recent Activity)
 *   6. Double-line fixes + view-all anchors
 * ============================================================================ */







html[data-app-theme="dark"] body .dashboard-view .hero-card .coo-kpi-grid .coo-kpi-chip,
html[data-app-theme="dark"] body .dashboard-view .hero-card .coo-kpi-grid > * {
  min-height: 34px;
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1.25;
}

/* ─── 3. SIX KPI TILES INSIDE HERO ──────────────────── */

html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 6px 10px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow: none;
  gap: 2px;
}





/* ─── 4. HERO SUMMARY STACK (Today's Focus, System Status, Quick Actions) ──── */

html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > * {
  padding: 8px 12px;
}



html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions .qa-btn::before,
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions .qa-btn::after,
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions button::before,
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions button::after {
  content: none;
  display: none;
  background: none;
  border: none;
}


/* ─── 5. LOWER ROW (Automations + Recent Activity) ──────────────────── */









/* Hide legacy injected Recent Actions block if it ever appears */
html[data-app-theme="dark"] body .dashboard-view .recent-actions-wrap,
html[data-app-theme="dark"] body .dashboard-view #recent-actions-feed {
  display: none;
}


html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > .summary-card,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > * {
  padding: 8px 12px;
  border-radius: 10px;
}


/* Cap stack to viewport budget */

/* Match hero card heights more carefully */














html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions {
  margin-top: 0;
}


/* Also cap hero card explicitly */


/* The markup is: .dashboard-lower > [.chat-panel, .right-panel(automations + activity)]
 * We hide chat-panel on overview and let .right-panel span the full grid
 * with automations + activity as a 2-col internal grid.
 */







/* Kill #main-content padding-bottom that adds 37.5px overflow */
html[data-app-theme="dark"] body #main-content {
  padding-bottom: 0;
  overflow: hidden;
}

html[data-app-theme="dark"] aside.sidebar #sidebar-history-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 280px);
}
/* Belt-and-suspenders: kill document-level scrolling on dashboard route only */


/* ============================================================================
 * v23 - Overview polish (single source of truth, supersedes v22.x stacking/font/QA)
 *
 * Fixes for user feedback:
 *  - Today's Focus / System Status rows truncate; user wants no truncation
 *  → stack label above value vertically (label small caps eyebrow, value bold)
 *  - Quick Actions 2x2 buttons leave too much empty cell space
 *  → 1x4 row, buttons fill the chip width
 *  - Automations / Recent Activity show faint bottom border + View all invisible
 *  → kill last-row border, lift card max-height enough to reveal View all
 *  - Font scale was 10.5 / 11 / 11.5 / 12 / 13 mixed → standardize:
 *  eyebrow 11px, body 12px, value 13px, headline 22.5px (unchanged)
 * ============================================================================ */

/* ─── 1. Page hero height balance ──────────────────── */



/* ─── 2. Summary panels (Today's Focus, System Status, Quick Actions) ──────── */



/* Summary-item: stacked vertical layout (label above, value below) ────────── */





/* ─── 3. Quick Actions: 1x4 row, buttons fill the chip ──────────────────── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .qa-btn,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions button {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #E3E1DD;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── 4. Hero left: COO chips + headline tighter spacing ──────────────────── */




/* ─── 5. KPI tiles inside hero (consistent font scale) ──────────────────── */



/* ─── 6. Lower row: Automations + Activity - show View all, kill last border ─ */



/* Limit shown rows to 3 each so View all has room */

/* Bottom border on rows but NOT on the last visible row */

/* Kill border-bottom on last visible row (3rd of type) */

/* Item name typography */


/* View all link styled like an actionable footer */



/* ─── 7. dashboard-view total budget bump for new lower-row height (240) ───── */


/* v23c - KPI skeleton loading hint */


/* v23f - Summary-item: horizontal flex with wrap, compact when short, wraps when long ── */




/* Tighter panels to fit in 470px budget */


/* Allow summary-stack to scroll if absolutely overflowing instead of clipping */

/* Quick actions: shorter buttons */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .qa-btn,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions button {
  min-height: 30px;
  padding: 6px 4px;
  font-size: 11px;
}

/* v23g - fix Quick Actions clipping (panel-stack overflowing 470) + Automations View all clipped at 240 cap */
/* 1) Lift lower-row card cap so View all is visible in BOTH cards */

/* 2) Tighten lower-row rows so 3 rows + header + View all fits cleanly in 270 */

/* 3) Hero summary-stack: hard-cap each panel so all three fit inside 470px hero height */
/*  Today's Focus: ≤180, System Status: ≤180, QA: ≤90, + gaps */



/* 4) Even tighter summary items so 6 rows fit in 188px (header ~22 + 6 rows ~24px each) */






/* v23h - UNIFY automation row and activity row look (same height, same dot, same dividers) */
/* Goal: rows the same total height so dividers line up across both cards; matching dot style. */

/* Equal padding so both row types are 56px tall (10px top + ~32px content + 10px bottom + 4 buffer) */


/* UNIFIED DOT - both cards use 8px, neutral grey for inactive, brand blue + halo for active */

/* Active state for automation (.auto-status.on) - keep blue dot but smaller halo */

/* Activity rows: always neutral (no constant blue halo) */


/* Unify font sizes between the two row types so visual weight matches */



/* Single divider only - never a double line. View all link gets NO top border. */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .view-all-link,
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list + .view-all-link,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-section .view-all-link,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed + .view-all-link {
  border-top: none;
  padding-top: 10px;
  margin-top: 4px;
}
/* Strict last-row no-divider (covers both row types in either card) */


/* Bump card cap so 3 unified rows (56*3=168) + header (~28) + View all (~24) + padding fit cleanly */


/* v23i - KPI top gap + stacked summary-items for long values */
/* 1) Add breathing room between the 12 COO chips and the 6 KPI tiles below */
html[data-app-theme="dark"] body .dashboard-view .page-hero .hero-card .kpi-grid--hero,
html[data-app-theme="dark"] body .dashboard-view .page-hero .hero-card #kpi-grid {
  margin-top: 14px;
}

/* 2) summary-item--stack: label on row 1, full value on row 2 (right-aligned) */




/* 3) Now there are fewer rows, lift the per-panel cap so the 2-line stacks fit cleanly */


/* v23j - force stacked summary values to wrap inside the card width */

/* Force the panel cards to constrain their content (no overflowing horizontally) */



/* v23l - revert font bump; narrow value column so long values wrap to 2 lines */



/* Panel heights right-sized for 2-line wrapped values at 11.5px */



/* v23m - no hyphenation breaks mid-word on stacked values */


/* v23n - Quick Actions: larger buttons that fill the row, no truncation, fill dead space */

html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .panel-title {
  margin: 0 0 12px 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .quick-actions-grid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
  align-items: stretch;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions .qa-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 10px;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  word-break: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* v23o - remove the outer container pill and inner pill bubbles around KPI category buttons */
html[data-app-theme="dark"] body .kpi-pills-row,
html[data-app-theme="dark"] body #kpi-pills-row {
  border: none;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill {
  border: none;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 8px;
}
/* Subtle hover affordance (still no outline, just a light bg tint) */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill:hover,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* v23p - fix KPI category pills: line-stroke icons, one pill bubble around BOTH icon + label */
/* 1) Strip the round container behind each icon so icons read as line-art */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill__icon,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill__icon {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  color: #B5B7BE;
}
/* 2) Restore SVG to stroke-only line icons (kill the global fill override) */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill svg,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill svg {
  fill: none;
  stroke: currentColor;
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill svg *,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* But circles in retention icon need filled centers? Actually no - keep all stroke. */

/* 3) ONE pill outline around BOTH icon + label */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill {
  background: rgba(255, 255, 255, 0.04);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 10px 18px;
  gap: 8px;
  color: #B5B7BE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill:hover,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill:hover svg,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill:hover svg,
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill:hover .kpi-pill__icon,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill:hover .kpi-pill__icon {
  color: #E3E1DD;
}

/* v23q - remove the inner border around the label text inside KPI pills */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill .kpi-pill__label,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill .kpi-pill__label,
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill__label,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill__label {
  border: none;
  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  outline: none;
}

/* ============================================================
 * v23s - Sidebar polish
 * Fixes:
 *  1. Brand wordmark "Totaly" was rendering rgb(15,23,42) (dark slate) - override to light grey
 *  2. Active nav item (Home, Chat history) was painting label dark blue + blue chip - neutralize
 *  3. Chat history label was rgba(10,10,10,0.55) (invisible) - force light grey
 *  4. Active chip background changed from blue to neutral grey
 * (Per-row title truncation fix handled in app.js fetchChatHistory.)
 * ============================================================ */

/* 1. Brand wordmark always light grey in dark theme.
   Higher specificity needed to beat .sidebar-header--v1944 rule at line 5679. */
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-header .brand-logo-wordmark,
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark,
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-header--v1944 .brand .brand-logo-wordmark,
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-wordmark,
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-header--v1944 button.brand .brand-logo-wordmark {
  color: #E3E1DD;
}

/* 2 + 3. Sidebar nav items: labels ALWAYS light grey, no inherited dark blue */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-label,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-label,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open .sqi-label,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history .sqi-label,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history.is-open .sqi-label {
  color: #E3E1DD;
}

/* Default sidebar item color (whole anchor) - light grey, never dark blue */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history.is-open {
  color: #E3E1DD !important;
}

/* Icon stays muted, brighter when active */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon {
  color: rgba(255, 255, 255, 0.55);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open .sqi-icon {
  color: #E3E1DD !important;
}

/* 4. Active chip - neutral grey, no blue */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open,
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history.is-open {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Chat history button: when expanded (.is-open) DO NOT paint a chip - user wants it
   to look identical to other nav rows (we keep the .active chip only for routes). */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-nav--v1929 #sqi-history.is-open:not(.active) {
  background: transparent;
}

/* v23u - Automations: kill white wrapper around card list.
   Some wildcard rule was painting a 1px rgba(255,255,255,0.8) border around #automations-cards. */
html[data-app-theme="dark"] body #automations-cards,
html[data-app-theme="dark"] body .automations-view .automations-cards {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ============================================================
 * v23v - Automations: text contrast + scroll + WIRED pill restyle
 * Fixes:
 *  1. .automation-card-title rendered rgb(30,41,59) (near-black) - force light
 *  2. .automation-card-metric ("0 runs") same dark slate - force light grey
 *  3. Eyebrow (PAUSED · NEVER RUN) dark - force light grey
 *  4. WIRED pill green → Totaly blue outline matching "+ New automation"
 *  5. Page won't scroll: v22.4 forced #main-content overflow:hidden globally.
 *  Restrict to route-dashboards (where the no-scroll is intentional).
 * ============================================================ */

/* Re-enable scroll on every non-dashboard route */


/* Automation card text: titles, eyebrows, metrics → light grey/white */
html[data-app-theme="dark"] body .automation-card .automation-card-title,
html[data-app-theme="dark"] body .automation-card .automation-card-title > * {
  color: #E3E1DD;
}

/* Description body text (between title and Run now) */
html[data-app-theme="dark"] body .automation-card .automation-card-body,
html[data-app-theme="dark"] body .automation-card .automation-card-description,
html[data-app-theme="dark"] body .automation-card p {
  color: #B5B7BE;
}
/* But keep wire-pill colors (PAUSED/WIRED) untouched - they have their own modifiers */
html[data-app-theme="dark"] body .automation-card .wire-pill,
html[data-app-theme="dark"] body .automation-card .wire-pill * {
  color: inherit;
}

/* Fix nested <strong> inside .automation-card-metric and similar inheriting dark slate */
html[data-app-theme="dark"] body .automation-card strong,
html[data-app-theme="dark"] body .automation-card b,
html[data-app-theme="dark"] body .automation-card-metric strong,
html[data-app-theme="dark"] body .automation-card-metric b {
  color: inherit;
}

/* WIRED pill restyled to Totaly blue outline (matches "+ New automation" pill) */
html[data-app-theme="dark"] body .wire-pill.wire-pill--wired {
  color: #E3F2FD;
  background: rgba(25, 118, 210, 0.14);
  border: 1px solid rgba(25, 118, 210, 0.4);
}

/* ============================================================
 * v23x - Automations: high-specificity color fixes + iMessage dot alignment
 * Fixes from screenshot:
 *  1. Stat numbers ("38 sent 24h", "76 events 24h", "4,224 in queue") rendered
 *  #0f172a (dark slate) because line 8373 forces it - override with higher specificity.
 *  2. Scheduled emails "Daily ops overview" rendering dark slate (line 8912 scheduler-jobs-card .activity-title).
 *  3. iMessage card status dot vertically misaligned with title: align-items:center on
 *  .automation-card-head centers the dot against the (title + status row) midpoint,
 *  not the first line of the title. Switch to flex-start + manual top offset.
 * ============================================================ */

/* 1. Stat numbers light - beat line 8373 specificity */

/* label text after the number stays muted */



/* 2. Scheduled emails activity-title light */


/* Activity meta below ("Active · last ran never · next -") */


/* 3. iMessage card status dot align with FIRST line of title */

/* Toggle switch should stay vertically centered with whole head (it's a chunky control) */

/* Title row becomes a horizontal flex of inline pieces, vertically centered */


/* Inline status dot inside title: small grey by default, blue when .on */



/* Inline run metric inside title row: light muted */



/* Card head is now just title-wrap + toggle. align top to be safe */

/* Toggle stays vertically centered against the whole head block */


/* Foot: only actions remain, push them to the right */



/* ────────────────────
   v24 - topnav hover pill rounding + Connectors dark-theme rework
   Issues fixed:
   1) Topnav nav items had square (border-radius 0) hover backgrounds because
  the giant comma-merged rule at lines 7584-7622 lumped nav-item selectors
  together with the strip-pill container and applied border-radius: 0.
  We restore the pill-rounded hover/active on all gfp-items, all routes.
   2) The pill container itself had overflow-y: auto which, combined with the
  dropdown menu height, was occasionally scrolling items above the visible
  area on programmatic interactions. Force overflow visible - the menu is
  position:absolute and renders outside correctly.
   3) Connectors view (.gl-cn-view) had a light white gradient wrapper that
  clashed with the dark theme used everywhere else. Strip the wrapper,
  use transparent container, restyle header text + category labels +
  stats to match Automations / Divisions polish.
   ──────────────────── */

/* ── 1) Topnav items: ALWAYS pill-rounded (beats line 7611 strip rule) ── */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:hover,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:focus,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger:hover,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger[aria-expanded="true"] {
  border-radius: 999px;
}
/* Kill focus outline (browser default dashed square that user noticed) */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:focus,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger:focus {
  outline: none;
}
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:focus-visible,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger:focus-visible {
  outline: 2px solid rgba(25, 118, 210, 0.55);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Unified hover + active treatments matching the existing dark-theme palette */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:hover,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #E3E1DD;
}
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger.active {
  background: rgba(25, 118, 210, 0.20);
  color: #E3F2FD;
  box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.40);
  font-weight: 600;
}
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger[aria-expanded="true"]:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #E3E1DD;
}

/* ── 2) Pill container: kill the overflow that hides items on scroll ── */
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar,
html body header.topbar .gl-floating-pill.gl-floating-pill--topbar,
html body nav.gl-floating-pill.gl-floating-pill--topbar {
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

/* ── 3) Connectors page: dark-theme rework matching Automations polish ── */
html[data-app-theme="dark"] body .gl-cn-view,
html body .gl-cn-view {
  background: transparent;
  background-image: none;
  border: 0 solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 1rem 1.5rem 2rem 1.5rem !important;
  max-width: 1280px !important;
  margin: 0 auto;
}

/* Header: title + subtitle + stats - light text on dark, mirrors Automations */
html body .gl-cn-view .gl-cn-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
html body .gl-cn-view .gl-cn-title {
  color: #E3E1DD;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
}
html body .gl-cn-view .gl-cn-sub {
  color: #B5B7BE;
  font-size: 0.92rem;
  margin: 0 0 1rem 0;
  max-width: 62ch;
  line-height: 1.5;
}
html body .gl-cn-view .gl-cn-stats {
  display: flex;
  gap: 1.25rem;
  margin: 0;
}
html body .gl-cn-view .gl-cn-stats .gl-cn-stat {
  color: #B5B7BE;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
html body .gl-cn-view .gl-cn-stats .gl-cn-stat strong {
  color: #E3E1DD;
  font-size: 1rem;
  font-weight: 600;
}

/* Category labels (OPERATIONS, FINANCE, ...) - slightly brighter, more breathing room */
html body .gl-cn-view .gl-cn-section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
html body .gl-cn-view .gl-cn-section + .gl-cn-section {
  margin-top: 1.75rem;
}
html body .gl-cn-view .gl-cn-cat {
  color: #B5B7BE !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  text-transform: uppercase !important;
  letter-spacing: 0.10em;
  margin: 0 0 0.85rem 0.1rem;
  padding: 0;
}

/* Cards: unify with dark card styling (rgba(31,33,33,1) bg, subtle border) */
html body .gl-cn-view .gl-cn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  html body .gl-cn-view .gl-cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* v41.58h: misc block L18390-L18392 moved to mobile-v2.css */
/* v41.66: card raised from #1F2121 -> #212424 to separate from grid+page */
html body .gl-cn-view .gl-cn-card {
  background: #212424;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: none;
  padding: 14px 14px 12px 14px;
  color: #E3E1DD;
}
html body .gl-cn-view .gl-cn-card:hover {
  border-color: rgba(25, 118, 210, 0.32);
  background: #232525;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}
html body .gl-cn-view .gl-cn-card.is-connected {
  border-color: rgba(25, 118, 210, 0.45);
  background: linear-gradient(180deg, rgba(25, 118, 210, 0.06) 0%, rgba(31, 33, 33, 1) 100%);
}

/* Icon tile */
html body .gl-cn-view .gl-cn-card .gds-icon {
  background: rgba(25, 118, 210, 0.14);
  color: #64B5F6;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

/* Title + chip + description */
html body .gl-cn-view .gl-cn-card .gds-title {
  color: #E3E1DD !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: -0.003em;
}
html body .gl-cn-view .gl-cn-card .gds-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #B5B7BE;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
/* v41.66: connected chip uses Totaly blue, NOT green. Fixes the
   green-paint-into-border look Branson called out. Brand rule:
   #2196F3 only, no green anywhere. */
html body .gl-cn-view .gl-cn-card .gds-chip--connected,
html body .gl-cn-view .gl-cn-card.is-connected .gds-chip {
  background: rgba(33, 150, 243, 0.18) !important;
  color: #90CAF9 !important;
}
html body .gl-cn-view .gl-cn-card .gds-desc {
  color: #B5B7BE;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

/* Connect button - outline blue like the WIRED pill, NOT a solid blue block */
html body .gl-cn-view .gl-cn-card .gds-cta,
html body .gl-cn-view .gl-cn-card button:not(.toggle) {
  background: rgba(25, 118, 210, 0.14);
  color: #E3F2FD;
  border: 1px solid rgba(25, 118, 210, 0.40);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease;
  cursor: pointer;
}
html body .gl-cn-view .gl-cn-card .gds-cta:hover,
html body .gl-cn-view .gl-cn-card button:not(.toggle):hover {
  background: rgba(25, 118, 210, 0.22);
  border-color: rgba(25, 118, 210, 0.55);
  transform: none;
}
html body .gl-cn-view .gl-cn-card .gds-cta--disconnect {
  background: transparent;
  color: #B5B7BE;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
html body .gl-cn-view .gl-cn-card .gds-cta--disconnect:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #E3E1DD;
}

/* v24 - Dashboards hub (the /dashboards Overview page) title was dark blue
   on dark background. Mirror Automations/Connectors header treatment. */

/* v24a - Connectors chips: remove background, keep just the label */
html body .gl-cn-view .gl-cn-card .gds-chip,
html body .gl-cn-view .gl-cn-card .gds-chip--connected,
html body .gl-cn-view .gl-cn-card.is-connected .gds-chip {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* ────────────────────
   v24b - Mobile top bar polish (iPhone screenshot was a disaster)
   Issues fixed:
   1) Broken avatar image was forced display:block even after
  the load-error handler set inline display:none, so the OS broken-image
  icon bled through the BW fallback. Stop forcing block; respect inline.
   2) The center segmented switch was 52px tall (Dynamic Island height)
  with 44px buttons. Reduce to a clean 36px capsule that fits a thumb
  without dominating the bar.
   3) Tighten kebab and avatar to 36px so all three chips share one line
  height and visually balance.
   ──────────────────── */

/* 1) Avatar image: only show when actually loaded (inline display wins) */
/* v41.58h: component:mobile-topnav block L19274-L19295 moved to mobile-v2.css */
/* When the gutter to the left is too tight (small viewports), tuck it back
   inside the grid but above the cards instead of overlapping them. */
@media (max-width: 1100px) {
  html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize {
    left: 0;
    top: -36px !important;
  }
}/* Drop the @media(max-width:1100px) override from v25 (left:-36px gutter
   no longer applies; the button now lives in the launcher top gutter). */
@media (max-width: 1100px) {
  html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize {
    top: 4px !important;
    left: 4px !important;
  }
}/* Card: match .dr-overview-card exactly. Important to override the
   `flex: 0 0 280px; width: 280px;` rule at style.css:5830. */

/* Card internals: icon centered on top, title large + centered, meta
   small + muted + centered, CTA pinned to bottom-center. Mirrors the
   layout of .dr-overview-card. */

/* Dim/disabled cards (Coming soon placeholders) keep the centered layout
   but lose the hover lift. */

/* Header: match .dr-overview-header spacing on /divisions. */

/* Breadcrumb sits cleanly above the header (Sales / D2D subpages). */

/* Dark-theme parity for divisions cards (mirror what .dr-overview-card
   gets at lines 17219/19887). Keeps emerald-glass look in dark mode. */
html[data-app-theme="dark"] body .gl-division-card {
  background: rgba(31,33,33,0.92);
  border-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-title { color: rgba(255,255,255,0.92); }
html[data-app-theme="dark"] body .gl-division-card .gdc-cta   { color: #5BA9F2; }
html[data-app-theme="dark"] body .gl-division-card:hover {
  box-shadow: 0 4px 16px rgba(91,169,242,0.16);
  border-color: rgba(91,169,242,0.28);
}

/* Mobile: stack to single column. */
/* [moved to mobile-v2.css v41.58k — was L18502-L18509 @media (max-width: 768px)] */

/* === DARK THEME: divisions page parity =============================== */

html[data-app-theme="dark"] body .gl-divisions-title {
  color: rgba(255,255,255,0.92);
}
html[data-app-theme="dark"] body .gl-divisions-sub {
  color: rgba(255,255,255,0.55);
}
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
}

html[data-app-theme="dark"] body .gl-division-card.gl-division-chip .gdc-icon {
  background: rgba(91,169,242,0.14);
  color: #5BA9F2;
}


/* === DASHBOARDS HUB: chip sections grouped by division =============== */

/* Per-division chip-only sub-page */

/* Dark theme parity for chip sections + chips */
html[data-app-theme="dark"] body .dr-chip,
html[data-app-theme="dark"] body .gl-report-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
html[data-app-theme="dark"] body .dr-chip:hover,
html[data-app-theme="dark"] body .gl-report-chip:hover {
  background: rgba(91,169,242,0.12);
  border-color: rgba(91,169,242,0.32);
  color: #5BA9F2;
}
html[data-app-theme="dark"] body .gl-divisions-empty {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.50);
}

/* Mobile: divisions chips become 2 columns; dashboards chip rows still wrap */

/* v27b - Divisions header contrast on dark (was inheriting #0f172a) */
html[data-app-theme="dark"] body .gl-divisions-view .gl-divisions-title,
html[data-app-theme="dark"] body .gl-divisions-view--centered .gl-divisions-title {
  color: #FFF;
}
html[data-app-theme="dark"] body .gl-divisions-view .gl-divisions-sub,
html[data-app-theme="dark"] body .gl-divisions-view--centered .gl-divisions-sub {
  color: rgba(255,255,255,0.62);
}

/* v27d - Force dark division chip cards on /divisions (override v26b white bg) */

/* Light theme equivalent - neutral icon, no blue tint */

/* ────────────────────
   v27g - Divisions: kill blue chip tint, center subtext, pull row up.
   User feedback: "blue highlights over the chips", subtext not centered,
   chips sit too low on the Studio Display, pull them up to look natural.
   ──────────────────── */

/* 1. Neutralize the blue icon background so chips read as plain dark cards.
  The .gdc-icon was using rgba(91,169,242,0.14) which gave each chip a
  visible blue highlight. Switch to a neutral white-alpha surface. */
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip .gdc-icon {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.06);
}
/* 2. Soften the hover so it also reads neutral, not blue-tinted. */



/* 3. Light theme: same neutral treatment so no blue tint anywhere. */
/* 2) Force ALL .gl-division-card on dark theme to be dark, regardless of
  which route renders them (sales index, indoor, d2d, retention chips,
  operations chips, etc.). Beats inline / light-theme defaults. */

/* All title/sub text inside any .gl-division-card → white-ish */

/* "Open … →" CTA inside division cards → neutral */

html[data-app-theme="dark"] body .gl-division-card:hover .gdc-cta {
  color: rgba(255,255,255,0.92);
}/* Breadcrumb on /divisions/<slug> and /divisions/sales/<channel> */

/* 4) /reports/<slug> dark themed placeholder */
html[data-app-theme="dark"] body .iframe-view {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 2rem;
}
html[data-app-theme="dark"] body .embed-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
html[data-app-theme="dark"] body .btn-back {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
html[data-app-theme="dark"] body .btn-back:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
html[data-app-theme="dark"] body .embed-title {
  color: rgba(255,255,255,0.95);
  font-size: 1.1rem;
  font-weight: 600;
}
html[data-app-theme="dark"] body .iframe-container {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 2rem;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-app-theme="dark"] body .iframe-empty-state {
  text-align: center;
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  padding: 3rem 2rem;
}
html[data-app-theme="dark"] body .iframe-empty-state p {
  margin: 0;
}
html[data-app-theme="dark"] body .skeleton-block {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  border-radius: 8px;
  width: 100%;
}
/* 3) Sub-text contrast bump */

/* ─── v29c - Force .gdc-meta white on dark theme ──────────────────── */

/* ────────────────────
   v30 - Inside-route polish: kill .gl-chip-grid blue (matches [class*="chip"]
   global), center divisions chip-page content, style .bi-back-link, fix the
   "KPI data unavailable" empty state centering and chart card header strips.
   ──────────────────── */

/* 1) .gl-chip-grid was inheriting rgba(33,150,243,0.08) blue from global
  [class*="chip"] rule. Force transparent. Also center the chips. */

/* 2) Ensure .gl-divisions-view inner content centers (was margin: 0 20px) */

/* 3) Style the BI back link (was unstyled <a>) */
html[data-app-theme="dark"] body .bi-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-decoration: none;
}
html[data-app-theme="dark"] body .bi-back-link:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.95);
}
html[data-app-theme="dark"] body .bi-back-link::before {
  content: "←";
  margin-right: 0.2rem;
}

/* 4) BI header layout: align breadcrumb + title + right controls */
html[data-app-theme="dark"] body .bi-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1.25rem;
}
html[data-app-theme="dark"] body .bi-header .bi-title,
html[data-app-theme="dark"] body .bi-header h1,
html[data-app-theme="dark"] body .bi-header h2 {
  color: rgba(255,255,255,0.95);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  flex: 1;
}

/* 5) BI body: constrain + center content area inside the route */
html[data-app-theme="dark"] body .bi-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

/* 6) "KPI data unavailable" empty state \u2014 dark theme readable */

/* 7) Chart card header strips: kill any [class*="chip"] blue inheritance.
  The "CANCELLATIONS - 12 WEEK" header band reads as faint blue from
  .dr-chart-header or similar matching the global chip rule. */

/* 8) "No data for this period" empty state inside charts */

/* 9) Essentials bar (Run churn scan etc.) \u2014 clean centered row */
html[data-app-theme="dark"] body .dr-essentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  margin: 0 auto 1rem auto;
  max-width: 1280px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html[data-app-theme="dark"] body .dr-essential-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
html[data-app-theme="dark"] body .dr-essential-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.95);
}

/* 10) WTD period dropdown + Refresh button on bi-header right side */
html[data-app-theme="dark"] body .bi-refresh-btn,
html[data-app-theme="dark"] body button.bi-refresh-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
html[data-app-theme="dark"] body .bi-refresh-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

/* ────────────────────
   v31 - Chat history dark mode + dashboards BI hub + card title polish
   ──────────────────── */

/* 1. Chat history: kill the inherited white-glass pill in dark mode.
  The rule at line ~1872 inside @media (min-width:769px) applies a
  light-glass gradient unconditionally to .chats-header. We override
  that for dark theme only. */


html[data-app-theme="dark"] .chats-header button,
html[data-app-theme="dark"] .chats-header .mt-menu-item,
html[data-app-theme="dark"] body button.mt-menu-item {
  background: rgba(255,255,255,0.06);
  background-color: rgba(255,255,255,0.06);
  color: var(--fg-primary, #E3E1DD);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: none;
}
html[data-app-theme="dark"] .chats-header button:hover,
html[data-app-theme="dark"] body button.mt-menu-item:hover {
  background: rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.10);
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] .chats-header input[type="search"],
html[data-app-theme="dark"] .chats-view input[type="search"],
html[data-app-theme="dark"] .chats-view input[type="text"] {
  background: rgba(255,255,255,0.04);
  background-color: rgba(255,255,255,0.04);
  color: var(--fg-primary, #E3E1DD);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
html[data-app-theme="dark"] .chats-view input::placeholder {
  color: var(--fg-secondary, #8A8C92);
}

/* 2. Card title bars (inside BI routes): kill any white-pill-ish look,
  give them a clean caps eyebrow on transparent bg.
  The .bi-card-title has color rgba(25,26,26,.55) (light theme value)
  which on a dark card reads as a faint dark band. Force light text
  in dark mode and ensure transparent bg. */
html[data-app-theme="dark"] body .bi-card-title,
html[data-app-theme="dark"] body .bi-card .bi-card-title,
html[data-app-theme="dark"] body[data-route^="/dashboards"] .bi-card-title {
  background: transparent;
  background-color: transparent;
  color: var(--fg-secondary, #B5B7BE);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

/* 3. Dashboards BI hub overview ──────────────────── */

.dash-hub {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dash-hub-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.dash-hub-eyebrow {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  margin: 0;
}
.dash-hub-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-primary, var(--fg-primary));
  margin: 0;
}
.dash-hub-sub {
  font-size: 0.9rem;
  color: var(--fg-secondary, #8A8C92);
  margin: 0;
}

/* Filter bar */
.dash-hub-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: var(--overlay-w-03);
  border: 1px solid var(--overlay-w-07);
  border-radius: 12px;
}
.dash-hub-filters select,
.dash-hub-filters button {
  background: var(--border-soft);
  color: var(--fg-primary, var(--fg-primary));
  border: 1px solid var(--border-overlay-10);
  border-radius: 10px;
  padding: 0.42rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.dash-hub-filters select:focus,
.dash-hub-filters button:hover {
  background: var(--border-overlay-10);
  outline: none;
}

/* KPI strip */
.dash-hub-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}
@media (max-width: 1100px) { .dash-hub-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
/* v41.58h: component:kpi block L19094-L19094 moved to mobile-v2.css */

.dash-hub-kpi {
  background: var(--overlay-w-03);
  border: 1px solid var(--overlay-w-07);
  border-radius: 12px;
  padding: 0.7rem 0.85rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 88px;
}
.dash-hub-kpi-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
}
.dash-hub-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg-primary, var(--fg-primary));
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dash-hub-kpi-delta {
  font-size: 0.74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--fg-muted-alpha);
}
.dash-hub-kpi-delta.is-up    { color: #4CAF7A; }
.dash-hub-kpi-delta.is-down  { color: #E5736E; }
.dash-hub-kpi-delta.is-flat  { color: var(--fg-muted-alpha); }

/* Chart grid */
.dash-hub-chart-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
}
@media (max-width: 980px) { .dash-hub-chart-grid { grid-template-columns: 1fr; } }

.dash-hub-card {
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--overlay-w-07);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dash-hub-card-title {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  margin: 0;
}

/* Leaderboard */
.dash-hub-leaderboard {
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--overlay-w-07);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.dash-hub-leaderboard h3 {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  margin: 0 0 0.6rem;
}
.dash-hub-leaderboard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.dash-hub-leaderboard thead th {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.dash-hub-leaderboard tbody td {
  padding: 0.5rem 0.5rem;
  color: var(--fg-primary, var(--fg-primary));
  border-bottom: 1px solid var(--overlay-w-04);
  font-variant-numeric: tabular-nums;
}
.dash-hub-leaderboard tbody tr:hover td {
  background: var(--overlay-w-03);
}

/* AI insights */
.dash-hub-insights {
  background: var(--bg-card, var(--bg-card));
  border: 1px solid var(--overlay-w-07);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.dash-hub-insights h3 {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  margin: 0 0 0.6rem;
}
.dash-hub-insights-body {
  font-size: 0.9rem;
  color: var(--fg-primary, var(--fg-primary));
  line-height: 1.45;
}
.dash-hub-insights-body ul { margin: 0; padding-left: 1.1rem; }
.dash-hub-insights-body li { margin-bottom: 0.4rem; }
.dash-hub-insights-loading {
  color: var(--fg-secondary, #8A8C92);
  font-style: italic;
}

/* Division grid (kept underneath as drill-downs) */

/* ────────────────────
   v34 - Messages view (iMessage-style Speed-to-Lead)
   Routes: /messages, /messages/<phone_e164>
   Mirrors macOS Messages: top status bar, left thread list, right bubbles.
   ──────────────────── */



.msg-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg, var(--fg-primary-ice));
  overflow: hidden;
}
body.route-messages #main-content,
body.route-messages .main-content {
  /* Empty topbar is collapsed on Messages; use full viewport. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
  padding: 0;
}
/* v38c: lock body + html so hover popups (history-hover-card etc.) cannot inflate page height */

html[data-app-theme="dark"] .msg-view { background: #191A1A; }

.msg-status-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.12);
  background: var(--fg-inverse);
  flex-shrink: 0;
  flex-wrap: wrap;
  font-size: 13px;
}
html[data-app-theme="dark"] .msg-status-bar {
  background: #1F2121;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.msg-stat { display: flex; align-items: center; gap: 8px; }
.msg-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: rgba(60, 64, 67, 0.65);
  font-weight: 600;
}
html[data-app-theme="dark"] .msg-stat-label { color: rgba(255, 255, 255, 0.55); }
.msg-stat-val { font-weight: 600; font-size: 13px; color: var(--bg-elev-2); }
html[data-app-theme="dark"] .msg-stat-val { color: #f5f5f7; }
.msg-stat-bad .msg-stat-val { color: var(--status-danger); }

.msg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.msg-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.msg-pill-on  { color: var(--status-success-deep); }
.msg-pill-off { color: var(--status-danger); }
.msg-pill-optout {
  color: var(--status-danger);
  margin-left: 6px;
}
.msg-cap-bar {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: rgba(60, 64, 67, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.msg-cap-fill {
  display: block;
  height: 100%;
  background: var(--accent-primary-hover);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.msg-stat-skeleton {
  width: 120px; height: 14px;
  background: var(--fg-muted-light-alpha);
  border-radius: 4px;
}
.msg-stat-hours .msg-stat-val {
  font-weight: 400;
  color: rgba(60, 64, 67, 0.72);
}
html[data-app-theme="dark"] .msg-stat-hours .msg-stat-val { color: rgba(255, 255, 255, 0.6); }

.msg-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.msg-left-pane {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(60, 64, 67, 0.12);
  background: var(--fg-inverse-strong);
  min-height: 0;
}
html[data-app-theme="dark"] .msg-left-pane {
  background: #1F2121;
  border-right-color: rgba(255, 255, 255, 0.08);
}
.msg-right-pane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--fg-inverse);
}
html[data-app-theme="dark"] .msg-right-pane { background: #191A1A; }

/* ── Left pane header (search + filters) ──────────────────── */
.msg-left-header {
  padding: 14px 14px 8px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.08);
  flex-shrink: 0;
}
html[data-app-theme="dark"] .msg-left-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
.msg-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--bg-elev-2);
  margin-bottom: 10px;
}
html[data-app-theme="dark"] .msg-title { color: #f5f5f7; }
.msg-search-wrap { margin-bottom: 8px; }
.msg-search {
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(60, 64, 67, 0.15);
  background: rgba(60, 64, 67, 0.05);
  font-size: 13px;
  color: var(--bg-elev-2);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.msg-search:focus {
  border-color: var(--accent-primary-hover);
  background: var(--fg-inverse);
}
html[data-app-theme="dark"] .msg-search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #f5f5f7;
}
html[data-app-theme="dark"] .msg-search:focus {
  background: #2A2C2C;
  border-color: #1976D2;
}
.msg-filter-tab {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: rgba(60, 64, 67, 0.65);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.msg-filter-tab:hover { background: rgba(60, 64, 67, 0.08); color: var(--bg-elev-2); }
.msg-filter-tab.is-active {
  background: rgba(25, 118, 210, 0.12);
  color: var(--accent-primary-hover);
}
html[data-app-theme="dark"] .msg-filter-tab { color: rgba(255, 255, 255, 0.55); }
html[data-app-theme="dark"] .msg-filter-tab:hover { background: rgba(255, 255, 255, 0.06); color: #f5f5f7; }
html[data-app-theme="dark"] .msg-filter-tab.is-active {
  background: rgba(25, 118, 210, 0.22);
  color: #82B1FF;
}

.msg-speed-reply-list { display: flex; flex-direction: column; }
.msg-speed-reply-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(220, 38, 38, 0.18);
  background: rgba(220, 38, 38, 0.05);
}
html[data-app-theme="dark"] .msg-speed-reply-row { border-bottom-color: rgba(220, 38, 38, 0.28); background: rgba(220, 38, 38, 0.08); }
.msg-speed-reply-row1 { display: flex; align-items: center; gap: 8px; }
.msg-speed-reply-badge {
  background: #DC2626;
  color: var(--fg-inverse);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.msg-speed-reply-time { font-size: 11px; color: var(--fg-secondary-light-alpha); }
html[data-app-theme="dark"] .msg-speed-reply-time { color: rgba(255, 255, 255, 0.45); }
.msg-speed-reply-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-elev-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-app-theme="dark"] .msg-speed-reply-name { color: #f5f5f7; }
.msg-speed-reply-sub {
  font-size: 12px;
  color: rgba(60, 64, 67, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-app-theme="dark"] .msg-speed-reply-sub { color: rgba(255, 255, 255, 0.55); }
.msg-speed-reply-send {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: #4F98A3;
  color: var(--fg-inverse);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.msg-speed-reply-send:hover { background: #457F89; }
.msg-speed-reply-send:disabled { opacity: 0.6; cursor: default; }

.msg-threads-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.msg-thread-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(60, 64, 67, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.msg-thread-row:hover { background: rgba(60, 64, 67, 0.05); }
.msg-thread-row.is-active { background: var(--accent-hover-soft-10); }
html[data-app-theme="dark"] .msg-thread-row { border-bottom-color: rgba(255, 255, 255, 0.04); }
html[data-app-theme="dark"] .msg-thread-row:hover { background: rgba(255, 255, 255, 0.04); }
html[data-app-theme="dark"] .msg-thread-row.is-active { background: rgba(25, 118, 210, 0.18); }
.msg-thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary-lighter), var(--accent-primary-hover));
  color: var(--fg-inverse);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-speed-reply-main,
.msg-thread-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-thread-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.msg-thread-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-elev-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-app-theme="dark"] .msg-thread-name { color: #f5f5f7; }
.msg-thread-time {
  font-size: 11px;
  color: var(--fg-secondary-light-alpha);
  white-space: nowrap;
  flex-shrink: 0;
}
html[data-app-theme="dark"] .msg-thread-time { color: rgba(255, 255, 255, 0.45); }
.msg-thread-row2 { display: flex; align-items: center; gap: 6px; }
.msg-thread-preview {
  flex: 1 1 auto;
  font-size: 12px;
  color: rgba(60, 64, 67, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-app-theme="dark"] .msg-thread-preview { color: rgba(255, 255, 255, 0.55); }
.msg-preview-prefix { color: rgba(60, 64, 67, 0.50); }
html[data-app-theme="dark"] .msg-preview-prefix { color: rgba(255, 255, 255, 0.40); }
.msg-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-primary-hover);
  flex-shrink: 0;
}
.msg-thread-row.is-unread .msg-thread-name,
.msg-thread-row.is-unread .msg-thread-preview { font-weight: 700; }
.msg-thread-row3 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}
.msg-stage-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--fg-muted-light-alpha);
  color: #5f6368;
}
html[data-app-theme="dark"] .msg-stage-chip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

/* ── Right pane (thread) header ──────────────────── */
.msg-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--fg-muted-light-alpha);
  background: var(--fg-inverse-strong);
  flex-shrink: 0;
}
html[data-app-theme="dark"] .msg-thread-header {
  background: #1F2121;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.msg-thread-back {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--accent-primary-hover);
  cursor: pointer;
}
.msg-thread-back:hover { background: var(--accent-hover-soft-10); }
.msg-thread-header-main { flex: 1 1 auto; min-width: 0; }
.msg-thread-name-big {
  font-size: 16px;
  font-weight: 700;
  color: var(--bg-elev-2);
}
html[data-app-theme="dark"] .msg-thread-name-big { color: #f5f5f7; }
.msg-thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(60, 64, 67, 0.65);
  margin-top: 2px;
  flex-wrap: wrap;
}
html[data-app-theme="dark"] .msg-thread-meta { color: rgba(255, 255, 255, 0.55); }
.msg-thread-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.msg-thread-link {
  font-size: 12px;
  color: var(--accent-primary-hover);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(25, 118, 210, 0.08);
  white-space: nowrap;
  font-weight: 600;
}
.msg-thread-link:hover { background: rgba(25, 118, 210, 0.16); }
html[data-app-theme="dark"] .msg-thread-link { color: #82B1FF; background: rgba(25, 118, 210, 0.18); }
html[data-app-theme="dark"] .msg-thread-link:hover { background: rgba(25, 118, 210, 0.28); }

.msg-bubble-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--fg-inverse);
}
html[data-app-theme="dark"] .msg-bubble-stream { background: #191A1A; }
.msg-date-sep {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}
.msg-date-sep span {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-secondary-light-alpha);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(60, 64, 67, 0.06);
}
html[data-app-theme="dark"] .msg-date-sep span {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.msg-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin-bottom: 2px;
}
.msg-bubble-row.msg-bubble-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble-row.msg-bubble-in  { align-self: flex-start; align-items: flex-start; }
.msg-bubble {
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.msg-bubble-out .msg-bubble {
  background: #007AFF;
  color: var(--fg-inverse);
  border-bottom-right-radius: 5px;
}
.msg-bubble-in .msg-bubble {
  background: #E9E9EB;
  color: var(--bg-elev-2);
  border-bottom-left-radius: 5px;
}
html[data-app-theme="dark"] .msg-bubble-in .msg-bubble {
  background: #2C2C2E;
  color: #f5f5f7;
}
.msg-bubble-row.is-failed .msg-bubble {
  background: var(--fg-inverse);
  color: var(--status-danger);
  border: 1.5px solid var(--status-danger);
}
html[data-app-theme="dark"] .msg-bubble-row.is-failed .msg-bubble {
  background: #1F2121;
  color: #EF5350;
  border-color: #EF5350;
}
.msg-bubble-row.is-pending .msg-bubble { opacity: 0.75; }
.msg-bubble-foot {
  font-size: 10.5px;
  color: var(--fg-secondary-light-alpha);
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-app-theme="dark"] .msg-bubble-foot { color: rgba(255, 255, 255, 0.45); }
.msg-bubble-foot-failed { color: var(--status-danger); text-transform: none; letter-spacing: 0; }
.msg-spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(60, 64, 67, 0.3);
  border-top-color: var(--accent-primary-hover);
  animation: msg-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes msg-spin { to { transform: rotate(360deg); } }

.msg-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--fg-muted-light-alpha);
  background: rgba(255, 255, 255, 0.96);
  flex-shrink: 0;
}
html[data-app-theme="dark"] .msg-composer {
  background: #1F2121;
  border-top-color: rgba(255, 255, 255, 0.06);
}
.msg-composer-input {
  flex: 1 1 auto;
  border: 1px solid rgba(60, 64, 67, 0.18);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--bg-elev-2);
  background: var(--fg-inverse);
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.35;
  min-height: 36px;
  max-height: 140px;
}
.msg-composer-input:focus { border-color: var(--accent-primary-hover); }
.msg-composer-input:disabled {
  background: rgba(60, 64, 67, 0.06);
  cursor: not-allowed;
}
html[data-app-theme="dark"] .msg-composer-input {
  background: #2A2C2C;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
}
html[data-app-theme="dark"] .msg-composer-input:disabled { background: rgba(255, 255, 255, 0.04); }
.msg-composer-send {
  border: none;
  background: var(--accent-primary-hover);
  color: var(--fg-inverse);
  padding: 9px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.msg-composer-send:hover:not(:disabled) { background: #1565C0; }
.msg-composer-send:disabled {
  background: rgba(60, 64, 67, 0.20);
  cursor: not-allowed;
}

.msg-empty {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--fg-secondary-light-alpha);
  text-align: center;
}
html[data-app-theme="dark"] .msg-empty { color: rgba(255, 255, 255, 0.45); }
.msg-empty-large {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
}
.msg-empty-emoji {
  color: rgba(60, 64, 67, 0.35);
  margin-bottom: 6px;
}
html[data-app-theme="dark"] .msg-empty-emoji { color: rgba(255, 255, 255, 0.30); }
.msg-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--bg-elev-2);
}
html[data-app-theme="dark"] .msg-empty-title { color: #f5f5f7; }
.msg-empty-sub {
  font-size: 13px;
  color: var(--fg-secondary-light-alpha);
  max-width: 320px;
}
html[data-app-theme="dark"] .msg-empty-sub { color: rgba(255, 255, 255, 0.5); }

/* ── Mobile: stack panes vertically, swap on selection ──────────── */
/* [moved to mobile-v2.css v41.58k — was L19714-L19727 @media (max-width: 768px)] */

/* ────────────────────
   v38 - Messages: 3-col split, date filter, right mini-dashboard, builder
   ──────────────────── */

/* 2-col grid: list | thread. Builder + Dashboard live on their own routes. */
.msg-split.msg-split-2col {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Legacy 3-col class kept for older deploys; same behaviour as 2-col. */

/* Thread pane must flex-column so bubbles grow and composer pins. */
.msg-thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Date range chips row */
.msg-range-chip {
  border: 1px solid rgba(60, 64, 67, 0.14);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: rgba(60, 64, 67, 0.72);
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.msg-range-chip:hover {
  background: rgba(60, 64, 67, 0.06);
  color: var(--bg-elev-2);
  border-color: rgba(60, 64, 67, 0.22);
}
.msg-range-chip.is-active {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: var(--fg-inverse);
}
html[data-app-theme="dark"] .msg-range-chip {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
}
html[data-app-theme="dark"] .msg-range-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.20);
}
html[data-app-theme="dark"] .msg-range-chip.is-active {
  background: #1976D2;
  border-color: #1976D2;
  color: #fff;
}

/* Custom range popover */
.msg-range-custom-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding: 10px;
  background: rgba(60, 64, 67, 0.05);
  border: 1px solid var(--fg-muted-light-alpha);
  border-radius: 10px;
  align-items: end;
}
html[data-app-theme="dark"] .msg-range-custom-pop {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.msg-range-custom-pop[hidden] { display: none; }
.msg-range-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(60, 64, 67, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-app-theme="dark"] .msg-range-field { color: rgba(255, 255, 255, 0.55); }
.msg-range-field input[type="date"] {
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: var(--fg-inverse);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--bg-elev-2);
  font-family: inherit;
  outline: none;
}
.msg-range-field input[type="date"]:focus { border-color: var(--accent-primary-hover); }
html[data-app-theme="dark"] .msg-range-field input[type="date"] {
  background: #2A2C2C;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
  color-scheme: dark;
}
.msg-range-apply {
  border: none;
  background: var(--accent-primary-hover);
  color: var(--fg-inverse);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.msg-range-apply:hover { background: #1565C0; }

/* Right-side mini dashboard pane */

/* KPI tile grid */
.msg-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.msg-tile {
  background: rgba(60, 64, 67, 0.04);
  border: 1px solid rgba(60, 64, 67, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
html[data-app-theme="dark"] .msg-tile {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.msg-tile-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.60);
}
html[data-app-theme="dark"] .msg-tile-label { color: rgba(255, 255, 255, 0.50); }
.msg-tile-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--bg-elev-2);
  line-height: 1.1;
}
html[data-app-theme="dark"] .msg-tile-val { color: #f5f5f7; }
.msg-tile-val-sm { font-size: 18px; }
.msg-tile-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary-light-alpha);
  margin-left: 4px;
}
html[data-app-theme="dark"] .msg-tile-sub { color: rgba(255, 255, 255, 0.45); }
.msg-tile-bar {
  width: 100%;
  height: 4px;
  background: var(--fg-muted-light-alpha);
  border-radius: 999px;
  overflow: hidden;
}
.msg-tile-bar > span {
  display: block;
  height: 100%;
  background: var(--accent-primary-hover);
  border-radius: 999px;
  transition: width 0.3s ease;
}
html[data-app-theme="dark"] .msg-tile-bar { background: rgba(255, 255, 255, 0.08); }
.msg-tile-foot {
  font-size: 10.5px;
  color: var(--fg-secondary-light-alpha);
  margin-top: 2px;
}
html[data-app-theme="dark"] .msg-tile-foot { color: rgba(255, 255, 255, 0.45); }

/* Dashboard sections (sparkline, builder) */
.msg-dash-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-dash-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.60);
}
html[data-app-theme="dark"] .msg-dash-section-title { color: rgba(255, 255, 255, 0.50); }
.msg-dash-legend { display: inline-flex; gap: 10px; }
.msg-leg {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(60, 64, 67, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html[data-app-theme="dark"] .msg-leg { color: rgba(255, 255, 255, 0.55); }
.msg-leg::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #007AFF;
  display: inline-block;
}
.msg-leg-replies::before { background: #34C759; }

/* Sparkline */
.msg-spark-wrap {
  width: 100%;
  background: rgba(60, 64, 67, 0.03);
  border: 1px solid rgba(60, 64, 67, 0.06);
  border-radius: 10px;
  padding: 8px 6px 4px;
}
html[data-app-theme="dark"] .msg-spark-wrap {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
.msg-spark-svg {
  width: 100%;
  height: 88px;
  display: block;
}
.msg-spark-line { stroke-width: 1.75; }
.msg-spark-line-sent    { stroke: #007AFF; }
.msg-spark-line-replies { stroke: #34C759; }
.msg-spark-dot-sent     { fill: #007AFF; }
.msg-spark-dot-replies  { fill: #34C759; }
.msg-spark-xlabel {
  font-size: 9px;
  fill: var(--fg-secondary-light-alpha);
  font-weight: 600;
  letter-spacing: 0.04em;
}
html[data-app-theme="dark"] .msg-spark-xlabel { fill: rgba(255, 255, 255, 0.45); }
.msg-spark-empty, .msg-spark-loading {
  padding: 22px 6px;
  text-align: center;
  font-size: 11.5px;
  color: var(--fg-secondary-light-alpha);
}
html[data-app-theme="dark"] .msg-spark-empty,
html[data-app-theme="dark"] .msg-spark-loading { color: rgba(255, 255, 255, 0.45); }

/* Builder open button */

/* Builder modal overlay */
.msg-builder-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.msg-builder-loading {
  padding: 18px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-secondary-light-alpha);
}

/* Mobile: collapse to 1-col on small screens. */
@media (max-width: 1100px) {
  .msg-split.msg-split-2col {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}
/* [moved to mobile-v2.css v41.58k — was L20016-L20022 @media (max-width: 760px)] */

/* ────────────────────
   v38c - Top-bar buttons (Dashboard / Builder) + standalone pages
   ──────────────────── */

/* Push the action buttons to the far right of the status bar. */
.msg-stat-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.msg-stat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(60, 64, 67, 0.15);
  background: rgba(60, 64, 67, 0.04);
  color: var(--bg-elev-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.msg-stat-btn:hover {
  background: var(--accent-hover-soft-10);
  border-color: rgba(25, 118, 210, 0.40);
  color: var(--accent-primary-hover);
}
html[data-app-theme="dark"] .msg-stat-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f7;
}
html[data-app-theme="dark"] .msg-stat-btn:hover {
  background: rgba(25, 118, 210, 0.20);
  border-color: rgba(25, 118, 210, 0.50);
  color: #82B1FF;
}

/* Standalone Dashboard / Builder page chrome */
.msg-page-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg, var(--fg-primary-ice));
  overflow: hidden;
}
html[data-app-theme="dark"] .msg-page-view { background: #191A1A; }
.msg-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.12);
  background: var(--fg-inverse-strong);
  flex-shrink: 0;
}
html[data-app-theme="dark"] .msg-page-head {
  background: #1F2121;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.msg-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--accent-primary-hover);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(25, 118, 210, 0.25);
  background: rgba(25, 118, 210, 0.06);
  transition: background 0.12s ease;
}
.msg-page-back:hover { background: var(--accent-hover-soft-14); }
html[data-app-theme="dark"] .msg-page-back {
  color: #82B1FF;
  background: rgba(25, 118, 210, 0.14);
  border-color: rgba(25, 118, 210, 0.40);
}
html[data-app-theme="dark"] .msg-page-back:hover { background: rgba(25, 118, 210, 0.24); }
.msg-page-title {
  display: none;
}
html[data-app-theme="dark"] .msg-page-title { display: none; }
.msg-page-spacer { margin-left: auto; }
.msg-page-refresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(60, 64, 67, 0.15);
  background: transparent;
  color: rgba(60, 64, 67, 0.80);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.msg-page-refresh:hover {
  background: rgba(60, 64, 67, 0.06);
  color: var(--bg-elev-2);
}
html[data-app-theme="dark"] .msg-page-refresh {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.70);
}
html[data-app-theme="dark"] .msg-page-refresh:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}
.msg-page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Wide-mode tiles for full-page dashboard */
.msg-tile-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.msg-tile-grid-wide .msg-tile { padding: 14px 16px; }
.msg-tile-grid-wide .msg-tile-val { font-size: 28px; }
.msg-dash-section-wide {
  background: var(--fg-inverse-strong);
  border: 1px solid rgba(60, 64, 67, 0.08);
  border-radius: 14px;
  padding: 16px;
}
html[data-app-theme="dark"] .msg-dash-section-wide {
  background: #1F2121;
  border-color: rgba(255, 255, 255, 0.08);
}
.msg-spark-wrap-wide .msg-spark-svg { height: 200px; }

/* Builder page layout (2-col: editor | preview) */
.msg-builder-page-body { padding: 24px; }

/* ────────────────────
   v39 MOBILE SaaS-GRADE LAYER (Messages route + Dashboard/Builder sub-pages)
   Scope: @media (max-width: 767px). Applies on top of v38c desktop styles.
   Goals:
   • Every desktop feature is reachable on mobile (no removals, no scroll lock)
   • Identical color palette (system grey #191A1A bg, blue accent #2196F3,
  iMessage outbound #007AFF, inbound #E9E9EB, surface rgba(255,255,255,.06))
   • 44px+ touch targets everywhere
   • No content collides with the fixed mobile-topnav (60px + safe-area)
   • Composer always reachable; thread list scrolls inside its container
   ──────────────────── */
/* v41.58h: route:messages block L20459-L20737 moved to mobile-v2.css */

/* iPhone SE / 360px width - drop KPI tiles to 1-col */
/* v41.58h: route:messages block L20740-L20746 moved to mobile-v2.css */

/* ════════════════════
   v40 layer - Bucket value neutral white + small ticker color
   ────────────────────
   User feedback: "the large numbers are red green … there's too much color
   with those big ones … the percentage and up down point green red is good"
   ──> Big bucket numbers (160, 406, 566, 399, 91, 76) stay neutral cream
  in BOTH the right-column TOTAL chips and the bottom-row TOTAL chips.
  Only the small +N · +X% ticker keeps the directional color.
   ════════════════════ */

/* Beats line 5527 (light), 9017 (dark), and the 9163 light @media block. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value {
  color: #EAEBEC !important;
}
/* Light theme: use dark neutral instead of cream */
@media (prefers-color-scheme: light) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value {
    color: #191A1A !important;
  }
}

/* The small ticker keeps the up/down/flat color - explicitly preserved. */
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-ticker { color: #34C659; }
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-ticker { color: #FF3C2F; }

/* ════════════════════
   v40 - Retention / Operations / Finance KPI grids
   ────────────────────
   Each pill activates body.kpi-active--<key>. We use the same .home-dash-grid
   container; the JS swaps card content, so the layout is identical and the
   visuals match the Sales grid exactly. No grid-level rules needed here.
   ════════════════════ */

/* When a non-sales pill is active, hide the global toggles row because the
   stub grids do not have a comparison backend wired yet. The minimize button
   still works. */
body.kpi-active--retention  .home-dash-toggles,
body.kpi-active--operations .home-dash-toggles,
body.kpi-active--finance    .home-dash-toggles {
  visibility: hidden;
}

/* ════════════════════
   v40.1 layer - Bars bigger, text smaller
   ────────────────────
   User feedback: "the bars are super small and I can't read them visually
   enough … even if you have to make some text with graphs and bars smaller
   … we can make that text smaller and then enlarge the graphs and bars."
   ──> Shrink eyebrow + big value + delta block on every Sales/Retention/Ops/
  Finance card, then reclaim that vertical space for the bar chart.
   ════════════════════ */

/* Tighter card padding + smaller gaps so we have more chart real estate. */
html body .ai-view .home-dash-grid .home-dash-card {
  padding: 0.7rem 0.85rem 0.6rem;
  gap: 0.3rem;
  min-height: 150px !important;
}

/* Shrink the eyebrow + title row (OFFICE SALES · PEST). */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-eyebrow,
html body .ai-view .home-dash-grid .home-dash-card .home-dash-title {
  font-size: 0.62rem !important;
  letter-spacing: 0.06em;
}

/* Shrink the big KPI value (121 / 278 / 13 …). */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-value {
  font-size: 1.05rem !important;
  line-height: 1.1;
}

/* Shrink the unit text (THIS WEEK / TODAY). */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-unit {
  font-size: 0.58rem;
  letter-spacing: 0.05em;
}

/* Shrink the inline YTD avg row + the CURRENT VS PREVIOUS / delta lines. */
html body .ai-view .home-dash-grid .home-dash-card .home-dash-ytd-inline, html body .ai-view .home-dash-grid .home-dash-card .home-dash-baseline-row1, html body .ai-view .home-dash-grid .home-dash-card .home-dash-baseline-row2 {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

/* Now ENLARGE the bar chart area - beats lines 2141, 2218, 7035, 7303,
   8160, 9320 by using a higher-specificity selector and !important. */



/* ════════════════════
   v40.2 layer - Label color (grey), X-axis clearance, bottom-row clearance
   ────────────────────
   User feedback:
   (1) "the labels for the x and y and small number labels are in dark text
  … make it grey"
   (2) "the x axis label gets cut off"
   (3) "the bottom row of chips get slightly cut off"
   ──> (1)+(2) handled in app.js renderBars() v40.2.
   ──> (3) The toggles row was sitting flush against the composer with no
  breathing room, so the bottom-row chips' bottom edge collided with
  the toolbar. Add bottom padding to the launcher and a small margin
  between the grid and the toggles row.
   ════════════════════ */

/* Push the toggles row down a bit and give the launcher visible bottom
   padding so the bottom-row chips clear the toolbar. */
html body.kpi-active .ai-view .home-launcher,
html body.kpi-active .ai-view #home-launcher.home-launcher {
  padding-bottom: 22px !important;
}
html body.kpi-active .ai-view .home-launcher .home-dash-toggles,
html body.kpi-active .ai-view #home-launcher.home-launcher .home-dash-toggles {
  margin-top: 14px !important;
}

/* Make sure the grid never gets clipped at the bottom by the launcher. */
html body.kpi-active .ai-view .home-launcher .home-dash-grid {
  margin-bottom: 6px;
  overflow: visible;
}

/* ════════════════════
   v40.3 layer - Give the card enough vertical room so the SVG bottom
   (which now includes day labels + "0" baseline) doesn't get clipped by
   the card's overflow:hidden boundary. Bumping the card min-height by
   ~18px lets the full chart breathe.
   ════════════════════ */

/* Chart container - make it take a larger share of the card and add a
   small top margin only. Cards are flex columns; we let the container
   flex-grow so the chart pulls down toward the bottom of the card. */



/* ════════════════════
   v40.4c layer - Equalize column widths for non-sales KPI grids and treat
   every cell as a full chart card.
   ────────────────────
   The Sales grid uses a lopsided 3 × 1fr + 1 × 0.55fr column template so
   the totals chip sits in a narrow 4th column. The retention/operations/
   finance grids inherited that template, which squeezed the 4th-column
   donuts and left a lot of dead vertical space in the lower rows.
   Solution: when the KPI grid is active (marked with .home-dash-grid--kpi)
   force 4 EQUAL columns × 3 EQUAL rows, and demote any legacy chip
   selectors so explicit grid-column / grid-row from the inline style win.
   ════════════════════ */

html body .ai-view .home-dash-grid.home-dash-grid--kpi {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem;
  align-items: stretch !important;
}

/* Every KPI card in a KPI grid: same size, same min-height, same chart
   container behavior. Inline style="grid-column:n; grid-row:m" from the
   renderer places each card explicitly. */
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi {
  min-height: 0;
  height: 100%;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chart container - fill remaining vertical space inside the card. */
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-week-bars--full {
  flex: 1 1 auto !important;
  min-height: 72px !important;
  height: auto;
  margin-top: 0.35rem !important;
  display: flex;
  align-items: stretch !important;
  justify-content: center !important;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-week-bars--full .kpi-week-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

/* Tighten KPI header/value rows so the chart gets more room. */
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-head {
  margin-bottom: 0.15rem;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-kpi {
  gap: 0.1rem;
  margin-bottom: 0.1rem;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-value {
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-unit {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-ytd-inline {
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-eyebrow,
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-title {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

/* The KPI grid SHOULD NOT clip its own scroll children - but cards
   themselves clip overflow above. Make sure the SVG bottom isn't lost. */
html body .ai-view .home-dash-grid.home-dash-grid--kpi {
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
}

/* ════════════════════
   v40.5 layer - Multi-viewport polish + mobile dashboards rebuild
   ────────────────────
   Three goals:
  1) Donut + Progress charts fill full card width on Studio Display
  (no more letterbox empty space on either side).
  2) Mobile dashboards page (the /dashboards hub): proper top safe-area
  clearance under the fixed nav, fade-out gradient under the topnav
  so scrolled content fades up into the chip zone, tighter spacing,
  grey bars instead of blue.
  3) Standard monitor (1440-1680 wide): KPI grid stays edge-aligned
  and chart spacing remains breathable.
   ════════════════════ */

/* ───── DONUT (HTML + small SVG ring) ───── */
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-wrap {
  display: flex;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.1rem 0.1rem;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-ring {
  flex: 0 0 auto !important;
  width: 72px !important;
  height: 72px !important;
  max-width: 35% !important;   /* prevents ring from dominating tiny mobile cards */
  display: block;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-label {
  flex: 1 1 auto !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: rgba(235, 240, 250, 0.70) !important;
  text-align: center;
  font-family: Inter, system-ui, sans-serif !important;
}

/* ───── PROGRESS (full-width HTML bar) ───── */
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 0.2rem 0.2rem;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 240, 250, 0.70);
  font-family: Inter, system-ui, sans-serif;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(235, 240, 250, 0.92);
  font-variant-numeric: tabular-nums;
  font-family: Inter, system-ui, sans-serif;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-track {
  width: 100%;
  height: 10px !important;
  background: rgba(235, 240, 250, 0.14) !important;
  border-radius: 999px;
  overflow: hidden !important;
  position: relative;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-fill {
  height: 100%;
  background: rgba(235, 240, 250, 0.55);
  border-radius: 999px;
  transition: width 240ms ease-out;
}
html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-target {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(235, 240, 250, 0.55);
  letter-spacing: 0.02em;
  font-family: Inter, system-ui, sans-serif;
}

/* Studio + ultrawide (>= 1680px): give donut + progress a touch more
   breathing room since cards are noticeably wider here. */
@media (min-width: 1680px) {
  html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-ring {
    width: 80px;
    height: 80px;
  }
  html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-wrap {
    gap: 0.85rem;
    padding: 0.2rem 0.4rem;
  }
  html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-donut-label {
    font-size: 0.78rem !important;
  }
  html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .kpi-progress-track {
    height: 12px !important;
  }

  html body .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi .home-dash-week-bars--full {
    min-height: 110px;
  }

}

/* ════════════════════
   MOBILE DASHBOARDS HUB
   The legacy .dash-hub layout was built desktop-first and the mobile rules
   never reserved space for the fixed .mobile-topnav (avatar/switch/kebab)
   sitting at the top of the viewport. Result: the hub header collides
   with the topnav. We also need a subtle fade gradient so scrolled content
   fades into the topnav zone instead of cutting through it sharply.
   ════════════════════ */

/* v41.58h: component:kpi block L20720-L20814 moved to mobile-v2.css */

/* ───── REVENUE-CHART BARS: GREY, NOT BLUE (locked rule) ─────
   The .dash-hub-revenue-chart container holds an SVG of weekly bars.
   Any <rect> inside it currently inherits a brand-blue fill. Force the
   neutral grey/light palette we use across all KPI charts. */
html body .dash-hub #dash-hub-revenue-chart svg rect {
  fill: rgba(235, 240, 250, 0.55);
}
html body[data-app-theme="light"] .dash-hub #dash-hub-revenue-chart svg rect,
html body[data-app-theme="light"] .dash-hub #dash-hub-revenue-chart svg .bar,
html body[data-app-theme="light"] .dash-hub #dash-hub-revenue-chart .dh-bar {
  fill: rgba(20, 22, 28, 0.55);
}

/* ───── FIXED TOP-NAV FADE BACKDROP ─────
   Underneath the .mobile-topnav (which is transparent for status-bar
   tinting), inject a fade gradient so scrolled content fades from
   solid app background into transparent as it approaches the topnav
   chips. This is a sibling pseudo-element on body, NOT on the nav itself
   (the nav remains pointer-events:none so the strip stays tappable
   only on chips). */
/* v40.5o: PERPLEXITY-STYLE FADE (mobile/narrow viewports only)
   Reference: IMG_0815 / IMG_0816 from the Perplexity iOS app.
   The trick is NOT a tinted sheet behind the chips. The scroll
   container itself uses a mask-image gradient so content gradually
   fades to transparent as it approaches the top edge. The chip row
   floats on transparent - there is no defined cutoff line.

   We kill v40.5n's tint sheet, then apply a CSS mask on the main
   scroll container so scrolled content fades out before reaching the
   chip row. The chip row itself stays fully transparent. */
/* v41.58h: Ask block L22106-L22191 moved to mobile-v2.css Section 4b */
/* Hide any fade artifact on auth pages. */
html body.is-auth-page::before { content: none; display: none; border-bottom: 0; }
html body.is-auth-page::after  { content: none; display: none; }

/* v41.58h: Ask block L22200-L22215 moved to mobile-v2.css Section 4b */

/* ════════════════════
   v40.5j - LOGIN PAGE LEAK FIX
   Pre-auth screens (renderLogin / renderSignup / renderReset /
   renderConfirm) toggle body.is-auth-page. The earlier hide-rule covered
   the desktop sidebar but missed the mobile-topnav chip strip and the
   ::before fade gradient, so on mobile the avatar/switch/kebab leaked
   over the auth card. Hide them here on every viewport.
   ════════════════════ */

html body.is-auth-page::before {
  content: none;
  display: none;
  background: transparent;
}

/* ---------- (A) iOS Safari composer position lock (mobile) ----------
   Root cause: position: fixed + bottom:0 in iOS Safari uses the LAYOUT
   viewport. When the URL bar shrinks, layout != visual viewport, so the
   composer floats mid-page. Fix: anchor to visualViewport via --vv-h
   tracked in JS (_startVVTracking, app.js ~5795). Use top instead of
   bottom so the composer rests exactly at the visual viewport bottom. */
/* v41.58h: Ask block L22239-L22343 moved to mobile-v2.css Section 4b */

/* ---------- (C) New-chat circular pencil-plus button ----------
   Mounted by JS as a sibling of .rich-composer inside .ai-composer-wrap
   when body.ai-has-messages. Clicking it calls newChatSession(). */
html body .ai-new-chat-btn {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 50%;
  background: #1c1c1e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35) !important;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
}
html body .ai-new-chat-btn:hover { background: #242527; }
html body .ai-new-chat-btn:active { transform: scale(0.96); }
html body .ai-new-chat-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Only visible in thread state on mobile */
/* v41.58h: Ask block L22374-L22423 moved to mobile-v2.css Section 4b */

/* ---------- (E) Thinking UI redesign - Claude Code / Perplexity live feel ----------
   Each step gets a leading icon, a label that streams, and a right chevron.
   Active step pulses cyan. Done steps go muted. Prose paragraphs render
   between steps. Mono code cards for file diffs. Final colored status line.
   References: IMG_0817. */

/* Container: tighter padding, no harsh border. */
html body .ai-thinking {
  background: transparent;
  border: 0;
  border-bottom: 0;
  padding: 4px 0 8px 0;
  margin-bottom: 8px;
}
html body .ai-thinking .thinking-stream {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-left: 0;
  max-width: 720px;
}

/* Each step is now a row card with icon left + label + meta + chevron right */
html body .ai-thinking .thinking-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
  animation: gl-step-in 280ms ease forwards;
  position: relative;
}
html body .ai-thinking .thinking-step.is-active {
  background: rgba(99, 179, 237, 0.06);
  border-color: rgba(99, 179, 237, 0.20);
  color: #fff;
  font-weight: 500;
}
html body .ai-thinking .thinking-step.is-done {
  background: rgba(255,255,255,0.015);
  border-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
}

/* Hide the legacy .tk-dot (we use a leading SVG-style box now via ::before). */
/* Step body fills, label clean */
/* Chevron at right of each row */
html body .ai-thinking .thinking-step::after {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.28);
  border-top: 1.5px solid rgba(255,255,255,0.28);
  transform: rotate(45deg);
  margin-left: auto;
  display: inline-block;
  background: none;
}
html body .ai-thinking .thinking-step.is-active::after {
  border-color: rgba(99, 179, 237, 0.85);
}
/* Kill any prior left-rail ::before nub */
html body .ai-thinking .thinking-step::before {
  display: none;
  content: none;
}

/* Source pills inside rows */

/* Phase row - colored status line at bottom (e.g. "Pulling together
   information from multiple sources"). Reference: IMG_0817 cyan glow. */
html body .ai-thinking .cs-phase-row,
html body .ai-messages .cs-phase-row,
html body .cs-phase-row {
  display: flex;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin-top: 6px !important;
  border-radius: 10px !important;
  background: rgba(99, 179, 237, 0.08) !important;
  border: 1px solid rgba(99, 179, 237, 0.18) !important;
  color: #7cc6f5 !important;
  font-size: 13px !important;
  font-weight: 500;
}

/* Mono code card inside thinking (rendered when step.meta starts with `$ ` or
   is multi-line - JS now wraps such content in .tk-code). */

/* Thinking header text ("Thinking…" / "Thought for X.Xs") cleaned up */
html body .ai-thinking .ai-thinking-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-left: 2px;
}

html body .ai-thinking .cs-phase-row,
html body .ai-messages .cs-phase-row,
html body .cs-phase-row {
  display: none;
}

/* ────────────────────
   v40.5r - Claude-faithful thinking UI
   Renders raw Anthropic SSE events (thinking, tool_use, web_search_tool_result,
   text). Visual language mirrors Claude Code: dim muted thinking prose with
   cyan accent on the active step, mono code cards for tool inputs, favicon
   pills for search results.
   ──────────────────── */

html body .ai-thinking.claude-thinking {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 6px 0 10px 0;
}

html body .claude-thinking .claude-stream {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

html body .claude-thinking .cl-block {
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  transition: background 160ms ease;
}

html body .claude-thinking .cl-head {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border-radius: 8px;
  box-sizing: border-box;
}
html body .claude-thinking .cl-head:hover {
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.78);
}

html body .claude-thinking .cl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: rgba(255,255,255,0.55);
}

html body .claude-thinking .cl-label {
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}

html body .claude-thinking .cl-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .claude-thinking .cl-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: rgba(33,150,243,0.9);
  font-size: 12px;
}

html body .claude-thinking .cl-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  transition: transform 180ms ease;
}
html body .claude-thinking .cl-block.is-expanded .cl-chev {
  transform: rotate(180deg);
}

/* ── Active state (Totaly brand blue accent) ──────────────────── */
html body .claude-thinking .cl-block.is-active .cl-label, html body .claude-thinking .cl-block.is-active .cl-icon {
  color: #2196F3;
}
html body .claude-thinking .cl-block.is-active {
  background: rgba(33,150,243,0.06);
}
html body .claude-thinking .cl-block.is-active .cl-head {
  color: #2196F3;
  font-weight: 600;
}

/* ── Body (expandable contents) ──────────────────── */
html body .claude-thinking .cl-body {
  display: none;
  padding: 6px 10px 8px 32px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}
html body .claude-thinking .cl-block.is-expanded .cl-body {
  display: block;
}

/* ── Thinking block prose: Claude Code style ──────────────────── */
/* The body is a fixed-height scrollable area so long thinking doesn't push
   the rest of the conversation off-screen. Auto-scrolls as text streams in. */
html body .claude-thinking .cl-thinking .cl-body.cl-prose {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  margin: 0 12px 0 32px;
  padding: 4px 12px 4px 12px;
  border-left: 2px solid rgba(255,255,255,0.08);
  position: relative;
}
html body .claude-thinking .cl-thinking .cl-body.cl-prose::-webkit-scrollbar { width: 4px; }
html body .claude-thinking .cl-thinking .cl-body.cl-prose::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

html body .claude-thinking .cl-thinking .cl-prose-text {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgba(255,255,255,0.52);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* Active thinking auto-expands so the user sees prose streaming live. */
html body .claude-thinking .cl-thinking.is-active .cl-body {
  display: block;
}

/* Subtle bottom fade overlay on active thinking body so streaming text
   feels like it's emerging from below (matches Claude Code feel). */
html body .claude-thinking .cl-thinking.is-active .cl-body.cl-prose::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 24px;
  margin-top: -24px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(25,26,26,0.85) 100%);
}

/* Final answer streaming text (before markdown parse on finalize) */
html body .ai-prose .cl-stream-text {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  font-size: 15px !important;
  line-height: 1.55;
  color: rgba(255,255,255,0.92) !important;
}

html body .claude-thinking .cl-code {
  background: #0f1117;
  color: rgba(255,255,255,0.85);
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 240px;
  overflow: auto;
}

html body .claude-thinking .cl-results {
  padding: 4px 0 4px 34px;
}
html body .claude-thinking .cl-results-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body .claude-thinking .cl-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  text-decoration: none;
  max-width: 220px;
  transition: background 140ms ease, border-color 140ms ease;
}
html body .claude-thinking .cl-result:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(33,150,243,0.3);
}
html body .claude-thinking .cl-fav {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 3px;
}
html body .claude-thinking .cl-result-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(33,150,243,0.18);
  color: #2196F3;
  font-size: 9px;
  font-weight: 600;
  flex: 0 0 14px;
}
html body .claude-thinking .cl-result-text {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 160px;
}
html body .claude-thinking .cl-result-title {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .claude-thinking .cl-result-host {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .claude-thinking .cl-error {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.25);
  color: #fca5a5;
  font-size: 12px;
}

html, body,
html body, html body *:not(code):not(pre):not(kbd):not(samp):not(.material-symbols-outlined):not([class*="icon"]) {
  font-family: -apple-system, BlinkMacSystemFont, "system-ui", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body code, html body pre, html body kbd, html body samp, html body [class*="mono"] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
}
/* Material Symbols stays as the icon font */
html body [class*="material-symbols"] {
  font-family: "Material Symbols Outlined";
}

/* Sidebar: unified canvas with main (Claude has zero visible divider) */
html body aside.sidebar,
html body .sidebar,
html body aside#sidebar {
  background: var(--bg-sidebar, var(--ask-bg, #191A1A));
  background-color: var(--bg-sidebar, var(--ask-bg, #191A1A));
  background-image: none;
  border-right: 0;
  border-right-width: 0;
  border-right-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Catch any inner wrappers that re-introduce a border */
html body aside.sidebar::after,
html body aside.sidebar::before,
html body .sidebar::after,
html body .sidebar::before {
  display: none;
  border: 0;
  background: transparent;
}
/* Sidebar footer separator - keep it very subtle, no hard line */
html body .sidebar .sidebar-footer,
html body .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.04);
  background: transparent;
}

/* Main content area: same canvas */
html body main, html body .main, html body #main {
  background: var(--bg-app, var(--ask-bg, #191A1A));
}

/* Topbar: blend with main; no hard underline */
html body .topbar,
html body header.topbar,

/* 2. Thinking text visibility on dark chat surface (mobile + desktop) */
html body.route-ask .ai-thinking .ai-thinking-text {
  color: rgba(223, 246, 230, 0.95);
  font-weight: 600;
}
html body.route-ask .ai-thinking .thinking-step {
  color: rgba(223, 246, 230, 0.78);
}




/* ════════════════════
   v40.5ag - Mobile floating-pill clearance
   ────────────────────
   Problem: #gl-floating-pill (nav.mobile-topnav on mobile) is position:fixed
   at top:0 with an effective height of ~60px + safe-area-inset-top. On
   viewports <=820px the primary content containers on every route lacked a
   consistent padding-top to clear it, so the first content row was visually
   hidden under the chip strip.

   Fix: define --gl-floating-pill-h (60px) and apply padding-top using it on
   every primary content surface. Earlier versions (ITER11 / v40.5o) covered
   some routes with different class names or only at <=767px. This block is
   additive and covers the full 768-820px gap plus corrects wrong class names.

   Selectors targeted:
  /ask  → .ai-view .ai-hero, .ai-view .ai-messages (already in v40.5o, reinforced)
  /dash  → .dashboard-view   (v40.5o used .dashboards-view - wrong name)
  /chats  → .chats-view  (already in v40.5o, reinforced)
  /divisions  → .gl-divisions-view (v40.5o used .divisions-view - wrong name)
  /datasources→ .gl-cn-view  (v40.5o used .connectors-view - wrong name)
  /automations→ .automations-view (already in v40.5o, reinforced)
  /messages   → .msg-view  (entirely absent from prior layers)
  /settings   → .settings-view  (already in ITER11 + v40.5o, reinforced)
  /reports  → .reports-view  (already in v40.5o, reinforced)

   Padding value: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px)
   - 60px chip + safe-area + 12px breathing room = first card starts visible at rest.

   DO NOT change: cache-bust marker, existing rules above this line.
   ════════════════════ */
/* v41.58h: Ask block L22924-L23073 moved to mobile-v2.css Section 4b */

/* ─ 4. DESKTOP - same idea, just different dimensions ──────────────────── */
/* =============================================================================
   v40.5ai - Correct fade technique (opaque gradient overlays, ChatGPT pattern)
   ----------------------------------------------------------------------------
   WHY v40.5ah's mask-image looked like "no fade":
  mask-image fades content to TRANSPARENT. When the area above/below the
  scroll container (topnav + composer) are the SAME color as the page
  background (#191A1A), fading to transparent reveals more #191A1A
  underneath, which is visually identical to opaque content. No fade
  appears because the fade has nothing to dissolve INTO.

   CORRECT TECHNIQUE (ChatGPT/Claude use this):
  Place two absolutely-positioned overlay divs INSIDE .ai-view, each with
  a linear-gradient from SOLID #191A1A to transparent. They sit between
  the topnav/composer and the scroll content with z-index 2 and
  pointer-events:none. Content scrolls behind them and visually dissolves
  into solid color bands at the top and bottom.

  Implemented via ::before / ::after on .ai-view (NOT body, since body
  pseudo-elements stop working when body has position:fixed in any
  ancestor rule). .ai-view is position:relative so pseudos anchor to it.

   ALSO KILLS the broken mask-image from v40.5ah - sets mask-image:none on
   .ai-messages so we don't double-process.
   ============================================================================= */

/* v41.58h: Ask block L23156-L23221 moved to mobile-v2.css Section 4b */

/* =============================================================================
   v40.5aj - Notification panel: reliable close on mobile
   ----------------------------------------------------------------------------
   BUG: User reports notification panel gets stuck open on mobile and can't
   be dismissed. Root cause analysis:
  1. _notifOutsideClose listener checks if click target is inside the panel
  or the bell button; if YES, do nothing. On mobile the panel covers
  most of the viewport, so taps to "anywhere else" are rare - most taps
  land INSIDE the panel.
  2. There's no visible close button on the panel header on mobile.
  3. Body-scroll-lock residue from earlier versions can prevent the panel's
  sliding transform from animating away.

   FIX (CSS-only, app.js stays untouched):
  1. Add a full-screen backdrop overlay on mobile when .notif-panel.is-open
  is present. Backdrop sits BEHIND the panel, intercepts taps, has a
  clear visual fade. Tapping the backdrop triggers existing
  _notifOutsideClose because backdrop is OUTSIDE the panel and outside
  the bell button.
  2. Ensure .notif-panel header has a visible × close button on mobile by
  styling the existing .notif-panel-clear element or fallback.
   ============================================================================= */

/* v41.58h: component:panel block L21619-L21694 moved to mobile-v2.css */

/* ────────────────────
   FIX 2 - Scroll lock body on route-ask; kill scroll-chip pop
   v40.5ah's UNDO block (line ~27557) set overflow:auto on ALL routes.
   We selectively re-lock route-ask here (later in cascade = wins).
   Only the .ai-messages element scrolls; body/html stay fixed.
   The floating pill auto-hide JS uses window.scrollY - with body locked
   it stays 0, so the pill never hides (correct for ask route).
   ──────────────────── */

/* Non-media: lock body scroll on route-ask at any viewport width */


/* v41.58h: Ask block L23382-L23598 moved to mobile-v2.css Section 4b */

.outreach-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--surface-charcoal);
  flex-shrink: 0;
  background: var(--surface-charcoal-deep);
}

.outreach-tab {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--fg-muted-light);
  padding: 8px 18px 9px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
  position: relative;
  bottom: -1px;
}

.outreach-tab:hover {
  color: var(--fg-primary-warm);
  background: var(--overlay-w-04);
}

.outreach-tab.is-active {
  color: var(--fg-primary-warm);
  background: var(--bg-card);
  border-color: var(--surface-charcoal);
  border-bottom-color: var(--bg-card);
}

#outreach-mount {
  flex: 1;
  overflow-y: auto;
  min-height: 600px;
}

.outreach-hub {
  background: var(--surface-charcoal-deep);
  min-height: 600px;
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.outreach-hub-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

.outreach-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4A90D9;
  text-transform: uppercase;
}

.outreach-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-primary-warm);
  margin: 0;
  line-height: 1.2;
}

.outreach-subtitle {
  font-size: 0.85rem;
  color: var(--fg-faint-slate);
  margin: 0;
}

.outreach-rules {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  overflow: hidden;
}

.outreach-rules-toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
}

.outreach-rules-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-primary-warm);
  text-transform: uppercase;
}

.outreach-rules-chevron {
  color: var(--fg-muted-light);
  transition: transform 220ms ease;
  display: flex;
  align-items: center;
}

.outreach-rules-body {
  border-top: 1px solid var(--surface-charcoal);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.outreach-rules-ta {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-charcoal-deep);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  color: var(--fg-primary-warm);
  font-family: inherit;
  font-size: 0.83rem;
  line-height: 1.6;
  padding: 10px 12px;
  resize: vertical;
  min-height: 160px;
  transition: border-color 140ms ease;
}

.outreach-rules-ta:focus {
  outline: none;
  border-color: #4A90D9;
}

.outreach-rules-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.outreach-rules-hint {
  font-size: 0.75rem;
  color: var(--fg-muted-light);
}

.outreach-save-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-primary-warm);
  background: #2A3F55;
  border: 1px solid #3A5A7A;
  border-radius: 8px;
  padding: 7px 14px;
  transition: background 140ms ease, border-color 140ms ease;
}

.outreach-save-btn:hover {
  background: #325070;
  border-color: #4A7AAA;
}

.outreach-save-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.outreach-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .outreach-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* v41.58h: misc block L21588-L21592 moved to mobile-v2.css */

.outreach-action-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 18px 16px;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  position: relative;
  overflow: hidden;
}

.outreach-action-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--surface-charcoal));
  border-radius: 12px 12px 0 0;
  opacity: 0.8;
  transition: opacity 160ms ease;
}

.outreach-action-card:hover:not(:disabled) {
  background: #262828;
  border-color: var(--border-strong-warm);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.outreach-action-card:hover:not(:disabled)::before {
  opacity: 1;
}

.outreach-action-card:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: 60ms;
}

.outreach-action-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.outreach-action-card.is-active {
  border-color: #4A7AAA;
  background: #1C2836;
}

.oac-icon {
  color: var(--fg-faint-slate);
  display: flex;
  align-items: center;
}

.oac-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--fg-primary-warm);
  line-height: 1.2;
}

.oac-desc {
  font-size: 0.76rem;
  color: var(--fg-muted-light);
  line-height: 1.5;
}

.outreach-btn-danger:not(:disabled) {
  border-color: #5A2A2A;
}

.outreach-btn-danger:not(:disabled):hover {
  background: #2A1A1A;
  border-color: #7A3A3A;
}

.outreach-btn-danger .oac-icon {
  color: #D45A5A;
}

/* ── Pool bar (meta + progress) ──────────────────── */
.outreach-pool-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.outreach-pool-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outreach-pool-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.outreach-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1;
}

.outreach-pill-pool  { background: rgba(74,144,217,0.12); color: #4A90D9; border: 1px solid rgba(74,144,217,0.25); }
.outreach-pill-sel   { background: rgba(138,146,158,0.1); color: var(--fg-faint-slate); border: 1px solid rgba(138,146,158,0.2); }
.outreach-pill-draft { background: rgba(80,170,110,0.12); color: #50AA6E; border: 1px solid rgba(80,170,110,0.25); }
.outreach-pill-edit  { background: rgba(220,160,30,0.12); color: #DCA01E; border: 1px solid rgba(220,160,30,0.25); }
.outreach-pill-sent  { background: rgba(80,170,110,0.15); color: #50AA6E; border: 1px solid rgba(80,170,110,0.3); }
.outreach-pill-fail  { background: rgba(212,90,90,0.15);  color: #D45A5A; border: 1px solid rgba(212,90,90,0.3); }

/* ── Generation progress bar ──────────────────── */
.outreach-gen-progress {
  height: 6px;
  background: var(--surface-charcoal);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.outreach-gen-progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #4A90D9, #50AA6E);
  border-radius: 20px;
  transition: width 300ms ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
}

.outreach-table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
}

.outreach-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.outreach-table thead {
  background: var(--surface-charcoal-deep);
  position: sticky;
  top: 0;
  z-index: 2;
}

.outreach-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-muted-light);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--surface-charcoal);
}

.outreach-table td {
  padding: 10px 12px;
  color: var(--fg-primary-warm);
  border-bottom: 1px solid #232424;
  vertical-align: top;
}

.outreach-pool-row:last-child td {
  border-bottom: none;
}

.outreach-pool-row:hover td {
  background: var(--overlay-w-02);
}

.outreach-pool-row.row-sent td {
  background: rgba(80,170,110,0.06);
}

.outreach-pool-row.row-failed td {
  background: rgba(212,90,90,0.06);
}

.col-chk  { width: 36px; }
.col-msg  { min-width: 240px; max-width: 380px; }
.col-status { width: 90px; }
.col-days { text-align: right; color: var(--fg-muted-light); }
.col-date,
.col-phone {
    white-space: nowrap;
    color: var(--fg-faint-slate);
    font-size: 0.78rem;
}

.outreach-msg-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outreach-msg-text {
  color: var(--fg-primary-warm);
  font-size: 0.81rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.outreach-msg-len {
  font-size: 0.68rem;
  color: var(--fg-muted-light);
}

.outreach-msg-empty {
  color: #4B5563;
  font-size: 0.78rem;
  font-style: italic;
}

.outreach-msg-edit {
  gap: 6px;
}

.outreach-msg-ta {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-charcoal-deep);
  border: 1px solid var(--surface-charcoal);
  border-radius: 7px;
  color: var(--fg-primary-warm);
  font-family: inherit;
  font-size: 0.81rem;
  line-height: 1.55;
  padding: 7px 10px;
  resize: vertical;
  min-height: 68px;
  transition: border-color 140ms ease;
}

.outreach-msg-ta:focus {
  outline: none;
  border-color: #4A90D9;
}

.outreach-msg-edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.outreach-regen-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-faint-slate);
  background: rgba(138,146,158,0.08);
  border: 1px solid rgba(138,146,158,0.2);
  border-radius: 6px;
  padding: 4px 9px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.outreach-regen-btn:hover {
  color: var(--fg-primary-warm);
  background: rgba(138,146,158,0.15);
  border-color: rgba(138,146,158,0.35);
}

.outreach-regen-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.outreach-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
}

.outreach-modal-backdrop[hidden] {
  display: none;
}

.outreach-modal {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  box-shadow: 0 24px 64px var(--shadow-alpha-50);
}

.outreach-modal-icon {
  color: #D45A5A;
  opacity: 0.85;
}

.outreach-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-primary-warm);
  margin: 0;
}

.outreach-modal-body {
  font-size: 0.88rem;
  color: var(--fg-faint-slate);
  margin: 0;
  line-height: 1.6;
}

.outreach-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
}

.outreach-modal-cancel {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--fg-faint-slate);
  background: transparent;
  border: 1px solid var(--surface-charcoal);
  border-radius: 9px;
  padding: 10px 22px;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.outreach-modal-cancel:hover {
  color: var(--fg-primary-warm);
  border-color: var(--border-strong-warm);
  background: var(--overlay-w-04);
}

.outreach-modal-confirm {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--fg-inverse);
  background: #8B2020;
  border: 1px solid #B03030;
  border-radius: 9px;
  padding: 10px 22px;
  transition: background 140ms ease, border-color 140ms ease;
}

.outreach-modal-confirm:hover {
  background: #A02828;
  border-color: #C03030;
}

.outreach-modal-confirm:disabled {
  opacity: 0.55;
  cursor: default;
}

body.outreach-modal-open {
  overflow: hidden;
}

/* v41.58h: misc block L21997-L22018 moved to mobile-v2.css */

/* Builder Hub redesign: vertical flow tree, locked palette, SendBlue-style nodes. */

/* ── Flow canvas background ── */
.imsg-flow-view,
.imsg-flow-view--dd {
  background: var(--surface-charcoal-deep);
}

/* ── Flow node card (SVG rects) \u2014 base sizing now 200x72 ── */
/* Node label: ALL CAPS, tight tracking */
.tmap-node text:first-of-type,
.imsg-dd-node text:first-of-type {
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── Trigger node: 4px solid blue left accent (set inline in JS) ── */
/* Marker class for future CSS targeting */

/* ── Action node: dashed 1px border (set inline in JS via stroke-dasharray) ── */

/* ── Condition node: slight blue accent ── */

/* ── Connector lines \u2014 2px solid #2A2A2A ── */
.imsg-edge {
  stroke: var(--surface-charcoal);
  stroke-width: 2px;
}

.imsg-edge:hover {
  stroke: rgba(239, 83, 80, 0.5);
  stroke-width: 3px;
}

/* ── Node hover brightness on SVG rects ── */
.tmap-node:hover rect:first-child,
.imsg-dd-node:hover > rect:first-child {
  filter: brightness(1.18);
  transition: filter 0.12s;
}

/* ── Inspector header left border \u2014 4px palette colors ── */
.imsg-inspector-header {
  border-left-width: 4px;
  padding-left: 10px;
  margin-bottom: 12px;
}

/* ── Selected node ring: blue ── */

/* ── Wire handle: neutral palette ── */
.imsg-dd-wire-handle {
  fill: var(--surface-charcoal);
  stroke: var(--border-strong-warm);
}
.imsg-dd-wire-handle:hover {
  fill: var(--brand-blue-pure);
}

/* ── Palette item: trigger gets blue border ── */
.imsg-dd-palette-item[data-palette-key="trigger"] {
  border-color: var(--brand-blue-pure);
  color: var(--accent-primary-wash);
}

/* ── KPI card: locked palette ── */
.stl-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
}

/* ── Section titles: muted uppercase ── */
.imsg-dd-palette-title,
.imsg-section-title {
  color: var(--fg-faint);
  border-bottom-color: var(--surface-charcoal);
}

/* ── Flow view background guarantee ── */
#main-content:has(.imsg-flow-view),
#main-content:has(.imsg-flow-view--dd) {
  background: var(--surface-charcoal-deep);
}

/* ── Eyebrow text: muted ── */
.imsg-flow-eyebrow {
  color: var(--fg-faint);
}

/* ── Flow title: primary text ── */
.imsg-flow-title {
  color: var(--border-card-light);
}

/* ── Node subtitle text: muted gray ── */

body html,
body {
  background-color: var(--surface-charcoal-deep) !important;
  background: var(--surface-charcoal-deep) !important;
  color: var(--border-card-light) !important;
}

body html body,
body main,
body #main-content,
body main#main-content {
  background-color: var(--surface-charcoal-deep);
}

/* ────────────────────
   2. CARD - solid bg, standard radius 12px, standard padding 20px
  Remove gradient overlays (they read as "foggy" on dark)
   ──────────────────── */
body .card {
  background: var(--bg-card);
  background-image: none;
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transition: transform .12s ease, border-color .12s ease;
}
body .card:hover {
  border-color: var(--border-strong-warm);
}

body .kpi-card {
  background: var(--bg-card);
  background-image: none;
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  transition: transform .12s ease, border-color .12s ease;
}
body .kpi-card:hover {
  border-color: var(--border-strong-warm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  transform: none;
}

/* hero-card stays 12px, no gradient */
body .hero-card {
  background: var(--bg-card);
  background-image: none;
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 20px;
}
body .hero-card::after {
  background: none;
  display: none;
}

/* Report cards */



/* Automation cards */



/* ────────────────────
   3. TEXT COLORS - replace off-palette with locked palette values
   ──────────────────── */

/* Pure white → #E5E5E5 */
body .card h2,
body .card h3,
body .card h4,
body .page-title,
body .hero-headline,
body .chats-title,
body .reports-subheader .reports-title {
  color: var(--border-card-light) !important;
}

/* #e8efe9 / #e8ecef / #EAEBEC → #E5E5E5 */
body .automation-card-title,
body .home-dash-value,
body .kpi-card .kpi-value,
body .gl-cn-title,
body .gl-divisions-title,
body .gl-cn-sub,
body .gl-divisions-sub {
  color: var(--border-card-light);
}

/* Muted text: #8a9690 / #9AA0A6 / #8A8F9C / #8A8C92 / #B5B7BE → #B8B8B8 or #8A8A8A */
body .kpi-label,
body .kpi-card .kpi-label,
body .automation-card-status,
body .automations-sub,
body .report-meta,
body .report-refresh,
body .gds-desc,
body .gl-divisions-sub,
body .gl-cn-sub {
  color: var(--fg-faint) !important;
}

body .section-label,
body .right-section > .section-label,
body .panel-title,
body .right-section > h3 {
  color: var(--fg-muted-warm) !important;
}

/* Page titles: 24px, weight 600 */
body .page-title,
body .gl-divisions-title,
body .gl-cn-title,
body .chats-title {
  font-size: 24px !important;
  font-weight: 600;
  color: var(--border-card-light) !important;
}

/* Card titles: 18px, weight 600 */
body .card h3,
body .panel-title,
body .right-section > h3 {
  font-size: 18px !important;
  font-weight: 600;
}

/* ────────────────────
   4. EYEBROWS - ALL CAPS, 11px, 0.08em letter-spacing, #8A8A8A, 600
   ──────────────────── */
body .eyebrow,
body .division-header,
body .gl-cn-cat,
body .reports-division h3,
body .msg-tile-label,
body .msg-stat-label,
body .settings-block-head h2,
body .automation-card-metric {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--fg-faint);
}

/* Settings block heads are section headers, slightly bigger */


body aside.sidebar,
body aside#sidebar {
  background: var(--surface-charcoal-deep);
  border-right: 1px solid var(--surface-charcoal);
}

/* Nav items: hover should use very subtle bg, not garish 0D47A1 blue */
body aside.sidebar .nav-item:hover,
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item:hover,
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item:hover {
  background: var(--overlay-w-04) !important;
  color: var(--border-card-light) !important;
}

/* Active nav item: subtle blue-tinted bg, use #2196F3 for accent */
body aside.sidebar .nav-item.active,
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active,
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active {
  background: var(--accent-primary-soft-12) !important;
  border-color: rgba(33,150,243,0.22) !important;
  color: var(--brand-blue-pure) !important;
}

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active svg, body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active svg {
  color: var(--brand-blue-pure) !important;
  stroke: var(--brand-blue-pure) !important;
}

/* History items in sidebar */
body aside.sidebar #sidebar-history-list .history-item,
body .sidebar .history-item {
  background: var(--overlay-w-03);
  border: 1px solid var(--surface-charcoal);
  color: var(--fg-muted-warm);
}
body aside.sidebar #sidebar-history-list .history-item:hover {
  background: rgba(33,150,243,0.06);
  border-color: rgba(33,150,243,0.2);
  color: var(--border-card-light);
}
body aside.sidebar #sidebar-history-list .history-item .history-title {
  color: var(--border-card-light);
}
body aside.sidebar #sidebar-history-list .history-item .history-meta {
  color: var(--fg-faint);
}

/* Active history item */
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active {
  background: var(--accent-primary-soft-08) !important;
  color: var(--brand-blue-pure) !important;
}

/* Sidebar viewall / toggle links */
body .sidebar-history-viewall:hover,
body:not(.sidebar-collapsed) aside.sidebar .sidebar-history-viewall:hover {
  color: var(--brand-blue-pure) !important;
  background: rgba(33,150,243,0.06) !important;
}

/* Sidebar badge pills */
body aside.sidebar .sidebar-quick-item .sqi-badge {
  background: var(--accent-primary-soft-08);
  color: var(--brand-blue-pure);
}

/* Floating pill nav */
body .gl-floating-pill .gfp-item:hover {
  background: var(--overlay-w-04);
  color: var(--border-card-light);
}
body .gl-floating-pill .gfp-item.active {
  background: var(--accent-primary-soft-12);
  color: var(--brand-blue-pure);
}

/* ────────────────────
   6. BUTTONS - primary darkens, ghost lightens, correct colors
   ──────────────────── */
body .btn-primary,
body button.primary,
body .btn-primary.btn-primary--sm {
  background: var(--brand-blue-pure);
  background-image: none;
  color: var(--surface-charcoal-deep);
  border: 1px solid rgba(33,150,243,0.6);
  border-radius: 8px;
  font-weight: 600;
  transition: filter .12s ease, transform .12s ease;
}
body .btn-primary:hover,
body button.primary:hover,
body .btn-primary.btn-primary--sm:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}

body .btn-ghost,
body .btn-ghost.btn-ghost--sm {
  background: transparent;
  color: var(--fg-muted-warm);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body .btn-ghost:hover,
body .btn-ghost.btn-ghost--sm:hover {
  background: var(--border-soft);
  color: var(--border-card-light);
  border-color: var(--border-strong-warm);
}

/* Send button */
body .rc-send,
body button.rc-send,
body .composer-send {
  background: var(--surface-charcoal);
  background-image: none;
  color: var(--border-card-light);
  border: 1px solid var(--border-strong-warm);
  box-shadow: none;
}
body .rc-send:hover,
body button.rc-send:hover,
body .composer-send:hover {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-color: var(--brand-blue-pure);
}

/* Settings save/inline buttons */





body .chat-textarea, body .chats-search, body .msg-search, body .modal-box input, body .modal-box textarea, body .auth-field input, body .auth-field textarea {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 8px;
}
body .chat-textarea:focus,
body .chats-search:focus,
body .msg-search:focus,
body .modal-box input:focus,
body .modal-box textarea:focus {
  border-color: var(--brand-blue-pure);
  outline: none;
}

/* ────────────────────
   8. GRID / SECTION SPACING - 24px between sections, 16px grid gap
   ──────────────────── */
body .dashboard-view,
body .automations-view,
body .reports-view,
body .settings-view,
body .gl-cn-view,
body .gl-divisions-view,
body .chats-view,
body .msg-view,
body .msg-page-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body .report-cards,
body .gl-cn-grid,
body .gl-divisions-grid,
body .automations-cards {
  gap: 16px;
}

body .dashboard-lower,
body .right-panel {
  gap: 16px;
}

body .card.panel,
body .right-section,
body .chat-panel {
  padding: 20px;
}

body .panel-title,
body .right-section > h3,
body .right-section > .section-label {
  margin-bottom: 12px;
}

body .topbar {
  background: var(--surface-charcoal-deep);
  border-bottom: 1px solid var(--surface-charcoal);
}

body .floating-chat-panel {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
}
body .floating-chat-panel:hover {
  border-color: var(--border-strong-warm);
}

body .floating-chat-composer .composer-send:hover,
body .floating-chat-composer .composer-actions .composer-send:hover {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-color: var(--brand-blue-pure);
}
body .floating-chat-header .btn-close:hover {
  color: var(--border-card-light);
  background: var(--border-soft);
}
/* #1c1c1e / #1A1B1B chat bg → #1F2121 */
body .floating-chat-panel,
body .chat-panel.card,
body .dashboard-view .card.chat-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--surface-charcoal) !important;
  border-radius: 12px;
}

/* Composer chip context */
body .floating-chat-composer .composer-chip--context,
body .floating-chat-composer .composer-chip--context .cc-ico,
body .rc-chip:hover {
  color: var(--brand-blue-pure);
  border-color: rgba(33,150,243,0.3);
}

/* ────────────────────
   12. DIVISIONS VIEW - title/cta use #E5E5E5/#B8B8B8, icons use accent
   ──────────────────── */






body .gl-cn-title {
  color: var(--border-card-light);
  font-size: 24px;
  font-weight: 600;
}
body .gl-cn-sub {
  color: var(--fg-faint) !important;
}
body .gl-cn-stats .gl-cn-stat strong {
  color: var(--border-card-light);
}
body .gl-cn-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .12s ease;
}
body .gl-cn-card:hover {
  border-color: var(--border-strong-warm);
}
body .gl-cn-card .gds-icon {
  background: var(--accent-primary-soft-08);
  color: var(--brand-blue-pure);
}
body .gl-cn-card .gds-title {
  color: var(--border-card-light);
  font-weight: 600;
}
body .gl-cn-card .gds-desc {
  color: var(--fg-faint);
}
body .gl-cn-card .gds-chip--connected {
  background: rgba(76,175,80,0.12);
  color: var(--status-success);
}
body .gl-cn-card .gds-chip:not(.gds-chip--connected) {
  background: var(--overlay-w-04);
  color: var(--fg-faint);
}
body .gl-cn-card .gds-cta {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-radius: 8px;
  font-weight: 600;
}
body .gl-cn-card .gds-cta:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}
body .gl-cn-card .gds-cta--disconnect {
  background: transparent;
  color: var(--status-danger-soft);
  border: 1px solid rgba(239,83,80,0.3);
}

body .msg-thread-row {
  background: transparent;
  border-bottom: 1px solid var(--bg-elev-1);
  transition: background .1s ease;
}
body .msg-thread-row:hover {
  background: var(--overlay-w-03);
}
body .msg-thread-row.is-active {
  background: var(--accent-primary-soft-08);
}
body .msg-thread-name {
  color: var(--border-card-light);
}
body .msg-thread-preview,
body .msg-thread-time {
  color: var(--fg-faint);
}
body .msg-left-pane {
  background: var(--bg-card);
  border-right: 1px solid var(--surface-charcoal);
}
body .msg-bubble-out .msg-bubble {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-radius: 12px;
}
body .msg-bubble-in .msg-bubble {
  background: var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 12px;
}
body .msg-composer {
  border-top: 1px solid var(--surface-charcoal);
  background: var(--bg-card);
}
body .msg-composer-input {
  background: var(--bg-elev-1);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 8px;
}
body .msg-composer-send {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-radius: 8px;
  font-weight: 600;
}
body .msg-tile {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 16px;
}
body .msg-stat {
  background: transparent;
}
body .msg-status-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--surface-charcoal);
}
body .msg-title {
  color: var(--border-card-light);
  font-size: 18px;
  font-weight: 600;
}
body .msg-page-title {
  color: var(--border-card-light);
  font-size: 18px;
  font-weight: 600;
}
body .msg-filter-tab,
body .msg-range-chip {
  color: var(--fg-faint);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  background: transparent;
}
body .msg-filter-tab.is-active,
body .msg-range-chip.is-active {
  background: var(--accent-primary-soft-12);
  border-color: rgba(33,150,243,0.3);
  color: var(--brand-blue-pure);
}
body .msg-pill-on {
  background: rgba(76,175,80,0.15);
  color: var(--status-success);
  border-radius: 8px;
}
body .msg-pill-off {
  background: rgba(255,152,0,0.12);
  color: #FF9800;
  border-radius: 8px;
}
body .msg-pill-optout {
  background: rgba(239,83,80,0.12);
  color: var(--status-danger-soft);
  border-radius: 8px;
}






body .auto-status.on {
  background: var(--status-success);
  box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}
body .auto-status.off {
  background: var(--fg-faint);
}
/* Toggle track: when checked → accent green, not garish #1976D2 */
body .toggle-switch.toggle-switch--inline input:checked + .toggle-track {
  background: var(--status-success);
}







body .srl-title {
  color: var(--border-card-light);
  font-weight: 500;
}
body .srl-value,
body .settings-row-muted {
  color: var(--fg-faint);
  font-size: 13px;
}








body .auth-view {
  background: var(--surface-charcoal-deep);
}
body .auth-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
}
body .auth-title {
  color: var(--border-card-light);
  font-weight: 600;
  font-size: 24px;
}
body .auth-sub {
  color: var(--fg-faint);
}
body .auth-field input {
  background: var(--surface-charcoal-deep);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 8px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .auth-field input:focus {
  border-color: var(--brand-blue-pure);
}
body .auth-field span,
body .auth-field label span {
  color: var(--fg-muted-warm);
  font-size: 13px;
}
body .auth-primary-btn {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border: none;
  border-radius: 8px;
  font-weight: 600;
}
body .auth-primary-btn:hover {
  filter: brightness(0.88);
}
body .auth-link {
  color: var(--brand-blue-pure);
}
body .auth-link-muted {
  color: var(--fg-faint);
}
body .auth-foot {
  color: var(--fg-faint);
}
body .auth-divider {
  color: var(--fg-faint);
}
body .auth-divider::before,
body .auth-divider::after {
  border-color: var(--surface-charcoal);
}
body .auth-oauth-btn {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 8px;
  font-weight: 500;
}
body .auth-oauth-btn:hover {
  border-color: var(--border-strong-warm);
  background: var(--bg-elev-1);
}

body .toast {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  border-radius: 8px;
}
body .modal {
  background: rgba(0,0,0,0.6);
}
body .modal-box {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  color: var(--border-card-light);
}
body .modal-box h3 {
  color: var(--border-card-light);
  font-size: 18px;
  font-weight: 600;
}
body .modal-box label {
  color: var(--fg-muted-warm);
}













/* ────────────────────
   21. FONT STACK - remove Satoshi/Cabinet Grotesk hardcodes, use system
   ──────────────────── */
body .chats-title,
body .home-dash-value,
body .hhc-title,
body .reports-subheader .reports-title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}



/* ────────────────────
   22. GRADIENT REMOVAL - solid #1F2121 replaces non-subtle gradients
   ──────────────────── */

/* Send button gradient → solid */
body .rc-send,
body button.rc-send {
  background-image: none;
}

/* Tier badge gradients: keep but swap to use accent */
body .footer-org-tier-badge[data-tier="enterprise"],
body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"] {
  background: var(--brand-blue-pure);
  background-image: none;
  color: var(--surface-charcoal-deep);
}
body .footer-org-tier-badge[data-tier="max"],
body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="max"] {
  background: rgba(33,150,243,0.2);
  background-image: none;
  color: var(--accent-primary-wash);
}

/* Confirm button gradient → solid */
body .gl-confirm-btn--primary {
  background: var(--brand-blue-pure);
  background-image: none;
  color: var(--surface-charcoal-deep);
}

/* Settings avatar gradient */


/* ────────────────────
   23. SUMMARY ITEMS / DIVIDERS - use #232525, not rgba(255,255,255,0.05)
   ──────────────────── */
body .summary-item {
  border-top-color: var(--bg-elev-1);
  color: var(--fg-muted-warm);
}
body .summary-item strong {
  color: var(--border-card-light);
}



body .coo-kpi-btn {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  transition: border-color .12s ease;
}
body .coo-kpi-btn:hover {
  border-color: var(--border-strong-warm);
}
body .coo-kpi-label {
  color: var(--border-card-light);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .coo-kpi-src {
  color: var(--fg-faint);
  font-size: 11px;
}

/* Fix hover color regression: #0D47A1 → #E5E5E5 */
body .coo-kpi-btn:hover .coo-kpi-label,
body .kpi-card:hover .kpi-label,
body .kpi-card:hover h4 {
  color: var(--fg-muted-warm);
}

body .home-dash-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  transition: border-color .12s ease;
}
body .home-dash-card:hover {
  border-color: var(--border-strong-warm);
}
body .home-dash-value {
  color: var(--border-card-light);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body html .home-dash-card.home-dash-card--link:hover .home-dash-cta {
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
}

/* ────────────────────
   26. PILL / SYNC CHIPS - locked palette (success/warn/error only)
   ──────────────────── */
body .pill {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--fg-muted-warm);
  border-radius: 8px;
}
body .pill.live::before {
  background: var(--status-success);
}
body .sync-chip[class*="success"],
body .sync-chip.success {
  background: rgba(76,175,80,0.12);
  color: var(--status-success);
}
body .sync-chip[class*="warn"],
body .sync-chip.warn {
  background: rgba(255,152,0,0.12);
  color: #FF9800;
}
body .sync-chip[class*="error"],
body .sync-chip.error {
  background: rgba(239,83,80,0.12);
  color: var(--status-danger-soft);
}

body .data-table th {
  background: var(--bg-elev-1);
  color: var(--fg-faint);
  border-bottom: 1px solid var(--surface-charcoal);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
body .data-table td {
  color: var(--border-card-light);
  border-bottom: 1px solid var(--bg-elev-1);
  font-size: 14px;
}
body .data-table tbody tr:hover {
  background: var(--overlay-w-02);
}

/* v41.58h: component:chat block L23544-L23550 moved to mobile-v2.css */

/* #e8efe9 → #E5E5E5 for card h3 */
body .card h3 {
  color: var(--border-card-light);
}

/* Sidebar nav hover was #fff → #E5E5E5 */
body .sidebar .nav-item:hover {
  color: var(--border-card-light);
}

/* .kpi-label was #8a9690 → #8A8A8A */
body .kpi-label {
  color: var(--fg-faint);
}

/* .eyebrow was #1E88E5 (garish blue) → #8A8A8A */
body .eyebrow {
  color: var(--fg-faint);
}

/* page-title was #e8ecef → #E5E5E5 */
body .page-title {
  color: var(--border-card-light);
}

/* #9AA0A6 "Recent actions" section-label → #8A8A8A */
body .section-label[style*="color:#9AA0A6"],
body [style*="color:#9AA0A6"] {
  color: var(--fg-faint);
}

/* #C62828 error red → #EF5350 */
body [style*="background:#C62828"] {
  background: var(--status-danger-soft);
}

/* Chat panel radial gradient overlay → remove */


/* KPI pills row */
body .kpi-pill {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--fg-muted-warm);
  border-radius: 8px;
  transition: border-color .12s ease;
}
body .kpi-pill:hover {
  border-color: var(--border-strong-warm);
  color: var(--border-card-light);
}

/* Quick action buttons */
body .qa-btn {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  color: var(--fg-muted-warm);
  border-radius: 8px;
  font-weight: 500;
  transition: border-color .12s ease, color .12s ease;
}
body .qa-btn:hover {
  border-color: var(--border-strong-warm);
  color: var(--border-card-light);
}

body .home-tab-dot {
  background: var(--brand-blue-pure);
}
body .kpi-pill.is-active,
body .kpi-pill[aria-pressed="true"],
body .sidebar-collapse-btn:hover {
    background: var(--accent-primary-soft-10);
    border-color: rgba(33, 150, 243, 0.3);
    color: var(--brand-blue-pure);
}
body .rc-icon-btn:hover {
  border-color: rgba(33,150,243,0.3);
  color: var(--brand-blue-pure);
}
body .rc-mic--on {
  background: var(--accent-primary-soft-15);
  border-color: var(--brand-blue-pure);
  color: var(--brand-blue-pure);
}

body .floating-chat-toggle {
  background: var(--brand-blue-pure);
  color: var(--surface-charcoal-deep);
  border-radius: 8px;
}
body .floating-chat-toggle:hover {
  filter: brightness(0.88);
  box-shadow: none;
}
body .floating-chat-toggle::before {
  background: rgba(255,255,255,0.5);
}

body ::-webkit-scrollbar-thumb {
  background: var(--surface-charcoal);
}
body ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong-warm);
}

/* ════════════════════
   v40.5am - TRUE GLASS BLUR v2 (mobile Ask)
   Replaces the v40.5al attempt that used body::before/::after - those
   didn't render backdrop-filter on iOS Safari because the body had
   position:fixed, breaking the containing-block for backdrop-filter.

   New approach: attach pseudo-elements to .ai-view (a normal flow
   positioning context with isolation:isolate), and bump fade height to
   prevent text bleed-through near the nav and composer.

   References:
   - https://www.joshwcomeau.com/css/backdrop-filter/ (extended backdrop)
   - iOS Safari note: backdrop-filter requires a 3D context; we set
  transform: translateZ(0) on .ai-view to force it.
   ════════════════════ */
/* v41.58h: Ask block L25496-L25596 moved to mobile-v2.css Section 4b */
/* ════════════════════
   v40.5ao - MESSAGES TAB WHITE SURFACE OVERRIDE
   Locked palette: bg #191A1A, card #1F2121, border #2A2A2A.
   These rules unconditionally override light-mode defaults on .msg-* and
   .outreach-* selectors so the Messages/Outreach tabs always render on the
   dark canvas regardless of [data-app-theme] attribute.
   ════════════════════ */

/* Left pane: was rgba(255,255,255,0.92) */
.msg-left-pane {
  background: var(--bg-card) !important;
  border-right-color: var(--surface-charcoal) !important;
}

/* Right pane: was #FFF */
.msg-right-pane {
  background: var(--surface-charcoal-deep) !important;
}

/* Thread header: was rgba(255,255,255,0.92) */
.msg-thread-header {
  background: var(--bg-card) !important;
  border-bottom-color: var(--surface-charcoal) !important;
}

/* Bubble stream: was #FFF */
.msg-bubble-stream {
  background: var(--surface-charcoal-deep) !important;
}

/* Failed bubble: was #FFF (light mode) - keep dark card surface */
.msg-bubble-row.is-failed .msg-bubble {
  background: var(--bg-card) !important;
  color: var(--status-danger-soft) !important;
  border-color: var(--status-danger-soft) !important;
}

/* Composer input: was #FFF */
.msg-composer-input {
  background: var(--surface-charcoal-deep) !important;
  border-color: var(--surface-charcoal) !important;
  color: var(--border-card-light) !important;
}
.msg-composer-input:focus {
  border-color: var(--brand-blue-pure) !important;
  background: var(--surface-charcoal-deep) !important;
}
.msg-composer-input::placeholder {
  color: var(--fg-faint);
}

/* Search box focus: was #fff */
.msg-search:focus {
  background: var(--surface-charcoal-deep) !important;
}

/* Thread row hover: ensure palette-correct in all modes */
.msg-thread-row:hover {
  background: var(--overlay-w-04) !important;
}
.msg-thread-row.is-active {
  background: var(--accent-primary-soft-12) !important;
}

/* Thread text: override any light-mode #1d1d1f */
.msg-thread-name {
  color: var(--border-card-light) !important;
}
.msg-thread-preview {
  color: var(--fg-faint) !important;
}
.msg-thread-time {
  color: var(--fg-muted-light) !important;
}

/* Outreach modal-confirm text color (#fff is fine on dark bg, no change needed) */
/* Already correct: .outreach-modal-confirm { color: #fff; background: #8B2020; } */

/* ════════════════════
   v40.5ao -- DATA TAB BACKGROUND + OVERVIEW BREATHING ROOM
   Applied: 2026-06-02
   Fixes:
  (a) Connectors tab: visible background behind/between the chip row
  (the strip of color showing between .gl-cn-section blocks was
  caused by the light-theme glass gradient leaking through from the
  early @media (max-width: 767px) rule at line 1823 and the base
  .gl-cn-view rule at line 3200). Force all container elements
  transparent so only the page bg (#191A1A) shows through.
  (b) Overview/Dashboards: content felt squished. Increase outer
  padding, inter-section gap, KPI strip gap, and KPI card padding.
   ════════════════════ */

/* ── (a) DATA SOURCES TAB -- kill background strip between chip sections ── */
/* The .gl-cn-view container and its direct children must be transparent.
   The visible strip was: the glass gradient from the 767px media block
   leaking onto .gl-cn-section (3 selector levels) beating the 4-level
   override only on mobile. Re-assert with matching mobile specificity. */

/* Section wrappers (Operations, Finance, Sales, etc.) -- transparent so
   the page bg shows between cards, not a glass panel. */
body .gl-cn-view .gl-cn-header,
body .gl-cn-view .gl-cn-section,
body .gl-cn-view .gl-cn-cat,
body .gl-cn-view,
html body .gl-cn-view {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Mobile: same selectors inside the 767px breakpoint that had the
   glass gradient so specificity is matched or exceeded. */
/* v41.58h: misc block L23408-L23421 moved to mobile-v2.css */

/* ── (b) OVERVIEW / DASHBOARDS HUB -- more breathing room ── */
/* Outer wrapper: increase padding from 24px 24px 32px to 32px 32px 48px.
   Gap between major sections: from 1.25rem to 1.75rem (28px). */
body .dash-hub {
  padding: 32px 32px 48px !important;
  gap: 1.75rem !important;
}

/* KPI strip: increase gap between tiles from 0.6rem to 1rem (16px). */
body .dash-hub .dash-hub-kpi-strip {
  gap: 1rem !important;
}

/* Individual KPI tile: more internal padding for airiness.
   Old: 0.7rem 0.85rem 0.6rem. New: 1rem 1.1rem 0.85rem. */
body .dash-hub .dash-hub-kpi {
  padding: 1rem 1.1rem 0.85rem !important;
}

/* Chart cards: more internal breathing.
   Old: 1rem 1.1rem. New: 1.25rem 1.4rem. */
body .dash-hub .dash-hub-card {
  padding: 1.25rem 1.4rem;
}

/* Leaderboard + insights: match chart card breathing.
   Old: 1rem 1.1rem. New: 1.25rem 1.4rem. */
body .dash-hub .dash-hub-leaderboard,
body .dash-hub .dash-hub-insights {
  padding: 1.25rem 1.4rem;
}

/* Section spacing: give divisions sub-grid more top margin.
   Old: 0.5rem. New: 1rem. */

/* Mobile (max 820px): tighten back slightly so it doesn't overflow.
   Still more spacious than before (was 24px, now 20px). */
/* v41.58h: component:kpi block L23652-L23663 moved to mobile-v2.css */

/* ════════════════════
   v40.5at - SLEDGEHAMMER COMPOSER BOTTOM-PIN (mobile, all routes)
   ────────────────────
   Root cause: will-change:transform on .ai-view (added in v40.5am as a
   "safe" alternative to transform:translateZ(0)) creates a new stacking
   context and containing block for position:fixed descendants in iOS
   Safari and Chromium. Both properties behave identically in this regard.
   Any ancestor with transform, will-change:transform, filter, backdrop-filter,
   perspective, or contain:layout|paint|strict re-parents fixed children to
   that element instead of the viewport.

   Fix A (targeted): removed will-change:transform from html body.route-ask
   .ai-view in the v40.5am block above.

   Fix B (sledgehammer, belt-and-suspenders): unconditionally force every
   composer-wrap variant to position:fixed at the viewport bottom on mobile.
   This overrides any containing-block ancestor that may have been missed,
   and covers the ai-composer-wrap--chip variant used in the dashboard
   chat panel when it appears in a mobile context outside .ai-view.

   The ai-composer-wrap--chip inside .dashboard-view .card.chat-panel is
   NOT position:fixed -- it lives in normal flow inside a card. We exclude
   that specific case via the :not(.chat-panel *) qualifier so the dashboard
   inline chat panel is unaffected.

   Padding-bottom on .ai-view ensures messages do not scroll under the fixed
   composer (composer is ~64px tall + safe-area).
   ──────────────────── */
/* v41.58h: Ask block L25817-L25849 moved to mobile-v2.css Section 4b */

/* ── Issue 1: Message Queue region ──────────────────── */
.ai-queue-region {
  width: 100%;
  padding: 8px 12px 0;
  box-sizing: border-box;
}

/* v41.58h: Ask block L25858-L25868 moved to mobile-v2.css Section 4b */

.ai-queue-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-left: 2px;
}

.ai-queue-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-queue-chip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 7px 10px;
  min-height: 32px;
}

.ai-queue-chip__drag {
  flex: 0 0 auto;
  color: var(--fg-faint);
  cursor: grab;
  padding-top: 2px;
  display: flex;
  align-items: center;
}

.ai-queue-chip__text {
  flex: 1 1 auto;
  color: var(--border-card-light);
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  cursor: text;
  min-width: 0;
}

.ai-queue-chip__text:hover {
  color: var(--fg-inverse);
}

.ai-queue-chip__del {
  all: unset;
  flex: 0 0 auto;
  color: var(--fg-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-top: 1px;
}

.ai-queue-chip__del:hover {
  color: var(--status-danger-soft);
  background: rgba(239,83,80,0.1);
}

/* ── Queue button in composer toolbar ──────────────────── */

/* ── Issue 2: Per-message edit ──────────────────── */
.msg-bubble.msg-user {
  position: relative;
}

.msg-edit-btn {
  all: unset;
  position: absolute !important;
  top: 6px !important;
  left: -26px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px;
  background: var(--border-soft) !important;
  border: 1px solid var(--border-overlay-10) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--fg-faint) !important;
  opacity: 0;
  transition: opacity 160ms ease !important;
}

.msg-bubble.msg-user:hover .msg-edit-btn {
  opacity: 1;
}

@media (hover: none) {
  /* Mobile: always show edit button */
  .msg-edit-btn {
    opacity: 0.7;
    position: static;
    width: 18px !important;
    height: 18px !important;
    margin-left: 6px !important;
    vertical-align: middle;
    display: inline-flex;
  }
  .msg-bubble.msg-user {
    display: flex;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .msg-user-text {
    flex: 1 1 auto;
  }
}

.msg-edit-btn:hover {
  color: var(--border-card-light);
  background: var(--border-overlay-10);
}

.msg-edit-regen-btn:hover {
  background: rgba(33,150,243,0.1);
  border-color: rgba(33,150,243,0.6);
}

/* ── Issue 3: Composer spacing tighten ──────────────────── */

/* Dynamic padding-bottom: use --composer-region-h (set by ResizeObserver) */
/* v41.58h: Ask block L26003-L26023 moved to mobile-v2.css Section 4b */

/* ── Issue 4 CSS: ensure cl-block text is always visible in .ai-prose ────── */
/* The text-type cl-block lives in .ai-prose, outside .claude-thinking.
   Force explicit block display so no accidental collapse. */
html body .ai-prose .cl-block {
  display: block;
  min-height: 0;
}

html body .ai-prose .cl-streaming-text {
  display: block;
}

html body .ai-prose .cl-stream-text {
  display: block;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.95rem !important;
  line-height: 1.65;
}

/* === Bug 4 fix: sidebar expand button visible when collapsed === */
/* In collapsed state the collapse button is the expand button (icon rotates 180deg via line 1563).
   Override all display:none rules so the button stays interactive. */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .sidebar-collapse-btn--v1944,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944:hover .sidebar-collapse-btn--v1944 {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  position: static;
  transform: none;
}

/* Rotate the SVG to indicate expand (chevron points right = expand). */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .sidebar-collapse-btn--v1944 svg {
  transform: rotate(180deg) !important;
}
/* === END Bug 4 fix === */

/* ============================================================
   === v40.5ax UI cleanup ===
   Single authoritative override block. Goals:
   (a) Nav tab colors readable, uniform spacing, no white-bright
   (b) Top-right status chips: true pill shape, soft/no visible border
   (c) AI composer matches dark theme bg #1F2121 (kill black rendering)
   Architecture: highest-specificity wins, no per-state stacking,
   no duplicated background declarations.
   ============================================================ */

/* ---- (a) Top-nav floating pill tabs ----
   Wrapped in @media (min-width: 720px) to win source-order tiebreaker over
   the strip rule at line ~7427 which lives in the same media context. */
@media (min-width: 720px) {
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item,
  html body header.topbar .gl-floating-pill--topbar .gfp-item,
  html body .topbar .gl-floating-pill--topbar .gfp-item {
    color: #B8B8B8;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 12px;
    letter-spacing: 0.01em;
    font-weight: 500;
    border-radius: 999px;
    transition: color 120ms ease, background-color 120ms ease;
  }
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:hover,
  html body header.topbar .gl-floating-pill--topbar .gfp-item:hover,
  html body .topbar .gl-floating-pill--topbar .gfp-item:hover {
    color: #E5E5E5;
    background: rgba(33, 150, 243, 0.10);
  }
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active span,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item[aria-current="page"],
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    color: #FFF !important;
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    background-image: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(13, 71, 161, 0.25) !important;
    font-weight: 600;
  }
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger {
    color: #B8B8B8 !important;
    background: transparent;
    border-radius: 999px;
  }
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger:hover {
    color: #E5E5E5 !important;
    background: rgba(33, 150, 243, 0.10) !important;
  }
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger.active,
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .dr-dd-trigger[aria-expanded="true"] {
    color: #FFF !important;
    background: #2196F3 !important;
  }

  html body header.topbar #etl-pill,
  html body header.topbar #brain-pill,
  html body .status-row #etl-pill,
  html body .status-row #brain-pill {
    color: #B8B8B8;
  }
  html body header.topbar #etl-pill:hover,
  html body header.topbar #brain-pill:hover {
    color: #E5E5E5;
  }

}

/* ---- (c) AI composer dark surface (chrome only on the card) ---- */
html body .rich-composer, html body .glass-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  background-image: none;
  border: 1px solid #2A2A2A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
}
html body .rich-composer textarea,
html body .glass-composer textarea {
  background: transparent;
  color: var(--gl-chat-text, #E5E5E5) !important;
}
html body .rich-composer textarea::placeholder, html body .glass-composer textarea::placeholder {
  color: #8A8A8A !important;
}

/* JetBrains Mono is referenced for code/meta but no @font-face ships;
   provide a self-hosted stack that prioritises high-quality system mono
   variants so code always reads as code. */
html body code, html body pre, html body .gl-cn-stats {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-variant-ligatures: none;
}

html body .ai-messages .msg-assistant .ai-prose :not(pre) > code,
html body .cl-prose :not(pre) > code,
html body .cl-stream-text :not(pre) > code {
  white-space: pre-wrap !important;
  word-break: normal;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px;
  padding: 0.5px 5px;
  font-size: 0.86em !important;
  color: #E3F2FD !important;
}

html body .ai-messages .msg-bubble.msg-assistant .ai-prose pre,
html body .ai-messages .msg-assistant .ai-prose pre,
html body .ai-messages .ai-prose pre,
html body .cl-prose pre,
html body .cl-stream-text pre,
html body pre.cl-code,
html body .msg-assistant pre,
html body .floating-chat-messages .msg-bubble.msg-assistant .ai-prose pre {
  background: #161818 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  overflow-x: auto;

  white-space: pre !important;
  word-break: normal;
  overflow-wrap: normal;
  font-size: 0.82rem !important;
  line-height: 1.55;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.18) transparent !important;
}
html body .ai-messages .msg-assistant .ai-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: #E5E5E5 !important;
  font-size: inherit;

  white-space: inherit;
  word-break: normal;
  overflow-wrap: normal;
}
html body .ai-messages .msg-assistant .ai-prose pre::-webkit-scrollbar { height: 6px; }
html body .ai-messages .msg-assistant .ai-prose pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 999px;
}

/* Visible separator between thinking block and answer (both viewports). */
html body .ai-thinking {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 0.85rem !important;
  margin-bottom: 0.85rem !important;
}
html body .ai-thinking.is-collapsed {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 0.4rem !important;
  margin-bottom: 0.6rem !important;
}

/* Toolbar inside the composer: keep transparent (inherits #1F2121) but
   add a subtle top divider so it reads as a distinct row. */
html body .rich-composer .rc-toolbar {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
}

/* Composer wrap (the layout shell) must NEVER carry card chrome ---
   it's the sticky positioning + bottom-fade container only. */
html body .ai-composer-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
/* Mobile: keep the gradient fade behind the composer so messages scroll
   under it cleanly. Desktop still uses transparent (page bg shows). */
/* v41.58h: component:rich-composer block L23932-L23969 moved to mobile-v2.css */

/* Remove any legacy fixed top fade that was 92px tall (taller than the 60px
   topnav) and intercepting taps in the 32px gap. */
html body [class*="top-fade"] {
  display: none;
}

/* iOS tap highlight ghost behind the Model pill wrapper: kill it.
   overflow:hidden clips the native select interaction area to the pill bounds. */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model {
  -webkit-tap-highlight-color: transparent;
  overflow: hidden !important;
}

/* The native select on iOS can still paint its own focus highlight box.
   Use opacity: 0 to fully hide native chrome while preserving interactivity.
   Positioned absolute over the pill (sized by rc-model min-width). */
html body .rich-composer .rc-model-select,
html body .ai-view .rich-composer .rc-model-select {
  -webkit-tap-highlight-color: transparent;
  text-indent: -9999px;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  opacity: 0;
}

/* Give rc-model an explicit min-width so the pill shows even with select
   positioned absolute (no longer in flow). */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model {
  min-width: 72px !important;
}

/* Suppress the sticky background on rc-plus-wrap that creates a grey panel
   when the toolbar has overflow: hidden. background: inherit can resolve
   to a grey opaque value in some browsers. */
html body .rich-composer .rc-plus-wrap {
  background: transparent;
}

/* v41.58h: component:ai-view block L25178-L25245 moved to mobile-v2.css */

/* Shimmer animation on the active thinking label.
   Targets both the cl-label (in our DOM) and the legacy cl-step-text
   selector from the spec so either naming convention works. */
@keyframes cl-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

html body .cl-block.cl-thinking.cl-step--active .cl-label, html body .cl-block.cl-thinking.is-active .cl-label, html body .claude-thinking .cl-block.cl-step--active .cl-label {
  background: linear-gradient(
    90deg,
    rgba(184,184,184,0.55) 0%,
    rgba(184,184,184,0.55) 30%,
    #E5E5E5 50%,
    rgba(184,184,184,0.55) 70%,
    rgba(184,184,184,0.55) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: cl-shimmer 2.2s linear infinite;
}

/* Terminal-prompt prefix printed before the live label via CSS.
   Renders "  >_  " in faint monospace to match Perplexity style. */
html body .cl-block.cl-thinking.cl-step--active .cl-head::before,
html body .cl-block.cl-thinking.is-active .cl-head::before,
html body .claude-thinking .cl-block.cl-step--active .cl-head::before {
  content: ">_";
  display: inline-block;
  margin-right: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  color: rgba(184,184,184,0.50);
  font-size: 0.82em;
  font-weight: 400;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Subagent chip wrapper (div injected by JS into thinkEl). */
.cl-subagent-wrap {
  margin-top: 8px;
  padding: 0 2px;
}

/* Subagent chip pill. */
.cl-subagent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-primary-soft-08);
  border: 1px solid var(--accent-primary-soft-18);
  color: var(--brand-blue-pure);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* Monitor icon inside subagent chip. */
.cl-subagent-chip svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* Tool card: Perplexity-style card showing running tool + stop button. */

/* Sparkle spinner for active tool card (uses existing cl-spin keyframe). */

/* Stop button inside tool card. */

/* v41.58h: Ask block L26478-L26502 moved to mobile-v2.css Section 4b */

/* Cards and panels using legacy near-black or off-spec border colors. */
html body .card, html body .report-card {
  border-color: #2A2A2A !important;
}

html body .floating-chat {
  border-color: #2A2A2A !important;
}

html body .nav-item:focus-visible {
  outline-color: #2196F3;
}



/* [moved to mobile-v2.css v41.58k — was L23914-L23922 @media (max-width: 820px)] */

/* Replace any known pure-black shadows with alpha versions. */
html body .rich-composer,
html body .ai-composer-wrap .rich-composer {
  box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important;
}

/* (No em-dashes found in CSS comment text in this file - confirmed by grep.) */

/* ============================================================================
   === v40.5ba - Center composer + Kill white backgrounds =====================

   Issue 1: AI Ask page empty state - center composer vertically
   Issue 2: Automations, Divisions, Connectors white cards -> dark theme
   Polish: vertical rhythm, dividers, hover, skeletons, scrollbars
   ============================================================================ */

/* Desktop (>= 821px): override the .ai-home flex-start that pushes composer to top.
   Rule at line 1136 forces flex-start + padding-top 3.5rem on .ai-view.ai-home.
   We need center when no messages. */
/* Mobile (< 821px): center when keyboard closed, dock when keyboard open */
/* v41.58h: Ask block L26593-L26616 moved to mobile-v2.css Section 4b */

/* The large glass block at @media (min-width: 769px) applies white gradient
   to .automations-view [class*="automation"][class*="card"] without dark check.
   Override with max specificity for data-app-theme="dark". */

html[data-app-theme="dark"] body .automations-view .automation-card,
html[data-app-theme="dark"] body .automations-view [class*="automation"][class*="card"],
html[data-app-theme="dark"] body .automations-view [class*="automation"][class*="row"],
html[data-app-theme="dark"] body .automations-view [class*="automation"][class*="item"],
html[data-app-theme="dark"] body #automations-cards .automation-card,
html[data-app-theme="dark"] body .automation-card {
  background: #1F2121;
  background-color: #1F2121;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  box-shadow: none;
  color: #E5E5E5;
}



/* Text inside automation cards */


html[data-app-theme="dark"] body .automation-card .automation-card-status,
html[data-app-theme="dark"] body .automation-card .automation-card-desc,
html[data-app-theme="dark"] body .automation-card [class*="-sub"],
html[data-app-theme="dark"] body .automation-card [class*="-desc"],
html[data-app-theme="dark"] body .automations-view .text-muted {
  color: #B8B8B8 !important;
}

/* PAUSED / status pills */
html[data-app-theme="dark"] body .automations-view .automation-card-status,
html[data-app-theme="dark"] body .automations-view .automation-card-status * {
  color: #8A8A8A !important;
}

/* Automation toolbar area */


/* Line 3138: .gl-cn-card { background: rgba(255, 255, 255, 0.92) !important } */

/* v41.66: cards lifted to #212424 (was #1F2121) so they sit above the
   #191B1A page bg with a visible hairline separation. Grid is now
   transparent, so cards need to be a distinct surface color. */
html[data-app-theme="dark"] body .gl-cn-card,
html[data-app-theme="dark"] body .gl-cn-grid .gl-cn-card,
html[data-app-theme="dark"] body .gl-cn-view .gl-cn-card {
  background: #212424 !important;
  background-color: #212424 !important;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  box-shadow: none;
  color: #E5E5E5 !important;
}

html[data-app-theme="dark"] body .gl-cn-card:hover,
html[data-app-theme="dark"] body .gl-cn-view .gl-cn-card:hover {
  border-color: rgba(33, 150, 243, 0.35) !important;
  background: #232525 !important;
  background-color: #232525 !important;
  background-image: none;
  box-shadow: none;
}

html[data-app-theme="dark"] body .gl-cn-card.is-connected,
html[data-app-theme="dark"] body .gl-cn-view .gl-cn-card.is-connected {
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.06) 0%, #1F2121 100%) !important;
  border-color: rgba(33, 150, 243, 0.42) !important;
}

/* DS card text */
html[data-app-theme="dark"] body .gl-cn-card .gds-title {
  color: #E5E5E5 !important;
}
html[data-app-theme="dark"] body .gl-cn-card .gds-desc {
  color: #B8B8B8 !important;
}
html[data-app-theme="dark"] body .gl-cn-card .gds-icon {
  background: rgba(33, 150, 243, 0.14) !important;
  color: #64B5F6 !important;
}

/* DS view wrapper: kill its light gradient too (base at ~line 3121) */
html[data-app-theme="dark"] body .gl-cn-view {
  background: transparent;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* The large glass block at line 1845 hits .gl-divisions-grid .gl-division-card */

html[data-app-theme="dark"] body .gl-division-card,
html[data-app-theme="dark"] body .gl-divisions-grid .gl-division-card {
  background: #1F2121 !important;
  background-color: #1F2121 !important;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px;
  box-shadow: none;
  color: #E5E5E5 !important;
}



/* Division card text */
html[data-app-theme="dark"] body .gl-division-card .gdc-title,
html[data-app-theme="dark"] body .gl-division-card [class*="title"],
html[data-app-theme="dark"] body .gl-division-card [class*="name"] {
  color: #E5E5E5 !important;
}
html[data-app-theme="dark"] body .gl-division-card .gdc-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #B8B8B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Division page header */


/* Overview cards already look dark from screenshots - reinforce */

/* Kill any remaining glassmorphism on main content cards in dark mode */
html[data-app-theme="dark"] body .main .kpi-card,
html[data-app-theme="dark"] body .main .report-card,
html[data-app-theme="dark"] body .main .card:not(.chat-panel):not(.floating-chat):not(.auth-card) {
  background: #1F2121 !important;
  background-color: #1F2121 !important;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #2A2A2A !important;
  box-shadow: none;
}

html[data-app-theme="dark"] body h1 { margin-bottom: 24px; }
html[data-app-theme="dark"] body h2 { margin-bottom: 20px; }
html[data-app-theme="dark"] body h3 { margin-bottom: 16px; }
html[data-app-theme="dark"] body p { margin-bottom: 12px; }

html[data-app-theme="dark"] body .btn-ghost,
html[data-app-theme="dark"] body .btn-primary,
html[data-app-theme="dark"] body button[class*="btn"] {
  transition: background-color 120ms ease, transform 120ms ease, border-color 120ms ease;
}

html[data-app-theme="dark"] body .btn-ghost:active,
html[data-app-theme="dark"] body .btn-primary:active,
html[data-app-theme="dark"] body button[class*="btn"]:active {
  transform: scale(0.98);
}

html[data-app-theme="dark"] body .skeleton,
html[data-app-theme="dark"] body [class*="skeleton"],
html[data-app-theme="dark"] body [class*="placeholder"][class*="loading"] {
  background: #1F2121 !important;
  background-image: linear-gradient(90deg, #1F2121 0%, #262828 50%, #1F2121 100%) !important;
  background-size: 200% 100% !important;
}

html[data-app-theme="dark"] body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html[data-app-theme="dark"] body *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html[data-app-theme="dark"] body *::-webkit-scrollbar-track {
  background: transparent;
}

html[data-app-theme="dark"] body *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

html[data-app-theme="dark"] body *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Line 415: .composer-send:hover { background: #fff } - fix to dark */

html[data-app-theme="dark"] body .composer-send:hover {
  background: #E5E5E5;
  color: #1F2121;
}

/* APM refresh button white hover */
html[data-app-theme="dark"] body .apm-refresh-btn:hover {
  background: #2A2C2C;
  color: #E5E5E5;
}

/* kpi-pill white hover */

html[data-app-theme="dark"] body .kpi-pill:hover {
  background: #2A2C2C;
  border-color: rgba(33, 150, 243, 0.45);
}

/* kpi-minimize white hover */
html[data-app-theme="dark"] body .kpi-minimize:hover {
  background: #2A2C2C !important;
  border-color: rgba(33, 150, 243, 0.45) !important;
  color: #2196F3 !important;
}

html[data-app-theme="dark"] body .toggle-switch .toggle-track {
  background: #2A2A2A;
}
html[data-app-theme="dark"] body .toggle-switch input:checked + .toggle-track {
  background: #2196F3;
}

/* Status pills - Automations */

html[data-app-theme="dark"] body .gl-cn-header {
  background: transparent;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* mt-switch-opt light gray bg: fix for topnav segment */
html[data-app-theme="dark"] body .mt-switch-opt {
  background: rgba(255, 255, 255, 0.06);
  color: #B8B8B8;
}
html[data-app-theme="dark"] body .mt-switch-opt.is-active {
  background: rgba(33, 150, 243, 0.22);
  color: #E5E5E5;
}

.cl-thinking-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--brand-blue-pure);
  flex-shrink: 0;
}

.cl-thinking-spinner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Done state: spinner stops, accent turns green */

/* Alias: cl-spin -> identical to tot-spin */

html body .ai-thinking.claude-thinking .claude-stream:not(:empty) {
  display: block;
  min-height: 36px;
}

html body .ai-messages {
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
}

.claude-stream .ai-thinking:empty, .claude-stream > div:empty:not(.cl-thinking-header) {
  display: none;
}

/* The .ai-thinking element that holds the legacy skeleton: hide it entirely
   while the new claude-thinking renderer is in control. The _claudeInit()
   function adds .claude-thinking to the wrapper; use that as the signal. */
.claude-thinking .ai-thinking {
  display: none;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

/* === v40.5bc Issue B + C: Dock composer flush above keyboard, no void ===
   The mpolishStartComposerKb() JS uses translateY to lift the composer,
   but that competes with the fixed bottom calc. Replace the transform
   approach with a pure CSS variable approach using --kb-offset which
   _startAskKbTracking() already sets correctly.

   When body.kb-open: override the composer bottom to be exactly 0 so it
   sits flush against the visual viewport bottom (keyboard top edge).
   The --kb-offset var is already baked into the base bottom calc via the
   FIX 2 block at ~line 14608. This just ensures kb-open state wins. */
/* [moved to mobile-v2.css v41.58k — was L24347-L24372 @media (max-width: 820px)] */

.cl-thinking-spinner {
  will-change: transform;
  transform: translateZ(0);
}

/* Promote messages container to its own layer to reduce repaints during
   streaming token appends. */
.ai-messages {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Containment on each message bubble: adding a token to one bubble does
   not trigger reflow on sibling bubbles. */
.msg-bubble {
  contain: layout style;
}

/* Reduce: cl-thinking-header display */

/* Reduce: rc-input placeholder color - no !important needed in normal flow */
html body .rich-composer .rc-input:empty::before {
  color: #7a7a79;
  pointer-events: none;
}

/* === v40.5bc: Note on iOS form-assistant bar kill ===
   Pure PWA has no official API to remove iOS Safari's form-assistant bar
   (the up/down/checkmark row). The contenteditable approach (using div.rc-input
   instead of textarea) is the ONLY reliable method because iOS only shows the
   form-assistant bar for <input>/<textarea> elements, not for contenteditable.
   Alternative (fallback): readonly other inputs on focus - see app.js.
   Do NOT attempt CSS-only removal; there is no such API (as of iOS 18).
   Future engineers: this is intentional architecture, not a bug. */

/* Placeholder for empty contenteditable (global, not media-query scoped) */
.rc-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(234, 235, 236, 0.5);
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}

/* Make the parent .rc-textarea wrapper position: relative so placeholder is positioned */
.rich-composer .rc-input {
  position: relative;
  outline: none;
  min-height: 24px;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  /* Override textarea-specific reset rules */
  border: 0;
  resize: none;
  background: transparent;
}

/* Dark theme contenteditable text color */
html body .rich-composer .rc-input,
html body .ai-view .rich-composer .rc-input {
  color: var(--gl-chat-text, #C5C5C4);
  caret-color: var(--gl-chat-text, #C5C5C4);
}

html body .rich-composer .rc-input:empty::before,
html body .ai-view .rich-composer .rc-input:empty::before {
  color: #7a7a79;
}

/* Mobile-specific: match rc-textarea mobile font + height */
/* v41.58h: component:ai-view block L25880-L25890 moved to mobile-v2.css */

html body .ai-thinking.claude-thinking {
  border-bottom: none;
  border: none;
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: 0;
}

/* The legacy ai-thinking-text + plex-think spinner inside claude-thinking
   are hidden by _claudeInit() via inline style, but belt-and-suspenders: */
html body .ai-thinking.claude-thinking > .ai-thinking-text,
html body .ai-thinking.claude-thinking > .plex-think,
html body .ai-thinking.claude-thinking > .msg-thinking-plex {
  display: none;
}

/* Desktop in-thread: wrap carries solid background */
html body.route-ask.ai-has-messages .ai-composer-wrap {
  background: var(--ask-bg, #191A1A);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile in-thread: override the gradient background set at ~line 30479 */

/* The inner card itself: always card surface, no glass when in-thread */
html body.ai-has-messages .ai-composer-wrap .rich-composer,
html body.ai-has-messages .ai-view .rich-composer {
  background: var(--bg-card, #1F2121);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile: page is the scroll surface, composer is position:fixed at bottom */
/* v41.58h: Ask block L27129-L27141 moved to mobile-v2.css Section 4b */

/* Desktop: inner scroll container */
/* === v40.5be Fix-1: Text MUST stop above composer (correct scroll container) ===
   The real scroll container on mobile is body/page scroll, not .ai-messages.
   .ai-messages itself needs a large padding-bottom so its last child never
   renders under the fixed composer. Use a LARGER value and ensure specificity
   beats all prior rules. Also upgrade the fade mask to be fully opaque
   at the bottom 30px so any stray text in that band is hidden. */
/* v41.58h: Ask block L27156-L27177 moved to mobile-v2.css Section 4b */

/* Upgrade fade mask: fully solid #191A1A for bottom 40px so text is masked cleanly */

.rc-plus-wrap input[type="file"] {
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
  tab-index: -1;
}

/* v41.58h: Ask block L27191-L27243 moved to mobile-v2.css Section 4b */

/* === v40.5bf: queue button safety ===
   The .rc-queue-btn sat immediately left of .rc-send (both ~18px icons), so
   on mobile a fat-finger tap hit queue instead of send. The user thought
   send "did nothing", retyped, and ended up sending concatenated messages.
   Fix: hide the queue button on mobile entirely; on desktop only reveal it
   once at least one message is already staged (.rc-has-queue toggled in JS).
   That routes ~99% of taps to send. Shift+Enter still stages on desktop. */
html body .rc-send {
  touch-action: manipulation;
  min-width: 36px;
  min-height: 36px;
}
/* v41.58g: rc-send mobile block removed - owned by mobile-v2.css */

/* === v40.5bg bleed-fix v2 - iOS Chrome safe ===
   v40.5bf relied on env(safe-area-inset-bottom) which is 0 in iOS Chrome
   (vs ~34px in iOS Safari). Result: fade mask + bubble padding anchored to
   the wrong y-coord, and content scrolled under the composer.

   v40.5bg measures the composer's actual bounding rect in JS and exposes
   --composer-top-px (top edge of composer in viewport coords) plus
   --composer-bottom-gap-px (gap between composer bottom and viewport bottom
   when the iOS Chrome URL bar covers it). Mask and bubble padding now
   anchor to those measured values, so the layout is correct regardless of
   which iOS browser the user is in. */



/* No redundant padding on the container, the last-child reservation
   already gives the bubble room above the composer. The ::after
   fade mask handles visual fade. */
/* Only reserve composer space on mobile (where composer is position:fixed).
   On desktop the composer is sticky inside .ai-view, so no reservation needed. */
@media (max-width: 820px) {
  body.route-ask.ai-has-messages, body.route-ask.ai-has-messages section#main, body.route-ask.ai-has-messages .ai-view {
    padding-bottom: calc(var(--composer-h, 140px) + var(--safe-bottom-real, 0px) + 8px);
  }
}

/* Hard fade mask: pinned ABOVE the composer using the MEASURED composer
   top edge (--composer-top-px), not a calc-from-bottom. This is the only
   reliable anchor in iOS Chrome where env(safe-area-inset-bottom) is 0
   but visualViewport differs from window.innerHeight. The mask sits in
   the 80px immediately above the composer's top edge and fades content
   into the dark background so any stray text bleeding into that band
   disappears visually.

   Implementation: use position: fixed with top: var(--composer-top-px)
   and a NEGATIVE translateY of the mask height. That way the mask's
   bottom edge exactly meets the composer's top edge regardless of any
   browser chrome offset. */
html body.route-ask.ai-has-messages::after {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--composer-top-px, calc(100dvh - 140px));
  height: 80px;
  transform: translateY(-80px);
  background: linear-gradient(180deg,
    rgba(25, 26, 26, 0) 0%,
    rgba(25, 26, 26, 0.55) 35%,
    rgba(25, 26, 26, 0.92) 75%,
    rgba(25, 26, 26, 1) 100%);
  pointer-events: none;
  z-index: 4;
  will-change: top, transform;
}

/* Hard backdrop BEHIND the composer (covers any iOS Chrome URL-bar gap).
   The composer itself is bg #191A1A but if iOS Chrome's URL bar collapses
   mid-scroll there's a momentary gap below the composer. This solid layer
   sits behind the composer and extends past the viewport bottom so the
   gap is always filled. */
html body.route-ask.ai-has-messages::before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--safe-bottom-real, 0px) - 40px);
  height: calc(var(--composer-h, 140px) + var(--safe-bottom-real, 0px) + 120px);
  background: var(--ask-bg, #191A1A);
  pointer-events: none;
  z-index: 2; /* below composer (z:5) and mask (z:4) */
}

/* Ensure composer itself sits cleanly above both layers */
html body section#main .ai-view .ai-composer-wrap,
html body .ai-view .ai-composer-wrap,
html body .ai-composer-wrap {
  z-index: 5;
}

/* ============================================================
   === v40.5bi chip-borders ===
   Mobile top nav: kill the white-ish border that reads as a stray
   left edge on the Totaly avatar chip (FIX 4) and the rectangular
   box border around the Chat / Dashboards pill switch (FIX 5).
   Real class names: .mt-avatar-chip (left "totaly" chip) and
   .mt-switch (the two-state Chat/Dashboards pill container).
   These override the rgba(255,255,255,0.10) borders set earlier
   under nav.mobile-topnav.mobile-topnav--v1940.
   ============================================================ */

/* FIX 4: Totaly avatar chip (top-left), remove the ring border so no
   white edge bleeds on the left side. Keep the round photo mask.
   Specificity must match the earlier rule that sets the border:
   html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip
   so we mirror that prefix and add a trailing :not(#__x__) to win on order. */

/* FIX 5: Chat / Dashboards pill, remove the outer rectangle (box border)
   around the capsule so it reads as a clean rounded pill, not a boxed pair. */

/* Keep the inner pill (and active segment) fully rounded. */

/* ============================================================
   === v40.5bi tenant-logo ===
   Mobile empty-state Ask page: restore the centered brand mark,
   make it round, and source it from the tenant's uploaded logo
   (--tenant-logo-url set by glApplyLogo). Desktop is untouched.
   Only activates once html.has-tenant-logo is present (i.e. the
   tenant uploaded a logo via Settings). With no tenant logo the
   existing mobile hide rules stand (current behavior). (FIX 7)
   ============================================================ */
/* v41.58h: Ask block L27370-L27401 moved to mobile-v2.css Section 4b */

/* ============================================================================
   === v40.5bj: thinking block redesigned to match Perplexity pattern ========
   Real DOM (from claude_stream.js _claudeRenderThinking):
  .ai-thinking.claude-thinking > .claude-stream > .cl-block.cl-thinking
  > button.cl-head (.cl-symbol + .cl-label + .cl-chev)
  > .cl-body.cl-prose > .cl-prose-text
   Strip the container card + colored active box, kill the ">_" terminal
   prompt, drop serif-italic thinking text, and present a single thin
   vertical rail + clean step row exactly like Perplexity. CSS-only:
   the JS already owns click-to-collapse + auto-collapse-on-done.
   Efficiency: scoped to .claude-thinking, one override block, no new
   keyframes (reuses cl-spin / tot-spin-y already defined).
   ============================================================================ */

/* 1. Kill the container card + colored active box. No bg, no border, no
   radius on the block at any state. Specificity beats base .cl-block; no needed. */
html body .claude-thinking .cl-block.cl-thinking,
html body .claude-thinking .cl-block.cl-thinking.is-active,
html body .claude-thinking .cl-block.cl-thinking.cl-step--active,
html body .claude-thinking .cl-block.cl-thinking.is-done {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 4px 0 4px 2px;
  margin: 2px 0;
}

/* 2. Kill the ">_" terminal prompt pseudo-element entirely (was unprofessional). */
html body .cl-block.cl-thinking.cl-step--active .cl-head::before,
html body .cl-block.cl-thinking.is-active .cl-head::before,
html body .claude-thinking .cl-block.cl-thinking.cl-step--active .cl-head::before,
html body .claude-thinking .cl-block.cl-thinking .cl-head::before {
  content: none;
  display: none;
}

html body .claude-thinking .cl-thinking .cl-head {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 10px 0;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #B8B8B8;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
html body .claude-thinking .cl-thinking .cl-head:hover {
  background: transparent;
  color: #E5E5E5;
}

html body .claude-thinking .cl-block.cl-thinking.is-active .cl-head,
html body .claude-thinking .cl-block.cl-thinking.is-active .cl-label,
html body .claude-thinking .cl-block.cl-thinking.cl-step--active .cl-label {
  color: #2196F3;
  -webkit-text-fill-color: #2196F3;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  animation: none;
  font-weight: 600;
}
/* Completed (done) header label fades to muted grey. */
html body .claude-thinking .cl-block.cl-thinking.is-done .cl-label {
  color: #8A8A8A;
  font-weight: 500;
}

/* 3c. Spinner ring (legacy CSS ring, not SVG). */

/* 3d. Chevron: muted. */
html body .claude-thinking .cl-thinking .cl-chev {
  color: #2196F3;
  opacity: 0.7;
}

/* 4. Body = thin 1px vertical rail + 16px indent. */
html body .claude-thinking .cl-thinking .cl-body.cl-prose {
  margin: 0 0 0 6px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  background: transparent;
}

/* 4a. Thinking prose text. */
html body .claude-thinking .cl-thinking .cl-prose-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  color: #8A8A8A;
}
/* 4b. Live streaming: slightly brighter. */
html body .claude-thinking .cl-block.cl-thinking.is-active .cl-prose-text {
  color: #B8B8B8;
}

/* 5. Divider below finished thought block. */
html body .claude-thinking .cl-block.cl-thinking.is-done {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

/* B1. Perplexity-style swing easing keyframe.
   Accelerates through the first 60% (0->280deg), decelerates through
   85% (280->340deg), then snaps to close (340->360deg). Net effect:
   a breathing "slow down then quick swing" rhythm. */

/* ── Fix 2: Composer-to-keyboard gap (iOS Chrome kb-open) ──────────────────
   When keyboard is open the visualViewport bottom sits flush against the
   keyboard top. Safe-area-inset-bottom does not apply behind a keyboard.
   Forcing --safe-bottom-real: 0px here (via JS too) eliminates the ~80px
   void between composer bottom and keyboard top. ──────────────────── */

/* ── Fix 4: Thinking block starts collapsed by default ────────────────────
   JS now sets state.expanded = false on first render, so there is no
   is-expanded class initially. The cl-body hide/show is handled by the
   existing rule (.cl-block.is-expanded .cl-body { display: block }).
   These rules reinforce the collapsed chevron state and ensure clean
   collapsed rendering during streaming AND after done. ──────────────────── */

html body .claude-thinking .cl-block.cl-thinking:not(.is-expanded) .cl-body,
html body .claude-thinking .cl-block.cl-thinking:not(.is-expanded) .cl-body.cl-prose {
  display: none;
  max-height: 0;
  overflow: hidden;
}
html body .claude-thinking .cl-block.cl-thinking:not(.is-expanded) .cl-chev {
  transform: rotate(-90deg);
}
html body .claude-thinking .cl-block.cl-thinking.is-expanded .cl-body,
html body .claude-thinking .cl-block.cl-thinking.is-expanded .cl-body.cl-prose {
  display: block;
  max-height: 240px;
  overflow-y: auto;
}
html body .claude-thinking .cl-block.cl-thinking.is-expanded .cl-chev {
  transform: rotate(0deg);
}

/* ── Fix 5: Follow-up composer mask / ghost outline ────────────────────
   In body.ai-has-messages the ::before backdrop and ::after fade from
   v40.5bg bleed-fix appear on top of the in-thread composer. They are
   scoped to body.route-ask.ai-has-messages but the ::before/::after on
   html body.route-ask.ai-has-messages still show. Suppress both entirely
   so the in-thread composer is a clean dark card with no fade gradient
   or solid backdrop overlay around it. ──────────────────── */
body.ai-has-messages .ai-composer-wrap::before,
body.ai-has-messages .ai-composer-wrap::after { display: none; }

/* ── Fix 6: Enterprise CSS consolidation ────────────────────
   Deduplicate cl-thinking-spinner SVG color + animation rules that appear
   separately in v40.5bj and v40.5bk. Single authoritative declaration below;
   the per-block rules above are tombstoned. ────────────────────

   v40.5bk spinner rules (A1-A4, B1-B3) remain the canonical source for
   the Totaly hex SVG + swing animation. The v40.5bj fallback spinner ring
   (.cl-spinner with border-color) is superseded by the SVG approach.
   Consolidate here as a clean override to avoid duplication growing further. */

/* Consolidated SVG spinner: three-dot typing-indicator pulse, brand blue, 14px box. */
html body .cl-thinking-spinner svg circle {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: totaly-think-pulse 1.4s ease-in-out infinite;
}
html body .cl-thinking-spinner svg circle:nth-of-type(2) {
  animation-delay: 0.18s;
}
html body .cl-thinking-spinner svg circle:nth-of-type(3) {
  animation-delay: 0.36s;
}
html body .cl-thinking-spinner svg {
  color: #2196F3;
  width: 14px;
  height: 14px;
}
/* Done state: dots settle solid, no pulse */
@keyframes totaly-think-pulse {
  0%, 70%, 100% { opacity: 0.28; transform: scale(0.72); }
  35%           { opacity: 1;    transform: scale(1); }
}

/* ============================================================================
   === v40.5bo: composer + thinking, FINAL ===================================
   Three architectural fixes. NO inline fights.
   ============================================================================

   FIX 1 (thinking): Pre-spinner deleted. ONE .cl-block.cl-thinking created
   synchronously by _claudeInit(). Shows "Thinking..." immediately on submit.

   FIX 2 (composer): JS sets --kb-inset CSS var on :root = keyboard height.
   Composer uses bottom: var(--kb-inset, 0px). No transform, no.

   FIX 3 ( audit): Dead duplicate composer+thinking blocks removed
   above. Rules below use specificity only where possible.
   ============================================================================ */

/* ── Composer: bottom-anchored via CSS var (no transform, no) ── */
/* [moved to mobile-v2.css v41.58k — was L24857-L24880 @media (max-width: 767px)] */

/* ── Thinking block: single block, cl-head always visible ─────────────────── */
/* cl-head must always display regardless of expanded state.
   Specificity: html body > .claude-thinking > .cl-block.cl-thinking > .cl-head */
html body .claude-thinking .cl-block.cl-thinking > .cl-head {
  display: flex;
  visibility: visible;
  opacity: 1;
  min-height: 32px;
  pointer-events: auto;
}
/* Ensure the block itself is never height-collapsed. */
html body .claude-thinking .cl-block.cl-thinking {
  overflow: visible;
}
/* ai-thinking container must be visible when claude-stream has content. */
html body .ai-thinking.claude-thinking:not([hidden]) {
  display: block;
  visibility: visible;
}

/* ============================================================================
   === v40.5bp: chip border purge + KPI MTD + thread composer fix =============
   Three user-reported bugs fixed. NO !important where avoidable.
   ============================================================================

   FIX 1 - Remove border/box from topbar-right status chips on Ask route.
   The ETL pill (#etl-pill), brain pill (#brain-pill), and clock pill
   (#sync-indicator) in .status-row were showing dark-glass borders and
   solid backgrounds, making them look "boxed". On the Ask page the topbar
   is transparent, so these chips should match: no border, no background,
   just icon + text.

   FIX 2 - KPI snapshot now includes Sales MTD count so the AI can answer
   "how many sales this month?" with a real DB count, not a 30-day estimate.
   (CSS change: none - the fix is in kpi.py. Documented here for audit trail.)

   FIX 3 - Desktop thread composer re-appear fix.
   Root cause: html body.route-ask.ai-has-messages .ai-view has
   overflow:hidden !important (line ~26803) which prevents position:sticky
   from functioning. The composer was present in DOM but invisible because
   the sticky element had no valid scroll ancestor to anchor to.
   Fix: keep the flex layout but ensure the composer always renders at bottom
   of the flex column by removing overflow:hidden from the ai-view and
   letting the messages div control its own scroll.
   ============================================================================ */

/* ── FIX 1: Strip border + background from topbar-right status chips ──────── */

/* On the Ask route the topbar is transparent glass - the status chips should
   be borderless text+icon pairs, not boxed dark-glass pills. */

/* Keep the same on all-routes for consistency - the topbar is always
   transparent glass now, so bordered pills always look "boxed". */
html body header.topbar .topbar-right .status-row > .pill,
html body header.topbar .topbar-right .status-row > .pill.pill--glass,
html body header.topbar .topbar-right .status-row > #etl-pill,
html body header.topbar .topbar-right .status-row > #brain-pill,
html body header.topbar .topbar-right .status-row > #sync-indicator,
html body header.topbar .topbar-right .status-row > .pill-clock,
html body.route-ask header.topbar .topbar-right .status-row > .pill,
html body.route-ask header.topbar .topbar-right .status-row > .pill.pill--glass,
html body.route-ask header.topbar .topbar-right .status-row > #etl-pill,
html body.route-ask header.topbar .topbar-right .status-row > #brain-pill,
html body.route-ask header.topbar .topbar-right .status-row > #sync-indicator,
html body.route-ask header.topbar .topbar-right .status-row > .pill-clock {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── FIX 3: Desktop thread composer visibility ──────────────────── */

/* Root cause: the ai-view in has-messages thread mode has overflow:hidden
   which blocks position:sticky on the child composer-wrap.
   Fix: use overflow:clip (clips visually but does NOT create a scroll ctx)
   so sticky still works. Applies only on desktop (min-width:821px). */
/* === END v40.5bp ===
   !important purge summary:
   - Baseline (v40.5bo): 4,662 occurrences across 3,668 lines
   - After purge (v40.5bp): 3,667 occurrences across 2,719 lines
   - Removed: 995 occurrences (-21.3%)
   - Batches: 6 batches, all verified clean by Playwright CSS harness
   - Harness covers: public login page (desktop 1440x900 + mobile 390x844)
   - Auth-only routes not testable (Supabase headless auth limitation)
   - Conservative 21% reduction to stay safe on untested authenticated routes
*/

/* ============================================================================
   === v40.5bq: harness expansion + deep CSS/JS/Python cleanup ================
   Authenticated CSS regression harness (7 routes, 49 selectors).
   Phase B: !important purge (3,668 -> 2,012 occurrences, -45.2%).
   Phase C: superseded blocks deleted (116 lines removed).
   Phase D: dead keyframes removed (2x duplicate + 2x unused).
   Total: 32,430 -> 32,315 CSS lines.
   ============================================================================ */

.route-view {
  max-width: 760px;
  margin: 0 auto;

  padding: 8px 14px 120px;
  color: var(--border-card-light);
}

.route-hdr {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(25, 26, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 6px 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--surface-charcoal);
}

.route-hdr-row {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  align-items: stretch;
}
/* Row 1: period + My crew + All reps = 3 equal cols */




.route-hdr-cell {
  width: 100% !important;
  min-height: 44px !important;
  justify-content: center !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
}
.route-gps-btn,
.route-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  color: var(--fg-muted-warm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.route-gps-btn svg,
.route-refresh-btn svg { color: var(--brand-blue-pure); }

/* v41.58h: misc block L25160-L25174 moved to mobile-v2.css */

.route-hdr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.route-stat {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 999px;
  padding: 8px 6px;
  text-align: center;
}
.route-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--border-card-light);
  line-height: 1.1;
}
.route-stat-lbl {
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* List + cards */
.route-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.route-stop {
  background: #1C1B19;
  border: 1px solid var(--border-strong-warmer);
  border-radius: 12px;
  padding: 14px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.route-stop.is-visited {
  opacity: 0.55;
  background: #1A1B1B;
  border-color: var(--accent-primary-soft-35);
}



.route-stop.is-visited:hover { opacity: 0.85; }

.route-stop.is-current {
  border-color: var(--brand-blue-pure);
  box-shadow:
    0 0 0 2px var(--accent-primary-soft-35),
    0 0 18px var(--accent-primary-soft-28);
  position: relative;
  animation: routeStopCurrentPulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  
}
/* Tiny "NOW" pill on the current stop - absolutely positioned in the corner. */


.route-stop.is-selected {
  border-color: var(--brand-blue-pure) !important;
  box-shadow:
    0 0 0 3px rgba(33, 150, 243, 0.45),
    0 0 20px rgba(33, 150, 243, 0.32);
  position: relative;
}


.route-stop-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.route-stop-num {
  width: 32px;
  height: 32px;
  background: var(--border-soft);
  color: rgba(234, 235, 236, 0.6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.route-stop-name {
  font-size: 15px;
  font-weight: 700;
  color: #ECEBE9;
  line-height: 1.2;
}
.route-stop-addr {
  font-size: 12px;
  color: #A0A09E;
  margin-top: 2px;
  line-height: 1.3;
}
.route-stop-val {
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #ECEBE9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.route-stack-chip {
  display: inline-block;
  background: var(--accent-primary-soft-15);
  color: var(--brand-blue-pure);
  border: 1px solid rgba(33, 150, 243, 0.4);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.route-stop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.route-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 6px;
  text-transform: uppercase;
}
.route-pill--hold {
  background: rgba(255, 167, 38, 0.12);
  color: #FFA726;
  border: 1px solid rgba(255, 167, 38, 0.35);
}
.route-pill--open {
  background: rgba(76, 175, 80, 0.12);
  color: #66BB6A;
  border: 1px solid rgba(76, 175, 80, 0.35);
}
.route-pill--mi {
  background: var(--surface-charcoal);
  color: var(--fg-muted-warm);
  border: 1px solid var(--border-strong-warm);
}

/* Deals (stacked) */
.route-deals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.route-deal {
  background: var(--surface-charcoal);
  border-radius: 8px;
  padding: 8px 10px;
}
.route-deal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.route-deal-svc {
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
}
.route-deal-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue-pure);
  white-space: nowrap;
}
.route-deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--fg-faint);
}
.route-deal-rep { color: var(--fg-muted-warm); }
.route-deal-notes {
  font-size: 12px;
  color: var(--fg-muted-warm);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-strong-warm);
  line-height: 1.4;
}
.route-deal-addons {
  font-size: 11px;
  color: var(--fg-faint);
  margin-top: 4px;
}

.route-cnote {
  background: var(--accent-primary-soft-08);
  border: 1px solid rgba(33, 150, 243, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-muted-warm);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Actions row (tap-to-call, tap-to-nav) */
.route-stop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.route-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}
.route-act--call {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border: 1px solid var(--brand-blue-pure);
}

.route-act--nav {
  background: var(--surface-charcoal);
  color: var(--border-card-light);
  border: 1px solid var(--border-strong-warm);
}


/* Status mark row */
.route-stop-mark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.route-mark {
  height: 38px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 10px;
  color: var(--fg-muted-warm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.route-mark--not_home:hover   { border-color: #FFA726; color: #FFA726; }

.route-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-faint);
  font-size: 13px;
}

.route-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 72px 24px 96px;
  min-height: 240px;
}
.route-loading-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--accent-primary-soft-18);
  border-top-color: var(--brand-blue-pure);
  animation: route-loading-spin 780ms linear infinite;
  will-change: transform;
}
.route-loading-label {
  font-size: 13px;
  color: var(--fg-faint-google);
  letter-spacing: 0.02em;
}
@keyframes route-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  
}



.rt-call {
  padding: 0;
}
.rt-call-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--overlay-w-04);
  gap: 12px;
}
.rt-call-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #E8EAED;
  letter-spacing: -0.005em;
}
.rt-call-header-sub {
  font-size: 12px;
  color: var(--fg-faint-google);
  letter-spacing: 0.01em;
}

.rt-call-rows {
  display: flex;
  flex-direction: column;
}
.rt-call-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--overlay-w-04);
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
}
.rt-call-row:hover {
  background: rgba(33, 150, 243, 0.05);
}
.rt-call-row:active {
  background: rgba(33, 150, 243, 0.09);
}

.rt-call-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rt-call-name {
  font-size: 14px;
  font-weight: 600;
  color: #E8EAED;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.rt-call-val {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #E8EAED;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}

.rt-call-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  flex: 0 0 auto;
}
.rt-call-pill--open {
  background: var(--accent-primary-soft-14);
  color: #7CBFFF;
}
.rt-call-pill--hold {
  background: rgba(229, 72, 77, 0.14);
  color: #F8909A;
}
.rt-call-pill--sold {
  background: rgba(30, 197, 143, 0.16);
  color: #7BE3B7;
}

.rt-call-aging {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #F8909A;
  background: rgba(229, 72, 77, 0.09);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.rt-call-line2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-faint-google);
  min-width: 0;
}
.rt-call-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7CBFFF;
  text-decoration: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: -6px;
  transition: background 120ms ease;
  flex: 0 0 auto;
}
.rt-call-phone:hover { background: var(--accent-primary-soft-08); }
.rt-call-phone--nolink { color: #E8EAED; cursor: default; }
.rt-call-phone--empty { color: #6E7075; font-style: normal; opacity: 0.75; cursor: default; }

.rt-call-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.rt-call-when {
  color: #6E7075;
  font-size: 11px;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.rt-call-attr {
  font-size: 11px;
  color: #7A7C80;
  letter-spacing: 0.01em;
  padding-top: 2px;
}

/* v41.58h: misc block L25685-L25691 moved to mobile-v2.css */

.rt-crm-sheet-loading-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--accent-primary-soft-18);
  border-top-color: var(--brand-blue-pure);
  animation: route-loading-spin 780ms linear infinite;
  margin: 32px auto;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .rt-crm-sheet-loading-spinner { animation-duration: 2200ms; }
}

.rt-crm-note-attr {
  font-size: 11.5px;
  color: #8A8C90;
  letter-spacing: 0.01em;
  padding: 2px 0 0;
  line-height: 1.4;
}

/* Mobile (phone) refinements */
/* v41.58h: misc block L25716-L25727 moved to mobile-v2.css */

/* Neutral ON HOLD: replace amber with restrained white-on-grey */
.route-pill--hold {
  background: var(--surface-charcoal);
  color: var(--border-card-light);
  border: 1px solid var(--border-strong-warm);
}
.route-mark--not_home:hover   { border-color: #4A4A4A; color: var(--border-card-light); }

/* Drop the side stripe entirely on deal cards */


/* Stop card: also drop side accents from status-tinted borders */

/* Period dropdown (Apple-style) */

.route-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  color: var(--border-card-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.route-period-btn svg:first-child { color: var(--brand-blue-pure); }


.route-period-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: rgba(31, 33, 33, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-alpha-50);
  padding: 6px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;

  max-height: min(70vh, 360px);
  overflow-y: auto;
}
.route-period-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.route-period-opt {
  display: block;
  width: 100%;
  text-align: left;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--border-card-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.route-period-opt:hover { background: var(--surface-charcoal); }
.route-period-opt.is-active { background: var(--brand-blue-pure); color: var(--fg-inverse); font-weight: 600; }

/* Leads tab badge */

/* v41.58h: misc block L25814-L25817 moved to mobile-v2.css */

/* 1) Collapse the redundant inline route links into the Views dropdown.
  Keep only: New chat | Views (dr-dd-wrapper) | Settings */
.gl-floating-pill > a.gfp-item[data-route="/dashboard"],
.gl-floating-pill > a.gfp-item[data-route="/ask"],
.gl-floating-pill > a.gfp-item[data-route="/automations"],
.gl-floating-pill > a.gfp-item[data-route="/divisions"],
.gl-floating-pill > a.gfp-item[data-route="/data-sources"],
.gl-floating-pill > a.gfp-item[data-route="/settings"] {
  display: none;
}

/* 2) Topnav pill now has breathing room from the page edge */
.gl-floating-pill,
.gl-floating-pill--topbar {
  margin-top: 14px;
}
.topbar,
.topbar--with-pill {
  padding-top: 18px;
}

/* 3) Apple-style Views dropdown menu polish */
.dr-dd-menu--pill,
.dr-dd-menu {
  background: rgba(31, 33, 33, 0.98) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--surface-charcoal) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px var(--shadow-alpha-55);
  padding: 8px !important;
  min-width: 220px;
}
.dr-dd-section-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--fg-faint);
  text-transform: uppercase;
  padding: 6px 10px 4px;
}
.dr-dd-divider {
  height: 1px;
  background: var(--surface-charcoal);
  margin: 6px 4px;
}
.dr-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--border-card-light);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s ease;
}
.dr-dd-item:hover { background: var(--surface-charcoal); }
.dr-dd-item-icon { display: inline-flex; width: 18px; height: 18px; color: var(--fg-muted-warm); }

/* 4) Share kebab (new) - appended to the pill at runtime */
.gfp-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-muted-warm);
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.gfp-kebab:hover { background: var(--overlay-w-05); color: var(--border-card-light); }
.gfp-kebab[aria-expanded="true"] { background: var(--accent-primary-soft-12); color: var(--brand-blue-pure); }
.gfp-kebab-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: rgba(31, 33, 33, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--surface-charcoal);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow-alpha-55);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.gfp-kebab-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.gfp-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--border-card-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.gfp-kebab-item:hover { background: var(--surface-charcoal); }
.gfp-kebab-item svg { color: var(--brand-blue-pure); flex-shrink: 0; }
.gfp-kebab-item-meta { font-size: 11px; color: var(--fg-faint); font-weight: 400; }

/* 5) Tighten chat history sidebar spacing
  Reduce vertical padding on every chat history row + section margin */
.chat-history-list { padding: 4px 6px !important; }
.sidebar-quick-item { padding: 7px 10px !important; }

/* 6) Bring back the centered background logo watermark on AI/chat view (desktop).
  Previously: hidden by .ai-view .ai-bg-mark { display: none; } at line 1755.
  Restore with a fixed-position, low-opacity mark. */
@media (min-width: 769px) {
  .ai-view .ai-bg-mark {
    display: block !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(48vw, 520px);
    aspect-ratio: 760 / 193;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
  }
  .ai-view .ai-bg-mark .ai-bg-mark__img {
    position: absolute;
    inset: 0;
    background-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=v42.6.28-p-mark');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    filter: none;
  }
  /* Hide the watermark once a chat is in progress (avoid visual noise) */
  body.ai-has-messages .ai-view .ai-bg-mark { display: none !important; }
}

/* v41.58h: component:mobile-topnav block L27337-L27497 moved to mobile-v2.css */

/* 1. STEEL BLUE TOKEN (calmer than #2196F3) for accents, KPI chips,
  Leads-count badges, ON HOLD pill (kept neutral grey), etc.
  Reserve #2196F3 ONLY for primary CTAs: Ask button, active Views chip,
  Navigate phone-tap CTA, primary form submit. */

/* Leads-tab count badge - was bright #2196F3 → muted steel blue */

/* Period dropdown chip - keep grey, no blue */
.route-period-btn {
  background: var(--surface-charcoal) !important;
  border: 1px solid var(--border-strong-warm) !important;
  color: var(--border-card-light) !important;
}

/* "Use my GPS" + "Refresh" header buttons → grey not blue, no wrap */



/* v41.58h: misc block L25999-L26018 moved to mobile-v2.css */
/* v41.58h: misc block L26019-L26024 moved to mobile-v2.css */

.route-stop-num {
  background: #3A3A3C !important;
  color: var(--border-card-light) !important;
}

/* Per-deal $value text on deal cards → less screaming. Keep #E5E5E5 grey
   for the inline values; reserve blue only for the primary header dollar. */

/* 2. SCROLL BLEED: push content below the topnav so it never starts
  under the chips at scrollTop=0. */
/* v41.58h: route:route block L26036-L26115 moved to mobile-v2.css */

/* 3. RECAST "ON HOLD" - the current chip has a faint blue underline strip
  bleeding from a stale rule. Force fully neutral. */


/* 4. ACTIVE TODAY tab pill - was screaming #2196F3; muted slightly */

/* 5. PHONE-NUMBER CTA (the big primary tap target) - KEEP bright blue
  because it's the most important action on the card */

/* 6. Logo watermark - make it visible on mobile too, low opacity */
/* v41.58h: Ask block L28963-L28969 moved to mobile-v2.css Section 4b */
/* Tab explainer (defines Lead vs Route in-context) */

/* 7. TWO-TAB LAYOUT (Route | Leads) - wider, equal-width chips */

/* 8. FIELDROUTES-STYLE TIMELINE (Route tab) */
.rt-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rt-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.rt-leg {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 16px 8px 16px;
  margin-left: 30px;
  font-size: 12px;
  color: var(--fg-faint);
  border-left: 2px dashed var(--border-strong-warm);
}
.rt-leg--start {
  color: #5B7CB8;
  font-weight: 600;
  border-left-color: #5B7CB8;
}
.rt-leg-mi { color: var(--border-card-light); font-weight: 600; }
.rt-leg-dot { color: #5A5A5A; }
.rt-leg-min { color: var(--fg-muted-warm); }
.rt-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: stretch;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong-warm);
  border-radius: 12px;
  margin: 0 0 8px 0;
}

.rt-row.is-visited .rt-card,
.rt-compact-row.is-visited {
  opacity: 0.5;
  background: #1A1B1B;
  border-color: rgba(16, 185, 129, 0.35);
}
.rt-row.is-visited .rt-num,
.rt-compact-row.is-visited .rt-compact-num {
  background: #10B981 !important;
  color: var(--fg-inverse) !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
.rt-row.is-visited .rt-name,
.rt-row.is-visited .rt-val,
.rt-compact-row.is-visited .rt-compact-name,
.rt-compact-row.is-visited .rt-compact-val { color: #9CA3AF !important; }
.rt-row.is-visited .rt-card:hover { opacity: 0.85; }

/* Current = the stop the rep is on right now. Blue peripheral halo. */
.rt-row.is-current .rt-card,
.rt-compact-row.is-current {
  border-color: var(--brand-blue-pure) !important;
  box-shadow:
    0 0 0 2px var(--accent-primary-soft-35),
    0 0 18px var(--accent-primary-soft-28);
  animation: rtRowCurrentPulse 2.4s ease-in-out infinite;
}
.rt-row.is-current .rt-num,
.rt-compact-row.is-current .rt-compact-num {
  background: var(--brand-blue-pure) !important;
  color: var(--fg-inverse) !important;
  border: none !important;
  box-shadow: 0 0 0 3px var(--accent-primary-soft-28) !important;
}
@keyframes rtRowCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35), 0 0 18px rgba(33, 150, 243, 0.28); }
  50%      { box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.55), 0 0 24px rgba(33, 150, 243, 0.40); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-row.is-current .rt-card,
  .rt-compact-row.is-current { animation: none; }
}
/* Small NOW pill on current stops. */
.rt-row.is-current .rt-card::after,
.rt-compact-row.is-current::after {
  content: 'NOW';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--fg-inverse);
  background: var(--brand-blue-pure);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}
.rt-row.is-current { position: relative; }
.rt-row.is-current .rt-card { position: relative; }
.rt-compact-row.is-current { position: relative; }

.rt-row.is-selected .rt-card,
.rt-compact-row.is-selected {
  border-color: var(--brand-blue-pure) !important;
  box-shadow:
    0 0 0 3px rgba(33, 150, 243, 0.45),
    0 0 20px rgba(33, 150, 243, 0.32) !important;
}
.rt-row.is-selected .rt-num,
.rt-compact-row.is-selected .rt-compact-num {
  background: var(--brand-blue-pure) !important;
  color: var(--fg-inverse) !important;
  border: none !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.30) !important;
}
.rt-row.is-selected { position: relative; }
.rt-row.is-selected .rt-card { position: relative; }
.rt-compact-row.is-selected { position: relative; }

.rt-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
  border: 1px solid rgba(33, 150, 243,0.30);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rt-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--border-card-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-val { color: var(--border-card-light); font-weight: 600; font-size: 14px; flex-shrink: 0; }
.rt-addr {
  font-size: 12px;
  color: var(--fg-muted-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Force transparent - wildcard [class*="tag"] selector elsewhere paints this blue */
.rt-tags,
.rt-card .rt-tags,
html body .rt-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.rt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rt-act {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-charcoal);
  border: 1px solid var(--border-strong-warm);
  color: var(--border-card-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .12s, transform .08s;
}
.rt-act:hover { background: var(--fg-primary-light); transform: translateY(-1px); }
.rt-act--gmaps { background: var(--fg-inverse); border-color: var(--fg-inverse); }
.rt-act--gmaps:hover { background: #F2F2F2; }

/* Timeline totals row */
.rt-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong-warm);
  border-radius: 12px;
}
.rt-total { text-align: center; }
.rt-total-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--border-card-light);
  letter-spacing: 0.01em;
}
.rt-unit { font-size: 11px; color: var(--fg-faint); margin-left: 2px; font-weight: 500; }
.rt-total-lbl {
  font-size: 10px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* 9. LEADS PAGINATION */
.route-leads-summary {
  font-size: 12px;
  color: var(--fg-muted-warm);
  padding: 8px 4px 12px 4px;
  letter-spacing: 0.01em;
}
.route-leads-summary strong { color: var(--border-card-light); font-weight: 600; }
.route-leads-more {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--surface-charcoal);
  border: 1px solid var(--border-strong-warm);
  border-radius: 12px;
  color: var(--border-card-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}

.route-leads-more-count { color: var(--fg-faint); font-weight: 500; margin-left: 6px; }
.route-leads-end {
  text-align: center;
  padding: 16px;
  color: var(--fg-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* View switcher bar (replaces 2-tab) */
.route-viewbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  flex-wrap: wrap;

  width: 100%;
}

.route-viewbar, .home-tabs-row {
  margin-top: 28px;
}
/* v41.58h: misc block L26342-L26346 moved to mobile-v2.css */

.route-viewswitch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--fg-primary-light);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-sizing: border-box;
}
.route-viewbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  background: transparent;
  border: none;
  color: var(--fg-muted-warm);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
}
.route-viewbtn:hover { color: var(--border-card-light); background: var(--border-soft); }
.route-viewbtn.is-active {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  box-shadow: none;
}
.route-viewbtn svg { opacity: 0.85; flex-shrink: 0; }

.route-viewbtn.route-ai-btn {
  color: var(--brand-blue-pure);
  font-weight: 600;
  border: none;
  background: transparent;
  margin-left: 0;
  padding: 7px 4px;
  border-radius: 999px;
  font-size: 12px;
}
.route-viewbtn.route-ai-btn svg { color: var(--brand-blue-pure); opacity: 0.95; }
.route-viewbtn.route-ai-btn:hover {
  background: var(--accent-primary-soft-10);
  color: var(--brand-blue-pure);
  transform: none;
  box-shadow: none;
}
.route-viewbtn.route-ai-btn.is-active {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  box-shadow: none;
}

/* "More" chip (the ⋯ tap-for-details one) */
.route-pill--more {
  background: var(--border-soft) !important;
  color: var(--fg-faint) !important;
  border: 1px solid var(--fg-primary-light) !important;
  cursor: pointer;
  padding: 0 8px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  transition: background 100ms ease, color 100ms ease;
}


.rt-row[data-stop], .rt-compact-row[data-stop] { cursor: pointer; }

/* Compact view: FieldRoutes-style tight rows */
.rt-compact-row {
  display: grid;
  grid-template-columns: 28px 64px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface-charcoal);
  transition: background 100ms ease;
  min-height: 40px;
}
.rt-compact-row:last-child { border-bottom: none; }
.rt-compact-row:hover { background: var(--overlay-w-02); }
.rt-compact-row.is-hold { border-left: 3px solid #B8804F; }
.rt-compact-num {
  font-weight: 700;
  font-size: 13px;
  color: #5B7CB8;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rt-compact-drive {
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--surface-charcoal);
  padding-right: 10px;
}
.rt-compact-drive-min {
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
  line-height: 1.1;
}
.rt-compact-drive-mi {
  font-size: 10px;
  color: #A0A09E;
  letter-spacing: 0.02em;
}
.rt-compact-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rt-compact-nametext {
  font-size: 14px;
  font-weight: 500;
  color: #ECEBE9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-compact-hold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #B8804F;
  color: #1A1A1A;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}
.rt-compact-val {
  font-size: 13px;
  font-weight: 600;
  color: #ECEBE9;
  font-variant-numeric: tabular-nums;
}
.rt-compact-actions {
  display: inline-flex;
  gap: 4px;
}
.rt-compact-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--fg-primary-light);
  color: var(--fg-muted-warm);
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.rt-compact-act:hover {
  background: var(--surface-charcoal);
  color: var(--border-card-light);
  border-color: #5B7CB8;
}

/* v41.58h: misc block L26523-L26532 moved to mobile-v2.css */

/* AI Optimize panel */
.rt-ai {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--surface-charcoal-deep) 100%);
  border: 1px solid var(--fg-primary-light);
  border-radius: 14px;
  overflow: hidden;
}
.rt-ai-hdr {
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-charcoal);
  background: rgba(91,124,184,0.06);
}
.rt-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--border-card-light);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.rt-ai-title svg { color: #5B7CB8; }
.rt-ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rt-ai-meta-item {
  display: inline-block;
  padding: 3px 9px;
  background: var(--overlay-w-04);
  border: 1px solid var(--surface-charcoal);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted-warm);
  letter-spacing: 0.02em;
}
.rt-ai-meta-item--warn { color: #C19355; border-color: rgba(193,147,85,0.3); }
.rt-ai-meta-item--warm { color: #B8804F; border-color: rgba(184,128,79,0.3); background: rgba(184,128,79,0.08); }
.rt-ai-body { padding: 16px; }
.rt-ai-thinking-stub {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-muted-warm);
  font-size: 13px;
  padding: 12px 0;
}
.rt-ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fg-primary-light);
  border-top-color: #5B7CB8;
  border-radius: 50%;
  animation: rt-spin 700ms linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
.rt-ai-thinking {
  background: #161616;
  border: 1px solid var(--surface-charcoal);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.rt-ai-thinking summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}
.rt-ai-thinking summary:hover { color: var(--fg-muted-warm); }
.rt-ai-thinking pre {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  color: var(--fg-faint);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 220px;
  overflow-y: auto;
}
.rt-ai-answer {
  color: var(--border-card-light);
  font-size: 14px;
  line-height: 1.6;
}
.rt-ai-answer h2, .rt-ai-answer h3, .rt-ai-answer strong { color: var(--border-card-light); }
.rt-ai-answer h2 { font-size: 15px; margin-top: 18px; margin-bottom: 8px; letter-spacing: 0.01em; }
.rt-ai-answer h3 { font-size: 14px; margin-top: 14px; margin-bottom: 6px; }
.rt-ai-answer ul, .rt-ai-answer ol { padding-left: 22px; margin: 8px 0; }
.rt-ai-answer li { margin: 4px 0; }
.rt-ai-answer p { margin: 8px 0; }
.rt-ai-answer em { color: var(--fg-muted-warm); font-style: normal; }
.rt-ai-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-charcoal);
  flex-wrap: wrap;
}
.rt-ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.rt-ai-cta--primary {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border-color: var(--brand-blue-pure);
  box-shadow: 0 2px 8px rgba(33, 150, 243,0.25);
}
.rt-ai-cta--primary:hover {
  background: var(--brand-blue-hover-pure);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(33, 150, 243,0.4);
}
.rt-ai-cta--ghost {
  background: transparent;
  color: var(--fg-muted-warm);
  border-color: var(--fg-primary-light);
}
.rt-ai-cta--ghost:hover {
  background: var(--surface-charcoal);
  color: var(--border-card-light);
  border-color: #5B7CB8;
}

/* Stop detail modal (clickable chips open this) */
/* v40.61: DEAD legacy modal CSS neutralized. The .rsm/.rsm-backdrop classes
   used to cover the whole viewport at z-index 9990/9991 with pointer-events
   enabled. The template that used them (_routeStopModalHtml) was gated off
   in v40.11 in favor of the Route CRM sheet, but the CSS remained and any
   accidental element with class="rsm" (bare) would eat clicks on the Log
   Note drawer. Neutralized to `display: none` so nothing at these classes
   can ever render. Sub-classes like .rsm-notes-*, .rsm-tries-*, .rsm-next-*
   are still used by the live Rep tools template and are untouched. */
.rsm-backdrop, .rsm { display: none !important; }
.rsm-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--surface-charcoal);
}
.rsm-id { min-width: 0; }
.rsm-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--border-card-light);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.rsm-addr { font-size: 13px; color: var(--fg-muted-warm); margin-top: 3px; }
.rsm-close {
  background: transparent;
  border: 1px solid var(--fg-primary-light);
  color: var(--fg-muted-warm);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 100ms ease, color 100ms ease;
}
.rsm-close:hover { background: var(--surface-charcoal); color: var(--border-card-light); }
.rsm-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--surface-charcoal);
  flex-wrap: wrap;
}
.rsm-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-charcoal);
  border: 1px solid var(--border-strong-warm);
  color: var(--border-card-light);
  text-decoration: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  transition: background 100ms ease, border-color 100ms ease;
}
.rsm-act:hover { background: var(--fg-primary-light); border-color: #5B7CB8; }

/* [moved to mobile-v2.css v41.58k — was L26581-L26589 @media (max-width: 600px)] */

.rt-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.rt-map-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--fg-muted-warm);
  padding: 0 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rt-map-legend::-webkit-scrollbar { display: none; }
/* v41.58h: misc block L26775-L26781 moved to mobile-v2.css */
.rt-map-legend-item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rt-map-legend-item--warn { color: #9A9A9A; }
.rt-map-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--shadow-alpha-35);
  flex-shrink: 0;
}
/* Brand palette pulled from Greenleaf packaging:
   pest=green, termite=mustard yellow, weed=orange, hold=khaki. */

.rt-map-dot--hold    { background: #9A9A9A; }
.rt-map-dot--pest    { background: #4A8B2C; }
.rt-map-dot--termite { background: #D4A82C; }
.rt-map-dot--weed    { background: #E8821F; }
.rt-map-dot--other   { background: #C4C4C4; }

.rt-map {
  width: 100%;
  height: 540px;
  border-radius: 12px;
  border: 1px solid var(--fg-primary-light);
  background: #0F1115;
  overflow: hidden;
}
/* v41.58h: misc block L26816-L26818 moved to mobile-v2.css */

.rt-map-hint {
  font-size: 11px;
  color: var(--fg-faint);
  padding: 0 2px;
}

/* Numbered pin */
.rt-map-icon { background: transparent !important; border: none !important; }
.rt-map-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-inverse);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--fg-inverse);
  box-shadow: 0 2px 6px var(--shadow-alpha-50);
  letter-spacing: -0.02em;
}

.rt-map-pin.is-current,
.rt-map-marker.is-current {
  border: 2px solid var(--brand-blue-pure);
  box-shadow: 0 0 0 3px var(--accent-primary-soft-35), 0 2px 6px var(--shadow-alpha-50);
}

.rt-map-pin.is-selected,
.rt-map-marker.is-selected {
  border: 2px solid var(--brand-blue-pure) !important;
  box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.45), 0 2px 8px var(--shadow-alpha-55) !important;
  z-index: 900 !important;
  transform: scale(1.08);
}

/* Leaflet popup theming */

.rt-map-popup { display: flex; flex-direction: column; gap: 4px; }
.rt-map-popup-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-blue-pure);
  text-transform: uppercase;
}
.rt-map-popup-name { font-size: 14px; font-weight: 600; color: var(--border-card-light); }
.rt-map-popup-addr { font-size: 12px; color: var(--fg-muted-warm); }
.rt-map-popup-meta { font-size: 11px; color: var(--fg-faint); margin-bottom: 4px; }
.rt-map-popup-btn {
  margin-top: 4px;
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rt-map-popup-btn:hover { background: var(--brand-blue-hover-pure); }

/* Zoom buttons match dark theme */

/* Toolbar row above the map: legend on the left, controls on the right */
.rt-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rt-map-toolbar .rt-map-legend {
  margin: 0;
  flex: 1 1 auto;
}
.rt-map-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rt-map-layer-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  background: #1A1A1A;
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  color: var(--border-card-light);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.rt-map-layer-chip svg { flex-shrink: 0; color: var(--fg-faint); }
.rt-map-layer-chip-label { color: var(--border-card-light); }
.rt-map-layer-chip:hover { background: #232323; border-color: var(--border-strong-warm); }
.rt-map-layer-chip[aria-expanded="true"] { background: #232323; border-color: var(--border-strong-warm); }
.rt-map-layer-chip[aria-expanded="true"] .rt-map-layer-caret { transform: rotate(180deg); }
.rt-map-layer-caret { transition: transform 0.15s ease; }

.rt-map-controls {
  position: relative; /* anchor for absolute-positioned menu */
}
.rt-map-layer-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong-warm);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow-alpha-45);
  z-index: 200;
  padding: 4px;
  flex-direction: column;
  gap: 2px;
}
.rt-map-layer-menu.is-open {
  display: flex;
}
.rt-map-layer-opt {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--border-card-light);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.rt-map-layer-opt:hover { background: var(--overlay-w-07); color: var(--fg-inverse); }
.rt-map-layer-opt.is-active { background: var(--accent-primary-soft-15); color: var(--brand-blue-pure); font-weight: 600; }
/* Keep old segmented control CSS in case used elsewhere */

/* Full-screen toggle button */
.rt-map-fs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1A1A1A;
  color: var(--border-card-light);
  border: 1px solid var(--surface-charcoal);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rt-map-fs-btn:hover {
  background: #232323;
  border-color: var(--border-strong-warm);
}

/* Body class flips the map container to fixed full viewport */
body.rt-map-fullscreen { overflow: hidden; }
body.rt-map-fullscreen .sidebar, body.rt-map-fullscreen .topbar, body.rt-map-fullscreen .route-hdr-row, body.rt-map-fullscreen .route-hdr-row1, body.rt-map-fullscreen .route-hdr-row2, body.rt-map-fullscreen .route-hdr-stats, body.rt-map-fullscreen .route-viewbar, body.rt-map-fullscreen .rt-map-hint {
  display: none !important;
}
body.rt-map-fullscreen .route-tab-body, body.rt-map-fullscreen #route-list, body.rt-map-fullscreen .rt-map-wrap {
  position: static;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
body.rt-map-fullscreen .rt-map-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0D0D0D;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
}
body.rt-map-fullscreen .rt-map-toolbar {
  margin-bottom: 8px;
}
body.rt-map-fullscreen .rt-map {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  border-radius: 8px;
}

/* Mobile: stack toolbar */
/* v41.58h: misc block L27019-L27030 moved to mobile-v2.css */

.gm-style .rt-map-popup { color: #1A1A1A; padding: 4px 2px 2px; min-width: 200px; }
.gm-style .rt-map-popup-num { font-size: 11px; color: var(--fg-muted-light); font-weight: 700; margin-bottom: 2px; }
.gm-style .rt-map-popup-name { font-weight: 700; color: #0D0D0D; font-size: 13px; margin-bottom: 2px; }
.gm-style .rt-map-popup-addr { font-size: 12px; color: #4B5563; margin-bottom: 4px; }
.gm-style .rt-map-popup-meta { font-size: 11px; color: var(--fg-muted-light); margin-bottom: 8px; }
.gm-style .rt-map-popup-btn { background: var(--brand-blue-pure); color: var(--fg-inverse); border: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.gm-style .rt-map-popup-btn:hover { background: var(--brand-blue-hover-pure); }

.rt-map-popup-added { font-size: 11px; color: var(--fg-faint); margin-bottom: 6px; }
.gm-style .rt-map-popup-added { font-size: 11px; color: var(--fg-muted-light); margin-bottom: 8px; font-style: italic; }
.rt-added {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 500;
  color: var(--fg-faint); background: var(--overlay-w-04);
  border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}

.route-repmode-opt {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--fg-muted-warm);
  font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.route-repmode-opt:hover { color: var(--border-card-light); background: var(--overlay-w-04); }
.route-repmode-opt.is-active {
  background: var(--accent-primary-soft-18);
  color: var(--brand-blue-pure);
}
.route-repmode-opt svg { flex-shrink: 0; }

/* Status color tokens (single source of truth) */


/* Colored ring on the timeline chip when knocked */

/* Status pills (for tags row) - 6 new colors */

/* Mark buttons - hover + active for the 6 statuses */
.route-mark--gave_pitch:hover,
.route-mark--gave_pitch.is-active     { border-color: var(--st-gave-pitch);     color: var(--st-gave-pitch);     background: var(--accent-primary-soft-10); }
.route-mark--call_back:hover,
.route-mark--call_back.is-active      { border-color: var(--st-call-back);      color: var(--st-call-back);      background: rgba(245, 158, 11, 0.10); }
.route-mark--made_sale:hover,
.route-mark--made_sale.is-active      { border-color: var(--st-made-sale);      color: var(--st-made-sale);      background: rgba(16, 185, 129, 0.10); }
.route-mark--not_interested:hover,
.route-mark--not_interested.is-active { border-color: var(--st-not-interested); color: var(--st-not-interested); background: rgba(239, 68, 68, 0.10); }
.route-mark--not_home:hover,
.route-mark--not_home.is-active       { border-color: #9CA3AF;                  color: var(--border-card-light);                  background: rgba(107, 114, 128, 0.16); }
.route-mark--never_knock:hover,
.route-mark--never_knock.is-active    { border-color: var(--surface-charcoal);                  color: var(--border-card-light);                  background: rgba(13, 13, 13, 0.55); }

/* Modal: knock counter row */
.rsm-knock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--overlay-w-03);
  border: 1px solid var(--border-soft);
}
.rsm-knock-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rsm-knock-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: var(--accent-primary-soft-15);
  color: #80C8FF;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(33, 150, 243, 0.45);
  font-variant-numeric: tabular-nums;
}

.rsm-knock-num--btn {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  position: relative;
  height: 36px;
  min-width: 52px;
  padding: 0 14px;
  font-size: 14px;
}
.rsm-knock-num--btn:hover,
.rsm-knock-num--btn[aria-expanded="true"] {
  background: var(--accent-primary-soft-28);
  border-color: rgba(33, 150, 243, 0.75);
  transform: scale(1.02);
}
.rsm-knock-count { position: relative; }
.rsm-knock-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #232627;
  border: 1px solid rgba(33, 150, 243, 0.4);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-alpha-55);
  z-index: 10;
  animation: rsm-knock-pop-in 140ms ease;
}
.rsm-knock-pop.is-open { display: inline-flex; }
@keyframes rsm-knock-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rsm-knock-pop-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-primary-soft-14);
  border: 1px solid rgba(33, 150, 243, 0.5);
  color: #80C8FF;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, transform 100ms ease;
}
.rsm-knock-pop-btn:hover { background: var(--accent-primary-soft-28); }
.rsm-knock-pop-btn:active { transform: scale(0.94); }
.rsm-knock-pop-val {
  min-width: 44px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--border-card-light);
  font-variant-numeric: tabular-nums;
}
.rsm-knock-pop-reset {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--fg-muted-warm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-left: 4px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rsm-knock-pop-reset:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  border-color: #EF4444;
}
/* [moved to mobile-v2.css v41.58k — was L27024-L27027 @media (max-width: 640px)] */

/* Modal: 6-button status grid */

/* Notes textarea */
.rsm-notes-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rsm-notes-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rsm-notes-ta {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-overlay-10);
  background: var(--overlay-w-03);
  color: var(--border-card-light);
  font-size: 13px;
  line-height: 1.45;
  font-family: inherit;
  box-sizing: border-box;
}
.rsm-notes-ta:focus {
  outline: none;
  border-color: var(--accent-primary-alpha-55);
  background: rgba(33, 150, 243, 0.05);
}
.rsm-notes-ta::placeholder { color: #5F5F5F; }
.rsm-notes-status { font-size: 11px; color: var(--accent-primary-lighter); }
.rsm-notes-save {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--accent-primary-soft-18);
  color: #80C8FF;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid rgba(33, 150, 243, 0.45);
  cursor: pointer;
}
.rsm-notes-save:hover { background: var(--accent-primary-soft-28); }

/* Mobile tweaks for the modal additions */
/* [moved to mobile-v2.css v41.58k — was L27079-L27082 @media (max-width: 600px)] */

/* Header Lock button - sits next to the Refresh / GPS buttons */
.route-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--fg-primary-light);
  background: #1A1A1A;
  color: var(--border-card-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.route-lock-btn svg { width: 14px; height: 14px; }




/* repmode-opt as standalone grid cell (no wrapper .route-repmode) */

.route-hdr-row1 .route-repmode-opt.is-active {
  background: var(--accent-primary-soft-18) !important;
  border-color: var(--brand-blue-pure) !important;
  color: var(--brand-blue-pure) !important;
}


/* Next stop button - lives inside the stop modal, below the status grid */
.rsm-next-wrap {
  display: flex;
  justify-content: stretch;
  margin-top: 8px;
}
.rsm-next-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--brand-blue-pure);
  background: linear-gradient(180deg, var(--brand-blue-pure) 0%, #1B7CD0 100%);
  color: var(--fg-inverse);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.rsm-next-btn:hover { filter: brightness(1.08); }
.rsm-next-btn:active { transform: translateY(1px); }
.rsm-next-btn svg { flex-shrink: 0; }

/* Initial + Monthly price stack - replaces the legacy combined contract value */
.rt-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.rt-price-init {
  font-size: 13px;
  font-weight: 700;
  color: var(--border-card-light);
  white-space: nowrap;
}
.rt-price-mo {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-blue-pure);
  white-space: nowrap;
}

/* When the price stack lives inside a deal row, make sure it stays tight */


/* [moved to mobile-v2.css v41.58k — was L27197-L27202 @media (max-width: 600px)] */

/* ============================================================================
   v40.5cf - Customer-facing stop modal redesign
   - Default view: clean account card (status, price, deals, contact actions,
  recent activity timeline). Looks like a CRM the customer would be proud of.
   - "Rep tools" pill flips the modal into internal sales mode (knock counter,
  mark grid, notes, Next stop) - hidden from the customer until tapped.
   - Tightened spacing so the modal stops over-scrolling.
   ============================================================================ */

/* Modal becomes a vertical flex column whose body scrolls only if needed.
   Default height is content-sized so a basic account doesn't scroll at all. */
.rsm.is-custmode,
.rsm.is-repmode {
  /* allow internal scrolling only when content actually overflows */
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 14px;
}
.rsm.is-custmode .rsm-hdr,
.rsm.is-repmode .rsm-hdr {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}

/* Account card - the customer-facing "wow, they have me organized" panel */
.rsm-acct-card {
  margin: 12px 14px 0;
  background: #161616;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rsm-acct-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rsm-acct-status { flex: 0 0 auto; }
.rsm-acct-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.rsm-acct-badge--hold {
  background: rgba(255, 123, 0, 0.14);
  color: #FFB97A;
  border: 1px solid rgba(255, 123, 0, 0.36);
}
.rsm-acct-badge--open {
  background: rgba(16, 185, 129, 0.14);
  color: #6EE7B7;
  border: 1px solid rgba(16, 185, 129, 0.36);
}
.rsm-acct-headline { font-variant-numeric: tabular-nums; }

.rsm-acct-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px dashed var(--border-soft);
}
.rsm-acct-block:first-of-type { border-top: 0; padding-top: 4px; }
.rsm-acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rsm-acct-svc {
  font-size: 14px;
  font-weight: 700;
  color: var(--border-card-light);
}
.rsm-acct-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.rsm-acct-init {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted-warm);
  white-space: nowrap;
}
.rsm-acct-mo {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue-pure);
  white-space: nowrap;
}
.rsm-acct-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-faint);
}
.rsm-acct-rep {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-muted-warm);
}
.rsm-acct-rep svg { opacity: 0.85; }
.rsm-acct-date { color: var(--fg-faint); }
.rsm-acct-addons {
  font-size: 12px;
  color: #C8C8C8;
  line-height: 1.4;
}
.rsm-acct-addons-lbl {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
}
.rsm-acct-notes {
  font-size: 12px;
  color: var(--fg-muted-warm);
  font-style: italic;
  line-height: 1.4;
}
.rsm-acct-empty {
  font-size: 13px;
  color: var(--fg-faint);
  padding: 4px 0;
}
.rsm-acct-cnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--accent-primary-soft-08);
  border: 1px solid rgba(33, 150, 243, 0.22);
  border-radius: 10px;
  font-size: 12px;
  color: #C8DDF3;
  line-height: 1.4;
}
.rsm-acct-cnote svg { flex-shrink: 0; margin-top: 1px; color: #80C8FF; }

/* Contact actions row - compact, centered */
.rsm.is-custmode .rsm-actions,
.rsm.is-repmode .rsm-actions {
  padding: 10px 14px 0;
  border-bottom: 0;
  gap: 8px;
}
.rsm.is-custmode .rsm-act,
.rsm.is-repmode .rsm-act {
  flex: 1 1 0;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* Recent activity timeline */
.rsm-history {
  margin: 10px 14px 0;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border-soft);
}
.rsm-history-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-faint);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 14px;
}
.rsm-history-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0 8px 14px;
}
.rsm-history-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: -2px;
  width: 1px;
  background: var(--overlay-w-08);
}
.rsm-history-item:last-child::before { display: none; }
.rsm-history-dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-blue-pure);
  box-shadow: 0 0 0 2px #161616;
}
.rsm-history-pending .rsm-history-dot {
  background: var(--border-strong-warm);
}
.rsm-history-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rsm-history-event {
  font-size: 12px;
  font-weight: 600;
  color: #C8C8C8;
}
.rsm-history-when {
  font-size: 11px;
  color: #7A7A7A;
}
.rsm-history-pending .rsm-history-event { color: #6A6A6A; }
.rsm-history-pending .rsm-history-when { color: #5A5A5A; font-style: italic; }

/* Discreet rep-tools pill - small, centered, low contrast until toggled */
.rsm-reptoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 14px 0;
  padding: 8px 14px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--overlay-w-08);
  color: #7A7A7A;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  width: calc(100% - 28px);
  line-height: 1;
  text-align: center;
}
.rsm-reptoggle svg { flex-shrink: 0; }
.rsm-reptoggle span { line-height: 1; }
.rsm-reptoggle:hover {
  color: var(--fg-muted-warm);
  border-color: rgba(255,255,255,0.16);
}
.rsm-reptoggle.is-on {
  background: var(--accent-primary-soft-10);
  border-color: rgba(33, 150, 243, 0.42);
  color: #80C8FF;
}

/* Rep-only section - collapsed by default, no DOM space when closed */
.rsm-rep {
  display: none;
  padding: 12px 14px 14px;
  margin-top: 10px;
  border-top: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.012);
}
.rsm-rep.is-open { display: block; }

.rsm-rep-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 123, 0, 0.10);
  border: 1px solid rgba(255, 123, 0, 0.28);
  color: #FFB97A;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rsm-rep-banner svg { flex-shrink: 0; }

/* Notes head - Save inline next to label, not below */
.rsm-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rsm-notes-wrap { margin-top: 12px; gap: 6px; }
.rsm-notes-ta { min-height: 56px; }

/* When in customer mode, hide the contact-actions border-bottom for cleaner look */

/* Mobile polish */
/* [moved to mobile-v2.css v41.58k — was L27514-L27522 @media (max-width: 600px)] */

/* Knock row when the K-chip is solo (no "I knocked here" button alongside) */
.rsm-knock-count--solo {
  flex: 0 0 auto;
}
.rsm-knock-hint {
  font-size: 11px;
  color: #7A7A7A;
  font-weight: 500;
}
/* [moved to mobile-v2.css v41.58k — was L27533-L27540 @media (max-width: 600px)] */

/* K-chip color rings inside the modal - match the timeline chip palette */

/* Door-type chip: a single pill that opens the native <select> */
.rsm-doortype {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--overlay-w-03);
  border: 1px solid var(--border-overlay-10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.rsm-doortype:hover { border-color: var(--border-strong-alpha); background: var(--overlay-w-05); }
.rsm-doortype-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-faint);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rsm-doortype-lbl svg { opacity: 0.85; }
.rsm-doortype-value {
  flex: 1;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--border-card-light);
}
.rsm-doortype-caret { color: var(--fg-faint); flex-shrink: 0; }
/* The native select sits invisibly over the whole chip so the tap target is
   the entire row. iOS uses this to open its native wheel picker. */
.rsm-doortype-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iOS needs >=16 to avoid zoom-on-focus */
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* Once a door type is set, the chip picks up its color */

/* Retire the old 6-button grid (no longer rendered in the modal, but old
   leads cards may still use it -- keep functional but visually tightened). */

.rsm-doortype-pillbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--overlay-w-08);
  background: var(--overlay-w-02);
  transition: border-color 140ms ease, background 140ms ease;
}
.rsm-doortype-pill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.rsm-doortype-pill-head svg { opacity: 0.85; flex-shrink: 0; }
.rsm-doortype-pill-head-lbl { flex-shrink: 0; }
.rsm-doortype-pill-active {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
  background: var(--border-soft);
  color: var(--border-card-warm);
}

.rsm-doortype-pill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.rsm-dt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-overlay-10);
  background: var(--overlay-w-03);
  color: #D1D5DB;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  text-align: center;
  line-height: 1.1;
}
.rsm-dt-pill:active { transform: scale(0.96); }
.rsm-dt-pill:hover  { background: var(--border-soft); border-color: var(--border-strong-alpha); color: #F3F4F6; }
.rsm-dt-pill.is-selected { color: var(--fg-inverse); }

.rsm-dt-pill--gave_pitch.is-selected     { background: rgba(33, 150, 243, 0.22); border-color: var(--st-gave-pitch);     box-shadow: 0 0 0 1px var(--st-gave-pitch)     inset; }
.rsm-dt-pill--call_back.is-selected      { background: rgba(245, 158, 11, 0.22); border-color: var(--st-call-back);      box-shadow: 0 0 0 1px var(--st-call-back)      inset; }
.rsm-dt-pill--made_sale.is-selected      { background: rgba(16, 185, 129, 0.22); border-color: var(--st-made-sale);      box-shadow: 0 0 0 1px var(--st-made-sale)      inset; }
.rsm-dt-pill--not_interested.is-selected { background: rgba(239, 68, 68, 0.22);  border-color: var(--st-not-interested); box-shadow: 0 0 0 1px var(--st-not-interested) inset; }
.rsm-dt-pill--not_home.is-selected       { background: rgba(107, 114, 128, 0.28);border-color: var(--st-not-home);       box-shadow: 0 0 0 1px var(--st-not-home)       inset; }
.rsm-dt-pill--never_knock.is-selected    { background: rgba(13, 13, 13, 0.55);   border-color: rgba(80, 80, 80, 0.75);   box-shadow: 0 0 0 1px rgba(80,80,80,0.75)      inset; color: var(--border-card-warm); }

/* [moved to mobile-v2.css v41.58k — was L27668-L27671 @media (max-width: 480px)] */

/* Compact-row K-chip color rings (door-type aware) */
.rt-compact-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.rt-row.is-visited       { opacity: 0.95; }
.rt-row.is-visited .rt-num,
.rt-compact-row.is-visited .rt-compact-num { opacity: 1; }
.rt-row.is-visited .rt-name { color: #C8C8C8; }
.rt-compact-row.is-visited .rt-compact-name { color: #C8C8C8; }

/* Hide the green-check visited markers if any older CSS still draws them */

/* ── Desktop Fix 1: Enterprise pill ──────────────────── */
html body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge {
  background: #1565C0 !important;
  color: #FFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
}

/* ── Desktop Fix 2: Sidebar footer border subtle ──────────────────── */
html body aside.sidebar#sidebar .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Desktop Fix 3: Collapse button clean ──────────────────── */
.sidebar-collapse-btn {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--fg-faint) !important;
}
.sidebar-collapse-btn:hover {
  background: var(--overlay-w-05) !important;
  color: var(--border-card-light) !important;
}

/* ── Desktop Fix 4: Dual-active nav - history quick-item never active-highlights ── */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open:not(.active),
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:not(.nav-active) {
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Desktop Fix 5: All action chips border-radius 999px ───────────────── */
.route-gps-btn, .route-refresh-btn, .route-lock-btn,
.route-viewbtn, .route-repmode-opt,
.route-period-btn, .route-period-opt {
  border-radius: 999px !important;
}

/* ── Desktop Fix 6: Remove white left-edge inset shadow ────────────────── */
html body .main-content {
  box-shadow: none !important;
}

/* ── Desktop Fix 7: Top-right pill buttons ──────────────────── */
html body header.topbar .topbar-right > button, html body header.topbar .topbar-right > a {
  border-radius: 999px !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Route filter chip CSS ──────────────────── */


/* ── Messages Fix: 2-chip native-select CSS ──────────────────── */
.msg-chip-row {
  display: flex;
  gap: 8px;
  padding: 6px 0 4px;
  flex-wrap: wrap;
}
.msg-select-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface-charcoal);
  border: 1px solid var(--border-overlay-10);
  border-radius: 999px;
  font-size: 12px;
  color: var(--border-card-light);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.msg-select-chip:hover {
  background: var(--fg-primary-light);
  border-color: var(--border-strong-alpha);
}
.msg-select-chip-label { pointer-events: none; }
.msg-select-chip-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 12px;
}
.msg-empty-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--fg-faint);
  text-align: center;
}
.msg-retry-btn {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border: none;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.msg-retry-btn:hover { background: var(--accent-primary-light); }

/* ── Overview Fix 1+2: Quick Actions + section buttons dark ─────────── */
html body .dashboard-view .quick-actions-grid button {
  background: #2A2A2A !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #E5E5E5 !important;
  border-radius: 999px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ── Overview Fix 3: KPI tile border consistency ──────────────────── */



/* ── Overview Fix 4: Laptop grid layout ──────────────────── */
@media (min-width: 1024px) {
  
  
}

/* ── Fix 18: Automations tab - nuke glass morphism, dark cards ──────── */
html body .automations-view .automation-card, html body .automations-view div.automation-card, html body .automations-view [class*="automation"][class*="card"] {
  background: #1F2121 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: #E5E5E5 !important;
  box-shadow: none !important;
}

/* Toggle ON = Totaly blue, NOT neon green */
html body .automations-view .toggle-switch input:checked + .toggle-track,
html body .automations-view .toggle-switch--inline input:checked + .toggle-track,
html body .automations-view [class*="toggle"] input:checked + [class*="track"] {
  background: #2196F3 !important;
}

/* ── Fix 19: Divisions tab - 5-in-a-row grid, dark cards ─────────── */
html body .gl-divisions-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  flex: unset !important;
  flex-wrap: unset !important;
}
@media (max-width: 1280px) {
  html body .gl-divisions-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1023px) {
  html body .gl-divisions-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* [moved to mobile-v2.css v41.58k — was L27889-L27891 @media (max-width: 639px)] */

html body .gl-division-card:hover {
  background: #252727 !important;
  border-color: rgba(33,150,243,0.4) !important;
  transform: translateY(-1px) !important;
}
html body .gl-division-card .gdc-icon {
  color: #E5E5E5 !important;
  background: rgba(33,150,243,0.10) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .gl-division-card:hover .gdc-icon { color: #2196F3 !important; }
html body .gl-division-card .gdc-title {
  color: #F4F4F4 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}

html body .gl-division-card .gdc-cta {
  color: #2196F3 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

aside.sidebar#sidebar { overflow: hidden; }
aside.sidebar#sidebar .sidebar-section .section-body .history-item {
  max-width: 100% !important;
  overflow: hidden !important;
}
aside.sidebar#sidebar .sidebar-section .section-body .history-item .history-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* ── Fix 20: Connectors - header glass + category labels ─────────── */
html body .gl-cn-view .gl-cn-header,
html body [class*="data-source"] .gl-cn-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
html body .gl-cn-view .gl-cn-cat,
html body [class*="data-source"] .gl-cn-cat {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #8A8A8A !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  margin: 24px 0 10px !important;
}

/* ── Fix 21: Settings page - tightening + avatar fallback ─────────── */










/* Avatar fallback */
.settings-avatar {
  background: linear-gradient(135deg, var(--brand-blue-pure), #1565C0);
  color: var(--fg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
/* Hide Beaded/legacy sections */
[data-settings-section="beaded"] { display: none !important; }
/* Double divider fix - ensure single rule lines */


/* ── Fix 22: All Dashboards hub - scroll, section tightening ─────── */
.dash-hub {
  overflow-y: auto !important;
  height: 100% !important;
  padding-bottom: 80px !important;
  box-sizing: border-box !important;
}

/* ── Fix 23: BI dashboards - black band removal, error state, header ── */
.bi-page,
.dr-bi-page {
  overflow-y: auto !important;
  height: 100% !important;
  padding-bottom: 80px !important;
  box-sizing: border-box !important;
  background: var(--surface-charcoal-deep) !important;
}
.bi-body {
  padding-bottom: 60px !important;
}
/* Improved error state */
.bi-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-faint);
}
.bi-error-icon { opacity: 0.7; }
.bi-error-msg {
  font-size: 14px;
  color: var(--fg-muted-warm);
  max-width: 360px;
  line-height: 1.5;
}
.bi-error-msg strong { color: var(--border-card-light); }
.bi-error-sub { font-size: 12px; color: #666; margin-top: 4px; }
.bi-retry-btn {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.bi-retry-btn:hover { background: var(--accent-primary-light); }
/* BI header pill buttons */
.bi-header {
  background: var(--surface-charcoal-deep) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.bi-back-link {
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--overlay-w-08) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  color: var(--fg-muted-warm) !important;
  text-decoration: none !important;
  transition: background 0.12s !important;
}
.bi-back-link:hover { background: var(--overlay-w-08) !important; color: var(--border-card-light) !important; }
.bi-period-sel,
.bi-refresh-btn,
.dash-hub-period,
.dash-hub-division {
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--overlay-w-08) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  color: var(--border-card-light) !important;
  cursor: pointer !important;
}
.bi-refresh-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.bi-refresh-btn:hover,
.dash-hub-period:hover,
.dash-hub-division:hover {
  background: var(--overlay-w-08) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
/* Skeleton loading bars */
.bi-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.bi-skel-strip, .bi-skel-heroes, .bi-skel-heat, .bi-skel-table {
  background: var(--overlay-w-04);
  border-radius: 8px;
  animation: bi-skel-pulse 1.4s ease-in-out infinite;
}
.bi-skel-strip { height: 40px; }
.bi-skel-heroes { height: 100px; }
.bi-skel-heat { height: 180px; }
.bi-skel-table { height: 220px; }
@keyframes bi-skel-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Fix 24: Total Operations - scroll + Views chip + date/division dropdowns ── */
/* Page scroll */
html body .main-content {
  overflow-y: auto !important;
  height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 0 !important;
}
/* dash-hub is itself scrollable - parent should not clip it */
html body .main-content:has(.dash-hub) {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

/* Views chip - two separate pill buttons */
/* The Views trigger button (dr-dd-trigger in the floating pill) */
html body header.topbar .gl-floating-pill--topbar .dr-dd-trigger,
html body header.topbar .gl-floating-pill--topbar button.dr-dd-trigger {
  background: rgba(33,150,243,0.12) !important;
  border: 1px solid rgba(33,150,243,0.28) !important;
  color: #E3F2FD !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
html body header.topbar .gl-floating-pill--topbar .dr-dd-trigger:hover {
  background: rgba(33,150,243,0.20) !important;
  border-color: rgba(33,150,243,0.45) !important;
}
/* Kebab (…) button */
html body header.topbar .gl-floating-pill--topbar .gfp-kebab {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  width: 32px !important;
  height: 32px !important;
}
html body header.topbar .gl-floating-pill--topbar .gfp-kebab:hover {
  background: rgba(255,255,255,0.08) !important;
}
/* Remove shared container background if any */
.dr-dd-wrapper--pill {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── Fix 25: Views dropdown - icon colors, label colors, active state ── */
/* Section labels */
.dr-dd-section-label {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  color: #6B6B6B !important;
  text-transform: uppercase !important;
  padding: 12px 12px 6px !important;
}
/* Divider */
.dr-dd-divider {
  height: 1px !important;
  background: var(--border-soft) !important;
  margin: 6px 4px !important;
  border: none !important;
}
/* Items - default state: white text, muted icon */
.dr-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--border-card-light) !important;  /* was blue - now proper off-white */
  text-decoration: none !important;
  transition: background 0.10s ease, color 0.10s ease !important;
  white-space: nowrap !important;
}
.dr-dd-item-icon {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  color: var(--fg-faint) !important;   /* muted grey for inactive icons */
  opacity: 1 !important;
}
/* Hover */
.dr-dd-item:hover {
  background: var(--overlay-w-05) !important;
  color: var(--fg-inverse) !important;
}
/* Active - only ONE item, subtle blue tint, white bold */
.dr-dd-item.active {
  background: var(--accent-primary-soft-10) !important;
  color: var(--fg-inverse) !important;
  font-weight: 600 !important;
}
.dr-dd-item.active .dr-dd-item-icon { color: var(--fg-inverse) !important; opacity: 1 !important; }

/* ── Fix 26: Chat history hover state ──────────────────── */
/* Remove the stale backdrop-filter blur on history items */
.sidebar #sidebar-history-list .history-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: rgba(234, 235, 236, 0.03) !important;
  border: 1px solid rgba(234, 235, 236, 0.06) !important;
  border-radius: 9px !important;
  color: var(--fg-primary-warm) !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hover: subtle white tint only - no blue */
.sidebar #sidebar-history-list .history-item:hover,
.sidebar .sidebar-section .section-body .history-item:hover {
  background: var(--overlay-w-05) !important;
  border-color: var(--border-overlay-10) !important;
  color: var(--fg-inverse) !important;
}
/* Active chat: subtle blue tint, distinguishable from nav active */
.sidebar #sidebar-history-list .history-item.is-active,
.sidebar .sidebar-section .section-body .history-item.is-active {
  background: var(--accent-primary-soft-12) !important;
  border: none !important;
  color: var(--brand-blue-pure) !important;
}
/* Active should be visually lighter-weight than nav .active */
.sidebar #sidebar-history-list .history-item.is-active .history-title {
  font-weight: 500 !important;
  color: var(--brand-blue-pure) !important;
}
/* Container spacing */
.sidebar #sidebar-history-list,
.sidebar [id*="chat-history"] {
  padding: 0 6px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Title stays on one line */
.sidebar #sidebar-history-list .history-item .history-title,
.sidebar .sidebar-section .section-body .history-item .history-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}
/* Kill legacy [class*="recent-chats"] container glass */
.sidebar [class*="recent-chats"],
.sidebar [class*="recent-chat-wrapper"] {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Universal page scroll safety net ──────────────────── */


/* Fix 1: Enterprise pill contrast */

/* Fix 2: Remove blue top border on profile/footer */
.sidebar-footer {
  border-top: 1px solid var(--border-soft) !important;
}

/* Fix 3: Sidebar collapse button */
.sidebar-collapse-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted-warm);
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-collapse-btn:hover {
  background: var(--overlay-w-04);
  color: var(--fg-inverse);
}

/* Fix 5 + 7: Standardize all chips/pills to fully-rounded */
.pill, [class*="-chip"], [class*="-pill"] {
  border-radius: 999px !important;
}
.kpi-card, .automation-card, .bi-card {
  border-radius: 12px !important;
}
.rsm-acct-card {
  border-radius: 14px !important;
}

/* Fix 6: Kill white left vertical line */
body, .sidebar {
  border-left: none !important;
}
body { background: var(--surface-charcoal-deep); }

/* Fix 7: Top-right pill cleanup */
.topbar #etl-pill, .topbar .pill--status {
  border-radius: 999px !important;
  border: 1px solid var(--border-soft) !important;
}

/* Messages CSS */
.msg-chip-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.msg-select-chip {
  position: relative;
  background: var(--overlay-w-04);
  border: 1px solid var(--overlay-w-08);
  color: var(--border-card-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.msg-select-chip:hover { background: var(--overlay-w-08); }
.msg-select-chip-native {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.msg-retry-btn {
  background: var(--brand-blue-pure); color: var(--fg-inverse); border: none;
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.msg-retry-btn:hover { background: var(--accent-primary-hover); }

/* Overview/Home polish */
.automation-card, [class*="automation-row"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--border-card-light) !important;
}
.automation-card * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Divisions grid */
/* Connectors */
.section-label {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 24px 0 12px;
  display: block;
}

/* Settings tightening */

/* Page scroll */
.main-content, .dash-hub {
  overflow-y: auto !important;
  max-height: 100vh;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}

/* BI dashboard black band */
.bi-page footer {
  background: transparent !important;
  display: none !important;
}
.bi-error-state,
.msg-empty-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--fg-muted-warm);
}

/* Total Operations: top nav chip layout */

/* Views dropdown items - override .dr-dd-item active blue text */
.dr-dd-item {
  color: var(--border-card-light) !important;
  font-weight: 400 !important;
  background: transparent !important;
}
.dr-dd-item .dr-dd-item-icon { color: var(--fg-faint) !important; }
.dr-dd-item:hover {
  background: var(--overlay-w-04) !important;
  color: var(--fg-inverse) !important;
}
.dr-dd-item:hover .dr-dd-item-icon { color: var(--border-card-light) !important; }
.dr-dd-item.active {
  background: var(--accent-primary-soft-08) !important;
  color: var(--fg-inverse) !important;
  font-weight: 600 !important;
}
.dr-dd-item.active .dr-dd-item-icon { color: var(--fg-inverse) !important; }

/* Chat history hover */

/* All Dashboards hub tightening */

/* Fix 27: Route Start marker pill/badge */
.rt-leg.rt-leg--start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--accent-primary-soft-10);
  border: 1px solid var(--accent-primary-soft-35);
  color: var(--accent-primary-wash);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── Priority Fix P2: Top status pills - force 999px radius everywhere ─
   Covers #etl-pill, #brain-pill, #sync-indicator. Even on mobile
   breakpoints where older rules inject border-radius: 8px.
   ──────────────────── */
.topbar .pill, .topbar .pill--status, .topbar [class*="pill"], .topnav [class*="pill"], #etl-pill, #brain-pill, .brain-pill, #sync-indicator {
  border-radius: 999px !important;
}

/* ── Priority Fix P3: Route + Chat nav - only ONE item looks "selected" ─
   Chat history .active must be visually subordinate to route nav .active.
   Route nav active gets the full blue chip; CH active is a whisper.
   ──────────────────── */
/* De-emphasise the sidebar chat-history button when it has .active but
   user is NOT on the /chats route (i.e. another nav is primary). */
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active:not(:focus) {
  background: rgba(255,255,255,0.03) !important;
  border-color: transparent !important;
  font-weight: 400 !important;
}
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active:not(:focus) .sqi-label {
  color: #8A8A8A !important;
  font-weight: 400 !important;
}
html body aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active:not(:focus) .sqi-icon {
  color: #8A8A8A !important;
}
/* When explicitly on /chats (route-chats body class), restore active styling */
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active {
  background: rgba(33,150,243,0.10) !important;
  border-color: rgba(33,150,243,0.20) !important;
}
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-label,
html body.route-chats aside.sidebar#sidebar.sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.active .sqi-icon {
  color: #E3E1DD !important;
}

aside.sidebar#sidebar .footer-org-tier-badge, aside.sidebar#sidebar .footer-org-tier-badge[data-tier], aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"], aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-tier-badge {
  background: var(--accent-primary-soft-10) !important;
  color: var(--fg-muted-warm) !important;
  border: 1px solid rgba(33,150,243,0.20) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  opacity: 0.75;
}

/* ── Views chip fix: kill the bright/blooming active chip ──────────────
   Root causes:
   (a) Line 28521: body .gfp-item.active { color: #2196F3 } - blue TEXT,
  looks over-saturated on dark bg
   (b) Lines 2995, 6105: box-shadow: 0 2px 8px rgba(25,118,210,0.28) -
  outer glow blooms and makes it look like a lighter sky blue
   (c) Line 2891: color: #DFF6E6 (light mint/green text) on semi-transparent bg
   Fix: authoritative override - solid #2196F3 bg, white text, NO outer glow.
   Applied at maximum specificity to win on all breakpoints.
   ──────────────────── */
html body .gl-floating-pill .gfp-item.active,
html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active,
html body header.topbar .gl-floating-pill--topbar .gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active span,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar a.gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar button.gfp-item.active,
html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item[aria-current="page"]{
  background: #2196F3 !important;
  background-color: #2196F3 !important;
  background-image: none !important;
  color: #FFF !important;
  font-weight: 600 !important;
  box-shadow: none !important;         /* kill ALL glow - no outer bloom */
  border: none !important;
  border-radius: 999px !important;
}
/* Also fix the base non-topbar pill active (line 28521 - blue text):
   it shows as the floating pill on pages without the topbar container */
html body .gl-floating-pill .gfp-item.active:not(.gfp-item--newchat) {
  color: #FFF !important;
  background: #2196F3 !important;
  box-shadow: none !important;
}

/* Inactive chips: clean dark grey, consistent with ellipses button */
html body .gl-floating-pill .gfp-item:not(.active),
html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item:not(.active),
html body header.topbar .gl-floating-pill--topbar .gfp-item:not(.active) {
  color: #B8B8B8 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Segmented control consistency: all 2-chip toggles match ───────────
   Any route-viewbtn, segment-btn, or tab-btn with .is-active also
   gets the flat #2196F3 treatment (no glow).
   ──────────────────── */
.route-viewbtn.is-active {
  background: var(--brand-blue-pure) !important;
  color: var(--fg-inverse) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* BUG 1: Force brand blue #2196F3 on ALL active chips at ALL mobile breakpoints.
   v40.5cl fixed desktop (wrapped in @media (min-width: 720px)). Mobile breakpoints
   had stale overrides: @media (max-width: 820px) at line 27449 set only color:
   #E5E5E5 with no background, and @media (max-width: 820px) at line 27455 set
   background: #1976D2 (darker blue, no !important). Both are now overridden below.
   ──────────────────── */
/* [moved to mobile-v2.css v41.58k — was L28659-L28704 @media (max-width: 768px)] */

/* BUG 2: route-viewswitch itself must not block touch events */
.route-viewswitch {
  touch-action: manipulation;
  pointer-events: auto;
}

/* Empty state UX for Route view when no stops are returned */
.route-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 64px;
  gap: 14px;
  text-align: center;
}


.route-empty-state__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}



/* ============================================================
   === v40.5cp - Mobile chip + color polish ===

   BUG 1: Chat/Views pill - solid fills, no border/outline anywhere.
  - Inactive: solid #2A2A2A, no border, text #E5E5E5
  - Active:   solid #2196F3, no border, text #FFF fw 600
  - Container (.mt-switch): transparent, no border, no bg

   BUG 3 (belt-and-suspenders): /mo text always #2196F3
   BUG 4: All route toolbar chips → border-radius 999px
   ============================================================ */

/* BUG 1 - container: fully transparent, no border */
/* v41.58h: component:mobile-topnav block L30561-L30586 moved to mobile-v2.css */

/* v41.58h: component:mobile-topnav block L30588-L30616 moved to mobile-v2.css */

/* BUG 3 - bulletproof /mo color override: brand blue, never cyan/green */
body [class*="monthly"], body .rt-price-mo, body .rsm-acct-mo { color: var(--brand-blue-pure) !important; }

/* BUG 4 - all route toolbar chips/buttons: fully rounded pills */
/* v41.58h: misc block L28964-L28968 moved to mobile-v2.css */

/* ── Fix 1: Dashboards dropdown - rectangular card (14px), NOT pill ──────── */
html body .dr-dd-menu, html body .dr-dd-menu--pill {
  border-radius: 14px !important;
}
/* Internal items keep their own smaller radius */
html body .dr-dd-menu .dr-dd-item {
  border-radius: 8px !important;
}

html body #sync-indicator, html body #brain-pill, html body #etl-pill, html body [class*="status-pill"], html body .topbar #sync-indicator, html body .topbar #brain-pill, html body .topbar #etl-pill, html body .topbar .pill.pill--glass, html body .topbar #etl-pill.pill--glass, html body .topbar #sync-indicator.pill--glass, html body .topbar #brain-pill.pill--glass, html body .topbar .pill.pill--status, html body .topbar .pill.pill--status.pill--glass {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #2A2A2A !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #E5E5E5 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
html body .topbar #sync-indicator *,
html body .topbar #brain-pill *,
html body .topbar #etl-pill * {
  color: #E5E5E5 !important;
}
/* Keep the blue dot */
html body .topbar #etl-pill[data-state="idle"] .etl-dot,
html body .topbar #etl-pill .etl-dot {
  background: #2196F3 !important;
  box-shadow: 0 0 8px rgba(33,150,243,0.55) !important;
}
html body .topbar #sync-indicator .sync-dot,
html body .topbar #sync-indicator .sync-dot--ok {
  background: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.22) !important;
}

/* ── Fix 3: Ask page - hide floating Create chat + pencil FAB ─────────────── */
/* Hide the pencil/edit new-chat button next to composer */
html body .ai-new-chat-btn {
  display: none !important;
}
/* Hide any floating pill newchat item on the ask page only */

/* Hide any white square logo chip floating overlay on ask view */


/* ── Fix 4: Overview - kill white chip borders on Quick Actions ───────────── */
html body #hero-quick-actions .qa-btn, html body .dashboard-view #hero-quick-actions button {
  background: rgba(33,150,243,0.08) !important;
  border: 1px solid rgba(33,150,243,0.18) !important;
  color: #E5E5E5 !important;
  box-shadow: none !important;
}
html body .quick-actions-grid button:hover, html body .quick-actions-grid a:hover, html body #hero-quick-actions .qa-btn:hover, html body .dashboard-view #hero-quick-actions button:hover {
  background: rgba(33,150,243,0.14) !important;
  border-color: rgba(33,150,243,0.30) !important;
  color: #E5E5E5 !important;
}
/* Remove any white outline on overview cards */
html body .dashboard-view .card, html body .dashboard-view .kpi-card {
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Fix 5: Automations - opaque blue glass style (like Route) ────────────── */
/* Row/card border: subtle white, not blue */
html body .automation-row,
html body .automation-card,
html body .automations-list > *,
html body #automations-list .automation-row,
html body #automations-section .automation-row,
html body .automations-view .automation-row,
html body .automations-view .automation-card {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}
html body .automation-row:hover,
html body .automation-card:hover {
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20) !important;
  transform: none !important;
}
/* Status pills WIRED / PAUSED - opaque blue tint */
html body [class*="automation-status-pill"] {
  background: rgba(33,150,243,0.10) !important;
  color: #2196F3 !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}
/* Run now button - opaque tint */
html body [class*="run-now"] {
  background: rgba(33,150,243,0.10) !important;
  color: #2196F3 !important;
  border: 1px solid rgba(33,150,243,0.25) !important;
  border-radius: 999px !important;
}
/* View history - ghost */
html body [class*="view-history"] {
  background: transparent !important;
  color: #B8B8B8 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
}
/* Auto-status dot on = brand blue */


/* ── Fix 6: Route - dotted line centered + stop circle exact #2196F3 ─────── */


/* Active overrides the grey above */
html body .route-stop.is-current .route-stop-num,
html body .route-stop.is-selected .route-stop-num {
    background: #2196f3 !important;
    color: #fff !important;
}

/* ── Fix 7: Connectors - center text + remove between-chip color ────────── */
/* Center the header block */
html body .gl-cn-header {
  text-align: center !important;
}
html body .gl-cn-title {
  color: #E5E5E5 !important;
  text-align: center !important;
}
html body .gl-cn-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #B8B8B8 !important;
}
html body .gl-cn-stats {
  display: flex !important;
  justify-content: center !important;
  color: #B8B8B8 !important;
}
html body .gl-cn-stats .gl-cn-stat strong {
  color: #E5E5E5 !important;
}
/* Section category labels - center */
html body .gl-cn-cat, html body .gl-cn-view .gl-cn-cat {
  text-align: center !important;
  color: #8A8A8A !important;
}
/* Remove between-card border/shadow */
html body .gl-cn-card, html body [class*="data-source-card"] {
  border-bottom: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: #1F2121 !important;
  border-radius: 12px !important;
}
/* Connect button - opaque blue tint */
html body .gl-cn-card button, html body [class*="data-source"] .btn-connect, html body [class*="ds-connect-btn"] {
  background: rgba(33,150,243,0.10) !important;
  color: #2196F3 !important;
  border: 1px solid rgba(33,150,243,0.25) !important;
  border-radius: 999px !important;
}
html body .gl-cn-card button:hover {
  background: rgba(33,150,243,0.16) !important;
}

/* ── Fix 8: Settings - remove double borders, add breathing room ──────────── */


/* Settings panel labels (existing toggle-row style) */



/* ── Fix 9: BI dashboards - retry button opaque glass style ──────────────── */
/* Override the solid #2196F3 retry button */
html body .bi-retry-btn {
  background: rgba(33,150,243,0.10) !important;
  color: #2196F3 !important;
  border: 1px solid rgba(33,150,243,0.25) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}
html body .bi-retry-btn:hover {
  background: rgba(33,150,243,0.18) !important;
  color: #42A5F5 !important;
}

/* ── Fix 10: Chat history - no border default, no overflow cut-off ────────── */
/* Remove the "always-hover card" look from #chat-history-list items */
html body #chat-history-list .history-item {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
}
html body #chat-history-list .history-item.active,
html body #chat-history-list .history-item.is-active,
html body #chat-history-list .history-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    color: #fff !important;
}
/* Chat history container - allow scroll, remove height cap cut-off */
html body #chat-history-list,
html body .sidebar-history,
html body .sidebar #sidebar-history-list {
  overflow-y: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
/* Also fix the chat-history-item / sidebar-chat-item classes from recent patches */

/* ── Fix 11: Enterprise pill - white bg, black text, bold ────────────────── */
html body .footer-org-tier-badge, html body .footer-org-tier-badge[data-tier="enterprise"], html body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"], html body .account-menu-tier-badge[data-tier="enterprise"], html body aside.sidebar .account-menu .account-menu-tier-badge[data-tier="enterprise"] {
  background: #FFF !important;
  background-image: none !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ── Sidebar Fix 1: Remove white/light bar on left edge ──────────────────── */
/* The inset box-shadow at line 1495 creates a right-edge line that reads
   as a left bar when the sidebar is at the left. Kill all sidebar borders
   and inset shadows in dark mode. */
html body aside.sidebar,
html body.sidebar-collapsed aside.sidebar,
html body aside.sidebar#sidebar {
  border-left: none !important;
  border-right: 1px solid #2A2A2A !important;
  box-shadow: none !important;
  /* Specifically kill the inset-right glow (line 1495) */
}
/* Also nuke the inset left-edge white from any ::before */
html body aside.sidebar::before,
html body.sidebar-collapsed aside.sidebar::before {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}
/* Light-mode sidebar border-right was white - override to dark */
html body aside.sidebar {
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Sidebar Fix 2: Top logo cell - correct size + no halo ───────────────── */
/* Collapsed: 40px square, transparent bg, no glow, 10px radius (matches other cells) */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Logo SVG at rest: 70% opacity, full on hover */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-svg {
  opacity: 0.7 !important;
  transition: opacity 140ms ease !important;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover .brand-logo-svg {
  opacity: 0 !important;
}
/* Logo on hover: subtle blue tint, 10px radius */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover {
  background: rgba(33,150,243,0.10) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ── Sidebar Fix 3: Logo becomes expand affordance in collapsed state ──────── */
/* Expand arrow (already exists in HTML as .brand-expand-arrow): show on hover */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow {
  display: block !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #2196F3 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover .brand-expand-arrow {
  opacity: 1 !important;
}
/* Expanded state: NEVER show expand arrow (normal home click) */
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-expand-arrow {
  display: none !important;
}
/* Expanded state: logo at full opacity, no halo */
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only .brand-logo-svg {
  opacity: 1 !important;
}
html body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover {
  background: transparent !important;
  box-shadow: none !important;
}
/* Cursor + tooltip for collapsed logo */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only {
  cursor: pointer !important;
}

/* ── Sidebar Fix 4: Profile avatar centered in collapsed rail ────────────── */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer--v1940 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 0 !important;
  gap: 8px !important;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-avatar {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-self: center !important;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-link,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 !important;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-notif-btn,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Sidebar Fix 5: Correct flex layout - DO NOT overflow:hidden the sidebar ─ */
/* Root cause of regression: overflow:hidden on the sidebar itself clips flex  */
/* children. The sidebar already has display:flex + height:100vh at line 557.  */
/* Only override what needs changing: ensure scroll-section collapses properly.  */
html body aside.sidebar#sidebar .sidebar-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
html body aside.sidebar#sidebar .sidebar-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}
/* Header and footer: never shrink */
html body aside.sidebar#sidebar .sidebar-footer,
html body aside.sidebar#sidebar .sidebar-footer--v1940,
html body aside.sidebar#sidebar .sidebar-header,
html body aside.sidebar#sidebar .sidebar-header--v1944 {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* ── Sidebar Fix 6: Active icon cell - brand blue tint (not grey square) ──── */
/* Override the rgba(255,255,255,0.06) flat grey - use brand blue tint */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item[aria-current="page"],
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active {
  background: rgba(33,150,243,0.12) !important;
  background-color: rgba(33,150,243,0.12) !important;
  background-image: none !important;
  border-radius: 10px !important;
}
/* Active icon → brand blue */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active .sqi-icon,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active .sqi-icon {
  color: #2196F3 !important;
  stroke: #2196F3 !important;
}
/* Also override dark theme grey-square rule (lines 21009+) */
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-open,
html[data-app-theme="dark"] body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active {
  background: rgba(33,150,243,0.12) !important;
  background-color: rgba(33,150,243,0.12) !important;
}
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html[data-app-theme="dark"] body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon {
  color: #2196F3 !important;
  stroke: #2196F3 !important;
}

/* ============================================================
   === v40.5cr - Critical Regression Fixes ===
   Strategy: surgical edits + targeted overrides.
   Root causes addressed:
   1. Sidebar overflow:hidden !important clipping nav items (FIXED above)
   2. Collapsed sidebar icon color too dark (#374151 on #2A334A bg)
   3. Topbar nav pill capsule shape (999px) - users want rectangular
   4. Top status chips visual cleanup
   5. Sidebar box-shadow white edge still present from line 1495
   ============================================================ */

/* Line 5380 sets rgba(55,65,81,0.9) which is nearly invisible on #2A334A.  */
/* Override to light grey. */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon svg {
  color: #B8B8B8 !important;
  stroke: currentColor !important;
}
/* Active collapsed icon stays brand blue */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active .sqi-icon {
  color: #2196F3 !important;
  stroke: #2196F3 !important;
}
/* Hover → slightly brighter */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item:hover .sqi-icon {
  color: #E5E5E5 !important;
}

/* The gl-floating-pill--topbar container is the whole nav bar.  */
/* User wants it to look like a card/bar, not a giant pill.  */
html body header.topbar .gl-floating-pill.gl-floating-pill--topbar,
html body .topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar {
  border-radius: 16px !important;
}
/* Items inside keep 8px */
html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item,
html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active,
html body .gl-floating-pill.gl-floating-pill--topbar .dr-dd-trigger {
  border-radius: 10px !important;
}

/* Both rules at line 6136 (dark glass) and 32288 (transparent) fight.  */
/* Use max specificity to nail it: dark bg, no border, clean text.  */
html body header.topbar .topbar-right .status-row > .pill.pill--glass,
html body header.topbar .topbar-right .status-row > .pill.pill--status,
html body header.topbar .topbar-right .status-row > #etl-pill,
html body header.topbar .topbar-right .status-row > #brain-pill,
html body header.topbar .topbar-right .status-row > #sync-indicator,
html body header.topbar .topbar-right .status-row > .pill-clock {
  background: rgba(31,33,33,0.85) !important;
  background-color: rgba(31,33,33,0.85) !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #B8B8B8 !important;
  border-radius: 999px !important;
}
html body header.topbar .topbar-right .status-row > .pill.pill--glass *,
html body header.topbar .topbar-right .status-row > #etl-pill *,
html body header.topbar .topbar-right .status-row > #sync-indicator *,
html body header.topbar .topbar-right .status-row > .pill-clock * {
  color: #B8B8B8 !important;
}
/* Keep dots blue */
html body header.topbar .topbar-right .status-row .etl-dot,
html body header.topbar .topbar-right .status-row .sync-dot,
html body header.topbar .topbar-right .status-row .sync-dot--ok {
  background: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.22) !important;
}

/* Line 1495 adds inset -1px 0 0 white. Kill it completely. */
html body aside.sidebar#sidebar,
html body.sidebar-collapsed aside.sidebar#sidebar {
  box-shadow: none !important;
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* Override ALL the blue gradient rules with max specificity  */
html[data-app-theme="dark"] body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"],
html body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge[data-tier="enterprise"],
html body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"],
html body .footer-org-tier-badge[data-tier="enterprise"],
html body .account-menu-tier-badge[data-tier="enterprise"] {
  background: #FFF !important;
  background-image: none !important;
  color: #000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* The outer pill wrapper clips at 16px (fix 2 above), dropdown itself: 14px */
html body .dr-dd-menu,
html body .dr-dd-menu--pill,
html body header.topbar .gl-floating-pill .dr-dd-menu,
html body .topbar .gl-floating-pill--topbar .dr-dd-menu {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* The .main .card rule at line 754 applies border-radius:14px!important.  */
/* msg-view is a <section> not .card but msg-split children may get it.  */
html body .msg-view,
html body .msg-split,
html body .msg-left-pane,
html body .msg-right-pane,
html body .msg-thread-pane {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}

html body .quick-actions-grid button, html body .quick-actions-grid a {
  background: rgba(33,150,243,0.08) !important;
  border: 1px solid rgba(33,150,243,0.18) !important;
  border-top: 1px solid rgba(33,150,243,0.18) !important;
  border-left: 1px solid rgba(33,150,243,0.18) !important;
  color: #E5E5E5 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-label,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active .sqi-label {
  color: #2196F3 !important;
}
/* Default (inactive) items: visible grey */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-label {
  color: #B8B8B8 !important;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item:hover .sqi-label {
  color: #E5E5E5 !important;
}

html body #chat-history-list .history-item,
html body .sidebar #sidebar-history-list .history-item {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body #chat-history-list .history-item:hover,
html body .sidebar #sidebar-history-list .history-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
}

/* Wrapper */
.rt-cal {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-charcoal-deep);
  border-radius: 12px;
  border: 1px solid var(--surface-charcoal);
  overflow: hidden;
  position: relative;
}

/* Each hour row */
.rt-cal-hour {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 56px;
  border-bottom: 1px solid var(--surface-charcoal);
  position: relative;
}
.rt-cal-hour:last-child {
  border-bottom: none;
}

/* Time label column */
.rt-cal-time {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px 8px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: #5A5A5A;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-right: 1px solid var(--surface-charcoal);
}

/* Event area (right of time label) */
.rt-cal-events {
  flex: 1;
  position: relative;
  min-height: 56px;

  padding: 0 4px;
  overflow: visible;
}

/* Stop block (calendar event) */
.rt-cal-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--accent-primary-soft-10);
  border-left: 3px solid var(--brand-blue-pure);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
}
.rt-cal-block:hover {
  background: var(--accent-primary-soft-18);
}

.rt-cal-block.is-selected {
  background: var(--brand-blue-pure) !important;
  border-left-color: var(--accent-primary-deep) !important;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.45);
}
.rt-cal-block.is-selected:hover {
  background: var(--brand-blue-hover-pure) !important;
}
.rt-cal-block.is-selected .rt-cal-block-name,
.rt-cal-block.is-selected .rt-cal-block-addr,
.rt-cal-block.is-selected .rt-cal-block-price,
.rt-cal-block.is-selected .rt-cal-block-time {
  color: var(--fg-inverse) !important;
}

/* Block content */
.rt-cal-block-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-cal-block-addr {
  font-size: 11px;
  color: var(--fg-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-cal-block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.rt-cal-block-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-blue-pure);
}
.rt-cal-block-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--overlay-w-08);
  color: var(--fg-muted-warm);
}

/* Current-time indicator */
.rt-cal-now-line {
  position: absolute;
  left: 52px;
  right: 0;
  height: 2px;
  background: #EF4444;
  z-index: 10;
  pointer-events: none;
}
.rt-cal-now-line::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: -3px;
}

/* Calendar header */
.rt-cal-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--surface-charcoal);
  background: #1A1B1B;
}
.rt-cal-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--border-card-light);
  letter-spacing: 0.02em;
}
.rt-cal-header-sub {
  font-size: 11px;
  color: #5B7CB8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Totals row reuse */
.rt-totals--cal {
  margin-top: 8px;
}

.rt-cal-block-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted-alpha);
  margin-top: auto;
  padding-top: 2px;
  letter-spacing: 0.02em;
}
/* In absolute-positioned blocks, stack content vertically */
.rt-cal-events { overflow: visible; }
.rt-cal-block { overflow: hidden; }
.rt-cal-footer {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: #5A5A5A;
  padding: 6px 0 2px;
  letter-spacing: 0.01em;
}

/* ════════════════════
   v40.11 - Route CRM cards: customer sheet (reuses Hood sheet component
   classes: .hood-sheet-inner, .hood-sheet-header, .hood-sheet-chead,
   .hood-sheet-kv*, .hood-action-btn*, which are NOT scoped to
   body.route-hood and are safe to reuse here as-is). This block only adds
   the OUTER bottom-sheet/right-drawer positioning + solid Nexus surface
   for the Route page, since the existing outer rules live under
   body.route-hood and must not be applied to /route (that class flips on
   full-bleed map layout side effects Route does not want).
   ════════════════════ */

.rt-crm-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: #1C1B19;
  border-top: 1px solid var(--border-strong-warmer);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px var(--shadow-alpha-55);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
  max-height: 82svh;
  overflow-y: auto;
  color: #ECEBE9;
}
.rt-crm-sheet.is-open { transform: translateY(0); }
.rt-crm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--shadow-alpha-45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rt-crm-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.rt-crm-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong-warm);
  border-radius: 999px;
  margin: 10px auto 0;
}
/* Quick action row: 5 cols x 68px, sticky under the header. */
.rt-crm-quickrow {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #26251F;
  border-bottom: 1px solid var(--border-strong-warmer);
}
.rt-crm-qbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 68px;
  min-height: 44px;
  background: #1C1B19;
  border: none;
  color: #A0A09E;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  touch-action: manipulation;
}
.rt-crm-qbtn:hover, .rt-crm-qbtn:active {
  background: #26251F;
  color: #ECEBE9;
}

.rt-crm-qbtn svg { color: var(--brand-blue-pure); flex-shrink: 0; }
.rt-crm-qbtn-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A0A09E;
}

/* Drawer (Log Note / Reschedule). Slides up over the sheet body. */
.rt-crm-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* above the sheet (z-index 40) and any FAB/composer */
  background: #1C1B19;
  border-top: 1px solid var(--border-strong-warmer);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -10px 30px var(--shadow-alpha-50);
  pointer-events: auto;
}
.rt-crm-drawer.is-open { transform: translateY(0); }
.rt-crm-drawer-ta {
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
  touch-action: manipulation !important;
}
.rt-crm-drawer-btn { pointer-events: auto !important; }
.rt-crm-drawer-title {
  font-size: 13px;
  font-weight: 700;
  color: #ECEBE9;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.rt-crm-drawer-ta {
  width: 100%;
  min-height: 72px;
  background: #26251F;
  border: 1px solid var(--border-strong-warmer);
  border-radius: 10px;
  color: #ECEBE9;
  font-size: 13px;
  padding: 10px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.rt-crm-drawer-ta:focus {
  outline: none;
  border-color: var(--brand-blue-pure);
  background: rgba(33,150,243,0.06);
}
.rt-crm-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.rt-crm-drawer-btn {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong-warmer);
  background: #26251F;
  color: #A0A09E;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rt-crm-drawer-btn--primary {
  background: var(--brand-blue-pure);
  border-color: var(--brand-blue-pure);
  color: var(--fg-inverse);
}
.rt-crm-drawer-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.rt-crm-datechip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rt-crm-datechip {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong-warmer);
  background: #26251F;
  color: #A0A09E;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rt-crm-datechip.is-active {
  background: var(--accent-primary-soft-18);
  border-color: var(--brand-blue-pure);
  color: var(--brand-blue-pure);
}
.rt-crm-datechip-custom {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong-warmer);
  background: #26251F;
  color: #ECEBE9;
  font-size: 12px;
  font-family: inherit;
}

.rt-crm-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(16,185,129,0.95);
  color: var(--fg-inverse);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rt-crm-toast.is-shown { opacity: 1; }

/* Rep tools (knock/door-type/notes) relocated into the CRM sheet. Reuses
   the existing .rsm-knock-*, .rsm-doortype-*, .rsm-notes-* component CSS
   defined earlier in this Route section; only the section wrapper here is
   new, giving it the same card padding rhythm as the other CRM sections. */
.rt-crm-reptools {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-strong-warmer);
}

.hood-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h, 0px));
  background: var(--surface-charcoal-deep);
  position: relative;
  overflow: hidden;
}

/* Desktop: sidebar is present - subtract sidebar width from height calc */






.hood-loading {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  right: auto;
  z-index: 30;
  pointer-events: none;
}
.hood-loading-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}


.hood-empty {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 26, 26, 0.92);
  border: 1px solid var(--surface-charcoal);
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  max-width: 320px;
  z-index: 20;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

/* ── Bottom sheet (mobile default) / Right drawer (desktop) ─────────────── */

.hood-sheet.is-open {
  transform: translateY(0);
}


/* Desktop: right drawer instead of bottom sheet */
@media (min-width: 769px) {
  
  .hood-sheet.is-open {
    transform: translateX(0);
  }
  .hood-sheet-backdrop {
    display: none !important;
  }
}



/* FIX 6 - no transition while dragging; the release snap uses the base transition. */

.hood-sheet-header {
  padding: 12px 48px 10px 16px;
  border-bottom: 1px solid var(--surface-charcoal);
}




/* Status row */
.hood-sheet-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 6px;
}
.hood-sheet-status-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* Sections */

.hood-sheet-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4A4A4A;
  margin-bottom: 8px;
}

/* Knock history */

/* Customer card */

/* KV list */
.hood-sheet-kv { display: flex; flex-direction: column; gap: 4px; }
.hood-sheet-kv-row { display: flex; align-items: center; gap: 8px; }





/* Skeleton loader shimmer, reuses the same sk keyframe as the global
   .skeleton-line pattern but scoped to the hood sheet's dark surface. */
.hood-sheet-inner { display: flex; flex-direction: column; position: relative; }



/* Subscriptions */
.hood-sub-list { display: flex; flex-direction: column; gap: 10px; }
.hood-sub-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--overlay-w-03);
  border: 1px solid var(--overlay-w-08);
}
.hood-sub-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }



.hood-sub-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.hood-sub-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}




/* Recent Service / Upcoming appointment rows */
.hood-appt-list { display: flex; flex-direction: column; gap: 6px; }
.hood-appt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}





/* Body text for pins */

/* Sheet loading/error */
.hood-sheet-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  gap: 10px;
  color: #5A5A5A;
  font-size: 13px;
}



.hood-sheet-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hood-action-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: var(--surface-charcoal);
  border: 1px solid var(--border-strong-warm);
  border-radius: 8px;
  color: #D0D0D0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}


.hood-pin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  padding: 16px;
}
.hood-pin-modal-inner {
  background: var(--bg-card);
  border: 1px solid #2E3030;
  border-radius: 16px;
  box-shadow: 0 12px 40px var(--shadow-alpha-50);
  padding: 20px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hood-pin-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #5A5A5A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}



.hood-pin-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}



.hood-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(25,26,26,0.95);
  border: 1px solid #2E3030;
  border-radius: 20px;
  padding: 9px 18px;
  font-size: 13px;
  color: #D0D0D0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}

/* v41.58h: route:hood block L30453-L30458 moved to mobile-v2.css */

/* FIX 2: Hood toolbar - float over map on mobile
   On mobile the .hood-page is a flex column but the mobile-topnav is
   position:fixed at top:0 with z-index 121. The .hood-toolbar is in
   normal flow at the top of .hood-page, which itself starts below the
   topbar on desktop but on mobile main-content has no padding-top for
   /hood (we zero it for the full-bleed map). Fix: make the toolbar
   position:absolute so it floats over the map, placed below the 64px
   topnav. The map fills 100% and the toolbar floats on top. */
/* v41.58h: route:hood block L30468-L30490 moved to mobile-v2.css */

/* ── FIX 1: Kill body::before gradient mask on /hood entirely ──────────── */



/* ── Kill body::before mask on /hood absolutely ──────────────────── */


/* ── Disable pull-to-refresh (overscroll) on hood page ─────────────────── */


/* ── Remove padding from main-content on /hood ──────────────────── */


/* ════════════════════
   HOOD PAGE LAYOUT
   ════════════════════ */

/* Full-screen hood page container */


.tactile-press {
  transition: transform 60ms ease-out;
  touch-action: manipulation;
}
.tactile-press:active {
  transform: scale(0.96);
}


/* ════════════════════
   LOADING SPINNER
   ════════════════════ */

.hood-loading {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(23,22,20,0.88);
  border: 1px solid var(--overlay-w-08);
  font-size: 12px;
  color: #CDCCCA;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hood-loading-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #CDCCCA;
}

@keyframes hood-spin { to { transform: rotate(360deg); } }

/* ════════════════════
   BOTTOM SHEET
   ════════════════════ */




/* v41.58h: route:hood block L30620-L30627 moved to mobile-v2.css */
/* FIX 6 (PART D) - kill the transition mid-drag so follow-finger is 1:1.
   Route-scoped (0,3,1) to out-specify body.route-hood .hood-sheet (0,2,1). */



/* Desktop: right drawer */
/* PART F - clear the iOS home indicator on the scrollable sheet body. */


.hood-sheet-expand-btn {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  margin: 8px auto 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--border-overlay-10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--brand-blue-pure);
  cursor: pointer;
}


.hood-sheet-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 60px 10px 16px;
  border-bottom: 1px solid var(--overlay-w-08);
}




.hood-sheet-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
}
.hood-sheet-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}




.hood-sheet-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #B0AFAD;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hood-sheet-history { display: flex; flex-direction: column; gap: 6px; }
.hood-sheet-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
}





.hood-sheet-customer-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }




.hood-sheet-kv { display: flex; flex-direction: column; gap: 6px; }
.hood-sheet-kv-row { display: flex; align-items: flex-start; gap: 8px; }





.hood-sheet-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}





.hood-sheet-action-group { display: flex; gap: 8px; flex-wrap: wrap; }






.hood-action-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: #242424;
  border: 1px solid var(--fg-primary-light);
  border-radius: 8px;
  color: #D0D0D0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s;
}




/* Parcel intel */
.hood-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}



.hood-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  background: var(--accent-primary-soft-15);
  border: 1px solid var(--accent-primary-soft-35);
  color: var(--brand-blue-pure);
  cursor: pointer;
  white-space: nowrap;
}

.hood-chip svg { width: 14px; height: 14px; }

.hood-parcel-explain-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--accent-primary-soft-08);
  border: 1px solid rgba(33,150,243,0.25);
  border-radius: 6px;
  color: var(--brand-blue-pure);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}




.hood-explain-result { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }



/* ════════════════════
   DROP-PIN MODAL
   ════════════════════ */

.hood-pin-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}


.hood-pin-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6B6B6B;
  margin-bottom: 12px;
}




.hood-pin-modal-actions { display: flex; gap: 8px; margin-top: 4px; }






/* ════════════════════
   TOAST
   ════════════════════ */

.hood-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 60;
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--border-card-light);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}


/* ════════════════════
   EMPTY STATE
   ════════════════════ */

.hood-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}



/* ── FIX 1: Hood toolbar top offset accounts for safe-area-inset-top ────
   The mobile-topnav has:
  padding-top: max(10px, env(safe-area-inset-top, 0px) + 8px)
  content height: 52px  (mt-switch pill is tallest element)
  padding-bottom: 10px
   → topnav bottom = max(10px, SAI + 8px) + 52px + 10px
   → toolbar top   = topnav bottom + 8px gap
  = calc(max(10px, env(safe-area-inset-top, 0px) + 8px) + 70px)
   Previous value was a flat 64px - too shallow on any iPhone with notch/DI.
   Using position:fixed (was absolute) so toolbar stays put while map pans. */
/* v41.58h: route:hood block L31057-L31064 moved to mobile-v2.css */

/* Body scroll-lock while the settings panel is open */


/* Backdrop */


/* Panel - mobile bottom sheet */
.hood-settings {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #1A1B1B;
  border-top: 1px solid var(--surface-charcoal);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
  max-height: 88svh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px var(--shadow-alpha-50);
}
.hood-settings.is-open { transform: translateY(0); }

/* Panel - desktop right drawer */
.hood-set-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.hood-set-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}



/* Scrollable body */




/* Section headers: 12px uppercase 600, 0.5px tracking, muted. */


/* Toggle rows (icon / label / switch). Whole row is a tap target (44px min). */
.hood-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 10px;
  margin: 2px -10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Sub-rows: indent 40px, connected to the parent by a thin left border. */

.hood-toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #797876;
  transition: color 0.2s ease;
}
/* Icon reads muted when off, accent when the row's switch is on. */




.hood-toggle-hint {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #797876;
  margin-top: 2px;
  line-height: 1.3;
}

/* iOS-native switch: 44x26 track, 22 thumb, 3px inset, teal on / gray off, spring toggle. */






/* Filter field + chips (status / time range / map type) */



.hood-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hood-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong-warmer);
  background: transparent;
  color: #CDCCCA;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.hood-filter-chip:hover { border-color: var(--accent-primary-light); color: var(--fg-primary-cream); }
.hood-filter-chip.is-active {
  background: var(--brand-blue-pure);
  border-color: var(--brand-blue-pure);
  color: var(--fg-inverse);
}

/* Light theme (data-app-theme=light) palette for the hood settings controls.
   The hood panel base is dark; these apply when the panel adopts the light theme. */












[data-app-theme="light"] .hood-filter-chip:hover { border-color: #1976D2; color: #1976D2; }
[data-app-theme="light"] .hood-filter-chip.is-active { background: #1976D2; border-color: #1976D2; color: #FFF; }
















/* Footer */
.hood-set-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}





.hood-set-refresh {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--accent-primary-soft-35);
  background: var(--accent-primary-soft-12);
  color: var(--accent-primary-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}





.hood-locate-fab {
  position: absolute;
  bottom: 24px;
  right: 16px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(33,150,243,0.95);
  color: var(--fg-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  font-family: inherit;
  transition: background 0.12s, box-shadow 0.12s;
}

@keyframes hood-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33,150,243,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(33,150,243,0); }
}

/* v41.90: Hood Settings gear FAB (top-right of map).
   Desktop only -- mobile reaches settings via the topnav kebab menu. Matches
   the Google Maps native Layers/settings FAB placement. Sits at top-right
   below the topbar so it never collides with the address search pill
   (top-left on desktop). */
.hood-settings-fab {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(23, 22, 20, 0.92);
  color: #E5E5E5;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

@media (min-width: 900px) {
  
}

.hood-pill-refresh {
  position: relative;
  overflow: hidden;

  min-width: 30px;
  min-height: 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Mobile variant: match .mt-kebab-chip 44×44 hit target so it visually
   sits inside the same chip row as the Chat/Views switch and gear. */




/* Idle state: quick 360 spin on click / at start of refresh. */

@keyframes hood-pill-refresh-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Cloud-sync up/down animation. Two arrow-pairs, offset in time so the eye
   reads it as data going up while data comes down - same rhythm as Sales
   Rabbit's refresh icon. */


@keyframes hpr-cloud-up {
  0%, 100% { transform: translateY(2px); opacity: 0.55; }
  50%      { transform: translateY(-2px); opacity: 1; }
}
@keyframes hpr-cloud-dn {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50%      { transform: translateY(2px); opacity: 1; }
}
/* Only animate the sync arrows while actively refreshing. */


@media (prefers-reduced-motion: reduce) {
  
}

.hood-loc-dot { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 10000; }


@keyframes hood-loc-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.hood-loc-cone {
  position: absolute; left: -40px; top: -40px;
  width: 80px; height: 80px;
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
  display: none; pointer-events: none;
}

.hood-compass-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  background: rgba(15, 20, 26, 0.96);
  border: 1px solid var(--accent-primary-soft-35);
  border-radius: 12px;
  box-shadow: 0 8px 32px var(--shadow-alpha-45);
}

.hood-compass-banner-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }




/* ── Customer sheet additions (FIX 4) ── */


/* v41 customer sheet header redesign (IMG_2486). The shared .hood-sheet-header
   is a flex row; .hood-sheet-chead is the flex:1 column, so name / address /
   account / status each get their own row and the top-right close button (a
   flex sibling) can never clip the account number. 16px horizontal padding
   comes from .hood-sheet-header; 12px vertical rhythm from the column gap. */
.hood-sheet-chead {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}



.hood-sheet-cstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}



/* Status badge variants */




/* Contact action buttons */





/* Map parcel labels (APN/owner at high zoom over satellite) */


/* Floating empty-state notice, anchored under the toolbar (top set inline). */
.hood-msg {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);

  z-index: 140;
  max-width: calc(100vw - 32px);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(31,33,33,0.95);
  border: 1px solid var(--surface-charcoal);
  color: var(--border-card-light);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 4px 16px var(--shadow-alpha-45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}




.hood-termites-head,
.hood-diagram-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.hood-termites-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}









.hood-termites-canvas-wrap {
  position: relative;   /* anchor for the HUD overlay, reset button, loader */
  display: flex;
  justify-content: center;
  width: max-content;   /* hug the canvas so HUD corners align to it, not the sheet */
  max-width: 100%;
  margin: 0 auto;
}
.hood-termites-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: transparent;
  touch-action: none;   /* let OrbitControls own drag/pinch, not page scroll */
}



.hood-termites-records {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}










.hood-holo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;   /* 12px between the chip row and the 3D canvas */
}
.hood-holo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.hood-holo-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--brand-blue-pure);
  background: var(--accent-primary-soft-12);
  border: 1px solid var(--accent-primary-soft-35);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.hood-holo-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px;
  background: var(--accent-primary-soft-08);
  border: 1px solid rgba(33, 150, 243, 0.25);
  border-radius: 999px;
}
.hood-holo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--brand-blue-pure);
  cursor: pointer;
}

.hood-holo-icon svg { width: 18px; height: 18px; }

/* Numeric run inside a chip: reset the chip's uppercase letter-spacing so long
   values (e.g. the APN) do not render stretched, and align digits. */

/* Hide the reset (refresh) button and walkthrough chevron hint while the
   hologram is loading, so neither leaks over the LOADING overlay. */

/* Very narrow phones (~320px): shrink chips to keep the APN chip + icon group
   on one row; the icon hit area stays 28px. */
/* v41.58h: misc block L31822-L31824 moved to mobile-v2.css */



.hood-diagram-walk {
  display: flex;
  justify-content: center;
  width: max-content;
  margin: 12px auto 0;
  letter-spacing: 0.08em;
}

/* Assessor sketch modal (dark backdrop, centered card, white sketch image). */
.hood-sketch-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
}

.hood-sketch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  max-height: 85vh;
  padding: 16px;
  overflow-y: auto;
  background: #0A0A0A;
  border: 1px solid rgba(33, 150, 243, 0.5);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}


.hood-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--border-overlay-10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--fg-inverse);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.12s;
}


.hood-close-btn svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.hood-sketch-body {
  flex: 1;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hood-sketch-img {
  display: block;
  max-width: 100%;
  max-height: calc(85vh - 130px);
  padding: 8px;
  background: var(--fg-inverse);
  border-radius: 8px;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
  touch-action: none;
  cursor: zoom-in;
  will-change: transform;
}




.hood-sketch-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

/* Analyze button - wider pill than a standard 24px chip */

/* Linear-ft result card */

.hood-lf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft);
}





.hood-lf-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Fullscreen sketch viewer (sits above the sketch modal at z 10000) */
.hood-sketch-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.98);
}

.hood-sketch-fs-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 90vh;
  overflow: hidden;
}
.hood-sketch-fs-img {
  display: block;
  max-width: 95vw;
  max-height: 90vh;
  padding: 12px;
  background: var(--fg-inverse);
  border-radius: 12px;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
  touch-action: none;
  cursor: zoom-in;
  will-change: transform;
}




/* HUD: DOM overlay drawn over the canvas corners (not WebGL). */
.holo-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.holo-hud-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.holo-hud-corner span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue-pure);
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.5);
  line-height: 1.3;
}

/* Reset-view button, top-right of the canvas. */




.holo-walk-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
}
.holo-walk-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--overlay-w-12);
  z-index: 5;
  pointer-events: none;
}
.holo-walk-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--brand-blue-pure);
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.7);
  transition: width 0.12s linear;
}
.holo-walk-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--border-overlay-10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  z-index: 6;
}
.holo-walk-nav svg { width: 16px; height: 16px; }
.holo-walk-nav:hover { background: rgba(33, 150, 243, 0.25); }

.holo-walk-caption {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: 88%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 28, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--overlay-w-12);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #E8F1FA;
  white-space: nowrap;
  text-align: center;
  z-index: 6;
  pointer-events: none;
}

.hood-termites-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--shadow-alpha-50);
  border-radius: 8px;
  perspective: 220px;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.holo-loader-cube {
  position: relative;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(32deg);
  animation: holo-cube-spin 3.2s linear infinite;
}
@keyframes holo-cube-spin {
  0%   { transform: rotateX(-24deg) rotateY(0deg); }
  100% { transform: rotateX(-24deg) rotateY(360deg); }
}
.holo-loader-cube span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(33, 150, 243, 0.9);
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
}
.holo-loader-cube span:nth-child(1) { transform: translateZ(20px); }
.holo-loader-cube span:nth-child(2) { transform: rotateY(90deg) translateZ(20px); }
.holo-loader-cube span:nth-child(3) { transform: rotateX(90deg) translateZ(20px); }
.holo-loader-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--brand-blue-pure);
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}




.hood-holo-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 1);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.hood-holo-fs.is-open { opacity: 1; }




.hood-holo-fs-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10000;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-inverse);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.15s ease;
}


.hood-holo-rzone-hint {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue-pure);
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}


/* ── Address search pill (v41.90: visible on mobile AND desktop) ─────────────
   Google Maps native pattern: a floating pill anchored at the top of the map.
   Mobile: top-center, full-width minus 16px each side, sits below the topnav.
   Desktop: top-left, fixed 320px width, sits below the floating pill nav.
   Wired to Google Places Autocomplete (hood.js _wireAddrSearch) with a
   Geocoder fallback on Enter. */






.hood-addr-search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--accent-primary-soft-12);
  color: var(--brand-blue-pure);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease;
}

@media (min-width: 900px) {
  /* Desktop: top-left pill (Google Maps native layout), fixed width so it
     does not stretch across the whole map. Keeps room for other overlays. */
  
  
}

/* ── Fade fix: hood map area must always render at full opacity, no mask ─────
   Nothing upstream currently targets .hood-page/.hood-map-wrap/.hood-map with
   mask-image or opacity, but several global fade patterns exist elsewhere in
   this file (body::before top fade, .sidebar-scroll mask, .ai-messages mask).
   This guard makes sure none of those -- now or in a future edit -- can ever
   dull the hood map or the new search pill. Belt-and-suspenders, scoped only
   to the hood route so it cannot affect any other view. */


/* v41.96 Task K: kill any residual top/right scrim on the hood map.
   Removes ::before/::after overlays on the map wrap, and any pseudo scrim on
   the map itself. Belt-and-suspenders so no future fade can dull the map. */


/* v41.96.1: aggressive right-fade kill. User reports a residual fade on the
   right side of the hood map after wave 3. Some parent (main#main-content or
   an inserted wrapper) may still cast a mask/gradient across the map's right
   edge. Nuke any mask, box-shadow, and background-image on all wrappers up to
   main-content while on /hood, plus explicit clip-path/filter reset on the
   map wrap so no future rule can dim it. */
body.route-hood #main-content,
body.route-hood main#main-content,
body.route-hood .main-content,
body.route-hood .hood-page,
body.route-hood .hood-map-wrap,
body.route-hood .hood-map {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* v41.96.1: any direct child of .hood-map-wrap that is NOT the Google/Leaflet
   canvas, a control, or a hood-* UI element gets any potential fade zeroed.
   Scoped narrowly so Google Maps internal controls (.gm-*) and Leaflet controls
   (.leaflet-*) render fully opaque. */

/* ── Fade fix: settings sub-tier chip (Settings view) ────────────────────
   No opacity/filter/mask found on .sub-tier-chip in the rules above, but this
   is a defensive guard in case any earlier or future rule dims it. */


/* ────────────────────
   v40.5em FIX F. Restore visible feedback during the pre-token "dead air".
   On the primary /api/chat/stream path the backend sends `event: thinking`
   with a {phase} BEFORE any Claude token. app.js _showPhase() builds a
   .cs-phase-row (dots + friendly label from _CS_PHASE_LABELS) and _hidePhase()
   deletes it the instant the first thinking_delta/text_delta/token arrives
   (app.js:2097-2102 / 2132-2137). Earlier rules set the whole row and its dots
   to display:none ("the active step IS the live indicator"), so the user saw
   nothing while business context loaded and the bot felt unresponsive.
   Because the row only exists during that gap (the JS removes it before the
   Claude step-stream renders), re-showing it here cannot duplicate the live
   steps. Placed last + !important so it wins over the display:none rules above
   without editing them. Dots get the brand-blue #2196F3 pulse. */
html body .ai-thinking .cs-phase-row,
html body .ai-messages .cs-phase-row,
html body .cs-phase-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}
/* The blue dots are now the single indicator, so drop the label's leading
   spinner ring (18623) and its reserved padding (18619). */

/* ============================================================================
   v40.5eo FIX 2. Exactly ONE thinking indicator per turn.
   The soft-blue .cl-block.cl-thinking box (its own .cl-head "Thinking…/Thought
   for Ns" label) is the only thinking indicator we keep. The legacy outer
   .ai-thinking-text header rendered a duplicate collapsed uppercase "THINKING… ^"
   pill below the finished answer (uppercase from the .ai-thinking .ai-thinking-text
   rule at ~26181, chevron from the .is-collapsed ::after at ~18216). claude_stream
   only inline-hides it when live thinking events fire, so no-thinking turns and
   history re-renders leaked the pill. Kill it in the collapsed state and on the
   Claude path; the .chat-msg-meta footer already records "Thought for Ns" under
   the bubble, and the soft-blue box (different selector) is untouched.
   ============================================================================ */
html body .ai-thinking.is-collapsed .ai-thinking-text,
html body .ai-thinking.claude-thinking .ai-thinking-text {
  display: none !important;
}

/* ============================================================================
   v40.40 UI cleanup. When the nx-thinking component is mounted (its parent
   contains a sibling .nx-thinking), suppress every piece of legacy chrome:
   the "THINKING" chip (.ai-thinking-text), the animated flower mark
   (.plex-think), and the entire empty legacy shell (.ai-thinking) once it
   holds no real content. The single source of truth for live thinking is
   the nx-thinking card. This also kills the orphan grey pill and the
   duplicate collapsed "THINKING... ^" chip seen in IMG_3196/IMG_3197.
   ============================================================================ */
html body .nx-thinking ~ .ai-thinking .ai-thinking-text,
html body .nx-thinking + .ai-thinking .ai-thinking-text,
html body .ai-thinking .plex-think {
  display: none !important;
}
/* If the legacy .ai-thinking shell has no visible children beyond the hidden
   text/mark, collapse it entirely so we do not paint an empty grey pill. */
html body .nx-thinking ~ .ai-thinking:not(:has(.cl-block.cl-thinking)),
html body .nx-thinking + .ai-thinking:not(:has(.cl-block.cl-thinking)) {
  display: none !important;
}

/* v40.40: while thinking is still active, do not show the bare Supabase/web
   source chips inside the thinking card. Icon-only chips with no name (per
   .nx-source-name display:none) look like unlabeled UI clutter. Sources are
   only meaningful once the answer starts arriving; the answer already carries
   its own citations. Reveal them again only when nx-thinking is in the done
   state. Also unconditionally hide the standalone big triangle-in-circle
   Supabase brand that leaks out of a nx-source wrapper when its parent has
   no siblings (defensive belt-and-suspenders on the mobile screenshot). */
html body .nx-thinking[data-state="thinking"] .nx-sources,
html body .nx-thinking[data-state="starting"] .nx-sources,
html body .nx-thinking:not([data-state="done"]) .nx-sources {
  display: none !important;
}

/* ============================================================================
   v40.5eq. Notion Me2 chat pane. All-new classes, one cohesive block, no
   override stacking on existing rules and no new priority flags. Brand blue
   (#2196F3) only. Periods and commas only in authored copy, no em dashes,
   no emojis. 150ms ease transitions. Respects prefers-reduced-motion.
   ============================================================================ */

/* ---- Notion "N steps" timeline ------------------------------------------- */
/* Collapsible head summarizes the reasoning run ("Computing" while active,
   "N steps" once several steps exist, "Thought for Ns" when finalized). The
   body reveals the individual step rows as a left-railed thread. */
/* Body: hidden when collapsed, a left-railed thread when expanded. */

/* ---- Sources chip (executed SQL provenance, rendered by chat_render.js) --- */


html body .chat-sources-toggle:hover {
  background: rgba(33,150,243,0.14);
  border-color: rgba(33,150,243,0.32);
}








/* ---- Empty state suggested chips (injected by chat_ui.js) ---------------- */


html body .chat-suggest-chip:hover {
  background: rgba(33,150,243,0.12);
  border-color: rgba(33,150,243,0.34);
  transform: translateY(-1px);
}

/* ---- Jump to latest button (injected above the composer) ----------------- */




/* ---- Composer action state machine (mic idle-empty, send idle-text,
   stop generating). chat_ui.js sets data-cstate on .composer-actions. ------ */
html body .floating-chat-composer .composer-actions .composer-stop {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  background: #3A3D3D;
  border: 1px solid rgba(255,255,255,0.14);
  color: #E3E1DD;
  transition: background 150ms ease;
}
html body .floating-chat-composer .composer-actions .composer-stop:hover {
  background: #474A4A;
}
html body .floating-chat-composer .composer-actions[data-cstate="empty"] .composer-send,
html body .floating-chat-composer .composer-actions[data-cstate="empty"] .composer-stop {
  display: none;
}
html body .floating-chat-composer .composer-actions[data-cstate="text"] .composer-mic,
html body .floating-chat-composer .composer-actions[data-cstate="text"] .composer-stop {
  display: none;
}
html body .floating-chat-composer .composer-actions[data-cstate="generating"] .composer-mic,
html body .floating-chat-composer .composer-actions[data-cstate="generating"] .composer-send {
  display: none;
}

/* ---- Focus ring: 2px Totaly blue at 40% opacity on chat controls --------- */
html body .claude-thinking .cl-head:focus-visible, html body .chat-sources-toggle:focus-visible, html body .chat-suggest-chip:focus-visible, html body .chat-jump-latest:focus-visible, html body .floating-chat-composer .chat-textarea:focus-visible, html body .floating-chat-composer .composer-mic:focus-visible, html body .floating-chat-composer .composer-send:focus-visible, html body .floating-chat-composer .composer-stop:focus-visible {
  outline: 2px solid rgba(33,150,243,0.4);
  outline-offset: 2px;
}

/* ---- Reduced motion: still the chat animations for sensitive users ------- */
@media (prefers-reduced-motion: reduce) {
  html body .claude-thinking .cl-thinking-spinner svg circle, html body .claude-thinking .cl-block.cl-thinking.cl-step--active .cl-label, html body .claude-thinking .cl-block.cl-thinking.is-active .cl-label {
    animation: none;
  }
  
}

/* =========================================================================
 * v40.12h - Claude-native reasoning line
 * -------------------------------------------------------------------------
 * Prior versions rendered the "Thinking" state as a bordered timeline box
 * containing a nested cl-block with a ">_" terminal prefix and an active-
 * state blue tint. Screenshot IMG_2550 showed three visual layers stacked
 * (Computing pill → Thinking chevron → Drafting answer blue pill), which
 * felt heavy compared to Claude's single italic-grey shimmering line.
 *
 * This block overrides those styles so the reasoning line is a single, low-
 * chrome row that reads like italic muted text - no border, no background,
 * no ">_" prefix, no blue tint on the active label (only the shimmer).
 * ========================================================================= */

/* Remove the terminal-style ">_" prefix from every active thinking head. */
html body .cl-block.cl-thinking.cl-step--active .cl-head::before,
html body .cl-block.cl-thinking.is-active .cl-head::before,
html body .claude-thinking .cl-block.cl-step--active .cl-head::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* Neutralize the blue tint on active blocks - the label shimmer is enough. */
html body .claude-thinking .cl-block.is-active,
html body .claude-thinking .cl-block.cl-thinking.is-active {
  background: transparent !important;
}
html body .claude-thinking .cl-block.is-active .cl-head,
html body .claude-thinking .cl-block.cl-thinking.is-active .cl-head {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 500 !important;
}

/* Thinking row: single italic-grey line, no border, no card, minimal padding.
   Head becomes a lightweight clickable text row (chevron only appears once
   there is text to expand). */
html body .claude-thinking .cl-block.cl-thinking {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .claude-thinking .cl-block.cl-thinking .cl-head {
  padding: 4px 0 !important;
  gap: 6px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic;
  letter-spacing: 0.005em;
}
html body .claude-thinking .cl-block.cl-thinking .cl-head:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
}
html body .claude-thinking .cl-block.cl-thinking .cl-head:hover .cl-chev {
  color: rgba(255,255,255,0.55);
}
/* Done state: static italic grey label. Active state intentionally left
   uncolored here so the shimmer keyframes (defined further up in this file)
   paint through -webkit-background-clip:text without being clobbered. */
html body .claude-thinking .cl-block.cl-thinking.is-done .cl-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.55) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  animation: none !important;
}

html body .claude-thinking .cl-block.cl-thinking.is-active .cl-label,
html body .claude-thinking .cl-block.cl-thinking.cl-step--active .cl-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic;
  letter-spacing: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(184,184,184,0.45) 0%,
    rgba(184,184,184,0.45) 30%,
    #E5E5E5 50%,
    rgba(184,184,184,0.45) 70%,
    rgba(184,184,184,0.45) 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  animation: cl-shimmer 2.2s linear infinite !important;
}
/* Single character chevron (›), rotates when expanded. Hidden until there is
   thinking text to reveal so an empty "Thinking" line stays flat. */
html body .claude-thinking .cl-block.cl-thinking .cl-chev {
  color: rgba(255,255,255,0.28) !important;
  font-size: 13px !important;
  width: 12px !important;
  height: 12px !important;
  transition: transform 180ms ease, color 180ms ease !important;
  transform: rotate(0deg);
  margin-left: 2px;
  opacity: 0;
}
/* Reveal the chevron once there is any thinking prose to expand. */
html body .claude-thinking .cl-block.cl-thinking:has(.cl-prose-text:not(:empty)) .cl-chev {
  opacity: 1;
}
html body .claude-thinking .cl-block.cl-thinking.is-expanded .cl-chev {
  transform: rotate(90deg);
  color: rgba(255,255,255,0.55) !important;
}

/* Expandable thinking body: keep the subtle left border to signal quoted
   inner-monologue text, but drop the heavy left indent so it aligns with
   the row above. */
html body .claude-thinking .cl-thinking .cl-body.cl-prose {
  margin: 4px 0 6px 0 !important;
  padding: 2px 10px !important;
  border-left: 2px solid rgba(255,255,255,0.08) !important;
  max-height: 220px;
}

/* Hide the entire outer timeline chrome - it no longer exists in the DOM
   but any leftover styles or dev-tools instances should not paint. */

/* Neutralize any lingering "Drafting answer" / phase-row pills - the DOM
   nodes are no longer created (see app.js _showPhase no-op), but kill the
   presentation as a safety net in case an event slips through. */
html body .cs-phase-row,
html body .ai-messages .cs-phase-row,
html body .ai-thinking .cs-phase-row {
  display: none !important;
}

/* ============================================================================
   v40.13 - Neutralize legacy Claude-thinking chrome. Kills the #2196F3 blue
   accent + soft-blue background tint that was leaking into the active
   thinking block. Nexus palette only: text uses --nx-muted/--nx-text, and
   the shimmer keeps its neutral gray gradient. No italic on the label.
   ============================================================================ */
html body .claude-thinking .cl-block.is-active .cl-label, html body .claude-thinking .cl-block.is-active .cl-icon, html body .claude-thinking .cl-block.is-active .cl-head {
  color: rgba(205, 204, 202, 0.78);
}
html body .claude-thinking .cl-block.is-active {
  background: transparent;
}
html body .claude-thinking .cl-block.is-active .cl-head {
  font-weight: 500;
  background: transparent;
}
html body .claude-thinking .cl-label,
html body .claude-thinking .cl-block.is-active .cl-label {
  font-style: normal;
  font-weight: 500;
}
/* Reasoning prose: keep readable but drop the ornate italic-serif in favor of
   the site's sans-serif at a subtle muted color. */
html body .claude-thinking .cl-thinking .cl-prose-text {
  font-family: var(--nx-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-style: normal;
  color: rgba(205, 204, 202, 0.52);
}
/* Light mode counterparts */
[data-app-theme="light"] html body .claude-thinking .cl-block.is-active .cl-label,
[data-app-theme="light"] html body .claude-thinking .cl-block.is-active .cl-head {
  color: rgba(40, 37, 29, 0.72);
}
[data-app-theme="light"] html body .claude-thinking .cl-thinking .cl-prose-text {
  color: rgba(40, 37, 29, 0.55);
}

/* Rotating pre-progress hint next to "Thinking". Small, faint, sans-serif,
   fades in each rotation so the user sees continuous progress even before the
   first reasoning_delta arrives. Cleared as soon as any real event fires. */
html body .claude-thinking .cl-status-hint {
  color: rgba(205, 204, 202, 0.42);
  font-size: 12px;
  font-weight: 400;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  animation: nx-hint-fade 0.55s ease;
}
[data-app-theme="light"] html body .claude-thinking .cl-status-hint {
  color: rgba(40, 37, 29, 0.42);
}
@keyframes nx-hint-fade {
  from { opacity: 0; transform: translateY(1px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html body .claude-thinking .cl-status-hint { animation: none; }
}

/* Assistant bubbles in Ask / floating / chip chat: strip the card chrome so
   the thinking line and the answer read as one plain column (Claude-style). */
html body .floating-chat-messages .msg-bubble.msg-assistant,
html body .floating-chat-messages .msg-bubble.msg--plex,
html body .ai-messages .msg-bubble.msg-assistant.msg--plex,
html body .msg-bubble.msg--plex.msg-assistant {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.25rem 0 !important;
  box-shadow: none !important;
}

.nx-thinking {
  --nx-thinking-text: rgba(205, 204, 202, 0.92);
  --nx-thinking-muted: rgba(205, 204, 202, 0.62);
  --nx-thinking-faint: rgba(205, 204, 202, 0.38);
  --nx-thinking-surface: rgba(255, 255, 255, 0.025);
  --nx-thinking-border: var(--overlay-w-08);
  --nx-thinking-dot-active: #4F98A3;
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nx-thinking-muted);
}
[data-app-theme="light"] .nx-thinking {
  --nx-thinking-text: rgba(40, 37, 29, 0.92);
  --nx-thinking-muted: rgba(40, 37, 29, 0.62);
  --nx-thinking-faint: rgba(40, 37, 29, 0.38);
  --nx-thinking-surface: rgba(0, 0, 0, 0.025);
  --nx-thinking-border: rgba(0, 0, 0, 0.08);
  --nx-thinking-dot-active: #01696F;
}

/* Head row: chevron + label + verb + elapsed. A plain button, no box. */
.nx-thinking-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.nx-thinking-head:focus-visible {
  outline: 2px solid var(--nx-thinking-border);
  outline-offset: 2px;
  border-radius: 4px;
}
.nx-chev {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: var(--nx-thinking-faint);
  transition: transform 180ms ease;
}
.nx-thinking.nx-expanded .nx-chev { transform: rotate(90deg); }

.nx-thinking-label {
  flex: 0 0 auto;
  color: var(--nx-thinking-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}
/* Shimmer sweep on the label ONLY while thinking. */
.nx-thinking[data-state="thinking"] .nx-thinking-label {
  background: linear-gradient(90deg,
    var(--nx-thinking-faint) 0%,
    var(--nx-thinking-text) 50%,
    var(--nx-thinking-faint) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nx-shimmer 2.2s ease-in-out infinite;
}
.nx-thinking[data-state="done"] .nx-thinking-label {
  color: var(--nx-thinking-muted);
  -webkit-text-fill-color: currentColor;
  animation: none;
}
@keyframes nx-shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

/* Verb: current phase, slides in from the right. No bounce, no pulse. */
.nx-thinking-verb {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--nx-thinking-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 140ms ease-out, transform 260ms ease-out;
}
.nx-thinking-verb:empty { display: none; }
.nx-thinking-verb:not(:empty)::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.45;
}
.nx-thinking-verb.nx-verb-enter { opacity: 0; transform: translateX(8px); }
.nx-thinking-verb.nx-verb-exit  { opacity: 0; transform: translateX(-4px); }

.nx-thinking-elapsed {
  color: var(--nx-thinking-faint);
  font-size: 12px;
  white-space: nowrap;
  margin-top: 8px;
  padding-left: 2px;
}
.nx-thinking-elapsed.hidden { display: none; }

/* Step dropdown: one row per phase, latest at the bottom. */
.nx-thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 2px 0;
  padding: 6px 10px;
  background: var(--nx-thinking-surface);
  border-left: 1px solid var(--nx-thinking-border);
}
.nx-thinking-steps[hidden] { display: none; }
.nx-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nx-thinking-muted);
  font-size: 12.5px;
}
.nx-step[data-status="done"] { color: var(--nx-thinking-faint); }
.nx-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nx-thinking-faint);
}
.nx-step[data-status="active"] .nx-dot {
  background: var(--nx-thinking-dot-active);
  animation: nx-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes nx-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Source chips: flex-wrap row below the block. */
.nx-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nx-sources:empty { display: none; }
.nx-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--nx-thinking-border);
  border-radius: 999px;
  background: var(--nx-thinking-surface);
  color: var(--nx-thinking-muted);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}
a.nx-source-chip:hover {
  color: var(--nx-thinking-text);
  border-color: var(--nx-thinking-dot-active);
}
.nx-source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-source-ext {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--nx-thinking-faint);
}

@media (prefers-reduced-motion: reduce) {
  .nx-thinking[data-state="thinking"] .nx-thinking-label {
    animation: none;
    color: var(--nx-thinking-muted);
    -webkit-text-fill-color: currentColor;
  }
  .nx-thinking-verb { transition: none; }
  .nx-thinking-verb.nx-verb-enter,
  .nx-thinking-verb.nx-verb-exit { opacity: 1; transform: none; }
  .nx-step[data-status="active"] .nx-dot { animation: none; }
  .nx-chev { transition: none; }
}

.msg-bubble .nx-thinking ~ .ai-thinking,
.msg-bubble .nx-thinking ~ .claude-thinking,
.msg-bubble .nx-thinking ~ .cl-block.cl-thinking,
.msg-bubble .nx-thinking ~ .msg-thinking-plex,
.floating-chat-messages .msg-bubble .nx-thinking ~ .ai-thinking,
.floating-chat-messages .msg-bubble .nx-thinking ~ .claude-thinking,
.floating-chat-messages .msg-bubble .nx-thinking ~ .cl-block.cl-thinking,
.msg-bubble .ai-thinking[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

button.nx-source-chip {
  appearance: none;
  -webkit-appearance: none;
  background: var(--nx-thinking-surface);
  color: var(--nx-thinking-text);
  border: 1px solid var(--nx-thinking-border);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
button.nx-source-chip:hover,
button.nx-source-chip:focus-visible {
  border-color: var(--nx-thinking-dot-active);
  color: var(--nx-thinking-text);
  outline: none;
}
button.nx-source-chip:active {
  transform: translateY(0.5px);
}

.nx-source-chip {
  /* Keep the whole chip on one line even with a long name. */
  min-width: 0;
}
.nx-source-name {
  max-width: 110px;         /* ellipsize past ~14 chars on mobile */
}
@media (min-width: 640px) {
  .nx-source-name { max-width: 180px; }
}

.nx-sources {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
  align-items: flex-start !important;
}
.nx-source {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.nx-source-chip {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}
.nx-source-name,
.nx-source-ext {
  display: none !important;
}
.nx-source-chip:hover,
.nx-source-chip:focus-visible {
  border-color: var(--nx-thinking-dot-active);
}
.nx-source--open .nx-source-chip {
  border-color: var(--nx-thinking-dot-active);
}

/* Details drawer: sits below the chip in the same wrapper, spans the row
   width so its contents don't get squeezed by the chip. Because .nx-source
   is flex-column, the drawer stacks below its chip. */
.nx-source-details {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--nx-thinking-border);
  border-radius: 8px;
  background: var(--nx-thinking-surface);
  font-size: 12px;
  color: var(--nx-thinking-muted);
  min-width: 200px;
  max-width: 360px;
}
.nx-source-details[hidden] { display: none; }
.nx-source-details-head {
  font-size: 11px;
  color: var(--nx-thinking-faint);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.nx-source-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx-source-details-list li {
  padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--nx-thinking-text);
}

/* ── v40.13-2360: brand-token source chips + follow-up chips ───────────────
   Each source chip becomes a bare, perfectly circular tap target whose only
   visible element is the .src-brand circle (brand color + redrawn white/dark
   mark). Fixed width/height + border-radius:50% guarantee a true circle at
   any chip length (this is the oval fix). Appended last so these win over the
   earlier .nx-source-chip !important rules at equal specificity. */
.nx-source-chip {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  gap: 0 !important;
}
button.nx-source-chip { box-shadow: none !important; }
.nx-source-chip:hover,
.nx-source-chip:focus-visible {
  border-color: transparent !important;
}
.src-brand {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.src-brand > svg { width: 12px; height: 12px; display: block; }
.nx-source-chip:hover .src-brand,
.nx-source-chip:focus-visible .src-brand {
  transform: translateY(-0.5px);
  box-shadow: 0 0 0 2px var(--accent-primary-alpha-55), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Follow-up suggestion chips rendered below an answer. A wrapping flex row
   (never a horizontal scroller) so there is no side-fade mask to clip them,
   and top margin so they clear the composer fade at the bottom of the
   .ai-messages scroller (its padding-bottom already exceeds the fade height,
   so the strip sits in the fully opaque region). */
.nx-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}
.nx-followups:empty { display: none; }
.nx-followup-chip {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(33, 150, 243, 0.06);
  border: 1px solid rgba(33, 150, 243, 0.22);
  color: var(--fg-primary);
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.nx-followup-chip:hover,
.nx-followup-chip:focus-visible {
  background: var(--accent-primary-soft-12);
  border-color: rgba(33, 150, 243, 0.36);
  transform: translateY(-1px);
}

/* Branson asked for plain digits + one-tap copy on the Route stop drawer. */
.rt-crm-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums lining-nums;
}
.rt-crm-phone-num {
  letter-spacing: 0.01em;
}
.rt-crm-phone-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 8px;
  border: 1px solid var(--accent-primary-soft-28);
  background: var(--accent-primary-soft-08);
  color: var(--brand-blue-pure);
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.rt-crm-phone-copy:hover {
  background: rgba(33, 150, 243, 0.16);
  border-color: rgba(33, 150, 243, 0.5);
}
.rt-crm-phone-copy:active {
  transform: scale(0.94);
}
.rt-crm-phone-copy.is-copied {
  background: rgba(33, 150, 243, 0.22);
  border-color: rgba(33, 150, 243, 0.62);
  color: var(--fg-inverse);
}
.rt-crm-phone-copy svg {
  display: block;
  pointer-events: none;
}

.rt-crm-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
  margin-top: 2px;
}
.rt-crm-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px 12px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  position: relative;
  border-radius: 8px 8px 0 0;
  transition: color 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.rt-crm-tab:hover {
  color: rgba(226, 232, 240, 0.9);
  background: rgba(33, 150, 243, 0.06);
}
.rt-crm-tab.is-active {
  color: var(--brand-blue-pure);
}
.rt-crm-tab.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: var(--brand-blue-pure);
  border-radius: 2px 2px 0 0;
}
.rt-crm-tab:focus-visible {
  outline: 2px solid rgba(33, 150, 243, 0.5);
  outline-offset: -2px;
}

.rt-crm-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 6px;
}
.rt-crm-note-row {
  display: block;
  padding: 12px 14px;
  background: var(--overlay-w-02);
  border: 1px solid rgba(226, 232, 240, 0.06);
  border-radius: 12px;
  transition: background 120ms ease, border-color 120ms ease;
}
.rt-crm-note-row:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(226, 232, 240, 0.09);
}

.rt-crm-note-body {
  color: rgba(226, 232, 240, 0.94);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.rt-crm-note-meta {
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.48);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.rt-crm-notes-empty {
  padding: 34px 20px;
  text-align: center;
  color: rgba(226, 232, 240, 0.6);
}
.rt-crm-notes-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.85);
  margin-bottom: 6px;
}
.rt-crm-notes-empty-sub {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.55);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}

.rt-crm-note-skel {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--overlay-w-02);
  border: 1px solid rgba(226, 232, 240, 0.05);
  border-radius: 12px;
}
.rt-crm-note-skel-badge {
  width: 70px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--overlay-w-05) 0%, var(--overlay-w-12) 50%, var(--overlay-w-05) 100%);
  background-size: 200% 100%;
  animation: rt-crm-note-shimmer 1.4s linear infinite;
  flex-shrink: 0;
}
.rt-crm-note-skel-body { flex: 1; }
.rt-crm-note-skel-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--overlay-w-04) 0%, rgba(255,255,255,0.1) 50%, var(--overlay-w-04) 100%);
  background-size: 200% 100%;
  animation: rt-crm-note-shimmer 1.4s linear infinite;
  margin-bottom: 6px;
}
.rt-crm-note-skel-line-1 { width: 92%; }
.rt-crm-note-skel-line-2 { width: 60%; }
@keyframes rt-crm-note-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-crm-note-skel-badge,
  .rt-crm-note-skel-line { animation: none; }
}

/* ==========================================================================
   v40.13-20260728 - Route modal / CRM drawer blue consolidation
   All secondary blues (teal #4F98A3, gradients, sky #80C8FF) unified to
   Totaly blue #2196F3. Also kills any inherited circle border wrapping the
   ▦ door-type icon, and gives Mark-as-Won a proper style.
   ========================================================================== */

/* Save button (My notes) */
.rsm-notes-save {
  background: var(--accent-primary-soft-14) !important;
  color: var(--totaly-blue-300, var(--accent-primary-lighter)) !important;
  border: 1px solid var(--accent-primary-alpha-55) !important;
}
.rsm-notes-save:hover { background: rgba(33, 150, 243, 0.24) !important; }

/* Next stop primary button */
.rsm-next-btn {
  background: var(--totaly-blue-500, var(--brand-blue-pure)) !important;
  border-color: var(--totaly-blue-500, var(--brand-blue-pure)) !important;
  color: var(--fg-inverse) !important;
}
.rsm-next-btn:hover { background: var(--totaly-blue-600, var(--brand-blue-hover-pure)) !important; border-color: var(--totaly-blue-600, var(--brand-blue-hover-pure)) !important; }

/* K-chip / knock pill */
.rsm-knock-num {
  background: var(--accent-primary-soft-14) !important;
  color: var(--totaly-blue-300, var(--accent-primary-lighter)) !important;
  border-color: var(--accent-primary-alpha-55) !important;
}
.rsm-knock-num--btn:hover,
.rsm-knock-num--btn[aria-expanded="true"] {
  background: rgba(33, 150, 243, 0.24) !important;
  border-color: rgba(33, 150, 243, 0.75) !important;
}

/* Notes save-status text */
.rsm-notes-status { color: var(--totaly-blue-300, var(--accent-primary-lighter)) !important; }

/* Door-type "Gave pitch" & pillbox is-set backgrounds - override old teal */
.rsm-dt-pill--gave_pitch.is-selected {
  background: rgba(33, 150, 243, 0.22) !important;
  border-color: var(--totaly-blue-500, var(--brand-blue-pure)) !important;
  box-shadow: 0 0 0 1px var(--totaly-blue-500, var(--brand-blue-pure)) inset !important;
}

/* Kill any inherited round-icon frame on the DOOR TYPE header icon */
.rsm-doortype-pill-head { background: transparent !important; border: 0 !important; padding: 0 !important; }
.rsm-doortype-pill-head svg {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Route lock button (locked state) */



/* Rep-mode active pill */


.rt-crm-won-block {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rt-crm-won-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent-primary-alpha-55);
  background: var(--accent-primary-soft-14);
  color: var(--totaly-blue-300, var(--accent-primary-lighter));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}
.rt-crm-won-btn:hover {
  background: rgba(33, 150, 243, 0.22);
  border-color: var(--totaly-blue-400, var(--accent-primary-light));
  color: var(--fg-inverse);
}
.rt-crm-won-btn:active { transform: translateY(1px); }
.rt-crm-won-btn.is-loading,
.rt-crm-won-btn[disabled] {
  opacity: 0.55;
  cursor: default;
  color: #94A3B8;
}
.rt-crm-won-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--totaly-blue-500, var(--brand-blue-pure));
  background: var(--totaly-blue-500, var(--brand-blue-pure));
  color: var(--fg-inverse);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rt-crm-won-confirm:hover { background: var(--totaly-blue-600, var(--brand-blue-hover-pure)); border-color: var(--totaly-blue-600, var(--brand-blue-hover-pure)); }

/* Nuclear kill of any inherited round-icon frame in the pillbox head.
   The head now contains only the text label - no SVG. */
.rsm-doortype-pillbox {
  border: 0 !important;
  background: transparent !important;
  padding: 6px 0 0 !important;
}
.rsm-doortype-pill-head {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.rsm-doortype-pill-head svg { display: none !important; }

/* Inline row layout: stepper + label */
.rsm-knock-row--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}
.rsm-knock-row--inline .rsm-knock-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Stepper container */
.rsm-tries-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(33, 150, 243, 0.45);
  background: var(--accent-primary-soft-10);
}

/* Stepper buttons (- and +) */
.rsm-tries-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--totaly-blue-300, var(--accent-primary-lighter));
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, color 120ms ease, transform 90ms ease;
  font-variant-numeric: tabular-nums;
}
.rsm-tries-btn:hover { background: rgba(33, 150, 243, 0.20); color: var(--fg-inverse); }
.rsm-tries-btn:active,
.rsm-tries-btn.is-bumped { transform: scale(0.94); background: var(--accent-primary-soft-28); }
.rsm-tries-btn--minus:disabled,
.rsm-tries-btn--plus:disabled { opacity: 0.35; cursor: default; }

/* T-count chip (the middle button, still clickable to +1) */
.rsm-tries-stepper .rsm-knock-num {
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  border: 0 !important;
  border-left: 1px solid var(--accent-primary-soft-35) !important;
  border-right: 1px solid var(--accent-primary-soft-35) !important;
  border-radius: 0 !important;
  background: rgba(33, 150, 243, 0.06) !important;
  color: var(--totaly-blue-300, var(--accent-primary-lighter)) !important;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 90ms ease;
}
.rsm-tries-stepper .rsm-knock-num:hover {
  background: var(--accent-primary-soft-18) !important;
  color: var(--fg-inverse) !important;
}
.rsm-tries-stepper .rsm-knock-num.is-bumped { transform: scale(0.96); }

/* Collapsible Notes section in the customer drawer. Collapsed by default
   so Tries / Pitch type stay visible without scrolling. */
.rt-crm-notes-collapse {
  width: 100%;
}
.rt-crm-notes-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #B0AFAD;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rt-crm-notes-collapse-summary::-webkit-details-marker {
  display: none;
}
.rt-crm-notes-collapse-count {
  font-weight: 700;
}
.rt-crm-notes-collapse-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--totaly-blue-300, var(--accent-primary-lighter));
  transition: transform 140ms ease;
  transform: rotate(0deg);
  flex-shrink: 0;
}
.rt-crm-notes-collapse[open] > .rt-crm-notes-collapse-summary .rt-crm-notes-collapse-chev,
details.rt-crm-notes-collapse[open] > summary .chev {
  transform: rotate(90deg);
}
.rt-crm-notes-collapse-body {
  padding-top: 8px;
  padding-left: 4px;
  border-left: 2px solid var(--accent-primary-soft-18);
  margin-left: 2px;
}

/* Tries attempt history: collapsible, subtle, collapsed by default. */
.rsm-tries-history {
  margin-top: 6px;
}
.rsm-tries-history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: #8A8987;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rsm-tries-history-summary::-webkit-details-marker {
  display: none;
}
.rsm-tries-history[open] > .rsm-tries-history-summary .chev {
  transform: rotate(90deg);
}
.rsm-tries-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 4px 4px;
  border-left: 2px solid var(--accent-primary-soft-18);
  margin-left: 2px;
}
.rsm-tries-history-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #A8A7A5;
  min-height: 22px;
}
.rsm-tries-history-time {
  font-variant-numeric: tabular-nums;
  color: var(--totaly-blue-300, var(--accent-primary-lighter));
}
.rsm-tries-history-date {
  color: #7A7977;
}

/* ── v40.15-20260729-1500: Bug 1 fix - /ask hero float ────────────────────
   A pre-existing brace mismatch earlier in this file (an orphaned dead
   @keyframes fragment around the mobile media query) causes a block of
   rules meant for `@media (max-width: 768px)` to leak into global scope,
   including `.ai-hero-stage`/`.ai-hero-logo--canvas` being forced to a
   44x44px flex box. On desktop this squashed the wordmark image into a
   tiny stray square and, combined with layoutCollapsedAskHero()'s JS
   absolute-centering, made the whole hero card float in the dead center
   of the viewport disconnected from the composer. Reconstructing the
   original mobile block boundaries is high-risk given the file's size, so
   this override neutralizes the leaked rules at desktop widths and
   ensures the hero renders anchored at its natural top position. */
/* Defensive: the floating-chat panel's own stop/send/mic controls must never
   render inline within the /ask hero area. Confirmed via DOM inspection that
   the only stray square in the reported screenshot was the squashed hero
   wordmark image (fixed above); this rule is a defensive backstop in case
   the floating-chat panel is ever left un-transformed off-screen on /ask. */


#sidebar-history-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
#sidebar-history-list .history-item {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(234, 235, 236, .75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  background: transparent;
  border: none;
}
#sidebar-history-list .history-item:hover {
  background: var(--overlay-w-04);
  color: rgba(234, 235, 236, .95);
}
#sidebar-history-list .history-item.active,
#sidebar-history-list .history-item.is-active,
#sidebar-history-list .history-item[data-active="1"] {
  background: rgba(33, 150, 243, .12);
  color: var(--fg-primary-warm);
}
/* ── Bug 3 - sidebar collapse button on main section ────────────────────
   Override the leaked light-theme button skin (white bg / gray text) with a
   subtle dark-theme square icon button, flush right in the sidebar header. */
#sidebar-collapse-btn,
.sidebar #sidebar-collapse-btn,
aside.sidebar#sidebar #sidebar-collapse-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  margin-left: auto !important;
  background: var(--overlay-w-04) !important;
  border: 1px solid var(--border-overlay-10) !important;
  color: rgba(234, 235, 236, .7) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
}
#sidebar-collapse-btn:hover,
.sidebar #sidebar-collapse-btn:hover,
aside.sidebar#sidebar #sidebar-collapse-btn:hover {
  background: rgba(33, 150, 243, .12) !important;
  border-color: rgba(33, 150, 243, .45) !important;
  color: var(--brand-blue-pure) !important;
}
#sidebar-collapse-btn svg { width: 16px !important; height: 16px !important; }

.rt-crm-notes-typebar { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 10px; margin-bottom: 6px; scrollbar-width: none; }
.rt-crm-notes-typebar::-webkit-scrollbar { display: none; }
.rt-crm-notes-chip { flex: 0 0 auto; padding: 5px 10px; font-size: 11.5px; color: rgba(234,235,236,.7); background: var(--overlay-w-04); border: 1px solid var(--overlay-w-08); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 140ms ease; }
.rt-crm-notes-chip:hover { background: var(--overlay-w-08); color: var(--fg-primary-warm); }
.rt-crm-notes-chip.is-active { background: rgba(33,150,243,.15); color: var(--brand-blue-pure); border-color: rgba(33,150,243,.35); }




/* Route-stop number circles: neutral by default, Totaly blue only for the
   explicit selected/current/visited states (already set above). */





.route-stop.is-current { border-color: var(--brand-blue-pure) !important; box-shadow: 0 0 0 2px var(--accent-primary-soft-35), 0 0 18px var(--accent-primary-soft-28) !important; }

@keyframes routeStopCurrentPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35), 0 0 18px rgba(33, 150, 243, 0.28); } 50% { box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.55), 0 0 24px rgba(33, 150, 243, 0.40); } }
.rt-map-pin.is-current,
.rt-map-marker.is-current { border-color: var(--brand-blue-pure) !important; box-shadow: 0 0 0 3px var(--accent-primary-soft-35), 0 2px 6px var(--shadow-alpha-50) !important; }

.rt-crm-collapse-btn {
  background: transparent;
  border: 1px solid var(--border-overlay-10);
  color: rgba(234, 235, 236, 0.7);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rt-crm-collapse-btn:hover {
  background: rgba(33, 150, 243, .12);
  border-color: rgba(33, 150, 243, .35);
  color: var(--brand-blue-pure);
}

html body .ai-view .ai-hero,
html body .ai-view .ai-hero-card,
html body .ai-view .ai-hero-stage,
html body .ai-view .ai-hero-logo,
html body .ai-view .ai-hero-logo--img,
html body .ai-view .ai-hero-logo--canvas,
html body .ai-view #ai-hero,
html body .ai-view #ai-hero-canvas,
html body .ai-view #ai-hero-logo-img,
html body .ai-view .ai-bg-mark,
html body .ai-view .ai-bg-mark__img,
html body .ai-view .ai-bg-mark__shimmer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Composer should sit near the top of the empty area instead of pinned way down. */
html body .ai-view.ai-home .ai-composer-wrap {
  margin-top: 0 !important;
}

html body .rich-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  padding: 14px 16px 12px 16px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
html body .rich-composer:focus-within {
  border-color: rgba(33,150,243,0.55) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 4px rgba(33,150,243,0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html body .rich-composer .rc-input {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #E8E9EB !important;
  padding: 6px 4px 8px !important;
  min-height: 44px !important;
  caret-color: #2196F3 !important;
}
html body .rich-composer .rc-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(232,233,235,0.35) !important;
  pointer-events: none;
}
html body .rich-composer .rc-toolbar {
  padding-top: 6px !important;
  gap: 8px !important;
}
html body .rich-composer .rc-icon-btn,
html body .rich-composer .rc-plus-btn {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(232,233,235,0.75) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: all 160ms ease !important;
}
html body .rich-composer .rc-icon-btn:hover,
html body .rich-composer .rc-plus-btn:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--fg-primary-warm, #EAEBEC) !important;
}
html body .rich-composer .rc-chip {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(232,233,235,0.75) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 160ms ease !important;
}
html body .rich-composer .rc-chip:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--fg-primary-warm, #EAEBEC) !important;
}
html body .rich-composer .rc-chip.rc-chip--active {
  background: rgba(33,150,243,0.14) !important;
  border-color: rgba(33,150,243,0.45) !important;
  color: #2196F3 !important;
}
html body .rich-composer .rc-send {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: #2196F3 !important;
  border: none !important;
  color: #fff !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: all 160ms ease !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.35) !important;
}
html body .rich-composer .rc-send:hover {
  background: #1976D2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(33,150,243,0.5) !important;
}
html body .rich-composer .rc-model,
html body .rich-composer .rc-model-select {
  font-size: 12px !important;
  color: rgba(232,233,235,0.65) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

html body .ai-view .ai-messages {
  padding-bottom: 40px !important;
}
html body .floating-chat-toggle {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2196F3, #1565C0) !important;
  border: none !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 8px 24px rgba(33,150,243,0.45), 0 2px 6px rgba(0,0,0,0.3) !important;
  transition: all 200ms cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  cursor: pointer !important;
}
html body .floating-chat-toggle:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(33,150,243,0.55), 0 4px 10px rgba(0,0,0,0.4) !important;
}
html body .floating-chat-toggle:active { transform: translateY(0) scale(0.98) !important; }

html body .ai-thinking, html body .nx-thinking, html body .cl-block.cl-thinking {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 8px 0 12px 0 !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  color: rgba(232,233,235,0.7) !important;
  font-size: 13px !important;
}
html body .ai-thinking[hidden] { display: none !important; }

html body .floating-chat-composer.glass-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 0 0 20px 20px !important;
  transition: box-shadow 200ms ease !important;
}
html body .floating-chat-composer .chat-textarea,
html body .floating-chat-composer textarea#floating-chat-input {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #E8E9EB !important;
  caret-color: #2196F3 !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}
html body .floating-chat-composer .chat-textarea:focus,
html body .floating-chat-composer textarea#floating-chat-input:focus {
  border-color: rgba(33,150,243,0.55) !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.12) !important;
}
html body .floating-chat-composer .composer-chip-plus,
html body .floating-chat-composer .composer-mic {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(232,233,235,0.75) !important;
  transition: all 160ms ease !important;
}
html body .floating-chat-composer .composer-chip-plus:hover,
html body .floating-chat-composer .composer-mic:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--fg-primary-warm, #EAEBEC) !important;
}
html body .floating-chat-composer .composer-chip {
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(232,233,235,0.75) !important;
}
html body .floating-chat-composer .composer-send {
  border-radius: 50% !important;
  background: #2196F3 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.35) !important;
  transition: all 160ms ease !important;
}
html body .floating-chat-composer .composer-send:hover {
  background: #1976D2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(33,150,243,0.5) !important;
}

html body aside.sidebar#sidebar button.sidebar-quick-item#sqi-history,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 button.sidebar-quick-item--history {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  padding: inherit !important;
  margin: 0 !important;
}
html body aside.sidebar#sidebar button.sidebar-quick-item#sqi-history:focus,
html body aside.sidebar#sidebar button.sidebar-quick-item#sqi-history:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Preserve real hover/active treatment (same as <a> siblings) */
html body aside.sidebar#sidebar button.sidebar-quick-item#sqi-history:hover {
  background: rgba(255,255,255,0.04) !important;
}


html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active {
  background: rgba(33,150,243,0.14) !important;
  color: #2196F3 !important;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-icon,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.is-active .sqi-icon {
  color: #2196F3 !important;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item.active .sqi-label {
  color: #2196F3 !important;
  font-weight: 600 !important;
}

html body aside.sidebar#sidebar #sidebar-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}
html body aside.sidebar#sidebar #sidebar-history-list .history-item,
html body aside.sidebar#sidebar #sidebar-history-list a.history-item,
html body aside.sidebar#sidebar #sidebar-history-list button.history-item {
  display: block !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: rgba(232,233,235,0.72) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
}
html body aside.sidebar#sidebar #sidebar-history-list .history-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #EAEBEC !important;
}
html body aside.sidebar#sidebar #sidebar-history-list .history-item.is-active {
  background: rgba(33,150,243,0.12) !important;
  color: #2196F3 !important;
}

.rt-lead-typebar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 4px;
  margin-bottom: 2px;
  scrollbar-width: none;
}
.rt-lead-typebar::-webkit-scrollbar { display: none; }
.rt-lead-type-chip {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 11.5px;
  color: rgba(234,235,236,.7);
  background: var(--overlay-w-04);
  border: 1px solid var(--overlay-w-08);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
  font-family: inherit;
}
.rt-lead-type-chip:hover { background: var(--overlay-w-08); color: var(--fg-primary-warm); }
.rt-lead-type-chip.is-active { background: rgba(33,150,243,.15); color: var(--brand-blue-pure); border-color: rgba(33,150,243,.35); }

html body aside.sidebar#sidebar #sqi-history,
html body aside.sidebar#sidebar button.sidebar-quick-item--history,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 button.sidebar-quick-item--history,
html body.route-chats aside.sidebar#sidebar button.sidebar-quick-item--history {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Hover on Chat history: matches Home/Data-sources hover (subtle white tint). */
html body aside.sidebar#sidebar button.sidebar-quick-item--history:hover {
  background: rgba(255,255,255,0.05) !important;
}
/* Active-route on /chats: Totaly blue tint, no border/ring. */



/* Section wrapper below the nav: kill the panel border/background so the
   Chat history list rows sit flush in the sidebar, not inside a card. */
html body aside.sidebar#sidebar .sidebar-history,
html body aside.sidebar#sidebar .sidebar-history--v1929,
html body aside.sidebar#sidebar .sidebar-section.sidebar-history {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  --ntl-panel-wrap: transparent !important;
}

 /* remove "powered by Google" logo bar spacing artifact */
 /* drop default pin glyph, keep list compact */

/* Totaly-blue focus ring on the address search input while autocomplete is active */
#hood-addr-search-input:focus,
#hood-addr-search-input:focus-visible {
  outline: none !important;
  border-color: var(--brand-blue-pure) !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25) !important;
}

aside.sidebar .sidebar-footer .footer-settings-btn { appearance: none; -webkit-appearance: none; }


.chat-dataset-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.chat-dataset-download { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand-blue-pure); color: var(--fg-inverse); border: none; font-size: 0.78rem; font-weight: 500; cursor: pointer; }



.chat-dataset-table th, .chat-dataset-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--overlay-w-04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }




/* ── v40.26: Route page cyan/teal -> Totaly blue cleanup ──────────────────
   GPS icon, Refresh icon, AI Optimize star+text, START pill all converted
   from #4F98A3/#4FA3FF/rgba(79,152,163,*) to #2196F3/rgba(33,150,243,*).
   Defensive: no mask-image/fade should exist on the Route timeline or the
   START row -- force none in case any inherited rule adds one. Does NOT
   touch the mobile chat-messages fade (that lives at line ~14095) and does
   NOT touch the sticky .route-hdr blur (that's an intentional header
   backdrop-filter, not a bug). ──────────────────── */
.rt-timeline, .rt-leg.rt-leg--start,
aside.sidebar .sidebar-scroll {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}



.route-period-opt--custom.is-active { color: var(--brand-blue-pure); }

.rt-lead-typebar-spacer {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--overlay-w-08);
  margin: 0 6px;
  vertical-align: middle;
}
.rt-termite-chip {
  border-color: rgba(212, 168, 44, 0.28) !important;
}
.rt-termite-chip.is-active {
  background: rgba(212, 168, 44, 0.12) !important;
  border-color: rgba(212, 168, 44, 0.55) !important;
  color: #E8DAA8 !important;
}

.rt-sort-chip {
  border-color: var(--accent-primary-soft-28) !important;
}
.rt-sort-chip.is-active {
  background: var(--accent-primary-soft-14) !important;
  border-color: var(--accent-primary-alpha-55) !important;
  color: #A8D0FF !important;
}

/* Long lists: containment isolates layout so item mutations do not
   force a document-wide reflow. */
html body .rt-row, html body .dr-dd-item {
  contain: layout style;
}

/* Dashboard cards: skip render work when out of viewport. Falls back
   to visible on browsers without content-visibility (Firefox <=124). */
@supports (content-visibility: auto) {
  html body .dashboard-view .kpi-card, html body .dashboard-view .card, html body .rt-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
  }
}

/* Reduce paint work on backdrop-filter - expensive on mid-tier hw.
   Only kill it under `prefers-reduced-motion` so users on high-end
   Macs keep the effect. */
@media (prefers-reduced-motion: reduce) {
  html body .pill--glass,
  html body .msg-status-bar,
  html body .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Font metric override so Satoshi swap doesn't shift layout when
   fontshare finishes loading. Cuts CLS ~40%. */
@supports (size-adjust: 100%) {
  @font-face {
    font-family: 'Satoshi-fallback';
    src: local('Arial');
    size-adjust: 106%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
  }
}

/* ════════════════════
   v40.30 Speed-to-Lead brand polish
   User asks:
  1. Bright reds and teals off-brand -> reduce saturation, use Totaly blue only
  2. Circle border around date and filter chips -> flatten, no visible pill outline
  3. Outreach tab -> Builder (relocated to sidebar route, top tab hidden)
  4. Top fade on KPI bar -> killed, flat solid background
   ════════════════════ */

/* 1. KPI STATUS BAR -- fully flat surface, no fade, no gradient */
html body .msg-status-bar,
html body.route-messages .msg-status-bar {
  background: #1F2121 !important;
  border-bottom: 1px solid #2A2A2A !important;
  box-shadow: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-app-theme="light"] body .msg-status-bar,
html[data-app-theme="light"] body.route-messages .msg-status-bar {
  background: #FFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* 2. FILTER CHIPS (Date, Filter) -- v41.90 glass-pill treatment.
   IMG_3625 showed a distinctly blue-tinted background on the chips at
   390px mobile; the tint traced back to `-webkit-tap-highlight-color`
   plus the <select class="msg-select-chip-native"> leaking its native
   iOS focus/accent through the opacity:0 overlay. Fix defensively:
   - Force a truly neutral, semi-transparent white overlay on the label
   - Kill accent-color / tap-highlight / any focus glow on the chip and
     its native <select> child
   - Use max-specificity selector so no later rule can re-tint it. */
html body div.msg-chip-row > .msg-select-chip,
html body .msg-chip-row .msg-select-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;   /* full pill (matches .pill--glass elsewhere) */
  padding: 6px 14px !important;
  box-shadow: none !important;
  color: #EAEBEC !important;
  font-weight: 500 !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
          backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-tap-highlight-color: transparent !important;
  accent-color: transparent !important;
}
html body div.msg-chip-row > .msg-select-chip:hover,
html body .msg-chip-row .msg-select-chip:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}
html body div.msg-chip-row > .msg-select-chip:focus-within,
html body .msg-chip-row .msg-select-chip:focus-within {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14) !important;
}
/* Neutralize the native <select> so nothing leaks through the label */
html body .msg-chip-row .msg-select-chip .msg-select-chip-native,
html body .msg-chip-row .msg-select-chip-native {
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  accent-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
html body .msg-chip-row .msg-select-chip .msg-select-chip-label {
  color: inherit !important;
  font-weight: 500 !important;
}
html body .msg-chip-row .msg-select-chip svg {
  opacity: 0.75;
  color: currentColor;
}
html body .msg-chip-row .msg-select-chip:hover svg { opacity: 1; }

/* Light-theme fallback */
html[data-app-theme="light"] body .msg-chip-row .msg-select-chip {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #1F2124 !important;
}
html[data-app-theme="light"] body .msg-chip-row .msg-select-chip:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  background-color: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #000000 !important;
}

/* 3. HIDE the redundant BUILDER tab bar. Builder is a sidebar route now. */
html body .outreach-tabs { display: none !important; }

/* 4. REDUCE SATURATION on Messages pills.
   Old: bright #2E7D32 green + bright #C62828 red -> reads as "alarm."
   New: softer, brand-neutral tones. */
html body .msg-pill.msg-pill-on, html body .msg-pill[data-state="on"] {
  color: #6EA57A !important;         /* muted sage green */
}
html body .msg-pill.msg-pill-on::before {
  background: #6EA57A !important;
}
html body .msg-pill.msg-pill-off, html body .msg-pill[data-state="off"] {
  color: #C57274 !important;         /* muted terracotta, not alarm red */
}
html body .msg-pill.msg-pill-off::before {
  background: #C57274 !important;
}
html body .msg-pill.msg-pill-optout {
  color: #8A8A8A !important;
}
html body .msg-pill.msg-pill-optout::before {
  background: #8A8A8A !important;
}
/* Bad state val (used in KPI bar) -- soften from full red */
html body .msg-stat-bad .msg-stat-val { color: #C57274 !important; }

/* 5. Any lingering teal in Messages surface -> Totaly blue */
html body .msg-view .is-active {
  background: rgba(33,150,243,0.10) !important;
  border-color: rgba(33,150,243,0.28) !important;
}

/* 6. KPI stat labels -- warmer neutral, not cold gray-blue */
html body .msg-stat-label {
  color: rgba(200,201,204,0.65) !important;
  letter-spacing: 0.06em !important;
}
html[data-app-theme="light"] body .msg-stat-label {
  color: rgba(60,64,67,0.60) !important;
}

html body .stl-builder { padding-bottom: 96px; }

/* Banner */
html body .stl-banner {
  margin: 16px 20px 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
html body .stl-banner-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: inherit; }
html body .stl-banner-sub   { font-size: 13px; color: rgba(200,201,204,0.72); line-height: 1.45; }
html body .stl-banner-dryrun { border-color: rgba(33,150,243,0.28); background: rgba(33,150,243,0.06); }
html body .stl-banner-live   { border-color: rgba(110,165,122,0.35); background: rgba(110,165,122,0.08); }
html body .stl-banner-paused { border-color: rgba(197,114,116,0.30); background: rgba(197,114,116,0.06); }
html[data-app-theme="light"] body .stl-banner-sub { color: rgba(60,64,67,0.65); }

/* KPI row */
html body .stl-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 20px 14px;
}
html body .stl-kpi {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
html body .stl-kpi-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,201,204,0.60);
  margin-bottom: 4px;
}
html body .stl-kpi-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-app-theme="light"] body .stl-kpi { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-kpi-label { color: rgba(60,64,67,0.60); }

/* Meta block */
html body .stl-meta {
  margin: 0 20px 20px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
html body .stl-meta-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
html body .stl-meta-label { color: rgba(200,201,204,0.60); }
html body .stl-meta-val   { color: inherit; font-weight: 500; }
html[data-app-theme="light"] body .stl-meta { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-meta-label { color: rgba(60,64,67,0.60); }

/* Stage cards */
html body .stl-stages { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; }
html body .stl-stage {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  padding: 16px;
}
html body .stl-stage-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
html body .stl-stage-title { font-size: 14px; font-weight: 600; }
html body .stl-stage-key {
  font-size: 12px;
  font-weight: 400;
  color: rgba(200,201,204,0.55);
  margin-left: 8px;
  font-family: ui-monospace, "SF Mono", monospace;
}
html body .stl-stage-approval {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html body .stl-stage-approval.is-approved   { color: #6EA57A; background: rgba(110,165,122,0.10); }
html body .stl-stage-approval.is-unapproved { color: rgba(200,201,204,0.60); background: rgba(255,255,255,0.04); }
html[data-app-theme="light"] body .stl-stage { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-stage-key { color: rgba(60,64,67,0.55); }
html[data-app-theme="light"] body .stl-stage-approval.is-unapproved { color: rgba(60,64,67,0.60); background: rgba(60,64,67,0.04); }

html body .stl-stage-field { display: block; margin-bottom: 12px; }
html body .stl-stage-field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,201,204,0.60);
  margin-bottom: 6px;
}
html body .stl-stage-body {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
}
html body .stl-stage-body:focus {
  outline: none;
  border-color: rgba(33,150,243,0.50);
  background: rgba(33,150,243,0.04);
}
html body .stl-stage-counter { font-size: 11px; color: rgba(200,201,204,0.50); text-align: right; margin-top: 4px; }
html[data-app-theme="light"] body .stl-stage-field-label { color: rgba(60,64,67,0.60); }
html[data-app-theme="light"] body .stl-stage-body { border-color: rgba(60,64,67,0.15); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-stage-counter { color: rgba(60,64,67,0.50); }

html body .stl-stage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
html body .stl-stage-inline { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
html body .stl-stage-inline-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(200,201,204,0.55); }
html body .stl-stage-num {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
html body .stl-stage-approve-toggle { flex-direction: row; align-items: center; gap: 8px; }
html body .stl-stage-approve-toggle input { width: 16px; height: 16px; accent-color: #2196F3; }
html body .stl-stage-approve-toggle span { font-size: 13px; }
html[data-app-theme="light"] body .stl-stage-inline-label { color: rgba(60,64,67,0.55); }
html[data-app-theme="light"] body .stl-stage-num { border-color: rgba(60,64,67,0.15); background: rgba(60,64,67,0.02); }

html body .stl-stage-preview-wrap {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
}
html body .stl-stage-preview-label { font-size: 11px; color: rgba(200,201,204,0.50); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
html body .stl-stage-preview-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(33,150,243,0.10);
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}
html[data-app-theme="light"] body .stl-stage-preview-wrap { border-color: rgba(60,64,67,0.12); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-stage-preview-label { color: rgba(60,64,67,0.55); }

html body .stl-stage-actions { display: flex; align-items: center; gap: 12px; }
html body .stl-stage-save {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(33,150,243,0.35);
  background: rgba(33,150,243,0.10);
  color: #2196F3;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
html body .stl-stage-save:hover { background: rgba(33,150,243,0.18); }
html body .stl-stage-save:disabled { opacity: 0.5; cursor: not-allowed; }
html body .stl-stage-save-status { font-size: 12px; color: rgba(200,201,204,0.60); }
html[data-app-theme="light"] body .stl-stage-save-status { color: rgba(60,64,67,0.60); }

/* Queue preview */
html body .stl-queue {
  margin: 20px 20px 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
html body .stl-queue-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
html body .stl-queue-title { font-size: 14px; font-weight: 600; }
html body .stl-queue-refresh {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
html body .stl-queue-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow: auto; }
html body .stl-queue-row {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
html body .stl-queue-phone { font-size: 11px; color: rgba(200,201,204,0.60); margin-bottom: 4px; font-family: ui-monospace, "SF Mono", monospace; }
html body .stl-queue-body-text { font-size: 13px; line-height: 1.45; }
html body .stl-queue-empty { font-size: 13px; color: rgba(200,201,204,0.55); padding: 12px 0; }
html[data-app-theme="light"] body .stl-queue { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-queue-row { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-queue-phone { color: rgba(60,64,67,0.60); }

/* Bottom controls */
html body .stl-controls {
  margin: 20px 20px 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
html body .stl-approve-all {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(110,165,122,0.40);
  background: rgba(110,165,122,0.10);
  color: #6EA57A;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
}
html body .stl-approve-all:hover { background: rgba(110,165,122,0.18); }
html body .stl-approve-all:disabled { opacity: 0.5; cursor: not-allowed; }
html body .stl-kill-note {
  font-size: 12px;
  color: rgba(200,201,204,0.55);
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(197,114,116,0.40);
}
html[data-app-theme="light"] body .stl-controls { border-color: rgba(60,64,67,0.10); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] body .stl-kill-note { color: rgba(60,64,67,0.60); background: rgba(60,64,67,0.02); }

.gl-skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.msg-bubble.msg-assistant:hover .gl-msg-feedback,
.msg-bubble.msg-assistant:focus-within .gl-msg-feedback,
.gl-msg-feedback:has(.gl-msg-feedback-correction-wrap) {
  opacity: 1;
}
.gl-msg-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  opacity: 0.5;
  transition: opacity 160ms ease;
}
.gl-msg-feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(200,201,204,0.62);
  cursor: pointer;
}
.gl-msg-feedback-btn svg { width: 14px; height: 14px; }
.gl-msg-feedback-btn:hover,
.gl-msg-feedback-btn:focus-visible,
.gl-msg-feedback-btn.is-active { color: var(--brand-blue-pure); background: var(--accent-primary-soft-10); }
.gl-msg-feedback-btn.is-active svg { fill: currentColor; }
.gl-msg-feedback-btn:disabled { cursor: default; opacity: 0.72; }
.gl-msg-feedback-thanks { color: var(--brand-blue-pure); font-size: 12px; }
.gl-msg-feedback-correction-wrap {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.gl-msg-feedback-correction {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid rgba(33,150,243,0.3);
  border-radius: 6px;
  background: var(--overlay-w-03);
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}
.gl-msg-feedback-correction:focus { outline: 0; border-color: var(--brand-blue-pure); }
.gl-msg-feedback-save,
.chat-eval-refresh {
  padding: 6px 10px;
  border: 1px solid rgba(33,150,243,0.42);
  border-radius: 6px;
  background: var(--accent-primary-soft-12);
  color: var(--brand-blue-pure);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.gl-msg-feedback-save:hover,
.chat-eval-refresh:hover { background: rgba(33,150,243,0.20); }
.gl-msg-feedback-save:disabled { cursor: default; opacity: 0.6; }


.chat-eval-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

.chat-eval-header h1,
.chat-eval-eyebrow,
.chat-eval-header p:not(.chat-eval-eyebrow) { display: none; }

.chat-eval-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}



.chat-eval-kpis strong { display: block; margin-top: 5px; font-size: 25px; font-variant-numeric: tabular-nums; }

.chat-eval-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 16px 10px; }


.chat-eval-chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 12px; }




.chat-eval-table th,
.chat-eval-table td { padding: 11px 16px; border-top: 1px solid var(--overlay-w-07); text-align: left; vertical-align: top; }

.chat-eval-table td:last-child { color: rgba(200,201,204,0.58); white-space: nowrap; }




html[data-app-theme="light"] .chat-eval-kpis article,
html[data-app-theme="light"] .chat-eval-panel,
html[data-app-theme="light"] .chat-eval-state,
html[data-app-theme="light"] .chat-eval-loading { border-color: rgba(60,64,67,0.12); background: rgba(60,64,67,0.02); }
html[data-app-theme="light"] .chat-eval-table th,
html[data-app-theme="light"] .chat-eval-table td { border-color: rgba(60,64,67,0.10); }
/* v41.58h: component:chat block L35468-L35476 moved to mobile-v2.css */

/* ============================================================================
   v40.41 composer cleanup (2026-08-14)

   User request: simplify the chat composer. Remove hamburger-looking button,
   thin single-line border only (no heavy shadow or double frames), tidy send
   button, keep model picker clean.

   The composer had ~40 layered overrides accreted across v40.5* → v40.30.
   This block is the final say — deliberately last-in-file so cascade wins.
   ========================================================================= */

/* --- outer card: single thin border, no glow/shadow --- */
html body .rich-composer,
html body .ai-composer-wrap .rich-composer,
html body .ai-view .rich-composer,
html body .glass-composer,
html body .floating-chat-composer {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  background-image: none !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
}

/* focus: same thin line, just a shade brighter — no glow ring */
html body .rich-composer:focus-within,
html body .ai-composer-wrap .rich-composer:focus-within,
html body .ai-view .rich-composer:focus-within,
html body .glass-composer:focus-within,
html body .floating-chat-composer:focus-within {
  border-color: #5A5A5A !important;
  box-shadow: none !important;
}

/* the outer wrap must not draw its own frame anymore */
html body .ai-composer-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* textarea: fully transparent, no border shading */
html body .rich-composer .rc-textarea,
html body .rich-composer textarea,
html body .rich-composer input[type="text"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
  caret-color: var(--gl-chat-text, #E5E5E5) !important;
}
html body .rich-composer .rc-textarea::placeholder,
html body .rich-composer textarea::placeholder {
  color: #7A7A79 !important;
}

/* toolbar: no top border, no background */
html body .rich-composer .rc-toolbar {
  background: transparent !important;
  border-top: 0 !important;
  padding-top: 0.2rem !important;
}

/* --- kill the hamburger-looking queue button in every state --- */

/* --- send button: solid Totaly blue circle, clean --- */
html body .rc-send,
html body button.rc-send,
html body .rich-composer .rc-send,
html body .ai-view .rich-composer .rc-send {
  background: #2196F3 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 120ms ease, transform 100ms ease;
}
/* mobile: 44px touch target, still no glow */
/* [moved to mobile-v2.css v41.58k — was L34813-L34822 @media (max-width: 768px)] */
html body .rc-send:focus,
html body .rc-send:focus-visible,
html body .rich-composer .rc-send:focus,
html body .rich-composer .rc-send:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35) !important;
}
html body .rc-send:hover,
html body .rich-composer .rc-send:hover {
  background: #1E88E5 !important;
  transform: none !important;
}
html body .rc-send:active,
html body .rich-composer .rc-send:active {
  transform: scale(0.96) !important;
}
html body .rc-send svg,
html body .rich-composer .rc-send svg,
html body .rc-send svg * {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  width: 16px !important;
  height: 16px !important;
}
html body .rc-send:disabled {
  background: #3A3B3B !important;
  opacity: 0.5 !important;
  cursor: not-allowed;
}
html body .rc-send:disabled svg,
html body .rc-send:disabled svg * {
  stroke: #7A7A79 !important;
}

/* --- model picker: refined pill --- */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.28rem 0.55rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 999px !important;
  color: var(--gl-chat-text, #C5C5C4) !important;
  transition: border-color 120ms ease, background 120ms ease;
}
html body .rich-composer .rc-model:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #4A4A4A !important;
}
html body .rich-composer .rc-model svg {
  opacity: 0.7;
  color: #9A9998;
  stroke: #9A9998;
  flex-shrink: 0;
}
html body .rich-composer .rc-model-select {
  background: transparent !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 0.1rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  max-width: 140px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body .rich-composer .rc-model-select option {
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
}

/* --- other icon buttons (plus, mic): match the calmer scheme --- */
html body .rich-composer .rc-icon-btn {
  background: transparent !important;
  border: 1px solid #3A3A3A !important;
  color: var(--gl-chat-text, #C5C5C4) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease;
}
html body .rich-composer .rc-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #4A4A4A !important;
}
html body .rich-composer .rc-icon-btn svg {
  color: var(--gl-chat-text, #C5C5C4);
  stroke: #C5C5C4;
}

/* --- Web / Data chips: same refined outline --- */
html body .rich-composer .rc-chip {
  background: transparent !important;
  border: 1px solid #3A3A3A !important;
  color: var(--gl-chat-text, #C5C5C4) !important;
  border-radius: 999px !important;
  padding: 0.28rem 0.7rem !important;
  font-size: 0.78rem !important;
  box-shadow: none !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
html body .rich-composer .rc-chip:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #4A4A4A !important;
}
html body .rich-composer .rc-chip.rc-chip--active {
  background: rgba(33, 150, 243, 0.12) !important;
  border-color: rgba(33, 150, 243, 0.55) !important;
  color: var(--gl-chat-text, #E5E5E5) !important;
}
html body .rich-composer .rc-chip svg {
  opacity: 0.8;
}

/* Fix 1: allow plus menu to overflow the toolbar */
html body .rich-composer .rc-toolbar { overflow: visible !important; }
html body .rich-composer .rc-left { overflow: visible !important; }
html body .rich-composer .rc-right { overflow: visible !important; }
html body .glass-composer,
html body .floating-chat-composer { overflow: visible !important; }
html body .rc-plus-menu { z-index: 200 !important; }

/* Fix 2: unify all composer button and chip sizes to 32px tall.
   Note: mobile media query sets min-height: 40px / min-width: 44px on
   .rc-icon-btn / .rc-send, so we must override BOTH height and min-height
   to actually get a 32px button at any viewport. */
html body .rich-composer .rc-icon-btn,
html body .rich-composer .rc-plus-btn,
html body .rich-composer .rc-mic,
html body .rich-composer .rc-send {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
html body .rich-composer .rc-chip {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
html body .rich-composer .rc-model {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 4px 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Fix 3: center model select text + chevron */
html body .rich-composer .rc-model .rc-model-select {
  height: 100% !important;
  padding: 0 22px 0 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  background-position: right 4px center !important;
  cursor: pointer !important;
}

/* FIX A — cursor sits on wrong line inside .rc-input.
   Root cause: the contenteditable div has min-height:44px and line-height:1.5
   at font-size 15px (line box = 22.5px). When empty, the browser places the
   caret at the block's start, but because ::before placeholder is an inline
   pseudo, iOS/Safari sometimes puts the caret AFTER the pseudo baseline,
   producing a "cursor below placeholder" look.
   Solution: make placeholder position:absolute so it renders as an overlay
   and no longer participates in caret placement. */
html body .rich-composer .rc-input {
  position: relative !important;
  display: block !important;
  padding: 11px 4px !important;   /* vertical center for min-height:44px */
  min-height: 44px !important;
  line-height: 22px !important;    /* one line at 15px + 7px */
  overflow-y: auto !important;
}
html body .rich-composer .rc-input:empty::before {
  position: absolute !important;
  top: 11px !important;
  left: 4px !important;
  line-height: 22px !important;
  pointer-events: none !important;
  color: rgba(232,233,235,0.35) !important;
  content: attr(data-placeholder) !important;
}

/* FIX B — +menu on mobile.
   Ensure the menu opens ABOVE the toolbar and can't be clipped by any parent.
   Also give it a higher z-index so it beats any sticky/positioned neighbor. */
html body .rich-composer .rc-plus-wrap { position: relative !important; overflow: visible !important; }
html body .rich-composer .rc-plus-menu {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 500 !important;
  min-width: 168px !important;
}
/* Nuke any inherited `overflow:hidden` on any composer ancestor that could
   still clip the pop-up. */
html body .rich-composer,
html body .rich-composer .rc-toolbar,
html body .rich-composer .rc-left,
html body .rich-composer .rc-right,
html body .glass-composer,
html body .floating-chat-composer,
html body .ai-composer-wrap,
html body .ai-view .ai-composer-wrap { overflow: visible !important; }

/* FIX C — Route viewbar oval that clipped the chips.
   The viewswitch used grid-template-columns: repeat(4, 1fr) but the JS
   renders 5 buttons (Call, Timeline, Compact, Map, AI Optimize), so the
   5th wrapped onto a 2nd row and the rounded container became a squished
   double-height oval. Move to 5 columns and tighten padding so all five
   fit on one row at 390px viewport. */



/* keep active pill fully rounded inside the container pill */


/* v41.90 — AI Optimize truncation fix at 390px mobile.
   With 5 equal grid columns at 390px viewport, each column is ~74px.
   "AI Optimize" + icon + gap needs ~90px, so text-overflow:ellipsis on
   .route-viewbtn was clipping it to "AI Optimi...". Switch the whole
   viewbar to a horizontally scrolling flex row on mobile so every label
   is fully visible; the pill container becomes edge-to-edge so users can
   swipe to reach AI Optimize.

   Kept: pill background, active-state styling, tap targets. */
@media (max-width: 480px) {
  
  
  
  html body .route-viewswitch > .route-viewbtn {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
}

/* Gold palette (warm, high-contrast on dark, brand-neutral) */


/* Left stripe on on-hold rows: red -> gold, slightly bolder for crispness */

/* ON HOLD pill: red -> gold */
html body .rt-call-pill--hold {
  background: var(--gl-hold-gold-bg) !important;
  color: var(--gl-hold-gold-fg) !important;
}

/* Aging chip (e.g. "2d"): red -> gold */
html body .rt-call-aging {
  background: var(--gl-hold-gold-bg2) !important;
  color: var(--gl-hold-gold-fg) !important;
}

/* ── Sharpen the whole row ──────────────────── */
html body .rt-call-row {
  padding: 13px 16px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  gap: 5px !important;
}
html body .rt-call-name {
  font-size: 14.5px !important;
  font-weight: 640 !important;
  color: #F1F3F5 !important;
  letter-spacing: -0.01em !important;
}
html body .rt-call-val {
  font-size: 13px !important;
  font-weight: 640 !important;
  color: #F1F3F5 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
html body .rt-call-pill {
  padding: 2.5px 8px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
html body .rt-call-aging {
  padding: 2.5px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html body .rt-call-line2 { font-size: 12.5px !important; color: #A6ADB4 !important; }
html body .rt-call-phone { font-weight: 600 !important; }
html body .rt-call-addr { color: #A6ADB4 !important; }
html body .rt-call-when { color: #7F878F !important; font-size: 11px !important; }
html body .rt-call-attr { color: #7F878F !important; font-size: 11px !important; padding-top: 3px !important; }

/* ── New: init/monthly breakdown row ──────────────────── */
html body .rt-call-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 640;
  letter-spacing: -0.005em;
  padding-top: 1px;
  color: #E8EAED;
}
html body .rt-call-price em {
  font-style: normal;
  font-weight: 500;
  font-size: 10.5px;
  color: #7F878F;
  letter-spacing: 0.02em;
  margin-left: 2px;
}
html body .rt-call-price-init { color: #E8EAED; }
html body .rt-call-price-mo   { color: #7CBFFF; }

/* Call-list attempts chip: "T3 · Gave pitch" color-coded by door-type. */
html body .rt-call-tries {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  /* Neutral default when no door-type set */
  background: rgba(255, 255, 255, 0.06);
  color: #C9CCD1;
}
/* Color variants match the rep-tools door-type palette */

/* Rep-tools "Last: <type>" hint next to the T counter */
html body .rsm-knock-hint-dt {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
  font-size: 11px;
}

/* Emphasize the +Try button so reps see it as the action */
html body .rsm-tries-btn--plus.rsm-try-open {
  background: rgba(33, 150, 243, 0.14) !important;
  color: #7CBFFF !important;
  border-color: rgba(33, 150, 243, 0.35) !important;
  font-weight: 700 !important;
}
html body .rsm-tries-btn--plus.rsm-try-open:hover {
  background: rgba(33, 150, 243, 0.22) !important;
}

.rt-try-popup {
  position: fixed;
  z-index: 10000;
  background: #17181A;
  border: 1px solid var(--border-overlay-10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 20px 60px var(--shadow-alpha-55), 0 4px 14px rgba(0, 0, 0, 0.4);
  min-width: 260px;
  max-width: calc(100vw - 16px);
  animation: rtTryPopIn 120ms ease-out;
}
@keyframes rtTryPopIn {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rt-try-popup-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7F878F;
  padding: 2px 4px 10px;
}
.rt-try-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rt-try-opt {
  appearance: none;
  border: 1px solid var(--border-overlay-10);
  background: var(--overlay-w-03);
  color: #E8EAED;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.rt-try-opt:hover { background: var(--border-soft); }
.rt-try-opt:active { transform: scale(0.98); }
.rt-try-opt.is-current { box-shadow: 0 0 0 1px currentColor inset; }

/* Color-coded left border per attempt type */
.rt-try-opt--gave_pitch     { border-left: 3px solid var(--brand-blue-pure); }
.rt-try-opt--call_back      { border-left: 3px solid #E5A83D; }
.rt-try-opt--made_sale      { border-left: 3px solid #10B981; }
.rt-try-opt--not_interested { border-left: 3px solid #EF4444; }
.rt-try-opt--not_home       { border-left: 3px solid #9CA3AF; }
.rt-try-opt--never_knock    { border-left: 3px solid #555; }

.rt-try-opt--gave_pitch:hover     { background: var(--accent-primary-soft-10); }
.rt-try-opt--call_back:hover      { background: rgba(229, 168, 61, 0.10); }
.rt-try-opt--made_sale:hover      { background: rgba(16, 185, 129, 0.10); }
.rt-try-opt--not_interested:hover { background: rgba(239, 68, 68, 0.10); }
.rt-try-opt--not_home:hover       { background: rgba(107, 114, 128, 0.14); }
.rt-try-opt--never_knock:hover    { background: rgba(80, 80, 80, 0.22); }

/* Mobile: full-width popup */
/* v41.58h: misc block L35458-L35467 moved to mobile-v2.css */

/* Rounded customer cards in the call list */
html body .rt-call-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 8px !important;
}
html body .rt-call-row {
  border-radius: 14px !important;
  border-bottom: none !important;
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}
/* Kill hover-lock on touch devices — :hover sticks after a tap on iOS/Android
   and the row looks "selected" even though the user only briefly touched it. */
@media (hover: hover) and (pointer: fine) {
  html body .rt-call-row:hover {
    background: rgba(33, 150, 243, 0.06) !important;
    border-color: rgba(33, 150, 243, 0.14) !important;
  }
}
/* Explicitly reset :active / :focus so touch devices don't lock the color. */
html body .rt-call-row:active,
html body .rt-call-row:focus,
html body .rt-call-row:focus-within,
html body .rt-call-row:focus-visible {
  background: rgba(255, 255, 255, 0.015) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  outline: none !important;
}
/* The gold hold-stripe respects the rounded corners now */

/* ── Unify blues → #2196F3 (Totaly brand) ─────────────────── */

/* Phone number in call list rows */
html body .rt-call-phone,
html body .rt-call-phone:link,
html body .rt-call-phone:visited {
  color: #2196F3 !important;
}
html body .rt-call-phone:hover {
  color: #4EA8FF !important;
  background: rgba(33, 150, 243, 0.10) !important;
}

/* Monthly price token ($65 /mo) */
html body .rt-call-price-mo { color: #2196F3 !important; }

/* T1 · Gave pitch chip on call rows (blue variant) */
/* Same for the rep-tools "Last:" hint variant */
/* +Try button in rep tools */
html body .rsm-tries-btn--plus.rsm-try-open {
  color: #2196F3 !important;
  border-color: rgba(33, 150, 243, 0.40) !important;
}

/* Popup: "Gave pitch" option accent */
.rt-try-opt--gave_pitch { border-left-color: var(--brand-blue-pure) !important; }






html body .rt-call-row {
  overflow: hidden !important;                     /* clip stripe to rounded corners */
  padding: 12px 14px !important;
  gap: 3px !important;
}

/* Gold hold stripe: inset by 6px top+bottom, thinner, and softly rounded.
   The row's overflow:hidden now makes the stripe visually hug the card curve. */

/* Consolidated line 3: attempts chip + dim meta text side-by-side. */
html body .rt-call-line3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #A6ADB4;
}
html body .rt-call-meta {
  color: #A6ADB4;
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
html body .rt-call-meta-price {
  color: #2196F3;
  font-weight: 600;
}

/* ────────────────────
 * v40.50: center the "Model" label inside its pill.
 * Prior CSS put 22px right padding for the chevron and 0 left,
 * which made text-align:center still look left-shifted. Mirror
 * the padding so the visual center of the text sits at the pill
 * center. Also widen the pill a bit so short labels breathe.
 * ──────────────────── */

html body .rich-composer .rc-model {
  padding: 0 8px !important;        /* symmetric */
  min-width: 108px !important;      /* room for "Model" + chevron */
}

html body .rich-composer .rc-model .rc-model-select {
  padding: 0 18px 0 4px !important; /* small left pad balances the chevron right */
  text-align: center !important;
  text-align-last: center !important;
  background-position: right 2px center !important;
}

.rt-crm-notes-compose-ta {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1a1a;
  border: 1px solid #D8D8D8;
  border-radius: 10px;
  background: var(--fg-inverse);
  box-sizing: border-box;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rt-crm-notes-compose-ta::placeholder { color: #A6ADB4; }
.rt-crm-notes-compose-ta:focus {
  border-color: var(--brand-blue-pure);
  box-shadow: 0 0 0 3px var(--accent-primary-soft-15);
}
.rt-crm-notes-compose-hint {
  font-size: 12px;
  color: var(--fg-faint);
}
.rt-crm-notes-compose-save {
  appearance: none;
  border: none;
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.rt-crm-notes-compose-save:hover:not(:disabled) { background: var(--accent-primary-hover); }
.rt-crm-notes-compose-save:disabled { opacity: 0.55; cursor: default; }

.rt-crm-sms-row {
  display: flex;
  flex-direction: column;
  padding: 6px 16px;
  max-width: 100%;
}

.rt-crm-sms-bubble {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.rt-crm-sms-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--fg-faint);
  padding: 0 4px;
}

.rsm-notes-wrap {
  position: relative;
  z-index: 3;
}
.rsm-notes-ta {
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
  touch-action: manipulation !important;
  position: relative;
  z-index: 3;
}
.rsm-notes-save {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

.rt-crm-qbtn.is-active { background: var(--accent-primary-soft-14); color: var(--brand-blue-pure); }
.rt-crm-qbtn.is-active svg { color: var(--brand-blue-pure); }

/* Kill the phantom `.pill.live::before` empty pseudo that offsets flex spacing */
html body header.topbar .topbar-right .status-row > .pill.live::before,
html body header.topbar .topbar-right .status-row > #etl-pill.live::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Force dots to align with flex-center (not text baseline) and remove baseline drift */
html body header.topbar .topbar-right .status-row .etl-dot,
html body header.topbar .topbar-right .status-row .brain-dot,
html body header.topbar .topbar-right .status-row .sync-dot,
html body header.topbar .topbar-right .status-row .sync-dot--ok,
html body header.topbar .topbar-right .status-row .sync-dot--warn {
  align-self: center !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  translate: 0 0 !important;
}
/* Ensure the pill labels sit on the same optical baseline as the dots */
html body header.topbar .topbar-right .status-row > .pill,
html body header.topbar .topbar-right .status-row > #etl-pill,
html body header.topbar .topbar-right .status-row > #brain-pill,
html body header.topbar .topbar-right .status-row > #sync-indicator {
  align-items: center !important;
  line-height: 1 !important;
}
html body header.topbar .topbar-right .status-row .pill-label,
html body header.topbar .topbar-right .status-row #etl-pill-label,
html body header.topbar .topbar-right .status-row #brain-pill-label {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Topbar status pills: more horizontal padding so text isn't squished */
html body header.topbar .topbar-right .status-row > .pill,
html body header.topbar .topbar-right .status-row > .pill.pill--glass,
html body header.topbar .topbar-right .status-row > #etl-pill,
html body header.topbar .topbar-right .status-row > #brain-pill,
html body header.topbar .topbar-right .status-row > #sync-indicator,
html body header.topbar .topbar-right .status-row > .pill-clock {
  padding: 5px 14px !important;
  gap: 8px !important;
  min-height: 26px !important;
  height: auto !important;
}

/* The composer uses an overlay pattern: ::before paints "Model", ::after
   paints the caret, and the real <select> sits transparent on top for
   clicks. Size the container as a pill, add hover background, and
   re-center the pseudo-elements. */
html body .rich-composer .rc-model,
html body .ai-view .rich-composer .rc-model,
html body .rc-model {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 0 26px 0 14px !important;   /* room for caret on the right */
  height: 30px !important;
  min-height: 30px !important;
  width: auto !important;
  min-width: 92px !important;
  box-sizing: border-box !important;
  transition: background 120ms ease !important;
}
html body .rich-composer .rc-model:hover,
html body .ai-view .rich-composer .rc-model:hover,
html body .rc-model:hover {
  background: rgba(255,255,255,0.06) !important;
  border: 0 !important;
  border-color: transparent !important;
}

/* Real <select> — keeps clicks working, stays visually invisible */
html body .rich-composer .rc-model-select,
html body .ai-view .rich-composer .rc-model-select,
html body .rc-model-select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  font-size: 0 !important;   /* kill any leaked selected-option text */
}

/* Hide the star SVG icon inside .rc-model — "Model" label speaks for itself */
html body .rich-composer .rc-model > svg,
html body .ai-view .rich-composer .rc-model > svg,
html body .rc-model > svg {
  display: none !important;
}

/* ::before — the visible "Model" label, vertically centered via line-height */
html body .rich-composer .rc-model::before,
html body .ai-view .rich-composer .rc-model::before,
html body .rc-model::before {
  content: "Model" !important;
  position: absolute !important;
  left: 14px !important;
  right: 26px !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* ::after — the caret, vertically centered */
html body .rich-composer .rc-model::after,
html body .ai-view .rich-composer .rc-model::after,
html body .rc-model::after {
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.4px solid rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1.4px solid rgba(255, 255, 255, 0.6) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  transform: translateY(-70%) rotate(45deg) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
}
html body .rich-composer .rc-model:hover::before,
html body .ai-view .rich-composer .rc-model:hover::before,
html body .rc-model:hover::before { color: #fff !important; }
html body .rich-composer .rc-model:hover::after,
html body .ai-view .rich-composer .rc-model:hover::after,
html body .rc-model:hover::after {
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Light theme label + caret color */
[data-app-theme="light"] html body .rc-model::before,
[data-app-theme="og"] html body .rc-model::before,
html[data-app-theme="light"] body .rc-model::before,
html[data-app-theme="og"] body .rc-model::before { color: rgba(30, 29, 28, 0.85) !important; }
[data-app-theme="light"] html body .rc-model::after,
[data-app-theme="og"] html body .rc-model::after,
html[data-app-theme="light"] body .rc-model::after,
html[data-app-theme="og"] body .rc-model::after {
  border-right-color: rgba(30, 29, 28, 0.6) !important;
  border-bottom-color: rgba(30, 29, 28, 0.6) !important;
}
[data-app-theme="light"] html body .rc-model:hover,
[data-app-theme="og"] html body .rc-model:hover,
html[data-app-theme="light"] body .rc-model:hover,
html[data-app-theme="og"] body .rc-model:hover { background: rgba(0,0,0,0.05) !important; }

html body .floating-chat-toggle .fc-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin-right: 2px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #CFD3DA;
}
html body .floating-chat-toggle .fc-mark-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  perspective: 500px;
}
html body .floating-chat-toggle .fc-mark-svg .fc-star { color: #7C818A; fill: currentColor; }
html body .floating-chat-toggle .fc-mark-svg .fc-guy  {
  color: #EAEBEC; fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: fcGuyIdle 5.5s ease-in-out infinite;
  transform-style: preserve-3d;
}
/* Hide the ::before green-dot pseudo now that we have the sketch mark */
html body .floating-chat-toggle::before {
  display: none !important;
  content: none !important;
}
/* Idle: little guy sways gently around vertical axis */
@keyframes fcGuyIdle {
  0%, 88%, 100% { transform: rotateY(0deg); }
  92% { transform: rotateY(-15deg); }
  96% { transform: rotateY(15deg); }
}
/* Hover spin: rotate around the VERTICAL axis (Y) like a coin flip */
@keyframes fcGuySpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
/* Kill the giant blue hover circle and preserve the calm pill look */
html body .floating-chat-toggle:hover,
html body button.floating-chat-toggle:hover {
  background: rgba(31, 33, 33, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 22px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-1px);
  filter: none !important;
}
/* Absolutely no pseudo-element decoration on this pill */
html body .floating-chat-toggle::before,
html body .floating-chat-toggle::after,
html body button.floating-chat-toggle::before,
html body button.floating-chat-toggle::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

html body .floating-chat-toggle,
html body button.floating-chat-toggle {
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 8px 18px 8px 12px !important;
  gap: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(28, 30, 32, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #EAEBEC !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 22px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  filter: none !important;
}
html body .floating-chat-toggle .fc-icon,
html body button.floating-chat-toggle .fc-icon {
  color: #EAEBEC !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
}
/* Hover: quick full spin of the guy only */
html body .floating-chat-toggle:hover .fc-mark-svg .fc-guy {
  animation: fcGuySpin 700ms cubic-bezier(0.65, 0, 0.35, 1) 1 !important;
}

/* The earlier mobile fades on .ai-messages (top 80px + bottom 80px)
   compound when a message thread is short and can blank out the content.
   The ::before/::after opaque gradient overlays on .ai-view already handle
   the visual fade behind topbar/composer, so we don't need masks. */
html body .ai-view .ai-messages, html body.route-ask .ai-messages, html body .floating-chat .floating-chat-messages, html body .floating-chat.open .floating-chat-messages {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body .floating-chat-toggle .fc-mark-svg .fc-guy,
  html body .floating-chat-toggle:hover .fc-mark-svg .fc-guy {
    animation: none !important;
    transform: none !important;
  }
}

@layer overrides {
html body .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow {
  color: var(--fg-muted-cool);
  font-weight: 600;
  letter-spacing: 0.10em;
}

html body .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value {
  color: var(--fg-primary);
}

html body .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit {
  color: var(--fg-muted-cool);
  opacity: 1;
}

html body .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
  color: var(--fg-muted-cool);
}

html body .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-ticker { color: var(--status-success); }

html body .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-ticker { color: var(--status-danger-soft); }

html body .home-launcher .kpi-minimize:hover {
  background: var(--border-overlay-10);
  border-color: var(--accent-hover-alpha-55);
  color: var(--accent-primary-lighter);
}

html body .ai-view .home-dash-grid .home-dash-value,
  html body .ai-view .home-dash-grid .home-dash-bucket-value {
  color: var(--fg-primary);
}

html body .ai-view .home-dash-grid .home-dash-title {
  color: var(--fg-primary);
}

html body .ai-view .home-dash-grid .home-dash-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-bucket-eyebrow {
  color: var(--fg-muted-cool);
}

html body .ai-view .home-dash-grid .home-dash-unit,
  html body .ai-view .home-dash-grid .home-dash-bucket-unit {
  color: var(--fg-muted-cool);
  opacity: 1;
}

html body .ai-view .home-dash-grid .home-dash-ytd-inline {
  color: var(--fg-muted-cool);
  opacity: 1;
}

html body .ai-view .home-dash-grid .home-dash-cta {
  color: var(--fg-muted-cool);
}

html body .ai-view .home-dash-grid .home-dash-eyebrow + .home-dash-title::before {
  color: #6B6E76;
}

html body .home-dash-card.home-dash-card--link:hover,
  html body .home-dash-card:hover {
  background: var(--bg-elev-1);
  background-color: var(--bg-elev-1);
  background-image: none;
  border-color: var(--accent-hover-soft-45);
  box-shadow: 0 8px 22px var(--shadow-alpha-35);
  color: var(--fg-primary);
  transform: translateY(-1px);
}

html body .home-dash-card.home-dash-card--link:hover,
  html body .home-dash-card.home-dash-card--link:hover *,
  html body .home-dash-card:hover,
  html body .home-dash-card:hover * {
  color: var(--fg-primary);
}

html body .home-dash-card:hover .home-dash-eyebrow,
  html body .home-dash-card:hover .home-dash-unit,
  html body .home-dash-card:hover .home-dash-ytd-inline {
  color: var(--fg-muted-cool);
}

html body .home-dash-card.home-dash-card--link:hover .home-dash-cta {
  background: rgba(25, 118, 210, 0.20);
  color: var(--accent-primary-lighter);
}

html body .home-launcher .kpi-minimize,
  html body .ai-view .home-launcher .kpi-minimize {
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: var(--border-soft);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fg-primary-alpha);
  border-radius: 8px;
  z-index: 8;
}

html body .home-launcher .kpi-minimize:hover,
  html body .ai-view .home-launcher .kpi-minimize:hover {
  background: var(--accent-hover-soft-18);
  border-color: var(--accent-hover-alpha-55);
  color: var(--accent-primary-lighter);
}

html body.kpi-active #ai-hero,
  html body.kpi-active .ai-hero,
  html body.kpi-active .ai-hero-card,
  html body.kpi-active .ai-hero-stage {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row1 {
  color: var(--fg-muted-cool);
  opacity: 1;
}

html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-up { color: var(--status-success); }

html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-down { color: var(--status-danger-soft); }

html body .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-flat { color: var(--fg-muted-cool); }

html body .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row1 {
  color: var(--fg-muted-cool);
}

html body .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-up { color: var(--status-success); }

html body .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-down { color: var(--status-danger-soft); }

html body .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-flat { color: var(--fg-muted-cool); }

html body .gl-divisions-grid .gl-division-card,
  html body .gl-division-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.6rem;
  padding: 1.4rem 1rem 1.25rem;
  background: var(--fg-inverse-strong);
  border-radius: 12px;
  border: 1px solid var(--overlay-k-06);
  text-decoration: none;
  color: rgba(15,23,42,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.18s, transform 0.14s;
  /* kill the legacy fixed-width rule */
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 168px;
}

html body .gl-division-card:hover {
  box-shadow: 0 4px 16px var(--accent-hover-soft-14);
  transform: translateY(-1px);
  border-color: rgba(25,118,210,0.20);
}

html body .gl-division-card .gdc-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-hover-soft-10);
  color: var(--accent-primary-hover);
  margin: 0 auto 0.25rem;
}

html body .gl-division-card .gdc-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  color: rgba(15,23,42,0.92);
  hyphens: none;
  word-break: keep-all;
}

html body .gl-division-card .gdc-cta {
  font-size: 0.72rem;
  color: var(--accent-primary-hover);
  font-weight: 600;
  margin-top: auto;
  text-align: center;
  width: 100%;
  align-self: center;
  letter-spacing: 0.02em;
}

html body .gl-division-card.gl-division-card--dim {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

html body .gl-division-card.gl-division-card--dim:hover {
  transform: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

html body .gl-divisions-view .gl-divisions-header {
  margin-bottom: 0.75rem;
}

html body .gl-divisions-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.92);
  margin: 0 0 0.35rem;
}

html body .gl-divisions-sub {
  font-size: 0.85rem;
  color: rgba(15,23,42,0.52);
  margin: 0;
}

html body .gl-divisions-view .ds-crumbs {
  margin-bottom: 0.5rem;
}

html body .gl-divisions-header--centered .gl-divisions-title,
  html body .gl-divisions-header--centered .gl-divisions-sub {
  text-align: center;
}

html body .gl-division-card.gl-division-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  min-height: 110px;
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

html body .gl-division-card.gl-division-chip .gdc-title {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .dr-chip,
  html body .gl-report-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.82);
  background: rgba(245,247,250,1);
  border: 1px solid var(--overlay-k-06);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  white-space: nowrap;
}

html body .dr-chip:hover,
  html body .gl-report-chip:hover {
  background: rgba(25,118,210,0.08);
  border-color: var(--accent-hover-soft-28);
  color: var(--accent-primary-hover);
}

html body .gl-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

html body .gl-divisions-empty {
  padding: 1.5rem;
  text-align: center;
  color: rgba(15,23,42,0.50);
  background: rgba(245,247,250,1);
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,0.10);
}

html body .gl-divisions-view .gl-divisions-title,
  html body .gl-divisions-view--centered .gl-divisions-title,
  html body .gl-divisions-header .gl-divisions-title,
  html body .gl-divisions-header--centered .gl-divisions-title {
  color: var(--fg-inverse);
  opacity: 1;
}

html body .gl-divisions-view .gl-divisions-sub,
  html body .gl-divisions-view--centered .gl-divisions-sub,
  html body .gl-divisions-header .gl-divisions-sub,
  html body .gl-divisions-header--centered .gl-divisions-sub {
  color: rgba(255,255,255,0.62);
  opacity: 1;
}

html body .dr-chip,
  html body .gl-report-chip {
  background: var(--overlay-w-04);
  border: 1px solid var(--border-overlay-10);
  color: var(--fg-primary-alpha);
}

html body .dr-chip:hover,
  html body .gl-report-chip:hover {
  background: rgba(91,169,242,0.12);
  border-color: rgba(91,169,242,0.32);
  color: #5BA9F2;
}

html body .gl-divisions-empty {
  background: var(--overlay-w-03);
  border: 1px dashed var(--border-overlay-10);
  color: rgba(255,255,255,0.50);
}

html body .gl-divisions-grid .gl-division-card.gl-division-chip,
  html body .gl-division-card.gl-division-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-overlay-10);
  color: var(--fg-inverse-strong);
  box-shadow: none;
}

html body .gl-division-card.gl-division-chip .gdc-title {
  color: var(--fg-inverse-strong);
}

html body .gl-division-card.gl-division-chip .gdc-icon {
  background: var(--border-soft);
  color: var(--fg-secondary-alpha);
  border: 1px solid var(--border-soft);
}

html body .gl-division-card.gl-division-chip:hover {
  background: var(--bg-elev-1);
  border-color: var(--border-strong-alpha);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}

html body .gl-division-card.gl-division-chip:hover .gdc-icon {
  background: var(--border-overlay-10);
  color: var(--fg-inverse);
}
html body .gl-divisions-header--centered {
  margin: 0;
}

html body .gl-divisions-header--centered .gl-divisions-title {
  margin: 0 0 0.25rem 0;
}

html body .dr-chip:hover,
  html body .gl-report-chip:hover {
  background: var(--overlay-w-08);
  background-color: var(--overlay-w-08);
  border-color: var(--border-strong-alpha);
  color: rgba(255,255,255,0.95);
}

html body .gl-division-card .gdc-cta,
  html body .gl-division-card.gl-division-chip .gdc-cta {
  color: rgba(255,255,255,0.62);
}

html body .gl-division-card:hover .gdc-cta {
  color: var(--fg-inverse-strong);
}

html:not([data-app-theme="dark"]) body .gl-division-card .gdc-cta {
  color: rgba(15,23,42,0.62);
}

html[data-app-theme="dark"] body .gl-division-card,
  html[data-app-theme="dark"] body .gl-division-card.gl-division-chip,
  html body .gl-divisions-view .gl-division-card,
  html body #main-content .gl-division-card {
  background: #1F2121;
  background-color: #1F2121;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

html[data-app-theme="dark"] body .gl-division-card:hover,
  html body #main-content .gl-division-card:hover {
  background: #232525;
  background-color: #232525;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}

html[data-app-theme="dark"] body .gl-division-card .gdc-title,
  html[data-app-theme="dark"] body .gl-division-card .gdc-sub,
  html[data-app-theme="dark"] body .gl-division-card .gdc-desc,
  html[data-app-theme="dark"] body .gl-division-card .gdc-meta,
  html body #main-content .gl-division-card .gdc-title {
  color: rgba(255,255,255,0.92);
}

html[data-app-theme="dark"] body .gl-division-card .gdc-cta,
  html body #main-content .gl-division-card .gdc-cta {
  color: rgba(255,255,255,0.62);
}

html body .gl-divisions-view .gl-divisions-header,
  html body .gl-divisions-view .gl-divisions-header--centered {
  text-align: center;
  margin: 0 0 0.65rem 0;
}

html body .gl-divisions-view .gl-divisions-title {
  text-align: center;
  margin: 0 auto 0.25rem auto;
  color: rgba(255,255,255,0.95);
}

html body .gl-divisions-view .gl-divisions-sub {
  text-align: center;
  margin: 0.4rem auto 0;
  max-width: 640px;
  color: rgba(255,255,255,0.65);
}

html body .gl-divisions-view ul a,
  html body .gl-divisions-view ol a,
  html body .gl-divisions-view nav a,
  html body .gl-divisions-view li > a {
  color: var(--fg-secondary-alpha);
  text-decoration: none;
}

html body .gl-divisions-view ul a:hover,
  html body .gl-divisions-view ol a:hover,
  html body .gl-divisions-view nav a:hover,
  html body .gl-divisions-view li > a:hover {
  color: rgba(255,255,255,1);
  text-decoration: underline;
}

html body .gl-divisions-view ul,
  html body .gl-divisions-view ol {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-muted-alpha);
  margin: 0 auto 0.5rem auto;
}

html body .gl-chip-grid {
  background: transparent;
  background-color: transparent;
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem auto 0;
  padding: 0;
  max-width: 900px;
}

html body .gl-divisions-view {
  margin: 0 auto;
  text-align: center;
}

html body [class*="chart-header"][class*="dr-"],
  html body [class*="card-header"] {
  background: transparent;
  background-color: transparent;
  border-bottom: 1px solid var(--border-soft);
}

html:not(#__y__) body[data-route="/chats"] .chats-header,
  html[data-app-theme="dark"] body .chats-header,
  html[data-app-theme="dark"] .chats-header {
  background: transparent;
  background-image: none;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0 solid transparent;
  box-shadow: none;
  color: var(--fg-primary, #E3E1DD);
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
}

html body.is-auth-page nav.mobile-topnav,
  html body.is-auth-page nav.mobile-topnav.mobile-topnav--v1940,
  html body.is-auth-page #mobile-topnav {
  display: none;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}

html body nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip {
  border: 0;
  border-width: 0;
  border-style: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
  border: 0;
  border-width: 0;
  border-style: none;

  box-shadow: none;
}

html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
  border-radius: 999px;
}

/* ===========================================================================
   Apple Polish Pass (v40.96) — Emil Kowalski's apple-design + emil-design-eng
   Injected into @layer overrides so it beats base without touching anything.
   Rollback: restore style.css.pre_v40.96
   =========================================================================== */

/* Canonical Apple-family easing + duration tokens (Emil's stronger curves) */
html {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);      /* UI enter, snappy release */
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);  /* On-screen motion */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);          /* iOS drawer curve */

  --dur-press: 100ms;      /* pointer-down feedback */
  --dur-tooltip: 140ms;    /* tooltips / small popovers */
  --dur-menu: 180ms;       /* dropdowns, selects */
  --dur-sheet: 260ms;      /* modals, drawers */
}

/* Global press feedback — instant, on pointer-down.
   Buttons should feel like they hear you. */
html body button:not(:disabled):active,
html body [role="button"]:not([aria-disabled="true"]):active,
html body a.btn:active,
html body .btn:not(:disabled):active,
html body input[type="button"]:not(:disabled):active,
html body input[type="submit"]:not(:disabled):active {
  transform: scale(0.97);
  transition: transform var(--dur-press) var(--ease-out-strong);
}

/* Reset press when not active so we ease back naturally */
html body button:not(:disabled),
html body [role="button"]:not([aria-disabled="true"]),
html body a.btn,
html body .btn:not(:disabled) {
  transition: transform 160ms var(--ease-out-strong),
              background-color 160ms var(--ease-out-strong),
              border-color 160ms var(--ease-out-strong),
              color 160ms var(--ease-out-strong),
              box-shadow 160ms var(--ease-out-strong);
}

/* Kill `transition: all` when it appears on interactive surfaces —
   'all' is a taste smell (transitions every property including layout).
   Scope: buttons and cards only; leaves other rules untouched. */
html body button,
html body .btn,
html body [role="button"],
html body .card,
html body .kpi-card,
html body .home-dash-bucket-chip {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity, filter;
}

/* Popovers / dropdowns / menus — enter with ease-out-strong, origin-aware
   fall back to trigger-anchor when --transform-origin is set by JS */
html body .popover,
html body .dropdown-menu,
html body [role="menu"],
html body [data-radix-popper-content-wrapper],
html body .tooltip {
  transform-origin: var(--transform-origin, center);
  transition: transform var(--dur-menu) var(--ease-out-strong),
              opacity var(--dur-menu) var(--ease-out-strong),
              filter var(--dur-menu) var(--ease-out-strong);
}

/* Never scale in from 0 — start from scale(0.97) + opacity */
html body .popover[data-state="closed"],
html body .dropdown-menu[data-state="closed"],
html body [role="menu"][data-state="closed"],
html body [data-radix-popper-content-wrapper][data-state="closed"] {
  transform: scale(0.97);
  opacity: 0;
}

/* Tooltips: quicker, tighter */
html body .tooltip,
html body [role="tooltip"] {
  transition-duration: var(--dur-tooltip);
}

/* Modal / sheet / drawer — a hair longer, ease-out on enter */
html body .modal,
html body .sheet,
html body .drawer,
html body dialog {
  transition: transform var(--dur-sheet) var(--ease-drawer),
              opacity var(--dur-sheet) var(--ease-drawer);
}

/* Translucent chrome — top nav, sidebar rail, floating toolbars.
   Materialize (blur + saturate) so chrome reads as glass, not paint. */
html body .top-nav,
html body .topnav,
html body nav.mobile-topnav,
html body .composer-toolbar,
html body .floating-toolbar {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Typography: size-specific tracking. Tighten large display type,
   leave body copy alone. Emil / Apple: fixed letter-spacing is wrong
   somewhere. */
html body h1,
html body .display,
html body .hero-title,
html body .home-hero-title {
  letter-spacing: -0.022em;
  font-optical-sizing: auto;
}
html body h2,
html body .section-title,
html body .kpi-value {
  letter-spacing: -0.014em;
  font-optical-sizing: auto;
}
html body h3,
html body h4 {
  letter-spacing: -0.008em;
  font-optical-sizing: auto;
}

/* KPI numerics: tabular + lining figures for stable columns */
html body .kpi-value,
html body .kpi-delta,
html body .num,
html body .stat-value {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Hover states only on real hover devices — touch fires false hover on tap */
@media (hover: hover) and (pointer: fine) {
  html body button:not(:disabled):hover,
  html body .btn:not(:disabled):hover,
  html body [role="button"]:not([aria-disabled="true"]):hover {
    transition-duration: 120ms;
  }
}

/* Reduced motion — gentler, not zero. Cross-fade instead of slide/spring. */
@media (prefers-reduced-motion: reduce) {
  html body button:not(:disabled):active,
  html body .btn:not(:disabled):active,
  html body [role="button"]:not([aria-disabled="true"]):active {
    transform: none;
  }
  html body .popover,
  html body .dropdown-menu,
  html body [role="menu"],
  html body .modal,
  html body .sheet,
  html body .drawer,
  html body dialog,
  html body [data-radix-popper-content-wrapper] {
    transition: opacity 180ms ease;
    transform: none;
  }
}

/* Reduced transparency — solid instead of frosted */
@media (prefers-reduced-transparency: reduce) {
  html body .top-nav,
  html body .topnav,
  html body nav.mobile-topnav,
  html body .composer-toolbar,
  html body .floating-toolbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Only animate compositor-friendly properties on interactive rows / cards.
   Prevents accidental layout thrashing from stray 'transition: all' rules. */
html body .home-dash-bucket-chip,
html body .kpi-card,
html body .card {
  will-change: auto;
}
html body .home-dash-bucket-chip:hover,
html body .kpi-card:hover,
html body .card:hover {
  will-change: transform, box-shadow;
}

/* ===========================================================================
   v40.98 chat-fade nuke — kill EVERY desktop fade/mask/glow that overlays
   the AI answer text. The prior v40.97 only killed .ai-messages mask; the
   real "mask" the user was seeing came from stacked pseudo-elements on
   .ai-view (top + bottom fade bands), the composer background gradient,
   and the composer::before glow. All neutralized here on desktop.
   =========================================================================== */
@media (min-width: 821px) {
  /* Remove mask-image on the messages scroller (v40.97) */
  html body .ai-view .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  html body .floating-chat.open .floating-chat-messages {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* Kill top + bottom fade bands over .ai-view (NEW in v40.98) */
  html body.route-ask .ai-view::before,
  html body.route-ask .ai-view::after,
  html body.route-ask.ai-has-messages .ai-view::before,
  html body.route-ask.ai-has-messages .ai-view::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    height: 0 !important;
  }

  /* Kill composer background gradient — was fading over last lines */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    background: var(--ntl-main, #191A1A) !important;
    background-image: none !important;
  }

  /* Kill composer glow / blur overlay */
  html body.route-ask .ai-composer-wrap::before,
  html body.route-ask.ai-has-messages .ai-composer-wrap::before,
  html body.route-ask .ai-composer-wrap::after,
  html body.route-ask.ai-has-messages .ai-composer-wrap::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    height: 0 !important;
  }

  /* v40.99: kill the body-level fade band that appears above the composer
  the moment a message is submitted (body.route-ask.ai-has-messages::after
  at style.css:28730 — fixed 80px gradient positioned via --composer-top-px).
  This is the fade the user was seeing right after entering a chat. */
  html body.route-ask.ai-has-messages::after,
  html body.route-ask.ai-has-messages::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    height: 0 !important;
    transform: none !important;
  }

  /* v41.00: collapse empty .ai-messages on the ask HOME state so it doesn't
  eat 1000+ pixels of vertical space between the hero and composer.
  The existing rule at :7073 uses .ai-view > .ai-messages but something
  is overriding it. Force zero-size with an id + class + attribute chain
  that only home (no messages yet) matches. */
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-messages,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-messages:empty,
  html body.route-ask:not(.ai-has-messages) .ai-view #ask-messages:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
  }
}

  /* v41.03: migrated 40 hack rules from @media(max-width:767px) into @layer overrides */
  /* v41.58h: component:mobile-topnav block L38688-L39196 moved to mobile-v2.css */

  /* v41.04: Phase 5c — migrated 46 solo hack-with-important rules into @layer overrides, stripped both :not(#__never__) hack AND !important */

  /* --- v41.04 top-level rules --- */

  /* ────────────────────
  v25 - KPI race grid: full dark mode + minimize button outside grid +
  fix bottom cut-off
  Issues:
  1) Right column (TOTAL OFFICE / TOTAL D2D / GRAND TOTAL) and bottom row
  (TOTAL PEST / WEEDS / TERMITE) chips were rgba(255,255,255,0.86) light
  on the dark dashboard, sticking out like sore thumbs vs the dark KPI
  tiles in the main 3x2 grid. Convert all bucket chips to dark theme.
  2) Minimize (−) button was absolutely positioned at top:4px / left:0
  INSIDE the home-launcher, which placed it overlapping the first KPI
  card (OFFICE SALES • PEST). Move it outside the grid by negative
  left offset so it sits in the gutter to the left of the grid.
  3) Bottom row + toolbar were getting cut off because #home-launcher had
  overflow: hidden with not enough height. Allow the launcher to grow
  and use proper vertical scroll instead of clipping content.
  ──────────────────── */

  /* 1) Bucket chips → dark theme (right column + bottom row) */
  html body .home-dash-grid .home-dash-bucket-chip,
  html body .home-dash-grid .home-dash-bucket-chip--right,
  html body .home-dash-grid .home-dash-bucket-chip.is-up,
  html body .home-dash-grid .home-dash-bucket-chip.is-down,
  html body .home-dash-grid .home-dash-bucket-chip.is-flat {
    background: var(--bg-card);
    background-color: var(--bg-card);
    background-image: none;
    border: 1px solid var(--overlay-w-07);
    color: var(--fg-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* v40 - ticker keeps green/red, but the BIG bucket value stays neutral.
  User feedback: "there's too much color with those big ones - the percentage
  and up down point green red is good but the large numbers should not be red
  green". Split the original selector so only .home-dash-bucket-ticker gets
  the directional tint; .home-dash-bucket-value falls back to the neutral
  #E3E1DD rule above (line 22470). */

  /* 2) Minimize button → outside the grid (gutter to the left), dark theme */
  html body .home-launcher .kpi-minimize {
    top: 0;
    left: -36px;
    width: 28px;
    height: 28px;
    background: var(--overlay-w-05);
    border: 1px solid var(--border-overlay-10);
    color: var(--fg-primary-alpha);
    border-radius: 8px;
    z-index: 6;
  }

  /* 3) Stop clipping the bottom of the KPI grid */
  html body .ai-view #home-launcher.home-launcher,
  html body .ai-view .home-launcher {
    overflow: visible;
    overflow-y: auto;
    padding-bottom: 16px;
  }

  /* Make sure the toggles row at the bottom isn't pinned to a position that
  gets clipped - give it natural bottom margin */
  html body .home-launcher .home-dash-toggles {
    margin-bottom: 12px;
  }

  /* ────────────────────
  v25a - KPI race grid follow-ups:
  (1) Main 3x2 KPI tiles still had dark text (numbers, eyebrows, units,
  titles) from the .ai-view .home-dash-grid block (lines ~7270-7330)
  that assumed a light background. Override every text color in the
  grid to the dark theme palette.
  (2) Card hover painted a thin white left border via
  inset 1px 0 0 rgba(255,255,255,0.95) and forced dark slate text on
  children. Strip the inset shadow and keep light text on hover.
  (3) Bottom toolbar (Showing / vs / avg / reload) was clipped at the
  very edge of the launcher. Restore breathing room without changing
  the launcher's outer height.
  (4) Lost minimize/expand button: v25 moved it to left:-36px which is
  outside the launcher AND outside its overflow:hidden parent, so it
  disappeared. Bring it back inside the launcher via a small top
  gutter so it never overlaps a card.
  ──────────────────── */

  /* (1) Dark KPI tile text - beat .ai-view .home-dash-grid color rules. */

  /* Up/down values inside main grid cards (delta row "CURRENT VS PREVIOUS") */
  /* Range / foot meta inside cards */
  /* (2) Card hover - strip white-inset left border, keep light text. */

  /* (3) Bottom toolbar - make sure it doesn't touch the launcher edge. */
  html body .ai-view #home-launcher.home-launcher,
  html body .ai-view .home-launcher {
    padding-bottom: 28px;
  }

  html body .home-launcher .home-dash-toggles {
    margin-bottom: 16px;
    padding-bottom: 4px;
  }

  /* (4) Minimize button - give it a 32px top gutter inside the launcher
  so it never overlaps a card. Pin to top-left of that gutter. */
  html body .ai-view #home-launcher.home-launcher,
  html body .ai-view .home-launcher {
    padding-top: 32px;
  }

  /* ────────────────────
  v25a-extra - hide greeting bleed-through behind the KPI launcher
  The "Good morning, Branson" #ai-greeting and its hero stage are a
  sibling of #home-launcher in .ai-view.ai-home, and with the launcher's
  new padding-top:32px the greeting peeks through. When the KPI grid is
  active, hide #ai-hero so it doesn't bleed under the launcher.
  ──────────────────── */

  /* ────────────────────
  v25c - "CURRENT VS PREVIOUS" eyebrow inside .home-dash-ytd-inline still
  inherited the dark light-mode color rgba(60,64,67,0.65) from the
  .home-dash-baseline-row1 rule. Override to light grey on dark.
  Also lift the is-flat baseline-row2 to a brighter neutral.
  ──────────────────── */

  /* Hover state should keep the eyebrow light, not revert to dark slate. */

  /* ────────────────────
  v26b - Divisions page parity with Dashboards hub.
  The Dashboards overview (.dr-overview-*) uses a clean centered grid
  with auto-fill 200px minmax cells, rounded 12px cards with centered
  content. The Divisions tab was inheriting a flex-row 280px fixed-width
  layout from an older v23-era rule and rendering left-aligned. Fix both
  by overriding the late-patched Divisions rules to match Dashboards
  spacing and by centering the card contents. Specificity intentionally
  matches the existing html body chain so
  we beat both v23 and v25 rules without raising !important counts.
  ──────────────────── */

  /* Outer wrapper: same width + padding as .dr-overview-page (960px). The
  Divisions index has only 5 cards so the narrower max-width keeps the
  grid from sprawling and matches the Dashboards hub visually. The same
  rule applies to /divisions/sales (Indoor + D2D) and /divisions/sales/d2d
  (live team cards). */
  html body .gl-divisions-view {
    padding: 2rem 2rem 3rem;
    max-width: 960px;
    margin: 0 auto;
  }

  /* Grid: switch from the flex/280px wrap to a clean CSS grid with the same
  auto-fill behaviour as .dr-overview-grid. Cards grow to fill the row,
  center their contents, never reach an awkward "two wide / one orphan"
  layout. */
  html body .gl-divisions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
  }

  /* ────────────────────
  v27 - Divisions dark + 5-in-one-row centered, Dashboards chip grid.
  The Divisions page must be dark (theme parity), fit all 5 chips in
  ONE row, and be centered vertically in the viewport. The Dashboards
  hub gets an additional chip grid below the 5 cards grouped by division.
  Per-division sub-pages show only that division's chips.
  No em dashes. Card bg rgba(255,255,255,0.92) light, #1F2121 dark, 12px radius.
  ──────────────────── */

  /* === DIVISIONS PAGE: header pinned top, row centered in remaining space  */
  html body .gl-divisions-view.gl-divisions-view--centered {
    min-height: calc(100vh - 64px);
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
    justify-items: stretch;
  }

  /* Header sits at the TOP of the page (not affecting row centering) */
  html body .gl-divisions-header--centered {
    text-align: center;
    margin: 0 0 1rem 0;
    align-self: start;
  }

  /* The chip row sits in the 1fr row and is centered vertically WITHIN it,
  so the title at top does not pull the chips upward. */
  html body .gl-divisions-view.gl-divisions-view--centered .gl-divisions-grid.gl-divisions-grid--row5 {
    align-self: center;
  }

  /* === DIVISIONS GRID: force 5 chips in ONE row ======================== */
  html body .gl-divisions-grid.gl-divisions-grid--row5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* ────────────────────
  v27c - Hard overrides: white divisions title, dark chips everywhere.
  The user is using dark mode only for now. Force chip surfaces to dark
  regardless of light/dark theme variables that may flip them later.
  These rules use a tripled :not() chain to beat every existing selector.
  ──────────────────── */

  /* Divisions title + sub: WHITE on dark, no transparency, no blue */

  /* DASHBOARDS HUB chip sections: force dark surface (was white) */

  /* ALL CHIPS (dashboards .dr-chip + divisions .gl-report-chip): dark */

  

  /* 4. Subtext: constrain width and center as a block so the paragraph
  itself sits centered under the title (long lines were full-width). */
  html body .gl-divisions-header--centered .gl-divisions-sub {
    max-width: 640px;
    margin: 0.4rem auto 0;
    text-align: center;
    line-height: 1.5;
    font-size: 0.88rem;
  }

  /* 5. Pull the 5-chip row UP. The grid was centering chips in the 1fr space
  which made them sit near the vertical middle of the viewport. Anchor
  them closer to the header with a max top offset so they sit just below
  the subtext, looking visually balanced. */
  html body .gl-divisions-view.gl-divisions-view--centered {
    min-height: auto;
    display: block;
    padding: 2.5rem 2rem 3rem;
  }

  html body .gl-divisions-view.gl-divisions-view--centered .gl-divisions-grid.gl-divisions-grid--row5 {
    align-self: auto;
    margin-top: 2rem;
  }

  /* 6. Header tightening so subtext sits closer to title. */

  /* ────────────────────
  v28 - Dashboards overview polish: kill ALL blue tints.
  Targets:
  1) .dr-chip-section-header was getting rgba(33,150,243,0.08) blue
  from the global [class*="chip"] rule via var(--chip-bg).
  2) .dr-chip-section-icon was rgba(91,169,242,0.14) blue.
  3) .dr-chip hover used blue tint.
  4) .gl-division-card .gdc-cta ("Open dashboard") was #1976D2 / #5BA9F2 blue.
  All replaced with neutral white-alpha surfaces. Headers + chip groups
  read as plain dark cards on the dark theme.
  ──────────────────── */

  /* 1) Section header strip: neutralize the [class*="chip"] blue wash */

  /* 2) Section icon badge: neutral white-alpha (was blue) */

  /* 3) Chip pills hover: neutral, not blue */

  /* 4) Division card "Open dashboard" CTA: neutral (was bright blue) */

  /* 5) The top division cards on /dashboards: kill any inner blue tint
  from the .gdc-icon (same fix we applied to /divisions chips) */
  html:not(#__nope__):not(#__x__) body[data-route="/dashboards"] .gl-division-card .gdc-icon,
  html:not(#__nope__):not(#__x__) body #main-content .gl-division-card .gdc-icon {
    background: var(--border-soft);
    background-color: var(--border-soft);
    color: rgba(255,255,255,0.82);
    border: 1px solid var(--border-soft);
  }

  /* 6) Section title prefix dot if any blue accent leaks */
  

  /* ────────────────────
  v28b - Kill remaining blues on Dashboards overview.
  - .dr-chip-row was matching [class*="chip"] global rule (var(--chip-bg))
  giving it a rgba(33,150,243,0.08) blue wash. Force transparent.
  - .dr-overview-card-cta ("Open dashboard") was rgb(100,181,246) blue.
  Neutralize to rgba(255,255,255,0.62) with hover brighten.
  ──────────────────── */

  /* Defensive: anything inside .dr-chip-sections or .dr-overview-grid that
  accidentally inherits var(--chip-bg) blue should be transparent. */

  /* ────────────────────
  v29 - Routing pages dark mode + centering + last blue tints.
  Targets:
  1) .dr-chip-sections (parent container) + .dr-chip-section-title + .dr-chip-empty
  all matching the [class*="chip"] global rule with rgba(33,150,243,0.08)
  blue. Force transparent / dark.
  2) All /divisions/sales, /divisions/sales/indoor, /divisions/sales/d2d
  cards (.gl-division-card .gdc-*) were rendering with the LIGHT theme
  rgba(255,255,255,0.92) bg + rgba(15,23,42,0.92) navy text. Force dark.
  This covers Speed-to-Lead, Inside Sales, Indoor, D2D and any future
  division child route using the .gl-division-card / .gdc-* markup.
  3) Sub-page wrappers (.gl-divisions-view, .gl-divisions-header) were
  rendering off-center because parent main is offset by the sidebar.
  Center inner content with max-width + margin auto.
  4) /reports/<slug> stub: dark themed centered card.
  ──────────────────── */

  /* 1) Kill remaining [class*="chip"] blue tints on Dashboards overview */

  

  /* Icon badge inside any division card → neutral, never blue */
  html[data-app-theme="dark"] body .gl-division-card .gdc-icon,
  html:not(#__nope__):not(#__x__) body #main-content .gl-division-card .gdc-icon {
    background: rgba(255,255,255,0.06);
    background-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.06);
  }

  /* 3) Center all division/routing sub-page content. The page wrapper sits
  inside #main-content which already starts after the sidebar, but the
  inner header + grid were left-aligned at viewport, making titles look
  pulled to the right of the page. Constrain + center the inner block. */
  html:not(#__nope__) body .gl-divisions-view {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
  }

  html:not(#__nope__) body .gl-divisions-view .gl-divisions-grid {
    justify-content: center;
    margin: 1.5rem auto 0;
    width: 100%;
  }

  /* ────────────────────
  v29b - Finishing touches:
  1) Breadcrumb <a> inside .gl-divisions-view is unclassed; global a tag
  gives rgb(100,181,246) blue. Force neutral.
  2) .gl-divisions-grid has fixed 4-column layout; with 2 cards they
  cluster left. Switch to auto-fit so any card count centers.
  3) .gdc-sub / .gdc-desc inside dark cards needs visible contrast.
  ──────────────────── */

  /* 1) Breadcrumb links (no class on <a>): target via wrapper */

  /* Breadcrumb separators ("/") and current text */

  /* 2) Grid → auto-fit so 2 cards center, 4 cards spread, 5 cards row-5 */
  html:not(#__nope__) body .gl-divisions-view .gl-divisions-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
    justify-content: center;
    width: auto;
    max-width: 1100px;
    margin: 1.5rem auto 0;
  }

  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip svg {
    color: var(--fg-inverse-strong);
    opacity: 1;
    filter: none;
  }

  /* --- v41.04 rules for @media (max-width: 767px) --- */
  /* v41.58h: component:mobile-topnav block L39580-L39861 moved to mobile-v2.css */

  /* --- v41.04 rules for @media (max-width: 768px) --- */
  /* [moved to mobile-v2.css v41.58l — was L36986-L37022 @media (max-width: 768px) inside @layer overrides] */

  /* v41.11: Glass bubbles for Text sent + Text received in Route CRM notes.
     Layout untouched (still uses .rt-crm-sms-row flex-column, .rt-crm-sms-bubble
     max-width:78%, existing padding + font-size). Only adds backdrop-filter
     blur, translucent tint, subtle border, and a soft shadow so the bubbles
     read as glass over the dark drawer. Outbound uses a faint Totaly-blue
     tint on the right; inbound uses a neutral white tint on the left. */
  .rt-crm-sms-row.rt-crm-sms-row--in { align-items: flex-start; }
  .rt-crm-sms-row.rt-crm-sms-row--out { align-items: flex-end; }

  .rt-crm-sms-bubble.rt-crm-sms-bubble--in,
  .rt-crm-sms-bubble.rt-crm-sms-bubble--out {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 4px 14px rgba(0, 0, 0, 0.25);
    color: rgba(226, 232, 240, 0.96);
  }

  .rt-crm-sms-bubble.rt-crm-sms-bubble--in {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.055) 100%);
    border-top-left-radius: 6px;
  }

  .rt-crm-sms-bubble.rt-crm-sms-bubble--out {
    background: linear-gradient(180deg,
      rgba(33, 150, 243, 0.18) 0%,
      rgba(33, 150, 243, 0.10) 100%);
    border: 1px solid rgba(33, 150, 243, 0.28);
    border-top-right-radius: 6px;
  }

  .rt-crm-sms-meta.rt-crm-sms-meta--in { text-align: left; }
  .rt-crm-sms-meta.rt-crm-sms-meta--out { text-align: right; }

  /* v41.13: Route header collapse toggle. Small chevron pill anchored to
     the top-right of the route header. Tapping it hides the tool rows and
     stats so the call list gets more vertical room. The view switcher
     (Call / Timeline / Compact / Map / AI Optimize) stays visible in both
     states so the rep can still change views. */
  .route-hdr { position: relative; }

  .route-hdr-collapse-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: rgba(226, 232, 240, 0.85);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  }
  .route-hdr-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
  }
  .route-hdr-collapse-btn:active { transform: scale(0.94); }
  .route-hdr-collapse-btn svg { display: block; }

  /* Reserve right-side space in Row 1 so the collapse button doesn't overlap
     the "All reps" chip. Only affects Row 1; other rows keep full width. */
  .route-hdr .route-hdr-row1 {
    padding-right: 38px;
  }

  /* v41.15: Header must fully block content behind it. Base rule was
     translucent + blurred, letting content bleed through above the view
     switcher when the header was collapsed. Force solid opaque background,
     stretch to viewport edges, raise z-index, and extend UP past the
     .route-view top padding so nothing shows above the switcher. */
  .route-hdr {
    background: #191a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 20 !important;
    /* Pull the sticky header out to the edges of the viewport and up over
       the parent's top padding so no strip of content shows above it. */
    margin-left: -14px;
    margin-right: -14px;
    margin-top: -8px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 12px;
  }
  /* Also stretch on the narrower page padding used at <=600px viewports. */
  /* v41.58h: misc block L37503-L37512 moved to mobile-v2.css */
  .route-hdr.route-hdr--collapsed {
    padding-top: 12px;
    padding-bottom: 8px;
  }

  /* v41.15: Fit the 5-button view switcher without clipping "AI Optimize".
     Reset the outer .route-viewbar spacing (base rule had margin-top: 28px
     from when the KPI stats sat above it) and reserve right-side room for
     the collapse chevron. Reduce inner padding + font so all 5 chips fit. */
  .route-hdr .route-viewbar {
    margin-top: 8px !important;
    padding-right: 38px;
  }
  .route-hdr.route-hdr--collapsed .route-viewbar {
    margin-top: 0 !important;
  }
  html body .route-hdr .route-viewbtn {
    padding: 7px 2px !important;
    font-size: 11px !important;
    gap: 3px !important;
    letter-spacing: 0 !important;
  }
  html body .route-hdr .route-viewbtn svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* Collapsed state: hide the three tool rows + stats, keep the view switcher. */
  .route-hdr.route-hdr--collapsed .route-hdr-row,
  .route-hdr.route-hdr--collapsed .rt-lead-typebar,
  .route-hdr.route-hdr--collapsed .route-hdr-stats {
    display: none !important;
  }
  /* Tighten the header padding when collapsed so only the view switcher shows. */
  .route-hdr.route-hdr--collapsed {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* Nudge the collapse button up when collapsed so it aligns with the
     single remaining row. */
  .route-hdr.route-hdr--collapsed .route-hdr-collapse-btn {
    top: 4px;
  }

}

/* ============================================================
   v41.20 — Desktop Ask view fixes (three defects)
   1) Composer stuck at top → center it vertically in the empty
      ask view (idle, no messages, no kpi-active).
   2) Chat history quick-nav item stuck showing a white 6% overlay
      because .is-open flips a persistent hover-like background —
      remove that background when not on /chats.
   3) Footer org text squished to ~49px showing "Branso... ENTERP..."
      — force enough width, keep one-line name, dim the tier pill.
   ============================================================ */

/* ── (1) Composer centering on desktop idle Ask view ──────────
   The declared design is: hero (absolute), then composer +
   pills group centered in the vertical middle. Screenshot
   showed composer pinned near the top because the flex column
   was starting from the top-padding baseline. Force the
   composer + pills to sit centered with a proper flex block. */
/* ── (2) Chat history button: transparent when not active route ─
   Rule at line 17354 sets .sidebar-quick-item.is-open to
   rgba(25,118,210,0.14) — but at some point a hover rule
   at line 17351 (white 6%) sticks after keyboard/nav focus,
   because :hover leaves the button styled when the pointer
   passes through the popup. Force transparent unless on
   /chats route. Also normalize the .active state. */



/* ── (3) Footer org text: give it width, nowrap, calm tier pill ─
   Container was collapsing to ~49px because the flex chain
   above it was overflowing. Force it wide enough to show the
   name + tier row without truncating "Branson W..." or the
   "ENTERPRISE" badge. */
html body aside.sidebar#sidebar .sidebar-footer--v1940 {
  padding: 12px 12px 14px !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-avatar {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  overflow: hidden !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-name {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--fg-primary, #E3E1DD) !important;
  background: transparent !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-tier-row {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-tier-badge {
  display: inline-block !important;
  padding: 2px 8px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  max-width: none !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-caret {
  flex: 0 0 10px !important;
  color: var(--fg-muted, #8A8F9C) !important;
  opacity: 0.7 !important;
}
html body aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-pill:hover {
  background: rgba(33, 150, 243, 0.06) !important;
  border-color: rgba(33, 150, 243, 0.18) !important;
}

/* ============================================================
   v41.21 — Final overrides for stuck chat-history highlight
   and squished/unreadable footer org pill.
   Beats the ID-selectored !important rule at line 19157 and
   the universal `.sidebar *` color rule at line 781.
   ============================================================ */

/* (A) Chat history quick-nav item: force transparent when not on /chats.
   Include #sqi-history + #sidebar so specificity beats the offending
   dark-theme rule at line 19157 (which uses both). */



/* (B) Footer org pill: give it room. Parent uses justify-content:center
   which forces the pill to shrink to content width (121px) while gear
   + bell hug the sides. Change parent to space-between with pill
   taking flex:1 so the name "Branson Workman" fits + Enterprise
   badge has breathing room. */
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 10px 14px !important;
}
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-pill {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-settings-btn,
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-notif-btn {
  flex: 0 0 28px !important;
}

/* (C) Enterprise tier badge: switch from bright white to a subtle
   dark chip so the white sidebar text is readable. This is a
   simple dark-theme chip: dark surface + light text + subtle border. */
html body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"],
html body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge[data-tier="enterprise"],
html[data-app-theme="dark"] body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"],
html[data-app-theme="dark"] body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge[data-tier="enterprise"] {
  background: rgba(33, 150, 243, 0.16) !important;
  background-color: rgba(33, 150, 243, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(33, 150, 243, 0.32) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: auto !important;
  max-width: none !important;
}
/* Text color needs to beat `.sidebar *` (line 781) — use same
   universal-descendant weight targeting the badge itself. */
html body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge[data-tier="enterprise"],
html body aside.sidebar#sidebar .footer-org-tier-badge[data-tier="enterprise"] {
  color: #64B5F6 !important;
}

/* ============================================================
   v41.22 — Sidebar footer pill: fit name + Enterprise badge
   ============================================================ */

/* Let the tier badge escape the text column's overflow */
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-text {
  overflow: visible !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-name {
  font-size: 0.8rem !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-tier-row {
  overflow: visible !important;
  margin-top: 2px !important;
}
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-tier-badge,
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-tier-badge[data-tier="enterprise"] {
  font-size: 0.55rem !important;
  padding: 1px 6px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
}
/* Tighten the caret so the text column has more room */
html body aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 .footer-org-caret {
  flex: 0 0 8px !important;
  margin-left: 0 !important;
}

/* Shrink the account-menu tier badge overlay so "ENTER..." isn't
   awkwardly clipped on the avatar. Move it below the avatar and
   let it be wider so "ENTERPRISE" fits. */
html body .account-menu .account-menu-tier-badge,
html body .account-menu .account-menu-tier-badge[data-tier="enterprise"] {
  max-width: 72px !important;
  font-size: 7px !important;
  padding: 2px 5px !important;
  bottom: -6px !important;
  background: rgba(33,150,243,0.9) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   v41.23 — Desktop chat: pin composer to viewport bottom
   when messages exist. Previous sticky positioning was floating
   the composer mid-screen and covering the assistant answer.
   ============================================================ */
/* v41.23 — hide redundant "ENTERPRISE" tag on the account menu avatar
   (the popover already shows Enterprise elsewhere / it's ugly here) */
html body .account-menu .account-menu-tier-badge,
html body aside.sidebar .account-menu .account-menu-tier-badge {
  display: none !important;
}

/* ============================================================
   v41.24 — Desktop chat composer: use position:fixed to guarantee
   viewport-bottom pinning. Sticky was failing because parent flex
   flow wasn't sizing messages to full remaining height.
   ============================================================ */
/* v41.42 — Composer recentering. Instead of offsetting the composer band by
   the sidebar width (which caused visual drift left of the chat column), the
   band spans the full viewport and the inner composer is centered against the
   same 780px reading column as .ai-view using --sidebar-w padding. */

body.sidebar-collapsed { --sidebar-w: 62px; }
body.cockpit-revealed,
body:not(.sidebar-collapsed).route-ask.cockpit-hidden,
body.sidebar-collapsed.cockpit-revealed { --sidebar-w: 260px; }

/* ============================================================
   v41.25 — Remove the box/strip that appeared around composer.
   Composer wrap should be an invisible positioning container;
   the inner .rich-composer keeps the visible rounded card.
   Thinking bubble: remove the boxy border/background - use plain text style.
   ============================================================ */
/* Thinking bubble: strip the boxy border. Keep it as inline text with
   just a small left icon area. Applies everywhere. */
html body .ai-thinking,
html body .nx-thinking,
html body .cl-block.cl-thinking {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 8px !important;
  margin: 8px 0 12px 0 !important;
  color: rgba(232,233,235,0.7) !important;
}

/* ============================================================
   v41.26 — Clean thinking steps: no boxes, no rails, sequential
   fade-in stagger so steps arrive one-by-one instead of together.
   ============================================================ */

/* Strip container padding/rail on the stream */
html body .ai-thinking .thinking-stream,
html body .thinking-stream {
  padding-left: 0 !important;
  border-left: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 4px !important;
  margin-top: 6px !important;
  margin-left: 4px !important;
}

/* Each step: plain row, no card, no border, no background */
html body .ai-thinking .thinking-step,
html body .thinking-step {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 3px 0 !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  color: rgba(232,233,235,0.62) !important;
  opacity: 0;
  transform: translateY(3px);
  animation: gl-step-seq 220ms ease-out forwards !important;
}

/* Kill trailing chevron on each step */
html body .ai-thinking .thinking-step::after,
html body .thinking-step::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}

/* Simple bullet dot before each step */
html body .ai-thinking .thinking-step::before,
html body .thinking-step::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 5px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(232,233,235,0.35) !important;
  margin-right: 4px !important;
  border: 0 !important;
}

html body .ai-thinking .thinking-step.is-active,
html body .thinking-step.is-active {
  color: rgba(232,233,235,0.92) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
html body .ai-thinking .thinking-step.is-active::before,
html body .thinking-step.is-active::before {
  background: #64B5F6 !important;
  box-shadow: 0 0 8px rgba(100,181,246,0.5) !important;
}
html body .ai-thinking .thinking-step.is-done,
html body .thinking-step.is-done {
  color: rgba(232,233,235,0.48) !important;
}
html body .ai-thinking .thinking-step.is-done::before,
html body .thinking-step.is-done::before {
  background: rgba(100,181,246,0.6) !important;
  box-shadow: none !important;
}

@keyframes gl-step-seq {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sequential stagger — each nth step delays 50ms more.
   Steps that appear later in a batch still land one-by-one. */
html body .thinking-step:nth-child(1) { animation-delay: 0ms !important; }
html body .thinking-step:nth-child(2) { animation-delay: 60ms !important; }
html body .thinking-step:nth-child(3) { animation-delay: 120ms !important; }
html body .thinking-step:nth-child(4) { animation-delay: 180ms !important; }
html body .thinking-step:nth-child(5) { animation-delay: 240ms !important; }
html body .thinking-step:nth-child(6) { animation-delay: 300ms !important; }
html body .thinking-step:nth-child(7) { animation-delay: 360ms !important; }
html body .thinking-step:nth-child(8) { animation-delay: 420ms !important; }
html body .thinking-step:nth-child(9) { animation-delay: 480ms !important; }
html body .thinking-step:nth-child(10) { animation-delay: 540ms !important; }
html body .thinking-step:nth-child(n+11) { animation-delay: 600ms !important; }

/* ============================================================
   v41.27 — Kill the answer mask + thinking outer box
   ============================================================ */

/* Remove the fade mask above composer that was clipping the answer text */
/* Kill outer thinking block boxes: border-bottom, border, background */
html body .ai-thinking,
html body .nx-thinking,
html body .cl-block.cl-thinking,
html body .claude-thinking,
html body .claude-thinking .cl-block.cl-thinking {
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* v41.28 — Remove the grey rectangle border around the thinking step list */
html body .ai-thinking .thinking-stream,
html body .thinking-stream,
html body .ai-thinking > .thinking-stream,
html body .claude-thinking .thinking-stream,
html body .cl-block.cl-thinking .thinking-stream {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   v41.29 — iMessage-style bottom-hugging chat + hide empty
   "Thought" placeholder pills that never got a label.
   ============================================================ */

/* Chat pane: iMessage-style bottom-hug using a flex spacer instead of
   justify-content: flex-end (which breaks upward scroll in Safari when
   content overflows). The ::before spacer takes all extra space, so
   children stack from the bottom. When content grows past viewport,
   the spacer collapses to 0 and normal top-to-bottom scroll works. */
/* Hide any orphan "Thought" pill that has no time and no reasoning
   text in it. These are the stale placeholder chips that flash in
   the top-left corner before the real thinking row is ready. */

/* ============================================================
   v41.31 — Fix the dead-gap between the thinking bubble and
   the fixed composer. The chat pane was letting .ai-messages
   scroll internally at max-height:calc(100vh-160px) while
   .ai-view forced min-height:100vh-64px, leaving ~96px of
   empty space below the scroll container and above the fixed
   composer. Switch to body-scroll: content stacks naturally,
   is padded past the composer, and the .ai-view flex spacer
   pushes short answers to hug the composer.
   Also nuke the gl-skill-chip-row entirely (sales-metrics etc).
   ============================================================ */

/* Skill chip row: gone. Skills now render as steps inside the
   Thinking dropdown instead of as pills below the answer. */
html body .gl-skill-chip-row,
html body .gl-skill-chip {
  display: none !important;
}

/* ============================================================
   v41.32 — Kill the giant 489px padding on section#main that
   was pushing content up and away from the fixed composer.
   Kill the fade mask veil above the composer that clips
   answers mid-word. Kill the grey box around the thinking
   step list.
   ============================================================ */

/* Nx thinking steps: kill the grey box + border-left rail. */
html body .nx-thinking-steps,
html body .ai-thinking .nx-thinking-steps,
html body .cl-block.cl-thinking .nx-thinking-steps {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 2px 4px !important;
  margin-top: 6px !important;
}

/* Desktop: kill the fade veils above the composer that were
   eating content mid-word. The composer is opaque #191A1A so
   content passing behind it is invisible anyway - no veil needed. */
/* ============================================================
   v41.33 — One scroller (section#main), no inner scrollbar,
   kill stacked bottom paddings, tighten composer, Totaly blue
   step dots.
   ============================================================ */

/* Totaly blue step dots (was teal). Applies at all breakpoints. */
html body .nx-thinking-steps .nx-step .nx-dot,
html body .nx-thinking-steps .nx-dot {
  background: #2196F3 !important;
}
html body .nx-thinking-steps .nx-step[data-status="done"] .nx-dot {
  background: rgba(33, 150, 243, 0.35) !important;
}
html body .nx-thinking-steps .nx-step[data-status="active"] .nx-dot {
  background: #2196F3 !important;
}

/* ============================================================
   v41.34 — Freeze send button visual (no change on focus/typing),
   composer & floating-chat-toggle get the Apple-style rounded
   blue-tinted border like the sidebar footer.
   ============================================================ */

/* Send button: Totaly blue (#2196F3) circle in every state so clicking
   into the composer no longer flips its appearance. Full round,
   consistent size, no focus/hover morph. */
html body .rich-composer .rc-send,
html body button.rc-send,
html body .ai-view .rich-composer .rc-send,
html body .rich-composer:focus-within .rc-send,
html body .rich-composer .rc-send:hover,
html body .rich-composer .rc-send:active,
html body .rich-composer.rc-has-input .rc-send,
html body .rich-composer:not(.rc-has-input) .rc-send {
  background: #2196F3 !important;
  background-image: none !important;
  background-color: #2196F3 !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35) !important;
  padding: 0 !important;
  transition: none !important;
}
html body .rich-composer .rc-send svg,
html body .rich-composer .rc-send svg *,
html body .rich-composer:focus-within .rc-send svg,
html body .rich-composer:focus-within .rc-send svg * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}
html body .rich-composer .rc-send:disabled {
  opacity: 0.55 !important;
  filter: none !important;
}

/* v41.39: the WRAP is now just a positioning container (transparent).
   The rounded pill visual lives on the inner .rich-composer. This
   avoids any older rule that zeroes the wrap border/bg from breaking
   the look. */
html body section#main .ai-view .ai-composer-wrap,
html body .ai-view .ai-composer-wrap,
html body .ai-composer-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Active-conversation state: on MOBILE ONLY, fixed at the bottom as a
   floating pill centered under the main column. On desktop, composer sits
   inline (sticky) under the messages column - see rule at end of file. */
@media (max-width: 820px) {
  body.ai-has-messages .ai-composer-wrap,
  body.route-ask.ai-has-messages .ai-composer-wrap,
  body.ai-has-messages section#main .ai-view .ai-composer-wrap,
  body.ai-has-messages .ai-view .ai-composer-wrap {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    margin: 0 !important;
    width: calc(100vw - 32px) !important;
    max-width: 900px !important;
    z-index: 6 !important;
  }
}

/* Idle / Ask home state: composer sits inline in flow, wide (not tiny),
   centered under the hero content. */
body:not(.ai-has-messages) .ai-composer-wrap,
body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
body:not(.ai-has-messages) section#main .ai-view .ai-composer-wrap,
body:not(.ai-has-messages) .ai-view .ai-composer-wrap {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: min(720px, calc(100% - 32px)) !important;
  max-width: 720px !important;
}

/* Section#main padding-bottom only when the pill is floating. */
body.ai-has-messages section#main.main,
body.ai-has-messages section#main {
  padding-bottom: 96px !important;
  scroll-behavior: auto !important;
}
body:not(.ai-has-messages) section#main.main,
body:not(.ai-has-messages) section#main {
  padding-bottom: 0 !important;
}

/* v41.39: apply the rounded pill visual to BOTH the wrap AND the
   inner rich-composer, so whichever the layout renders, the user
   sees a rounded blue-bordered pill. Wrap and inner match so there
   is no double-box effect. */
html body .ai-composer-wrap .rich-composer,
html body .ai-view .rich-composer,
html body .rich-composer {
  border: 1px solid rgba(33, 150, 243, 0.22) !important;
  border-radius: 20px !important;
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 24px -8px rgba(33, 150, 243, 0.18) !important;
  transition: none !important;
  padding: 10px 14px !important;
}
/* No focus color flip. */
html body .rich-composer:focus-within,
html body .ai-view .rich-composer:focus-within,
html body .ai-composer-wrap .rich-composer:focus-within {
  border-color: rgba(33, 150, 243, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 24px -8px rgba(33, 150, 243, 0.18) !important;
  background: var(--composer-bg, var(--bg-card, #1F2121)) !important;
}
html body .ai-composer-wrap:focus-within {
  border-color: rgba(33, 150, 243, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 24px -8px rgba(33, 150, 243, 0.18) !important;
}

/* Floating chat toggle: same Apple-style pill, rounded, blue-tinted
   border, matches the sidebar footer treatment. */
html body .floating-chat-toggle,
html body button.floating-chat-toggle {
  border: 1px solid rgba(25, 118, 210, 0.28) !important;
  border-radius: 999px !important;
  background: #1F2121 !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html body .floating-chat-toggle:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  background: #1F2121 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* v41.43 — Chat history dedupe badge. Collapsed duplicates show ×N */
.history-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.history-title-row .history-title { flex: 1 1 auto; min-width: 0; }
.history-dup-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(33, 150, 243, 0.14);
  color: #7fb8f2;
  border: 1px solid rgba(33, 150, 243, 0.28);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* v41.43 — Brain status detail panel (click Brain pill to open) */
#brain-status-panel { position: fixed; inset: 0; z-index: 120; display: none; }
#brain-status-panel.is-open { display: block; }
#brain-status-panel .bsp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
#brain-status-panel .bsp-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, 92vw); background: #1C1B19; border: 1px solid #393836;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); color: #CDCCCA;
  overflow: hidden;
}
#brain-status-panel .bsp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #2A2927; }
#brain-status-panel .bsp-title { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
#brain-status-panel .bsp-close { all: unset; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 6px; color: #797876; }
#brain-status-panel .bsp-close:hover { background: rgba(255,255,255,0.05); color: #CDCCCA; }
#brain-status-panel .bsp-body { padding: 14px 18px; font-size: 13px; }
#brain-status-panel .bsp-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
#brain-status-panel .bsp-row:last-child { border-bottom: 0; }
#brain-status-panel .bsp-k { color: #797876; font-size: 12px; }
#brain-status-panel .bsp-v { color: #CDCCCA; font-variant-numeric: tabular-nums; word-break: break-word; }
#brain-status-panel .bsp-footer { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
#brain-status-panel .bsp-retry {
  all: unset; cursor: pointer; padding: 8px 14px; border-radius: 8px;
  background: #2196F3; color: #fff; font-size: 12px; font-weight: 600;
  transition: filter 120ms ease;
}
#brain-status-panel .bsp-retry:hover { filter: brightness(1.1); }

/* v41.44 — Mobile composer centering fix.
   Prior mobile rules left the wrap fixed left:8/right:8 but did NOT ensure
   the .rich-composer inside actually filled the wrap and centered its
   contents. On tall/narrow viewports with an active thinking stream this
   showed as a right-drifted composer where only the send arrow was visible.
   Force .rich-composer to fill the wrap and center via margin auto so no
   matter what other legacy rules say about width, it lands centered. */
/* v41.58h: Ask block L42354-L42371 moved to mobile-v2.css Section 4b */

/* v41.44 — Persistent thinking indicator when reopening a pending chat.
   Shown when loadChatSession() finds a user message with no assistant
   reply yet. Polls /api/chat/{id} every 2s until an assistant message
   appears, then swaps itself for the real reply. */
.pending-thinking-indicator {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  color: #7a7974;
  font-size: 13px;
}
.pending-thinking-indicator .pti-title {
  color: #CDCCCA;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pending-thinking-indicator .pti-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2196F3;
  animation: pti-pulse 1.4s ease-in-out infinite;
}
@keyframes pti-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
.pending-thinking-indicator .pti-hint {
  color: #7a7974;
  font-size: 12px;
  padding-left: 14px;
}

/* v41.45 + v41.62: Live Brain activity chips.
   v41.62 layout: Perplexity-style vertical tool tree. Each tool step is a
   compact single-line row with a small icon on the left, tool label, and an
   optional metadata pill (duration) on the right. Rows stack vertically
   instead of the old horizontal wrapping pill grid. */
.pti-pills {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 22px;
  padding: 0;
  margin: 0;
}
.pti-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  padding: 3px 0 3px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(205, 204, 202, 0.62);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}
.pti-pill::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.25px solid rgba(205, 204, 202, 0.32);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.pti-pill.is-running {
  color: #CDCCCA;
}
.pti-pill.is-running::before {
  border-color: #2196F3;
  animation: pti-tool-pulse 1.35s ease-in-out infinite;
}
.pti-pill.is-done {
  color: rgba(205, 204, 202, 0.72);
}
.pti-pill.is-done::before {
  border-color: rgba(33, 150, 243, 0.55);
  background: rgba(33, 150, 243, 0.55);
}
.pti-pill.is-failed {
  color: rgba(227, 161, 161, 0.88);
}
.pti-pill.is-failed::before {
  border-color: rgba(215, 86, 86, 0.82);
  background: rgba(215, 86, 86, 0.32);
}
.pti-pill-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pti-pill-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(205, 204, 202, 0.48);
  font-size: 11px;
}
.pti-pill.is-done .pti-pill-state {
  /* Duration-only on the right (checkmark hidden via JS in v41.62 because
     the filled left dot already carries the completion signal). */
  color: rgba(205, 204, 202, 0.48);
}
.pti-pill-duration {
  color: rgba(205, 204, 202, 0.44);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
@keyframes pti-tool-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
  50% { box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.18); }
}
.pti-thinking-runner {
  margin-top: 2px;
  color: rgba(205, 204, 202, 0.58);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}
/* v41.63: Perplexity/Claude-style "Finished N steps" summary row. Rendered
   above the pill list once streaming completes. Clicking toggles the tree. */
.pti-finished {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 2px;
  margin: 0 0 2px 0;
  border: 0;
  background: transparent;
  color: rgba(205, 204, 202, 0.72);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.pti-finished:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #CDCCCA;
}
.pti-finished-caret {
  display: inline-block;
  color: rgba(205, 204, 202, 0.55);
  transition: transform 160ms ease;
  font-size: 14px;
  line-height: 1;
}
.pti-pills.is-collapsed {
  display: none;
}

/* ==========================================================================
 * v42.3.12 — single-slot tool stream.
 * One line is visible while the Brain works; each step replaces the last.
 * The chevron opens the full trace, and every row in the trace has its own
 * chevron holding exactly what that tool was asked for and what came back.
 * ========================================================================== */
.pti-stream {
  display: block;
  margin: 0;
}
.pti-stream-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 8px 3px 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(205, 204, 202, 0.82);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pti-stream-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #CDCCCA;
}
.pti-stream-toggle:focus-visible {
  outline: 2px solid rgba(33, 150, 243, 0.55);
  outline-offset: 1px;
}
.pti-stream-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.25px solid #2196F3;
  background: transparent;
  animation: pti-tool-pulse 1.35s ease-in-out infinite;
}
.pti-stream[data-state="done"] .pti-stream-dot,
.pti-stream[data-state="finished"] .pti-stream-dot {
  border-color: rgba(33, 150, 243, 0.55);
  background: rgba(33, 150, 243, 0.55);
  animation: none;
}
.pti-stream[data-state="failed"] .pti-stream-dot {
  border-color: rgba(215, 86, 86, 0.82);
  background: rgba(215, 86, 86, 0.32);
  animation: none;
}
.pti-stream-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pti-stream-count {
  flex: 0 0 auto;
  color: rgba(205, 204, 202, 0.44);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pti-stream-count:empty {
  display: none;
}
.pti-stream-caret {
  flex: 0 0 auto;
  color: rgba(205, 204, 202, 0.55);
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease;
}
/* The reasoning runner is part of the trace, never a line above the answer. */
.pti-pills.is-collapsed ~ .pti-thinking-runner {
  display: none;
}
.pti-pill.has-detail {
  cursor: pointer;
  border-radius: 6px;
  padding-right: 6px;
}
.pti-pill.has-detail:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #CDCCCA;
}
.pti-pill.has-detail:focus-visible {
  outline: 2px solid rgba(33, 150, 243, 0.55);
  outline-offset: 1px;
}
.pti-pill-caret {
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(205, 204, 202, 0.5);
  font-size: 13px;
  line-height: 1;
  transition: transform 160ms ease;
}
/* Chat disclosures use one right-pointing glyph, rotated down only when open.
   Scope and reset the icon box so legacy thinking/button styles cannot flip
   it up or rotate asymmetric padding around the glyph. */
html body .pti-finished > .pti-finished-caret,
html body .pti-stream-toggle > .pti-stream-caret,
html body .pti-pill.has-detail > .pti-pill-caret {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  padding: 0 !important;
  font-style: normal !important;
  line-height: 1;
  transform-origin: center;
  transform: rotate(0deg) !important;
}
html body .pti-finished[aria-expanded="true"] > .pti-finished-caret,
html body .pti-stream-toggle[aria-expanded="true"] > .pti-stream-caret,
html body .pti-pill.has-detail[aria-expanded="true"] > .pti-pill-caret {
  transform: rotate(90deg) !important;
}
html body .pti-pill:not(.has-detail) > .pti-pill-caret {
  display: none !important;
}
.pti-pill-detail {
  margin: 2px 0 8px 22px;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  border-left: 2px solid rgba(33, 150, 243, 0.35);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(205, 204, 202, 0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.pti-pill-detail[hidden] {
  display: none;
}
@media (max-width: 820px) {
  .pti-pill-detail {
    margin-left: 14px;
    max-height: 240px;
    font-size: 11px;
  }
}
.ai-thinking > .pti-pills,
.ai-thinking > .pti-thinking-runner {
  margin-top: 8px;
}
.pending-thinking-indicator .pti-pills {
  padding-left: 14px;
}

.working-memory-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 7px;
}
.working-memory-chips[hidden] {
  display: none !important;
}
.working-memory-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 5px 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(205, 204, 202, 0.76);
  font-size: 12px;
  line-height: 1;
}
.working-memory-chip-label {
  color: rgba(205, 204, 202, 0.72);
}
.working-memory-chip-value {
  color: #2196F3;
  font-weight: 600;
}
.working-memory-chip-clear {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(205, 204, 202, 0.62);
  font-size: 16px;
  line-height: 1;
}
.working-memory-chip-clear:hover,
.working-memory-chip-clear:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #CDCCCA;
}
@media (prefers-reduced-motion: reduce) {
  .pti-pill.is-running { animation: none; }
  .pti-stream-dot { animation: none; }
}

/* v41.45 — division BI endpoint sections */
.div-bi-view { display: flex; flex-direction: column; gap: 16px; }
.div-bi-period-label { font-size: .75rem; color: var(--fg-muted, #797876); font-weight: 600; }
.div-bi-period { min-height: 32px; border: 1px solid rgba(33,150,243,.28); border-radius: 8px; background: var(--bg-card, #1F2121); color: var(--fg-primary, #e5e3df); padding: 0 9px; font: inherit; font-size: .78rem; }
.div-bi-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.div-bi-alerts { display: grid; gap: 8px; }
.div-bi-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid rgba(33,150,243,.32); border-radius: 10px; background: rgba(33,150,243,.09); color: var(--fg-primary, #e5e3df); font-size: .82rem; }
.div-bi-alert--critical { border-color: rgba(211,47,47,.46); background: rgba(211,47,47,.10); }
.div-bi-alert-dismiss { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700; text-decoration: underline; }
.div-bi-kpi-grid { min-height: 114px; }
.div-bi-kpi-card--unavailable .div-kpi-num { font-size: .95rem; font-weight: 600; color: var(--fg-muted, #797876); }
.div-bi-kpi-alert { align-self: flex-end; color: #c62828; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.div-bi-hero-grid { min-height: 250px; }
.div-bi-chart-card { min-height: 250px; }
.div-bi-chart-canvas { position: relative; flex: 1; min-height: 200px; }
.div-bi-chart-fallback { display: grid; gap: 9px; padding: 8px 0; color: var(--fg-muted, #797876); font-size: .78rem; }
.div-bi-chart-fallback ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.div-bi-chart-fallback li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(127,127,127,.12); padding-top: 5px; }
.div-bi-section { min-height: 74px; }
.div-bi-card, .div-bi-extra-card, .div-bi-report-card { border: 1px solid var(--accent-hover-soft-28, rgba(33,150,243,.2)); border-radius: 12px; background: var(--bg-card, #1F2121); padding: 14px; color: var(--fg-primary, #e5e3df); }
.div-bi-card .div-chart-title, .div-bi-extra-card h3 { margin: 0 0 12px; }
.div-bi-empty { display: grid; place-items: center; min-height: 70px; padding: 14px; border: 1px dashed rgba(33,150,243,.28); border-radius: 10px; color: var(--fg-muted, #797876); font-size: .82rem; text-align: center; }
.div-bi-skeleton { border-radius: 12px; background: linear-gradient(90deg, rgba(127,127,127,.08), rgba(33,150,243,.16), rgba(127,127,127,.08)); background-size: 200% 100%; animation: div-bi-shimmer 1.35s ease-in-out infinite; }
.div-bi-skeleton--alert { height: 38px; }
.div-bi-skeleton--chart { height: 250px; }
.div-bi-skeleton--block { height: 190px; }
.div-bi-skeleton--report, .div-bi-skeleton--extra { min-height: 112px; }
@keyframes div-bi-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.div-bi-heatmap { display: grid; grid-template-columns: 110px repeat(var(--div-bi-cols), minmax(54px, 1fr)); gap: 3px; overflow-x: auto; align-items: center; }
.div-bi-heatmap > strong { padding: 5px 4px; color: var(--fg-muted, #797876); font-size: .68rem; font-weight: 700; text-align: right; white-space: nowrap; }
.div-bi-heatmap > strong:not(:first-child) { text-align: center; }
.div-bi-heatmap-cell { min-height: 30px; display: grid; place-items: center; padding: 3px; border-radius: 5px; background: rgba(33,150,243, var(--div-bi-intensity)); color: var(--fg-primary, #e5e3df); font-size: .72rem; font-variant-numeric: tabular-nums; }
.div-bi-report-grid, .div-bi-extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.div-bi-report-card { padding: 0; overflow: hidden; }
.div-bi-report-card summary { cursor: pointer; padding: 13px 14px; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.div-bi-report-content { padding: 0 14px 14px; }
.div-bi-report-content table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.div-bi-report-content th, .div-bi-report-content td { padding: 7px 0; border-top: 1px solid rgba(127,127,127,.12); text-align: left; }
.div-bi-report-content td { text-align: right; font-variant-numeric: tabular-nums; }
.div-bi-funnel { display: grid; gap: 9px; }
.div-bi-funnel > div { display: grid; grid-template-columns: minmax(60px, 1fr) 76px 54px; gap: 8px; align-items: center; }
.div-bi-funnel > div > span { display: block; order: 2; height: 20px; min-width: 8px; border-radius: 4px; background: #2196F3; }
.div-bi-funnel b { order: 1; font-size: .74rem; color: var(--fg-muted, #797876); }
.div-bi-funnel em { order: 3; font-style: normal; font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.div-bi-waterfall, .div-bi-leaderboard { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.div-bi-waterfall > div, .div-bi-leaderboard li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(127,127,127,.12); padding-top: 7px; font-size: .82rem; }
.div-bi-waterfall > div:first-child, .div-bi-leaderboard li:first-child { border-top: 0; padding-top: 0; }
.div-bi-waterfall strong, .div-bi-leaderboard strong { font-variant-numeric: tabular-nums; }
.div-bi-placeholder { margin: 0; color: var(--fg-muted, #797876); font-size: .82rem; }
.div-bi-refreshed { margin: 0; color: var(--fg-muted, #797876); font-size: .7rem; text-align: right; }
@media (max-width: 640px) {
  .div-bi-period-label { margin-left: auto; }
  .div-bi-hero-grid, .div-bi-report-grid, .div-bi-extra-grid { grid-template-columns: 1fr; }
  .div-bi-heatmap { grid-template-columns: 92px repeat(var(--div-bi-cols), minmax(48px, 1fr)); }
  .div-bi-funnel > div { grid-template-columns: 66px minmax(64px, 1fr) 48px; }
}

/* v41.50 Track A: Chat parity at phone widths. These rules are intentionally
   scoped to mobile so desktop composition remains unchanged. */
/* v41.58h: component:chat block L39340-L39398 moved to mobile-v2.css */
/* v41.58h: component:chat block L39399-L39406 moved to mobile-v2.css */

/* v41.50: Center prompt text without changing the chips/actions toolbar. */
.floating-chat-composer textarea,
.chat-textarea,
#floating-chat-input,
.msg-composer-input { text-align: center; }

/* v41.50 Predictions dashboard */

.predictions-view .eyebrow { color: #2196F3; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.predictions-view h1 { margin: .25rem 0; font-size: 1.5rem; }
.predictions-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }




.predictions-card th,.predictions-card td { padding: .65rem .55rem; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.07); }

/* v41.58h: misc block L38792-L38792 moved to mobile-v2.css */

/* =============================================================================
   v41.51 mobile chat readability fix + composer parity
   ----------------------------------------------------------------------------
   Problem set observed in production 2026-08-21 (IMG_3373):
   1. Multiple stacked mask-image gradients on .ai-messages fade actual
      readable text at the top and bottom of the mobile viewport.
   2. The mobile composer collapses to a bare send button; the chip toolbar
      and textarea disappear (either display:none or z-index/clipping).
   3. Composer text is not centered on mobile.

   Fix strategy:
   - Neutralize every fade mask on .ai-messages at max-width 820px. The
     sticky composer already has a solid background so no fade is needed
     to hide content beneath it.
   - Restore the composer to a visible textarea + toolbar on mobile.
   - Reassert text-align center on the mobile composer textarea (was being
     overridden by later rules).
   ============================================================================= */
/* v41.58h: Ask block L42693-L42797 moved to mobile-v2.css Section 4b */

/* =============================================================================
   v41.52 Predictions view polish
   - Clears the sticky mobile topbar so the title sits below the header
     (matches the pattern used by ai-messages, chats, dash-hub, reports,
      automations, settings).
   - Retry button, error card styling.
   - Desktop keeps the existing padding.
   ============================================================================= */
/* v41.53: Predictions rebuilt for Tableau/Snowflake feel. */



.predictions-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }


.predictions-toolbar { display: flex; gap: .5rem; }
.pred-tool {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  color: #cfd4dc; font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.pred-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1080px) {
  
  
}



.pred-card-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }


.pred-badge {
  display: inline-flex; align-items: center; padding: .18rem .55rem;
  border-radius: 999px; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}




@keyframes pred-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
.pred-row {
  display: grid;
  grid-template-columns: 44px minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,.9fr);
  gap: .75rem; align-items: center;
  padding: .7rem .25rem; border-top: 1px solid rgba(255,255,255,.04);
  transition: background .12s ease;
}



.pred-col--rank { display: flex; justify-content: center; }

.pred-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px; padding: 0 .4rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}




.pred-bar { display: block; width: 100%; height: 4px; background: rgba(255,255,255,.05); border-radius: 999px; margin-top: .35rem; overflow: hidden; }
.pred-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #2196F3, #64b5f6); border-radius: 999px; transition: width .8s cubic-bezier(.22,.61,.36,1); }
.pred-z { display: inline-flex; align-items: center; color: #b0b8c4; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }




.pred-skel-row {
  display: grid;
  grid-template-columns: 44px minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,.9fr);
  gap: .75rem; align-items: center;
  padding: .7rem .25rem; border-top: 1px solid rgba(255,255,255,.04);
}





@keyframes pred-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (max-width: 820px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}



.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}


/* v41.58g: reports mobile block removed - owned by mobile-v2.css */

/* ============================================================================
 * v41.56e — CANONICAL mobile Ask view (matches Totaly Ask preview)
 * ----------------------------------------------------------------------------
 * Single authoritative block for mobile ai-view. All prior mobile composer /
 * followup / topbar tweaks are OVERRIDDEN below. When phase 2 lands, we
 * DELETE the earlier scattered mobile rules and keep only this block.
 *
 * Design targets (from totaly-ask-preview):
 *  - Composer: fixed bottom, full width minus 12px inset, box-sizing border-box
 *  - Composer inner card: max-width 720px, centered, 20px radius, one shadow
 *  - Textarea: transparent, auto-grow, no visible border on rest state
 *  - Tools row: [model] [mode pill] · · · [mic] [send]  no forced grid
 *  - Followups: flex-wrap chips, not inline text, 8px gap, rounded 999px
 *  - Thinking: collapsed inline chip (no giant empty block)
 *  - User bubble: right-aligned, does NOT overlap topbar (add scroll padding)
 * ========================================================================== */
/* v41.58h: component:ai-view block L40523-L40707 moved to mobile-v2.css */
/* ============================================================================
 * end v41.56e
 * ========================================================================== */

/* ============================================================================
 * v41.58t — Ask composer alignment fix (2026-08-25)
 *
 * The competing floating-pill rule for .ai-has-messages was scoped to mobile
 * (@media max-width 820px) in place above (~line 35375). On desktop, the
 * composer now inherits .ai-view's natural centered layout under the message
 * column, no overrides needed.
 * ========================================================================== */

/* v41.64: leaked @media block from line 35751 is now closed at its source,
   so the previous compensating close-brace here has been removed. All rules
   between lines 35754-36042 (Division BI + msg-composer + Predictions) are
   now top-level again, as originally intended. */

/* ==========================================================================
 * v41.58w — Move Thoughts pill + data-snapshot citation BELOW the answer
 * Was rendering above the ai-prose in chat history, showing an ugly white-
 * bordered "Thought" chip and "Data: snapshot, ..." line before the answer.
 * Reorder via flex so it appears between the answer and feedback thumbs.
 * ========================================================================== */
html body .msg-bubble.msg-assistant {
  display: flex !important;
  flex-direction: column !important;
}
/* v42.3.12 — reverted the v41.58w flip. The tool stream is progress, not a
 * footnote: it belongs above, and the answer reads below it, so the reply
 * lands where the eye already finished reading. */
html body .msg-bubble.msg-assistant > .ai-thinking {
  order: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  opacity: 0.7 !important;
}
html body .msg-bubble.msg-assistant > .ai-prose {
  order: 2 !important;
}
html body .msg-bubble.msg-assistant > .gl-msg-feedback {
  order: 3 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   v41.58ak: Totaly-logo heartbeat spinner
   ───────────────────────────────────────────────────────────────────────── */
.ttl-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin: 4px 0 8px 0;
  border-radius: 999px;
  background: #E3F2FD;
  color: #1976D2;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  user-select: none;
}
.ttl-heartbeat-mark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  /* v42.3.12: overflow must stay visible or the 3D turn gets clipped at the
     box edge. perspective is what makes the Y-axis rotation read as a solid
     mark turning in space rather than a flat horizontal squash. */
  overflow: visible;
  border-radius: 4px;
  perspective: 90px;
  transform-style: preserve-3d;
}
.ttl-heartbeat-mark img {
  width: 100%;
  height: 100%;
  display: block;
  animation: ttl-heartbeat-spin 2.2s linear infinite;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}
.ttl-heartbeat-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0)   30%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0)   70%
  );
  background-size: 300% 100%;
  background-position: -150% 0;
  animation: ttl-heartbeat-shimmer 2s ease-in-out infinite;
  mix-blend-mode: screen;
}
.ttl-heartbeat-label {
  color: #1976D2;
  letter-spacing: 0.01em;
}
/* v42.3.12: the Totaly man in the star turns about the vertical axis, like a
   revolving door — a full 360 on Y, never a flat wheel spin on Z. */
@keyframes ttl-heartbeat-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes ttl-heartbeat-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ttl-heartbeat-mark img,
  .ttl-heartbeat-shimmer {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   v41.65: Answer UI polish
   ─────────────────────────────────────────────────────────────────────────
   User feedback (2026-08-26 screenshot): duplicate "Thought for Ns" stamps
   at the top of each answer + thumbs-up/down + separator on every prior
   answer felt noisy on multi-turn drilldowns. This block:

   1. Hides the topmost .cl-thinking .cl-label text ("Thought for Ns" and
      the bare "Thought" siblings) so the ONLY timing stamp is in the
      "Finished N steps · Thought for Ns" collapser at the bottom.
   2. Hides the .chat-msg-meta footer that duplicated the same text.
   3. Hides .gl-msg-feedback (thumbs up/down) on every assistant message
      EXCEPT the most recent one, using :not(:has(~ ...)).

   ~289 lines' worth of prefers-reduced-motion rules just came back to life
   in v41.64 so we're careful to nest these NEW rules OUTSIDE that media
   query. This block starts at top level after the closing brace of the
   last media block above.
   ───────────────────────────────────────────────────────────────────── */

/* 1. Hide the top-of-answer "Thought for Ns" labels rendered by
      claude_stream.js as .cl-thinking .cl-label. The step timing lives
      in the collapser at the bottom now. */
.msg-bubble.msg-assistant .cl-block.cl-thinking .cl-label {
  display: none !important;
}

/* 2. Hide the .chat-msg-meta footer -- redundant with the collapser. */


/* 3. Show .gl-msg-feedback ONLY on the LAST assistant message in the
      chat scroll. Uses :has() to detect trailing siblings that are also
      assistant messages -- if any, this message is not the latest, so
      hide its thumbs row. Safari 15.4+, Chrome 105+. All modern browsers
      Totaly supports understand :has(). */
.msg-bubble.msg-assistant:has(~ .msg-bubble.msg-assistant) .gl-msg-feedback {
  display: none !important;
}

/* =========================================================================
   Elasticity v41.79 - Cox PH predictions card + Ask response card
   Mobile-first: single-column stack, then 2-col at 900px+
   ========================================================================= */


.pred-el-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  
}





.pred-el-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 900px) {
  
  
}

.pred-el-chart h3 {
  font-size: .82rem;
  font-weight: 600;
  color: #b0b8c4;
  margin: 0 0 .6rem 0;
  letter-spacing: .01em;
}


@media (max-width: 640px) {
  
  
}



.pred-el-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}




.pred-el-scoreresult {
  display: grid;
  gap: .35rem;
}
.pred-el-scorerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: #b0b8c4;
  padding: .3rem .1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}




/* Ask-panel elasticity card (rendered in chat responses) */
.el-ask-card {
  background: linear-gradient(180deg, rgba(33,150,243,.06), rgba(33,150,243,.02));
  border: 1px solid rgba(33,150,243,.2);
  border-radius: 12px;
  padding: 1rem;
  margin-top: .5rem;
}
.el-ask-card h4 {
  font-size: .95rem;
  font-weight: 600;
  color: #f0f2f5;
  margin: 0 0 .75rem 0;
}
.el-ask-card .el-ask-canvas {
  position: relative;
  height: 180px;
  width: 100%;
  margin-top: .5rem;
}

/* ── Model Lab (v41.88 — button+popover selector, professional layout) ─── */

.model-lab-selector { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; position: relative; }


/* v41.89: glass pill matching .pill--glass in the topbar. Neutral fg,
   glass background, thin border. No blue text on selected item -
   selected is indicated by weight + a subtle background tint only. */
.model-lab-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 14px;
  background: var(--overlay-w-08, rgba(255,255,255,0.08));
  border: 1px solid var(--overlay-w-12, rgba(255,255,255,0.12));
  border-radius: 999px;
  color: var(--fg-primary-alpha, rgba(255,255,255,0.92));
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--overlay-w-05, rgba(255,255,255,0.05)),
    0 4px 14px rgba(0, 0, 0, 0.18);
  position: relative;
  min-height: 32px;
}






/* v41.89: glass popover listbox matching pill--glass aesthetic. */
.model-lab-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000;
  min-width: 220px;
  background: rgba(20, 24, 28, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--overlay-w-12, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    inset 0 1px 0 var(--overlay-w-05, rgba(255,255,255,0.05)),
    0 16px 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 2px;
}
.model-lab-pop-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: transparent; border: 0;
  border-radius: 8px;
  color: var(--fg-primary-alpha, rgba(255,255,255,0.92));
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}

/* v41.89: selected uses subtle glass tint + bold weight, NOT blue text. */



/* Light theme override */







/* v41.89: section "loading" state to give instant feedback on switch. */




/* Sections: consistent spacing + heading rhythm on every model page. */


.model-lab-section-body { display: flex; flex-direction: column; gap: 12px; }


.model-lab-grid { display: block; }


/* Two-column grid on wide screens; wide-chart sections span both columns. */
@media (min-width: 1200px) {
  .model-lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
}

@media (max-width: 820px) {
  
  
  
}

/* v41.81 Predictions cards: per-model layout */
.pred-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}



.pred-mini-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}








@media (max-width: 820px) {
  
}

/* ============================================================
 * v41.82 — Contrast fix for dark-mode text tokens
 * v41.81 Model Lab / Predictions cards used undefined vars that
 * fell back to light-mode #1a1a1a/#666/#999 on the black app.
 * Define them once, dark-mode-appropriate.
 * ============================================================ */


/* ─────────────────────────────────────────────────────────────────────────
   v41.86 chat UI polish — copy/regenerate row, stop button, history menu,
   keyboard shortcuts overlay, inline citations.
   Vanilla CSS only. Reuses design tokens from :root above.
   ───────────────────────────────────────────────────────────────────────── */

.gl-msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.gl-msg-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-secondary, #666);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.gl-msg-action:hover {
  background: var(--accent-bg, #E3F2FD);
  border-color: var(--accent, #2196F3);
  color: var(--accent-hover, #1976D2);
}
.gl-msg-action:disabled {
  opacity: 0.5;
  cursor: default;
}
.gl-msg-action-label { line-height: 1; }
.gl-regen-loading {
  color: var(--text-tertiary, #999);
  font-size: 13px;
}

/* Stop button next to .rc-send when a stream is in flight. */
.gl-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-secondary, #666);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.gl-stop-btn:hover {
  background: var(--accent-bg, #E3F2FD);
  border-color: var(--accent, #2196F3);
  color: var(--accent-hover, #1976D2);
}

/* Sidebar history: per-row menu button + pinned badge. */
.history-title-row { position: relative; }
.history-menu-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #999);
  border-radius: 4px;
  cursor: pointer;
}
.history-item:hover .history-menu-btn,
.history-item:focus-within .history-menu-btn {
  display: inline-flex;
}
.history-menu-btn:hover {
  background: var(--accent-bg, #E3F2FD);
  color: var(--accent, #2196F3);
}
.history-pin-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #2196F3);
  margin-right: 6px;
  vertical-align: middle;
}
.history-item[data-pinned="1"] .history-title {
  font-weight: 600;
}

/* Context menu portaled to body. */
.gl-chat-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 160px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gl-chat-context-menu button {
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary, #1a1a1a);
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.gl-chat-context-menu button:hover {
  background: var(--accent-bg, #E3F2FD);
  color: var(--accent-hover, #1976D2);
}
.gl-chat-context-menu button.gl-danger {
  color: var(--danger, #dc2626);
}
.gl-chat-context-menu button.gl-danger:hover {
  background: #fee2e2;
  color: var(--danger, #dc2626);
}

/* Keyboard shortcuts overlay. */
.kbd-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kbd-help {
  background: var(--surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  padding: 20px 24px;
  min-width: 300px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.kbd-help-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 12px;
}
.kbd-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kbd-help-table td {
  padding: 6px 8px;
  color: var(--text-secondary, #666);
  vertical-align: middle;
}
.kbd-help-table td:first-child {
  white-space: nowrap;
  color: var(--text-primary, #1a1a1a);
  font-weight: 500;
}
.kbd-help kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-alt, #f9fafb);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-primary, #1a1a1a);
  min-width: 18px;
  text-align: center;
}
.kbd-help-close {
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-primary, #1a1a1a);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.kbd-help-close:hover {
  background: var(--accent-bg, #E3F2FD);
  border-color: var(--accent, #2196F3);
  color: var(--accent-hover, #1976D2);
}

/* Inline citation strip + markers. */
.citation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.citation-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent-bg, #E3F2FD);
  color: var(--accent-hover, #1976D2);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.citation-marker:hover {
  background: #fff;
  border-color: var(--accent, #2196F3);
  color: var(--accent, #2196F3);
}

/* Assistant bubble focus ring for keyboard nav (a11y). */
.msg-bubble.msg-assistant:focus-visible {
  outline: 2px solid var(--accent, #2196F3);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (max-width: 820px) {
  .gl-msg-actions { gap: 4px; }
  .gl-msg-action { padding: 6px 8px; font-size: 11px; }
  .gl-msg-action-label { display: none; }
  .kbd-help { padding: 16px; }
}
/* ── End v41.86 chat UI polish ─────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   v41.91 Customers tab. Prefixed `.cust-*` so we don't touch existing
   classes. Reuses `.pred-card`, `.pred-num`, `.pred-skel-cell` for the
   prediction cards inside the customer sheet.
   ───────────────────────────────────────────────────────────────────── */
.cust-view {
  padding: 12px 24px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.cust-header {
  display: none;
  margin: 0;
}
.cust-header .eyebrow { display: none; }
.cust-title-row {
  display: none;
}
.cust-title-row h1 {
  display: none;
}
.cust-search {
  position: relative;
  margin: 8px 0 10px;
}
.cust-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary, #999);
  pointer-events: none;
}
.cust-search-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 40px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  font-size: 14px;
  color: var(--text-primary, #1a1a1a);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.cust-search-input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}
.cust-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #999);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cust-search-clear:hover {
  background: var(--surface-alt, #f9fafb);
  color: var(--text-primary, #1a1a1a);
}
.cust-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cust-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cust-chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-secondary, #666);
  font-size: 13px;
  font-weight: 500;
  border-radius: 16px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cust-chip:hover {
  border-color: #2196F3;
  color: #2196F3;
}
.cust-chip.active {
  background: #2196F3;
  border-color: #2196F3;
  color: #fff;
}
.cust-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cust-sort-label {
  font-size: 12px;
  color: var(--text-tertiary, #999);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cust-sort {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
  cursor: pointer;
}
.cust-total {
  font-size: 12px;
  color: var(--text-tertiary, #999);
  margin-left: 8px;
}
.cust-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
}
.cust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font: inherit;
  color: inherit;
}
.cust-item:hover {
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.08);
}
.cust-item:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}
.cust-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-alt, #f0f0f0);
  color: var(--text-secondary, #666);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cust-avatar--high-ltv {
  background: #2196F3;
  color: #fff;
}
.cust-item-info {
  flex: 1;
  min-width: 0;
}
.cust-item-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.cust-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.cust-item-line2 {
  font-size: 12px;
  color: var(--text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-item-line3 {
  font-size: 12px;
  color: var(--text-tertiary, #999);
  margin-top: 2px;
}
.cust-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}
.cust-item-ltv {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  font-variant-numeric: tabular-nums lining-nums;
}
.cust-item-spark { line-height: 0; }
.cust-status-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cust-status-pill--active {
  background: #dcfce7;
  color: #14532d;
  border-color: #bbf7d0;
}
.cust-status-pill--cancelled {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #fecaca;
}
.cust-status-pill--hold {
  background: #fef3c7;
  color: #78350f;
  border-color: #fde68a;
}
.cust-status-pill--other {
  background: var(--surface-alt, #f9fafb);
  color: var(--text-secondary, #666);
  border-color: var(--border, #e5e7eb);
}
.cust-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-tertiary, #999);
  font-size: 14px;
  background: var(--surface-alt, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 10px;
}

/* Sheet */
.cust-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 999;
}
.cust-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cust-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 200ms ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cust-sheet.is-open { transform: translateX(0); }
.cust-sheet-head {
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cust-sheet-head-row1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.cust-sheet-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-sheet-close {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary, #666);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cust-sheet-close:hover {
  background: var(--surface-alt, #f9fafb);
  border-color: var(--border, #e5e7eb);
}
.cust-sheet-head-row2 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cust-sheet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--surface-alt, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}
.cust-sheet-chip a { color: var(--text-primary, #1a1a1a); text-decoration: none; }
.cust-sheet-chip a:hover { color: #2196F3; }
.cust-copy-btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary, #999);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
}
.cust-copy-btn:hover { color: #2196F3; background: var(--accent-bg, #E3F2FD); }
.cust-sheet-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #666);
  margin-bottom: 6px;
}
.cust-sheet-addr a { color: inherit; text-decoration: none; }
.cust-sheet-addr a:hover { color: #2196F3; }
.cust-sheet-meta {
  font-size: 12px;
  color: var(--text-tertiary, #999);
}
.cust-sheet-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  overflow-x: auto;
}
.cust-sheet-tab {
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #666);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cust-sheet-tab:hover { color: var(--text-primary, #1a1a1a); }
.cust-sheet-tab.active {
  color: #2196F3;
  border-bottom-color: #2196F3;
}
.cust-sheet-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: var(--surface-alt, #f9fafb);
}
.cust-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.cust-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px;
}
.cust-stat-label {
  font-size: 11px;
  color: var(--text-tertiary, #999);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.cust-stat-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  font-variant-numeric: tabular-nums lining-nums;
}
.cust-pred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cust-pred-card { padding: 14px; }
.cust-pred-card--muted { background: var(--surface-alt, #f9fafb); color: var(--text-tertiary, #999); }
.cust-pred-note { font-size: 12px; color: var(--text-secondary, #666); margin-top: 6px; }
.cust-pred-sub { font-size: 11px; color: var(--text-tertiary, #999); margin-top: 2px; }
.cust-shap-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cust-shap-chip {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent-bg, #E3F2FD);
  color: #1976D2;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.cust-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border, #e5e7eb);
}
.cust-tl-item {
  position: relative;
  padding: 10px 0 10px 16px;
}
.cust-tl-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: #2196F3;
  border-radius: 50%;
}
.cust-tl-when {
  font-size: 11px;
  color: var(--text-tertiary, #999);
  margin-bottom: 2px;
}
.cust-tl-dir {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent-bg, #E3F2FD);
  color: #1976D2;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 6px;
}
.cust-tl-summary { font-size: 13px; color: var(--text-primary, #1a1a1a); }
.cust-tl-details { margin-top: 4px; }
.cust-tl-details summary { cursor: pointer; font-size: 12px; color: #2196F3; }
.cust-tl-full { font-size: 12px; color: var(--text-secondary, #666); margin-top: 4px; white-space: pre-wrap; }
.cust-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cust-todo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.cust-todo-kind {
  padding: 2px 8px;
  background: #2196F3;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.cust-todo-label { font-size: 13px; color: var(--text-primary, #1a1a1a); }
.cust-sheet-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cust-action {
  padding: 8px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-primary, #1a1a1a);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 120ms ease;
}
.cust-action:hover {
  border-color: #2196F3;
  color: #2196F3;
}
.cust-action--primary {
  background: #2196F3;
  border-color: #2196F3;
  color: #fff;
}
.cust-action--primary:hover {
  background: #1976D2;
  border-color: #1976D2;
  color: #fff;
}

/* Mobile 820px */
@media (max-width: 820px) {
  
  .cust-view {
    padding: 12px;
  }
  .cust-item-spark { display: none; }
  .cust-item-name { max-width: 180px; }
  .cust-sort-wrap { margin-left: 0; }
  .cust-filter-row { gap: 8px; }
  .cust-sheet {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 92vh;
    border-left: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
  }
  .cust-sheet.is-open { transform: translateY(0); }
  .cust-sheet-head { padding-top: 16px; }
  .cust-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cust-pred-grid { grid-template-columns: 1fr; }
}
/* ── End v41.91 customers ──────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   v41.92 CSV-style Customers table. Compact rows, sticky header,
   tabular-nums on numeric columns, 8-column layout, horizontal scroll on
   mobile (no card collapse).
   ───────────────────────────────────────────────────────────────────── */
.cust-view .cust-list { border: 0; background: transparent; overflow-x: auto; }

.cust-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
  table-layout: auto;
  min-width: 900px; /* keeps columns readable; mobile scrolls horizontally */
}
.cust-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-alt, #f9fafb);
}
.cust-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #666);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
  background: var(--surface-alt, #f9fafb);
}
.cust-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: middle;
  height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-table tbody tr:last-child td { border-bottom: 0; }
.cust-table tbody tr.cust-row {
  cursor: pointer;
  transition: background 100ms ease;
}
.cust-table tbody tr.cust-row:hover {
  background: #E3F2FD; /* accent-bg */
}
.cust-table tbody tr.cust-row:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: -2px;
}
.cust-table .cust-c-name {
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  max-width: 240px;
}
.cust-table .cust-c-status { width: 92px; }
.cust-table .cust-c-city  { max-width: 140px; color: var(--text-secondary, #666); }
.cust-table .cust-c-num   {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cust-table .cust-c-ltv   { width: 96px; }
.cust-table .cust-c-days  { width: 96px; color: var(--text-secondary, #666); }
.cust-table .cust-c-churn { width: 74px; }
.cust-table .cust-c-date  { width: 116px; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.cust-table .cust-c-spark { width: 70px; }
.cust-table .cust-c-spark svg { display: block; }

/* Churn colored score pill. */
.cust-churn {
  display: inline-block;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cust-churn--low  { background: #E8F5E9; color: #1B5E20; }
.cust-churn--mid  { background: #FFF8E1; color: #7A5D00; }
.cust-churn--high { background: #FDECEA; color: #B71C1C; }
.cust-churn--na   { background: transparent; color: var(--text-tertiary, #999); font-weight: 400; }

/* Skeleton rows keep the same height. */
.cust-row--skel td { height: 34px; }

/* Pagination pill bar. */
.cust-pager-slot { margin-top: 12px; display: flex; justify-content: center; }
.cust-pager {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.cust-pager-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  font-variant-numeric: tabular-nums;
}
.cust-pager-btn:hover:not([disabled]) {
  background: #E3F2FD;
  border-color: #2196F3;
}
.cust-pager-btn[disabled] {
  color: var(--text-tertiary, #999);
  cursor: not-allowed;
  opacity: 0.55;
}
.cust-pager-btn--active {
  background: #2196F3;
  border-color: #2196F3;
  color: #ffffff;
}
.cust-pager-btn--active:hover:not([disabled]) {
  background: #1976D2;
  border-color: #1976D2;
  color: #ffffff;
}

/* Inline note compose panel inside the customer sheet. */
.cust-note-compose {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-alt, #f9fafb);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cust-note-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #666);
}
.cust-note-textarea {
  width: 100%;
  min-height: 68px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.cust-note-textarea:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}
.cust-note-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cust-note-err {
  font-size: 12px;
  color: var(--danger, #dc2626);
  background: #fdecea;
  border-radius: 4px;
  padding: 6px 10px;
}

/* Mobile 820px: keep the table, scroll horizontally. Do NOT collapse to cards. */
@media (max-width: 820px) {
  .cust-view .cust-list { -webkit-overflow-scrolling: touch; }
  .cust-table { min-width: 780px; font-size: 12px; }
  .cust-table thead th { padding: 6px 10px; }
  .cust-table tbody td { padding: 5px 10px; height: 32px; }
  .cust-pager-btn { min-width: 30px; height: 28px; padding: 0 8px; }
}
/* ── End v41.92 CSV customers ──────────────────────────────────────────── */

/* ── v41.93 TotalyAutocomplete (shared) ─────────────────────────────── */
/* Dropdown component shared by every search bar (cust-search, hood addr
 * search, chats sidebar). See static/js/modules/autocomplete.js. Uses the
 * existing Totaly design tokens (accent #2196F3, accent-bg #E3F2FD). */

.ta-dropdown {
  position: absolute;
  z-index: 1100;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-primary, #1a1a1a);
}

.ta-dropdown.ta-loading {
  opacity: 0.55;
  pointer-events: none;
}

.ta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 40px;
  border: none;
  background: transparent;
  transition: background-color 100ms ease;
}
.ta-item:hover { background: var(--surface-alt, #f9fafb); }
.ta-item.ta-active { background: var(--accent-bg, #E3F2FD); }

.ta-item-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #666);
}

.ta-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ta-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-item-sublabel {
  font-size: 12px;
  color: var(--text-secondary, #666);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-item-section-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #999);
  padding: 8px 14px 4px;
  position: sticky;
  top: 0;
  background: var(--surface, #ffffff);
  z-index: 1;
}

.ta-highlight {
  color: var(--accent, #2196F3);
  font-weight: 600;
}

.ta-empty {
  padding: 12px 14px;
  color: var(--text-secondary, #666);
  font-size: 13px;
  font-style: normal;
}

/* Mobile: dropdown becomes a bottom sheet. */
@media (max-width: 820px) {
  .ta-dropdown.ta-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 60vh;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 8px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  }
}
/* ── End v41.93 TotalyAutocomplete ───────────────────────────────────── */

/* ── v41.93 Model Lab explain ────────────────────── */
/* AI-autogenerated "What this data means" section, rendered by
 * static/model_lab/explanation.js. Uses the same design tokens as the
 * rest of the app; Totaly blue (#2196F3) only. */

.ml-explain-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ml-explain-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.3;
}

.ml-explain-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ml-explain-badge-ai {
  background: var(--accent-bg, #E3F2FD);
  color: var(--accent, #2196F3);
}

.ml-explain-badge-stub {
  background: #F5F5F5;
  color: var(--text-secondary, #666);
}

.ml-explain-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.ml-explain-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary, #1a1a1a);
}

.ml-explain-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e5e7eb);
}

.ml-explain-refresh {
  appearance: none;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1a1a1a);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ml-explain-refresh:hover {
  background: var(--accent-bg, #E3F2FD);
  border-color: var(--accent, #2196F3);
  color: var(--accent, #2196F3);
}

.ml-explain-refresh:active {
  background: var(--accent, #2196F3);
  color: #ffffff;
  border-color: var(--accent, #2196F3);
}

.ml-explain-refresh:focus-visible {
  outline: 2px solid var(--accent, #2196F3);
  outline-offset: 2px;
}

.ml-explain-note {
  font-size: 11px;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}

.ml-explain-error {
  font-size: 13px;
  color: var(--text-secondary, #666);
  line-height: 1.5;
  padding: 8px 0;
}

/* Skeleton: 3-paragraph shimmer that matches the eventual layout. */
.ml-explain-skel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.ml-explain-skel-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e5e5e5 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: pred-shimmer 1.4s ease-in-out infinite;
}

.ml-explain-skel-line-short {
  width: 72%;
}

.ml-explain-skel-gap {
  height: 8px;
}

@media (max-width: 820px) {
  .ml-explain-head {
    gap: 6px;
    margin-bottom: 10px;
  }
  .ml-explain-title {
    flex: 1 1 100%;
  }
  .ml-explain-badge {
    align-self: flex-start;
  }
  .ml-explain-body {
    gap: 8px;
    margin-bottom: 10px;
  }
  .ml-explain-p {
    font-size: 14px;
  }
  .ml-explain-foot {
    padding-top: 10px;
  }
}
/* ── end v41.93 Model Lab explain ──────────────── */

/* --- v41.94-E: chat-ui polish --- */

.msg-bubble.msg-assistant {
  display: block;
  max-width: 100%;
  padding: 14px 16px 12px;
  margin: 8px 0 16px;
  background: transparent;
  border-left: 2px solid rgba(33, 150, 243, 0.22);
  border-radius: 0;
  position: relative;
}

/* actions: hidden until hover, keyboard-accessible.
   Overrides the older .gl-msg-actions rule that added a top border and left alignment. */
.msg-bubble.msg-assistant .gl-msg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .msg-bubble.msg-assistant:hover .gl-msg-actions,
  .msg-bubble.msg-assistant:focus-within .gl-msg-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg-bubble.msg-assistant:hover .gl-msg-actions,
  .msg-bubble.msg-assistant:focus-within .gl-msg-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* keyboard-focused button always visible */
.msg-bubble.msg-assistant .gl-msg-actions button:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile: actions always visible (no hover) */
@media (max-width: 820px) {
  .msg-bubble.msg-assistant .gl-msg-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .msg-bubble.msg-assistant {
    padding: 12px 14px 10px;
  }
}

/* --- end v41.94-E --- */

/* --- v41.94-G: search-bar focus fix -------------------------------------
   Root cause diagnosis (2026-08-30):
   The v40.5be killFormBar routine (static/app.js line ~16183) sets
   tabindex="-1" AND inert="" on every input/textarea/select that is NOT
   inside a whitelisted container. The three search inputs
   (#cust-search-input, #hood-addr-search-input, #chats-search) live
   outside all whitelisted containers, so they are silently inerted at
   render time and again on every hashchange + MutationObserver tick.
   The inert attribute makes an element non-hit-testable, so
   document.elementFromPoint(cx, cy) returned the wrapper
   <div class="cust-search"> instead of the input.

   elementFromPoint before fix: <div class="cust-search">
   elementFromPoint after  fix: <input id="cust-search-input">

   The primary fix is in the render code: each search wrapper (or input,
   when it has no wrapper) now carries data-keep-active so the kill
   routine skips it. The CSS below is the belt-and-suspenders piece:
   raises the input above the wrapper for hit-testing and gives the
   wrapper a text cursor so the whole pill reads as a search target.

   NOTE for aggregator: if Agent E's v41.94-E chat-ui block lands in
   this file, it must be placed BEFORE this block (per coordination).
   -----------------------------------------------------------------------*/
.cust-search,
.hood-addr-search {
  cursor: text;
}
.cust-search-input,
.hood-addr-search-input,
#chats-search {
  position: relative;
  z-index: 1;
}
/* --- end v41.94-G ------------------------------------------------------*/

/* =============================================================================
   v41.96 - Home KPI cards: rounded-square shape, WCAG AA dark contrast,
   hide stale skeletons after data loads. Task E from Wave 2.
   Placed LAST so it wins over the older layered dark-mode/laptop/studio
   rules earlier in this file.
   ============================================================================= */

/* 1. Rounded squares - NEVER circles. Both the data cards and the totals
   chips must have 16px radius. Beats any earlier border-radius: 50% or 999px
   that may have leaked into these classes. */
html body .home-dash-grid .home-dash-card,
html body .home-dash-grid .home-dash-card--link,
html body .home-dash-grid .home-dash-bucket-chip,
html body .home-dash-grid .home-dash-bucket-chip--right,
html body .ai-view .home-dash-grid .home-dash-card,
html body .ai-view .home-dash-grid .home-dash-card--link,
html body .ai-view .home-dash-grid .home-dash-bucket-chip,
html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
  border-radius: 16px !important;
}

/* 2. Dark-mode contrast - raised surface, visible border, near-white primary
   number, WCAG AA labels + delta text. */
html body .home-dash-grid .home-dash-card,
html body .ai-view .home-dash-grid .home-dash-card,
html body .home-dash-grid .home-dash-bucket-chip,
html body .home-dash-grid .home-dash-bucket-chip--right,
html body .ai-view .home-dash-grid .home-dash-bucket-chip,
html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}

/* Primary number - near-white on dark. Beats the older laptop rule at
   ~6507-6511 that painted the bucket value #191A1A. */
html body .home-dash-grid .home-dash-card .home-dash-value,
html body .ai-view .home-dash-grid .home-dash-card .home-dash-value,
html body .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
html body .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value,
html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Eyebrow / category labels - AA on dark. */
html body .home-dash-grid .home-dash-eyebrow,
html body .ai-view .home-dash-grid .home-dash-eyebrow,
html body .home-dash-grid .home-dash-bucket-eyebrow,
html body .ai-view .home-dash-grid .home-dash-bucket-eyebrow {
  color: rgba(255, 255, 255, 0.72) !important;
}
html body .home-dash-grid .home-dash-title,
html body .ai-view .home-dash-grid .home-dash-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Delta / unit / baseline / ticker - AA on dark. */
html body .home-dash-grid .home-dash-unit,
html body .home-dash-grid .home-dash-ytd-inline,
html body .home-dash-grid .home-dash-bucket-unit,
html body .home-dash-grid .home-dash-bucket-ticker,
html body .ai-view .home-dash-grid .home-dash-unit,
html body .ai-view .home-dash-grid .home-dash-ytd-inline,
html body .ai-view .home-dash-grid .home-dash-bucket-unit,
html body .ai-view .home-dash-grid .home-dash-bucket-ticker {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* Hover state - visible but not garish. */
html body .home-dash-grid .home-dash-card:hover,
html body .ai-view .home-dash-grid .home-dash-card:hover {
  background: rgba(33, 150, 243, 0.08) !important;
  border-color: rgba(33, 150, 243, 0.35) !important;
}

/* 3. Chevron / cta arrow - reposition to bottom-right so it never overlaps
   the category label. Bounded absolute at bottom-right of card. */
html body .home-dash-grid .home-dash-card,
html body .ai-view .home-dash-grid .home-dash-card {
  position: relative;
}
html body .home-dash-grid .home-dash-card .home-dash-cta,
html body .ai-view .home-dash-grid .home-dash-card .home-dash-cta {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  opacity: 0.9 !important;
  font-size: 0.85rem !important;
}
html body .home-dash-grid .home-dash-card:hover .home-dash-cta {
  background: rgba(33, 150, 243, 0.22) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Let the head-row breathe now that the arrow is out of it. */
html body .home-dash-grid .home-dash-card .home-dash-head,
html body .ai-view .home-dash-grid .home-dash-card .home-dash-head {
  padding-right: 8px !important;
}

/* 4. Grid layout - auto-fill responsive: 3+ desktop, 2 tablet, 1 mobile.
   We override the fixed 3-col + fixed 4th-col rules from earlier laptop and
   Studio breakpoints. Bucket-chips retain their spans by DOM order. */
html body .home-launcher .home-dash-grid,
html body .ai-view .home-launcher .home-dash-grid,
html body .ai-view #home-launcher.home-launcher .home-dash-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  grid-auto-rows: minmax(140px, auto) !important;
  grid-template-rows: none !important;
  gap: 12px !important;
  max-width: 1200px !important;
}
@media (max-width: 900px) {
  html body .home-launcher .home-dash-grid,
  html body .ai-view .home-launcher .home-dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html body .home-launcher .home-dash-grid,
  html body .ai-view .home-launcher .home-dash-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Center content vertically in each card. */
html body .home-dash-grid .home-dash-card,
html body .ai-view .home-dash-grid .home-dash-card,
html body .home-dash-grid .home-dash-bucket-chip,
html body .home-dash-grid .home-dash-bucket-chip--right,
html body .ai-view .home-dash-grid .home-dash-bucket-chip,
html body .ai-view .home-dash-grid .home-dash-bucket-chip--right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 140px !important;
  max-height: none !important;
  padding: 14px 16px !important;
}

/* 5. Hide the shimmer skeleton overlay once data is present. The v2008
   .is-loading rule adds a ::after moving-gradient bar on every card while
   the network call is in flight. It's supposed to be cleared 350ms after
   the fetch resolves, but if the resolver returns 0-value payloads the
   shimmer visually persists behind the loaded 0. Force clear it any time
   the launcher is NOT in the is-loading state. */
html body .ai-view .home-launcher:not(.is-loading) .home-dash-card::after,
html body .ai-view .home-launcher:not(.is-loading) .home-dash-bucket-chip::after,
html body .ai-view .home-launcher:not(.is-loading) .home-dash-bucket-chip--right::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}
html body .ai-view .home-launcher:not(.is-loading) .home-dash-card > *,
html body .ai-view .home-launcher:not(.is-loading) .home-dash-bucket-chip > *,
html body .ai-view .home-launcher:not(.is-loading) .home-dash-bucket-chip--right > * {
  opacity: 1 !important;
}

/* Kill any stray inner ::before big-circle glow that could render as a
   blurred disc behind the value text. */
html body .home-dash-grid .home-dash-card::before,
html body .home-dash-grid .home-dash-bucket-chip::before,
html body .home-dash-grid .home-dash-bucket-chip--right::before,
html body .ai-view .home-dash-grid .home-dash-card::before,
html body .ai-view .home-dash-grid .home-dash-bucket-chip::before,
html body .ai-view .home-dash-grid .home-dash-bucket-chip--right::before {
  content: none !important;
  background: none !important;
  filter: none !important;
}
/* --- end v41.96 Task E ------------------------------------------------ */

/* =============================================================================
   v41.96 Task L: Predictions - de-code version chip, big total, paginated
   mini-list, clickable cards, and per-model detail view (Customers-style).
   ============================================================================= */

/* Kill any monospace / code look on the version label. */


/* Big total scored count at the top of each model card. */
.pred-total-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}



/* Two-column meta row (was three). */


/* Clickable card affordance. */




/* Show all button under mini-list. */
.pred-showmore-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a2a);
  background: transparent;
  color: #2196F3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}


/* ── Predictions detail view (per-model, Customers-style) ─────────────── */


.pred-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-secondary, #999);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 12px;
}



.pred-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-alt, #1c1c1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 10px;
}



.pred-detail-pager { display: inline-flex; gap: 4px; }













@media (max-width: 820px) {
  
  
  
}

/* =============================================================================
   v41.96 Task F - Connectors page: Perplexity-style compact grid + Skills
   subtab + custom MCP/API add flow.
   ============================================================================= */

/* Header row: title on the left, [+ Add custom] on the right. */
html body .gl-cn-view .gl-cn-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
html body .gl-cn-view .gl-cn-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(33, 150, 243, 0.35);
  background: rgba(33, 150, 243, 0.10);
  color: #2196F3;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  flex: 0 0 auto;
  white-space: nowrap;
}
html body .gl-cn-view .gl-cn-add-btn:hover {
  background: rgba(33, 150, 243, 0.18);
  border-color: rgba(33, 150, 243, 0.55);
}
html body .gl-cn-view .gl-cn-add-btn svg {
  stroke: currentColor;
}

/* Subtab strip. */
html body .gl-cn-view .gl-cn-subtabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html body .gl-cn-view .gl-cn-subtab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.60);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
  margin-bottom: -1px;
}
html body .gl-cn-view .gl-cn-subtab:hover {
  color: rgba(255, 255, 255, 0.85);
}
html body .gl-cn-view .gl-cn-subtab.is-active {
  color: #2196F3;
  border-bottom-color: #2196F3;
}

/* Compact grid. Smaller minmax for tighter density. */
html body .gl-cn-view .gl-cn-grid--compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
@media (max-width: 900px) {
  html body .gl-cn-view .gl-cn-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
  }
}
@media (max-width: 640px) {
  html body .gl-cn-view .gl-cn-grid--compact {
    grid-template-columns: 1fr;
  }
}

/* Compact card body - shrink padding and font sizes so 4-6 fit per row. */
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card {
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  min-height: 0 !important;
}
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card .gds-icon {
  width: 24px !important;
  height: 24px !important;
  color: rgba(255, 255, 255, 0.85);
}
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card .gds-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.94) !important;
}
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card .gds-desc {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.60) !important;
  margin: 4px 0 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card .gds-chip {
  font-size: 10.5px !important;
  padding: 2px 6px !important;
}
html body .gl-cn-view .gl-cn-grid--compact .gl-cn-card .gds-cta {
  font-size: 12px !important;
  padding: 5px 10px !important;
}

/* Add-custom popover menu. Anchored under the + Add custom button. */
html body .gl-cn-add-menu {
  position: fixed;
  z-index: 1200;
  min-width: 280px;
  background: #1a1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html body .gl-cn-add-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
html body .gl-cn-add-item:hover {
  background: rgba(33, 150, 243, 0.14);
}
html body .gl-cn-add-item-title {
  font-size: 13.5px;
  font-weight: 600;
}
html body .gl-cn-add-item-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* Modal for Add MCP / Add custom API. */
html body .gl-cn-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
html body .gl-cn-modal {
  background: #1a1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: min(480px, 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
html body .gl-cn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html body .gl-cn-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
html body .gl-cn-modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
html body .gl-cn-modal-close:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
html body .gl-cn-modal-body {
  padding: 16px 18px 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html body .gl-cn-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
html body .gl-cn-field > span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}
html body .gl-cn-field input,
html body .gl-cn-field textarea,
html body .gl-cn-field select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
html body .gl-cn-field input:focus,
html body .gl-cn-field textarea:focus,
html body .gl-cn-field select:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.20);
}
html body .gl-cn-field-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.50);
  margin: 4px 0 0 0;
}
html body .gl-cn-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
html body .gl-cn-btn-primary,
html body .gl-cn-btn-secondary {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
html body .gl-cn-btn-primary {
  background: #2196F3;
  color: #fff;
  border-color: #2196F3;
}
html body .gl-cn-btn-primary:hover {
  background: #1976D2;
  border-color: #1976D2;
}
html body .gl-cn-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
}
html body .gl-cn-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 640px) {
  html body .gl-cn-view .gl-cn-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  html body .gl-cn-view .gl-cn-add-btn {
    align-self: flex-end;
  }
}
/* --- end v41.96 Task F ------------------------------------------------ */

/* =============================================================================
   v41.96 Task G - Customers page: real data, 500/page, phone-copy, column
   picker, slim default columns, and top-piece contrast fix on dark.
   ============================================================================= */

/* v41.96.1 Top-piece contrast on dark. Prior Wave 2 pass raised only text
   opacity; user reports the top section still fails contrast. Apply the same
   pattern used on Home KPIs -- lift the header/toolbar onto a raised surface
   card with clear WCAG AA text colors (>= 4.5:1 on the #191A1A shell). Base
   rules above target light-mode; these dark-mode overrides win on
   route-customers. */




html body.route-customers .cust-search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #F5F5F5;
}



html body.route-customers .cust-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #E0E0E0;  /* 12.6:1 -- was 0.75 (~9.5:1) which felt washed against 0.12 border */
}



html body.route-customers .cust-sort {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #F5F5F5;
}


/* Customer card cell: circular avatar with initials + name. */
html body .cust-card-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
html body .cust-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(33, 150, 243, 0.18);
  color: #90caf9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
html body .cust-card-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Slim columns. */
html body .cust-c-first,
html body .cust-c-last {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Phone with copy button. */
html body .cust-c-phone {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  padding-right: 8px;
}
html body .cust-c-phone .cust-phone-text {
  margin-right: 6px;
}
html body .cust-phone-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
  vertical-align: middle;
}
html body .cust-phone-copy:hover {
  background: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.45);
  color: #2196F3;
}
html body .cust-phone-copy[data-copied="1"] {
  background: rgba(22, 163, 74, 0.20);
  border-color: rgba(22, 163, 74, 0.55);
  color: #4ade80;
}

/* Add-column header cell + picker menu. */
html body .cust-c-addcol {
  width: 36px;
  text-align: center;
  padding: 0 !important;
}
html body .cust-addcol-btn {
  width: 24px;
  height: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.20);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
html body .cust-addcol-btn:hover {
  background: rgba(33, 150, 243, 0.14);
  color: #2196F3;
  border-color: rgba(33, 150, 243, 0.50);
  border-style: solid;
}

html body .cust-col-menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  background: #1a1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
html body .cust-col-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  font-size: 13px;
  transition: background 100ms ease;
}
html body .cust-col-opt:hover {
  background: rgba(33, 150, 243, 0.12);
}
html body .cust-col-opt input[type="checkbox"] {
  accent-color: #2196F3;
}
html body .cust-col-opt-req {
  margin-left: auto;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* --- end v41.96 Task G ------------------------------------------------ */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.2 TASK A -- white line strikethrough at top of UI on multiple screens.
     User: "notice the white line the cuts through the very top of the UI.
     that shows up on multiple screens." The screenshot shows a 1-2 px light
     hairline slicing horizontally through page headings. Root cause: legacy
     decorative pseudo-elements (::before / ::after) and stray borders /
     text-decoration on shared page-header wrappers. Neutralize on every
     route wrapper we ship.
   ═══════════════════════════════════════════════════════════════════════════ */
html body .cust-header::before,
html body .cust-header::after,
html body .cust-title-row::before,
html body .cust-title-row::after,
html body .cust-title-row h1::before,
html body .cust-title-row h1::after,
html body .cust-header .eyebrow::before,
html body .cust-header .eyebrow::after,
html body .cust-detail-head::before,
html body .cust-detail-head::after,
html body .cust-detail-title-row::before,
html body .cust-detail-title-row::after,
html body .pred-view > header::before,
html body .pred-view > header::after,
html body .predictions-header::before,
html body .predictions-header::after,
html body .predictions-title-row::before,
html body .predictions-title-row::after,
html body .predictions-header h1::before,
html body .predictions-header h1::after,
html body .gl-divisions-header::before,
html body .gl-divisions-header::after,
html body .gl-divisions-title::before,
html body .gl-divisions-title::after,
html body .rt-header::before,
html body .rt-header::after,
html body .rep-view > header::before,
html body .rep-view > header::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  height: 0 !important;
  display: none !important;
}
html body .cust-title-row h1,
html body .cust-detail-title-row h1,
html body .cust-header .eyebrow,
html body .pred-view > header h1,
html body .predictions-header h1,
html body .gl-divisions-title,
html body .rt-header h1,
html body .rep-view > header h1 {
  text-decoration: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* --- end v41.96.2 TASK A ---------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.2 TASK B -- stray blue border around the Customers eyebrow area.
     User: "fix the blue border around the filters". The prior v41.96.1
     dark-mode override boxed .cust-header / .cust-search / .cust-filter-row
     in a 1px white-10% card that reads faint-blue on the dark shell. Drop
     the boxed card treatment on .cust-header (eyebrow + title). The
     eyebrow's text stays blue #2196F3 per task spec, but no border.
   ═══════════════════════════════════════════════════════════════════════════ */



/* --- end v41.96.2 TASK B ---------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.2 TASK C -- Customers table header contrast (WCAG AA on dark).
     User: "fix the white menu heading tab it doesnt contrast text inside
     clearly." The base .cust-table thead uses --surface-alt (#f9fafb) with
     grey text -- fine for light mode but on the deployed dark shell the
     column labels (CUSTOMER / FIRST NAME / LAST NAME / PHONE) render nearly
     invisible. Override on route-customers to the Wave-2 raised dark
     surface with white-72 text (>= 8:1 contrast on #191A1A).
   ═══════════════════════════════════════════════════════════════════════════ */






/* --- end v41.96.2 TASK C ---------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.2 TASK D -- Customer detail side panel + draggable float.
     Click a customer row -> panel slides in from the right (480px on
     desktop, full-width on mobile). Grab the panel header and drag past
     40px to detach into a floating fixed window (same 480px). Small
     "dock" button in the header redocks. Close X closes.
   ═══════════════════════════════════════════════════════════════════════════ */
.cust-detail-panel {
  position: fixed;
  width: 480px;
  max-width: 100vw;
  background: #1F2121;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  color: #F5F5F5;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.cust-detail-panel--docked {
  top: 44px;                  /* clear the sticky topbar (44px height) */
  right: 0;
  bottom: 0;
  border-radius: 0;
  left: auto !important;      /* keep docked even after floating drag */
}
.cust-detail-panel--floating {
  top: 80px;
  right: auto;
  bottom: auto;
  height: min(80vh, 720px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cust-detail-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
  user-select: none;
  flex: 0 0 auto;
}
.cust-detail-panel-header:active { cursor: grabbing; }
.cust-detail-panel-grab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.55);
}
.cust-detail-panel-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}
.cust-detail-panel-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #2196F3;
  text-transform: uppercase;
  margin: 0;
}
.cust-detail-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #F5F5F5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0 0;
}
.cust-detail-panel-close,
.cust-detail-panel-dock {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.80);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.cust-detail-panel-close:hover,
.cust-detail-panel-dock:hover {
  background: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.45);
  color: #2196F3;
}
.cust-detail-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 20px;
  -webkit-overflow-scrolling: touch;
}
.cust-detail-view--panel {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
  /* not needed in panel */





.cust-detail-view--panel .cust-detail-tabs {
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.cust-detail-view--panel .cust-detail-kv-key { flex-basis: 100px; font-size: 11px; }



@media (max-width: 820px) {
  .cust-detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
  .cust-detail-panel--docked {
    top: 44px;
    right: 0;
    left: 0 !important;
  }
  .cust-detail-panel--floating {
    left: 0 !important;
    top: 60px !important;
    right: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    border-radius: 0;
  }
  
}
/* --- end v41.96.2 TASK D ---------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.2 TASK E -- Right-fade killer v2 for /hood.
     v41.96.1 (30080) killed masks on the map + wrappers, but a right-edge
     fade still showed up. Two remaining suspects:
       1) a linear-gradient background on a parent (topbar, page, main),
       2) a Leaflet or Google Maps control's inline mask/gradient.
     This block uses `all: revert` on the map itself (nukes any inline
     mask/filter/opacity applied by controls), then re-establishes only the
     properties we actually want (position + full opacity), and zeros out
     background-image on every ancestor up to <body>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill any right-edge pseudo scrim on any ancestor of the map. */

/* Leaflet / Google Maps controls sometimes ship with a subtle gradient
   background on their attribution/scale bar. Zero those out on /hood so no
   right-side gradient bleeds up onto the map surface. */

/* --- end v41.96.2 TASK E ---------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════
   v41.96.1 Customer detail full-page view
   Route: #/customers/<id>. Reuses Predictions detail primitives (.pred-view,
   .pred-section, .pred-grid, .pred-card, .pred-detail-*) plus new .cust-detail-*
   classes for the customer-specific bits (KV rows, notes feed, tabs). Dark
   mode is the only mode; light-mode fallback keeps the surface white.
   ═══════════════════════════════════════════════════════════════════════════ */

.cust-detail-view {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.cust-detail-head {
  margin-bottom: 16px;
}
.cust-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.cust-detail-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}




.cust-detail-kv {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.cust-detail-kv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.cust-detail-kv-key {
  flex: 0 0 140px;
  color: #BFBFBF;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cust-detail-kv-val {
  flex: 1 1 auto;
  color: #F5F5F5;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  word-break: break-word;
}
.cust-detail-kv-val .cust-copy-btn {
  padding: 4px 10px;
  border: 1px solid rgba(33,150,243,0.45);
  background: rgba(33,150,243,0.10);
  color: #2196F3;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cust-detail-kv-val .cust-copy-btn:hover {
  background: rgba(33,150,243,0.20);
}

.cust-detail-empty {
  padding: 20px 16px;
  color: #BFBFBF;
  text-align: center;
  font-size: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}

.cust-detail-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cust-detail-note {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.cust-detail-note-meta {
  color: #BFBFBF;
  font-size: 12px;
  margin-bottom: 4px;
}
.cust-detail-note-body {
  color: #F0F0F0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Mobile tuning */
@media (max-width: 820px) {
  .cust-detail-view {
    padding: 16px 12px;
  }
  .cust-detail-kv-key {
    flex-basis: 100px;
    font-size: 11px;
  }
  .cust-detail-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* v41.96.3 UI hotfix: hide the Google Maps SDK auth-failure modal.
   The SDK renders "This page can't load Google Maps correctly. Do you own
   this website?" inside .gm-err-container when the API key has HTTP referrer
   restrictions that don't match the current origin (RefererNotAllowedMapError).
   We already fall back to Leaflet via _ensureGoogleMaps + hood.js, but the
   Google modal paints BEFORE our gm_authFailure callback resolves, so users
   briefly see the broken Google surface. Hiding it unconditionally is safe:
   we never want to show that native error UI on any route. */
.gm-err-container,
.gm-err-title,
.gm-err-message,
.gm-err-content,
[class*="gm-err"] {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================================
   v41.99 LIQUID GLASS
   Additive-only. Zero regression when data-glass="off" (default).
   Applied to cards, sidebar, topbar, modals, drawers, dropdowns.
   NOT applied to: inputs, buttons inside cards, chart canvases,
   table data cells, page background.
   Reference: Greenleaf D2D dashboard bottom-nav pill treatment.
   ========================================================================== */

/* Design tokens - one line to tweak everything. */
html[data-glass="on"] {
  --glass-bg: rgba(20, 22, 20, 0.55);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                  0 12px 40px -12px rgba(0, 0, 0, 0.5);
  --glass-highlight: linear-gradient(180deg,
                     rgba(255, 255, 255, 0.06),
                     rgba(255, 255, 255, 0) 60%);
}
/* Light mode override */
html[data-glass="on"][data-app-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: 1px solid rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                  0 12px 40px -12px rgba(15, 23, 15, 0.25);
  --glass-highlight: linear-gradient(180deg,
                     rgba(255, 255, 255, 0.4),
                     rgba(255, 255, 255, 0) 60%);
}

/* Shared surface treatment.
   Uses `background-image` for the inner highlight overlay and
   `background-color` (via --glass-bg) so both compose without a
   separate ::before pseudo-element on every surface (many of our
   existing surfaces already use ::before).
   Radius is inherited from each surface's own rule - not overridden.
   v41.99.1: added the real Totaly dashboard surface names discovered
   during ship verification - .dash-hub-*, .hero-card, .gl-division-card,
   .kpi-pill. */
html[data-glass="on"] .card,
html[data-glass="on"] .kpi-card,
html[data-glass="on"] .panel,
html[data-glass="on"] .tile,
html[data-glass="on"] .surface,
html[data-glass="on"] .sidebar,
html[data-glass="on"] aside.sidebar,
html[data-glass="on"] .topbar,
html[data-glass="on"] .top-nav,
html[data-glass="on"] .mobile-topnav,
html[data-glass="on"] .modal-box,
html[data-glass="on"] .drawer,
html[data-glass="on"] .dropdown-menu,
html[data-glass="on"] .dash-hub-card,
html[data-glass="on"] .dash-hub-kpi,
html[data-glass="on"] .dash-hub-header,
html[data-glass="on"] .dash-hub-insights,
html[data-glass="on"] .dash-hub-leaderboard,
html[data-glass="on"] .hero-card,
html[data-glass="on"] .gl-division-card,
html[data-glass="on"] .kpi-pill {
  background-color: var(--glass-bg);
  background-image: var(--glass-highlight);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* Safari transform-3d fix - prevents backdrop-filter from breaking
     inside a transformed ancestor. */
  transform: translateZ(0);
}

/* Do-not-glass rescues.
   If a page-level rule tried to inherit our background onto an input,
   button, canvas, or table cell, force it back. Also protects the app
   background element (html/body). */
html[data-glass="on"] input,
html[data-glass="on"] textarea,
html[data-glass="on"] select,
html[data-glass="on"] .card button,
html[data-glass="on"] .kpi-card button,
html[data-glass="on"] .panel button,
html[data-glass="on"] canvas,
html[data-glass="on"] table td,
html[data-glass="on"] table th {
  background-color: initial;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* Above is too broad - restore the primary CTA button's blue.
   Only strip background on unstyled/ghost buttons that inherited from card. */
html[data-glass="on"] .card .primary-btn,
html[data-glass="on"] .card .btn-primary,
html[data-glass="on"] .card button[data-primary],
html[data-glass="on"] .kpi-card .primary-btn,
html[data-glass="on"] .kpi-card .btn-primary {
  background-color: var(--accent-primary, #2196F3);
}

/* Safari / older-browser fallback: no backdrop-filter support.
   Bump opacity so surfaces still read as intentional (not translucent
   over a dark app background). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass="on"] .card,
  html[data-glass="on"] .kpi-card,
  html[data-glass="on"] .panel,
  html[data-glass="on"] .tile,
  html[data-glass="on"] .surface,
  html[data-glass="on"] .sidebar,
  html[data-glass="on"] aside.sidebar,
  html[data-glass="on"] .topbar,
  html[data-glass="on"] .top-nav,
  html[data-glass="on"] .mobile-topnav,
  html[data-glass="on"] .modal-box,
  html[data-glass="on"] .drawer,
  html[data-glass="on"] .dropdown-menu,
  html[data-glass="on"] .dash-hub-card,
  html[data-glass="on"] .dash-hub-kpi,
  html[data-glass="on"] .dash-hub-header,
  html[data-glass="on"] .dash-hub-insights,
  html[data-glass="on"] .dash-hub-leaderboard,
  html[data-glass="on"] .hero-card,
  html[data-glass="on"] .gl-division-card,
  html[data-glass="on"] .kpi-pill {
    background-color: rgba(20, 22, 20, 0.85);
  }
  html[data-glass="on"][data-app-theme="light"] .card,
  html[data-glass="on"][data-app-theme="light"] .kpi-card,
  html[data-glass="on"][data-app-theme="light"] .panel,
  html[data-glass="on"][data-app-theme="light"] .tile,
  html[data-glass="on"][data-app-theme="light"] .surface,
  html[data-glass="on"][data-app-theme="light"] .sidebar,
  html[data-glass="on"][data-app-theme="light"] aside.sidebar,
  html[data-glass="on"][data-app-theme="light"] .topbar,
  html[data-glass="on"][data-app-theme="light"] .top-nav,
  html[data-glass="on"][data-app-theme="light"] .mobile-topnav,
  html[data-glass="on"][data-app-theme="light"] .modal-box,
  html[data-glass="on"][data-app-theme="light"] .drawer,
  html[data-glass="on"][data-app-theme="light"] .dropdown-menu,
  html[data-glass="on"][data-app-theme="light"] .dash-hub-card,
  html[data-glass="on"][data-app-theme="light"] .dash-hub-kpi,
  html[data-glass="on"][data-app-theme="light"] .dash-hub-header,
  html[data-glass="on"][data-app-theme="light"] .dash-hub-insights,
  html[data-glass="on"][data-app-theme="light"] .dash-hub-leaderboard,
  html[data-glass="on"][data-app-theme="light"] .hero-card,
  html[data-glass="on"][data-app-theme="light"] .gl-division-card,
  html[data-glass="on"][data-app-theme="light"] .kpi-pill {
    background-color: rgba(255, 255, 255, 0.85);
  }
}

/* Settings toggle - same DNA as .settings-sounds-toggle. */

.settings-glass-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}








/* --- v41.99.3: hide message action row + turn dividers ------------------
   Branson asked to remove the copy/regenerate icons and the divider line
   between chat turns. We keep the JS renderer intact (it still writes the
   row into the DOM, and the shortcuts still copy text), but hide the row
   visually everywhere and strip any lingering top/bottom borders that
   separated one turn from the next.
------------------------------------------------------------------------- */
.gl-msg-actions,
.msg-bubble.msg-assistant .gl-msg-actions {
  display: none !important;
}
.msg-bubble,
.msg-bubble.msg-assistant,
.msg-bubble.msg-user {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.msg-bubble + .msg-bubble,
.msg-assistant + .msg-user,
.msg-user + .msg-assistant {
  border-top: 0 !important;
  box-shadow: none;
}
/* --- end v41.99.3 --- */

/* ============================================================ */
/* v41.99.11 Deliverable 3: Claude-style hybrid thinking widget */
/* Extends existing .ai-thinking shell; never replaces it.      */
/* Colors: Totaly-blue #2196F3 icon + checks. Gray current line.*/
/* ============================================================ */
.ai-think-v2 {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, #666);
}
.ai-think-v2 .ai-icon-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #2196F3;
  animation: ai-icon-spinner-kf 0.9s linear infinite;
}
.ai-think-v2 .ai-icon-spinner--done {
  animation: none;
  color: #2196F3;
}
@keyframes ai-icon-spinner-kf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ai-think-v2 .ai-step-current {
  color: var(--text-secondary, #666);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-think-v2 .ai-step-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text-tertiary, #999);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-think-v2 .ai-step-toggle:hover {
  color: var(--text-primary, #1a1a1a);
}
.ai-think-v2 .ai-step-toggle[aria-expanded="true"] .ai-step-chev {
  transform: rotate(90deg);
}
.ai-think-v2 .ai-step-chev {
  display: inline-block;
  transition: transform 120ms ease;
  font-size: 14px;
}
.ai-think-v2 .ai-step-list {
  grid-column: 1 / -1;
  margin: 4px 0 0 0;
  padding: 6px 0 6px 4px;
  list-style: none;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-think-v2 .ai-step-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: center;
  color: var(--text-primary, #1a1a1a);
  font-size: 13px;
}
.ai-think-v2 .ai-step-check {
  color: #2196F3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.ai-think-v2 .ai-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-think-v2--collapsed .ai-step-current {
  color: var(--text-tertiary, #999);
}
/* --- end v41.99.11 D3 --- */

/* --- v41.99.11 D5: sign-in polish (mark styles live at end of file) --- */
.auth-logo.auth-logo--beaded { display: flex; justify-content: center; margin-bottom: 12px; }
.auth-logo.auth-logo--beaded img { width: 72px; height: 72px; display: block; }
.auth-card--glass .auth-logo.auth-logo--beaded img { width: 56px; height: 56px; }
/* --- end v41.99.11 D5 --- */

/* ================================================================
   v41.99.12 D1: Neutral palette on Messages + Predictions
   Reserves Totaly-blue (#2196F3) for primary actions only.
   Kills blue tints, red pill backgrounds, turquoise Send button.
   ================================================================ */

/* --- pred-el-chips container: kill blue tint from [class*="chip"] --- */



/* --- Messages: msg-chip-row: kill blue tint background/gradient --- */
html body .msg-chip-row {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- Messages: msg-status-bar: no top blue fade --- */
html body .msg-status-bar {
  background-image: none !important;
}
html[data-app-theme="dark"] body .msg-status-bar {
  background: #1F2121 !important;
  background-image: none !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* --- Messages: SPEED REPLY row + badge: no red pill, no red bg --- */
html body .msg-speed-reply-row {
  background: transparent !important;
  border-bottom: 1px solid #2a2a2a !important;
}
html[data-app-theme="dark"] body .msg-speed-reply-row {
  background: transparent !important;
  border-bottom-color: #2a2a2a !important;
}
html body .msg-speed-reply-badge {
  background: transparent !important;
  color: #dc2626 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
html body .msg-speed-reply-badge::after {
  content: " ·";
  color: var(--text-tertiary, #6b7280);
  margin-left: 4px;
  font-weight: 400;
}

/* --- Messages: Send button (Speed-reply row + composer): Totaly-blue primary --- */
html body .msg-speed-reply-send {
  background: #2196F3 !important;
  color: #ffffff !important;
  border: 0 !important;
}
html body .msg-speed-reply-send:hover {
  background: #1976D2 !important;
}

/* --- Messages: customer/thread row: no blue tint --- */
html[data-app-theme="dark"] body .msg-thread-row.is-active {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* --- Messages: filter tab active state: neutral, no blue wash --- */
html[data-app-theme="dark"] body .msg-filter-tab.is-active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e5e7eb !important;
}

/* --- end v41.99.12 D1 --- */

/* ================================================================
   v41.99.12 D2: Neutral palette on Speed-to-Lead Builder
   Kill blue-tinted panels, blue borders, blue focus tints.
   Reserve Totaly-blue for primary actions (Save stage, Save
   template buttons, approved checkbox, toggle-on state).
   ================================================================ */

/* --- Banner: kill dry-run blue tint (use neutral panel) --- */
html body .stl-banner-dryrun {
  border-color: #2a2a2a !important;
  background: #141414 !important;
}
html body .stl-banner-live {
  border-color: #2a2a2a !important;
  background: #141414 !important;
}
html body .stl-banner-paused {
  border-color: #2a2a2a !important;
  background: #141414 !important;
}
/* LIVE banner title gets a small green dot + neutral text */
html body .stl-banner.stl-banner-live .stl-banner-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- KPI cards: already neutral, force it --- */
html body .stl-kpi {
  border: 1px solid #2a2a2a !important;
  background: #141414 !important;
}

/* --- Meta block: neutral --- */
html body .stl-meta {
  border: 1px solid #2a2a2a !important;
  background: #141414 !important;
}

/* --- Stage cards: neutral --- */
html body .stl-stage {
  border: 1px solid #2a2a2a !important;
  background: #1a1a1a !important;
}

/* --- Stage approval label: text-only, muted --- */
html body .stl-stage-approval.is-approved {
  background: transparent !important;
  color: #16a34a !important;
  padding: 3px 0 !important;
}
html body .stl-stage-approval.is-unapproved {
  background: transparent !important;
  color: var(--text-tertiary, #9ca3af) !important;
  padding: 3px 0 !important;
}

/* --- Message body textarea: dark gray, no blue focus tint --- */
html body .stl-stage-body {
  border: 1px solid #2a2a2a !important;
  background: #0f0f0f !important;
}
html body .stl-stage-body:focus {
  outline: none !important;
  border-color: #3a3a3a !important;
  background: #0f0f0f !important;
}

/* --- Number inputs: dark gray, neutral border --- */
html body .stl-stage-num {
  border: 1px solid #2a2a2a !important;
  background: #0f0f0f !important;
}
html body .stl-stage-num:focus {
  outline: none !important;
  border-color: #3a3a3a !important;
}

/* --- Preview bubble: kill blue tint, use neutral card --- */
html body .stl-stage-preview-wrap {
  background: #141414 !important;
  border: 1px dashed #2a2a2a !important;
}
html body .stl-stage-preview-bubble {
  background: #1f1f1f !important;
  color: inherit !important;
}

/* --- Save stage button: Totaly-blue primary --- */
html body .stl-stage-save {
  background: #2196F3 !important;
  border: 1px solid #2196F3 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body .stl-stage-save:hover {
  background: #1976D2 !important;
  border-color: #1976D2 !important;
}

/* --- Template textareas in the Automations-card variant --- */
html body .stl-template-textarea {
  border: 1px solid #2a2a2a !important;
  background: #0f0f0f !important;
}
html body .stl-template-textarea:focus {
  border-color: #3a3a3a !important;
  outline: none !important;
}

/* --- Save 24hr / 72hr template buttons: Totaly-blue when they're
       the primary action inside the template-actions row. .btn-ghost--sm
       remains the base class, so scope by container. --- */
html body .stl-template-actions .btn-ghost {
  background: #2196F3 !important;
  border: 1px solid #2196F3 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body .stl-template-actions .btn-ghost:hover {
  background: #1976D2 !important;
  border-color: #1976D2 !important;
}

/* --- Approve-all button: keep green (semantic) but toned --- */
html body .stl-approve-all {
  border-color: #2a2a2a !important;
  background: #141414 !important;
  color: #16a34a !important;
}
html body .stl-approve-all:hover {
  background: #1a1a1a !important;
}

/* --- Queue card: neutral --- */
html body .stl-queue {
  border: 1px solid #2a2a2a !important;
  background: #141414 !important;
}
html body .stl-queue-row {
  border: 1px solid #2a2a2a !important;
  background: #1a1a1a !important;
}
html body .stl-controls {
  border: 1px solid #2a2a2a !important;
  background: #141414 !important;
}

/* --- SPEED TO LEAD [LIVE] header pill on the Automations card:
       small green dot + neutral text, no blue outline --- */



/* --- end v41.99.12 D2 --- */

/* --- v41.99.12 D3: Speed-to-Lead dashboard chart + lists --- */
.s2l-chart {
  width: 100%;
  min-height: 320px;
  display: block;
}
.s2l-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.s2l-chart-line-sent    { stroke: #2196F3; }
.s2l-chart-line-replied { stroke: #9ca3af; }
.s2l-chart-grid {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.s2l-chart-label {
  fill: #6b7280;
  font-size: 11px;
  font-family: inherit;
}
.s2l-reasons-list,
.s2l-replies-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.s2l-reason-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
  color: #d1d5db;
}
.s2l-reply-item {
  display: flex;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.s2l-reply-name {
  color: #d1d5db;
  font-weight: 500;
}
.s2l-reply-time {
  color: #6b7280;
  font-size: 11px;
}
.s2l-reply-text {
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .s2l-chart { min-height: 240px; }
}
/* --- end v41.99.12 D3 --- */

/* --- v41.99.12 D4: Automations v2 --- */
.auto-v2-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.auto-v2-title,
.auto-v2-sub {
  display: none;
}
.auto-v2-new-btn {
  white-space: nowrap;
}
.auto-v2-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auto-v2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.auto-v2-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #f0f2f5);
}
.auto-v2-card-kind {
  color: var(--text-tertiary, #9ca3af);
  font-size: 12px;
  margin-top: 2px;
}
.auto-v2-card-status {
  font-size: 12px;
  color: var(--text-secondary, #d1d5db);
  white-space: nowrap;
}
.auto-v2-card-desc {
  font-size: 13px;
  color: var(--text-secondary, #d1d5db);
}
.auto-v2-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 8px;
  flex-wrap: wrap;
}
.auto-v2-card-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.auto-v2-empty {
  grid-column: 1 / -1;
}
.auto-v2-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.auto-v2-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.auto-v2-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.auto-v2-form label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 10px;
}
.auto-v2-form input[type="text"],
.auto-v2-form input[type="email"],
.auto-v2-form input[type="number"],
.auto-v2-form select,
.auto-v2-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-primary, #f0f2f5);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.auto-v2-form input:focus,
.auto-v2-form select:focus,
.auto-v2-form textarea:focus {
  outline: none;
  border-color: var(--accent, #2196F3);
}
.auto-v2-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.auto-v2-form-error {
  margin-top: 8px;
  color: #dc2626;
  font-size: 12px;
  min-height: 16px;
}
@media (max-width: 820px) {
  .auto-v2-toolbar { flex-direction: column; align-items: stretch; }
  .auto-v2-new-btn { width: 100%; }
}
/* --- end v41.99.12 D4 --- */

/* --- v41.99.13 Connectors page --- */





.connectors-category-chip.active { border-color: #2196F3; color: #2196F3; }
















.connector-modal h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; }
.connector-modal p { margin: 0 0 16px 0; color: var(--text-secondary); font-size: 13px; }





@media (max-width: 820px) {
  
  
}
/* --- end v41.99.13 --- */

/* --- v41.99.14 dashboards hardening --- */




/* Superset embed shortcut */
.superset-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #2a2a2a;
}
.superset-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.superset-tab.active { color: #2196F3; border-bottom-color: #2196F3; }
.superset-embed {
  width: 100%;
  height: 800px;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
}
.superset-config-form { max-width: 640px; }
.superset-config-form label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}
.superset-config-form input {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text-primary);
}
.superset-dashboards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.superset-dashboard-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}
.superset-empty-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 640px;
}
.superset-empty-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--text-primary); }
.superset-empty-card p { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.superset-primary-btn {
  padding: 8px 16px;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.superset-primary-btn:hover { background: #1976D2; }
.superset-primary-btn.secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
/* --- end v41.99.14 --- */

/* ═══════════════════════════════════════════════════════════════════
   v41.99.17 — Lead campaign refactor
   1. Kill blue borders/tints on the builder (now called "Lead campaign")
   2. Tabs-above layout inside Messages
   3. Inline editable meta fields
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Neutralize blue on Lead campaign panel ────────────────────── */
/* Banner: was tinted blue (dryrun) / green (live) / red (paused).
   Now: single flat neutral glass surface with a small status chip. */
html body .stl-builder .stl-banner,
html body .stl-builder .stl-banner-dryrun,
html body .stl-builder .stl-banner-live,
html body .stl-builder .stl-banner-paused {
  border: 1px solid rgba(15,23,42,0.08) !important;
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
html[data-app-theme="dark"] body .stl-builder .stl-banner,
html[data-app-theme="dark"] body .stl-builder .stl-banner-dryrun,
html[data-app-theme="dark"] body .stl-builder .stl-banner-live,
html[data-app-theme="dark"] body .stl-builder .stl-banner-paused {
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(15,23,42,0.55) !important;
}
/* Small status chip inside the banner (added by JS) replaces color-coded backgrounds */
html body .lcp-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-left: 10px;
  vertical-align: middle;
}
html body .lcp-status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
html body .lcp-status-dryrun { color: #6E7681; background: rgba(110,118,129,0.14); }
html body .lcp-status-live   { color: #16a34a; background: rgba(22,163,74,0.10); }
html body .lcp-status-paused { color: #b45309; background: rgba(180,83,9,0.10); }

/* KPI cards — kill any blue overlay */
html body .stl-builder .stl-kpi {
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
html[data-app-theme="dark"] body .stl-builder .stl-kpi {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.55);
}

/* Meta card — was a plain block, now neutral glass */
html body .stl-builder .stl-meta {
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 20px 16px;
}
html[data-app-theme="dark"] body .stl-builder .stl-meta {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.55);
}

/* Stage cards — same neutral glass */
html body .stl-builder .stl-stage {
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
html[data-app-theme="dark"] body .stl-builder .stl-stage {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(15,23,42,0.42);
}

/* Textarea focus state: use neutral grey instead of blue */
html body .stl-builder .stl-stage-body:focus {
  outline: none;
  border-color: rgba(15,23,42,0.30) !important;
  background: rgba(255,255,255,0.75) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.06);
}
html[data-app-theme="dark"] body .stl-builder .stl-stage-body:focus {
  border-color: rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* Save button — neutral, only turns blue on hover to signal primary action */
html body .stl-builder .stl-stage-save {
  border-color: rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.62);
  color: var(--text-primary, #1a1a1a);
}
html body .stl-builder .stl-stage-save:hover {
  border-color: rgba(33,150,243,0.34);
  background: rgba(33,150,243,0.10);
  color: #2196F3;
}
html[data-app-theme="dark"] body .stl-builder .stl-stage-save {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}

/* Queue + controls same treatment */
html body .stl-builder .stl-queue,
html body .stl-builder .stl-controls {
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
html[data-app-theme="dark"] body .stl-builder .stl-queue,
html[data-app-theme="dark"] body .stl-builder .stl-controls {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.55);
}

/* ── 2. Tab strip below Messages status bar ─────────────────────────
   Must flex-shrink:0 — overflow-x:auto zeroes the automatic min-size and
   used to crush this bar to ~13px when it sat above the status strip. */
html body .msg-view {
  gap: 0 !important;
}
html body .msg-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 20px 0;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  background: #1F2121;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}
html body .msg-tabs-bar::-webkit-scrollbar { display: none; }
html[data-app-theme="dark"] body .msg-tabs-bar {
  border-bottom-color: rgba(255,255,255,0.06);
  background: #1F2121;
}
html[data-app-theme="light"] body .msg-tabs-bar {
  background: #FFF;
  border-bottom-color: rgba(0,0,0,0.08);
}

html body .msg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #666);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
html body .msg-tab:hover {
  color: var(--text-primary, #1a1a1a);
  background: rgba(15,23,42,0.04);
}
html[data-app-theme="dark"] body .msg-tab { color: rgba(200,201,204,0.65); }
html[data-app-theme="dark"] body .msg-tab:hover { color: #f5f5f7; background: rgba(255,255,255,0.04); }

html body .msg-tab.is-active {
  color: #2196F3;
  border-bottom-color: #2196F3;
}

html body .msg-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: currentColor;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  margin-left: 2px;
}
html body .msg-tab-close:hover { opacity: 1; background: rgba(15,23,42,0.10); }

html body .msg-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed rgba(15,23,42,0.20);
  background: transparent;
  color: var(--text-secondary, #666);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  margin-left: 8px;
  margin-bottom: 4px;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
html body .msg-tab-add:hover {
  border-color: #2196F3;
  color: #2196F3;
  background: rgba(33,150,243,0.06);
}
html[data-app-theme="dark"] body .msg-tab-add { border-color: rgba(255,255,255,0.18); color: rgba(200,201,204,0.65); }

/* ── 3. Inline-editable meta fields ────────────────────────────────── */
html body .lcp-meta-input,
html body .lcp-meta-select,
html body .lcp-meta-num {
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  min-width: 120px;
  text-align: right;
  transition: border-color 120ms ease, background 120ms ease;
}
html body .lcp-meta-input:hover,
html body .lcp-meta-select:hover,
html body .lcp-meta-num:hover {
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.02);
}
html body .lcp-meta-input:focus,
html body .lcp-meta-select:focus,
html body .lcp-meta-num:focus {
  outline: none;
  border-color: rgba(15,23,42,0.30);
  background: rgba(255,255,255,0.75);
}
html[data-app-theme="dark"] body .lcp-meta-input:hover,
html[data-app-theme="dark"] body .lcp-meta-select:hover,
html[data-app-theme="dark"] body .lcp-meta-num:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
html[data-app-theme="dark"] body .lcp-meta-input:focus,
html[data-app-theme="dark"] body .lcp-meta-select:focus,
html[data-app-theme="dark"] body .lcp-meta-num:focus { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.06); }
html body .lcp-meta-num { min-width: 80px; }

/* Meta-row status when a save is in flight or just saved */
html body .lcp-meta-savestatus {
  font-size: 11px;
  color: rgba(15,23,42,0.55);
  margin-left: 8px;
  min-width: 60px;
  display: inline-block;
}
html[data-app-theme="dark"] body .lcp-meta-savestatus { color: rgba(200,201,204,0.55); }

/* Delete-campaign button (top-right of the panel) */
html body .lcp-delete-btn {
  padding: 6px 12px;
  border: 1px solid rgba(15,23,42,0.14);
  background: transparent;
  color: var(--text-secondary, #666);
  font: inherit;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}
html body .lcp-delete-btn:hover {
  color: #b91c1c;
  border-color: rgba(185,28,28,0.35);
  background: rgba(185,28,28,0.06);
}
html[data-app-theme="dark"] body .lcp-delete-btn { border-color: rgba(255,255,255,0.14); color: rgba(200,201,204,0.65); }

/* Mobile: tab strip stays scrollable, cards go full-width */
@media (max-width: 820px) {
  html body .msg-tabs-bar { padding: 8px 12px 0; }
  html body .msg-tab { padding: 8px 10px 10px; font-size: 12px; }
  html body .stl-builder .stl-meta { margin: 0 12px 12px; }
  html body .stl-builder .stl-kpi-row,
  html body .stl-builder .stl-stages { padding: 0 12px !important; }
}
/* ── Hood: Mapbox GL marker system (v41.99.16) ─────────────────────────────
   Every hood marker root is a BARE, ZERO-SIZE .pinwrap. Mapbox owns the
   element transform, so the root carries no transform of its own; children do
   their own anchoring with translate(). Do not add width/height/transform to
   .pinwrap itself. */
.pinwrap { position: absolute; width: 0; height: 0; }
.pinwrap > * { pointer-events: auto; }

/* Teardrops and drop-pins point at the address: tip on the coordinate. */



/* ── Hood: door pin (v42.1) ────────────────────────────────────────────────
   Per spec: colored status ring, glass interior, white knock count. The count
   is always rendered, including "1" — a rep needs to read effort at a glance,
   and hiding the first knock made a knocked door look untouched. */
.pinwrap .doorpin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--dc, #6B7280);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px) saturate(1.25);
  backdrop-filter: blur(6px) saturate(1.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* never_knock is near-black; lift its ring so it reads against dark imagery. */
.pinwrap .doorpin[data-status="never_knock"] {
  border-color: #0A0C0B;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.pinwrap .doorpin.is-movein { border-color: #F97316; }




/* Mapbox chrome, toned down to match the dark hood shell. */




/* ═══════════════════════════════════════════════════════════════════
   v41.99.18 / v42.6.18 — Lead campaign stage editor
   `[class*="tag"]` matches "stage" and painted chip-bg. Do NOT wipe
   all descendants to transparent — that hollowed compose cards, phone
   bezels, and wait inputs. Stage root stays transparent; intentional
   fills live in surfaces/messages.css.
   ═══════════════════════════════════════════════════════════════════ */
html body .stl-builder .stl-stage {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* --- end v41.99.18 / v42.6.18 --- */
/* ── Hood: Door Page (v42.1) ───────────────────────────────────────────────
   Full-screen page opened by a long-press on a house or a tap on a door pin.
   Door-status vocabulary + knock counter. Brand blue only, no purple. */
.doorpage {
  position: fixed; inset: 0; z-index: 4200;
  display: flex; flex-direction: column;
  background: #0b0e0d; color: #f2f5f4;
  overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.doorpage.is-open { opacity: 1; transform: none; }
.doorpage[hidden] { display: none; }
body.doorpage-open { overflow: hidden; }
.doorpage-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.10), rgba(33, 150, 243, 0));
}
.doorpage-back {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: none; color: #f2f5f4; cursor: pointer;
}
.doorpage-back:active { background: rgba(255, 255, 255, 0.14); }
.doorpage-addr { flex: 1 1 auto; min-width: 0; }
.doorpage-street {
  font-size: 22px; font-weight: 700; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doorpage-sub { font-size: 13px; color: #9aa3a0; margin-top: 2px; }
.doorpage-pin {
  flex: 0 0 auto; position: relative; width: 26px; height: 26px;
}
/* Same glyph as the map marker — mirrors `.pinwrap .doorpin` exactly, declared
   separately so the Mapbox marker rules are left untouched. */
.doorpage-pin .doorpin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--dc, #6B7280);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px) saturate(1.25);
  backdrop-filter: blur(6px) saturate(1.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.doorpage-pin .doorpin[data-status="never_knock"] {
  border-color: #0A0C0B;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.doorpage-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.doorpage-section { margin-bottom: 22px; }
.doorpage-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7f8a87; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.doorpage-save-state { font-size: 10px; letter-spacing: 0.04em; color: #7f8a87; text-transform: none; }
.doorpage-save-state.is-ok { color: #22C55E; }
.doorpage-save-state.is-bad { color: #EF4444; }
.doorpage-kv {
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); overflow: hidden;
}
.doorpage-kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.doorpage-kv-row:last-child { border-bottom: none; }
.doorpage-kv-key { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; color: #7f8a87; }
.doorpage-kv-val { font-size: 14px; font-weight: 600; text-align: right; }
/* Snap-to-center status scroller. */
.doorpage-statuses {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 6px 40%; margin: 0 -16px; scrollbar-width: none;
}
.doorpage-statuses::-webkit-scrollbar { display: none; }
.doorstatus {
  flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 104px; padding: 14px 12px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--dc, #6B7280);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  color: #f2f5f4; opacity: 0.42;
  transform: scale(0.92);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.doorstatus.is-active {
  opacity: 1; transform: scale(1.06);
  background: color-mix(in srgb, var(--dc, #6B7280) 22%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px var(--dc, #6B7280), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.doorstatus-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--dc, #6B7280);
  background: rgba(255, 255, 255, 0.14);
}
.doorstatus.is-active .doorstatus-dot { background: var(--dc, #6B7280); }
.doorstatus-label { font-size: 12px; font-weight: 600; white-space: nowrap; }
.doorpage-knock {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 14px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03);
}
.doorpage-knock-btn {
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  font-size: 26px; font-weight: 700; line-height: 1;
  color: #f2f5f4; background: rgba(33, 150, 243, 0.16);
  border: 1px solid rgba(33, 150, 243, 0.45);
}
.doorpage-knock-btn:active { background: rgba(33, 150, 243, 0.34); }
.doorpage-knock-btn:disabled { opacity: 0.35; cursor: default; }
.doorpage-knock-n { font-size: 44px; font-weight: 800; min-width: 76px; text-align: center; }
.doorpage-notes {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 12px; border-radius: 12px; font: inherit; font-size: 14px;
  color: #f2f5f4; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.doorpage-notes:focus { outline: none; border-color: #2196F3; }
.doorpage-secondary {
  width: 100%; padding: 13px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #2196F3;
  background: rgba(33, 150, 243, 0.10); border: 1px solid rgba(33, 150, 243, 0.35);
}
.doorpage-secondary:active { background: rgba(33, 150, 243, 0.22); }
/* The pin modal must sit above the page it is launched from. */
#hood-pin-modal { z-index: 4300; }

/* Connector composer: scoped to the reusable Ask/dashboard/floating input.
   Keep source selection distinct from connection and chat availability. */
html body .rich-composer { position: relative; }
html body .rich-composer .rc-connector-chips[hidden],
html body .rich-composer .rc-connector-panel[hidden] { display: none !important; }
html body .rich-composer .rc-connector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 8px;
  min-width: 0;
}
html body .rich-composer .rc-connector-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid #2196F3;
  border-radius: 14px;
  padding: 2px 4px 2px 10px;
  color: #90CAF9;
  background: rgba(33, 150, 243, .12);
  font: 500 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html body .rich-composer .rc-connector-chip > span { overflow-wrap: anywhere; }
html body .rich-composer .rc-connector-chip button,
html body .rich-composer .rc-connector-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: inherit;
  font: 20px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}
html body .rich-composer .rc-connector-panel {
  --rc-cn-text: #EAECEC;
  --rc-cn-muted: #B4B8B8;
  --rc-cn-surface: var(--bg-card, #1F2121);
  --rc-cn-hover: rgba(33, 150, 243, .14);
  position: absolute;
  z-index: 240;
  inset-inline: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-height: var(--rc-connector-panel-height, 420px);
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(234, 236, 236, .18);
  border-radius: 16px;
  background: var(--rc-cn-surface);
  color: var(--rc-cn-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  text-align: left;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  overscroll-behavior: contain;
}
html body .rich-composer .rc-connector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  flex-shrink: 0;
}
html body .rich-composer .rc-connector-head strong { font-weight: 600; }
html body .rich-composer .rc-connector-help,
html body .rich-composer .rc-connector-count,
html body .rich-composer .rc-connector-status,
html body .rich-composer .rc-connector-notice,
html body .rich-composer .rc-connector-details p {
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--rc-cn-muted);
  overflow-wrap: anywhere;
  flex-shrink: 0;
}
html body .rich-composer .rc-connector-status[hidden],
html body .rich-composer .rc-connector-notice[hidden] { display: none; }
html body .rich-composer .rc-connector-search {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(176, 190, 197, .4);
  border-radius: 8px;
  background: transparent;
  color: var(--rc-cn-text);
  font: inherit;
}
html body .rich-composer .rc-connector-search::placeholder { color: var(--rc-cn-muted); }
html body .rich-composer .rc-connector-results {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
html body .rich-composer .rc-connector-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 240px;
  gap: 2px;
  min-height: 44px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2196F3 transparent;
  scrollbar-gutter: stable;
  scroll-padding-block: 2px;
}
html body .rich-composer .rc-connector-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--rc-cn-text);
  text-align: left;
  white-space: normal;
  font: inherit;
  cursor: pointer;
}
html body .rich-composer .rc-connector-option:hover,
html body .rich-composer .rc-connector-option.is-active { background: var(--rc-cn-hover); }
html body .rich-composer .rc-connector-option.is-active { border-color: #2196F3; }
html body .rich-composer .rc-connector-option[aria-selected="true"] {
  border-color: #2196F3;
  background: rgba(33, 150, 243, .1);
}
html body .rich-composer .rc-connector-option[aria-disabled="true"] { cursor: not-allowed; }
html body .rich-composer .rc-connector-option-title {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: space-between;
  font-weight: 600;
  overflow-wrap: anywhere;
}
html body .rich-composer .rc-connector-mention,
html body .rich-composer .rc-connector-select-label { color: #90CAF9; font-size: 12px; font-weight: 500; }
html body .rich-composer .rc-connector-meta,
html body .rich-composer .rc-connector-availability { color: var(--rc-cn-muted); font-size: 12px; overflow-wrap: anywhere; }
html body .rich-composer .rc-connector-meta { display: flex; justify-content: space-between; gap: 8px; }
html body .rich-composer .rc-connector-details {
  flex-shrink: 0;
  border-top: 1px solid rgba(176, 190, 197, .25);
  margin-top: 8px;
  padding-top: 8px;
  max-height: 104px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body .rich-composer .rc-connector-action,
html body .rich-composer .rc-connector-refresh {
  min-height: 36px;
  border-radius: 8px;
  padding: 6px 10px;
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}
html body .rich-composer .rc-connector-action { border: 1px solid #2196F3; background: rgba(33, 150, 243, .12); color: #90CAF9; }
html body .rich-composer .rc-connector-refresh { margin-inline-start: 6px; border: 0; background: transparent; color: var(--rc-cn-muted); }
html body .rich-composer .rc-connector-action:disabled,
html body .rich-composer .rc-connector-refresh:disabled { opacity: .6; cursor: not-allowed; }
html body .rich-composer .rc-connector-error { color: #FFAB91; margin: 8px 0; font-size: 12px; }
html body .rich-composer .rc-connector-skeleton { height: 40px; margin: 6px 0; opacity: .35; }
html body .rich-composer .rc-connector-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html body .rich-composer .rc-connector-panel button:focus-visible,
html body .rich-composer .rc-connector-search:focus-visible,
html body .rich-composer .rc-connector-chip button:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
/* The keyboard may leave only a short visible viewport. Keep the search,
   options and actions reachable; remove only repeated explanatory copy. */
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-help,
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-count,
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-details p { display: none; }
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-status,
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-notice {
  max-height: 36px;
  overflow-y: auto;
  margin: 2px 0 4px;
}
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-details {
  display: flex;
  align-items: center;
  gap: 4px;
  max-height: 52px;
  margin-top: 4px;
  padding-top: 4px;
  overflow-x: auto;
  overflow-y: hidden;
}
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-details button { flex-shrink: 0; }
html body .rich-composer .rc-connector-panel.is-compact .rc-connector-refresh { margin-inline-start: 0; }
html[data-app-theme="light"] body .rich-composer .rc-connector-panel,
html[data-app-theme="og"] body .rich-composer .rc-connector-panel {
  --rc-cn-text: #1a1a1a;
  --rc-cn-muted: #555;
  --rc-cn-surface: #fff;
  --rc-cn-hover: rgba(33, 150, 243, .08);
}
html[data-app-theme="light"] body .rich-composer .rc-connector-chip,
html[data-app-theme="og"] body .rich-composer .rc-connector-chip { color: #1565C0; background: #E3F2FD; }
html[data-app-theme="light"] body .rich-composer .rc-connector-panel .rc-connector-mention,
html[data-app-theme="light"] body .rich-composer .rc-connector-panel .rc-connector-select-label,
html[data-app-theme="light"] body .rich-composer .rc-connector-panel .rc-connector-action,
html[data-app-theme="og"] body .rich-composer .rc-connector-panel .rc-connector-mention,
html[data-app-theme="og"] body .rich-composer .rc-connector-panel .rc-connector-select-label,
html[data-app-theme="og"] body .rich-composer .rc-connector-panel .rc-connector-action { color: #1565C0; }
html[data-app-theme="light"] body .rich-composer .rc-connector-error,
html[data-app-theme="og"] body .rich-composer .rc-connector-error { color: #B71C1C; }
html body .floating-chat-composer > .rich-composer { box-sizing: border-box; width: 100%; }
@media (max-width: 820px) {
  html body .rich-composer .rc-connector-panel { padding: 10px; border-radius: 12px; max-width: 100%; }
  html body .rich-composer .rc-connector-search { font-size: 16px; }
  html body .rich-composer .rc-connector-chip button,
  html body .rich-composer .rc-connector-head button { min-height: 36px; height: 36px; min-width: 36px; width: 36px; }
  html body .rich-composer .rc-connector-action,
  html body .rich-composer .rc-connector-refresh { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .rich-composer .rc-connector-skeleton { animation: none; }
}

/* Native composer controls.
   Scope includes the real composer IDs to outrank legacy #main/mobile-v2 rules
   loaded AFTER this file. [data-cid] also supports other shared composer IDs.
   Keep this repair here, not in another asset or an inline style injector. */
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-toolbar {
  /* A narrow desktop card must wrap groups, not shrink a group below its
     unshrinkable buttons and paint those buttons over the next group. */
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) :is(.rc-left, .rc-right) {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* Groups size to their contents, but wrap internally if an embedded desktop
     panel is narrower than one group. Mobile row rules remain below. */
  flex-wrap: wrap !important;
}
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-send-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  margin-left: auto !important;
}
html body .rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-model-select--hidden {
  display: none !important;
}
html body .rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-mode {
  display: block !important;
  position: static !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-mode-select {
  /* The select owns the ONLY visible mode border. The OS owns its popup. */
  appearance: auto !important;
  -webkit-appearance: auto !important;
  display: block !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 148px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--border, #3A3A3A) !important;
  border-radius: 22px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: 500 16px/normal -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  cursor: pointer;
}
html body .rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-mode-select:focus-visible,
html body .rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-plus-native-wrap:focus-within {
  outline: 2px solid #2196F3 !important;
  outline-offset: 2px !important;
}
/* Add uses the same native select on desktop and mobile. Only this wrapper
   paints its border; the transparent native select receives pointer/keyboard
   input directly. Keep the legacy button/menu hidden for repaired composers. */
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-plus-wrap {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) :is(.rc-plus-btn, .rc-plus-menu) {
  display: none !important;
}
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-plus-native-wrap {
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border, #3A3A3A) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
}
html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-plus-native {
  /* The real select, not a button proxy, receives the user's tap directly.
     Opacity affects only the closed control; no custom OS menu is drawn. */
  appearance: auto !important;
  -webkit-appearance: auto !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  font-size: 16px !important;
  cursor: pointer;
}
@media (max-width: 820px) {
  /* Two intentional rows beat cramming six 44px targets into one row.
     The mode row may wrap to a third row in especially narrow cards.
     Keep mode, Add, model, Web, mic and Send reachable while typing/in-thread. */
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 720px !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    transform: none !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) :is(.rc-left, .rc-right) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) :is(.rc-chip, .rc-mic, .rc-send) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) :is(.rc-mic, .rc-send) {
    flex: 0 0 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-chip--model {
    flex: 0 1 auto !important;
    min-width: 44px !important;
    max-width: 148px !important;
    overflow: hidden !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-chip-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-mode {
    flex: 1 0 148px !important;
    min-width: 148px !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-right {
    /* Keep mic and Send together if Orchestrator cannot fit beside them.
       Wrapping follows the card's available width, not a second breakpoint. */
    flex-wrap: wrap !important;
  }
  html body .rich-composer.rc-controls-native[data-cid]:is(#ask-composer, #dashboard-composer, #floating-chat-composer, [data-cid]) .rc-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
}
/* ── Winback call attempt logger (v42.5) ──────────────────────────────────
   Phone twin of the door-knock try popup. Outcome colours are semantic, not
   decorative: green means progress was made, amber means try again, red means
   stop. Never purple. */

.wb-try-wrap { display: flex; align-items: center; gap: 6px; }

/* Used for rows with no customer id, where there is nothing to log against. */
.pred-detail-muted { opacity: .45; }

.wb-try-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(148, 163, 184, 0.10);
  color: var(--text-1, #e8eef7);
  font: inherit; font-size: 12px; line-height: 1.5;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.wb-try-btn:hover  { background: rgba(33, 150, 243, 0.16); border-color: rgba(33, 150, 243, 0.55); }
.wb-try-btn:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }

.wb-try-n {
  font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0 5px; border-radius: 999px;
  background: rgba(33, 150, 243, 0.22); color: #7cc4fb;
}
.wb-try-when { opacity: .62; font-size: 11px; }
.wb-try-cb {
  font-size: 11px; color: #f0b429; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wb-try-btn--gave_pitch     { border-color: rgba(52, 199, 123, .55); background: rgba(52, 199, 123, .14); }
.wb-try-btn--made_sale      { border-color: rgba(16, 185, 129, .7);  background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.wb-try-btn--callback       { border-color: rgba(240, 180, 41, .55); background: rgba(240, 180, 41, .14); }
.wb-try-btn--no_answer      { border-color: rgba(148, 163, 184, .5);  background: rgba(148, 163, 184, .13); }
.wb-try-btn--not_interested { border-color: rgba(239, 100, 97, .5);  background: rgba(239, 100, 97, .12); }
.wb-try-btn--never_call     { border-color: rgba(239, 68, 68, .65);  background: rgba(239, 68, 68, .18); }

/* Popup ----------------------------------------------------------------- */
.wb-log-popup {
  position: fixed; z-index: 9000; width: 272px;
  padding: 12px; border-radius: 14px;
  background: var(--surface-2, #131a24);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .46);
}
.wb-log-title {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  opacity: .62; margin-bottom: 9px;
}
.wb-log-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.wb-log-opt {
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.09);
  color: var(--text-1, #e8eef7);
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.wb-log-opt:hover { background: rgba(33, 150, 243, 0.18); border-color: rgba(33, 150, 243, 0.6); }
.wb-log-opt.is-current { border-color: #2196F3; background: rgba(33, 150, 243, 0.22); }
.wb-log-opt--gave_pitch:hover     { background: rgba(52, 199, 123, .2);  border-color: rgba(52, 199, 123, .7); }
.wb-log-opt--made_sale:hover      { background: rgba(16, 185, 129, .22); border-color: rgba(16, 185, 129, .75); }
.wb-log-opt--callback:hover       { background: rgba(240, 180, 41, .2);  border-color: rgba(240, 180, 41, .7); }
.wb-log-opt--not_interested:hover { background: rgba(239, 100, 97, .18); border-color: rgba(239, 100, 97, .65); }
.wb-log-opt--never_call:hover     { background: rgba(239, 68, 68, .22);  border-color: rgba(239, 68, 68, .75); }

.wb-log-cb { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
/* `display` on the class beats the [hidden] attribute, so the callback time
   row showed on open instead of waiting for Callback to be chosen. */
.wb-log-cb[hidden] { display: none; }
.wb-log-cb-label { font-size: 11px; opacity: .66; }
.wb-log-cb-input, .wb-log-note {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(10, 14, 20, 0.55);
  color: var(--text-1, #e8eef7); font: inherit; font-size: 12.5px;
}
.wb-log-note { margin-top: 9px; }
.wb-log-cb-input:focus, .wb-log-note:focus { outline: none; border-color: #2196F3; }
.wb-log-cb-save {
  padding: 7px 10px; border-radius: 8px; border: 1px solid #2196F3;
  background: rgba(33, 150, 243, 0.2); color: #9bd0fb;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.wb-log-cb-save:hover { background: rgba(33, 150, 243, 0.32); }

.wb-log-hist { margin-top: 11px; border-top: 1px solid rgba(148,163,184,.16); padding-top: 9px; }
.wb-log-hist-title {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  opacity: .55; margin-bottom: 6px;
}
.wb-log-hist-row {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 11.5px; padding: 2px 0; min-width: 0;
}
.wb-log-hist-oc { font-weight: 600; white-space: nowrap; }
.wb-log-hist-oc--gave_pitch     { color: #4ade80; }
.wb-log-hist-oc--made_sale      { color: #34d399; }
.wb-log-hist-oc--callback       { color: #f0b429; }
.wb-log-hist-oc--not_interested { color: #f87171; }
.wb-log-hist-oc--never_call     { color: #ef4444; }
.wb-log-hist-oc--no_answer      { color: #94a3b8; }
.wb-log-hist-when { opacity: .55; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-log-hist-note {
  opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}

.wb-supp-toggle {
  margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .12);
  color: #fca5a5; font: inherit; font-size: 11.5px; cursor: pointer;
}
.wb-supp-toggle:hover { background: rgba(239, 68, 68, .2); }

@media (max-width: 820px) {
  .wb-log-popup { width: calc(100vw - 24px); left: 12px !important; }
  .wb-log-grid { grid-template-columns: 1fr 1fr; }
  .wb-try-when { display: none; }
}
/* Company-owned business definitions. Scoped to avoid composer regressions. */
.admin-page { max-width: 920px; margin: 0 auto; padding: 28px 24px 64px; color: var(--text-primary); }
.admin-page h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -0.03em; }
.admin-page h2 { font-size: 15px; margin: 0 0 6px; }
.admin-page p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.admin-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; }
.admin-header { margin: 8px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.admin-header .admin-eyebrow,
.admin-header > h1 { display: none; }
.admin-header--tools { margin: 0 0 16px; }
.admin-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.admin-split article { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface); min-width: 0; }
.admin-notice { min-height: 24px; margin: 0 0 12px; font-size: 13px; color: var(--text-primary); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-person { font-weight: 600; }
.admin-email { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.admin-role-label { display: block; }
.admin-table select { min-height: 44px; min-width: 140px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); padding: 8px 10px; font: inherit; }
.admin-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.admin-subnav-item { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; }
.admin-subnav-item.is-active { background: rgba(33, 150, 243, 0.14); border-color: #2196F3; color: var(--text-primary); }
.bd-page > .admin-subnav { margin-bottom: 8px; }
@media (max-width: 820px) {
  body.route-admin main#main-content { padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important; }
  .admin-page { padding: 16px 16px 48px; }
  .admin-page h1 { font-size: 27px; }
  .admin-split { grid-template-columns: 1fr; }
}

.bd-page { max-width:1400px; margin:0 auto; padding:28px; color:var(--text-primary); font-family:inherit; }
.bd-page * { box-sizing:border-box; }
.bd-header { max-width:820px; margin-bottom:16px; }
.bd-header h1,
.bd-eyebrow { display:none; }
.bd-header p,.bd-layer p,.bd-help,.bd-boundary { color:var(--text-secondary); line-height:1.6; }
.bd-badge { display:inline-block; padding:7px 10px; border-radius:8px; color:#2196F3; background:rgba(33,150,243,.09); font-size:12px; }
.bd-layers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.bd-layer,.bd-editor,.bd-list { border:1px solid var(--border); background:var(--surface); border-radius:12px; }
.bd-layer { padding:16px; text-align:left; white-space:normal; height:auto; }
.bd-page .bd-layer[aria-expanded="true"],.bd-list button[aria-pressed="true"] { border-color:#2196F3; background:color-mix(in srgb,#2196F3 9%,var(--surface)); }
.bd-page button:focus-visible { outline:2px solid #2196F3; outline-offset:3px; }
.bd-layer-detail,.bd-explainer,.bd-recommendations { border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:20px; margin-bottom:20px; }
.bd-layer-detail h3,.bd-recommendations h2 { margin:0 0 10px; }
.bd-layer-detail p,.bd-recommendations p,.bd-explainer p { line-height:1.6; color:var(--text-secondary); overflow-wrap:anywhere; }
.bd-explainer { background:var(--surface-alt); padding:16px; }
.bd-explainer p { margin:8px 0 0; }
.bd-recommendation-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:16px; }
.bd-recommendation-grid article { border:1px solid var(--border); border-radius:10px; padding:16px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.bd-recommendation-grid h3 { font-size:15px; margin:12px 0 0; }
.bd-recommendation-grid button { margin-top:auto; }
.bd-recommendations summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; }
.bd-recommendations summary::marker { color:#2196F3; }
.bd-page .bd-editor,.bd-layer-detail,.bd-preview-section { scroll-margin-top:112px; }
.bd-periods { flex-wrap:wrap; }
.bd-page [data-calculation-result] { line-height:1.6; overflow-wrap:anywhere; }
.bd-layer>span { color:#2196F3; font-size:12px; }
.bd-layer h2 { font-size:14px; margin:10px 0 6px; }
.bd-layer p { font-size:12px; margin:0; }
.bd-boundary { padding:14px 16px; border-left:3px solid #2196F3; background:rgba(33,150,243,.05); font-size:13px; }
.bd-workbench { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; }
.bd-list { display:grid; gap:6px; padding:10px; }
.bd-list button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; width:100%; }
.bd-list button span { font-size:11px; color:var(--text-secondary); }
.bd-page button,.bd-page input,.bd-page select { font:inherit; min-height:44px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-primary); padding:10px 12px; max-width:100%; }
.bd-page button { cursor:pointer; font-size:13px; }
.bd-page button:hover { border-color:#2196F3; }
.bd-page button:disabled { opacity:.45; cursor:default; }
.bd-page :focus-visible { outline:2px solid #2196F3; outline-offset:3px; }
.bd-page button.bd-primary { background:#2196F3; color:#fff; border-color:#2196F3; }
.bd-editor { padding:24px; min-width:0; }
.bd-section-head { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.bd-section-head h2,.bd-section-head h3 { margin:0; }
.bd-section-head h2 { font-size:24px; }
.bd-section-head h3,.bd-preview-section h3 { font-size:16px; }
.bd-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.bd-page label { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--text-secondary); min-width:0; }
.bd-page input,.bd-page select { width:100%; }
.bd-lineage { margin:20px 0; padding:16px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:8px; font-size:12px; color:var(--text-secondary); }
.bd-lineage strong { color:var(--text-primary); }
.bd-help { font-size:12px; }
.bd-filter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end; margin:12px 0; }
.bd-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.bd-preview-section { border-top:1px solid var(--border); margin-top:24px; padding-top:16px; }
.bd-notice { min-height:24px; font-size:13px; color:var(--text-primary); }
.bd-result { display:flex; flex-direction:column; gap:8px; border:1px solid rgba(33,150,243,.4); border-radius:10px; padding:20px; margin-top:20px; font-size:12px; }
.bd-result strong { font-size:28px; font-variant-numeric:tabular-nums; }
.bd-result p { margin:0; color:var(--text-secondary); line-height:1.5; }
.bd-version { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; font-size:12px; }
.bd-skeleton { height:280px; border-radius:12px; background:linear-gradient(90deg,var(--surface-alt),var(--border),var(--surface-alt)); background-size:200% 100%; animation:pred-shimmer-kf 1.4s infinite; }
@media(max-width:820px) {
  body.route-business-definitions main#main-content { padding-top:calc(env(safe-area-inset-top,0px) + 80px) !important; }
  .bd-page { padding:16px; }
  .bd-header h1 { font-size:27px; }
  .bd-layers { grid-template-columns:1fr; gap:8px; }
  .bd-layer { padding:12px 16px; }
  .bd-layer h2 { display:inline; margin-left:8px; }
  .bd-layer p { margin-top:6px; }
  .bd-workbench { grid-template-columns:1fr; }
  .bd-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bd-editor { padding:16px; }
  .bd-form-grid,.bd-filter { grid-template-columns:1fr; }
}

/* ── Hood: map failure panel ───────────────────────────────────────────────
   .hood-map-error was emitted by _mapUnavailable() since v40 but never had a
   rule, so a failed map rendered unstyled text at the top-left of a black
   container and read as "the map is just broken". */
.hood-map-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  min-height: 240px;
  padding: 32px 24px;
  text-align: center;
  background: #0d1117;
}
.hood-map-error-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #e6edf3;
  max-width: 34ch;
}
.hood-map-error-hint {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #8b949e;
  max-width: 52ch;
}
@media (max-width: 820px) {
  .hood-map-error { padding: 24px 16px; }
  .hood-map-error-title { font-size: 14px; }
  .hood-map-error-hint { font-size: 12px; }
}

/* v42.6: Mac bridge health strip in the messages status bar */
.msg-pill-dry { color: #2196F3; }
.msg-stat-bridge .msg-stat-sub {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.55);
  margin-left: 6px;
  white-space: nowrap;
}
html[data-app-theme="dark"] .msg-stat-bridge .msg-stat-sub { color: rgba(255, 255, 255, 0.6); }

/* ===========================================================================
   v42.6.3 Ask floating rail layout
   - Hide FAB when open (later display:!important rules had resurrected it)
   - Messages scrollport needs min-height:0 inside the full-height flex column
   - Compact single-row composer toolbar for the 420px rail
   =========================================================================== */
html body .floating-chat.open > .floating-chat-toggle,
html body .floating-chat.open > button.floating-chat-toggle {
  display: none !important;
}

html body .floating-chat.open .floating-chat-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body .floating-chat.open .floating-chat-header,
html body .floating-chat.open .floating-chat-composer {
  flex: 0 0 auto !important;
}

html body .floating-chat.open .floating-chat-messages,
html body .floating-chat .floating-chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* One tight toolbar row in the side rail (Web icon-only, smaller chrome). */
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-toolbar {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 0 0 !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native :is(.rc-left, .rc-right) {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-left {
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-left::-webkit-scrollbar {
  display: none !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native :is(.rc-plus-wrap, .rc-plus-native-wrap) {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native-wrap {
  width: 34px !important;
  height: 34px !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native {
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}
/* Web search is auto-engaged when needed — no manual chip in the rail. */
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-chip[data-chip="web"] {
  display: none !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-chip--model {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 8px !important;
  max-width: 112px !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-chip--model .rc-chip-label {
  max-width: 72px !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mode-select {
  width: 108px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native :is(.rc-mic, .rc-send) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
}