*, *::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; }
/* iter12k: hide mobile-topnav on desktop by default. Body is display:flex,
   so without this the nav becomes a flex item and steals 500+px of width
   from the sidebar/main layout. The mobile @media block re-shows it.
   v40.5m: chips are position:fixed when shown — they DO stick on Chrome
   scroll (mobile + desktop emulation). Desktop layout uses sidebar/topbar. */
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: rgba(255,255,255,0.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: rgba(255, 255, 255, 0.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: rgba(255,255,255,0.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(209, 99, 167, .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); }
.hero-lead { color: var(--muted); max-width: 62ch; margin: var(--space-4) 0 0; line-height: 1.65; }

.btn { border: 0; border-radius: 999px; padding: .85rem 1.1rem; font-weight: 700; cursor: pointer; font-size: var(--text-sm); transition: transform .12s ease, filter .12s ease, background .12s ease; display: inline-flex; align-items: center; gap: .5rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--primary-ink); }
.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 rgba(255, 255, 255, 0.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: rgba(255,255,255,0.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, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.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: rgba(255,255,255,0.02); }
.auto-name { font-weight: 600; color: var(--text); }

.toggle { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; margin-right: 6px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.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;
}.toggle input:checked + .toggle-track::before { transform: translateX(14px); background: var(--primary-strong); }

.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-title { font-weight: 600; font-size: .95rem; color: var(--text-primary); }.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; }
.report-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.report-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.report-card--empty .report-thumb { opacity: .55; }
.thumb-empty-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: .8rem; letter-spacing: .02em; background: rgba(20,19,18,.55); backdrop-filter: blur(2px); }
.report-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: .4rem; }
.report-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: .72rem;
  color: var(--faint);
  margin-top: 2px;
}.report-refresh { font-size: .72rem; }.floating-chat-toggle { pointer-events: auto; border-radius: 999px; padding: .75rem 1.25rem; font-weight: 700; cursor: pointer; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .5rem; }
.floating-chat-toggle:hover { filter: brightness(1.08); transform: translateY(-1px); }.floating-chat-panel { pointer-events: auto; position: absolute; right: 0; bottom: 60px; width: 400px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px); display: none; flex-direction: column; }
.floating-chat.open .floating-chat-panel { display: flex; }.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: rgba(0, 0, 0, 0.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 rgba(255,255,255,0.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)); }
}
@media (max-width: 900px) {
  body { display: block; }
  .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .main { min-height: auto; }
  .main-content { padding: var(--space-5); }
  .topbar { padding: var(--space-4) var(--space-5); }

  /* iter12k: was 7rem (112px) which left huge dead space at bottom. 1.5rem
     (24px) is just enough to clear content from the collapsed Comet toolbar. */
  .dashboard-view, .automations-view, .settings-view, .reports-view, main#main-content { padding-bottom: 1.5rem; }

  .chat-panel .chat-messages { min-height: 0; max-height: 180px; padding: 0.35rem 0; }
  .chat-panel .chat-messages .chat-empty { padding: 0.4rem 0; font-size: 0.85rem; color: rgba(234, 235, 236, 0.5); }
  .chat-panel { padding: 1rem !important; }
  .dashboard-view .chat-panel { min-height: 0; }
  .dashboard-view .chat-panel .chat-messages { flex: 0 0 auto; min-height: 0; max-height: 220px; margin-bottom: 0; }

  html body .floating-chat-messages { min-height: 120px; max-height: 50vh; }
  .dashboard-view .card.chat-panel { padding: 0.75rem !important; background: #1A1B1B !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; }
  .dashboard-view .card.chat-panel .chat-messages { padding: 0; }
  .chat-composer .composer-chips .composer-chip,
  .floating-chat-composer .composer-chips .composer-chip
  .chat-composer .composer-chips .composer-chip .cc-ico,
  .floating-chat-composer .composer-chips .composer-chip .cc-ico {
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #D5D4D4;
    opacity: 1;
  }
  .chat-composer .composer-chips .composer-chip--context,
  .floating-chat-composer .composer-chips .composer-chip--context
  .chat-composer .composer-chips .composer-chip--context .cc-ico,
  .floating-chat-composer .composer-chips .composer-chip--context .cc-ico,
  .chat-composer .composer-chips .composer-chip-plus,
  .floating-chat-composer .composer-chips .composer-chip-plus

  html body .floating-chat .floating-chat-composer { margin: 0.5rem 0.75rem 0.75rem; }

}
/* 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. */
@media (max-width: 820px) {
  .floating-chat.open { inset: 0; z-index: 1300; }
  .floating-chat.open .floating-chat-panel {
    position: fixed !important;
    left: 10px;
    right: 10px !important;
    bottom: 10px !important;
    top: auto;
    width: auto;
    max-width: none;

    height: calc(var(--vv-h, 85vh) - 20px) !important;
    max-height: calc(var(--vv-h, 85vh) - 20px) !important;
    border-radius: 18px !important;
    display: flex;
    flex-direction: column !important;
    transform: translateY(0) !important;
    transition: height 180ms ease, max-height 180ms ease, transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  }
  .floating-chat:not(.open) .floating-chat-panel { transform: translateY(100%) !important; }
  html body .floating-chat.open .floating-chat-messages { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .floating-chat.open .floating-chat-composer { flex: 0 0 auto; }

  html body .floating-chat .floating-chat-panel { border-radius: 12px; }
}
@media (max-width: 560px) {
  .hero-card { padding: var(--space-5); }
  .hero-card h2 { font-size: 1.75rem; }
  .chat-panel { padding: var(--space-5); }
  .floating-chat-panel { width: calc(100vw - 32px); right: 0; }
}

.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; }

.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, .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 rgba(255,255,255,0.06) !important; border-radius: 14px !important; margin-top: auto; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.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: #ffffff; 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: rgba(255,255,255,0.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,
.hero-headline,
.card h2,
.card h3 { color: #e8efe9; }
.section-label,
.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: rgba(255,255,255,0.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: #1E88E5 !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: #ffffff !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: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.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); }

@media (max-width: 640px) {
  .coo-kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .dashboard-view .kpi-grid,
  .main-content .kpi-grid,
  .kpi-grid { grid-template-columns: 1fr !important; }

  .settings-view { padding: 1rem 1rem 3rem; }

  .automation-rule-row { grid-template-columns: 1fr; gap: 6px; }
}
.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: rgba(255,255,255,0.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: rgba(255,255,255,0.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 rgba(255,255,255,0.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: rgba(255,255,255,0.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: rgba(255,255,255,0.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, .toggle input:checked + .toggle-track::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) !important; 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-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .66rem; text-transform: capitalize; letter-spacing: .02em; background: rgba(82, 87, 136, 0.12) !important; border: 1px solid rgba(82, 87, 136, 0.38); color: #b9bedd !important; font-weight: 500; }
.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; }

.division-header { font-family: var(--font-display); margin-bottom: var(--space-2); color: var(--ntl-tab-text); letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }

.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); }
.report-card--empty .thumb-empty-overlay { color: var(--ntl-tab-text); font-size: 0.78rem; }

.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 td .chip, .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: rgba(255,255,255,0.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: rgba(255,255,255,0.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 .toggle input:checked + .toggle-track::before, html body #etl-pill::before { background: #525788; box-shadow: 0 0 0 3px rgba(82, 87, 136, 0.22); }
.toggle input:checked + .toggle-track { background: rgba(82, 87, 136, 0.28); border-color: rgba(82, 87, 136, 0.55); }

.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, .view, .view *, .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, .placeholder, .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 .tag,
.main .sync-chip,
.main .pill,
.dashboard-lower .card,

.main .tag, .main .sync-chip, .main .pill, .main .report-link { border-color: rgba(25, 118, 210, 0.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: #64B5F6; 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: #8A8F9C; text-align: left; white-space: nowrap; }
.data-table td { font-size: var(--text-sm); border-top: 1px solid rgba(255,255,255,0.04); padding: 1rem 1.4rem !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; vertical-align: middle !important; color: #D6D8DE !important; }
.data-table tr:last-child td { border-bottom: 0; }.reports-division {
 display: flex; flex-direction: column; gap: var(--space-3);
 margin-top: 3.2rem !important; }
.reports-division:first-child { margin-top: 0.4rem; }
.reports-division .division-header { color: var(--n4-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.1rem 0.2rem; opacity: 0.85; }
.reports-division .report-cards { gap: 1.1rem !important; }
.report-card { background: #1F2121 !important; border-radius: 14px !important; }
.report-card-body { color: #D6D8DE !important; }
.division-reports { background: #1F2121 !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 rgba(25, 118, 210, 0.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: #1F2121; border-radius: 14px; }

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

.coo-kpi-grid .coo-kpi-btn, .coo-kpi-btn--3, .coo-kpi-btn--2 { background: #1F2121 !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: #1F2121; }
.automations-view button:hover { background: rgba(25, 118, 210, 0.08); border-color: rgba(25, 118, 210, 0.4); }

.topbar .pill, .topbar .pill.live, .topbar > button { border: 1px solid var(--n4-accent-soft); background: #1F2121; color: #D6D8DE; }

.summary-item, .summary-stack .summary-item, .dashboard-lower .summary-item { border: 0; background: transparent; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.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 rgba(25, 118, 210, 0.28) !important; background: #1F2121 !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 rgba(25, 118, 210, 0.28) !important; background: #1F2121 !important; border-radius: 14px !important; }
.main .section-label, .division-view .section-label, .ai-insight-card .section-label, .division-reports .section-label { color: #8A8F9C; 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 rgba(25, 118, 210, 0.28); background: #1F2121; 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 rgba(25, 118, 210, 0.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 rgba(25, 118, 210, 0.28) !important; background: #1F2121 !important; }

.kpi-grid > *, .kpi-card, .division-kpi-grid > * { border: 1px solid rgba(25, 118, 210, 0.28) !important; background: #1F2121 !important; border-radius: 14px !important; }

.sidebar { overflow: hidden; } /* v40.5cr: removed !important — sidebar-scroll handles inner scroll */

.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: #EAEBEC !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: #EAEBEC; 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: #EAEBEC; border-radius: 10px; margin-bottom: 0.25rem; }
.sidebar .nav-item:hover { background: rgba(55, 83, 101, 0.35) !important; }
.sidebar .nav-item.active { background: rgba(55, 83, 101, 0.65) !important; border: 1px solid rgba(25, 118, 210, 0.45) !important; color: #EAEBEC !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: #EAEBEC !important; border-radius: 8px !important; }
.sidebar .history-item:hover { background: rgba(255,255,255,0.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 rgba(25, 118, 210, 0.28) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #EAEBEC !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: #EAEBEC !important; }

.sidebar .sync-dot--ok,
.sidebar .nav-item .pill.live::before { background: #1976D2; }

.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: #EAEBEC;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  z-index: 20;
}
.sidebar-collapse-btn:hover { background: rgba(25, 118, 210, 0.18); border-color: rgba(25, 118, 210, 0.55); color: #1976D2; }
.sidebar-collapse-btn:active { transform: scale(0.94); }
.sidebar-collapse-btn svg { display: block; }

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

.rich-composer { position: relative; border-radius: 14px; background: #1F2121; border: 1px solid rgba(234, 235, 236, 0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28); color: #EAEBEC; }
.rich-composer:focus-within { border-color: rgba(25, 118, 210, 0.85); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 3px rgba(25, 118, 210, 0.18), 0 10px 28px rgba(0, 0, 0, 0.45); }
.rc-textarea { width: 100%; max-height: 240px; resize: none; border: 0; outline: 0; background: transparent; color: #EAEBEC; font: inherit; line-height: 1.45; }
.rc-textarea::placeholder { color: rgba(234, 235, 236, 0.5); }.rc-left, .rc-right { display: flex; align-items: center; gap: 0.4rem; }

.rc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(234, 235, 236, 0.12); border-radius: 999px; background: rgba(234, 235, 236, 0.04); color: #EAEBEC; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rc-icon-btn:hover { border-color: rgba(25, 118, 210, 0.55); color: #1976D2; }
.rc-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; font-size: 0.78rem; font-weight: 500; color: #EAEBEC; 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; }
.rc-chip:hover { background: rgba(25, 118, 210, 0.14); border-color: rgba(25, 118, 210, 0.55); color: #1976D2; }
.rc-chip svg { opacity: 0.85; }

.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: #EAEBEC; }
.rc-model svg { opacity: 0.85; }
.rc-model-select { background: transparent; color: #EAEBEC; 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: #1F2121; color: #EAEBEC; }

.rc-mic--on { background: rgba(25, 118, 210, 0.28); border-color: #1976D2; color: #1976D2; 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, #1976D2 0%, #1565C0 100%); color: #0E1B25; cursor: pointer; box-shadow: 0 4px 12px rgba(25, 118, 210, 0.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: #EAEBEC; background: rgba(25, 118, 210, 0.14); border: 1px solid rgba(25, 118, 210, 0.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 .nav-label, 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: #EAEBEC !important; text-decoration: none; transition: background .15s ease; }
.sidebar #sidebar-history-list .history-title { font-size: 0.86rem; font-weight: 500; color: #EAEBEC; 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: #1F2121;
  border: 1px solid rgba(25, 118, 210, 0.45);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  color: #EAEBEC;
  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: #EAEBEC; 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: #1F2121;
  border: 1px solid rgba(25, 118, 210, 0.55);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
  color: #EAEBEC;
  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 .core-caret { opacity: 0.75; transition: transform .2s ease, opacity .14s ease; }
.sidebar .sidebar-label--toggle:hover .core-caret { opacity: 1; }.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-hero .ai-tagline { font-size: 1rem; color: #8A929E; margin: 0; font-weight: 400; }

.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, #1F2121 0%, #1F2121 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 .nav-label, 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: rgba(25, 118, 210, 0.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: #8A929E; 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 rgba(255,255,255,0.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: #8A929E; }
.page-hero > .summary-stack > .card .summary-item strong { color: #EAEBEC; 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 .nav-label, 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-label,
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: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #EAEBEC !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: #EAEBEC !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: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.sidebar .sidebar-section .section-body .history-item:hover { background: rgba(255,255,255,0.04) !important; border: none !important; }
.sidebar .sidebar-section .section-body > .nav-item.active { background: rgba(25, 118, 210, 0.12); border-color: rgba(25, 118, 210, 0.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: #EAEBEC; 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); }
.sidebar .sidebar-section .core-caret { transition: transform 160ms ease; }
.sidebar .sidebar-section.is-collapsed .core-caret { transform: rotate(-90deg); }

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: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.10) !important;
  color: #EAEBEC !important;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 6px 18px rgba(0, 0, 0, 0.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: #EAEBEC; 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 - 220px); overflow-y: auto; overflow-x: hidden; padding-right: 0.25rem; padding-bottom: 1rem; 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: rgba(255,255,255,0.08); border-radius: 4px; }
html body.route-ask.ai-has-messages .ai-composer-wrap { position: sticky; bottom: 0; background: linear-gradient(to top, #1F2121 0%, #1F2121 60%, rgba(31, 33, 33,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: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.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: rgba(25, 118, 210, 0.35); color: #EAEBEC; }
.home-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: #1976D2; 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: #1F2121; border: 1px solid rgba(255,255,255,0.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: #8A929E; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.home-dash-title { font-size: 0.88rem; font-weight: 600; color: #EAEBEC; }
.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: #EAEBEC; letter-spacing: -0.01em; }
.home-dash-unit { font-size: 0.72rem; color: #8A929E; }
.home-dash-spark .spark-svg { width: 100%; height: 100%; display: block; }
.home-dash-delta { font-weight: 600; }
.home-dash-delta.is-up { color: #2E7D32; }
.home-dash-delta.is-down { color: #C62828; }
.home-dash-range { color: #6B737E; }

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: #EAEBEC; margin: 0; letter-spacing: -0.01em; }
.chats-new-btn { background: rgba(25, 118, 210, 0.12); border: 1px solid rgba(25, 118, 210, 0.35); color: #EAEBEC; 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: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.65rem 0.9rem; color: #EAEBEC; font-size: 0.9rem; font-family: 'Satoshi', system-ui, sans-serif; }
.chats-search:focus { outline: none; border-color: rgba(25, 118, 210, 0.45); background: rgba(255,255,255,0.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: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  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: #EAEBEC; margin-bottom: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats-row-preview { font-size: 0.82rem; color: #8A929E; 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: #8A929E; font-size: 0.88rem; padding: 2rem 1rem; text-align: center; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.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: #8A929E; text-decoration: none; border-radius: 6px; transition: color 120ms ease, background 120ms ease; }
.sidebar-history-viewall:hover { color: #1976D2; background: rgba(25, 118, 210, 0.06); }

a.brand { text-decoration: none; color: inherit; cursor: pointer; }
@media (max-width: 860px) {
  .home-tabs-row { grid-template-columns: repeat(4, 1fr); }
  .home-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .home-tabs-row { grid-template-columns: repeat(2, 1fr); }
  .home-dash-grid { grid-template-columns: 1fr; }
}

.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 rgba(0, 0, 0, 0.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 rgba(255,255,255,0.06); 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 { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 0 0 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.reports-subheader .btn-ghost { font-size: 0.82rem; color: #8A929E; 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: #EAEBEC; }
.reports-subheader .reports-title { font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; color: #EAEBEC; margin: 0; letter-spacing: -0.005em; }

.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 rgba(255, 255, 255, 0.10);
  margin: 0 auto;
}
.ai-hero .ai-hero-card #ai-greeting, body.route-ask:not(.ai-has-messages) .ai-hero .ai-hero-card #ai-greeting { margin: 0; padding: 0; }

@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 rgba(255, 255, 255, 0.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 rgba(0, 0, 0, 0.35)) !important;
  pointer-events: auto;
  cursor: crosshair;
  z-index: 2;
}
.ai-hero .ai-hero-card #ai-greeting, .ai-hero-stage #ai-greeting { position: absolute; left: 0; right: 0; top: 82px; margin: 0; text-align: center; z-index: 1; pointer-events: none; }

.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: #1976D2;
  filter: drop-shadow(0 0 6px rgba(25, 118, 210, 0.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; }
.dashboard-view .chat-panel { min-height: 520px !important; display: flex; flex-direction: column; }
.dashboard-view .chat-panel .chat-messages { flex: 1 1 auto; max-height: none; min-height: 0; margin-bottom: auto; }

.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 rgba(255, 255, 255, 0.06); 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 rgba(255, 255, 255, 0.06); 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: rgba(255, 255, 255, 0.45); border: 0; border-radius: 12px; color: #1e293b; opacity: 1; }
.sidebar .sidebar-label--toggle .core-caret { color: #1976D2; opacity: 0.75; }

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: #EAEBEC;

  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: rgba(25, 118, 210, 0.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: #1976D2;
  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: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.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: rgba(25, 118, 210, 0.14); border-color: rgba(25, 118, 210, 0.45); color: #EAEBEC; }
.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: rgba(25, 118, 210, 0.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: rgba(255, 255, 255, 0.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 rgba(255,255,255,0.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 rgba(25, 118, 210, 0.35) !important;
  color: #1976D2 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
body.sidebar-collapsed .sidebar .sidebar-collapse-btn:hover { background: rgba(25, 118, 210, 0.28); border-color: rgba(25, 118, 210, 0.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: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; }
.sidebar .nav-item.active, .sidebar .nav-item[aria-current="page"], .sidebar .nav-item.is-active { background-color: rgba(25, 118, 210, 0.10) !important; border-color: rgba(25, 118, 210, 0.35) !important; color: #EAEBEC !important; }

/* v40.5eo FIX 5: brand-blue active chip (was off-brand cyan #5FE2F0). */
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: rgba(255,255,255,0.05);
  color: rgba(234,235,236,0.82);
  border: 1px solid rgba(255,255,255,0.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 rgba(255,255,255,0.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: rgba(255,255,255,0.06); }
.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: rgba(25, 118, 210, 0.10); border: 1px solid rgba(25, 118, 210, 0.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: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; margin-bottom: 0.9rem; }

.tool-chip--error { background: rgba(244, 71, 71, 0.12); color: #FFA3A3; border-color: rgba(244, 71, 71, 0.40); }

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%; }

@media (max-width: 767px) {

  /* iter12f audit: REMOVED dead `body { padding-top: 64px + safe-area-top }`
     rule. It pushed every page down 64+SAT pixels on top of the iter11/iter12
     padding on section#main, creating doubled top dead space. The iter12f
     rule on .dashboard-view/.settings-view/etc. now handles initial chip
     offset correctly. Bottom padding moved to per-view rule too. */
  body { padding: 0; }

  .sidebar { display: none; }

  

  

  .main { margin-left: 0; width: 100%; }

  .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td, .data-table th { display: block; width: 100%; box-sizing: border-box; }

  .kpi-grid,
  .report-cards,
  .home-dash-grid,
  .coo-kpi-grid

  .modal-box, .modal-box--wide { width: 100vw; max-width: 100vw; border-radius: 0; max-height: 100dvh; margin: 0; top: 0; left: 0; }

  .floating-chat, .rich-composer { padding-bottom: env(safe-area-inset-bottom); }

  .ai-composer-wrap { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }

  input, textarea, select { font-size: 16px !important; }

  .main-content, .modal-box, .drawer { -webkit-overflow-scrolling: touch; }

  button, .rc-chip, .rc-icon-btn { min-height: 40px; }

  .rc-send { min-width: 44px; min-height: 44px; }

  .summary-stack { flex-direction: column; display: flex; }

  html body .rc-textarea { max-height: 120px; }

  .embed-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  body,
  body.cockpit-hidden,
  body.cockpit-revealed,
  body.sidebar-collapsed,
  body.sidebar-collapsed.cockpit-hidden,
  body.sidebar-collapsed.cockpit-hidden.cockpit-revealed,
  body.route-ask,
  body.route-ask-new,

  .main, body.cockpit-hidden .main, body.cockpit-revealed .main, body.sidebar-collapsed .main, body.sidebar-collapsed.cockpit-hidden .main, body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .main, body:not(.sidebar-collapsed).route-ask.cockpit-hidden .main {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw !important;
    padding-left: 0;
    padding-right: 0;
    left: 0;
    right: 0;
    position: relative;
  }

  .main-content,
  .page,
  .reports-view,
  .settings-view

  .main * { max-width: 100%; }

  .page-hero

  html body #floating-chat, html body .floating-chat-toggle { right: calc(0.75rem + env(safe-area-inset-right)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); }

  /* === v40.5az Fix-1: single-row toolbar, no wrapping === */
  .rich-composer .rc-toolbar { flex-wrap: nowrap; row-gap: 0; min-width: 0; overflow: hidden; }
  html body .rich-composer .rc-left { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.4rem; overflow: hidden; }
  .rich-composer .rc-left::-webkit-scrollbar { display: none; }
  .rich-composer .rc-right { flex: 0 0 auto; margin-left: 0; }
  html body .rich-composer .rc-chip { flex-shrink: 0; white-space: nowrap; padding: 0.4rem 0.7rem; font-size: 0.85rem; }

  .rich-composer .rc-model { max-width: 140px; }
  html body .rich-composer .rc-model-select { max-width: 110px; font-size: 0.85rem; }

  .dashboard-lower { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 100%; }
  .dashboard-lower > * { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .right-panel { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 100%; }
  .right-panel > .card, .right-panel > section.card, .card.right-section, .chat-panel, #automations-section, #activity-section { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin-left: 0; margin-right: 0; }

  #automations-list > *, #activity-feed > * { max-width: 100%; box-sizing: border-box; word-break: break-word; }

  .qa-btn { padding: 0.75rem 0.5rem; font-size: 0.9rem; min-height: 44px; }

  .page-hero, .summary-stack { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 100%; }
  .summary-stack > .card.panel { width: 100%; max-width: 100%; box-sizing: border-box; }

  .kpi-grid, #kpi-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; width: 100%; max-width: 100%; }

  .home-tabs-row { flex-wrap: wrap; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .home-tab {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
    font-size: 0.78rem !important;
    min-height: 48px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    -webkit-tap-highlight-color: rgba(66, 165, 245, 0.25);
    touch-action: manipulation;
    position: relative;
    z-index: 1;
  }
  .home-tab, .home-tab * { pointer-events: auto; }

  .rich-composer,
  .chat-composer,
  .ai-composer-wrap
}

@media (min-width: 769px) {
  

  

  

  .ai-view .ai-bg-mark { display: none; }

  html:not([data-app-theme="dark"]) .topbar,
  html:not([data-app-theme="dark"]) .topbar--with-pill,
  html:not([data-app-theme="dark"]) .gl-floating-pill,
  html:not([data-app-theme="dark"]) nav.gl-floating-pill,
  html:not([data-app-theme="dark"]) .gl-floating-pill--topbar,
  html:not([data-app-theme="dark"]) .card:not(.chat-panel):not(.floating-chat):not(.chat-composer),
  html:not([data-app-theme="dark"]) .hero-card,
  html:not([data-app-theme="dark"]) .ai-hero-card,
  html:not([data-app-theme="dark"]) .panel,
  html:not([data-app-theme="dark"]) .right-panel,
  html:not([data-app-theme="dark"]) .right-section,
  html:not([data-app-theme="dark"]) .glass-composer,
  html:not([data-app-theme="dark"]) .rich-composer,
  html:not([data-app-theme="dark"]) .coo-kpi-grid,
  html:not([data-app-theme="dark"]) .coo-kpi-btn,
  html:not([data-app-theme="dark"]) .kpi-grid,
  html:not([data-app-theme="dark"]) .kpi-card,
  html:not([data-app-theme="dark"]) .home-dash-card,
  html:not([data-app-theme="dark"]) .home-dash-card--link,
  html:not([data-app-theme="dark"]) .gl-divisions-grid,
  html:not([data-app-theme="dark"]) .gl-division-card,
  html:not([data-app-theme="dark"]) .gl-ds-section,
  html:not([data-app-theme="dark"]) .gl-ds-card,
  html:not([data-app-theme="dark"]) .gl-ds-header,
  html:not([data-app-theme="dark"]) .report-card,
  html:not([data-app-theme="dark"]) .reports-division,
  html:not([data-app-theme="dark"]) .sidebar-history,
  html:not([data-app-theme="dark"]) .sidebar-history--v1929,
  html:not([data-app-theme="dark"]) .history-hover-card,
  html:not([data-app-theme="dark"]) .history-hover-card--portal,
  html:not([data-app-theme="dark"]) .chats-row,
  html:not([data-app-theme="dark"]) .chats-header,
  html:not([data-app-theme="dark"]) .modal,
  html:not([data-app-theme="dark"]) .dialog,
  html:not([data-app-theme="dark"]) .popover,
  html:not([data-app-theme="dark"]) .notif-panel

  html:not([data-app-theme="dark"]) .topbar .page-subtitle, html:not([data-app-theme="dark"]) .ai-hero-card .hero-lead, html:not([data-app-theme="dark"]) .hero-card .hero-lead, html:not([data-app-theme="dark"]) .hero-card .eyebrow, html:not([data-app-theme="dark"]) .coo-kpi-src, html:not([data-app-theme="dark"]) .coo-kpi-label, html:not([data-app-theme="dark"]) .gds-desc, html:not([data-app-theme="dark"]) .gds-chip, html:not([data-app-theme="dark"]) .gl-divisions-sub, html:not([data-app-theme="dark"]) .report-meta, html:not([data-app-theme="dark"]) .history-meta, html:not([data-app-theme="dark"]) .chats-row-meta, html:not([data-app-theme="dark"]) .chats-row-preview { color: #475569; }

  html body .gl-floating-pill { border-radius: 999px; }
  .coo-kpi-btn,
  .kpi-card,
  .gl-division-card,
  .gl-ds-card,
  .gl-ds-section,
  .home-dash-card,
  .report-card,
  .history-hover-card,
  .notif-panel,
  html body .chats-row { border-radius: 14px; }

  .coo-kpi-grid .coo-kpi-btn, .coo-kpi-grid .coo-kpi-btn--2, .coo-kpi-grid .coo-kpi-btn--3, .main .kpi-card, .main .division-kpi-grid .kpi-card, .main .report-card, .main .reports-division .report-card, .main .division-reports .report-card, .main .card:not(.chat-panel):not(.floating-chat):not(.chat-composer), .main .division-view .card, .main .automations-view .card, .main .settings-view .card, .dashboard-view .ai-hero-card, .ai-view .ai-hero-card, body.route-ask .ai-hero-card, .dashboard-lower .card, .right-panel .card, .report-cards .report-card, .gl-divisions-grid .gl-division-card, .gl-ds-grid .gl-ds-card, .chats-list .chats-row, .sidebar-history--v1929, .sidebar .sidebar-history, .notif-panel {
    background: #1F2121;
    background-color: #1F2121;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
    color: #E5E5E5;
  }

  .coo-kpi-grid, .coo-kpi-grid.coo-kpi-grid, .kpi-grid, .main .kpi-grid, .gl-divisions-grid, .reports-division, .division-reports, .main .reports-division, .main .division-reports, .right-panel, .dashboard-lower, .page-hero { background: transparent; background-color: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0 solid transparent; box-shadow: none; }

  .sidebar-history, .sidebar-history--v1929, .sidebar .sidebar-history { background: transparent; background-color: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0 solid transparent; box-shadow: none; }

  .quick-actions-grid button, .quick-actions-grid a, .dashboard-view .quick-actions button, .dashboard-view .quick-actions a, .quick-action {
    background: rgba(33,150,243,0.08) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(33,150,243,0.18) !important;
    box-shadow: none !important;
    color: #E5E5E5 !important;
    border-radius: 12px !important;
  }

  .coo-kpi-btn,
  .hero-card,
  .card.hero-card,
  .card.panel,
  .card.right-section,
  .kpi-card,
  .home-dash-card,
  .gl-division-card,
  .gl-ds-card,
  .report-card,
  .ai-hero-card,
  .quick-actions-grid button,
  .quick-actions-grid a,
  .dashboard-view .quick-actions button,
  .dashboard-view .quick-actions a,
  .chats-row,
  .chats-header,
  .gl-ds-header

  .rich-composer,
  .glass-composer,
  .ai-composer-wrap .rich-composer,
  .ai-composer-wrap .glass-composer,
  .ai-view .rich-composer
  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(25, 118, 210, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 3px rgba(25, 118, 210, 0.18), 0 10px 28px rgba(0, 0, 0, 0.45); }
  .automation-row, .dashboard-view .automation-row, .right-section .automation-row, #automations-list .automation-row, #automations-section .automation-row {
    background: rgb(31, 33, 33) !important;
    background-color: rgb(31, 33, 33) !important;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px;
  }

  .automation-row *, .dashboard-view .automation-row *, .right-section .automation-row * { color: inherit; }

  .dashboard-view .card.chat-panel .panel-title, .dashboard-view .card.chat-panel h3, .dashboard-view .card.chat-panel .chat-empty, .dashboard-view .card.chat-panel p { color: #1e293b !important; }
  .dashboard-view .card.chat-panel .chat-empty { color: rgba(30, 41, 59, 0.65) !important; }

  .gl-ds-section, .gl-ds-view .gl-ds-section { background: transparent; background-color: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0 solid transparent; box-shadow: none; padding: 0; border-radius: 0; }

  .gl-ds-view .gl-ds-section + .gl-ds-section { margin-top: 1.5rem; }
  .gl-ds-view .gl-ds-cat { margin: 0 0 0.6rem 0.2rem; }

  .gl-ds-view .gl-ds-header { margin-bottom: 1.25rem; }
  .automation-row, .dashboard-view .automation-row, .right-section .automation-row, #automations-list .automation-row, #automations-section .automation-row, .automations-view .automation-row, .automations-view [class*="automation"][class*="row"], .automations-view [class*="automation"][class*="card"], .automations-view [class*="automation"][class*="item"] {
    background: #1F2121 !important;
    background-color: #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;
    box-shadow: none !important;
    border-left: none !important;
    color: #E5E5E5 !important;
    border-radius: 12px !important;
  }

  .automation-row .automation-name, .automation-row .automation-meta, .automations-view .automation-name, .automations-view [class*="-name"], .automations-view [class*="-title"] { color: #E5E5E5 !important; }
  .automation-row .automation-sub, .automation-row .text-muted, .automations-view .automation-sub, .automations-view [class*="-sub"], .automations-view [class*="-desc"], .automations-view .text-muted { color: rgba(234, 235, 236, 0.55) !important; }

  .coo-kpi-btn:hover, .kpi-card:hover, .home-dash-card:hover {
    background: linear-gradient(
      180deg,
      rgba(240, 246, 255, 0.88) 0%,
      rgba(206, 223, 245, 0.82) 100%
    ) !important;
    background-color: transparent;
    background-image: linear-gradient(
      180deg,
      rgba(240, 246, 255, 0.88) 0%,
      rgba(206, 223, 245, 0.82) 100%
    );
    border-color: rgba(25, 118, 210, 0.35) !important;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.95),
      0 8px 20px rgba(13, 71, 161, 0.12) !important;
    color: #0f172a !important;
    transform: none;
  }
  .coo-kpi-btn:hover *, .kpi-card:hover *, .home-dash-card:hover * { color: inherit; }
  .coo-kpi-btn:hover .coo-kpi-label, .kpi-card:hover .kpi-label, .kpi-card:hover h4 { color: #0D47A1; }
  .coo-kpi-btn:hover .coo-kpi-src,
  .kpi-card:hover .muted

  .dashboard-view .card.chat-panel, .dashboard-view #chat-panel, .dashboard-lower > .card.chat-panel {
    background: linear-gradient(
      180deg,
      rgba(240, 246, 255, 0.92) 0%,
      rgba(209, 226, 248, 0.90) 100%
    ) !important;
    background-color: rgba(230, 240, 252, 0.9) !important;
    background-image: linear-gradient(
      180deg,
      rgba(240, 246, 255, 0.92) 0%,
      rgba(209, 226, 248, 0.90) 100%
    ) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    border: 1px solid rgba(180, 200, 230, 0.65) !important;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.9),
      0 20px 40px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
    border-radius: 14px !important;
  }

  .notif-panel, .notif-panel.is-open {
    background: linear-gradient(
      180deg,
      rgba(248, 250, 253, 0.97) 0%,
      rgba(226, 236, 248, 0.96) 100%
    ) !important;
    background-color: rgba(248, 250, 253, 0.97) !important;
    background-image: linear-gradient(
      180deg,
      rgba(248, 250, 253, 0.97) 0%,
      rgba(226, 236, 248, 0.96) 100%
    ) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border: 1px solid rgba(180, 200, 230, 0.7) !important;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.95),
      0 20px 48px rgba(15, 23, 42, 0.18) !important;
  }

  html body .home-dash-card.home-dash-card--link:hover,
  html body .home-dash-card:hover {
    /* Same gradient as non-hover, with a touch more white to feel "lit". */
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(226, 236, 248, 0.88) 100%
    ) !important;
    background-color: transparent;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(226, 236, 248, 0.88) 100%
    ) !important;
    border-color: rgba(25, 118, 210, 0.35);
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.95),
      0 8px 22px rgba(13, 71, 161, 0.10) !important;
    color: #1e293b;
    transform: translateY(-1px);
  }

  /* Force ALL text inside the hovered card to stay dark slate — kills any
     downstream rule that turned it into the same blue as the background. */
  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: #1e293b; }

  /* Keep the eyebrow / muted-meta lighter than the title for hierarchy. */
  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-range { color: #475569; }

  /* CTA arrow chip — keep the blue tint, but bump opacity for clarity. */
  html body .home-dash-card.home-dash-card--link:hover .home-dash-cta { background: rgba(25, 118, 210, 0.18); color: #0D47A1; }

  /* Card now uses two-row layout for the chart + foot zone */
  html body .home-dash-card .home-dash-chart { position: relative; width: 100%; height: 56px; }
  html body .home-dash-card .home-dash-spark .spark-svg { width: 100%; height: 100%; display: block; }

  /* Foot row — delta on the left, 7-day washed bar zone on the right */

  /* Replace the blue delta colors with green / red */
  html body .home-dash-card .home-dash-delta.is-up   { color: #2E7D32; }
  html body .home-dash-card .home-dash-delta.is-down { color: #C62828; }

  /* Washed bottom-right zone — "Last 7 days" label + 7-bar mini chart */
  html body .home-dash-card .home-dash-week {
    display: flex;
    align-items: center !important;
    gap: 0.5rem;
    padding: 4px 8px 4px 8px !important;
    border-radius: 8px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(226, 236, 248, 0.55) 100%
    ) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
  }
  html body .home-dash-card .home-dash-week-bars { width: 78px !important; height: 28px !important; flex: 0 0 auto !important; }
  html body .home-dash-card .home-dash-week-bars .kpi-week-svg { width: 100%; height: 100%; display: block; }

  /* Plain text \u2014 no chip */

  /* Plain text \u2014 no washed glass chip */
  html body .home-dash-card .home-dash-week { background: transparent; border: 0; padding: 0; border-radius: 0; }

  /* Bar graph is taller now (real chart with x-axis labels) */
  html body .home-dash-card .home-dash-week-bars { width: 168px !important; height: 56px !important; }

  /* Foot zone: stack delta on left, bar graph on right with breathing room */

  /* "LAST 7 DAYS" label sits under the bars, right-aligned */
  html body .home-dash-card .home-dash-week { flex-direction: column !important; align-items: flex-end !important; gap: 0.15rem !important; }

  /* Hide the now-removed line-chart slot if any cached HTML still has it */
  html body .home-dash-card .home-dash-chart,

  /* Bar graph fills the card width as the primary chart */
  html body .home-dash-card .home-dash-week-bars--full { width: 100%; height: 88px; margin-top: 0.4rem; }
  html body .home-dash-card .home-dash-week-bars--full .kpi-week-svg { width: 100%; height: 100%; display: block; }

  /* Baseline label sits inline next to "today" */
  html body .home-dash-card .home-dash-kpi { align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }

  /* Foot row \u2014 delta on left, "Last 7 days" label on right */

  /* Baseline label is short ("X/day") now — no more $17K clipping */

  html body.route-ask:not(.ai-has-messages) .ai-view > .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view > .ai-messages,
  html body.route-ask:not(.ai-has-messages) .ai-view > .ai-composer-wrap { flex-shrink: 0; }

  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher::-webkit-scrollbar { width: 6px; }
  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }

  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher { margin-top: -2px; padding-top: 0; gap: 0; }
  html body.route-ask:not(.ai-has-messages) .ai-view > .ai-composer-wrap { margin-bottom: 0; }

  /* 4-column grid (3 KPI cols + 1 totals col). Totals col narrower. */
  html body .home-dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(120px, 0.55fr) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important; }

  /* Place each card explicitly so the totals chip can span rows 1+2 col 4. */
  html body .home-dash-grid .home-dash-card[data-key="office-pest"]     { grid-column: 1; grid-row: 1; }
  html body .home-dash-grid .home-dash-card[data-key="office-weeds"]    { grid-column: 2; grid-row: 1; }
  html body .home-dash-grid .home-dash-card[data-key="office-termites"] { grid-column: 3; grid-row: 1; }
  html body .home-dash-grid .home-dash-card[data-key="d2d-pest"]        { grid-column: 1; grid-row: 2; }
  html body .home-dash-grid .home-dash-card[data-key="d2d-weeds"]       { grid-column: 2; grid-row: 2; }
  html body .home-dash-grid .home-dash-card[data-key="d2d-termites"]    { grid-column: 3; grid-row: 2; }

  /* Totals chip spans full height on the right. Same chip styling as a
     KPI card — dark surface, subtle border, soft inner highlight. */

  /* Section: stacked eyebrow + huge value + tiny "today". Centered. */

  /* Thin divider line between sections. */

  /* Shrink KPI cards so 2 rows + composer fit the viewport (no scroll). */
  html body.route-ask:not(.ai-has-messages) .home-dash-card { min-height: 0; padding: 0.7rem 0.85rem 0.7rem; gap: 0.4rem; }
  html body.route-ask:not(.ai-has-messages) .home-dash-card .home-dash-week-bars--full { height: 70px; }
  html body.route-ask:not(.ai-has-messages) .home-dash-card .home-dash-value { font-size: 1.7rem; line-height: 1; }
  html body.route-ask:not(.ai-has-messages) .home-dash-card .home-dash-eyebrow,
  html body.route-ask:not(.ai-has-messages) .home-dash-card .home-dash-title { font-size: 0.78rem; }

  /* Launcher: no internal scroll on desktop now that everything fits. */
  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher { overflow: hidden; }
}

.sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 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: #1e293b !important; }

.sidebar, .sidebar a, .sidebar button, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar svg { color: #1e293b !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: #1e293b !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: #1e293b !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 .chip, html body .rich-composer .rc-toolbar button:not(.primary):not(.send), html body .rich-composer .rc-toolbar .chip:hover, 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); }

/* v40.5ay: chrome only on the visible composer card; wrap is just a layout
   container (sticky positioning, gradient fade) and must not carry the dark
   card bg/border or clip dropdowns. */
.rich-composer {
  background: #1F2121 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 14px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.32) !important;
  color: #E5E5E5 !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"], .tab.is-active, .chip.is-active, .chip.active, .pill.is-active { background: var(--gl-green-soft) !important; border-color: var(--gl-green-border) !important; color: #e5e7eb !important; }

.home-tab.is-active, .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: #ffffff !important; }
.btn-primary:hover, button.primary:hover { background: #1E88E5 !important; border-color: #1E88E5 !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: #ffffff; }
html body .rc-send:hover { background-image: linear-gradient(180deg, #1E88E5 0%, #1976D2 100%); }
body, .main, .main-content, .page, .ai-view, .content { background-color: #191A1A !important; }

html body .rich-composer, html body .ai-composer-wrap, html body .floating-chat-composer, html body .glass-composer {
  background-color: #1F2121;
  background-image: none;
  background: #1F2121;
  border: 1px solid #444545;
  border-radius: 18px;
  color: #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: #C5C5C4; caret-color: #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: #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: #2B2F2F; border: 1px solid #3a3e3e; color: #D5D4D4; border-radius: 999px; }
.rc-icon-btn svg { display: block; color: #D5D4D4; stroke: #D5D4D4; }

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

html body .rc-chip, html body .rc-model, html body .rich-composer .rc-toolbar .chip, html body .rich-composer .rc-toolbar select { background: #2B2F2F; border: 1px solid #3a3e3e; color: #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: #C5C5C4; }
.rc-mic:hover svg, .composer-mic:hover svg { color: #C5C5C4; stroke: #C5C5C4; }

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

[class*="greeting"] { background-color: #1F2121; 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,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(226, 236, 248, 0.72) 100%
  ) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 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: #1e293b !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: rgba(255, 255, 255, 0.55) !important; }

[data-app-theme="light"] aside.sidebar button[class*="new-chat"] { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.9); 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: #1e293b;
  -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: rgba(255, 255, 255, 0.55); 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(255, 255, 255, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.55) !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: rgba(25, 118, 210, 0.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: #1e293b !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: #1e293b !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: #1e293b !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; }
aside.sidebar .sidebar-label--toggle .core-caret { stroke: rgba(10, 10, 10, 0.4); }

[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; } /* v40.23: fade mask removed -- chat history rows must not fade out at the bottom */

aside.sidebar .sidebar-footer { padding: 0.6rem 0.7rem 0.9rem; background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.06); 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: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #1F2121;
  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: #1F2121;
  opacity: 0.85;
}.settings-view .section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.6rem;
}.settings-view .btn-primary { background: #1976D2; color: #ffffff; 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 .btn-primary:hover { background: #1565C0; transform: translateY(-1px); }

.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; }

.dashboard-lower .chat-panel, .dashboard-lower > .card.chat-panel, .dashboard-view .chat-panel, .dashboard-view .chat-panel.card { background: radial-gradient(ellipse 560px 340px at 8% 6%, rgba(25, 118, 210, 0.06), rgba(25, 118, 210, 0) 70%), linear-gradient(180deg, #1E1F1F 0%, #17181A 100%) !important; border: 1px solid rgba(234, 235, 236, 0.08) !important; color: #EAEBEC !important; }

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

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

.dashboard-lower > .card.chat-panel, .dashboard-lower .chat-panel, .dashboard-view .chat-panel.card, .dashboard-view .chat-panel { background: #1F2121; border: 1px solid rgba(25, 118, 210, 0.28); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.automation-row { display: flex; align-items: center; gap: 0.7rem; border: 1px solid rgba(25, 118, 210, 0.28); background: #1F2121; border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 0.5rem; }
.automation-row .auto-status { width: 10px; height: 10px; border-radius: 50%; margin-top: 0; flex-shrink: 0; align-self: center; }

.automation-row .auto-status.on { background: #1976D2; box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.18); }

.automation-row .auto-status.off { background: rgba(234, 235, 236, 0.32); box-shadow: none; }

.automation-row .automation-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }

.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;
}html body .floating-chat-composer .chat-textarea { font-family: var(--font-body); }
.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: #1976D2; border-color: rgba(25, 118, 210, 0.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 rgba(25, 118, 210, 0.28);
  border-radius: 12px;
  color: #EAEBEC;
  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: #1976D2; color: #1F2121; 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, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border: 1px solid rgba(25, 118, 210, 0.18); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.automation-card { background: #1F2121; border: 1px solid rgba(25, 118, 210, 0.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 .auto-status { width: 10px; height: 10px; border-radius: 50%; margin-top: 0; flex-shrink: 0; align-self: center; }
.automation-card .auto-status.on { background: #1976D2; box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.18); }
.automation-card .auto-status.off { background: rgba(234, 235, 236, 0.32); }
.automation-card-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.automation-card-title { color: #EAEBEC; 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 rgba(255, 255, 255, 0.05); }
.automation-card-metric { color: rgba(234, 235, 236, 0.6); font-size: 0.82rem; }
.automation-card-metric strong { color: #EAEBEC; 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: #D5D4D4; cursor: pointer; }
.btn-ghost.btn-ghost--sm:hover { background: rgba(255, 255, 255, 0.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: #FFFFFF; transition: transform 160ms ease; }
.toggle-switch.toggle-switch--inline input:checked + .toggle-track { background: #1976D2; }
.toggle-switch.toggle-switch--inline input:checked + .toggle-track::before { transform: translateX(16px); }

@media (max-width: 420px) {
  html body .quick-actions-grid { grid-template-columns: 1fr; }
}

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: #EAEBEC; font-size: 0.95rem; transition: border-color 220ms ease, box-shadow 220ms ease; }
html body .floating-chat-composer .chat-textarea:focus { border-color: #1976D2; }

/* v40.14 — Ask AI now slides in as a right side panel, not a full-screen
   blurred overlay. Backdrop is fully transparent and non-blurring so the
   dashboard behind it stays crisp and undimmed, matching the customer
   drawer's desktop treatment. Kept as a click-outside-to-close hit target
   on mobile only (see the <821px override below). */
.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 rgba(255, 255, 255, 0.06); 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: #EAEBEC; 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: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(234, 235, 236, 0.14);
  color: #D5D4D4;
  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: rgba(255, 255, 255, 0.10); border-color: rgba(234, 235, 236, 0.3); color: #FFFFFF; }

.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. */
@media (min-width: 821px) {
  html body .floating-chat-panel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 420px !important;
    max-width: 420px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0F0F10 !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55) !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
    opacity: 1 !important;
    scale: 1 !important;
    pointer-events: none !important;
    z-index: 1200 !important;
  }
  html body .floating-chat.open .floating-chat-panel {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  /* Neutralize the base translateY(16px)/scale(.98) rule that was overriding the slide-in. */
  html body .floating-chat .floating-chat-panel,
  html body .floating-chat.open .floating-chat-panel { opacity: 1 !important; }
  /* Parent anchor must not clip or offset the fixed panel. */
  html body .floating-chat { position: fixed !important; right: 0 !important; bottom: var(--space-6) !important; pointer-events: none !important; }
  html body .floating-chat.open { right: 0 !important; bottom: 0 !important; top: 0 !important; }
  html body .floating-chat-backdrop { display: none !important; }
}

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: #FFFFFF; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); }
.floating-chat-composer .composer-mic:hover { background: rgba(25, 118, 210, 0.10); border-color: rgba(25, 118, 210, 0.45); color: #EAEBEC; }

.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: rgba(25, 118, 210, 0.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: rgba(255, 255, 255, 0.08); color: #D5D4D4; }

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

.floating-chat-composer .composer-actions .composer-send:hover { background: #1976D2; color: #FFFFFF; }
.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-section .section-body .nav-item .nav-label, 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: #8F8E8C; }

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: #0D47A1; }

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active { background: rgba(25, 118, 210, 0.18); background-color: rgba(25, 118, 210, 0.18); background-image: none; border: 0 solid transparent; color: #0D47A1; }
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active svg, body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active .nav-label { color: #0D47A1; stroke: #0D47A1; }

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: #1F2121 !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 .sidebar-label--toggle .core-caret { transition: transform 180ms ease; }
body:not(.sidebar-collapsed) aside.sidebar .sidebar-label--toggle[aria-expanded="false"] .core-caret { transform: rotate(-90deg); }
body:not(.sidebar-collapsed) aside.sidebar .sidebar-label--toggle[aria-expanded="true"] .core-caret { transform: rotate(0deg); }

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: #B8B8B8; 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: #0D47A1 !important; }
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active .history-title { color: #0D47A1; 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: #1976D2; box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.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: #8A8A8A; padding: 0.3rem 0.65rem; display: inline-block; margin-top: 0.25rem; }
body:not(.sidebar-collapsed) aside.sidebar .sidebar-history-viewall:hover { color: #0D47A1 !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; }

/* v40.5ay: thinking block colors fixed for dark theme at the source.
   Was authored for light bg with #0F172A active / #334155 done text.
   Single source of truth, no later overrides needed. */
.ai-thinking { align-items: center; gap: 0.75rem; color: #B8B8B8; font-size: 0.88rem; display: block; padding: 0.6rem 0 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.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: #E5E5E5; font-weight: 500; }
.ai-thinking .thinking-step.is-done { color: rgba(184, 184, 184, 0.78); }
.ai-thinking .thinking-step .tk-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: rgba(148, 163, 184, 0.5); transition: background-color 180ms ease, box-shadow 180ms ease; }
.ai-thinking .thinking-step.is-active .tk-dot { background: #1976D2; box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.18); animation: gl-thinking-pulse 1.6s ease-out infinite; }
.ai-thinking .thinking-step.is-done .tk-dot { background: rgba(25, 118, 210, 0.85); }
.ai-thinking .thinking-step .tk-body { flex: 1 1 auto; min-width: 0; }
.ai-thinking .thinking-step .tk-label { color: inherit; }
.ai-thinking .thinking-step .tk-meta { color: rgba(184, 184, 184, 0.65); font-size: 0.76rem; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ai-thinking .thinking-step .tk-sources { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 6px; }
.ai-thinking .thinking-step .tk-source {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(33, 150, 243, 0.08);
  border: 1px solid rgba(33, 150, 243, 0.20);
  color: #90CAF9;
  text-decoration: none;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-thinking .thinking-step .tk-source:hover { background: rgba(33, 150, 243, 0.16); border-color: rgba(33, 150, 243, 0.40); color: #E3F2FD; }

.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; }
/* v40.5ay: collapsed state keeps a faint separator line so the answer below
   reads as a distinct section, not glued onto the thinking summary. */
.ai-thinking.is-collapsed { border-bottom: 1px solid rgba(255, 255, 255, 0.06); 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: #0D47A1 !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: rgba(25, 118, 210, 0.18) !important; background-color: rgba(25, 118, 210, 0.18) !important; border: 0 solid transparent !important; color: #0D47A1 !important; }
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active svg { color: #1976D2 !important; stroke: #1976D2 !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: #0D47A1; }
.gl-floating-pill .gfp-item.active { background: rgba(25, 118, 210, 0.18); color: #0D47A1; 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: rgba(25, 118, 210, 0.14); color: #0D47A1; }
.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; }

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

  /* iter12f audit: REMOVED dead `.main, #main { padding-top: --mt-h + SAT + 20 }`
     — was adding ~64+SAT pixels of top padding (--mt-h is 44px). Stacked
     with the iter11 padding (later overridden to 0 in iter12f) it created
     extra dead space. iter12f puts the chip offset on the inner view
     containers (.dashboard-view, .settings-view, etc.) only. */

  html body .topbar .gl-floating-pill { display: none; }

  .notif-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto;
    max-height: 70vh;
    border-radius: 18px;
    background: rgba(22, 24, 26, 0.98);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 500;
  }
  .notif-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
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-divisions-header { margin: 1rem 0 1.5rem 0; }
.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: rgba(255, 255, 255, 0.85);
  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: rgba(25, 118, 210, 0.35); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 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: #0D47A1; }
.gl-division-card .gdc-title { font-size: 1.05rem; font-weight: 600; color: #0D47A1; letter-spacing: -0.005em; }
.gl-division-card .gdc-meta { font-size: 0.8rem; color: rgba(15, 23, 42, 0.6); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; letter-spacing: 0.01em; }
.gl-division-card .gdc-cta { align-self: end; font-size: 0.82rem; font-weight: 500; color: #0D47A1; opacity: 0.82; transition: opacity 140ms ease, transform 140ms ease; }
.gl-division-card:hover .gdc-cta { opacity: 1; transform: translateX(2px); }
.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: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.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: #42A5F5; }
.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: rgba(255, 255, 255, 0.92); font-weight: 600; }
.gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat:hover { background: rgba(25, 118, 210, 0.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 rgba(255, 255, 255, 0.06); 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: #B8B8B8 !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: #8A8A8A;
}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: #0D47A1; 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-ds-title { font-size: 1.6rem; font-weight: 600; color: #0D47A1; margin: 0 0 0.35rem 0; letter-spacing: -0.01em; }
.gl-ds-sub { font-size: 0.92rem; color: rgba(15, 23, 42, 0.65); margin: 0 0 1rem 0; max-width: 62ch; }
.gl-ds-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-ds-stats .gl-ds-stat strong { color: #0D47A1; font-weight: 600; }
.gl-ds-section + .gl-ds-section { margin-top: 1.75rem; }
.gl-ds-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-ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.gl-ds-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-ds-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); }
.gl-ds-card.is-connected { border-color: rgba(25, 118, 210, 0.45); background: linear-gradient(180deg, rgba(240, 253, 244, 0.92) 0%, rgba(255, 255, 255, 0.9) 100%); }
.gl-ds-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: #0D47A1; grid-row: 1 / span 2; flex-shrink: 0; }
.gl-ds-card.is-connected .gds-icon { background: rgba(25, 118, 210, 0.22); }
.gl-ds-card .gds-body { min-width: 0; }
.gl-ds-card .gds-title-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.gl-ds-card .gds-title { font-size: 0.98rem; font-weight: 600; color: #0D47A1; letter-spacing: -0.003em; }
.gl-ds-card .gds-chip { font-size: 0.7rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: rgba(15, 23, 42, 0.58); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
.gl-ds-card .gds-chip--connected { background: rgba(25, 118, 210, 0.18); color: #0D47A1; }
.gl-ds-card .gds-desc { font-size: 0.82rem; line-height: 1.5; color: rgba(15, 23, 42, 0.62); margin: 0; }
.gl-ds-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: #fff;
  background: #1976D2;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  font-family: inherit;
}
.gl-ds-card .gds-cta:hover { background: #1976D2; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(25, 118, 210, 0.28); }
.gl-ds-card .gds-cta--disconnect { background: transparent; color: #0D47A1; box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.25); }
.gl-ds-card .gds-cta--disconnect:hover { background: rgba(13, 71, 161, 0.06); color: #0D47A1; box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.4); }

.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 rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(15, 23, 42, 0.06),
    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: #0D47A1; }
.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item.active { background: #1976D2; color: #ffffff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.35), 0 2px 8px rgba(25, 118, 210, 0.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: #0D47A1; }
.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-ds-view .gl-ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.topbar .pill.pill--glass {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
          backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.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: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.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: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.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-ds-view {
  max-width: 1120px;
  margin: 1.25rem auto 3rem auto;
  padding: 1.75rem 2rem 2.25rem 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 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 { padding: 1rem 1.5rem 0 1.5rem; }

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

.gl-ds-card { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(15, 23, 42, 0.06) !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; }

.floating-chat-messages .msg--plex.msg--floating { width: 100%; max-width: 100%; background: transparent; padding: 0; margin: 0 0 0.6rem 0; }
.floating-chat-messages .msg--plex.msg--floating .ai-thinking { margin: 0 0 0.4rem 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.floating-chat-messages .msg--plex.msg--floating .ai-thinking-text { color: rgba(223, 246, 230, 0.95); font-size: 0.78rem; letter-spacing: 0.01em; }
.floating-chat-messages .msg--plex.msg--floating .ai-thinking .thinking-step .tk-label { color: rgba(255, 255, 255, 0.88); }
.floating-chat-messages .msg--plex.msg--floating .ai-thinking .thinking-step .tk-meta { color: rgba(255, 255, 255, 0.55); }
.floating-chat-messages .msg--plex.msg--floating .ai-thinking .thinking-step .tk-dot { background: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.22); }
.floating-chat-messages .msg--plex.msg--floating .ai-prose { color: rgba(255, 255, 255, 0.92); font-size: 0.85rem; line-height: 1.55; }

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: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.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 #2A2A2A; color: #B8B8B8; -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: #B8B8B8 !important; }

.topbar #etl-pill.pill--glass, .topbar #etl-pill.pill--glass * { color: #B8B8B8 !important; }
.topbar #backfill-pill.pill--glass { background: rgba(31, 33, 33, 0.92); background-image: none; border: 1px solid #2A2A2A; color: #B8B8B8; }

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: #FFFFFF !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: #FFFFFF !important; }

.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 rgba(255, 255, 255, 0.85) !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: #B8B8B8 !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: #8A8A8A; }
[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 .sidebar-quick-item[aria-expanded="false"] .sqi-caret { transform: rotate(-90deg); opacity: 0.45; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item[aria-expanded="true"] .sqi-caret { transform: rotate(0deg); opacity: 0.7; }

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: #8A8A8A; }
[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, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-caret { 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 + .settings-block { margin-top: 40px; }
.settings-view--v1929 .settings-block-head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(15, 23, 42, 0.10); }
.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 .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.settings-view--v1929 .settings-block > .settings-row:last-child { border-bottom: 0; }

.settings-view--v1929 .settings-row-label { min-width: 0; flex: 1 1 auto; }
.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-outline-btn:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.28); }

.settings-view--v1929 .settings-inline-link { color: #0D47A1; text-decoration: none; font-size: 0.82rem; font-weight: 500; }
.settings-view--v1929 .settings-inline-link:hover { text-decoration: underline; }
.settings-view--v1929 .settings-sep { color: rgba(15, 23, 42, 0.30); margin: 0 6px; }

.settings-view--v1929 .settings-row--identity { padding-top: 12px; }
.settings-view--v1929 .settings-identity { display: flex; align-items: center; gap: 14px; }
.settings-view--v1929 .settings-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(145deg, #0D47A1 0%, #1976D2 100%);
  color: #fff;
  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: #fff;
  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 rgba(25, 118, 210, 0.28); border-radius: 14px; padding: 14px 16px; margin: 10px 0 0 0; }
.settings-view--v1929 .settings-promo-body { flex: 1 1 auto; min-width: 0; }
.settings-view--v1929 .settings-promo-title { font-size: 0.9rem; font-weight: 600; color: #42A5F5; 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: #0D47A1;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}
.settings-view--v1929 .settings-promo-btn:hover { background: #0D47A1; transform: translateY(-1px); }

.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 { border-bottom-color: rgba(255, 255, 255, 0.10); }

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

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

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

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

body[data-theme="dark"] .settings-view--v1929 .settings-outline-btn { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); }

body[data-theme="dark"] .settings-view--v1929 .settings-outline-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.30); }

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

@media (max-width: 680px) {
  .gl-ds-view .gl-ds-grid { grid-template-columns: 1fr !important; }
}

.gl-ds-view .gl-ds-card { padding: 14px 14px 12px 14px; min-height: 140px; }
html body .gl-ds-view .gl-ds-card .gds-title { font-size: 0.92rem !important; }
.gl-ds-view .gl-ds-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: rgba(255, 255, 255, 0.92) !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 rgba(15, 23, 42, 0.06) !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: #FFFFFF !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, #1976D2 0%, #0D47A1 100%) !important; color: #FFFFFF !important; }

aside.sidebar#sidebar .footer-org-tier-badge[data-tier="max"] { background: linear-gradient(180deg, #64B5F6 0%, #42A5F5 100%) !important; color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(33, 150, 243, 0.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; }

.ai-hero .ai-hero-card:hover::before { animation: none; opacity: 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: #FFFFFF;
  color: #0F172A;
  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: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18); }
.settings-inline-edit .settings-inline-save, .settings-inline-edit .settings-inline-cancel { height: 32px; padding: 0 12px; border-radius: 8px; font: 600 0.82rem/1 'Satoshi', system-ui, sans-serif; cursor: pointer; border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
.settings-inline-edit .settings-inline-save { background: #1976D2; color: #FFFFFF; border-color: #1976D2; }
.settings-inline-edit .settings-inline-save:hover { background: #1976D2; border-color: #1976D2; }
.settings-inline-edit .settings-inline-cancel { background: transparent; color: #475569; border-color: rgba(15, 23, 42, 0.16); }
.settings-inline-edit .settings-inline-cancel:hover { background: rgba(15, 23, 42, 0.04); }

.gl-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: #1F2121;
  color: #E8E7E5;
  border: 1px solid rgba(255, 255, 255, 0.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: #E8E7E5;
  border-radius: 16px;
  padding: 22px 22px 20px;
  width: min(92vw, 460px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 32px 80px rgba(0, 0, 0, 0.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: #E8E7E5 !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: #64B5F6;
}
.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: #C5C5C4; border-color: rgba(255, 255, 255, 0.18); }
.gl-confirm-btn--cancel:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.28); }
.gl-confirm-btn--primary { background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%); color: #FFFFFF; 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: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.08); border-radius: 10px; font: 500 0.82rem/1.2 'Satoshi', system-ui, sans-serif; color: #E8E7E5; }
.gl-upload-chip-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-upload-chip-size { color: #8F8E8C; font-size: 0.76rem; flex: 0 0 auto; }
.gl-upload-chip-remove { background: transparent; border: 0; color: #8F8E8C; 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, button.settings-outline-btn--danger { color: #B91C1C; border-color: rgba(220, 38, 38, 0.35); }
.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 .topnav, 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%, rgba(25, 118, 210, 0.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 rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  color: #E8E7E5;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  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: #C5C5C4; letter-spacing: 0.02em; }
.auth-field input { height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.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-field input:focus { border-color: rgba(25, 118, 210, 0.65); background: rgba(15, 16, 17, 1); box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.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: #1976D2; }
.auth-link, .auth-link-muted { color: #42A5F5; 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: #C5C5C4; }
.auth-primary-btn {
  height: 44px;
  margin-top: 6px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, #1976D2 0%, #1976D2 100%);
  color: #FFFFFF;
  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 rgba(25, 118, 210, 0.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: #42A5F5; border: 1px solid rgba(25, 118, 210, 0.35); }
.auth-foot  { font-size: 0.86rem; color: #9CA3A3; margin: 20px 0 0; }

.settings-view.settings-view--compact { max-width: 640px; margin: 32px auto; padding: 8px 20px 64px; width: auto; }
.settings-view.settings-view--compact .settings-block { margin-bottom: 28px; }
.settings-view.settings-view--compact .settings-block-head h2 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: #C5C5C4; text-transform: none; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.settings-view.settings-view--compact .settings-row { padding: 12px 0; align-items: center; gap: 16px; }
.settings-view.settings-view--compact .srl-title { font-size: 0.88rem; font-weight: 600; color: #E8E7E5; }
.settings-view.settings-view--compact .srl-value { font-size: 0.8rem; color: #8F8E8C; margin-top: 2px; }
.settings-view.settings-view--compact .settings-outline-btn { height: 30px; padding: 0 14px; border-radius: 999px; background: transparent; color: #E8E7E5; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.settings-view.settings-view--compact .settings-outline-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.24); }
.settings-view.settings-view--compact .settings-outline-btn--danger, .settings-view.settings-view--compact button.settings-outline-btn--danger { color: #F87171; border-color: rgba(248, 113, 113, 0.35); }
.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-avatar { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, #1976D2, #0D47A1); color: #FFFFFF; font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; }
.settings-view.settings-view--compact .settings-avatar--image { background-size: cover; background-position: center; color: transparent; }
.settings-view.settings-view--compact .settings-identity-name { font-size: 0.95rem; font-weight: 600; color: #F5F4F1; }
.settings-view.settings-view--compact .settings-identity-handle { font-size: 0.8rem; color: #8F8E8C; }

.settings-view.settings-view--compact .settings-row-muted { font-size: 0.78rem; color: #6B6F70; font-style: italic; }

.settings-view.settings-view--compact .settings-inline-edit { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.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: #1976D2;
  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:focus { border-color: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18); }
.settings-view.settings-view--compact .settings-inline-edit input::selection { background: rgba(25, 118, 210, 0.35); color: #FFFFFF; }
.settings-view.settings-view--compact .settings-inline-save, .settings-view.settings-view--compact .settings-inline-cancel { height: 32px; padding: 0 14px; border-radius: 999px; font: 600 0.8rem/1 'Satoshi', system-ui, sans-serif; cursor: pointer; border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease, filter 120ms ease; }
.settings-view.settings-view--compact .settings-inline-save { background: #1976D2 !important; color: #FFFFFF !important; border-color: #1976D2 !important; }
.settings-view.settings-view--compact .settings-inline-save:hover { filter: brightness(1.08); }
.settings-view.settings-view--compact .settings-inline-cancel { background: transparent; color: #C5C5C4; border-color: rgba(255,255,255,0.16); }
.settings-view.settings-view--compact .settings-inline-cancel:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.24); }

.settings-view.settings-view--compact .sub-tier-chip { font-size: 0.72rem; padding: 2px 9px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 6px; }

.settings-view.settings-view--compact .settings-promo--glass {
  background:
    linear-gradient(135deg, rgba(25, 118, 210, 0.18) 0%, rgba(25, 118, 210, 0.06) 100%),
    rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(25, 118, 210, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.settings-view.settings-view--compact .settings-promo--glass::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 50%, rgba(66, 165, 245, 0.12) 0%, transparent 60%); pointer-events: none; }
.settings-view.settings-view--compact .settings-promo-btn { flex-shrink: 0; height: 30px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #F5F4F1 !important; font: 600 0.8rem/1 'Satoshi', system-ui, sans-serif; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; position: relative; z-index: 1; }
.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: #0F172A;
  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: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.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 .sqi-caret { display: none; }

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%, rgba(255,255,255,0.05) 0%, transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(255,255,255,0.03) 0%, transparent 55%), #0C0D0E; }
.auth-card.auth-card--glass { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; color: #E8E7E5 !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.18); 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 rgba(255, 255, 255, 0.08); }

.auth-card--glass .auth-primary-btn { background: linear-gradient(180deg, rgba(255,255,255,0.92) 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, #FFFFFF 0%, #F5F5F4 100%); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

.auth-card--glass .auth-link, .auth-card--glass .auth-link-muted { color: #C5C5C4 !important; }
.auth-card--glass .auth-link:hover { color: #F3F2EF; }
.auth-card--glass .auth-link-muted:hover { color: #E8E7E5; }
.auth-card--glass .auth-check input { accent-color: #C5C5C4; }

.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: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.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: #E8E7E5; background: rgba(255, 255, 255, 0.06); }
.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: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.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; }

.chip, .tag, .composer-chip, [class*="chip"], [class*="tag"] { border-color: var(--chip-outline); background-color: var(--chip-bg); }
.chip:hover,

.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 rgba(255,255,255,0.06); }

.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, #2196F3); 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, #2196F3); box-shadow: 0 0 8px rgba(33, 150, 243, 0.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, #42A5F5); 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, #9AA0A6); }

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, #9AA0A6); }
.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; }

:root {
  --pill-h: 38px;
  --pill-pad-x: 14px;
  --pill-radius: 999px;
  --pill-font: 'Satoshi', 'Inter', system-ui, sans-serif;
  --pill-font-size: 0.78rem;
  --pill-letter: 0.01em;
  --gl-green: #1976D2;
  --gl-green-soft: rgba(25, 118, 210, 0.14);
  --gl-green-border: rgba(25, 118, 210, 0.38);
  --gl-neutral-border: rgba(255, 255, 255, 0.18);
  --n4-accent: #1976D2;
  --n4-accent-soft: rgba(25, 118, 210, 0.28);
  --muted: #8A8F9C;
  --faint: #666B78;
  --border: #3A4050;
  --surface: #191A1A;
  --surface-2: #1F2121;
  --surface-3: #24262C;
  --ntl-main: #191A1A;
  --ntl-panel-wrap: #2C3344;
  --ntl-tab-active: #2F4B5D;
  --ntl-tab-outline: #3A4050;
  --ntl-tab-text: #777E90;
  --ntl-sep: #262727;
  --ntl-title: #B5B7BE;
  --ntl-chatbox-bg: #1F2121;
  --ntl-chatbox-text: #E8E7E5;
  --ntl-upload-bg: #252322;
  --ntl-upload-text: #D5D4D4;
  --ntl-dictate: #949494;
  --ntl-accent: #1976D2;
  --primary-strong: #B5B7BE;
  --primary-ink: #191A1A;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cabinet Grotesk', 'Satoshi', 'Inter', system-ui, sans-serif;

  --text-sm: .875rem;
  --text-base: 1rem;

  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-lg: 18px;
  --radius-xl: 24px;

  --bg: #171614;
  --border-soft: rgba(255, 255, 255, 0.06);
  --text: #e3e1dd;

  --totaly-blue-50:  #E3F2FD;
  --totaly-blue-100: #BBDEFB;
  --totaly-blue-300: #64B5F6;
  --totaly-blue-400: #42A5F5;
  --totaly-blue-500: #2196F3;
  --totaly-blue-600: #1E88E5;
  --totaly-blue-700: #1976D2;
  --totaly-blue-900: #0D47A1;

  --primary:        var(--totaly-blue-600);
  --success: var(--totaly-blue-400);
  --warning: #e8af34;
  --danger:  #d163a7;

  --chip-outline:    rgba(100, 181, 246, 0.32);
  --chip-bg:         rgba(33, 150, 243, 0.08);

  --tier-max-ink:    var(--totaly-blue-100);
  --tier-max-bg:     rgba(144, 202, 249, 0.18);
  --tier-max-outline: rgba(144, 202, 249, 0.50);
  --tier-ent-ink:    var(--totaly-blue-50);
  --tier-ent-bg:     rgba(21, 101, 192, 0.28);
  --tier-ent-outline: rgba(13, 71, 161, 0.65);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.28);

  --z-sidebar: 10;
  --z-topbar: 20;
  --z-modal: 100;
  --z-toast: 200;
  --gl-chat-bg: #1F2121;
  --gl-chat-border: #2A2928;
  --gl-chat-text: #E8E7E5;
  --gl-chat-muted: #8F8E8C;
  --gl-chat-send: #7A7978;
  --gl-chat-send-ink: #1E1D1C;
  --mt-h: 44px;
  --mt-gap: 10px;
  --mt-glass-bg: rgba(42, 44, 46, 0.72);
  --mt-glass-bg-hover: rgba(52, 54, 56, 0.85);
  --mt-glass-stroke: rgba(255, 255, 255, 0.07);
}

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

/* ── DARK (default) ────────────────────────────────────────────────── */
:root,
[data-app-theme="dark"] {
  --bg-app:            #171614;
  --bg-card:           #1F2121;
  --bg-card-hover:     #252727;
  --bg-glass:          rgba(25, 26, 26, 0.82);
  --bg-sidebar:        #191A1A;

  --fg-primary:        #E3E1DD;
  --fg-secondary:      #B5B7BE;
  --fg-muted:          #8A8F9C;
  --fg-inverse:        #191A1A;

  --border-card:       rgba(255, 255, 255, 0.07);
  --border-soft:       rgba(255, 255, 255, 0.06);
  --border-strong:     rgba(255, 255, 255, 0.18);

  --accent-primary:    #1976D2;
  --accent-up:         #2E7D32;
  --accent-down:       #C62828;
  --accent-flat:       rgba(60, 64, 67, 0.85);

  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.36);
  --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.48);
}

/* ── LIGHT ─────────────────────────────────────────────────────────── */
[data-app-theme="light"] {
  --bg-app:            #F7F8FA;
  --bg-card:           #FFFFFF;
  --bg-card-hover:     #F0F2F5;
  --bg-glass:          rgba(255, 255, 255, 0.92);
  --bg-sidebar:        #FFFFFF;

  --fg-primary:        #1A1C1E;
  --fg-secondary:      #3C4043;
  --fg-muted:          #6B7280;
  --fg-inverse:        #FFFFFF;

  --border-card:       rgba(0, 0, 0, 0.08);
  --border-soft:       rgba(0, 0, 0, 0.06);
  --border-strong:     rgba(0, 0, 0, 0.18);

  --accent-primary:    #1976D2;
  --accent-up:         #2E7D32;
  --accent-down:       #C62828;
  --accent-flat:       rgba(60, 64, 67, 0.85);

  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.14);
}

/* ── OG (Original Greenleaf — leafy green-on-cream) ────────────────── */
[data-app-theme="og"] {
  --bg-app:            #FAF7EE;
  --bg-card:           #F4F1E6;
  --bg-card-hover:     #EDE9D9;
  --bg-glass:          rgba(250, 247, 238, 0.92);
  --bg-sidebar:        #EDE9D9;

  --fg-primary:        #1C2B1E;
  --fg-secondary:      #2E5D3A;
  --fg-muted:          #5A7A5E;
  --fg-inverse:        #FAF7EE;

  --border-card:       rgba(46, 93, 58, 0.14);
  --border-soft:       rgba(46, 93, 58, 0.08);
  --border-strong:     rgba(46, 93, 58, 0.28);

  --accent-primary:    #2E5D3A;
  --accent-up:         #2E7D32;
  --accent-down:       #C62828;
  --accent-flat:       rgba(60, 64, 67, 0.85);

  --shadow-card:       0 2px 12px rgba(46, 93, 58, 0.12);
  --shadow-card-hover: 0 6px 24px rgba(46, 93, 58, 0.20);
}

/* ── 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);
}

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

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

/* 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"] .automation-card,
[data-app-theme="og"] .automation-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

[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);
}

[data-app-theme="light"] .division-kpi-card,
[data-app-theme="og"] .division-kpi-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);
}

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

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

[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,
[data-app-theme="og"] .settings-block-head {
  border-bottom-color: var(--border-soft);
}

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

[data-app-theme="light"] .settings-row,
[data-app-theme="og"] .settings-row {
  border-bottom-color: var(--border-soft);
}

[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;
}

[data-app-theme="light"] .settings-outline-btn:hover,
[data-app-theme="og"] .settings-outline-btn:hover {
  background: var(--bg-card-hover);
}

/* Modals */
[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;
}

[data-app-theme="light"] .msg--user .msg-bubble,
[data-app-theme="og"] .msg--user .msg-bubble {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}

/* 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 */
[data-app-theme="og"] .sidebar-footer--v1940 {
  background: var(--bg-sidebar);
  border-top-color: var(--border-soft);
}

/* Light: sidebar footer */
[data-app-theme="light"] .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 */
[data-app-theme="light"] .section-eyebrow,
[data-app-theme="og"] .section-eyebrow {
  color: var(--fg-muted);
}

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

/* 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);
}

[data-app-theme="light"] .division-card,
[data-app-theme="og"] .division-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, rgba(255,255,255,0.18));
  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, #8A8F9C);
  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, rgba(255,255,255,0.18));
}

.theme-switcher-btn.active,
.theme-switcher-btn[aria-pressed="true"] {
  background: var(--accent-primary, #1976D2);
  color: #fff;
}

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

/* 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, #8A8F9C);
}

.color-picker-item input[type="color"] {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.18));
  padding: 2px;
  background: var(--bg-card, #1F2121);
  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, rgba(255,255,255,0.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;
}

/* END WAVE-2 THEME SYSTEM */

@media (min-width: 821px) {
  

  aside.sidebar { width: 228px; min-width: 228px; max-width: 228px; }

  .sidebar-footer.sidebar-footer--v1940

  html body .sidebar-footer--v1940 .footer-org-pill { flex: 1 1 auto; min-width: 0; }

  .sidebar-footer--v1940 .footer-org-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #000;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.75) inset,
      0 0 0 2px #000 inset,
      0 2px 10px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  .sidebar-footer--v1940 .footer-org-avatar > img.footer-org-avatar-img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 999px; object-fit: cover; display: block; }

  .sidebar-footer--v1940 .footer-notif-btn,
  .sidebar-footer--v1940 .footer-settings-btn {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: rgba(230,232,235,0.78);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }
  .sidebar-footer--v1940 .footer-notif-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .sidebar-footer--v1940 .footer-settings-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .sidebar-footer--v1940 .footer-notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--totaly-blue-500, #2196F3); box-shadow: 0 0 0 2px rgba(18,19,20,0.98), 0 0 8px rgba(33,150,243,0.65); display: none; }

  html body aside.sidebar { overflow: visible; }
  html body aside.sidebar .sidebar-scroll

  aside.sidebar .sidebar-footer.sidebar-footer--v1940, aside.sidebar .sidebar-footer.sidebar-footer--v1940.sidebar-footer { position: sticky; bottom: 0; margin: 0; padding: 10px 10px calc(4px + env(safe-area-inset-bottom, 0px)) 10px; border-top: 1px solid rgba(255,255,255,0.14); background: rgba(18, 19, 20, 0.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); z-index: 40; }

  .sidebar-footer--v1940 .footer-org-avatar { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; background: #0d0f11 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.55) inset, 0 1px 4px rgba(0,0,0,0.5) !important; overflow: hidden !important; }
  .sidebar-footer--v1940 .footer-org-avatar > img.footer-org-avatar-img, .sidebar-footer--v1940 .footer-org-avatar-img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 999px; object-fit: cover; object-position: center center; image-rendering: -webkit-optimize-contrast; display: block; }

  .notif-panel {
    position: fixed !important;
    left: 12px !important;
    right: auto;
    bottom: 72px !important;
    top: auto;
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    min-width: 360px !important;
    max-height: 62vh !important;
    padding: 6px !important;
    border-radius: 16px !important;

    background: rgba(34, 38, 44, 0.72) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.55),
      0 0 0 1px rgba(33,150,243,0.08) inset,
      0 -1px 0 rgba(255,255,255,0.04) inset !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    transform-origin: bottom left;
    z-index: 1200 !important;
  }

  aside.sidebar .sidebar-footer .footer-settings-link.footer-org-pill { background: transparent; border: 0; box-shadow: none; padding: 6px 6px; gap: 10px; border-radius: 10px; }
  aside.sidebar .sidebar-footer .footer-settings-link.footer-org-pill:hover { background: rgba(255,255,255,0.04); }  .sidebar-footer--v1940 .footer-org-tier-badge { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; background: rgba(22,24,26,0.95); color: rgba(230,232,235,0.85); border: 1px solid rgba(255,255,255,0.12); text-transform: none; line-height: 1.2; }
  .sidebar-footer--v1940 .footer-org-tier-badge[data-tier="max"] { color: #EBDAA0 !important; border-color: rgba(235,218,160,0.35) !important; }
  .sidebar-footer--v1940 .footer-notif-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; }
  .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; }
  .sidebar-footer--v1940 .footer-notif-btn:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
  .sidebar-footer--v1940 .footer-settings-btn:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
  aside.sidebar .nav-item[data-route="/dashboards"], aside.sidebar a[href="#/dashboards"].nav-item { position: relative; }
  aside.sidebar .nav-item[data-route="/dashboards"]::before, aside.sidebar a[href="#/dashboards"].nav-item::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 22px;
    height: 22px;
    background-image: url("/static/brand-totaly/logo-totaly-beaded.svg?v=v1943c");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    z-index: 2;
  }
  aside.sidebar .nav-item[data-route="/dashboards"]:hover::before, aside.sidebar a[href="#/dashboards"].nav-item:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }

  aside.sidebar .sidebar-footer.sidebar-footer--v1940 { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid rgba(255,255,255,0.10); align-items: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px; gap: 10px; }

  aside.sidebar .sidebar-footer .footer-settings-link.footer-org-pill { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; padding: 4px 4px; }

  .sidebar-footer--v1940 .footer-org-avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; overflow: hidden; border-radius: 8px; align-self: center; }
  .sidebar-footer--v1940 .footer-org-avatar > img.footer-org-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

  .sidebar-footer--v1940 .footer-org-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 2px; line-height: 1.2; }
  .sidebar-footer--v1940 .footer-org-name { color: rgba(232,236,240,0.94); font-size: 0.86rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }

  .sidebar-footer--v1940 .footer-org-tier-row { position: static; left: auto; bottom: auto; display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0; pointer-events: auto; }
  .sidebar-footer--v1940 .footer-org-tier-badge { font-size: 0.66rem; font-weight: 500; letter-spacing: 0; padding: 0; background: transparent; color: rgba(170, 176, 184, 0.78); border: 0; text-transform: none; line-height: 1.2; border-radius: 0; }
  .sidebar-footer--v1940 .footer-org-tier-badge[data-tier="max"] { color: #EBDAA0 !important; }

  .sidebar-footer--v1940 .footer-notif-btn,
  .sidebar-footer--v1940 .footer-settings-btn {
    position: relative;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(170, 176, 184, 0.80) !important;
    border-radius: 6px;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }
  .sidebar-footer--v1940 .footer-notif-btn svg { width: 16px; height: 16px; stroke-width: 1.7; }
  .sidebar-footer--v1940 .footer-settings-btn svg { width: 16px; height: 16px; stroke-width: 1.7; }
  .sidebar-footer--v1940 .footer-notif-btn:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
  .sidebar-footer--v1940 .footer-settings-btn:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }

  .sidebar-footer--v1940 .footer-notif-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: #2196F3; border-radius: 999px; box-shadow: 0 0 0 2px rgba(22,23,24,0.98); }

  aside.sidebar#sidebar .sidebar-footer.sidebar-footer--v1940 { padding: 6px 8px 6px 8px; margin: 0; gap: 6px; display: flex; align-items: center; background: transparent; border-top: 1px solid rgba(255,255,255,0.08); min-height: 0; }

  aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-settings-link.footer-org-pill { padding: 2px 4px; gap: 8px; border-radius: 8px; background: transparent; border: 0; box-shadow: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-link.footer-org-pill:hover { background: rgba(255,255,255,0.04) !important; }

  aside.sidebar#sidebar .footer-org-avatar, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden !important;
    padding: 0;
    position: relative;
    display: inline-block;
    align-self: center !important;
  }
  aside.sidebar#sidebar .footer-org-avatar-img, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; padding: 0; display: block; }

  aside.sidebar#sidebar .footer-org-text, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 1px; line-height: 1.15; }
  aside.sidebar#sidebar .footer-org-name, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-name {
    font-family: 'Satoshi', system-ui, -apple-system, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(232,236,240,0.94) !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    line-height: 1.15;
  }

  aside.sidebar#sidebar .footer-org-tier-row, aside.sidebar#sidebar .sidebar-footer--v1940 .footer-org-tier-row { position: static; left: auto; bottom: auto; margin: 0; padding: 0; display: flex; align-items: center; pointer-events: none; background: transparent; }

  aside.sidebar#sidebar .footer-org-tier-badge, aside.sidebar#sidebar .sidebar-footer--v1940 .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 .footer-org-tier-badge[data-tier="max"], aside.sidebar#sidebar .footer-org-tier-badge[data-tier="pro"], aside.sidebar#sidebar .footer-org-tier-badge[data-tier="free"] {
    height: auto;
    padding: 0;
    background: transparent;
    background-image: none;
    background-color: transparent;
    color: rgba(170, 176, 184, 0.72) !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Satoshi', system-ui, -apple-system, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.15;
    display: inline;
  }

  aside.sidebar#sidebar .sidebar-footer--v1940 .footer-notif-btn, aside.sidebar#sidebar .sidebar-footer .footer-notif-btn, .sidebar-footer .footer-notif-btn {
  aside.sidebar#sidebar .sidebar-footer--v1940 .footer-settings-btn, aside.sidebar#sidebar .sidebar-footer .footer-settings-btn, .sidebar-footer .footer-settings-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    color: rgba(170, 176, 184, 0.80) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    cursor: pointer;
    outline: 0;
  }
  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn:hover, .sidebar-footer .footer-notif-btn:hover { background: transparent; color: #fff; border: 0; box-shadow: none; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn:hover, .sidebar-footer .footer-settings-btn:hover { background: transparent; color: #fff; border: 0; box-shadow: none; }
  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn:focus, aside.sidebar#sidebar .sidebar-footer .footer-notif-btn:focus-visible { outline: 0; box-shadow: none; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn:focus, aside.sidebar#sidebar .sidebar-footer .footer-settings-btn:focus-visible { outline: 0; box-shadow: none; }
  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn svg, .sidebar-footer .footer-notif-btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn svg, .sidebar-footer .footer-settings-btn svg { width: 16px; height: 16px; stroke-width: 1.75; }

  aside.sidebar#sidebar .sidebar-footer .footer-notif-dot, .sidebar-footer .footer-notif-dot { position: absolute; top: 0; right: 0; width: 6px; height: 6px; background: #2196F3; border-radius: 999px; box-shadow: 0 0 0 1.5px rgba(22,23,24,0.98); }
  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn, .sidebar-footer .footer-notif-btn { backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn, .sidebar-footer .footer-settings-btn { backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; }

  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn, .sidebar-footer .footer-notif-btn { color: rgba(55, 65, 81, 0.78) !important; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn, .sidebar-footer .footer-settings-btn { color: rgba(55, 65, 81, 0.78) !important; }
  aside.sidebar#sidebar .sidebar-footer .footer-notif-btn:hover, .sidebar-footer .footer-notif-btn:hover { color: #111827; background: transparent; }
  aside.sidebar#sidebar .sidebar-footer .footer-settings-btn:hover, .sidebar-footer .footer-settings-btn:hover { color: #111827; background: transparent; }

  aside.sidebar#sidebar .sidebar-footer .footer-notif-dot, .sidebar-footer .footer-notif-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.92) !important; }

  aside.sidebar#sidebar .sidebar-footer .footer-org-name, .sidebar-footer .footer-org-name { color: #111827; }

  aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge, .sidebar-footer .footer-org-tier-badge, aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge[data-tier], .sidebar-footer .footer-org-tier-badge[data-tier] {
    color: rgba(71, 85, 105, 0.92) !important;
    background: transparent;
    background-image: none;
    border: 0;
    padding: 0;
    font-size: 0.68rem !important;
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 500;
    white-space: nowrap;
  }

  /* Outer panel — white glass to match topbar chips & sidebar */
  html body .notif-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(232, 238, 246, 0.92) 100%); background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
}

.notif-panel-clear { border: 0; background: transparent; font-size: 0.78rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
html body .notif-panel-clear:hover { background: rgba(255,255,255,0.05); }
.notif-panel-body {
  max-height: 42vh;
  overflow-y: auto;
  padding: 6px 4px 8px 4px;
}.notif-item + .notif-item { margin-top: 2px; }html body .notif-item-dot {
  width: 8px; height: 8px; flex: 0 0 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
}.notif-item-body { font-size: 0.82rem; color: rgba(230,232,235,0.68); margin-top: 3px; line-height: 1.35; }
.notif-item-meta { margin-top: 4px; font-size: 0.72rem; color: rgba(230,232,235,0.45); }
.notif-empty { padding: 22px 16px; text-align: center; color: rgba(230,232,235,0.55); font-size: 0.88rem; }

.footer-org-avatar img.brand-img--totaly { filter: none; }

.totaly-icon { color: currentColor; display: inline-block; vertical-align: middle; }

.auth-logo--totaly .totaly-icon { color: var(--totaly-blue-400, #42A5F5); filter: drop-shadow(0 2px 10px rgba(33,150,243,0.35)); }
.auth-logo--totaly { display: flex; justify-content: center; margin-bottom: 8px; }

.footer-org-avatar-img[src*="googleusercontent"] { background: #0d0f11; }

.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.notif-panel-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: rgba(230,232,235,0.85); letter-spacing: 0.06em; }
.notif-panel-clear { color: var(--totaly-blue-300, #64B5F6); }
html body .notif-panel-body { padding: 8px 6px 10px 6px; }

.notif-item { display: flex; gap: 10px; align-items: flex-start; cursor: default; padding: 11px 12px; border-radius: 12px; }
html body .notif-item:hover { background: rgba(33,150,243,0.08); }
.notif-item.is-unread { background: linear-gradient(180deg, rgba(33,150,243,0.07), rgba(33,150,243,0.03)); }
.notif-item.is-unread .notif-item-dot { background: var(--totaly-blue-400, #42A5F5); box-shadow: 0 0 10px rgba(66,165,245,0.55); }
html body .notif-item-title { font-weight: 600; font-size: 0.89rem; line-height: 1.25; }
html body .notif-item-body  { color: rgba(232,236,240,0.72); }
html body .notif-item-meta  { color: rgba(180,200,220,0.55); }

.auth-logo--totaly img.totaly-icon { filter: none; }

/* v20.01c — was a third shimmer rule applying the same gradient to card +
   greeting + ::before. Neutralized to kill the vertical-line artifact. */

#etl-pill::before, .topbar #etl-pill::before, .topbar #etl-pill.pill--glass::before { content: none; display: none; background: transparent; box-shadow: none; width: 0; height: 0; margin: 0; padding: 0; }

@media (max-width: 768px) {
  

  .report-cards, .gl-divisions-grid { grid-template-columns: 1fr !important; padding: 4px 12px !important; }
  .report-cards .report-card, .gl-divisions-grid .gl-division-card { width: 100%; min-width: 0; max-width: 100%; }

  .report-cards, .gl-divisions-grid { flex-direction: column; flex-wrap: nowrap; }
  .report-cards .report-card, .gl-divisions-grid .gl-division-card { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; }

  header.topbar, .topbar.topbar--with-pill, .topbar.topbar--no-header { display: none; }

  

  
  

  
  

  

  .topbar-right, .topbar-left { display: none; }

  

  body.is-auth-page .auth-view, body.is-auth-page .auth-view--glass { min-height: 100dvh; padding: 0; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); display: flex; align-items: stretch; justify-content: stretch; background: #000; }

  body.is-auth-page .auth-card, body.is-auth-page .auth-card--glass {
    width: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    margin: 0;
    padding: 32px 22px !important;
    padding-top: max(32px, env(safe-area-inset-top));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    border-radius: 0;
    border: 0;
    background: #000 !important;
    background-color: #000;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
  }

  body.is-auth-page .auth-card--glass > *, body.is-auth-page .auth-card > * { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }

  body.is-auth-page .auth-logo--favicon { margin-top: 0; margin-bottom: 18px; }

  body.is-auth-page, body.is-auth-page main#main-content, body.is-auth-page .main-content { background: #000 !important; background-color: #000 !important; }

  body.is-auth-page aside.sidebar, body.is-auth-page #sidebar { display: none; }

  body.is-auth-page main#main-content, body.is-auth-page .main-content { padding-top: 0; margin-top: 0; }
  /* iter12d audit: removed competing #0b0c0d paints — body/main/ai-view
     are painted #191A1A by the canonical rule below at ~line 4784. */

  .ai-view.ai-home { display: flex; flex-direction: column; min-height: 100dvh; height: 100dvh; padding: 0; gap: 0; position: relative; }

  html body .ai-view .ai-hero          { order: 1; flex: 0 0 auto; }
  html body .ai-view .home-launcher    { order: 3; flex: 0 0 auto; }
  html body .ai-view .ai-composer-wrap { order: 4; flex: 0 0 auto; }

  .ai-view .home-launcher .home-dash-grid { display: none; }

  .ai-view .home-launcher { padding: 8px 0 10px; margin: 0; border-top: 1px solid rgba(255,255,255,0.04); }
  .ai-view .home-tabs-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 14px 4px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  html body .ai-view .home-tabs-row::-webkit-scrollbar { display: none; }

  .ai-view .home-tab {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 9px 14px !important;
    border-radius: 999px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #E8E7E5 !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    display: inline-flex;
    align-items: center !important;
    gap: 6px !important;
    scroll-snap-align: start;
  }
  .ai-view .home-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: #2196F3; flex: 0 0 auto; }
  .ai-view .home-tab:active { background: rgba(255,255,255,0.09); }

  html body .ai-view .ai-composer-wrap { margin: 0; }
  .ai-view .ai-composer-wrap .rich-composer { margin: 0; border-radius: 18px; }

  /* === v40.5az Fix-1: removed dangling selectors that were poisoning rc-toolbar with padding-top:4px === */
  html body .rich-composer.rc-typing .rc-toolbar { padding-top: 4px; padding-bottom: 4px; }
  html body .rich-composer.rc-typing .rc-left, html body .rich-composer.rc-typing .rc-right { gap: 8px; }

  html body .rich-composer .rc-attachments:empty { display: none; }

  html body .rich-composer.rc-typing .rc-toolbar { justify-content: space-between; }
  /* === v40.5az Fix-1: keep overflow hidden during typing to prevent Web chip orphaning === */
  .rich-composer.rc-typing .rc-left { overflow: hidden; min-width: 0; }
  html body section#main .rich-composer .rc-toolbar, html body .rich-composer .rc-toolbar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; row-gap: 0; gap: 8px; padding: 8px 10px; width: 100%; }
  html body section#main .rich-composer .rc-left, html body .rich-composer .rc-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  section#main .rich-composer .rc-left::-webkit-scrollbar,
  html body .rich-composer .rc-left::-webkit-scrollbar { display: none; }
  html body section#main .rich-composer .rc-right, html body .rich-composer .rc-right { flex: 0 0 auto; margin-left: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
  html body section#main .rich-composer .rc-chip, html body .rich-composer .rc-chip { flex: 0 0 auto; white-space: nowrap; }

  html body .rich-composer .rc-chip { padding: 6px 10px; font-size: 12.5px; }

  .rich-composer .rc-model { flex: 0 0 auto; }
  html body .rich-composer .rc-model-select { max-width: 110px; }

  #floating-chat { display: none; }

  /* iter12d audit: REMOVED two top-fade pseudos:
     1) .ai-view.ai-home::before — 76px sticky gradient using #0b0c0d
        (already had display:none but still parsed; also wrong color)
     2) body.ai-scroll-fade-on::after — 86px fixed gradient at top
        using --ask-bg fallback #0b0c0d. This was the MOVING STRAND
        the user saw behind the totaly logo: it engaged on scroll
        (ai-scroll-fade-on class toggles), and its color (#0b0c0d)
        differs from body (#191A1A), creating a visible band that
        appeared/disappeared as content scrolled.
     User wants ONE color: no top fade, no scroll-triggered band. */

  /* iter12d audit: removed duplicate var(--ask-bg) paint of body/main
     — now handled by the single :where() rule at ~line 4784. */

  html body section#main .ai-view .ai-composer-wrap, html body .ai-view .ai-composer-wrap, html body .ai-composer-wrap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0; z-index: 5; background: #191A1A; order: initial; /* needed: overrides inline style from app.js:611 on initial paint before JS runs */ }

  html body .ai-view .rich-composer { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; box-shadow: none; padding: 10px 12px; }

  html body .ai-view .rich-composer .rc-textarea { background: transparent; border: 0; padding: 4px 2px; min-height: 26px; font-size: 15px; color: #F3F2EF; box-shadow: none; }
  .ai-view .rich-composer .rc-textarea::placeholder { color: #6B6F70; }

  .ai-view.ai-home { height: 100dvh !important; min-height: 100dvh !important; padding-bottom: 80px; box-sizing: border-box; }
  .ai-view .home-launcher {
    position: fixed !important;
    left: 0;
    right: 0;

    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    background: transparent;
    padding: 6px 0 8px !important;
    border-top: 0;
  }

  .ai-view .rich-composer .rc-toolbar { padding: 8px 2px 2px; margin: 0; gap: 6px; border: 0; }
  .ai-view .rich-composer .rc-chip { padding: 5px 10px; font-size: 12px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,0.10); color: #C5C5C4; }
  html body .ai-view .rich-composer .rc-chip svg { color: #9A9D9E; }
  .ai-view .rich-composer .rc-icon-btn, .ai-view .rich-composer .rc-send {
    width: 32px !important;
    height: 32px !important;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: transparent;
    color: #E8E7E5 !important;
    flex: 0 0 32px !important;
  }
  html body .ai-view .rich-composer .rc-send { background: rgba(255, 255, 255, 0.92); color: #0b0c0d; border: 0; }

  /* === v40.5az Fix-1: removed dangling selectors that were poisoning ai-hero with padding-top:90px on rc-chip === */
  .ai-view .ai-hero { padding-top: 90px !important; padding-bottom: 14px !important; }
  .ai-view .ai-hero-card { background: transparent; border: 0; box-shadow: none; }

  html body .floating-chat, html body .floating-chat-toggle { display: none; }

  .ai-view .ai-messages { padding-top: 90px !important; padding-bottom: 20px !important; }

  :root { --ask-bg:         #191A1A; --ask-surface:    #1F2121; --ask-border:     #3C3A38;  --ask-text:       #D6D8DE;    }

  :where(html, body, html body section#main.main, html body .ai-view, body, section#main.main, .ai-view, .ai-home, .ai-view .ai-messages, .ai-view .ai-composer-wrap, .ai-view .home-launcher) { background: #191A1A; background-color: #191A1A; background-image: none; }
  html body { --ask-bg: #191A1A !important; --color-bg: #191A1A !important; --bg: #191A1A !important; }

  .ai-view .home-launcher { background: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

  html body section#main .ai-view .ai-composer-wrap, html body .ai-view .ai-composer-wrap, html body .ai-composer-wrap { background: var(--ask-bg); background-color: var(--ask-bg); background-image: none; border: 0; outline: 0; box-shadow: none; border-radius: 0; }

  html body .ai-view .rich-composer, html body .rich-composer { background: var(--ask-surface); background-color: var(--ask-surface); background-image: none; border: 1px solid var(--ask-border); border-radius: 18px; box-shadow: none; outline: 0; padding: 10px 12px; }

  html body .ai-view .rich-composer:focus-within, html body .rich-composer:focus-within, html body .ai-composer-wrap:focus-within, html body .chat-composer:focus-within { border-color: #3C3A38; box-shadow: none; outline: 0; }
  .ai-view .rich-composer:focus-within .rc-textarea, .rich-composer:focus-within .rc-textarea { outline: 0; box-shadow: none; }
  html body .ai-view .rich-composer .rc-textarea { background: transparent; color: var(--ask-text); border: 0; outline: 0; box-shadow: none; }

  .ai-view .rich-composer .rc-chip[data-chip="data"], .ai-view .rich-composer .rc-chip[data-chip="computer"], .rich-composer .rc-chip[data-chip="data"], .rich-composer .rc-chip[data-chip="computer"] { display: none; }

  /* === v40.5az Fix-1: keep rc-left as flex:1 auto so Web stays inline === */
  html body section#main .rich-composer .rc-left, html body .rich-composer .rc-left { overflow-x: hidden; overflow-y: hidden; flex: 1 1 auto; min-width: 0; }

  .ai-view .rich-composer .rc-chip[data-chip="web"] { background: transparent; border: 1px solid var(--ask-border); color: var(--ask-text); padding: 6px 12px; font-size: 13px; border-radius: 999px; }

  .ai-view .rich-composer .rc-model { gap: 4px; border: 1px solid var(--ask-border); background: transparent; padding: 4px 8px 4px 10px; border-radius: 999px; }
  .ai-view .rich-composer .rc-model-select { background: transparent; border: 0; padding: 0; color: var(--ask-text); font-size: 13px; max-width: 90px; }

  /* mob-tap-fix: upgraded from 28px to 44px to meet WCAG 2.5.8 / Apple HIG
     44pt minimum touch target requirement. Fixes mobile Ask score (was 45).
     Actual visual size stays as inner circle — padding absorbs the extra area. */
  .ai-view .rich-composer .rc-icon-btn, .rich-composer .rc-icon-btn, .ai-view .rich-composer .rc-plus-btn, .rich-composer .rc-plus-btn, .ai-view .rich-composer .rc-mic, .rich-composer .rc-mic {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0;
    border: 1px solid var(--ask-border) !important;
    background: transparent;
    color: var(--ask-text) !important;
    border-radius: 50%;
    box-shadow: none;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }
  .rich-composer .rc-icon-btn svg, .rich-composer .rc-plus-btn svg, .rich-composer .rc-mic svg { width: 18px; height: 18px; }
  html body .ai-view .rich-composer .rc-send svg, html body .rich-composer .rc-send svg { width: 18px; height: 18px; }

  .ai-view .rich-composer .rc-send, .rich-composer .rc-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0;
    background: #2A2C2C !important;
    color: var(--ask-text) !important;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }

  .rich-composer.rc-typing .rc-chip, .rich-composer.rc-typing .rc-model, .rich-composer.rc-typing .rc-mic {
    display: none;
  }  

  
  

  /* iter9 cleanup 2026-04-26: was broken syntax `background:; linear-gradient(...)` and `box-shadow:; inset...`. Stray semicolons made the whole rule invalid. Now superseded by the iter9 block at end of file. Kept as no-op so cascade order is preserved. */
  
  
  

  
  

  .ai-view .ai-bg-mark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(82vw, 340px); aspect-ratio: 760 / 193; pointer-events: none; z-index: 1; opacity: 1; }

  .ai-view .ai-bg-mark .ai-bg-mark__shimmer {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(199, 228, 255, 0.0)  42%,
      rgba(199, 228, 255, 0.55) 48%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(199, 228, 255, 0.55) 52%,
      rgba(199, 228, 255, 0.0)  58%,
      transparent 62%,
      transparent 100%
    );
    background-size: 240% 100%;
    background-position: 180% 0%;

    -webkit-mask-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=20260422-v1978d');
            mask-image: url('/static/brand-totaly/logo-totaly-beaded-wordmark.png?v=20260422-v1978d');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;
    animation: bgmark-shimmer-once 2.6s cubic-bezier(.4,.0,.2,1) 0.45s 1 forwards;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .ai-view .ai-hero, .ai-view #ai-hero, .ai-view .ai-hero-card, .ai-view #ai-hero-canvas, .ai-view #ai-greeting, .ai-view .ai-tagline { display: none; }

  section#main .ai-view .home-launcher, .ai-view .home-launcher {
    display: flex;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    background: transparent;
    border: 0;
    padding: 4px 10px !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  html body .ai-view .home-launcher::-webkit-scrollbar { display: none; }

  .ai-view .home-launcher .home-tab, .ai-view .home-tab, a.home-tab {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: #1F2121 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(214, 216, 222, 0.92) !important;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center !important;
  }
  .ai-view .home-tab .home-tab-dot { width: 5px; height: 5px; }

  /* v40.5ay: was 96px top wasting 36px below 60px topnav; was 160px bottom for 162px composer (overshoot fine); gap 16px reduced to 12px for denser stream feel. */
  body.ai-has-messages .ai-view .ai-messages { display: flex; flex-direction: column; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 52px) 14px 172px; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; min-height: 100dvh; background: var(--ask-bg); }

  body.ai-has-messages .ai-view .ai-bg-mark { display: none; }

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

  

  

  /* iter11: scroll-trap rules removed — document-root scroll is asserted in the iter11 block at EOF */

  .ai-view .ai-messages { max-height: calc(100dvh - 260px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  section#main .ai-view .ai-composer-wrap, .ai-view .ai-composer-wrap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 5; }

  section#main .ai-view .home-launcher, .ai-view .home-launcher { bottom: calc(189px + env(safe-area-inset-bottom, 0px)) !important; padding: 2px 10px !important; }
  /* iter12d audit: REMOVED — these rules created the visible strands:
     1) body.route-ask::after = 4px fixed #1c1c1e bar at bottom (BOTTOM STRAND)
     2) body.route-ask .ai-view::before = 64px gradient at top (MOVING TOP BAND)
     3) #1c1c1e and #2a2b2c paints fighting #191A1A canonical color
     4) html body.route-ask { --ask-bg: #1c1c1e } (overrode root token)
     The user wants ONE color: #191A1A everywhere, no header band, no
     bottom bar. Composer/messages inherit body color via :where() rule. */

  body.route-ask .ai-composer-wrap { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important; }

  #floating-chat,

  body.route-ask.ai-has-messages .ai-messages { padding-left: 12px !important; padding-right: 12px !important; }

  /* Let the message column scroll freely under the top chrome. Avoid
     double-scroll: page is the scroller, feed is content. */
  body.route-ask.ai-has-messages .ai-view { overflow: visible; }

  .topbar #imsg-pill,
  .topbar #brain-pill { display: none; }

  #gl-floating-pill { transition: transform 220ms ease, opacity 220ms ease; will-change: transform, opacity; }
  #gl-floating-pill[data-mobile-hidden="1"] { transform: translateY(-120%); opacity: 0; pointer-events: none; }

  .home-dash-card .home-dash-chart { position: relative; width: 100%; height: 56px; }
  .home-dash-card .home-dash-spark .spark-svg { width: 100%; height: 100%; display: block; }
  .home-dash-card .home-dash-delta.is-up   { color: #2E7D32; }
  .home-dash-card .home-dash-delta.is-down { color: #C62828; }
  .home-dash-card .home-dash-week { display: flex; align-items: center; gap: 0.5rem; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
  .home-dash-card .home-dash-week-bars { width: 78px; height: 28px; flex: 0 0 auto; }
  .home-dash-card .home-dash-week-bars .kpi-week-svg { width: 100%; height: 100%; display: block; }

  .home-dash-card .home-dash-week {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }
  .home-dash-card .home-dash-week-bars { width: 168px; height: 56px; }

  .home-dash-card .home-dash-chart,
  .home-dash-card .home-dash-week-bars--full { width: 100%; height: 88px; margin-top: 0.4rem; }
  .home-dash-card .home-dash-week-bars--full .kpi-week-svg { width: 100%; height: 100%; display: block; }
  .home-dash-card .home-dash-kpi { align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }

  .home-dash-card .home-dash-week-bars--full { height: 100px; }

  .home-dash-grid .home-dash-bucket-chip {
    color: #191A1A;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(15,23,42,0.10);
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .home-dash-grid .home-dash-bucket-eyebrow { color: #191A1A; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
  .home-dash-grid .home-dash-bucket-value { color: #191A1A; font-size: 1.5rem; font-weight: 800; }
  .home-dash-grid .home-dash-bucket-unit { color: #191A1A; opacity: 0.55; font-size: 0.65rem; }
  .home-dash-grid .home-dash-bucket-chip.is-up   .home-dash-bucket-value { color: #2E7D32; }
  .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value { color: #C62828; }
}

.ai-hero,
html body .ai-view .ai-hero { background: transparent; }

.ai-hero .ai-hero-card, .ai-view .ai-hero-card {
  background: var(--gl-chat-bg, #1F2121) !important;
  background-image: none;
  background-color: var(--gl-chat-bg, #1F2121) !important;
  border: 1px solid var(--gl-chat-border, #2A2928) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.ai-hero .ai-hero-card .ai-hero-stage, .ai-view .ai-hero-card .ai-hero-stage, .ai-hero-stage, .ai-hero-logo--canvas, .ai-hero .ai-hero-card .ai-hero-logo--canvas { background: transparent; background-image: none; background-color: transparent; }

.ai-hero .ai-hero-card #ai-greeting, .ai-view .ai-hero-card #ai-greeting { color: #E4E8EE !important; }

.ai-hero .ai-hero-card::before { background-image: none; background-color: transparent; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open { background: transparent; color: #B8B8B8; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history.is-open .sqi-icon { color: #8A8A8A; }

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.14); color: #0D47A1; font-weight: 600; }
body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-icon { color: #0D47A1 !important; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:focus, aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:focus-visible { outline: none; box-shadow: none; }
.ai-hero .ai-hero-card #ai-greeting, .ai-hero .ai-hero-card .ai-tagline, .ai-view .ai-hero-card #ai-greeting, .ai-view .ai-hero-card .ai-tagline, p#ai-greeting.ai-tagline { background: transparent; background-color: transparent; background-image: none; border-color: transparent; border: 0; caret-color: transparent; outline: none; }
.ai-hero, .ai-hero *, .ai-hero-card, .ai-hero-card *, .ai-hero-stage, .ai-hero-stage * { caret-color: transparent; }

aside.sidebar#sidebar, aside.sidebar.sidebar#sidebar { padding-bottom: 0; }

.brand.brand--logo-only { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 2px 4px; cursor: pointer; color: inherit; }
.brand-logo-svg { display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; color: #2196F3; }
.brand-logo-wordmark { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.005em; color: #E5E5E5; line-height: 1; }
aside.sidebar.is-collapsed .brand-logo-wordmark { display: none; }
aside.sidebar#sidebar .sidebar-header::before, aside.sidebar#sidebar .sidebar-header::after { content: none; display: none; background: none; mask-image: none; -webkit-mask-image: none; width: 0; height: 0; }
aside.sidebar#sidebar .sidebar-header { padding: 14px 14px 10px; justify-content: flex-start; gap: 0; }
aside.sidebar#sidebar .sidebar-header .brand.brand--logo-only {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  justify-content: flex-start;
}
aside.sidebar#sidebar .sidebar-header .brand.brand--logo-only:hover { background: transparent; box-shadow: none; }
aside.sidebar#sidebar .sidebar-header .brand.brand--logo-only::before, aside.sidebar#sidebar .sidebar-header .brand.brand--logo-only::after { content: none; display: none; }

aside.sidebar#sidebar .sidebar-header--v1944 { display: flex; align-items: center; }
aside.sidebar#sidebar .sidebar-collapse-btn--v1944 {
  position: static;
  top: auto; right: auto; left: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #B8B8B8 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  cursor: pointer;
  outline: 0;
  border-radius: 8px;
  transition: color 140ms ease, background 140ms ease, opacity 160ms ease !important;
}
aside.sidebar#sidebar .sidebar-collapse-btn--v1944:hover { color: #2196F3 !important; background: rgba(255,255,255,0.04) !important; box-shadow: none; border: 0; border-radius: 8px; }
aside.sidebar#sidebar .sidebar-collapse-btn--v1944:focus, aside.sidebar#sidebar .sidebar-collapse-btn--v1944:focus-visible { outline: 0; box-shadow: none; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { transition: opacity 160ms ease !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only { opacity: 1; pointer-events: auto; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { opacity: 0; pointer-events: none; }

html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944:hover
  .brand.brand--logo-only { opacity: 0; pointer-events: none; }
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944:hover
  .sidebar-collapse-btn--v1944 { opacity: 1; pointer-events: auto; }
aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 { justify-content: space-between !important; padding: 14px 14px 10px !important; }

aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 > .brand.brand--logo-only { margin-right: auto; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon { display: inline-flex; align-items: center; justify-content: center; color: rgba(55, 65, 81, 0.9); }

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

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer { flex-direction: column; align-items: center !important; justify-content: flex-end !important; width: 100%; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-notif-btn { order: 0; margin: 0 auto; position: relative; width: 28px; height: 28px; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-btn { order: 0; margin: 0 auto; position: relative; width: 28px; height: 28px; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-link { order: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; padding: 0; background: transparent; border: 0; box-shadow: none; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  position: relative;
  left: auto;
  right: auto;
  transform: none;
}
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-avatar-img { width: 32px; height: 32px; object-fit: cover; display: block; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-text,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-name,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-tier-row,

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer * { visibility: visible; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-text, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-name, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-tier-row, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge { visibility: hidden; display: none; }

aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge, .sidebar-footer .footer-org-tier-badge { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; word-spacing: normal; }

aside.sidebar#sidebar .sidebar-footer .footer-org-text, .sidebar-footer .footer-org-text { min-width: 0; flex: 1 1 auto; overflow: hidden; }

aside.sidebar#sidebar .brand-logo-svg, aside.sidebar#sidebar .brand-logo-svg *, .brand-logo-svg, .brand-logo-svg polygon, .brand-logo-svg circle, .brand-logo-svg path { stroke-width: 22 !important; }
.brand-logo-svg polygon, .brand-logo-svg path { stroke: #2196F3; fill: none; }
.brand-logo-svg circle { stroke-width: 0; fill: #2196F3; }

aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge, .sidebar-footer .footer-org-tier-badge { font-size: 0.72rem; letter-spacing: -0.01em; line-height: 1.15; }

aside.sidebar#sidebar { width: 240px !important; min-width: 240px !important; max-width: 240px !important; gap: 8px !important; }

body.sidebar-collapsed aside.sidebar#sidebar, body.sidebar-collapsed aside.sidebar#sidebar { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }

aside.sidebar#sidebar .sidebar-header--v1944 { padding: 4px 4px 6px 4px; min-height: 44px; justify-content: space-between; gap: 6px; position: relative; }

aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only { width: 44px; min-width: 44px; flex: 0 0 44px; justify-content: center; padding: 0; gap: 0; }
aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-wordmark { font-family: 'Satoshi', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.005em; color: #0F2747; line-height: 1; margin-left: 0; font-size: 1.0rem; }
body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only { width: auto; min-width: 44px; flex: 0 0 auto; justify-content: flex-start; gap: 6px; }

aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; }
aside.sidebar#sidebar .sidebar-collapse-btn--v1944 svg { display: block; width: 18px; height: 18px; stroke-width: 1.9; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 { min-height: 44px !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { gap: 0; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 { gap: 2px !important; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item {
  padding: 0;
  min-height: 44px !important;
  gap: 10px !important;

  display: grid;
  grid-template-columns: 44px 1fr auto !important;
  align-items: center !important;
  text-align: left;
}
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon { width: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon svg { width: 22px; height: 22px; stroke-width: 1.8; display: block; }
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-caret { margin-right: 6px; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sqi-label { flex: 1 1 auto; min-width: 0; padding: 0; text-align: left; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item { grid-template-columns: 44px !important; justify-content: center !important; width: 44px !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item { width: 44px; min-width: 44px; padding: 0; margin: 0 auto; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon { width: 44px !important; height: 44px !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon svg { display: block; stroke-width: 1.8; width: 22px; height: 22px; }

aside.sidebar#sidebar .sidebar-history--v1929 { border-top: 0; margin-top: 2px; padding: 0; }
aside.sidebar#sidebar #sidebar-history-list { padding: 0; margin: 0; }
aside.sidebar#sidebar #sidebar-history-list .history-item .history-title, aside.sidebar#sidebar #sidebar-history-list .history-item .history-meta { padding: 0; margin: 0; text-align: left; }
body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-footer { padding: 6px 0; gap: 10px; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer { padding: 6px 0 !important; gap: 6px !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-notif-btn, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-footer .footer-settings-link { width: 44px; min-width: 44px; margin: 0 auto; }
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; }

aside.sidebar#sidebar .sidebar-header--v1944::before, aside.sidebar#sidebar .sidebar-header--v1944::after { content: none; display: none; width: 0; height: 0; }

aside.sidebar#sidebar .sidebar-scroll, aside.sidebar#sidebar .sidebar-scroll--simple { padding-left: 0; padding-right: 0; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item { margin: 0; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { justify-content: center !important; }

aside.sidebar#sidebar #sidebar-history-list .history-item { align-items: center; gap: 10px; display: block; grid-template-columns: none; padding: 6px 8px 6px 54px; text-align: left; min-height: 32px; border-radius: 8px; font-size: 0.82rem; line-height: 1.3; }

aside.sidebar#sidebar #sidebar-history-list .history-item::before { content: none; display: none; width: 0; height: 0; background: none; -webkit-mask-image: none; mask-image: none; }
[data-app-theme="light"] aside.sidebar#sidebar #sidebar-history-list .history-item .history-title { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; margin: 0; text-align: left; color: #334155; }
aside.sidebar#sidebar .sidebar-history--v1929 .section-body { padding: 0; }
aside.sidebar#sidebar .sidebar-history-viewall { padding-left: 54px; padding: 6px 8px 6px 54px; display: block; text-align: left; font-size: 0.78rem; }

aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944, aside.sidebar#sidebar div.sidebar-header.sidebar-header--v1944, body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 { padding: 0; margin: 0 0 6px 0; min-height: 44px; height: 44px; max-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944, body.sidebar-collapsed aside.sidebar#sidebar div.sidebar-header.sidebar-header--v1944 { padding: 0; margin: 0 0 6px 0; min-height: 44px; height: 44px; max-height: 44px; }

aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex;
  align-items: center !important;
}
aside.sidebar#sidebar .sidebar-header--v1944 .brand-logo-svg { flex: 0 0 22px; color: #2196F3; width: 22px; height: 22px; vertical-align: middle; display: inline-block; }

aside.sidebar#sidebar .sidebar-scroll,
aside.sidebar#sidebar .sidebar-scroll--simple,
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-scroll,

aside.sidebar#sidebar .sidebar-quick-nav--v1929 { padding: 0; margin: 0 0 6px 0; }

body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 { position: relative; justify-content: center; padding: 0; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only {
  position: absolute !important;
  top: 0;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  justify-content: center !important;
  gap: 0;
  margin: 0;
  padding: 0;
}
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-collapse-btn--v1944 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; margin: 0; padding: 0; }

body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header--v1944 .brand.brand--logo-only { margin-right: auto; }

aside.sidebar#sidebar .sidebar-scroll, aside.sidebar#sidebar .sidebar-scroll--simple, body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-scroll, body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-scroll--simple, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-scroll, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-scroll--simple { padding: 0; margin: 0; gap: 0; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929, body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-quick-nav--v1929, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-nav--v1929 { padding: 0; margin: 0; gap: 2px; }

aside.sidebar#sidebar .sidebar-header--v1944, aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944, body:not(.sidebar-collapsed) aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944, body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header.sidebar-header--v1944 { margin: 0 0 6px 0 !important; }

aside.sidebar#sidebar, body.sidebar-collapsed aside.sidebar#sidebar { gap: 0; }

aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item, body:not(.sidebar-collapsed) 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-item { height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
body.sidebar-collapsed aside.sidebar#sidebar .sidebar-quick-item .sqi-icon, aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-icon { height: 44px !important; min-height: 44px !important; }


  10%  { opacity: 0.95; }
  90%  { opacity: 0.95; }
  100% { transform: translateX(110%); opacity: 0; }
}

.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; }

.gl-divisions-grid { width: 100%; margin-left: auto; margin-right: auto; max-width: 1320px; }

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

.report-cards, .reports-view .report-cards, .reports-division .report-cards, .gl-divisions-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 18px; grid-template-columns: none; }

.report-cards .report-card, .gl-divisions-grid .gl-division-card { flex: 0 0 280px !important; width: 280px !important; min-width: 280px !important; max-width: 280px !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; }

.reports-view .division-header, .reports-view .reports-subheader { text-align: center; width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; }

.report-cards .report-card .report-title, .report-card .report-title { text-align: center; width: 100%; }

.gl-divisions-title { font-size: 1.6rem; font-weight: 600; color: #0D47A1; margin: 0 0 0.35rem 0; letter-spacing: -0.01em; text-align: center; width: 100%; }

.gl-divisions-grid .gl-division-card .gdc-title, .gl-division-card .gdc-title { text-align: center; width: 100%; display: block; }

.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: rgba(255, 255, 255, 0.07); pointer-events: none; }

body.sidebar-collapsed .sidebar .nav-label, 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-caret, 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 rgba(255, 255, 255, 0.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: #E8E7E5; }
.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 rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.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: #E8E7E5;
  font-size: 13px;
  font-weight: 540;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
/* v40.5eo FIX 6: soft-blue hover/focus using brand #2196F3. */
.rc-plus-item:hover, .rc-plus-item:focus-visible { background: rgba(33, 150, 243, 0.15); color: #2196F3; outline: none; }
.rc-plus-item svg { flex: 0 0 auto; color: #B8BABA; }
.rc-plus-item:hover svg, .rc-plus-item:focus-visible svg { color: #2196F3; }

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, .ai-hero .ai-hero-card #ai-greeting { 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)) {
  .dashboard-view .card.chat-panel > h3.panel-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(15, 23, 42, 0.62); }

  .dashboard-view .card.chat-panel .chat-messages.chat-messages--chip { min-height: 0; max-height: 260px; overflow-y: auto; flex: 0 1 auto; padding: 0; background: transparent; border: 0; box-shadow: none; }

  .dashboard-view .card.chat-panel .chat-messages.chat-messages--chip .chat-empty { margin: 0; padding: 2px 2px 0; background: transparent; border: 0; font-size: 13px; line-height: 1.4; color: rgba(15, 23, 42, 0.55); text-align: left; }

  .dashboard-view .card.chat-panel .ai-composer-wrap.ai-composer-wrap--chip { padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }

  .dashboard-view .card.chat-panel {
    min-height: 0;
    height: auto;
    max-height: none;
    align-self: start;
    justify-self: stretch;
    padding: 18px 18px 16px !important;
    gap: 12px !important;
    display: flex;
    flex-direction: column !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(226, 236, 248, 0.76) 100%
    ) !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(226, 236, 248, 0.76) 100%
    ) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 12px 28px rgba(15, 23, 42, 0.08) !important;
  }

  .dashboard-view .card.chat-panel .rich-composer { padding: 10px 10px 8px; border-radius: 14px; min-height: 0; }

  .dashboard-view .card.chat-panel .rich-composer::before, .dashboard-view .card.chat-panel .rich-composer::after { display: none; content: none; background: none; box-shadow: none; }

  .dashboard-view .card.chat-panel .rich-composer .rc-textarea { min-height: 36px; max-height: 160px; padding: 6px 8px; font-size: 14px; line-height: 1.45; }

  .dashboard-view .card.chat-panel .rich-composer .rc-toolbar { gap: 6px; padding-top: 6px; }

  .dashboard-view .card.chat-panel .rich-composer .rc-left { gap: 6px; flex-wrap: wrap; }

  .dashboard-view .card.chat-panel .rich-composer .rc-chip { padding: 4px 9px; font-size: 12px; height: 26px; }

  .dashboard-view .card.chat-panel .rich-composer .rc-icon-btn, .dashboard-view .card.chat-panel .rich-composer .rc-mic { width: 28px; height: 28px; }

  .dashboard-view .card.chat-panel .rich-composer .rc-send { width: 30px; height: 30px; }

  .dashboard-view .card.chat-panel .rich-composer .rc-model-select { font-size: 12px; }
}

/* Dot indicators — shared between iMessage and Brain pills */
.topbar #imsg-pill .imsg-dot,
.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. */
.topbar #imsg-pill[data-state="active"] .imsg-dot { background: var(--totaly-blue-500, #2196F3); box-shadow: 0 0 8px rgba(33, 150, 243, 0.55); }
.topbar #imsg-pill[data-state="idle"] .imsg-dot { background: #34C759;                /* iMessage green */; box-shadow: 0 0 6px rgba(52, 199, 89, 0.45); }
.topbar #imsg-pill[data-state="stale"] .imsg-dot { background: #FFB020; box-shadow: 0 0 6px rgba(255, 176, 32, 0.45); }
.topbar #imsg-pill[data-state="down"] .imsg-dot { background: rgba(160, 168, 176, 0.7); box-shadow: none; }

/* 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--imsg,
.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. */
#ai-greeting,
#ai-greeting *,
.ai-tagline,
.ai-tagline *,
.ai-hero-card #ai-greeting,
.ai-hero-stage #ai-greeting,
.ai-view #ai-greeting { caret-color: transparent; -webkit-user-modify: read-only; user-select: none; -webkit-user-select: none; outline: none; }
#ai-greeting:focus,
#ai-greeting:focus-visible,
.ai-tagline:focus,
.ai-tagline:focus-visible { outline: none; caret-color: transparent; }

/* Light-grey text — overrides every earlier #C8CFD9 declaration. */
#ai-greeting,
.ai-tagline,
.ai-hero .ai-hero-card #ai-greeting,
.ai-view .ai-hero-card #ai-greeting,
p#ai-greeting.ai-tagline { color: #E4E8EE !important; }

/* 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 rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: var(--text-muted, #9aa3ad);
}
.automation-card-stats[data-state="loading"] { opacity: 0.5; }
.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; }

/* v40.11-speed-to-lead-toggle: Speed-to-Lead card sections (intro
   template, followup ladder, stats). Nexus palette only -- no purple,
   no blue #2196F3. Toggle-on color matches .hood-switch.is-on (#4F98A3)
   since this card reuses that same switch component. */
.automation-card--speed-to-lead .stl-section {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.automation-card--speed-to-lead .stl-section:first-of-type { padding-top: 10px; }
.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: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.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. */
.hood-switch--sm { width: 36px; height: 21px; }
.hood-switch--sm .hood-switch-thumb { width: 17px; height: 17px; }
.hood-switch--sm.is-on .hood-switch-thumb { transform: translateX(15px); }

/* 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: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text-default, #E4E8EE);
  font-size: 0.88rem;
  transition: border-color 140ms ease, background 140ms ease;
}
.automation-rule-input.input--ghost:focus { outline: none; border-color: var(--totaly-blue-500, #2196F3); background: rgba(33, 150, 243, 0.06); }

/* 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 rgba(255, 255, 255, 0.06); }

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 .ai-hero-card #ai-greeting#ai-greeting,
html body .ai-hero-stage #ai-greeting#ai-greeting,
html body .ai-view .ai-hero-card #ai-greeting#ai-greeting,
html body p#ai-greeting.ai-tagline,
html body #ai-greeting#ai-greeting { color: #E4E8EE; }

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 *,
html body #ai-greeting,
html body p#ai-greeting.ai-tagline,
html body .ai-tagline { 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,

/* Greeting text — #8C8D8D (overrides every earlier #E4E8EE / #C8CFD9 rule) */
html body #ai-greeting#ai-greeting,
html body .ai-tagline,
html body .ai-hero .ai-hero-card #ai-greeting,
html body .ai-hero-stage #ai-greeting,
html body .ai-view .ai-hero-card #ai-greeting,
html body p#ai-greeting.ai-tagline { color: #8C8D8D; }

/* v2003c — final-final greeting color: must beat html body .ai-hero .ai-hero-card #ai-greeting#ai-greeting (spec 0,2,3) */
html body .ai-hero .ai-hero-card #ai-greeting#ai-greeting,
html body .ai-hero-stage #ai-greeting#ai-greeting,
html body .ai-view .ai-hero-card #ai-greeting#ai-greeting,
html body p#ai-greeting.ai-tagline.ai-tagline,
html body #ai-greeting#ai-greeting#ai-greeting { color: #8C8D8D; }

/* (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.route-ask:not(.ai-has-messages),
html body.route-ask:not(.ai-has-messages) section#main.main { overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; }
html body.route-ask:not(.ai-has-messages) .ai-view { overflow: hidden !important; height: calc(100vh - 56px) !important; /* subtract topbar */; max-height: calc(100vh - 56px) !important; }

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 > .gl-pill,
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 */
html body.route-ask:not(.ai-has-messages) { overflow: hidden !important; height: 100vh !important; }

/* 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 > *,
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: #FFFFFF; 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; }

html body.route-ask:not(.ai-has-messages) #ai-hero.ai-hero,
html body.route-ask:not(.ai-has-messages) #ai-hero { opacity: 1; --hero-opacity: 1; }

/* Lock html/body/main/view — beat every prior rule */
html body.route-ask:not(.ai-has-messages),
html body.route-ask:not(.ai-has-messages) section#main,
html body.route-ask:not(.ai-has-messages) main#main-content,
html body.route-ask:not(.ai-has-messages) main.main-content,
html body.route-ask:not(.ai-has-messages) .ai-view,
html body.route-ask:not(.ai-has-messages) .ai-view.ai-home { overflow: hidden; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none;            /* Firefox */; -ms-overflow-style: none;         /* old Edge/IE */; }

/* WebKit: hide the scrollbar track entirely */
html body.route-ask:not(.ai-has-messages)::-webkit-scrollbar,
html body.route-ask:not(.ai-has-messages) section#main::-webkit-scrollbar,
html body.route-ask:not(.ai-has-messages) main#main-content::-webkit-scrollbar,
html body.route-ask:not(.ai-has-messages) main.main-content::-webkit-scrollbar,
html body.route-ask:not(.ai-has-messages) .ai-view::-webkit-scrollbar,
html body.route-ask:not(.ai-has-messages) .ai-view.ai-home::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }

/* 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;
  background-image: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  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 */
html body.route-ask header.topbar { position: relative; z-index: 50; }
html body.route-ask aside.sidebar { position: relative; z-index: 40; }

/* 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: #191A1A; background-color: #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: #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: #191A1A !important;
  background-image: none;
  background-color: #191A1A !important;
  border-right: 1px solid #2A2A2A !important;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #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,
    #191A1A 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; }

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 */
html body .notif-panel-actions { display: flex; align-items: center; gap: 6px; }

html body .notif-panel-seeall {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.65);
  color: #0F172A;
  font: 500 11.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.002em;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
html body .notif-panel-seeall:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.18); }
html body .notif-panel-seeall:active { transform: translateY(1px); }

/* 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-sub { font: 500 11.5px/1.2 Inter, system-ui, sans-serif; color: rgba(15, 23, 42, 0.55); margin-top: 2px; }
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 */
html body .notif-item-unread-btn {
  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;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
html body .notif-item-unread-btn:hover { background: rgba(25, 118, 210, 0.10); border-color: rgba(25, 118, 210, 0.40); color: #1976D2; }
html body .notif-item-unread-btn:active { transform: translateY(1px); }

/* ── 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,
html body .notif-history-body .notif-item.is-cleared .notif-item-title { 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 */

html body.route-ask:not(.ai-has-messages) .home-launcher .home-tabs-row,
html body.route-ask:not(.ai-has-messages) .ai-view .home-tabs-row { display: none; }

/* Mobile: totals chip below the 6 cards (single column or 2-col stack). */

@media (min-width: 720px) {
  /* Card shrink — pull padding, font sizes, bar height inward. */
  html body .ai-view .home-dash-grid .home-dash-card { padding: 0.6rem 0.75rem; gap: 0.4rem; }
  html body .ai-view .home-dash-grid .home-dash-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-title { font-size: 0.72rem; line-height: 1.15; }
  html body .ai-view .home-dash-grid .home-dash-value { font-size: 1.55rem; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-unit { font-size: 0.7rem; }
  html body .ai-view .home-dash-grid .home-dash-week-bars--full { height: 60px; }

  /* KPI row layout — value, "today" unit, then small inline "YTD avg X". */
  html body .ai-view .home-dash-grid .home-dash-kpi { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
  html body .ai-view .home-dash-grid .home-dash-ytd-inline {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 500;
    color: rgba(15,23,42,0.50);
    letter-spacing: 0.01em;
    margin-left: 0.15rem;
    white-space: nowrap;
  }

  /* Totals chip — slightly tighter to make room for ticker line. */

  /* Stock-ticker delta under each totals value. */

  /* 3-row grid: row 3 holds the new bottom totals chip. */
  /* Right totals chip stays cols 4 / rows 1-2 (unchanged). */
  /* Bottom totals chip — span cols 1-3, row 3. */

  /* MUCH smaller KPI cards */
  html body .ai-view .home-dash-grid .home-dash-eyebrow,

  /* Right totals chip — shrink to match. */

  /* Bottom totals chip values can be a touch larger since the chip is wider. */

  /* Ensure week-bars stay short so 130px row fits with eyebrow/title/kpi/bars/foot. */

  /* Override v2008am: row 3 sized for bucket chips, right chip spans all 3. */
  /* KPI cards stay rows 1-2 cols 1-3 (already placed via existing v2008ak rules) */
  /* Right totals chip — span all 3 rows now (was rows 1-2). */
  /* Bucket chips — row 3, cols 1, 2, 3. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip[data-bucket="pest"]     { grid-column: 1; grid-row: 3; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip[data-bucket="weeds"]    { grid-column: 2; grid-row: 3; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip[data-bucket="termites"] { grid-column: 3; grid-row: 3; }

  /* Bucket chip visual — match KPI card chip color/radius/shadow. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    padding: 0.4rem 0.7rem;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.05rem;
    min-width: 0;
    overflow: hidden;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker {
    font-size: 0.66rem !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    margin-top: 0.15rem !important;
    white-space: nowrap;
    color: rgba(15,23,42,0.45);
  }

  /* KPI cards — keep small size from v2008am. */
  html body .ai-view .home-dash-grid .home-dash-eyebrow,

  /* Tighter rows so all three fit inside the launcher even on 1366×768. */

  /* KPI card — even tighter padding + bars + type. */
  html body .ai-view .home-dash-grid .home-dash-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-head { margin-bottom: 0; }

  /* Bucket chips — smaller too. */

  /* Right totals chip — smaller too. */

  /* Trim composer + hero so launcher gets more vertical room. */
  html body .ai-view .ai-composer-wrap { max-width: 880px; margin-left: auto; margin-right: auto; }
  html body .ai-view .ai-composer-wrap .ai-composer,
  html body .ai-view .ai-composer-wrap textarea,
  /* Tighter hero — less vertical space above composer. */
  html body .ai-view .ai-hero,
  html body .ai-view .ai-messages { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* Re-clip: launcher = vertical absorber, grid must fit fully inside. */
  html body .ai-view #home-launcher.home-launcher { overflow: hidden; min-height: 0; }
  html body .ai-view .home-dash-grid { height: 100%; max-height: 100%; overflow: hidden; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.55fr); align-content: stretch; }

  /* Force every grid child to clip its overflow so a too-tall card doesn't
     blow out the row. */
  html body .ai-view .home-dash-grid > * { min-height: 0; overflow: hidden; }

  /* Trim composer wrap MORE aggressively — selector match for all variants. */
  html body .ai-view .ai-composer-wrap,
  html body .ai-view [class*="composer-wrap"],
  html body .ai-view [class*="composer-shell"] { max-width: 820px; margin-left: auto; margin-right: auto; padding-top: 6px; padding-bottom: 6px; }

  /* Bucket chip occupies its grid row fully — height matches one section
     of the right chip via the row ratio above. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip { height: 100%; align-self: stretch; }

  html body .ai-view .home-dash-grid .home-dash-week-bars--full svg { display: block; width: 100%; height: 100%; overflow: visible; }

  html body .ai-view .ai-hero,
  html body .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-hero { padding: 14px 0 14px; margin: 0; }
  /* Composer wrap — slim height + same 14px breathing room above. */
  html body .ai-view .ai-composer-wrap,
  html body .ai-view .ai-composer-wrap .rich-composer,
  html body .ai-view .ai-composer-wrap textarea,
  html body .ai-view .ai-composer-wrap [contenteditable] { min-height: 44px; }
  html body .ai-view .ai-composer-wrap .rich-composer { padding: 6px 10px; }

  /* Right-column chips: each occupies col 4, one row each. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="office"] { grid-column: 4; grid-row: 1; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="d2d"]    { grid-column: 4; grid-row: 2; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right[data-bucket="all"]    { grid-column: 4; grid-row: 3; }

  /* All bucket chips — unify color + black text. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip {
    border: 1px solid rgba(15,23,42,0.10) !important;
    border-radius: 12px;
    padding: 0.4rem 0.55rem;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.05rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker { font-size: 0.62rem; font-weight: 700; line-height: 1; margin-top: 0.18rem; color: rgba(0,0,0,0.55); }

  /* v2008ay — Big-number color follows direction. Tint the value. */
  /* Subtle border tint to reinforce direction. */

  /* Right column chips slightly tighter so the column stays narrow. */

  /* Hide the legacy single-chip totals (now superseded by individual chips). */

  /* KPI card text: clear hierarchy between title and value. */
  html body .ai-view .home-dash-grid .home-dash-eyebrow,

  /* Bar chart — taller so x-axis day/hour labels are clearly visible. */
  html body .ai-view .home-dash-grid .home-dash-week-bars--full svg { overflow: visible; }

  /* Composer: widen to match the dash-grid width and pull closer to hero. */
  html body .ai-view .ai-composer-wrap,
  /* Hero: tighter top/bottom padding so welcome chip sits closer to composer. */
  html body .ai-view .ai-hero,
  html body .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-hero { padding: 6px 0 6px; margin: 0; }

  /* Cards — slightly more breathing room since bars need height. */

  /* HERO: collapse vertical chrome — keep welcome text but compact. */
  html body .ai-view .ai-hero,
  html body .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero,
  body.route-ask:not(.ai-has-messages) .ai-hero { padding: 4px 0 0; margin: 0; min-height: 0; }
  html body .ai-view .ai-hero .totaly-logo,
  html body .ai-view .ai-hero img { max-height: 36px;        /* shrink logo */; }
  html body .ai-view .ai-hero .hero-greeting,
  html body .ai-view .ai-hero h1,
  html body .ai-view .ai-hero p { font-size: 0.75rem; margin: 2px 0; line-height: 1.2; }

  /* COMPOSER: sit immediately under hero, narrower top padding. */
  html body .ai-view .ai-composer-wrap,
  html body .ai-view [class*="composer-wrap"] { max-width: 1280px; width: 100%; margin: 4px auto 6px; padding-top: 0; padding-bottom: 0; }
  /* Composer field itself slimmer. */
  html body .ai-view .ai-composer,
  html body .ai-view [class*="composer"] .composer-shell,
  html body .ai-view [class*="composer"] form { min-height: 0; }

  html body .ai-view .home-dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(104px, 0.46fr); grid-template-rows: minmax(152px, 1fr) minmax(152px, 1fr) minmax(64px, 0.42fr); gap: 8px; align-content: stretch; max-width: 1280px; margin: 0 auto; }

  /* CARD: stock-ticker layout — head row + value row + bars. */
  html body .ai-view .home-dash-grid .home-dash-card {
    padding: 8px 10px 4px !important;
    gap: 2px !important;
    display: flex;
    flex-direction: column !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    border-radius: 12px;
    overflow: hidden !important;
  }

  /* HEAD: single-line "OFFICE SALES • PEST" with CTA arrow at right. */
  html body .ai-view .home-dash-grid .home-dash-head { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-eyebrow { color: rgba(0,0,0,0.55); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; line-height: 1; }
  /* Bullet separator between channel and category. */
  html body .ai-view .home-dash-grid .home-dash-eyebrow + .home-dash-title::before { content: "·"; margin: 0 4px; color: rgba(0,0,0,0.35); font-weight: 700; }
  html body .ai-view .home-dash-grid .home-dash-title { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem;        /* slightly larger than channel */; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-cta { margin-left: auto; color: rgba(0,0,0,0.45); font-size: 0.7rem; line-height: 1; }

  /* KPI ROW: big tabular value, then "this month" tiny, then "MTD avg X" tiny. */
  html body .ai-view .home-dash-grid .home-dash-kpi {
    display: flex;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: nowrap;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
  }
  html body .ai-view .home-dash-grid .home-dash-value { font-weight: 800; font-size: 1.65rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  html body .ai-view .home-dash-grid .home-dash-unit { color: rgba(0,0,0,0.55); opacity: 1; font-size: 0.6rem; font-weight: 600; text-transform: lowercase; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-ytd-inline {
    color: rgba(0,0,0,0.50) !important;
    opacity: 1;
    font-size: 0.6rem !important;
    font-weight: 600;
    line-height: 1;
    margin-left: auto;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap;
  }

  /* BARS: now with proper aspect ratio and tall enough for x-axis labels. */
  html body .ai-view .home-dash-grid .home-dash-week-bars--full { height: 92px; flex: 1 1 auto; margin-top: 2px; overflow: visible; width: 100%; }
  html body .ai-view .home-dash-grid .home-dash-week-bars--full .kpi-week-svg { width: 100%; height: 100%; display: block; }

  /* CHIPS (bottom + right): match card style for visual cohesion. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip {
    border: 1px solid rgba(15,23,42,0.10) !important;
    border-radius: 12px;
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-eyebrow { color: rgba(0,0,0,0.55); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-bucket-value {
    color: #191A1A !important;
    font-weight: 800 !important;
    line-height: 1;
    font-size: 1.55rem !important;
    margin-top: 1px !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em;
  }
  html body .ai-view .home-dash-grid .home-dash-bucket-unit { color: rgba(0,0,0,0.55); opacity: 1; font-size: 0.58rem; font-weight: 600; text-transform: lowercase; line-height: 1; }
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker { font-size: 0.62rem; font-weight: 700; line-height: 1; margin-top: 1px; font-variant-numeric: tabular-nums; }

  /* Right column chips slimmer. */

  /* Direction tints. */
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-up   { color: #2E7D32; }
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-down { color: #C62828 !important; }

  /* Toggles row sits compactly under the grid. */
  html body .ai-view .home-dash-toggles { margin-top: 6px; padding: 4px 0 0; }

  html body .ai-view .ai-hero .ai-hero-card,
  html body .ai-view .ai-hero .ai-hero-logo,
  /* Welcome line below logo. */
  html body .ai-view .ai-hero p,
  html body .ai-view .ai-hero .ai-hero-greeting,
  html body .ai-view .ai-hero [class*="greeting"] { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.2; }

  html body .ai-view .ai-hero .ai-hero-card,
  html body .ai-view .ai-hero .ai-hero-logo,

  /* Force ALL chip text to black, including ticker percentages. */
  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 .home-dash-bucket-eyebrow,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker,
  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-ticker.is-up,
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-down { color: #191A1A !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-flat { color: rgba(60,64,67,0.85); }
  /* Borders: keep neutral (no green/red tint) so text is the only emphasis. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-up,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-down,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat { border-color: rgba(15, 23, 42, 0.10); }
  /* Card delta text inside KPI cards (the "↗ +4.32%" style chip) — black too. */
  html body .ai-view .home-dash-card .home-dash-delta,
  html body .ai-view .home-dash-card .home-dash-delta.is-up,
  html body .ai-view .home-dash-card .home-dash-delta.is-down,
  html body .ai-view .home-dash-card .home-dash-delta.is-flat { color: rgba(60,64,67,0.85); }

  /* Card padding tighter so squareness reads. */
  /* Bars area expands to fill the squarer card. */
  /* Bigger value to match a square card. */

  /* Bucket chips — stay square-ish: padding evenly, allow eyebrow to wrap so
     "TOTAL OFFICE" / "GRAND TOTAL" two-word eyebrows look balanced. */
  html body .ai-view .home-dash-grid .home-dash-bucket-eyebrow { white-space: normal; line-height: 1.1; font-size: 0.6rem; }

  /* HERO — never clip the greeting line. Compact but breathable. */
  html body .ai-view .ai-hero,
  html body .ai-view.ai-home .ai-hero { overflow: visible; }
  html body .ai-view .ai-hero .ai-hero-card,
  html body .ai-view.ai-home .ai-hero .ai-hero-card {
    overflow: visible;
    padding: 8px 24px 12px !important;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  html body .ai-view .ai-hero .ai-hero-logo,
  html body .ai-view .ai-hero .ai-hero-logo--canvas { height: 44px; max-height: 44px; width: auto; }
  html body .ai-view .ai-hero p.ai-tagline,
  html body .ai-view .ai-hero .ai-tagline { margin: 0; padding: 0; font-size: 0.78rem; line-height: 1.3; }

  /* COMPOSER — slimmer, narrower so dash grid gets vertical breathing room. */
  html body .ai-view .ai-composer-wrap,
  html body .ai-view [class*="composer-wrap"] { max-width: 1100px; margin: 6px auto 4px; padding: 0; }

  /* DASH GRID — totals chips form a true square corner.
     Right column is fixed at 132px wide → bottom row is fixed at 132px tall. */
  html body .ai-view .home-dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 132px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 132px; gap: 8px; max-width: 1280px; margin: 0 auto; }

  /* Cards: sized to fit; bars area takes most of the height. */
  html body .ai-view .home-dash-grid .home-dash-card { padding: 8px 10px 6px !important; gap: 2px !important; }
  html body .ai-view .home-dash-grid .home-dash-week-bars--full { height: 100%; min-height: 0; flex: 1 1 auto; }

  /* Totals chips — equal-square design, simple text hierarchy. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip { padding: 12px; gap: 4px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  html body .ai-view .home-dash-grid .home-dash-bucket-eyebrow { font-size: 0.6rem; line-height: 1.15; }
  html body .ai-view .home-dash-grid .home-dash-bucket-value { font-size: 1.45rem !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right { padding: 10px !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value { font-size: 1.2rem !important; }
  /* Tighter tick text */
  html body .ai-view .home-dash-grid .home-dash-bucket-ticker { font-size: 0.6rem !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-unit { font-size: 0.56rem !important; }

  html body .ai-view .ai-hero .ai-hero-stage {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  /* Keep the logo controlled. */
  html body .ai-view .ai-hero .ai-hero-logo,
  html body .ai-view .ai-hero .ai-hero-logo--canvas { height: 44px !important; max-height: 44px !important; flex: 0 0 auto !important; }
  html body .ai-view .ai-hero .ai-tagline { flex: 0 0 auto !important; }
  /* Hero card breathing room around the stage. */
  html body .ai-view .ai-hero .ai-hero-card,
  html body .ai-view.ai-home .ai-hero .ai-hero-card { padding: 14px 24px 14px !important; }

  body.sidebar-collapsed.route-ask .ai-view { transform: translateX(-32px); }

  html body.route-ask:not(.ai-has-messages) .ai-view { padding-top: 53px; padding-bottom: 18px; box-sizing: border-box; }

  /* Welcome chip — compact PILL, smaller than composer, centered in band. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-card,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero .ai-hero-card {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto;
    max-width: 580px !important;
    margin: 0 auto;
    min-height: 0;
    height: auto;
    padding: 12px 28px !important;
    border-radius: 999px;
    box-sizing: border-box;
  }
  /* Stage — row layout, beaded logo + greeting side by side, vertically
     centered on the same baseline. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-stage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    line-height: 1;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-logo--img,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero img#ai-hero-logo-img {
    position: static;
    top: auto; left: auto;
    transform: none;
    height: 30px;
    max-height: 30px;
    width: auto;
    max-width: 140px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    display: block;
    align-self: center;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  /* Hide the canvas hero (replaced by img). */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero canvas#ai-hero-canvas,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-logo--canvas { display: none; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-tagline,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero p.ai-tagline,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero #ai-greeting,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-card #ai-greeting,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-stage #ai-greeting {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    font-size: 1rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    flex: 0 0 auto;
    text-align: left;
    pointer-events: auto;
    z-index: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 32px;
  }

  /* Collapse the empty .ai-messages spacer on home so the gap between the
     welcome chip and composer matches the topbar→chip gap. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-messages:empty,
  html body.route-ask:not(.ai-has-messages) .ai-view > .ai-messages { padding: 0; margin: 0; min-height: 0; height: 0; }

  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap { margin-top: 27px !important; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap .rich-composer,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap .glass-composer { min-height: 0; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap .rich-composer .rc-textarea,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap textarea { min-height: 28px; max-height: 60px; }

  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,

  /* Center content horizontally + vertically inside ALL totals chips
     (bottom row + right column). */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body .ai-view .home-dash-grid .home-dash-bucket-chip--right { align-items: center !important; justify-content: center !important; text-align: center !important; gap: 3px !important; row-gap: 3px !important; }

  /* Each text child centered. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip > * { text-align: center; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; }

  /* Equal eyebrow / unit / ticker formatting for visual parity across all
     6 chips. */
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: rgba(0,0,0,0.55); }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit { font-size: 9.5px; line-height: 1; color: rgba(0,0,0,0.55); letter-spacing: 0; font-weight: 500; }

  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    position: relative;
    display: flex;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center;
    gap: 0.4rem;
  }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-value { text-align: center !important; }
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-unit { text-align: center !important; }
  /* Pin the inline baseline label to the right corner so it doesn't push
     the centered value+unit cluster off-center. */
  html body .ai-view .home-dash-grid .home-dash-card .home-dash-kpi .home-dash-ytd-inline { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }

  /* Shift the nav pill to align with main content when sidebar collapsed. */
  html body.sidebar-collapsed.route-ask .gl-floating-pill.gl-floating-pill--topbar,
  html body.sidebar-collapsed .gl-floating-pill.gl-floating-pill--topbar,
  html body.sidebar-collapsed header.topbar .gl-floating-pill { transform: translateX(-32px); }

  /* Strip glass / background / border from nav pill container. */
  html body header.topbar .gl-floating-pill,
  html body header.topbar.topbar--with-pill .gl-floating-pill.gl-floating-pill--topbar,
  html body .gl-floating-pill.gl-floating-pill--topbar,
  html body nav.gl-floating-pill.gl-floating-pill--topbar {
    background: transparent;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 999px;
  }

  /* Plain grey text for ALL nav items (default + active + newchat). */
  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,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item,

  /* Active item — slightly brighter grey/white, no background. */
  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,

  /* Hover — gentle lift, no background pill. */
  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,

  /* Hide the divider between newchat and the rest if it adds visual noise. */

  /* === 1) STRIP nav pill container === */
  html body header.topbar .gl-floating-pill,
  html body header.topbar.topbar--with-pill .gl-floating-pill,
  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,
  html body .gl-floating-pill.gl-floating-pill--topbar,
  html body nav.gl-floating-pill.gl-floating-pill--topbar,
  html body nav#gl-floating-pill,
  html body #gl-floating-pill {
    background: none;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
    border-radius: 999px;
  }

  /* === 2) (welcome chip unchanged — keep prior dark glass) === */

  /* === 3) CENTER nav pill on composer (shift -32px when sidebar collapsed) === */
  html body.sidebar-collapsed.route-ask header.topbar .gl-floating-pill,
  html body.sidebar-collapsed header.topbar .gl-floating-pill,
  html body.sidebar-collapsed .gl-floating-pill.gl-floating-pill--topbar,
  html body.sidebar-collapsed nav#gl-floating-pill { transform: translateX(calc(-50% - 32px)); left: 50%; }

  /* Nav items — plain grey text on dark topbar; active = bright white. */
  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,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat {
    background: transparent;
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-family: Satoshi, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  /* v40.5ax: removed transparent active-tab override; active tab uses solid blue from end-of-file block. */
  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 .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active { color: #FFFFFF; font-weight: 600; }
  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,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item:hover { background: transparent; background-image: none; background-color: transparent; color: #ffffff; }
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-sep { background: rgba(255, 255, 255, 0.18); }

  /* Hide time pill. */
  html body header.topbar #sync-indicator,
  html body header.topbar .pill-clock,
  html body .topbar-right .pill-clock,
  html body .status-row .pill-clock,
  html body .status-row #sync-indicator { display: none; }

  /* Strip chrome from Syncing + Brain pills. */
  html body header.topbar #etl-pill,
  html body header.topbar #brain-pill,
  html body .status-row #etl-pill,
  html body .status-row #brain-pill,
  html body .topbar-right .pill--etl,
  html body .topbar-right .pill--brain,
  html body header.topbar .pill.pill--etl,
  html body header.topbar .pill.pill--brain {
    background: none;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: Satoshi, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
  }

  /* Slightly tighten the row spacing now that pill paddings are gone. */
  html body .topbar-right .status-row,
  html body header.topbar .status-row { gap: 16px; }

  /* ───────── 1) Topbar pills — strip chrome, hide clock ───────── */

  /* Hide time pill in every form. */
  html body header.topbar #sync-indicator,
  html body header.topbar .pill-clock,
  html body header.topbar .pill.pill--glass.pill-clock,
  html body header.topbar #sync-indicator.pill--glass,
  html body .topbar-right #sync-indicator,
  html body .topbar-right .pill-clock,
  html body .status-row #sync-indicator,
  html body .status-row .pill-clock { display: none; visibility: hidden; width: 0; padding: 0; margin: 0; border: 0; }

  /* Strip chrome on ETL + Brain pills (high specificity to beat
     `.topbar #etl-pill.pill--glass` rules). */
  html body header.topbar.topbar--with-pill #etl-pill.pill.pill--status.pill--glass,
  html body header.topbar #etl-pill.pill.pill--status.pill--glass,
  html body header.topbar.topbar--with-pill #brain-pill.pill.pill--status.pill--glass,
  html body header.topbar #brain-pill.pill.pill--status.pill--glass,
  html body .topbar-right #etl-pill.pill.pill--glass,
  html body .topbar-right #brain-pill.pill.pill--glass,
  html body .status-row #etl-pill.pill.pill--glass,
  html body .status-row #brain-pill.pill.pill--glass {
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0 none transparent;
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 6px;
    height: auto;
    min-height: 0;
  }

  /* Force grey text on every descendant of those pills. */
  html body header.topbar #etl-pill.pill--glass,
  html body header.topbar #etl-pill.pill--glass *,
  html body header.topbar #brain-pill.pill--glass,
  html body header.topbar #brain-pill.pill--glass *,
  html body .topbar #etl-pill.pill--glass .pill-label,
  html body .topbar #brain-pill.pill--glass .pill-label,
  html body .topbar #etl-pill.pill--glass .pill-icon,
  html body .topbar #brain-pill.pill--glass .pill-icon { color: rgba(255, 255, 255, 0.55); font-family: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; letter-spacing: 0; }

  /* Tighten gap on right side now that pills are bare. */
  html body header.topbar .topbar-right .status-row,
  html body .topbar-right .status-row { gap: 14px; align-items: center; }

  /* ───────── 2) Nav pill — hide "+ New chat" + separator, center items ───────── */

  html body header.topbar .gl-floating-pill .gfp-item--newchat,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat,
  html body header.topbar .gl-floating-pill .gfp-item--newchat + .gfp-sep,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item--newchat + .gfp-sep { display: none; width: 0; padding: 0; margin: 0; border: 0; }

  /* Re-center remaining items as a balanced row. */
  html body header.topbar .gl-floating-pill.gl-floating-pill--topbar,
  html body .gl-floating-pill.gl-floating-pill--topbar { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }

  /* ───────── 3) KPI cards — match totals chip sizing + Satoshi font ───────── */

  /* Big number on graph cards: Satoshi 1.1rem (= totals chip), centered. */
  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-value { font-family: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; text-align: center; }

  /* Bucket chip values (totals row) also Satoshi at same size. */
  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 { font-family: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }

  /* Totals chip values — keep Satoshi at 1.1rem (already there but lock it). */

  html body header.topbar.topbar--with-pill .topbar-right .status-row > #sync-indicator,
  html body header.topbar.topbar--with-pill .topbar-right .status-row > #sync-indicator.pill,
  html body header.topbar.topbar--with-pill .topbar-right .status-row > #sync-indicator.pill.pill--glass,
  html body header.topbar.topbar--with-pill .topbar-right .status-row > #sync-indicator.pill.pill--glass.pill-clock,
  html body header.topbar.topbar--with-pill .topbar-right .status-row > .pill.pill--glass.pill-clock,
  html body.route-ask header.topbar .topbar-right .status-row > #sync-indicator,
  html body.route-ask header.topbar .topbar-right .status-row > .pill-clock {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    overflow: hidden;
  }

  /* Push topbar-right (and its status-row) flush to the right edge with
     just a 12px breathing-room from the viewport edge. */
  html body header.topbar .topbar-right,
  html body header.topbar.topbar--with-pill .topbar-right { margin-left: auto; margin-right: 0; padding-right: 12px; padding-left: 0; justify-content: flex-end; align-self: flex-start; }

  html body header.topbar .topbar-right .status-row,
  html body header.topbar.topbar--with-pill .topbar-right .status-row { margin-left: auto; margin-right: 0; padding-right: 0; justify-content: flex-end; align-items: center; gap: 14px; }

  /* Explicit grey text (not low-opacity white) on ETL + Brain pills,
     matching the site --muted color token / nav-item grey. */
  html body header.topbar #etl-pill.pill--glass,
  html body header.topbar #etl-pill.pill--glass *,
  html body header.topbar #brain-pill.pill--glass,
  html body header.topbar #brain-pill.pill--glass *,
  html body header.topbar.topbar--with-pill .topbar-right #etl-pill,
  html body header.topbar.topbar--with-pill .topbar-right #etl-pill *,
  html body header.topbar.topbar--with-pill .topbar-right #brain-pill,
  html body header.topbar.topbar--with-pill .topbar-right #brain-pill *,
  html body header.topbar #etl-pill .pill-label,
  html body header.topbar #brain-pill .pill-label,
  html body header.topbar #etl-pill .pill-icon,
  html body header.topbar #brain-pill .pill-icon { color: #9AA0A6; fill: #9AA0A6; stroke: #9AA0A6; }

  /* ── 1) View container: max-width + center, like .ai-view ─────────────── */
  html body .main .dashboard-view,
  html body .dashboard-view { max-width: 980px; margin-left: auto; margin-right: auto; padding: 1.5rem 1.5rem 2rem; }

  /* Tighten page-hero gap so layout fits 1440x900 viewport. */
  html body .dashboard-view .page-hero { gap: 1rem !important; margin-bottom: 1rem !important; }

  /* ── 2) Card surfaces: handled by clean v9 dark block at end of file ─── */

  /* Tighten card padding to AI-page rhythm. Hero/panels need a bit more
     breathing room than the dashboard chip cards. */
  html body .dashboard-view .hero-card { padding: 18px 22px 16px; border-radius: 12px; }
  html body .dashboard-view .summary-stack > .card,
  html body .dashboard-view .summary-stack > .panel { padding: 14px 18px; }
  html body .dashboard-view .kpi-grid .kpi-card { padding: 12px 14px; }
  html body .dashboard-view .dashboard-lower .card,
  html body .dashboard-view .dashboard-lower .chat-panel { padding: 14px 16px; }
  html body .dashboard-view .right-panel .right-section,
  html body .dashboard-view .right-panel .card { padding: 14px 16px; }
  html body .dashboard-view .coo-kpi-grid .coo-kpi-btn,
  html body .dashboard-view .coo-kpi-btn { padding: 10px 12px; min-height: auto; }

  /* ── 3) Typography: lock Satoshi (no Cabinet Grotesk on Overview) ─────── */
  html body .dashboard-view,
  html body .dashboard-view *,
  html body .dashboard-view .hero-headline,
  html body .dashboard-view .panel-title,
  html body .dashboard-view .coo-kpi-label,
  html body .dashboard-view .section-label,
  html body .dashboard-view .kpi-label,
  html body .dashboard-view .kpi-value { font-family: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

  /* Eyebrow: ALL CAPS, 0.78rem, weight 700, letter-spacing 0.08em,
     muted-on-light color from AI page (rgba(0,0,0,0.55)). */
  html body .dashboard-view .eyebrow,
  html body .dashboard-view .hero-card .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); margin: 0 0 6px 0; }

  /* Hero headline: Satoshi 1.5rem, weight 700, tight tracking. */
  html body .dashboard-view .hero-headline { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #0F172A; margin: 0 0 4px 0; line-height: 1.15; }
  html body .dashboard-view .hero-lead { font-size: 0.875rem; color: rgba(15, 23, 42, 0.62); margin: 0 0 14px 0; line-height: 1.45; }

  /* Panel titles inside summary cards: small, weight 700, slate-800. */
  html body .dashboard-view .panel-title,
  html body .dashboard-view .right-section .section-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); margin: 0 0 10px 0; }

  /* Summary item rows. */
  html body .dashboard-view .summary-item { padding: 8px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); font-size: 0.875rem; }
  html body .dashboard-view .summary-item:last-child { border-bottom: 0; }
  html body .dashboard-view .summary-item span { color: rgba(15, 23, 42, 0.6); font-size: 0.82rem; font-weight: 500; }
  html body .dashboard-view .summary-item strong { color: #0F172A; font-size: 0.88rem; font-weight: 600; }

  /* COO KPI buttons — tighter, AI-page chip rhythm. */
  html body .dashboard-view .coo-kpi-grid { gap: 0.55rem; margin-top: 0.85rem; }
  html body .dashboard-view .coo-kpi-label { font-size: 0.86rem; font-weight: 600; color: #0F172A; letter-spacing: -0.005em; line-height: 1.2; text-transform: none;  /* card titles ALL CAPS apply to PEST/WEED only */; }
  html body .dashboard-view .coo-kpi-src { font-size: 0.7rem; color: rgba(15, 23, 42, 0.55); letter-spacing: 0.01em; line-height: 1.3; margin-top: 2px; }
  html body .dashboard-view .coo-kpi-btn:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(25, 118, 210, 0.32); transform: none; }
  html body .dashboard-view .coo-kpi-btn:hover .coo-kpi-label,
  html body .dashboard-view .coo-kpi-btn:hover .coo-kpi-src { color: #0D47A1; }

  /* KPI cards (lower grid) — same chip surface, tighter type. */
  html body .dashboard-view .kpi-grid .kpi-card .kpi-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }
  html body .dashboard-view .kpi-grid .kpi-card .kpi-value { font-size: 1.5rem; font-weight: 700; color: #0F172A; letter-spacing: -0.02em; margin: 4px 0; }
  html body .dashboard-view .kpi-grid .kpi-card .kpi-trend,
  html body .dashboard-view .kpi-grid .kpi-card .kpi-footer { color: rgba(15, 23, 42, 0.55); font-size: 0.78rem; }

  /* Sparkline stroke: keep neutral graphite on light surface. */
  html body .dashboard-view .kpi-grid .kpi-card .sparkline polyline { stroke: rgba(15, 23, 42, 0.45); }

  /* Locked rule: bar fill is #1976D2 (only graph bars carry color). */
  html body .dashboard-view svg .bar,
  html body .dashboard-view svg rect.bar,
  html body .dashboard-view svg .bar-fill,
  html body .dashboard-view svg [data-bar="true"],
  html body .dashboard-view .home-dash-bar { fill: #1976D2; color: #1976D2; }

  /* Right panel sections: section-label as small caps. */
  html body .dashboard-view .right-panel .section-label { margin-bottom: 8px; }

  /* Quick-actions buttons: chip-like, light surface. */
  html body .dashboard-view .right-panel .qa-btn {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #0F172A;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  html body .dashboard-view .right-panel .qa-btn:hover { background: rgba(25, 118, 210, 0.08); border-color: rgba(25, 118, 210, 0.32); color: #0D47A1; }

  /* Inline chat composer on dashboard: keep AI-page composer feel
     (dark surface) inside the white card — high contrast. */
  html body .dashboard-view .dashboard-lower .chat-panel .rich-composer,
  html body .dashboard-view .dashboard-lower .ai-composer-wrap .rich-composer { background: rgba(15, 23, 42, 0.04); background-image: none; border: 1px solid rgba(15, 23, 42, 0.12); color: #0F172A; }
  html body .dashboard-view .dashboard-lower .rich-composer textarea,
  html body .dashboard-view .dashboard-lower .rich-composer [contenteditable] { color: #0F172A; background: transparent; }

  /* Panel titles in chat panel: align with eyebrow style. */
  html body .dashboard-view .dashboard-lower .chat-panel .panel-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }

  /* Chip text on cards must be black (locked rule). */
  html body .dashboard-view .home-dash-bucket-chip,
  html body .dashboard-view .home-dash-bucket-chip *,
  html body .dashboard-view .home-dash-totals-card,
  html body .dashboard-view .home-dash-totals-card * { color: #191A1A; }

  /* Layout: dashboard-lower grid gap consistency. */
  html body .dashboard-view .dashboard-lower { gap: 1rem; }
  html body .dashboard-view .right-panel { gap: 0.75rem; display: flex; flex-direction: column; }

  /* page-hero two-column ratio: hero card primary, summary stack secondary. */
  html body .dashboard-view .page-hero { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr) !important; gap: 1rem !important; }
  html body .dashboard-view .summary-stack { gap: 0.75rem; }
}

/* ── 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) {
  html body .main .dashboard-view,
  html body .dashboard-view {
    max-width: min(1800px, calc(100vw - 280px - 4rem));
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 2.5rem 3rem;
  }

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

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

  .dashboard-view .right-panel {
    width: 420px;
    min-width: 420px;
    flex-shrink: 0;
  }

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

@media (min-width: 3840px) {
  html body .main .dashboard-view,
  html body .dashboard-view {
    max-width: min(2400px, calc(100vw - 300px - 6rem));
    padding: 2.5rem 3rem 4rem;
  }
}
/* ── END Studio 5K fix ──────────────────────────────────────────────── */

/* ── 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;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E5E7EB;
  border-radius: 999px;
  padding: 6px 12px;
  height: 30px;
  display: inline-flex;
  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;
}
.home-dash-toggle:hover,
.home-dash-toggle:focus-visible { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); outline: none; }
.home-dash-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.home-dash-toggle .home-dash-toggle-label { color: rgba(229, 231, 235, 0.55); font-weight: 500; letter-spacing: 0.01em; }
.home-dash-toggle .home-dash-toggle-value { color: #F3F4F6; font-weight: 700; }
.home-dash-toggle .home-dash-toggle-caret { color: rgba(229, 231, 235, 0.55); font-size: 0.7rem; margin-left: 2px; }
.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 rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.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: #E5E7EB;
  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: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 12px 14px 12px;
  font-family: Inter, system-ui, sans-serif;
  color: #E5E7EB;
  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: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E5E7EB;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.home-dash-dp-nav:hover { background: rgba(255, 255, 255, 0.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: #E5E7EB;
  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: rgba(255, 255, 255, 0.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 rgba(255, 255, 255, 0.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: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E5E7EB;
  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: rgba(255, 255, 255, 0.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). */

.home-dash-toggle--display { cursor: default; user-select: none; opacity: 0.92; }
.home-dash-toggle--display:hover { background: inherit; }
.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: rgba(255, 255, 255, 0.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.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-card,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero .ai-hero-card { max-width: 480px; padding: 10px 24px; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero img#ai-hero-logo-img,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-hero-logo--img { height: 26px; max-height: 26px; max-width: 120px; }
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero .ai-tagline,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero #ai-greeting { font-size: 0.92rem; height: 28px; }

  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. */

/* ─────────────────────────────────────────────────────────────────────
   v40.5ap — Automations view: clean dark theme on locked palette
   Replaces the stale v2008be.23 light-glass block.
   Palette: bg #191A1A · card #1F2121 · border #2A2A2A · text #E5E5E5 / #B8B8B8 / #8A8A8A · accent #2196F3
   ───────────────────────────────────────────────────────────────────── */

/* View container + grid */
html body .automations-view {
  padding: 1.25rem 1.5rem 2rem !important;
  max-width: 980px !important;
  margin: 0 auto;
  background: transparent;
}
html body .automations-view .automations-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Toolbar (header bar above cards) */
html body .automations-view .automations-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  padding: 0;
}
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: #FFFFFF;
  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: #FFFFFF;
}

/* Kill background on every descendant pill/wrap so they don't bleed boxes */
html body .automations-view .automation-card-head,
html body .automations-view .automation-card-title-wrap,
html body .automations-view .automation-card-title,
html body .automations-view .automation-card-status,
html body .automations-view .automation-card-desc,
html body .automations-view .automation-card-foot,
html body .automations-view .automation-card-metric,
html body .automations-view .automation-card-actions,
html body .automations-view .automation-stat,
html body .automations-view [class^="automation-card-"]:not(.automation-card):not(.automation-card-stats):not(.automation-card-badge),
html body .automations-view [class*=" automation-card-"]:not(.automation-card):not(.automation-card-stats):not(.automation-card-badge) {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 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 */
html body .automations-view .automation-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
}

/* Status dot */
html body .automations-view .automation-card .auto-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}
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 */
html body .automations-view .automation-card-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

/* 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 */
html body .automations-view .automation-card-desc {
  color: #B8B8B8;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

/* Footer: divider + metric + actions */
html body .automations-view .automation-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.6rem;
  margin-top: 0.15rem;
  border-top: 1px solid #2A2A2A;
  border-radius: 0;
}

/* Metric ("12 runs") */
html body .automations-view .automation-card-metric {
  color: #8A8A8A;
  font-size: 0.78rem;
  font-weight: 500;
}
html body .automations-view .automation-card-metric strong {
  color: #E5E5E5;
  font-weight: 700;
  margin-right: 0.2rem;
}

/* Action button row */
html body .automations-view .automation-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 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: #FFFFFF;
}
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 {
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline .toggle-track {
  background: #2A2A2A;
  border-radius: 999px;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline .toggle-track::before {
  width: 16px;
  height: 16px;
  background: #E5E5E5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline input:checked + .toggle-track {
  background: #4CAF50;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline input:checked + .toggle-track::before {
  transform: translateX(14px);
}

/* "Live" badge next to title */
html body .automations-view .automation-card-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.5rem;
  margin-left: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2196F3;
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.32);
  border-radius: 999px;
}

/* iMessage live stats panel */
html body .automations-view .automation-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  padding: 0.6rem 0.75rem;
  background: #191A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #B8B8B8;
}
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 */
html body .automations-view .automation-card-skeleton {
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(90deg, #1F2121 0%, #262828 50%, #1F2121 100%);
  background-size: 200% 100%;
  border: 1px solid #2A2A2A;
  animation: shimmer 1.4s infinite linear;
}

/* Empty state */
html body .automations-view .empty-state {
  background: #1F2121;
  border: 1px dashed #3A3A3A;
  border-radius: 12px;
  color: #B8B8B8;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.88rem;
}
/* end v40.5ap-automations */

/* 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: #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: #EAEBEC !important;
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, "Segoe UI",
               sans-serif !important;
  overflow: hidden;
}

/* v40.14 — On desktop the Ask panel is a flush right-side rail (square
   corners, single hairline left border), not a floating rounded card.
   Placed after the block above so it wins the tie on equal specificity;
   still needs !important to beat that block's !important border/shadow. */
@media (min-width: 821px) {
  html body .floating-chat .floating-chat-panel,
  html body .floating-chat.open .floating-chat-panel {
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(234, 235, 236, 0.08) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45) !important;
  }
}

/* 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.user,
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: #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: #EAEBEC;
  caret-color: #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: #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. */

/* end v2008be.23-floatingchat */

/* 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,
.settings-view .settings-block-title {
  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); }
.settings-view .settings-identity-name { font-size: 0.95rem; font-weight: 600; }
.settings-view .settings-identity-handle { font-size: 0.8rem; }
.settings-view .settings-outline-btn { font-size: 0.8rem; font-weight: 500; }

/* 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,
.settings-view .settings-promo--glass,
.settings-view.settings-view--compact .settings-promo--glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%), #1F2121; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.22); border-radius: 12px; padding: 14px 16px; margin: 14px 0 0 0; }
.settings-view .settings-promo--glass::before { background: radial-gradient(60% 80% at 0% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 60%); }
.settings-view .settings-promo-title,
.settings-view.settings-view--compact .settings-promo-title { font-size: 0.85rem; font-weight: 600; color: #EAEBEC; margin-bottom: 3px; letter-spacing: 0; }
.settings-view .settings-promo-sub,
.settings-view.settings-view--compact .settings-promo-sub { font-size: 0.78rem; color: rgba(197, 197, 196, 0.66); }
.settings-view .settings-promo-btn,
.settings-view.settings-view--compact .settings-promo-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #EAEBEC !important;
  font-size: 0.8rem !important;
  font-weight: 600;
  height: 30px !important;
  padding: 0 16px;
  border-radius: 999px;
}
.settings-view .settings-promo-btn:hover,
.settings-view.settings-view--compact .settings-promo-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }

/* 4) Subscription tier chip — neutralize from any blue tint, match graphite. */
.settings-view .sub-tier-chip,
.settings-view .sub-tier-chip--enterprise,
.settings-view.settings-view--compact .sub-tier-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #EAEBEC !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  padding: 2px 9px !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

.settings-view .settings-block { margin: 0 0 32px 0; }
.settings-view .settings-block + .settings-block { margin-top: 32px; }
.settings-view .settings-block-head { margin: 0 0 6px 0; padding: 0 0 8px 0; }
.settings-view .settings-row,
.settings-view .settings-row--identity,
.settings-view .settings-row--sub { padding: 14px 0; gap: 16px; }
.settings-view .srl-title { margin: 0 0 4px 0; }
.settings-view .srl-value { margin: 0; }
.settings-view .settings-row.settings-promo,
.settings-view .settings-row.settings-promo--glass { margin: 12px 0 0 0; padding: 14px 16px; }

/* end v2008be.23-settings */

/* 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-header { margin: 0 0 1.25rem; }
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 {
  display: flex;
  flex-direction: column !important;
  gap: .55rem !important;
  padding: 1rem 1.05rem 1.05rem !important;
  min-height: 150px !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px -12px rgba(0,0,0,0.18) !important;
  text-decoration: none;
  color: #191A1A !important;
  font-family: 'Satoshi','Inter',system-ui,sans-serif !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
  flex: unset;
  width: auto;
  min-width: 0;
  max-width: none;
}
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-meta { font-family: 'Satoshi','Inter',system-ui,sans-serif; font-size: .78rem; color: rgba(25,26,26,0.6); letter-spacing: 0.01em; }
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. */
html body[data-route="/reports"] .reports-view,
html body[data-route^="/reports"] .reports-view { max-width: 1320px; margin: 0 auto; }

/* ── 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 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: #E8E7E5; margin: 0; text-transform: uppercase; }
html body .gl-dash-pack-sub { font-size: .82rem; color: #777E90; margin: 0 0 1rem; }

/* 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%; }

@media (max-width: 600px) {
  html body .gl-dash-pack { grid-template-columns: 1fr; }
}

/* ── 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[data-route="/reports"] .reports-view,
  html body[data-route^="/reports"] .reports-view {
    max-width: min(90vw, 3200px) !important;
    margin: 0 auto;
  }
}

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; }

/* end v2008be.23-dashdivisions */

/* 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. */
.rich-composer-suggestions,
.ask-suggestion,
.ai-suggest,
.chip-suggestion,
.query-suggestion,
.suggestion-chips,
[class*="suggestion-chip"],
[class*="querySuggestion"],
[class*="query-suggestion"],
[data-role="suggestion"],
[data-type="suggestion-chip"] { display: none; visibility: hidden; pointer-events: none; }
/* end v2008be.25-no-suggestions */

/* 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; }

/* end v2008be.24-kpis */

/* ===================================================================
   v2008be.26-hookups — P6a static-audit hookups
   Cosmetic shims for the JS-injected sections (recent actions,
   scheduler jobs). Most styling is inline in app.js — this block
   provides darkmode-safe overrides only.
   =================================================================== */
.recent-actions-wrap .activity-item { padding: 6px 0; }
.recent-actions-wrap .activity-title { font-size: 0.86rem; color: #1F2121; }
.recent-actions-wrap .activity-meta { font-size: 0.72rem; color: #9AA0A6; }
.scheduler-jobs-card { padding: 14px 16px; border: 1px solid rgba(0,0,0,0.06); }
.scheduler-jobs-card .activity-title { font-size: 0.88rem; color: #1F2121; }
.scheduler-jobs-card .activity-meta { font-size: 0.74rem; color: #9AA0A6; }
.scheduler-jobs-card .text-muted { color: #9AA0A6; }
/* end v2008be.26-hookups */

/* ─────────────────────────────────────────────────────────────────────────
   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. */
@media (min-height: 1100px) {
  html body .ai-view .home-dash-grid,
  html body .ai-view .home-dash-grid .home-dash-card,
  html body .home-dash-grid .home-dash-card,
}
/* end v2008be.27 */

/* ─────────────────────────────────────────────────────────────────────────
   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,
html body .ai-view .home-dash-grid .home-dash-totals-ticker.is-up {
  color: #2E7D32;  /* up-token */
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-down,
html body .ai-view .home-dash-grid .home-dash-totals-ticker.is-down {
  color: #C62828;  /* down-token */
}
html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-flat,
html body .ai-view .home-dash-grid .home-dash-totals-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-totals-ticker.is-hidden-asis,
html body .ai-view .home-dash-grid .home-dash-bucket-ticker.is-hidden-asis {
  display: none;
}
/* end v2008be.28 */

/* ─────────────────────────────────────────────────────────────────────────
   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. */
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero,
  html body:not(.ai-has-messages).route-ask .ai-hero {
    margin: 0;
    margin-bottom: auto;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .home-launcher,
  html body.route-ask:not(.ai-has-messages) .ai-view .home-launcher {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/* end v2008be.29 */

/* ─────────────────────────────────────────────────────────────────────────
   v2008be.30 — Three asks:
     1. Studio: vertically center welcome chip between top header and
        composer (chip size unchanged).
     2. Totals (right column + bottom row): big number stays black, only
        the percent delta is colored. Top-align all text so the eyebrow
        lines up with the data-card eyebrows on the left. Big number
        becomes much larger.
     3. Laptop: tighten further so totals row + percentages don't get
        clipped at the viewport bottom.
   ───────────────────────────────────────────────────────────────────────── */

/* (1) Studio — vertically center welcome chip in spare space ABOVE composer.
   Strategy: hero gets BOTH margin-top: auto AND margin-bottom: auto. With
   composer/launcher at flex 0 0 auto with margin: 0, the spare space inside
   .ai-view splits evenly above and below the hero, leaving composer + grid
   exactly where they were (still hugging the bottom). */
@media (min-height: 1100px) {
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero,
  html body:not(.ai-has-messages).route-ask .ai-hero {
    margin: auto 0 !important;          /* center vertically between top edge and next sibling */
  }
  /* Composer must NOT consume spare space — keep margin: 0 so hero's auto
     margins eat it instead. (already set in v2008be.29; reaffirmed here.) */
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* (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.route-ask:not(.ai-has-messages) .ai-view.ai-home,
  html body.route-ask:not(.ai-has-messages) .ai-view {
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
  }
  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.route-ask:not(.ai-has-messages) .ai-view.ai-home,
  html body.route-ask:not(.ai-has-messages) .ai-view {
    gap: 0.5rem;
  }
  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;
  }
}
/* end v2008be.30 */

/* ─────────────────────────────────────────────────────────────────────────
   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 */
  }
}
/* end v2008be.31 */

/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}
@media (min-width: 720px) and (max-height: 1099px) {
  /* LAPTOP — lock everything to 1.85rem (= 27.75px). Cancels the v31 split
     where GRAND TOTAL ended up at 1.7rem. */
  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,
}
/* end v2008be.32 */

/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}
/* end v2008be.33 */

/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}
/* end v2008be.34 */

/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}
/* end v2008be.35 */

/* ─────────────────────────────────────────────────────────────────────────
   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;
  }
}
/* end v2008be.36 */

/* ─────────────────────────────────────────────────────────────────────────
   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 10px;
    min-width: 0;
    cursor: pointer;
    /* v2008be.47e — match the other toolbar pills exactly:
       same color (#E5E7EB), same bg/border, same 30px height. */
    color: #E5E7EB;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    height: 30px;
    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.10);
    border-color: rgba(255, 255, 255, 0.18);
    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; }
  }
}
/* end v2008be.37 */

/* ============================================================
   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 */
@media (max-width: 700px) {
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit   { font-size: 11px !important; }
  html body .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker { font-size: 12px !important; }
}

/* 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;
}
/* end v2008be.38 */

/* ============================================================
   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;
  }
}
/* end v2008be.44 */
/* end v2008be.42 */

/* ============================================================
   v2008be.47 — KPI pills row + minimize toggle
   Default (collapsed) state: pills visible, .home-launcher hidden.
   Active state (body.kpi-active): pills hidden, launcher visible
   with minimize button at top-left.
   ============================================================ */

/* 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: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  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: #ffffff;
  border-color: rgba(25,118,210,0.45);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(25,118,210,0.10);
}
.kpi-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1976D2;
}
/* v2008be.47d — stubs render at full color (production-ready look). They
   remain non-interactive (no hover lift, not-allowed cursor) until wired up. */
.kpi-pill--stub { opacity: 1; }
.kpi-pill--stub:hover {
  background: rgba(255,255,255,0.92);
  border-color: rgba(60,64,67,0.18);
  transform: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: not-allowed;
}

/* Default (collapsed) state — KPI grid hidden, pills visible */
body.route-ask:not(.ai-has-messages):not(.kpi-active) .home-launcher { display: none; }

/* 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: rgba(255,255,255,0.92);
  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: #ffffff;
  border-color: rgba(25,118,210,0.45);
  color: #1976D2;
}

/* Mobile: hide pill row on small screens for now (KPI grid is desktop-only) */
@media (max-width: 768px) {
  .kpi-pills-row { display: none; }
}
/* end v2008be.47 */

/* ============================================================
   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).
   ============================================================ */

body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

/* Hero — absolute, JS sets its `top` to (composerTop - heroH) / 2 */
body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .ai-hero {
  position: absolute !important;
  left: 0;
  right: 0;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .ai-hero .ai-hero-card {
  pointer-events: auto;
}

/* Pull the centered group up by half the pills height so the
   composer (not the group) is at the visual vertical midpoint. */
body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .kpi-pills-row {
  margin-bottom: 0;
}
body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .home-launcher {
  /* hidden in collapsed state by v47 rule above */
}

/* 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 */
@media (max-width: 768px) {
  body.route-ask:not(.ai-has-messages):not(.kpi-active) .ai-view.ai-home .ai-hero {
    position: static;
    top: auto;
  }
}
/* end v2008be.47b */

/* ============================================================
   v2008be.47c — Expanded state: grid hugs bottom of launcher,
   composer floats down to sit just above grid. Applies to BOTH
   laptop and studio so the composer is centered-ish and the dash
   is bottom-hugging, with hero between header and composer.
   ============================================================ */
@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;
  }
}
/* end v2008be.47c */

/* =========================================================================
   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;
}

/* v40.24: fade removed — user wants chat history rows at full opacity to the footer. */
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. */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle {
  position: relative;
  cursor: pointer;
  width: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  height: 26px;
  align-self: center;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: rgba(15, 23, 42, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  transition: color 140ms ease;
}
/* The visible 26px pill is rendered as a pseudo behind the icon, only on hover */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 140ms ease, border-color 140ms ease;
  pointer-events: none;
}
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle:hover::before {
  background: rgba(13, 71, 161, 0.12);
  border-color: rgba(13, 71, 161, 0.22);
}

/* Two icons stacked, only one visible at a time */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle .sqi-icon-clock,
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle .sqi-icon-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 220ms ease;
  pointer-events: none;
}
/* Default: clock visible, arrow hidden */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle .sqi-icon-clock { opacity: 1; }
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle .sqi-icon-arrow { opacity: 0; }

/* 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. */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle:hover {
  color: #0D47A1;
}
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle:hover .sqi-icon-clock { opacity: 0; }
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle:hover .sqi-icon-arrow { opacity: 1; }

/* Arrow direction: down when expanded, right when collapsed */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle .sqi-icon-arrow {
  transform: translate(-50%, -50%) rotate(0deg);
}
aside.sidebar#sidebar .sidebar-quick-item--history[data-history-collapsed="true"] .sqi-icon.sqi-icon--toggle .sqi-icon-arrow {
  transform: translate(-50%, -50%) rotate(-90deg);
}
/* When collapsed, default-show the arrow (no need to hover to see direction cue) */
aside.sidebar#sidebar .sidebar-quick-item--history[data-history-collapsed="true"] .sqi-icon.sqi-icon--toggle .sqi-icon-clock { opacity: 0; }
aside.sidebar#sidebar .sidebar-quick-item--history[data-history-collapsed="true"] .sqi-icon.sqi-icon--toggle .sqi-icon-arrow { opacity: 1; }

/* ---- Strip the persistent "is-open" pill background from Chat history ----
   Make Chat history visually identical to Home / Data sources 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 / Data sources 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: #0D47A1;
}
aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history:hover .sqi-label {
  color: #0D47A1;
}
/* 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-label {
  color: #8F8E8C;
  font-weight: 400;
}
body.route-chats aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history .sqi-icon {
  color: #8F8E8C !important;
}

/* Hide the right-side caret (chevron-down on the right) — toggle handled by left icon now */
aside.sidebar#sidebar .sidebar-quick-item--history .sqi-caret,
aside.sidebar#sidebar .sidebar-quick-item--history .core-caret { display: none; }

/* 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, Data sources, 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;
}

/* end v2008be.47f */

/* ===== 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,
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon .sqi-icon-arrow { 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; }
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon .sqi-icon-clock { opacity: 1; }
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon .sqi-icon-arrow { opacity: 0; }
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; }
html body aside.sidebar#sidebar .sidebar-quick-item--history #sqi-history-icon:hover .sqi-icon-arrow { opacity: 1; color: #0D47A1; }

/* When history list is collapsed, arrow points right (rotated). Toggle by aria-expanded on parent button. */
html body aside.sidebar#sidebar .sidebar-quick-item--history[aria-expanded="false"] #sqi-history-icon .sqi-icon-arrow { transform: translate(-50%, -50%) rotate(-90deg); }

/* 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) .sqi-icon-arrow { opacity: 0; }
html body aside.sidebar#sidebar .sidebar-quick-item--history:hover #sqi-history-icon:not(:hover) { background: transparent; }

/* end v2008be.47k */

/* ===== 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;
}
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only[title="Home"] {
  /* update tooltip via title attribute can't be done via CSS; rely on aria-label override below */
}

/* 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 Data sources ─── */
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item .sqi-badge {
  display: none;
}

/* end v2008be.47l */

/* ===== 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,
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon .sqi-icon-arrow {
  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;
}

/* end v2008be.47m */

/* ===== 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;
}
html body aside.sidebar#sidebar .sidebar-quick-nav--v1929 .sidebar-quick-item--history #sqi-history-icon .sqi-icon-arrow {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.4 !important;
}

/* FIX 2: Chat history label color/weight = match Data sources (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;
}
/* Use a 32px circular bg via ::before so the pill is visually round.
   Need extra specificity to outrank lines 2668/5443 which set content:none;display:none */
/* Logo expand-arrow round pill on hover (no ::before pseudo to avoid house mask).
   Use border-radius:999px on the BUTTON itself + bg color on hover. */
html body.sidebar-collapsed aside.sidebar#sidebar .sidebar-header--v1944 .brand--logo-only:hover {
  background: rgba(13, 71, 161, 0.14) !important;
  border-radius: 999px;
}

/* end v2008be.47n */

/* ============================================================
   v47p.3 — CH ACTIVE TEXT STAYS GREY (FINAL OVERRIDE)
   v47l .active rule was winning because of html body specificity.
   This override uses html body.route-chats to outrank it.
   Only TEXT/ICON differ from Home/DS active — the blue pill bg stays.
   ============================================================ */
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-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 {
  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;
}

/* ============================================================
   v47p.5 — CH HOVER BG MATCHES GREY TEXT (not blue tint)
   User: outline/border on hover should be the same grey as the text.
   ============================================================ */
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;
}

/* ============================================================
   v47p.6 — REVERT: CH sidebar tab returns to BLUE hover/active
   (uniform with Home/DS). User clarified the previous request was
   about the chat-history-item tooltip, not the sidebar tab.
   ============================================================ */
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;
}

/* ============================================================
   v47p.6 — CUSTOM HOVER TOOLTIP for chat-history items.
   Replaces native browser title=""; matches AI composer:
   bg #1F2121, border 1px #2A2928, color #8F8E8C, radius 12px.
   ============================================================ */
#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: #1F2121;
  border: 1px solid #2A2928;
  border-radius: 12px;
  color: #8F8E8C;
  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 rgba(0, 0, 0, 0.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 {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.4s, 0.4s, 0s;
}

/* ============================================================
   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: #1F2121;
  border: 1px solid #2A2928;
  border-radius: 12px;
  color: #8F8E8C;
  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 rgba(0, 0, 0, 0.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;
}
[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;
}

/* ============================================================
   v47p.9 — Notifications panel: full Perplexity-style redesign.
   Dark sidebar-matched bg, tight rows, aligned with sidebar's
   right border. "You're all caught up" stub when no unread.
   ============================================================ */

/* 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;
}
html body .notif-panel.is-open {
  display: block;          /* JS also sets display:block; belt+suspenders */
}
/* Mobile fallback — anchor to bottom over content */
@media (max-width: 820px) {
  html body .notif-panel,
  html body .notif-panel.is-open {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    max-width: calc(100vw - 24px) !important;
    bottom: 76px !important;
  }
}

/* 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;
}
html body .notif-panel .notif-panel-actions {
  display: flex;
  align-items: center !important;
  gap: 4px !important;
}
html body .notif-panel .notif-panel-seeall,
html body .notif-panel .notif-panel-clear {
  background: transparent;
  border: 0;
  color: #8F8E8C !important;
  font-size: 0.75rem !important;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 8px !important;
  border-radius: 6px;
  cursor: pointer;
}
html body .notif-panel .notif-panel-seeall:hover,
html body .notif-panel .notif-panel-clear:hover {
  background: rgba(255,255,255,0.04);
  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;
}

/* ============================================================
   v47p.10 — Notif panel: no blue dividers, taller, bell unread
   dot positioned tight, full backend history scrollable.
   ============================================================ */

/* 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;
}
html body .notif-panel .notif-panel-actions { display: none; }
html body .notif-panel .notif-panel-seeall,
html body .notif-panel .notif-panel-clear { display: none; }

/* 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;
}

/* ============================================================
   v47p.11 — Unread row: rounded subtle highlight, NO blue.
   Strip every legacy blue background/border on .is-unread.
   ============================================================ */
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; }

/* ============================================================
   v47p.12 — Exact sidebar-right-edge alignment.
   Measured: expanded sidebar.right = 240px, collapsed = 64px.
   ============================================================ */
/* 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;
}

/* ============================================================
   v47p.13 — Bell unread dot positioned tight top-right of bell.
   Outranks aside.sidebar#sidebar .sidebar-footer .footer-notif-dot
   from line 4557 which forces top/right=0.
   ============================================================ */
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: #1F2121;
  border: 1px solid #2A2928;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.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: #FFFFFF;
  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: #1976D2;
  color: #FFFFFF;
}
.account-menu-tier-badge[data-tier="max"] {
  background: #FFFFFF;
  color: #1F2121;
}
.account-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.account-menu-name {
  color: #FFFFFF;
  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: rgba(255,255,255,0.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: #FFFFFF;
  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: rgba(255,255,255,0.07);
}
.account-menu-icon {
  flex: 0 0 16px;
  color: #FFFFFF;
}
.account-menu-label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.account-menu-label-main {
  color: #FFFFFF;
  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: #8F8E8C;
}

/* Appearance submenu — slides out to the right when expanded */
.account-submenu {
  display: none;
  margin: 4px 6px;
  padding: 4px;
  background: rgba(255,255,255,0.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: #E8E7E5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}
.account-submenu-item:hover {
  background: rgba(255,255,255,0.06);
}
.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: #2196F3;
}
.account-submenu-item[aria-checked="true"] .account-submenu-check {
  display: inline-block;
}

/* ====================================================================
 * v47p.17 — Account menu contrast fix
 * The sidebar has a global `aside.sidebar *` rule forcing dark text;
 * we need higher-specificity selectors to keep menu text bright.
 * ================================================================== */
html body aside.sidebar .account-menu,
html body aside.sidebar .account-menu * {
  color: #FFFFFF;
}
html body aside.sidebar .account-menu .account-menu-name { color: #FFFFFF; }
html body aside.sidebar .account-menu .account-menu-email { color: #B8B7B4; }
html body aside.sidebar .account-menu .account-menu-label-main { color: #FFFFFF; }
html body aside.sidebar .account-menu .account-menu-label-sub { color: #B8B7B4 !important; }
html body aside.sidebar .account-menu .account-menu-icon { color: #FFFFFF; }
html body aside.sidebar .account-menu .account-menu-chev { color: #B8B7B4; }
html body aside.sidebar .account-menu .account-submenu-item { color: #FFFFFF; }
html body aside.sidebar .account-menu .account-submenu-check { color: #2196F3; }
html body aside.sidebar .account-menu .account-menu-tier-badge { color: #FFFFFF; }
html body aside.sidebar .account-menu .account-menu-tier-badge[data-tier="enterprise"] { color: #FFFFFF; background: #1976D2; }
html body aside.sidebar .account-menu .account-menu-tier-badge[data-tier="max"] { color: #1F2121; background: #FFFFFF; }
/* 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: #FFFFFF;
}
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: #FFFFFF;
  stroke: #FFFFFF;
}
/* 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 */
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);
}
/* 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"] {
  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: #191A1A !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: #191A1A !important;
  background-color: #191A1A !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: #191A1A;
  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: rgba(33,150,243,0.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: rgba(255,255,255,0.92);
  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: #fff; font-weight: 600; }
.ai-messages .msg-bubble.msg-assistant .ai-prose code,
.ai-messages .msg-bubble.msg-assistant .ai-prose pre {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.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 rgba(255,255,255,0.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 */
/* v40.5g: was inline-flex row → flipped to flex column so the spinner +
   thinking-text + thinking-stream + phase-row stack vertically, the way
   Claude Code renders thinking. This stops the stream from being squeezed
   into a narrow column where each step balloons to 130-150px tall. */
.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: rgba(255,255,255,0.85) !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: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.92);
  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 rgba(255, 255, 255, 0.12);
}
.ai-thinking .ai-thinking-text,
.msg-thinking-plex .msg-thinking-text {
  color: rgba(255,255,255,0.85);
  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. */
.totaly-thinking-spinner {
  width: 22px; height: 22px;
  display: inline-block;
  animation: totaly-thinking-fade 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.totaly-thinking-spinner svg { width: 100%; height: 100%; display: block; }
@keyframes totaly-thinking-fade {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
/* 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,
.ask-composer,
.chat-composer,
.inline-composer,
.floating-chat-composer {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -22px rgba(0,0,0,0.55) !important;
  padding: 0.85rem 0.95rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.glass-composer:focus-within,
.ask-composer:focus-within,
.chat-composer:focus-within,
.inline-composer:focus-within,
.floating-chat-composer:focus-within {
  border-color: rgba(33,150,243,0.45);
  background: rgba(255,255,255,0.05);
}
.glass-composer textarea,
.ask-composer textarea,
.chat-composer textarea,
.inline-composer textarea,
.floating-chat-composer textarea {
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: #fff;
  -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: rgba(255,255,255,0.78);
  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: rgba(33,150,243,0.08);
  border-color: rgba(33,150,243,0.55);
  color: #fff;
}
.composer-chips .composer-chip.is-selected,
.composer-chips .composer-chip[aria-pressed="true"],
.composer-chips .composer-chip--active {
  border: 1.5px dashed rgba(33,150,243,0.85);
  background: rgba(33,150,243,0.10);
  color: #fff;
}
.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 rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.85) !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: rgba(255,255,255,0.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 */
body.route-ask.ai-has-messages .kpi-pills-row { display: none; }
body.route-ask.ai-has-messages .ask-composer,
body.route-ask.ai-has-messages .glass-composer { margin-top: 1rem; }

/* T7-3 — main-content guard: don't allow content to render above topbar */
section.main { background: #191A1A !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: rgba(255,255,255,0.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: rgba(255,255,255,0.85);
  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: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  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: rgba(255,255,255,0.06);
}
.account-submenu .brand-color-reset {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(255,255,255,0.78);
  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: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.account-submenu .brand-color-help {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  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 rgba(255,255,255,0.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: #fff; }
.bi-header-title {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}
.bi-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bi-period-sel {
  padding: 0.3rem 0.55rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.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: #fff; }

/* ── 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 rgba(25,118,210,0.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: rgba(25,118,210,0.28);
  border-color: rgba(25,118,210,0.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: rgba(255,255,255,0.92);
  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); } }
@media (max-width: 640px) { .bi-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.bi-kpi-card {
  position: relative;
  background: rgba(255,255,255,0.92);
  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-card--red {
  box-shadow: 0 1px 3px rgba(198,40,40,0.12), 0 0 0 1.5px rgba(198,40,40,0.22);
}
.bi-kpi-flag--red {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 16px;
  height: 16px;
  background: #C62828;
  color: #fff;
  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: #191A1A;
  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: #2E7D32; }
.bi-delta--down { color: #C62828; }
.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: #1976D2; }

/* ── Hero grid ── */
.bi-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 900px) { .bi-hero-grid { grid-template-columns: 1fr; } }

.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: #191A1A;
  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 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 900px) { .bi-extra-sections { grid-template-columns: 1fr; } }

.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 ── */
.bi-funnel-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Leaderboard ── */
.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 rgba(0,0,0,0.06);
  font-size: 0.72rem;
  color: rgba(25,26,26,0.55);
}
.bi-pacing-projection strong { color: #191A1A; 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 rgba(33,150,243,0.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: rgba(33,150,243,0.12);
  color: #2196F3;
  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 data sources) ── */
.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: rgba(33,150,243,0.14);
  color: #1565C0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  .bi-extra-sections { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bi-pacing-projection { flex-direction: column; gap: 4px; }
}

/* ── Finance report sections ── */
.bi-report-sections { display: flex; flex-direction: column; gap: 0.75rem; }
.bi-section {
  background: rgba(255,255,255,0.92);
  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 rgba(0,0,0,0.06);
  user-select: none;
}
.bi-section-title::-webkit-details-marker { display: none; }
.bi-section[open] .bi-section-title { color: #191A1A; }
.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: #191A1A;
  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 rgba(0,0,0,0.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 rgba(25,118,210,0.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: #fff;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}
.bi-qb-link {
  color: #1976D2;
  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: #FFFFFF;
  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--red {
  background: rgba(198,40,40,0.09);
  border: 1px solid rgba(198,40,40,0.22);
  color: #7F1D1D;
}
.bi-alert-icon {
  width: 18px;
  height: 18px;
  background: #C62828;
  color: #fff;
  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: rgba(255,255,255,0.12);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out infinite;
}
.bi-skel-heroes {
  height: 200px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out 0.1s infinite;
}
.bi-skel-heat {
  height: 150px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  animation: bi-pulse 1.4s ease-in-out 0.2s infinite;
}
.bi-skel-table {
  height: 200px;
  background: rgba(255,255,255,0.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: #C62828;
  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) */
.chat-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
}
.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: rgba(60,64,67,0.55);
  font-size: 0.95rem;
}
/* end Task 17 */

/* ── 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; }

  /* iter12f audit: REMOVED dead duplicate `body { padding-top: 64+SAT }` rule.
     Same offset was set 3 separate places (max-width 767, 820, 1023). All
     consolidated to per-view rule in iter12f mobile block. */

  /* Hide desktop sidebar + topbar; mobile drawer + mobile-topnav take over */
  .sidebar { display: none; }
  .topbar { display: none; }
  

  

  /* Main column reclaims full viewport */
  body,
  body.cockpit-hidden,
  body.cockpit-revealed,
  body.sidebar-collapsed,
  body.sidebar-collapsed.cockpit-hidden,
  body.sidebar-collapsed.cockpit-hidden.cockpit-revealed,
  body.route-ask,
  body.route-ask-new,
  .main,
  body.cockpit-hidden .main,
  body.cockpit-revealed .main,
  body.sidebar-collapsed .main,
  body.sidebar-collapsed.cockpit-hidden .main,
  body.sidebar-collapsed.cockpit-hidden.cockpit-revealed .main,
  body:not(.sidebar-collapsed).route-ask.cockpit-hidden .main {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw !important;
    padding-left: 0;
    padding-right: 0;
    left: 0;
    right: 0;
    position: relative;
  }

  .main-content,
  .page,
  .reports-view,
  .settings-view {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  /* iOS zoom guard on inputs */
  input, textarea, select { font-size: 16px !important; }

  /* 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 */
  .chart-resp {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-resp svg { max-width: 100%; height: auto; display: block; }

  /* 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,
  .reports-card,
  .summary-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 */
  .rc-chips,
  .composer-chips,
  .ask-chips,
  .floating-chat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .rc-chips::-webkit-scrollbar,
  .composer-chips::-webkit-scrollbar,
  .ask-chips::-webkit-scrollbar { display: none; }

  /* Period/compare pill rows on Ask scroll horizontally */
  .gl-floating-pill,
  .compare-pills,
  .period-pills {
    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; }

  /* Tables become stacked cards (only on data-table) */
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table td,
  .data-table th { display: block; width: 100%; box-sizing: border-box; }
  .data-table thead { display: none; }
  .data-table tr {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.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 */
@media (max-width: 600px) {
  .bi-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  /* Hide today's-date row in mobile topbar (already hidden via .topbar but be explicit) */
  .topbar-today, .topbar-clock { display: none; }
}

/* iPhone 12 and below: tighten further */
@media (max-width: 479px) {
  .bi-kpi-strip,
  .kpi-grid,
  .report-cards,
  .home-dash-grid,
  .coo-kpi-grid { grid-template-columns: 1fr !important; }

  .bi-kpi-card,
  .home-dash-card,
  .gl-dash-tile,
  .card,
  .reports-card,
  .summary-card { padding: 12px !important; }

  /* Org-pill collapses to avatar only (mobile-topnav is the source of truth here) */
  .org-pill .org-pill-name,
  .org-pill .org-pill-tier,
  .topbar-org-pill .org-pill-name { display: none; }
  .org-pill, .topbar-org-pill { padding: 4px; }
}
/* ── 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 */
  body.route-ask .ai-composer-wrap,
  body.route-ask.ai-has-messages .ai-composer-wrap {
    background: #1c1c1e !important;
    background-image: none;
    border-top: none;
    box-shadow: none;
  }

  /* 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, 0px) !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: #1F2121 !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,
  .compare-pills,
  .period-pills {
    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 ─ */
  .gl-divisions-view {
    padding-bottom: 80px !important;
  }

  /* ── 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;
  }
}

@media (max-width: 479px) {
  /* Single-column dashboard tile grid on small phones */
  .gl-dash-pack {
    grid-template-columns: 1fr !important;
  }
}
/* end Mobile UX deep-fix */

/* end Task 18 */

/* ─────────────────────────────────────────────────────────────────────────
   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 { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-3, 12px); border-bottom: 1px solid var(--border); }
.ae-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.ae-title { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.ae-subtitle { color: var(--muted); font-size: var(--text-sm); }

.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 { 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, #1976D2); }
.ae-filter-chip--on { background: rgba(30, 136, 229, 0.14); border-color: rgba(30, 136, 229, 0.4); color: var(--primary-strong, #1976D2); }

.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, #1976D2); }

.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, #1976D2); border-color: var(--primary-strong, #1976D2); }

.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-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; border: 1px solid currentColor; white-space: nowrap; }
.ae-chip--warn { color: #C77700; background: rgba(199,119,0,0.08); }
.ae-chip--error { color: #C62828; background: rgba(198,40,40,0.08); }
.ae-chip--critical { color: #C62828; background: rgba(198,40,40,0.14); }
.ae-chip--unknown { color: var(--muted); }

.ae-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #C62828; 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, #1976D2); color: var(--primary-ink, #fff); 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: #2E7D32; 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, #1976D2); border-color: var(--primary-strong, #1976D2); }
.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: #C62828; }
.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); }
/* end Task 31 */

/* ─────────────────────────────────────────────────────────────────────────
   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. */
  body.route-ask .ai-view .home-dash-toggles,
  body.route-ask #home-dash-toggles,
  body.route-ask .ai-view #home-launcher .home-dash-toggles {
    display: none;
    visibility: hidden;
  }

  /* ── 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.
  */
  body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap,
  body.route-ask .ai-view .ai-composer-wrap {
    /* Soft top fade so no hard edge seam above the composer */
    background: linear-gradient(
      to bottom,
      rgba(28, 28, 30, 0) 0%,
      rgba(28, 28, 30, 0.82) 28%,
      rgba(28, 28, 30, 1) 56%,
      rgba(28, 28, 30, 1) 100%
    ) !important;
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      rgba(28, 28, 30, 0) 0%,
      rgba(28, 28, 30, 0.82) 28%,
      rgba(28, 28, 30, 1) 56%,
      rgba(28, 28, 30, 1) 100%
    ) !important;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    /* Bottom flush: pad into the safe-area so no gap between composer and chrome */
    padding-top: 18px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Ensure body::after pseudo-element color also matches the fade */
  body.route-ask::after {
    background: rgba(28, 28, 30, 1);
    height: calc(env(safe-area-inset-bottom, 0px) + 2px);
  }

  /* ── 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.
  */
  body.route-ask .ai-view .rich-composer,
  body.route-ask .ai-view .ai-composer-wrap .rich-composer {
    background: rgba(38, 40, 42, 0.72);
    background-color: rgba(38, 40, 42, 0.72);
    background-image: none;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px;
  }

  body.route-ask .ai-view .rich-composer:focus-within {
    border-color: rgba(25, 118, 210, 0.75);
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.42),
      0 0 0 2.5px rgba(25, 118, 210, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  }

  /* ── 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.
  */
  body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap {
    bottom: calc(20dvh + env(safe-area-inset-bottom, 0px));
  }

  /* When messages are present, pin back to bottom */
  body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    bottom: 0;
    padding-top: 8px;
  }

  /* Adjust home-launcher (KPI tabs) to sit just above the raised composer */
  body.route-ask:not(.ai-has-messages) .ai-view .home-launcher {
    bottom: calc(20dvh + 100px + env(safe-area-inset-bottom, 0px));
  }

  /* Center the logo mark vertically between topbar and composer ──────────── */
  body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    top: calc(50% - 10dvh);
  }
}
/* end Mobile Chat Home Overhaul */

/* =========================================================================
   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: rgba(255,255,255,0.92);
  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: #2E7D32; }
.zh-summary-yellow { color: #F9A825; }
.zh-summary-red { color: #C62828; }
.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);
}
.zh-zip-poly--selected > path {
  stroke-width: 2.5;
}

/* 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: #2E7D32; }
.zh-dir-mid  { color: #F9A825; }
.zh-dir-down { color: #C62828; }

/* 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-retention.green  { color: #2E7D32; }
.zh-tip-retention.yellow { color: #F9A825; }
.zh-tip-retention.red    { color: #C62828; }
.zh-tip-retention.neutral { color: rgba(60,64,67,0.7); }
.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: rgba(60,64,67,0.55);
  font-style: italic;
  margin-top: 4px;
}
.zh-tip-detail-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(25,118,210,0.35);
  border-radius: 5px;
  background: transparent;
  color: #1976D2;
  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: rgba(0,0,0,0.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: rgba(60,64,67,0.55);
  margin-top: 3px;
}
.zh-drill-kpi--green .zh-drill-kpi-value { color: #2E7D32; }
.zh-drill-kpi--yellow .zh-drill-kpi-value { color: #F9A825; }
.zh-drill-kpi--red .zh-drill-kpi-value { color: #C62828; }
.zh-drill-kpi--down { color: #C62828; }
.zh-drill-nodata {
  font-size: 12px;
  color: rgba(60,64,67,0.55);
  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, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.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, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.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-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
}
.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-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: #C62828;
}
.zh-reload-btn {
  padding: 7px 16px;
  border: 1px solid rgba(25,118,210,0.4);
  border-radius: 6px;
  background: transparent;
  color: #1976D2;
  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 */
@media (max-width: 600px) {
  .zh-card { padding: 14px 12px 12px; }
  .zh-drilldown-panel--open {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .zh-summary-bar { font-size: 10px; gap: 6px; }
  .zh-skel-map { height: 220px; }
  .zh-map-svg { max-height: 280px; }
  .zh-legend { gap: 8px; }
  .zh-legend-item { font-size: 8px; }
}

/* 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: rgba(255,255,255,0.85); }
  .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: rgba(255,255,255,0.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: rgba(255,255,255,0.06); }
  .zh-legend { background: rgba(255,255,255,0.04); }
  .zh-legend-item { color: rgba(255,255,255,0.65); }
}
/* end ZIP CODE RETENTION HEATMAP */

/* =========================================================================
   REPORT BUTTON — Task 36
   Scoped to .rb-* classes — never touches existing selectors.
   Ghost button in top-right corner of every chart card.
   ========================================================================= */

.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: #1976D2;
  border-color: rgba(25,118,210,0.35);
  outline: none;
}
.rb-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(25,118,210,0.45);
}

/* Always show on mobile */
@media (max-width: 600px) {
  .rb-btn { opacity: 1; }
}

/* 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: rgba(25,118,210,0.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: rgba(255,255,255,0.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: rgba(255,255,255,0.08);
  }
  .rb-pop-item { color: rgba(255,255,255,0.80); }
  .rb-pop-item:hover { color: #90CAF9; background: rgba(255,255,255,0.06); }
}
/* end REPORT BUTTON */

/* ============================================================
   MOBILE POLISH — 4 fixes (mpolish)
   Added at end per conflict-avoidance protocol.
   Desktop unchanged: all rules wrapped in max-width: 767px
   or max-width: 1023px media queries.
   ============================================================ */

/* ----------------------------------------------------------
   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.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* Pull the grid out of ai-view's horizontal padding */
  .mpolish-chart-scroll-wrap {
    /* used as a JS-injected wrapper; rule kept for completeness */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-padding, 1.5rem));
    padding-inline: var(--page-padding, 1.5rem);
  }

  /* Direct approach: allow home-dash-grid to bleed edge-to-edge */
  .home-launcher .home-dash-grid,
  .ai-view .home-dash-grid,
  body.route-ask .home-dash-grid {
    /* Scroll horizontally, full viewport width */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    /* Show multiple columns so it IS scrollable */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    /* Bleed out of parent padding */
    margin-left: calc(-1 * var(--mpolish-page-pad, 14px));
    margin-right: calc(-1 * var(--mpolish-page-pad, 14px));
    padding-left: var(--mpolish-page-pad, 14px);
    padding-right: var(--mpolish-page-pad, 14px);
    width: calc(100% + 2 * var(--mpolish-page-pad, 14px));
    max-width: calc(100vw);
    box-sizing: border-box;
    /* Prevent width from being capped by parent max-width rule */
    min-width: 0;
  }
  .home-launcher .home-dash-grid::-webkit-scrollbar,
  .ai-view .home-dash-grid::-webkit-scrollbar,
  body.route-ask .home-dash-grid::-webkit-scrollbar {
    display: none;
  }
  /* Cards keep glass chrome + rounded corners */
  .home-dash-grid .home-dash-card,
  .home-dash-grid .home-dash-card--link {
    min-width: 200px;
    max-width: 220px;
  }
}

/* ----------------------------------------------------------
   FIX 3: Chat messages fade into topbar (mobile only)
   Soft gradient mask at top of the messages list so messages
   appear to dissolve into the topbar instead of hard-cutting.
   Applied to the AI chat messages scroller on mobile.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* Conversation view: ai-messages list fades at top */
  body.ai-has-messages .ai-view .ai-messages,
  body.route-ask.ai-has-messages .ai-messages {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      rgba(0,0,0,0.4) 32px,
      rgba(0,0,0,0.85) 56px,
      black 80px,
      black 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      rgba(0,0,0,0.4) 32px,
      rgba(0,0,0,0.85) 56px,
      black 80px,
      black 100%
    ) !important;
  }
  /* Also fade the floating-chat messages when open */
  .floating-chat.open .floating-chat-messages {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      rgba(0,0,0,0.6) 24px,
      black 48px,
      black 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      rgba(0,0,0,0.6) 24px,
      black 48px,
      black 100%
    ) !important;
  }
}

/* ----------------------------------------------------------
   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,
  .divisions-list,
  .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,
  .rc-chips,
  .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-composer-wrap[style*="sticky"],
  .ai-composer-wrap {
    /* already handled by fixed positioning in mobile block;
       ensure parent has position:relative for sticky fallback */
  }
  .ai-view {
    position: relative;
  }
}

/* Narrower mobile: stronger dvh fix for the locked-height views */
@media (max-width: 767px) {
  /* Routes that lock height: ensure dvh is used, not vh */
  html body.route-ask:not(.ai-has-messages) section#main.main {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }
  html body.route-ask:not(.ai-has-messages) {
    height: 100dvh !important;
  }
}
/* end MOBILE POLISH (mpolish) */

/* ──────────────────────────────────────────────────────────────────────────
   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>. */

@media (max-width: 768px) {
  /* Hide the desktop <select> on mobile; the chip replaces it. */
  html body .rich-composer .rc-model { display: none; }

  /* Standardize button sizing — 44px touch target, consistent gap. */
  html body .rich-composer .rc-toolbar { gap: 8px; align-items: center; }
  .rich-composer .rc-toolbar > * + * { margin-left: 0; }

  .rich-composer .rc-icon-btn,
  .rich-composer .rc-mic,
  .rich-composer .rc-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
  }

  .rich-composer .rc-icon-btn svg,
  .rich-composer .rc-mic svg,
  .rich-composer .rc-send svg {
    width: 20px;
    height: 20px;
  }

  /* Ghost/glass style for secondary buttons (attach, voice). */
  .rich-composer .rc-icon-btn,
  .rich-composer .rc-mic {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #D5D4D4 !important;
    box-shadow: none;
  }
  .rich-composer .rc-icon-btn:active,
  .rich-composer .rc-mic:active {
    background: rgba(255, 255, 255, 0.10);
  }

  /* Send: muted by default; primary blue when input has text. */
  .rich-composer .rc-send {
    background: rgba(255, 255, 255, 0.10) !important;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #949494 !important;
    box-shadow: none;
  }
  .rich-composer .rc-send svg,
  .rich-composer .rc-send svg * {
    color: #949494;
    stroke: #949494;
    fill: none;
  }
  .rich-composer.rc-has-input .rc-send {
    background: #1976D2;
    background-image: linear-gradient(180deg, #1E88E5 0%, #1976D2 100%);
    border-color: #1976D2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
  }
  .rich-composer.rc-has-input .rc-send svg,
  .rich-composer.rc-has-input .rc-send svg * {
    color: #ffffff;
    stroke: #ffffff;
  }

  /* Model picker chip — visible only on mobile. */
  .rc-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1E1D1C;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    -webkit-tap-highlight-color: transparent;
    max-width: 60vw;
    overflow: hidden;
    white-space: nowrap;
  }
  .rc-model-chip:active { background: rgba(255, 255, 255, 0.98); }
  .rc-model-chip svg { flex: 0 0 auto; color: #1976D2; }
  .rc-model-chip span { overflow: hidden; text-overflow: ellipsis; }
  .rc-model-chip-caret { opacity: 0.55; }
}

/* ── Model picker bottom sheet (modal — full-viewport overlay) ───────────── */
/* #model-sheet-root contains .ms-overlay and .ms-sheet as SIBLINGS. */
.ms-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#model-sheet-root.ms-open .ms-overlay { opacity: 1; pointer-events: auto; }

.ms-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10000;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, 100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  color: #1E1D1C;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#model-sheet-root.ms-open .ms-sheet { transform: translate(-50%, 0); }

.ms-handle {
  align-self: center;
  width: 44px;
  height: 4px;
  margin: 8px 0 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  cursor: grab;
  flex: 0 0 auto;
  touch-action: none;
}
.ms-handle:active { cursor: grabbing; }

.ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
.ms-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1E1D1C;
}
.ms-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-close:active { background: rgba(0, 0, 0, 0.06); }

.ms-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 12px;
  flex: 1 1 auto;
}

.ms-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  padding: 12px 12px 6px;
}

.ms-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  color: #1E1D1C;
  -webkit-tap-highlight-color: transparent;
}
.ms-row:active { background: rgba(25, 118, 210, 0.08); }
.ms-row + .ms-row { margin-top: 2px; }

.ms-row-main { flex: 1 1 auto; min-width: 0; }
.ms-row-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1E1D1C;
}
.ms-row-desc {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #6b6b6b;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-row-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1976D2;
  visibility: hidden;
}
.ms-row--sel .ms-row-check { visibility: visible; }
.ms-row--sel .ms-row-name { color: #1976D2; }
/* end TASK 32 mobile composer polish */

/* ── Task 33: Product Metrics dashboard (.apm-*) ───────────────────────── */
.apm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.apm-header {
  position: relative;
  margin-bottom: 20px;
}
.apm-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(60, 64, 67, 0.65);
  text-transform: uppercase;
}
.apm-h1 {
  margin: 4px 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #191A1A;
}
.apm-subtitle {
  font-size: 13px;
  color: rgba(60, 64, 67, 0.85);
}
.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: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1976D2;
  cursor: pointer;
  transition: background 0.15s ease;
}
.apm-refresh-btn:hover { background: #fff; }
.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;
}
@media (max-width: 900px) { .apm-grid { grid-template-columns: 1fr; } }

.apm-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(60, 64, 67, 0.10);
  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; }
@media (max-width: 900px) { .apm-card--span2 { grid-column: auto; } }
.apm-card--wide {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(60, 64, 67, 0.10);
  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: #191A1A;
}
.apm-num {
  font-size: 30px;
  font-weight: 700;
  color: #191A1A;
  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: rgba(60, 64, 67, 0.55);
  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: #191A1A; }

/* Skeleton loading */
.apm-card--loading {
  position: relative;
  overflow: hidden;
}
.apm-card--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), 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: rgba(60, 64, 67, 0.10);
  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: #C62828;
  letter-spacing: 0.04em;
}

.apm-forbidden {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(60, 64, 67, 0.10);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}
.apm-forbidden-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #191A1A;
  margin-bottom: 6px;
}
.apm-forbidden-sub {
  font-size: 12px;
  color: rgba(60, 64, 67, 0.85);
}
/* end Task 33 product metrics */

/* ──────────────────────────────────────────────────────────────────────────
   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.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* FIX 1: Unify Web chip + Model chip on mobile.
     Both 32px height, 16px radius, 6px 12px pad, 13px/500, 14px icons, 6px gap.
     Glass dark: bg rgba(255,255,255,0.08), border rgba(255,255,255,0.12).
     Text rgba(255,255,255,0.92), icon #4B9FE8. */
  html body .ai-view .rich-composer .rc-chip[data-chip="web"],
  html body .rich-composer .rc-chip[data-chip="web"],
  html body .rc-model-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 6px 12px;
    gap: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    white-space: nowrap;
  }
  html body .ai-view .rich-composer .rc-chip[data-chip="web"] svg,
  html body .rich-composer .rc-chip[data-chip="web"] svg,
  html body .rc-model-chip > svg:first-child {
    width: 14px;
    height: 14px;
    color: #4B9FE8;
    stroke: #4B9FE8;
    flex: 0 0 auto;
    opacity: 1;
  }
  html body .rc-model-chip span {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
  }
  /* Hide chevron caret on idle (tap chip itself opens sheet). */
  html body .rc-model-chip .rc-model-chip-caret { display: none; }
  /* v40.5eo FIX 5: Web chip active state uses brand blue so the toggle is
     visually obvious. Same dimensions; only color/bg/border shift. */
  html body .ai-view .rich-composer .rc-chip[data-chip="web"].rc-chip--active,
  html body .rich-composer .rc-chip[data-chip="web"].rc-chip--active {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.35);
    color: #2196F3;
  }
  html body .ai-view .rich-composer .rc-chip[data-chip="web"].rc-chip--active svg,
  html body .rich-composer .rc-chip[data-chip="web"].rc-chip--active svg {
    color: #2196F3;
    stroke: #2196F3;
  }
  /* Vertical centering with round +/mic/send buttons. */
  html body .rich-composer .rc-toolbar { align-items: center; }

  /* FIX 2: Composer keyboard hug. Flush with viewport bottom on idle and
     thread state. visualViewport listener drives --kb-offset when keyboard up.
     Override prior rules including 1150 (position: static), 1175 (sticky),
     and ensure base position: fixed wins via attribute selector specificity. */
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    top: auto;
    margin: 0;
    /* iter12j: zero bottom padding eliminates the 8px body-color strand
       between the rich-composer card edge (#2a2b2c) and the viewport
       bottom that iOS Safari/Comet was rendering as a visible black
       band. Card now flush to wrap's bottom edge; safe-area-inset-bottom
       is already absorbed by the wrap's `bottom:` calc above. */
    padding: 8px 12px 0 12px !important;
    /* iter12i: was #1c1c1e (DEAD CODE - off-brand color sampled by
       iOS 26 for the bottom toolbar tint, creating the visible black
       strand). Now transparent so Safari falls through to body's
       #191A1A and tints the bottom toolbar to match the page edge. */
    background: transparent;
    background-color: transparent;
    background-image: none;
    z-index: 5 !important;
  }
  /* Remove ancestor transform/filter that would break position: fixed. */
  html body .ai-view, html body .ai-home, html body section#main.main {
    transform: none;
    filter: none;
    perspective: none;
    will-change: auto;
  }

  /* FIX 3: Top nav pill (Chat ↔ Dashboards) visible at idle and with messages.
     Pill 32px h, 16px radius, 4px inner pad. Segments 13px/500, 8px 14px pad,
     12px radius, active #1976D2/white, inactive transparent rgba(255,255,255,0.7).
     Background rgba(255,255,255,0.08), border rgba(255,255,255,0.12). */
  
  
  /* iter9 cleanup 2026-04-26: previous rule had a comment INSIDE a selector list, which broke the cascade for `.is-active`. Hide pill icons here, show text labels via iter9 block at end of file. */
  
  
  

  /* FIX 4: Remove suggestion / quick-action chip row above composer.
     The .home-launcher / .home-tabs-row sits above composer on idle and after
     messages on mobile; user wants 0 buttons above composer. */
  html body .ai-view .home-launcher,
  html body .ai-view .home-tabs-row,
  html body .home-launcher,
  html body .home-tabs-row {
    display: none;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* FIX 5: Chat thread fades behind composer.
     Padding-bottom on .ai-messages reserves space for composer height + safe-area
     + 24px so the last line sits above composer's top edge in initial state.
     mask-image on .ai-messages fades the last 80px behind the composer. */
  html body.ai-has-messages .ai-view .ai-messages,
  html body .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-h, 116px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%) !important;
    overflow-x: hidden;
  }
  /* Apply fade only when there are messages to scroll. */
  html body:not(.ai-has-messages) .ai-view .ai-messages {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* FIX 6: Remove the footer strand below composer (sidebar-footer leaks on
     mobile; also any composer ::after / composer-shadow / composer-glow). */
  html body aside.sidebar .sidebar-footer,
  html body .sidebar-footer,
  html body .sidebar-footer .footer-org-pill,
  html body .footer-settings-link,
  html body .composer-shadow,
  html body .composer-glow,
  html body .ai-footer,
  html body .composer-footer {
    display: none;
    visibility: hidden;
    height: 0;
    border: 0;
    background: transparent;
  }
  html body .ai-composer-wrap::after,
  html body .rich-composer::after {
    content: none;
    display: none;
    background: transparent;
    border: 0;
  }
}
/* end mob6fix */

/* === 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.
   ================================================================ */
@media (max-width: 767px) {

  /* Document scroll headroom — Comet collapses bottom toolbar only when
     real scroll headroom exists. 1px wasn't enough; 200px is plenty.   */
  html:not(#__never__) body:not(#__never__) {
    min-height: 100dvh !important;
  }
  html:not(#__never__) body:not(#__never__) #main:not(#__never__),
  html:not(#__never__) body:not(#__never__) #main-content:not(#__never__),
  html:not(#__never__) body:not(#__never__) main.main-content:not(#__never__) {
    min-height: 100dvh;
  }

  /* iter12j: Window-level scroll (Perplexity pattern). Comet/Mobile-Safari
     collapse the URL bar and bottom toolbar ONLY when the WINDOW is the
     scroll container, not body. Base CSS gives body `height: 100%` which
     locks body height to viewport and turns body into the scroller —
     Comet's auto-collapse heuristic never fires.
     Fix: html owns the scroll (height auto, overflow-y auto). Body has
     height auto and NO overflow-x:hidden (the spec promotes the other
     axis to auto when one is non-visible, which would re-trap scroll on
     body). Horizontal overflow control happens on html only. */
  html:not(#__never__) {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
  }
  html:not(#__never__) body:not(#__never__) {
    height: auto;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    max-width: 100vw !important;
  }

  /* ───── NAV STRIP ─────
     iter12g: Glass strip across the status-bar zone so content blurs
     under it instead of showing flat #191A1A behind the clock/battery.
     Translucent fill + backdrop-filter = the same glass treatment the
     individual chips already use, applied to the full strip width so
     the iOS status-bar zone reads as one continuous glass surface. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120 !important;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    padding-right: 16px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    /* iter12h: transparent nav + no backdrop-filter so iOS 26 Safari/Comet
       falls through to body's #191A1A and tints the status-bar zone the
       same shade as the page (no two-tone band). */
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }
  /* Chips themselves accept taps; only the strip between them passes through */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 > * {
    pointer-events: auto;
  }

  /* ───── AVATAR (left) ─────
     44x44 perfect circle. Profile photo fills edge-to-edge. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    aspect-ratio: 1 / 1;
    flex: 0 0 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(20, 20, 28, 0.55);
    background-color: rgba(20, 20, 28, 0.55);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip:active {
    transform: scale(0.96);
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    border-radius: 50%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* Fallback: hidden by default (img.onerror toggles this on by adding
     .is-fallback to the ring). NEVER shows behind a loaded photo. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-fallback {
    display: none;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring.is-fallback .mt-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* ───── KEBAB (right) ─────
     44x44 perfect circle, 3 dots centered. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 44px !important;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(20, 20, 28, 0.55) !important;
    background-color: rgba(20, 20, 28, 0.55) !important;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    /* v40.5eo FIX 4: soften the stark near-white gear icon. Button bg/border
       already match the target glass treatment; drop the icon to 0.55 white. */
    color: rgba(255, 255, 255, 0.55) !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease !important;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip:active {
    transform: scale(0.96);
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip > svg {
    width: 18px;
    height: 18px;
    display: block;
    color: currentColor;
    fill: currentColor;
  }

  /* ───── SWITCH PILL (center) ─────
     Container: 52 tall, auto width, glass background, 4px inner padding.
     Inner segments: 44 tall (52 - 4 - 4), centered text, 18px horiz padding.
     — updated: inner buttons increased to 44px to meet WCAG 2.5.5 tap target. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 1 auto !important;
    margin: 0 auto;
    padding: 4px !important;
    border-radius: 999px;
    /* v40.5eo FIX 3: pure transparent gap. This highest-specificity mobile rule
       was the dark rounded box behind the Chat/Views pills; make the container
       fully transparent (no bg, border, shadow, or blur band). The .mt-switch-opt
       chips keep their own pill styling below. */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: inline-flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    overflow: visible;
  }

  /* Each pill segment — text-only ("Chat" or "Dashboards") via ::after */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 auto !important;
    margin: 0;
    padding: 0 14px;
    border-radius: 999px;
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center !important;
    line-height: 1;               /* flex centering handles vertical alignment */
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 180ms ease, color 180ms ease, box-shadow 220ms ease !important;
  }

  /* Text labels via ::after — single source of truth.
     Hide every direct-child SVG/.mt-switch-ico element underneath. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt > * {
    display: none;
  }
  /* RECONCILE-FIX: raised ::after height from 36px → 44px to match button
     container height (WCAG 2.5.5 — 44px minimum tap target). */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="ai"]::after {
    content: "Chat";
    display: inline-block;
    height: 44px;
    line-height: 44px;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: center;
    vertical-align: middle;
    pointer-events: none;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
    content: "Views" !important;
    display: inline-block;
    height: 44px !important;
    line-height: 44px !important;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: center;
    vertical-align: middle;
    pointer-events: none;
  }

  /* Active state — locked-token blue with white bold text */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #1976D2;
    background-color: #1976D2;
    background-image: none;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:active {
    transform: scale(0.97);
  }

  /* iter12f: Allow content to scroll all the way to viewport top: 0 so
     it passes UNDER the floating chips and the status-bar zone reads as
     glass (chips have backdrop-filter blur). Initial-load chip overlap
     is prevented by padding-top on the inner view container instead
     of the outer scrolling section, which means content visually sits
     below chips at rest, then slides under them as the user scrolls. */
  html:not(#__never__) body:not(#__never__) main#main-content,
  html:not(#__never__) body:not(#__never__) main.main-content,
  html:not(#__never__) body:not(#__never__) section#main {
    padding-top: 0;
  }
  /* Keep initial content below the chip stack so first card isn't hidden. */
  html:not(#__never__) body:not(#__never__) .dashboard-view,
  /* iter12i: views start at y=0 (no safe-area-inset-top padding) so
     content scrolls UP under the iOS status bar zone (clock/battery)
     and ends at the true screen edge. The padding-top reserves only
     enough space for the floating chip row at the top, NOT for the
     status bar itself. The status bar zone is filled by body's solid
     #191A1A so it reads as one continuous edge-to-edge surface. */
  html:not(#__never__) body:not(#__never__) .dashboard-view,
  html:not(#__never__) body:not(#__never__) .settings-view,
  html:not(#__never__) body:not(#__never__) .reports-view,
  html:not(#__never__) body:not(#__never__) .automations-view,
  html:not(#__never__) body:not(#__never__) .gl-divisions-view,
  html:not(#__never__) body:not(#__never__) .gl-dash-pack-view,
  html:not(#__never__) body:not(#__never__) .data-sources-view,
  html:not(#__never__) body:not(#__never__) .chats-view,
  html:not(#__never__) body:not(#__never__) .division-view,
  /* v40.5cc: ALL tab views must clear the floating nav chips on mobile.
     Add route-view, ai-view, brain-view, messages-view (any tab Branson
     touches). Bumped from 70px to 78px and added safe-area-inset-top so
     the iOS status-bar zone gets real safety room — content can never
     spill into the avatar/kebab chips, period. */
  html:not(#__never__) body:not(#__never__) .route-view,
  html:not(#__never__) body:not(#__never__) .ai-view,
  html:not(#__never__) body:not(#__never__) .brain-view,
  html:not(#__never__) body:not(#__never__) .messages-view,
  html:not(#__never__) body:not(#__never__) .builder-view {
    /* v40.5ce: tightened from 78px → 56px. The 78px buffer was leaving a
       huge dead zone between the floating chip nav and the page heading.
       56px clears the chip row (44pt iOS hit area + 12px gap) and the
       safe-area-inset-top still handles the notch separately. */
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-left: 12px;
    padding-right: 12px;
  }

  /* v40.5cd: Route stop modal pinned to TOP on mobile (not centered) so the
     close X never hides behind the floating Chat/Views/avatar chips. The
     modal anchors below the chip safe zone (~78px + safe-area-inset-top)
     and the body scrolls internally. The pop animation is overridden to a
     top-anchored slide so the start/end transforms don't yank it off-screen. */
  html:not(#__never__) body:not(#__never__) .rsm {
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px)) !important;
    animation: rsm-pop-mobile 160ms ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  @keyframes rsm-pop-mobile {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* The header row holds the close X — make sure it sits ABOVE the modal
     body's scroll content and is always visible at the top. */
  html:not(#__never__) body:not(#__never__) .rsm-hdr {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1F2121;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  /* Bump the close X so the tap target is BIG and obvious on mobile. */
  html:not(#__never__) body:not(#__never__) .rsm-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  html:not(#__never__) body:not(#__never__) .rsm-close svg {
    width: 22px;
    height: 22px;
  }

  /* ───── KEBAB MENU (popup anchored to kebab chip) ─────
     Absolutely positioned so it doesn't take flex layout space.
     Hidden by default; .is-open shows it. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    right: 14px;
    left: auto;
    bottom: auto;
    min-width: 220px;
    max-width: calc(100vw - 28px);
    width: max-content;
    padding: 6px;
    margin: 0;
    border-radius: 16px;
    background: rgba(22, 24, 26, 0.96);
    background-color: rgba(22, 24, 26, 0.96);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    transform-origin: top right;
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: rgba(232, 234, 237, 0.95);
    text-align: left;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 140ms ease;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item:hover,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item:active {
    background: rgba(255, 255, 255, 0.06);
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: rgba(230, 232, 235, 0.82);
    fill: none;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-item > span {
    flex: 1 1 auto;
    color: inherit;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu-sep {
    height: 1px;
    width: auto;
    margin: 6px 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
  }
}
/* end MOBILE TOPNAV PRODUCTION REBUILD iter10 */

/* ================================================================
   ITER11 — DOCUMENT-ROOT SCROLL ON MOBILE  (2026-04-26)

   Goal: let the document scroll naturally on mobile so Comet/Chrome/
   Safari iOS auto-collapse their toolbars during user scroll. Earlier
   architectures (fbleed, EDGE2EDGE v1, scroll-trap on main-content)
   were stripped by the iter11 cleanup pass; this block is the single
   source of truth for mobile scroll + viewport behavior.

   ALSO covers:
     - Hide the desktop history-hover-card portal entirely on mobile
       (it has no on-touch trigger and was leaking a thin bar at top).
   ================================================================ */
@media (max-width: 767px) {
  /* iter12k: Single scroll source = HTML. Body is overflow:visible so the
     window/html is the only scroller — required for Comet/Mobile-Safari
     URL-bar auto-collapse. overscroll-behavior:contain stops the bounce
     that was making the fixed composer rubber-band on overscroll. */
  html:not(#__never__):not(#__never2__) {
    height: auto;
    max-height: none;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
    background: #191A1A;
    background-color: #191A1A;
    margin: 0;
    padding: 0;
  }
  html:not(#__never__):not(#__never2__) body:not(#__never__):not(#__never2__) {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
    background: #191A1A;
    background-color: #191A1A;
    margin: 0;
    padding: 0;
    max-width: 100vw;
  }

  /* main / main-content: NO position:fixed, NO internal scroll lock.
     Content scrolls on the document. Pad top so chip strip clears. */
  html body section#main:not(#__never__),
  html body section#main.main:not(#__never__),
  html body main#main-content:not(#__never__),
  html body main.main-content:not(#__never__),
  html body #main-content:not(#__never__) {
    position: static;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    max-height: none;
    min-height: auto;
    width: 100%;
    overflow: visible;
    overflow-x: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
    will-change: auto;
    filter: none;
    /* iter12f audit: padding-top/bottom moved to per-view rule below.
       Outer scroll container has zero padding so content extends to
       viewport edges; inner view containers handle chip-clearance. */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: transparent;
    background-color: transparent;
    background-image: none;
  }

  /* Inner views must not lock their own viewport. */
  html body main#main-content > .dashboard-view,
  html body main#main-content > .reports-view,
  html body main#main-content > .automations-view,
  html body main#main-content > .settings-view,
  html body main#main-content > .division-view,
  html body main#main-content > .ai-view,
  html body main#main-content > .ai-home,
  html body main#main-content > .chats-view,
  html body main#main-content > .gl-dash-pack-view,
  html body .dashboard-view,
  html body .reports-view,
  html body .automations-view,
  html body .settings-view,
  html body .division-view,
  html body .chats-view,
  html body .ai-view,
  html body .ai-home {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    overflow-x: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Chat (route-ask): the messages list keeps its own internal scroll
     ONLY when there are messages, so the composer stays anchored.
     Empty state scrolls on the document. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-messages {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    max-height: calc(100dvh - 200px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 140px !important;
  }

  /* Composer: floats above content, fixed bottom. */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 5 !important;
  }
  html body.route-ask .rich-composer {
    background: rgba(31, 33, 33, 0.94);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }

  /* Kill any decorative pseudo bands that earlier archs added. */
  html body.route-ask::before,
  html body.route-ask::after,
  html body.route-chats::before,
  html body.route-chats::after,
  html body.route-dashboards::before,
  html body.route-dashboards::after,
  html body.route-reports::before,
  html body.route-reports::after,
  html body.route-divisions::before,
  html body.route-divisions::after,
  html body.route-automations::before,
  html body.route-automations::after,
  html body.route-settings::before,
  html body.route-settings::after,
  html body.route-data-sources::before,
  html body.route-data-sources::after {
    content: none;
    display: none;
    background: transparent;
    height: 0;
    width: 0;
  }

  /* Hide the desktop history-hover-card portal entirely on mobile.
     It is built unconditionally by JS and was rendering a thin opaque
     bar at the very top of the viewport on Comet. Mobile has no hover. */
  html body #history-portal-card,
  html body .history-hover-card.history-hover-card--portal {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    top: -9999px;
    left: -9999px;
  }

  /* Body / route-* backgrounds: always system grey #191A1A. */
  html body,
  html body.route-ask,
  html body.route-chats,
  html body.route-reports,
  html body.route-dashboards,
  html body.route-automations,
  html body.route-settings,
  html body.route-data-sources,
  html body.route-divisions {
    background: #191A1A;
    background-color: #191A1A;
    background-image: none;
  }
}
/* end ITER11 */

/* ================================================================
   ITER12 — Comet polish (mobile only)
   1) Glass backdrop on mobile nav strip (Intermountain-style)
   2) Center .gl-divisions-sub subtitle on mobile
   3) Force closed .mt-menu to display:none (no faint paint near logo)
   4) Tighten chat empty state — no extra scroll headroom
   ================================================================ */
@media (max-width: 767px) {

  /* ── 1) EDGE-TO-EDGE STATUS-BAR FIX (iter12h) ──────────────────
     RESEARCH (Ben Frain, 1ar.io, r/webdev iOS 26 thread):
     - iOS 26 Safari/Comet IGNORES the theme-color meta tag.
     - It samples background-color + backdrop-filter from FIXED elements
       within ~4px of the viewport edge (width >= 80%, height >= 3px).
     - It does NOT sample position:absolute children of fixed elements,
       NOR pseudo-elements, NOR non-fixed flow content.
     - With NO sampled fixed element near the top, Safari falls back to
       sampling the BODY background.
     iter12g BUG: nav had background rgba(25,26,26,0.55) + backdrop-filter,
     so Safari sampled the nav and tinted the status-bar zone with a
     darker glass color than the body (#191A1A) below it. Result: visible
     two-tone band exactly where the user reported it.
     iter12h FIX: nav = fully transparent, NO backdrop-filter on the nav.
     Body stays solid #191A1A so Safari falls through to body and tints
     the status-bar zone the SAME shade as the rest of the page. The
     individual chips keep their own glass (they're small, not edge-
     spanning, so they're not sampled as the dominant fixed element). */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 {
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }
  /* Chips themselves accept taps */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 > * {
    pointer-events: auto;
  }

  /* ── 2) Divisions header + cards centered on mobile ───────────
     Subtitle text + division cards both centered. The grid was
     letting cards sit left-aligned at x=22.5 because the cards
     have a fixed 280px width inside a 348px column. Center via
     justify-items + margin-inline auto.                         */
  html body .gl-divisions-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  html body .gl-divisions-grid {
    justify-items: center;
    justify-content: center !important;
  }
  html body .gl-divisions-grid .gl-division-card,
  html body .gl-division-card {
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 3) Closed kebab menu — fully hidden, no paint bleed ────── */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-menu:not(.is-open) {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* ── 4) Chat tightening (empty state) ─────────────────────────
     iter12d: DO NOT lock height + overflow:hidden on body — that
     triggers an iOS 26 bug where position:fixed loses viewport
     anchoring (sources: Reddit r/css, framer.community, SO).
     Instead use min-height: 100svh (small viewport unit, stable
     across toolbar collapse) and let composer fix to viewport.  */
  html body.route-ask:not(.ai-has-messages) {
    min-height: 100svh;
  }
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home {
    min-height: 100svh !important;
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Composer stays put even at scroll extremes — guard against any
     transform/will-change that breaks position:fixed on iOS.
     Also tighten bottom gap (was 12px causing a visible strand
     above Comet's chrome): pin to safe-area only.              */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none;
    will-change: auto;
    contain: none;
  }

  /* ── 5) Continuous body — no two-tone strands at top/bottom ──
     Force solid #191A1A through to safe-area edges so iOS status
     bar and Comet chrome zones see the same exact color.       */
  html, html body {
    background: #191A1A !important;
    background-color: #191A1A !important;
    background-image: none;
  }

  /* iter12f: Single bottom-trim rule for all routed views.
     Removed dead duplicate that re-asserted padding-top:0 on inner
     main (now handled at the outer iter11 padding-top:0 rule).
     Bottom = safe-area only (no extra 7rem/64px dead footer zone).
     Comet's totaly.ai pill sits in iOS safe-area-bottom which is
     already accounted for here. */
  html:not(#__never__) body:not(#__never__) main#main-content,
  html:not(#__never__) body:not(#__never__) main.main-content,
  html:not(#__never__) body:not(#__never__) section#main {
    padding-bottom: 0;
  }
  html:not(#__never__) body:not(#__never__) .dashboard-view,
  html:not(#__never__) body:not(#__never__) .settings-view,
  html:not(#__never__) body:not(#__never__) .reports-view,
  html:not(#__never__) body:not(#__never__) .automations-view,
  html:not(#__never__) body:not(#__never__) .gl-divisions-view,
  html:not(#__never__) body:not(#__never__) .gl-dash-pack-view,
  html:not(#__never__) body:not(#__never__) .data-sources-view {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* iter12h: BOTTOM STRAND FIX (ROOT CAUSE) ────────────────────
     iter12g WRONG approach: forced composer-wrap bg #191A1A and added
     a body::after fixed shim. Both are fixed/sticky elements within
     the bottom-edge sample zone, so iOS 26 Safari/Comet sampled their
     #191A1A background and used it to tint the bottom toolbar zone.
     But the .rich-composer card sitting INSIDE the wrap was #2a2b2c
     (or transparent with a different alpha), so a visible step appeared
     at the wrap's edge - exactly the "black strand" the user described.

     iter12h CORRECT approach: composer-wrap = TRANSPARENT. The .rich-
     composer card is the ONLY visible element. Body's solid #191A1A
     fills everything below/around it, and Safari samples body for the
     bottom toolbar tint - no two-tone seam. Additionally, the body::after
     fixed shim is REMOVED because as a fixed bottom-edge element, it
     was being sampled and competing with the composer wrap. */
  html:not(#__never__) body:not(#__never__) .ai-composer-wrap,
  html:not(#__never__) body:not(#__never__).route-ask .ai-composer-wrap,
  html:not(#__never__) body:not(#__never__).route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html:not(#__never__) body:not(#__never__).route-ask.ai-has-messages .ai-composer-wrap {
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 0;
  }

  /* iter12h: body::after shim REMOVED. It was a fixed bottom element
     near the edge - iOS 26 sampled it and competed with the composer
     wrap for the bottom-toolbar tint. With both wrap AND body::after
     transparent (and body solid #191A1A), Safari samples body cleanly
     and the bottom toolbar tints to match the page. */
  html:not(#__never__) body:not(#__never__)::after {
    content: none;
    display: none;
  }

  /* ── iter12i: SINGLE PAGE SCROLL (chat-style sites pattern) ──
     User feedback: scroll feels weird on chat. Cause: .ai-messages
     had its own overflow-y:auto + max-height creating a nested scroll
     container inside the page (which itself can also scroll). On iOS
     this produces janky momentum, and content shifts during URL-bar
     collapse. Fix: kill the inner scroll on mobile so the document
     root is the ONLY scroll surface (matches ChatGPT, Perplexity,
     Claude.ai mobile patterns). */
  html:not(#__never__) body:not(#__never__) .ai-view .ai-messages,
  html:not(#__never__) body:not(#__never__) body.ai-has-messages .ai-view .ai-messages,
  html:not(#__never__) body:not(#__never__).ai-has-messages .ai-view .ai-messages {
    max-height: none;
    height: auto;
    overflow-y: visible;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }
  /* iter12j: Document root scroll surface. HTML owns scroll, NOT body.
     Body has overflow:visible so the window/html is the single scroller
     — required for Comet/Mobile-Safari URL-bar auto-collapse on scroll. */
  html:not(#__never__) {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    height: auto;
    min-height: 100%;
  }
  html:not(#__never__) body:not(#__never__) {
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    height: auto;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: auto;
  }
}
/* end ITER12 */

/* ── Wave 2: Chat Streaming + Thinking States ─────────────────────────────── */

/* 3-dot thinking pulse: used inside .chat-msg.assistant during inference */
@keyframes cs-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%       { opacity: 1.0; transform: scale(1.1); }
}

.cs-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.cs-thinking-dots .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.85);
  animation: cs-dot-pulse 1.2s ease-in-out infinite;
}

.cs-thinking-dots .cs-dot:nth-child(2) { animation-delay: 0.2s; }
.cs-thinking-dots .cs-dot:nth-child(3) { animation-delay: 0.4s; }

/* Source-checking spinning ring -- pure CSS, no deps */
@keyframes cs-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cs-source-ring {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(25, 118, 210, 0.25);
  border-top-color: rgba(25, 118, 210, 0.9);
  animation: cs-ring-spin 0.8s linear infinite;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Phase label row shown while thinking */
.cs-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.2rem 0;
  min-height: 22px;
}

.cs-phase-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.82rem;
}

/* Token fade-in: each new chunk fades from transparent to full */
@keyframes cs-token-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 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 rgba(25, 118, 210, 0.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: rgba(25, 118, 210, 0.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, #8A8F9C);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

.chat-msg-meta .cs-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* Smooth append wrapper for streamed text -- children fade in */
.cs-stream-wrapper .cs-chunk {
  animation: cs-token-in 0.08s ease forwards;
}
/* end Wave 2 */

/* ═══════════════════════════════════════════════════════════════════════════
   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: #191A1A;
  overflow: hidden;
}

.imsg-flow-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid #2A2A2A;
  background: #1F2121;
  flex-shrink: 0;
}

.imsg-flow-back { flex-shrink: 0; }

.imsg-flow-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.imsg-flow-eyebrow {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted, #8A8F9C);
  font-weight: 600;
}

.imsg-flow-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e3e1dd);
  letter-spacing: 0.4px;
}

.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: #4CAF50;
  border-color: rgba(76, 175, 80, 0.35);
}

.imsg-flow-status-chip--paused {
  background: rgba(239, 83, 80, 0.10);
  color: #EF5350;
  border-color: rgba(239, 83, 80, 0.3);
}

.imsg-flow-status-chip--test {
  background: rgba(33, 150, 243, 0.10);
  color: #2196F3;
  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 #2A2A2A;
  background: #191A1A;
}

.imsg-flow-right {
  overflow-y: auto;
  padding: 18px 16px;
  background: #1F2121;
  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: #8A8A8A;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2A2A2A;
}

/* Treemap container */
.imsg-treemap-container {
  background: #191A1A;
  border: 1px solid #2A2A2A;
  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 #2A2A2A;
  background: #1F2121;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #8A8A8A;
  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: #2196F3;
  color: #E3F2FD;
  background: rgba(33, 150, 243, 0.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: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.imsg-route-badge--hybrid {
  background: rgba(33, 150, 243, 0.10);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.imsg-route-badge--manual {
  background: rgba(239, 83, 80, 0.10);
  color: #EF5350;
  border: 1px solid rgba(239, 83, 80, 0.3);
}

.imsg-route-desc {
  font-size: 11.5px;
  color: #8A8A8A;
  line-height: 1.5;
  max-width: 480px;
}

.imsg-route-desc--warn {
  color: #EF5350;
}

/* Inspector panel */
.imsg-inspector {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  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: #8A8A8A;
  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: #E5E5E5;
}

.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: #8A8A8A;
}

.imsg-input,
.imsg-select,
.imsg-textarea {
  background: #191A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #E5E5E5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  outline: none;
}

.imsg-input:focus,
.imsg-select:focus,
.imsg-textarea:focus {
  border-color: #2196F3;
}

.imsg-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.imsg-field-hint {
  font-size: 10px;
  color: #8A8A8A;
  margin-top: 2px;
}

/* Config panel */
.imsg-config-panel {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  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: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 0;
  max-width: 340px;
  overflow: hidden;
  margin-bottom: 18px;
}

.imsg-preview-carrier {
  background: #191A1A;
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  font-size: 9px;
  color: #8A8A8A;
  border-bottom: 1px solid #2A2A2A;
}

.imsg-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #2A2A2A;
}

.imsg-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2196F3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.imsg-preview-name {
  font-size: 13px;
  font-weight: 600;
  color: #E5E5E5;
}

.imsg-preview-sub {
  font-size: 10px;
  color: #8A8A8A;
}

.imsg-preview-bubble-wrap {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.imsg-preview-bubble {
  background: #2196F3;
  color: #fff;
  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 {
  font-size: 10px;
  color: #8A8A8A;
}

.imsg-preview-char.is-over {
  color: #EF5350;
  font-weight: 600;
}

/* Automation card -- test mode status indicator */
.auto-status.test {
  background: #2196F3;
  box-shadow: 0 0 5px rgba(33,150,243,0.5);
}
/* end iMessage Flow Builder */

/* ═══════════════════════════════════════════════════════════════════
   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: #B8B8B8;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dr-dd-trigger:hover {
  background: rgba(33,150,243,0.10);
  color: #E5E5E5;
  border-color: #2A2A2A;
}
.dr-dd-trigger.active {
  background: rgba(33,150,243,0.16);
  color: #2196F3;
  border-color: rgba(33,150,243,0.40);
  font-weight: 700;
}
.dr-dd-trigger[aria-expanded="true"] {
  background: rgba(33,150,243,0.12);
  color: #E5E5E5;
  border-color: #2A2A2A;
}

/* ── 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: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.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: #B8B8B8;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.dr-dd-item:hover {
  background: rgba(33,150,243,0.10);
  color: #E5E5E5;
}
.dr-dd-item.active {
  background: rgba(33,150,243,0.14);
  color: #2196F3;
  font-weight: 600;
}
.dr-dd-item-icon {
  opacity: 0.6;
  flex-shrink: 0;
  color: #8A8A8A;
}
.dr-dd-item-icon svg { display: block; }
.dr-dd-item:hover .dr-dd-item-icon { opacity: 1; color: #2196F3; }
.dr-dd-item.active .dr-dd-item-icon { color: #2196F3; opacity: 1; }

/* ── Dashboards overview page ── */
.dr-overview-page {
  padding: 2rem 2rem 3rem;
  max-width: 960px;
  margin: 0 auto;
}
.dr-overview-header { margin-bottom: 1.75rem; }
.dr-overview-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #E5E5E5;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}
.dr-overview-sub {
  font-size: 0.85rem;
  color: #8A8A8A;
  margin: 0;
}
.dr-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.dr-overview-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: #1F2121;
  border-radius: 12px;
  border: 1px solid #2A2A2A;
  text-decoration: none;
  color: #E5E5E5;
  transition: box-shadow 0.18s, transform 0.14s, border-color 0.18s;
}
.dr-overview-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transform: translateY(-1px);
  border-color: rgba(33,150,243,0.30);
}
.dr-overview-card-icon { color: #2196F3; }
.dr-overview-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #E5E5E5;
  text-transform: uppercase;
  hyphens: none;
  word-break: keep-all;
}
.dr-overview-card-cta {
  font-size: 0.72rem;
  color: #2196F3;
  font-weight: 600;
  margin-top: auto;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Section label (charts / tables / reports / AI) ── */
.dr-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #8A8A8A;
  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 #2A2A2A;
  background: #1F2121;
  color: #B8B8B8;
  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: rgba(33,150,243,0.10);
  color: #E5E5E5;
  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: #8A8A8A;
  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: #1F2121;
  border-radius: 12px;
  border: 1px solid #2A2A2A;
  text-decoration: none;
  color: #E5E5E5;
  transition: box-shadow 0.15s, transform 0.13s, border-color 0.15s;
}
.dr-div-summary-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transform: translateY(-1px);
  border-color: rgba(33,150,243,0.30);
}
.dr-div-summary-icon { color: #2196F3; opacity: 0.85; }
.dr-div-summary-name {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E5E5E5;
}
.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: #8A8A8A; }
.dr-div-stat-value { font-size: 0.8rem; font-weight: 700; color: #E5E5E5; }
.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: #2196F3;
  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: #B8B8B8;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
}
.dr-report-link:hover { background: rgba(33,150,243,0.10); color: #2196F3; }

/* ── Reports card variant ── */
.bi-card--reports { margin-top: 0.5rem; }

/* ── Responsive: division summary grid ── */
@media (max-width: 600px) {
  .dr-division-summary-grid { grid-template-columns: 1fr; }
  .dr-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .dr-essentials { gap: 0.35rem; }
  .dr-essential-btn { font-size: 0.72rem; padding: 0.38rem 0.8rem; }
  .dr-overview-page { padding: 1rem 1rem 2rem; }
}

/* ── Mobile: dropdown as inline bottom-sheet ── */
@media (max-width: 767px) {
  .dr-dd-menu--pill {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    min-width: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
    padding: 12px 8px 32px;
    max-height: 70vh;
    overflow-y: auto;
    background: #1F2121;
    border: 1px solid #2A2A2A;
  }
  .dr-dd-menu--pill .dr-dd-item { padding: 10px 14px; font-size: 0.9rem; }
}

/* ── Sidebar-collapsed: hide caret, show icon only ── */
body.sidebar-collapsed .dr-dd-trigger .dr-dd-caret { display: none; }

/* end v40.5ap.dashboards-routing */

/* ═══════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overview index ────────────────────────────────────────────────── */
.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: rgba(255,255,255,0.92);
  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, #8A8F9C);
  /* 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, #E3E1DD);
  line-height: 1.05;
}
.ch100-dash-card-label {
  font-size: 0.75rem;
  color: var(--fg-muted, #8A8F9C);
}

/* ── 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;
}

/* ── Chart card grid ───────────────────────────────────────────────── */
/* v40.5ap.grid-overlap-fix: explicit 4→ 3→ 2→ 1 breakpoints so wide cards
   (span 2) never collide with auto-fill column-count changes. */
.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: rgba(255,255,255,0.92);
  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 rgba(0,0,0,0.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, #8A8F9C);
  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, #E3E1DD);  /* 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, #B5B7BE);
  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: #1976D2;
  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: #1976D2;
  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, rgba(255,255,255,0.07));
}
.ch100-table td {
  padding: 3px 4px;
  color: var(--fg-secondary, #B5B7BE);
  border-bottom: 1px solid var(--border-card, rgba(255,255,255,0.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 */
.ch100-card--wide {
  grid-column: span 2;
}
@media (max-width: 600px) {
  .ch100-card--wide { grid-column: span 1; }
  .ch100-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .ch100-card--wide { grid-column: span 2; }
}

/* 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;
}

/* ── v40.5ap chart delta chip: period-over-period red/green/grey ── */
.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;
}
.ch100-delta--up {
  background: rgba(76,175,80,0.14);
  color: #4CAF50;
  border: 1px solid rgba(76,175,80,0.30);
}
.ch100-delta--down {
  background: rgba(239,83,80,0.14);
  color: #EF5350;
  border: 1px solid rgba(239,83,80,0.30);
}
.ch100-delta--flat {
  background: rgba(138,138,138,0.12);
  color: #B8B8B8;
  border: 1px solid #2A2A2A;
}

/* =========================================================
   Automation wireability pills + not-wired note
   Added: automations-wired wave
   ========================================================= */
.wire-pill {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.4;
}
.wire-pill--wired {
  background: rgba(46, 125, 50, 0.18);
  color: #66bb6a;
  border: 1px solid rgba(46, 125, 50, 0.30);
}
.wire-pill--paused {
  background: rgba(97, 97, 97, 0.18);
  color: #9e9e9e;
  border: 1px solid rgba(97, 97, 97, 0.28);
}
.wire-pill--not-wired {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.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: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  position: relative;
  transition: background 180ms ease;
}
.settings-sounds-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: left 180ms ease, background 180ms ease;
}
.settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track {
  background: rgba(29, 185, 84, 0.55);
  border-color: rgba(29, 185, 84, 0.5);
}
.settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track::after {
  left: 18px;
  background: #fff;
}
.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, #1976D2);
  cursor: pointer;
}
.settings-sounds-vol {
  font-size: 0.78rem;
  color: rgba(232,231,229,0.55);
  min-width: 28px;
  text-align: right;
}
[data-app-theme="light"] .settings-sounds-toggle-track,
[data-app-theme="og"] .settings-sounds-toggle-track {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.18);
}
[data-app-theme="light"] .settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track,
[data-app-theme="og"] .settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track {
  background: rgba(25, 118, 210, 0.55);
  border-color: rgba(25, 118, 210, 0.5);
}
[data-app-theme="light"] .settings-sounds-toggle-track::after,
[data-app-theme="og"] .settings-sounds-toggle-track::after {
  background: rgba(0,0,0,0.3);
}
[data-app-theme="light"] .settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track::after,
[data-app-theme="og"] .settings-sounds-toggle input:checked ~ .settings-sounds-toggle-track::after {
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DIVISION CARDS ──────────────────────────────────────────────────── */
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-meta {
  color: var(--fg-muted);
}
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-meta {
  color: var(--fg-muted);
}
[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 */
[data-app-theme="dark"] .gl-divisions-title,
[data-app-theme="dark"] .ds-view .gl-divisions-title { color: var(--fg-primary); }
[data-app-theme="dark"] .gl-divisions-sub,
[data-app-theme="dark"] .ds-view .gl-divisions-sub { color: var(--fg-muted); }
[data-app-theme="og"] .gl-divisions-title,
[data-app-theme="og"] .ds-view .gl-divisions-title { color: var(--fg-primary); }
[data-app-theme="og"] .gl-divisions-sub,
[data-app-theme="og"] .ds-view .gl-divisions-sub { color: var(--fg-muted); }

/* ── CANON KPI TILES (.gdt-card) ─────────────────────────────────────── */
[data-app-theme="dark"] .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-label,
[data-app-theme="dark"] .gdt-card .gdt-eyebrow {
  color: var(--fg-muted);
}
[data-app-theme="dark"] .gdt-card .gdt-value,
[data-app-theme="dark"] .gdt-card .gdt-number {
  color: var(--fg-primary);
}
[data-app-theme="og"] .gdt-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
  box-shadow: var(--shadow-card);
}
[data-app-theme="og"] .gdt-card .gdt-label,
[data-app-theme="og"] .gdt-card .gdt-eyebrow { color: var(--fg-muted); }
[data-app-theme="og"] .gdt-card .gdt-value,
[data-app-theme="og"] .gdt-card .gdt-number { color: var(--fg-primary); }

/* ── REPORT CARDS ────────────────────────────────────────────────────── */
[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"] .division-kpi-card,
[data-app-theme="dark"] .kpi-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  color: var(--fg-primary);
}
[data-app-theme="og"] .division-kpi-card,
[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);
}

/* ── DK IFRAME WRAP ──────────────────────────────────────────────────── */
[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,
[data-app-theme="dark"] .gdt-card .gdt-period,
[data-app-theme="dark"] .gdt-card .gdt-cat-chip {
  color: var(--fg-muted) !important;
}
[data-app-theme="dark"] .gdt-card .gdt-cat-chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border-soft) !important;
}
[data-app-theme="og"] .gdt-card .gdt-foot,
[data-app-theme="og"] .gdt-card .gdt-period,
[data-app-theme="og"] .gdt-card .gdt-cat-chip {
  color: var(--fg-muted) !important;
}
[data-app-theme="og"] .gdt-card .gdt-cat-chip {
  background: rgba(46,93,58,0.06) !important;
  border-color: var(--border-soft) !important;
}

/* end 2026-05-07 overnight theme sweep */

/* ── 2026-05-07 overnight pass-2: defeat hardcoded #1F2121 / #1c1d1e
   surfaces for non-dark themes. The legacy CSS uses !important
   on dozens of selectors; we match specificity and add !important.
   Bar fills (#1976D2), up (#2E7D32), down (#C62828), flat
   rgba(60,64,67,0.85) are intentionally NOT touched. */

/* 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 > .card,
[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,
[data-app-theme="light"] .ask-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 > .card,
[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,
[data-app-theme="og"] .ask-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 */
[data-app-theme="light"] .kpi-card .kpi-delta--flat,
[data-app-theme="light"] .bi-kpi-delta--flat,
[data-app-theme="og"] .kpi-card .kpi-delta--flat,
[data-app-theme="og"] .bi-kpi-delta--flat {
  color: var(--fg-muted);
}

/* end 2026-05-07 overnight pass-2 */

/* ═══════════════════════════════════════════════════════════════════════
   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: #191A1A;
  border-right: 1px solid #2A2A2A;
  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: #8A8A8A;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2A2A2A;
}

.imsg-dd-palette-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid;
  background: #1F2121;
  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: #232525;
}

.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 #2A2A2A;
  background: #191A1A;
}

/* Canvas scroll area */
.imsg-dd-canvas {
  flex: 1;
  overflow: auto;
  padding: 20px;
  min-height: 0;
  position: relative;
  background: #191A1A;
}

/* 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: #1F2121;
  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: #2196F3;
  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: #E5E5E5;
  cursor: pointer;
}

.imsg-ai-ctx-check input[type=checkbox] {
  accent-color: #2196F3;
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* AI temperature slider */
.imsg-ai-slider {
  width: 100%;
  accent-color: #2196F3;
  height: 4px;
  cursor: pointer;
  margin-top: 4px;
}

/* Responsive: stack palette below canvas on narrow screens */
@media (max-width: 800px) {
  .imsg-flow-body--dd {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .imsg-dd-palette {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid #2A2A2A;
    padding: 8px;
  }
  .imsg-flow-right--dd {
    border-top: 1px solid #2A2A2A;
  }
}

/* end v2008be.flow.v2 */

/* ──────────────────────────────────────────────────────────────────────────
   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). */
html body .rc-model-chip,
html body .rich-composer .rc-model-chip,
html body .ai-view .rc-model-chip {
  display: none;
}

/* 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: #ffffff;
}

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: #ffffff;
}

/* 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);
}

/* end v2008be.composer.singlemodel */

/* ──────────────────────────────────────────────────────────────────────────
   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: #EAEBEC;
  -webkit-text-fill-color: #EAEBEC;
  background: #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: #ffffff;
}

/* "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: #ffffff;
}
html body .rich-composer .rc-model:hover::after,
html body .ai-view .rich-composer .rc-model:hover::after {
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* 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: #ffffff !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: #ffffff;
  stroke: #ffffff;
  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;
}

/* end v2008be.composer.cleanup2 */

/* ──────────────────────────────────────────────────────────────────────────
   v2008be.composer.cleanup3 — 2026-05-08 02:45 MST
   User feedback: in chat-history mode, a faint grey rim still shows around
   the composer wrapper. Want chat content to scroll behind the composer
   with a soft blur fade, not show below it.
   ────────────────────────────────────────────────────────────────────────── */

/* 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. */
[data-app-theme="light"] html body.route-ask.ai-has-messages .ai-composer-wrap::before,
html[data-app-theme="light"] body.route-ask.ai-has-messages .ai-composer-wrap::before {
  background: linear-gradient(
    to bottom,
    rgba(247, 248, 250, 0)   0%,
    rgba(247, 248, 250, 0.55) 22%,
    rgba(247, 248, 250, 0.92) 55%,
    rgba(247, 248, 250, 1)   100%
  ) !important;
}
[data-app-theme="og"] html body.route-ask.ai-has-messages .ai-composer-wrap::before,
html[data-app-theme="og"] body.route-ask.ai-has-messages .ai-composer-wrap::before {
  background: linear-gradient(
    to bottom,
    rgba(250, 247, 238, 0)   0%,
    rgba(250, 247, 238, 0.55) 22%,
    rgba(250, 247, 238, 0.92) 55%,
    rgba(250, 247, 238, 1)   100%
  ) !important;
}

/* Make sure the inner rich-composer is the only rounded rim with elevation. */
html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer {
  position: relative;
  z-index: 1 !important;
}

/* Ensure the chat messages region has bottom padding so content can scroll
   under the veil without being hidden when at rest. */
html body.route-ask.ai-has-messages .ai-messages,
html body.route-ask.ai-has-messages .ai-view .ai-messages {
  padding-bottom: 120px !important;
}

/* end v2008be.composer.cleanup3 */

/* ──────────────────────────────────────────────────────────────────────────
   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 .division-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, #FFFFFF);
  background-image: none;
  background-color: var(--bg-card, #FFFFFF);
  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: #FFFFFF;
  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%;
}

/* end v2008be.composer.cleanup4 */

/* ──────────────────────────────────────────────────────────────────────────
   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. */
html body .cs-thinking-dots .cs-dot {
  width: 6px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

/* Source ring: keep but tone the blue down to match neutral palette. */
html body .cs-source-ring {
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-top-color: rgba(75, 159, 232, 0.85) !important;
}

/* Phase label: brighter grey, NOT blue (which was nearly invisible on dark bg). */
html body .cs-phase-label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  font-size: 0.86rem !important;
  letter-spacing: 0.005em;
  /* subtle shimmer: alpha cycles between 0.55 and 0.95 */
  animation: cs-phase-shimmer 1.6s ease-in-out infinite !important;
}
@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. */
html body .chat-msg-meta {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  margin-top: 6px;
  padding: 2px 4px;
  animation: none;
}
html body .chat-msg-meta .cs-meta-dot {
  color: rgba(255, 255, 255, 0.30);
}

/* Light/og: dark text on light bg. */
[data-app-theme="light"] html body .cs-phase-label,
[data-app-theme="og"] html body .cs-phase-label {
  color: rgba(28, 30, 34, 0.85);
}
[data-app-theme="light"] html body .cs-thinking-dots .cs-dot,
[data-app-theme="og"] html body .cs-thinking-dots .cs-dot {
  background: rgba(28, 30, 34, 0.55);
}
[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);
}
[data-app-theme="light"] html body .chat-msg-meta,
[data-app-theme="og"] html body .chat-msg-meta {
  color: rgba(28, 30, 34, 0.55);
}

/* end v2008be.thinking.cleanup */

/* ──────────────────────────────────────────────────────────────────────────
   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,
html body .thinking-stream .thinking-step.is-active .tk-dot {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}
html body .tk-dot {
  background: rgba(255, 255, 255, 0.45);
}

/* (1c) Phase row dots — also force neutral grey, no glow. */
html body .cs-phase-row .cs-thinking-dots .cs-dot,
html body .cs-thinking-dots .cs-dot {
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none;
}
html body .cs-phase-row .cs-source-ring,
html body .cs-source-ring {
  border-top-color: rgba(255, 255, 255, 0.7) !important;
}

/* (1d) Phase label: stop the shimmer on light/og where it was already grey,
        keep gentle shimmer on dark with neutral grey. */
html body .cs-phase-label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* (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);
}
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 {
  background: var(--bg-card, #1F2121);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.07));
}
/* 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 .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);
}

/* end v2008be.darkpolish */

/* ──────────────────────────────────────────────────────────────────────────
   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: #FFFFFF;
}
/* 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: #FFFFFF;
}
html[data-app-theme="dark"] body aside.sidebar .nav-item.active *,
html[data-app-theme="dark"] body aside.sidebar a.nav-item.active * {
  color: #FFFFFF;
}

/* (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-messages .cs-phase-row .cs-thinking-dots,
html body .cs-phase-row .cs-thinking-dots {
  display: none;
}
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. */
html body .cs-phase-label {
  position: relative;
  padding-left: 18px !important;
}
html body .cs-phase-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.78);
  animation: cs-spinner 0.85s linear infinite;
}
@keyframes cs-spinner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* end v2008be.darkpolish.v2 */

/* ═══════════════════════════════════════════════════════════════════════════
   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 {
  stroke: #2A2A2A;
  stroke-width: 2px;
}
.imsg-edge:hover {
  stroke: rgba(239,83,80,0.5);
  stroke-width: 3px;
}

/* Preview bubble: accent blue #2196F3 */
.imsg-preview-bubble {
  background: #2196F3;
}

/* Preview avatar: accent blue */
.imsg-preview-avatar {
  background: #2196F3;
}

/* Route badge active: palette blue */
.imsg-radio.is-active,
.imsg-radio:has(input:checked) {
  border-color: #2196F3;
  color: #E3F2FD;
  background: rgba(33,150,243,0.10);
}

/* Route badge hybrid: palette blue */
.imsg-route-badge--hybrid {
  background: rgba(33,150,243,0.10);
  color: #2196F3;
  border: 1px solid rgba(33,150,243,0.30);
}

/* AI section header: palette blue */
.imsg-ai-section-hdr {
  color: #2196F3;
  border-bottom-color: rgba(33,150,243,0.20);
}

/* AI checkboxes/sliders: palette blue */
.imsg-ai-ctx-check input[type=checkbox] {
  accent-color: #2196F3;
}
.imsg-ai-slider {
  accent-color: #2196F3;
}

/* Input focus rings: palette blue */
.imsg-input:focus,
.imsg-select:focus,
.imsg-textarea:focus {
  border-color: #2196F3;
}

/* Test mode status indicator on automation cards */
.auto-status.test {
  background: rgba(33,150,243,0.6);
  box-shadow: none;
}

/* ── Builder | KPI Dashboard tab pill toggle ── */
.stl-tab-pill-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  flex-shrink: 0;
}

.stl-tab-pill {
  padding: 5px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #8A8A8A;
  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: #E5E5E5;
  background: rgba(255,255,255,0.04);
}

.stl-tab-pill--active {
  background: #2196F3;
  color: #fff;
  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, #8A8F9C);
  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: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stl-kpi-card.stl-kpi-warn {
  border-color: rgba(239,83,80,0.4);
  background: rgba(239,83,80,0.06);
}

.stl-kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #8A8A8A;
}

.stl-kpi-sub {
  font-size: 10px;
  color: #8A8A8A;
  margin-bottom: 4px;
}

.stl-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #E5E5E5;
  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: #8A8A8A;
  border: 1px solid #2A2A2A;
  text-transform: uppercase;
  vertical-align: middle;
  display: inline-block;
}

.stl-kpi-muted {
  font-size: 11px;
  color: #8A8A8A;
}

.stl-kpi-section {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  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: #8A8A8A;
  margin-bottom: 4px;
}

.stl-kpi-section-sub {
  font-size: 10.5px;
  color: #8A8A8A;
  margin-bottom: 10px;
}

.stl-kpi-chart-wrap {
  padding: 4px 0;
  overflow-x: auto;
}

.stl-kpi-loading {
  color: #8A8A8A;
  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: #8A8A8A;
  padding: 4px 8px 6px;
  text-align: left;
  border-bottom: 1px solid #2A2A2A;
}

.stl-lb-table td {
  padding: 7px 8px;
  color: #E5E5E5;
  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: #B8B8B8;
}

/* Light theme KPI cards */
[data-app-theme="light"] .stl-kpi-card,
[data-app-theme="og"] .stl-kpi-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.07);
}

[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);
}

/* Glow filters allowed for selected nodes — v40.5ak */

/* end v2008be.stlpolish */

/* 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 rgba(255,255,255,0.07);
}
.div-dash-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-primary, #E3E1DD);
  margin: 0;
  flex: 1;
}
.div-dash-back {
  font-size: 0.82rem;
  color: var(--fg-secondary, #B5B7BE);
  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: rgba(255,255,255,0.92);
  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, #8A8F9C);
}
.div-kpi-num {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-primary, #E3E1DD);
}
.div-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.div-chart-card {
  background: rgba(255,255,255,0.92);
  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-chart-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted, #8A8F9C);
}
.div-mini-chart {
  display: block;
  width: 100%;
  height: 44px;
}
.div-tables-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.div-table-card {
  background: rgba(255,255,255,0.92);
  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-table-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted, #8A8F9C);
}
.div-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* end v2008be.divisiondash */

/* ──────────────────────────────────────────────────────────────────────────
   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: #FFFFFF;
  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 */
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle {
  color: rgba(255, 255, 255, 0.45);
}
html[data-app-theme="dark"] aside.sidebar#sidebar .sidebar-quick-item--history .sqi-icon.sqi-icon--toggle:hover {
  color: rgba(255, 255, 255, 0.72);
}

/* 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);
}

/* end v2008be.darkaudit.sidebar */

/* 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);
}

/* end v2008be.darkaudit.kpi-tiles */

/* 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-meta {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .gl-division-card .gdc-cta {
  color: #64B5F6;
}

/* end v2008be.darkaudit.divisions */

/* v2008be.darkaudit.datasources
   Data-sources outer panel has a light surface in dark mode.
*/
html[data-app-theme="dark"] body .gl-ds-grid,
html[data-app-theme="dark"] body .ds-view,
html[data-app-theme="dark"] body .gl-ds-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-ds-card .gdc-title,
html[data-app-theme="dark"] body .gl-ds-card .ds-card-name {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .gl-ds-card .gdc-meta,
html[data-app-theme="dark"] body .gl-ds-card .ds-card-desc {
  color: var(--fg-muted, #8A8F9C);
}

/* end v2008be.darkaudit.datasources */

/* 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 .settings-block-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
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;
}
html[data-app-theme="dark"] body .settings-view--v1929 .settings-outline-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--fg-primary, #E3E1DD);
}

/* end v2008be.darkaudit.settings */

/* 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);
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-name {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-desc,
html[data-app-theme="dark"] body .automations-view .automation-card .text-muted,
html[data-app-theme="dark"] body .automations-view .automation-card .automation-meta {
  color: var(--fg-muted, #8A8F9C);
}

/* end v2008be.darkaudit.automations */

/* 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,

/* end v2008be.darkaudit.home-cards */

/* ============================================================
 * v2008be.syncpalette.v9 — single source of truth for dark theme
 * Replaces v6/v7/v8 patches and the line 7873 :not(#__nope) wall.
 * Rules: one block, 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 .data-sources-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,
html[data-app-theme="dark"] body .quick-actions button,
html[data-app-theme="dark"] body .quick-actions .action-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,
html[data-app-theme="dark"] body .quick-actions button::before,
html[data-app-theme="dark"] body .quick-actions button::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;
  }
  html[data-app-theme="dark"] body .dashboard-view .summary-stack {
    gap: 14px;
  }
  html[data-app-theme="dark"] body .dashboard-view .summary-stack > .card {
    min-height: auto;
  }
}

/* ── I. Recent actions list (third screenshot): kill grey row boxes ── */
html[data-app-theme="dark"] body .recent-actions .action-row,
html[data-app-theme="dark"] body .recent-actions ul li,
html[data-app-theme="dark"] body .recent-actions .list-item,
html[data-app-theme="dark"] body[data-route="/automations"] .recent-actions > * {
  background: transparent;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
}

/* end v2008be.syncpalette.v9 */

/* 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;
}
/* end v2008be.syncpalette.v10 */

/* ============================================================
 * 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 {
  display: block;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
}

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 */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .automation-row,
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list .automation-row {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .automation-row:last-child,
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list .automation-row:last-child {
  border-bottom: none;
}

/* Automation status dot (the radio-looking thing) */
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .automation-status,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .status-dot,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row > div:first-child:not(.automation-meta) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  border: none;
  flex-shrink: 0;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row[data-status="ran"] .automation-status,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row.is-active .automation-status {
  background: #2E7D32;
}

/* 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-section .activity-item,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed .activity-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-section .activity-item:last-child,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed .activity-item:last-child {
  border-bottom: none;
}
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) {
  html[data-app-theme="dark"] body .dashboard-view .kpi-grid {
    gap: 1rem;
    margin-top: 1rem;
  }
}
/* end v2008be.syncpalette.v11 */

/* ============================================================
 * v2008be.syncpalette.v12 — condense Automations + Recent Activity
 * Show only top 3 rows in each; add a "View all" link via ::after.
 * ============================================================ */

/* 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;
}
/* end v2008be.syncpalette.v12 */

/* v12 addendum — activity-dot was rendering as a thin blue vertical bar */
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
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 */
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item[data-type="email"] .activity-dot,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item.is-email .activity-dot {
  background: rgba(25, 118, 210, 0.55);
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item[data-type="report"] .activity-dot,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item.is-report .activity-dot {
  background: rgba(46, 125, 50, 0.55);
}
/* end v12 addendum */

/* ============================================================================
 * 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
 * ============================================================================ */

/* ─── 1. PAGE FIT ──────────────────────────────────────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  box-sizing: border-box;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero {
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower {
  margin: 0;
  gap: 10px;
  flex: 0 0 auto;
}

/* ─── 2. HERO CARD + COO CHIPS ─────────────────────────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .hero-card {
  padding: 10px 16px;
  gap: 10px;
  border-radius: 12px;
  flex: 0 0 auto;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .coo-kpi-grid {
  gap: 6px;
  margin: 0;
}
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 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0;
}
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;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-label {
  color: #B5B7BE;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-value {
  color: #E3E1DD;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-footer,
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-trend,
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-unavailable,
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-loading,
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .sparkline {
  color: #B5B7BE;
  font-size: 10px;
  margin: 0;
  line-height: 1;
}
html[data-app-theme="dark"] body .dashboard-view > #kpi-grid:not(.kpi-grid--hero) {
  display: none;
}

/* ─── 4. HERO SUMMARY STACK (Today's Focus, System Status, Quick Actions) ──── */
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack {
  gap: 8px;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > * {
  padding: 8px 12px;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-row {
  font-size: 12px;
  padding: 3px 0;
  min-height: 22px;
}
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions {
  margin-top: 0;
}
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions .quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
}
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions .qa-btn,
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions button {
  width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #E3E1DD;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
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;
}
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions .qa-btn:hover,
html[data-app-theme="dark"] body .dashboard-view #hero-quick-actions button:hover {
  background: rgba(25, 118, 210, 0.14);
  border-color: rgba(25, 118, 210, 0.45);
  color: #FFFFFF;
}

/* ─── 5. LOWER ROW (Automations + Recent Activity) ─────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-section,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .card {
  padding: 10px 14px;
  border-radius: 12px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
  max-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .section-eyebrow,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .section-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #B5B7BE;
  text-transform: uppercase;
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item {
  padding: 6px 0;
  min-height: 0;
  font-size: 12px;
  line-height: 1.35;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .view-all-link {
  display: inline-block;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: #1976D2;
  text-decoration: none;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .view-all-link:hover {
  color: #4FA3E8;
  text-decoration: underline;
}

/* ─── 6. DOUBLE-LINE FIXES ─────────────────────────────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item:last-of-type {
  border-bottom: none;
}

/* 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;
}

/* ============================================================================
 * END OVERVIEW v22
 * ============================================================================ */

/* ─── v22.1 — Compact summary stack to balance hero height ─────────────────── */
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack {
  gap: 6px;
}
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;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack h2,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack h3,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-eyebrow,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin: 0 0 4px 0;
  line-height: 1;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-row,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack [class*="summary-row"],
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack li,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .row {
  font-size: 11.5px;
  padding: 2px 0;
  margin: 0;
  min-height: 18px;
  line-height: 1.3;
}
/* Cap stack to viewport budget */
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack {
  max-height: 420px;
  overflow: hidden;
}
/* Match hero card heights more carefully */
html[data-app-theme="dark"] body .dashboard-view .hero-card {
  max-height: 460px;
  overflow: hidden;
}
/* end v22.1 */

/* ─── v22.2 — Real summary-item class targeting ────────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .card.panel,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > .card,
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack > .panel {
  padding: 8px 12px;
  border-radius: 10px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .panel-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B5B7BE;
  margin: 0 0 4px 0;
  line-height: 1.1;
  font-weight: 600;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  margin: 0;
  min-height: 20px;
  height: 20px;
  font-size: 11.5px;
  line-height: 1.2;
  border: 0;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-item span {
  color: #B5B7BE;
  font-size: 11.5px;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .summary-stack .summary-item strong {
  color: #E3E1DD;
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
/* end v22.2 */

/* ─── v22.3 — Correct: .summary-stack is sibling of .hero-card, both under .page-hero ── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  gap: 6px;
  max-height: 460px;
  overflow: hidden;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .panel {
  padding: 8px 12px;
  border-radius: 10px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .panel-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B5B7BE;
  margin: 0 0 4px 0;
  line-height: 1.1;
  font-weight: 700;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  margin: 0;
  min-height: 20px;
  height: 20px;
  font-size: 11.5px;
  line-height: 1.2;
  border: 0;
  border-bottom: 0;
  border-top: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item span {
  color: #B5B7BE;
  font-size: 11.5px;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item strong {
  color: #E3E1DD;
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions {
  margin-top: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .quick-actions-grid .qa-btn,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .quick-actions-grid button {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  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;
}
/* Also cap hero card explicitly */
html[data-app-theme="dark"] body .dashboard-view .page-hero .hero-card {
  max-height: 460px;
  overflow: hidden;
}
/* end v22.3 */

/* ─── v22.4 — dashboard-lower structure fix ────────────────────────────────── */
/* 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.
 */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > #chat-panel {
  display: none;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  background: transparent;
  border: 0;
  padding: 0;
  max-height: 220px;
  overflow: hidden;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .card,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .right-section {
  padding: 10px 14px;
  border-radius: 12px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
  max-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .section-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #B5B7BE;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item {
  padding: 5px 0;
  min-height: 0;
  font-size: 12px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item:last-of-type {
  border-bottom: 0;
}
/* Kill #main-content padding-bottom that adds 37.5px overflow */
html[data-app-theme="dark"] body #main-content {
  padding-bottom: 0;
  overflow: hidden;
}
/* end v22.4 */

/* ─── v22.5 — Sidebar history overflow fix (was making document scroll 24px) ─ */
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 */
html:has(body.route-dashboards),
body.route-dashboards {
  overflow: hidden;
}
/* end v22.5 */

/* ============================================================================
 * 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 ──────────────────────────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .hero-card,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  max-height: 470px;
  overflow: hidden;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── 2. Summary panels (Today's Focus, System Status, Quick Actions) ──────── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .panel {
  padding: 10px 14px;
  border-radius: 12px;
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .panel-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B5B7BE;
  margin: 0 0 8px 0;
  line-height: 1;
  font-weight: 600;
}

/* Summary-item: stacked vertical layout (label above, value below) ────────── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px 0;
  margin: 0;
  min-height: 0;
  height: auto;
  gap: 1px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item:last-of-type {
  border-bottom: 0;
  padding-bottom: 2px;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item span {
  color: #B5B7BE;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
  max-width: none;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item strong {
  color: #E3E1DD;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  width: 100%;
  display: block;
}

/* ─── 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 ───────────────────── */
html[data-app-theme="dark"] body .dashboard-view .hero-card .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #B5B7BE;
  margin: 0;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .hero-headline {
  font-size: 22.5px;
  line-height: 1.15;
  margin: 2px 0 0 0;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .hero-lead {
  font-size: 12.5px;
  color: #B5B7BE;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

/* ─── 5. KPI tiles inside hero (consistent font scale) ─────────────────────── */
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-label {
  font-size: 10px;
  letter-spacing: 0.08em;
}
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card .kpi-value {
  font-size: 16px;
}

/* ─── 6. Lower row: Automations + Activity — show View all, kill last border ─ */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel {
  max-height: 240px;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .card,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .right-section {
  max-height: 240px;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .section-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0 0 6px 0;
}
/* Limit shown rows to 3 each so View all has room */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row:nth-of-type(n+4),
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item:nth-of-type(n+4) {
  display: none;
}
/* Bottom border on rows but NOT on the last visible row */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item {
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* Kill border-bottom on last visible row (3rd of type) */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row:nth-of-type(3),
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item:nth-of-type(3),
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item:last-of-type {
  border-bottom: 0;
}
/* Item name typography */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-name,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-sub,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-meta {
  font-size: 11px;
  color: #B5B7BE;
  line-height: 1.3;
}
/* View all link styled like an actionable footer */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .view-all-link {
  display: inline-block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #4FA3E8;
  text-decoration: none;
}
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .view-all-link:hover {
  color: #7BC0F0;
  text-decoration: underline;
}

/* ─── 7. dashboard-view total budget bump for new lower-row height (240) ───── */
html[data-app-theme="dark"] body .dashboard-view {
  gap: 10px;
  padding: 8px 16px 12px;
}
/* end v23 */

/* v23c — KPI skeleton loading hint */
html[data-app-theme="dark"] body .dashboard-view .hero-card .kpi-grid--hero .kpi-card.skeleton-card .kpi-loading-hint {
  color: #8A8E96;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 4px 0;
}
/* end v23c */

/* v23f — Summary-item: horizontal flex with wrap, compact when short, wraps when long ── */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  margin: 0;
  min-height: 0;
  height: auto;
  gap: 4px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item:last-of-type {
  border-bottom: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item span {
  flex: 0 0 auto;
  color: #B5B7BE;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  text-align: left;
  max-width: 45%;
  white-space: normal;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item strong {
  flex: 1 1 auto;
  color: #E3E1DD;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  width: auto;
  display: inline;
  min-width: 0;
}
/* Tighter panels to fit in 470px budget */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card,
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .panel {
  padding: 8px 12px;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .panel-title {
  margin: 0 0 6px 0;
}
/* Allow summary-stack to scroll if absolutely overflowing instead of clipping */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  overflow-y: auto;
  overflow-x: hidden;
}
/* 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;
}
/* end v23f */

/* 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 */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .card,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .right-section,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel #automations-section,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel #activity-section {
  max-height: 270px;
  overflow: hidden;
}
/* 2) Tighten lower-row rows so 3 rows + header + View all fits cleanly in 270 */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .automation-row,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower .activity-item {
  padding: 5px 0;
}
/* 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 */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  overflow: hidden;
  gap: 8px;
  display: flex;
  flex-direction: column;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel:nth-of-type(1),
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel:nth-of-type(2) {
  max-height: 188px;
  overflow: hidden;
  flex: 0 0 auto;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack #hero-quick-actions {
  flex: 0 0 auto;
  max-height: 80px;
  min-height: 70px;
  overflow: hidden;
}
/* 4) Even tighter summary items so 6 rows fit in 188px (header ~22 + 6 rows ~24px each) */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item {
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.25;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item span {
  font-size: 11px;
  line-height: 1.25;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item strong {
  font-size: 11.5px;
  line-height: 1.25;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel {
  padding: 8px 11px;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .panel-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin: 0 0 5px 0;
  line-height: 1.2;
}
/* end v23g */

/* 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) */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .automation-row,
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list .automation-row,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-section .activity-item,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed .activity-item {
  padding: 10px 0;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* UNIFIED DOT — both cards use 8px, neutral grey for inactive, brand blue + halo for active */
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .auto-status,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row > span:first-child,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-dot,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item > span:first-child {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  border: none;
  margin-top: 0;
  align-self: center;
}
/* Active state for automation (.auto-status.on) — keep blue dot but smaller halo */
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .auto-status.on {
  background: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}
/* Activity rows: always neutral (no constant blue halo) */
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-dot {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

/* Unify font sizes between the two row types so visual weight matches */
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .automation-name,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  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,
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-body,
html[data-app-theme="dark"] body .dashboard-view .right-panel .activity-item .activity-sub {
  font-size: 11.5px;
  line-height: 1.25;
  margin: 2px 0 0 0;
  color: #8B8D93;
}

/* 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) */
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-section .automation-row:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .right-panel #automations-list .automation-row:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-section .activity-item:last-of-type,
html[data-app-theme="dark"] body .dashboard-view .right-panel #activity-feed .activity-item:last-of-type {
  border-bottom: none;
}

/* Bump card cap so 3 unified rows (56*3=168) + header (~28) + View all (~24) + padding fit cleanly */
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .card,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel > .right-section,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel #automations-section,
html[data-app-theme="dark"] body .dashboard-view .dashboard-lower > .right-panel #activity-section {
  max-height: 260px;
  overflow: hidden;
}
/* end v23h */

/* 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) */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 3px 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack > span {
  text-align: left;
  color: #8B8D93;
  font-size: 11px;
  line-height: 1.25;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack > strong {
  text-align: right;
  color: #E3E1DD;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 3) Now there are fewer rows, lift the per-panel cap so the 2-line stacks fit cleanly */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel:nth-of-type(1) {
  max-height: 215px;
}
/* end v23i */

/* v23j — force stacked summary values to wrap inside the card width */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
/* Force the panel cards to constrain their content (no overflowing horizontally) */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel {
  overflow: hidden;
  min-width: 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack {
  min-width: 0;
  overflow: hidden;
}
/* end v23j */

/* v23l — revert font bump; narrow value column so long values wrap to 2 lines */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack > strong {
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0;
  /* Cap value width so it MUST wrap when text is longer than ~half the panel */
  max-width: 56%;
  width: auto;
  display: inline-block;
  margin-left: auto;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px 0;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack > span {
  align-self: flex-start;
  font-size: 11px;
  line-height: 1.25;
  margin-bottom: 2px;
}
/* Panel heights right-sized for 2-line wrapped values at 11.5px */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel:nth-of-type(1) {
  max-height: 230px;
}
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack > .card.panel:nth-of-type(2) {
  max-height: 145px;
}
/* end v23l */

/* v23m — no hyphenation breaks mid-word on stacked values */
html[data-app-theme="dark"] body .dashboard-view .page-hero .summary-stack .summary-item--stack > strong {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
/* end v23m */

/* 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 {
  min-height: 110px;
  max-height: 130px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
}
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;
}
/* end v23n */

/* 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);
}
/* end v23o */

/* 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: 8px 16px;
  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;
}
/* end v23p */

/* 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;
}
/* end v23q */

/* ============================================================
 * 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;
}
/* end v23s */

/* 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;
}
/* end v23u */

/* ============================================================
 * 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 */
html[data-app-theme="dark"] body:not(.route-dashboards) #main-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* 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;
}
html[data-app-theme="dark"] body .automation-card .automation-card-eyebrow,
html[data-app-theme="dark"] body .automation-card .automation-card-meta,
html[data-app-theme="dark"] body .automation-card .automation-card-metric,
html[data-app-theme="dark"] body .automation-card .automation-card-subtitle,
html[data-app-theme="dark"] body .automation-card [class*="automation-card-"]:not(.automation-card-title):not(.automation-card-head):not(.automation-card-title-wrap) {
  color: #B5B7BE;
}
/* 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);
}
/* end v23v */

/* ============================================================
 * 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 */
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat,
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat strong,
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat b,
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-stats .automation-stat strong {
  color: #E3E1DD;
}
/* label text after the number stays muted */
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat strong {
  color: #E3E1DD;
}

/* 2. Scheduled emails activity-title light */
html[data-app-theme="dark"] body .automations-view .scheduler-jobs-card .activity-title,
html[data-app-theme="dark"] body .automations-view .recent-actions-wrap .activity-title,
html[data-app-theme="dark"] body .automations-view .activity-title {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .automations-view .activity-title .text-muted {
  color: #B5B7BE;
}
/* Activity meta below ("Active · last ran never · next —") */
html[data-app-theme="dark"] body .automations-view .activity-meta,
html[data-app-theme="dark"] body .automations-view .activity-item .activity-meta {
  color: #B5B7BE;
}

/* 3. iMessage card status dot align with FIRST line of title */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head {
  align-items: flex-start;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head .auto-status {
  margin-top: 7px;  /* (title line-height 17.1px - dot 8px) / 2 = ~4.5, plus eyebrow */
  flex: 0 0 8px;
  align-self: flex-start;
}
/* Toggle switch should stay vertically centered with whole head (it's a chunky control) */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head .toggle-switch {
  align-self: center;
}
/* end v23x */

/* ============================================================
 * v23y — Automations: move status dot + run count INSIDE title row.
 * DOM order now: name · LIVE? · PAUSED/WIRED · dot · "0 runs"
 * The dot to the LEFT of title is gone. Run count migrated out of foot.
 * ============================================================ */

/* Title row becomes a horizontal flex of inline pieces, vertically centered */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #E3E1DD;
  font-weight: 600;
}

/* Inline status dot inside title: small grey by default, blue when .on */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .auto-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);  /* grey when off */
  box-shadow: none;
  margin: 0;
  flex: 0 0 8px;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .auto-status.on {
  background: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

/* Inline run metric inside title row: light muted */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .automation-card-metric {
  color: #B5B7BE;
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 2px;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .automation-card-metric strong {
  color: #E3E1DD;
  font-weight: 600;
  margin-right: 3px;
}

/* Card head is now just title-wrap + toggle. align top to be safe */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head {
  align-items: flex-start;
}
/* Toggle stays vertically centered against the whole head block */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head .toggle-switch {
  align-self: center;
}

/* Foot: only actions remain, push them to the right */
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-foot {
  display: flex;
  justify-content: flex-end;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-foot .automation-card-actions {
  margin-left: auto;
}
/* end v23y */

/* ───────────────────────────────────────────────────────────────────────
   v24 — topnav hover pill rounding + Data sources 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) Data sources view (.gl-ds-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) Data sources page: dark-theme rework matching Automations polish ── */
html[data-app-theme="dark"] body .gl-ds-view,
html body .gl-ds-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-ds-view .gl-ds-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
html body .gl-ds-view .gl-ds-title {
  color: #E3E1DD;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
}
html body .gl-ds-view .gl-ds-sub {
  color: #B5B7BE;
  font-size: 0.92rem;
  margin: 0 0 1rem 0;
  max-width: 62ch;
  line-height: 1.5;
}
html body .gl-ds-view .gl-ds-stats {
  display: flex;
  gap: 1.25rem;
  margin: 0;
}
html body .gl-ds-view .gl-ds-stats .gl-ds-stat {
  color: #B5B7BE;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
html body .gl-ds-view .gl-ds-stats .gl-ds-stat strong {
  color: #E3E1DD;
  font-size: 1rem;
  font-weight: 600;
}

/* Category labels (OPERATIONS, FINANCE, ...) — slightly brighter, more breathing room */
html body .gl-ds-view .gl-ds-section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
html body .gl-ds-view .gl-ds-section + .gl-ds-section {
  margin-top: 1.75rem;
}
html body .gl-ds-view .gl-ds-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-ds-view .gl-ds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  html body .gl-ds-view .gl-ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  html body .gl-ds-view .gl-ds-grid { grid-template-columns: 1fr !important; }
}
html body .gl-ds-view .gl-ds-card {
  background: #1F2121;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: none;
  padding: 14px 14px 12px 14px;
  color: #E3E1DD;
}
html body .gl-ds-view .gl-ds-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-ds-view .gl-ds-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-ds-view .gl-ds-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-ds-view .gl-ds-card .gds-title {
  color: #E3E1DD !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: -0.003em;
}
html body .gl-ds-view .gl-ds-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;
}
html body .gl-ds-view .gl-ds-card .gds-chip--connected,
html body .gl-ds-view .gl-ds-card.is-connected .gds-chip {
  background: rgba(46, 125, 50, 0.22) !important;
  color: #A5D6A7 !important;
}
html body .gl-ds-view .gl-ds-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-ds-view .gl-ds-card .gds-cta,
html body .gl-ds-view .gl-ds-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-ds-view .gl-ds-card .gds-cta:hover,
html body .gl-ds-view .gl-ds-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-ds-view .gl-ds-card .gds-cta--disconnect {
  background: transparent;
  color: #B5B7BE;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
html body .gl-ds-view .gl-ds-card .gds-cta--disconnect:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #E3E1DD;
}
/* end v24 */

/* v24 — Dashboards hub (the /dashboards Overview page) title was dark blue
   on dark background. Mirror Automations/Data sources header treatment. */
html[data-app-theme="dark"] body .dr-overview-title,
html body .dr-overview-title {
  color: #E3E1DD;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
html[data-app-theme="dark"] body .dr-overview-sub,
html body .dr-overview-sub {
  color: #B5B7BE;
  font-size: 0.92rem;
  line-height: 1.5;
}
html[data-app-theme="dark"] body .dr-overview-page,
html body .dr-overview-page {
  padding: 1rem 1.5rem 2rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
html[data-app-theme="dark"] body .dr-overview-card-title {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .dr-overview-card-cta {
  color: #64B5F6;
}
/* end v24 dashboards hub */

/* v24a — Data sources chips: remove background, keep just the label */
html body .gl-ds-view .gl-ds-card .gds-chip,
html body .gl-ds-view .gl-ds-card .gds-chip--connected,
html body .gl-ds-view .gl-ds-card.is-connected .gds-chip {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
/* end v24a */

/* ───────────────────────────────────────────────────────────────────────
   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) */
@media (max-width: 767px) {
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-img {
    /* drop the !important so JS's display:none on error wins */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    border-radius: 50%;
  }
  /* Belt-and-suspenders: when src failed (naturalWidth=0) keep it hidden.
     We can't query naturalWidth in CSS, so we hide by inline only above. */

  /* 2) Switch: clean 36px capsule */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px !important;
    border-radius: 999px;
    flex: 0 1 auto !important;
    max-width: 220px !important;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 14px;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active {
    font-weight: 600;
  }
  /* Hidden SVG icons (text-only switch) — keep them hidden cleanly */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt .mt-switch-ico {
    display: none;
  }

  /* 3) Avatar + kebab chips to 36px for visual harmony */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    overflow: hidden !important;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 118, 210, 0.18);
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-fallback {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip svg,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
    /* v40.5eo FIX 4: soften the gear icon at this breakpoint too. */
    color: rgba(255, 255, 255, 0.55) !important;
  }

  /* Topnav itself: trim height from 72 to 60 */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 {
    height: 60px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
}

/* end v24b */

/* v24b extra: when avatar is in fallback mode, force-hide the broken img */
@media (max-width: 767px) {
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-ring.is-fallback .mt-avatar-img {
    display: none;
  }
}
/* end v24b extra */

/* v24c — Switch label ::after height was hardcoded 44px, breaks alignment
   when the button is smaller. Constrain to button height. */
@media (max-width: 767px) {
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="ai"]::after,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
    height: 30px !important;
    line-height: 30px !important;
    display: inline-flex;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 500;
  }
}
/* end v24c */

/* v24e — Mobile topbar was sitting flush at top:0 fighting the iOS status
   bar (time, signal, battery). Push it below the safe area inset (notch /
   Dynamic Island) and add the inset to the bar's effective height so
   sticky content underneath still has the right offset. */
@media (max-width: 767px) {
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 {
    top: env(safe-area-inset-top, 0px) !important;
    padding-top: 12px !important;
  }
  /* If anything was anchored under the bar at 60px, bump it by the inset */
  html:not(#__never__) body:not(#__never__).has-mobile-topnav #main-content {
    padding-top: calc(60px + env(safe-area-inset-top, 0px));
  }
}
/* end v24e */

/* ───────────────────────────────────────────────────────────────────────
   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:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip,
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip--right,
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip.is-up,
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip.is-down,
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip.is-flat {
  background: #1F2121 !important;
  background-color: #1F2121 !important;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #E3E1DD;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow {
  color: #B5B7BE;
  font-weight: 600;
  letter-spacing: 0.10em;
}
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value {
  color: #E3E1DD;
}
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit {
  color: #B5B7BE;
  opacity: 1;
}
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker {
  color: #B5B7BE;
}
/* 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). */
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-ticker { color: #4CAF50; }
html:not(#__never__) body:not(#__never__) .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-ticker { color: #EF5350; }

/* 2) Minimize button → outside the grid (gutter to the left), dark theme */
html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize {
  top: 0;
  left: -36px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px;
  z-index: 6 !important;
}
html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(25, 118, 210, 0.55);
  color: #64B5F6;
}
/* 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;
  }
}

/* 3) Stop clipping the bottom of the KPI grid */
html:not(#__never__) body:not(#__never__) .ai-view #home-launcher.home-launcher,
html:not(#__never__) body:not(#__never__) .ai-view .home-launcher {
  overflow: visible;
  overflow-y: auto;
  padding-bottom: 16px !important;
}
/* Make sure the toggles row at the bottom isn't pinned to a position that
   gets clipped — give it natural bottom margin */
html:not(#__never__) body:not(#__never__) .home-launcher .home-dash-toggles {
  margin-bottom: 12px !important;
}
/* end v25 */

/* ───────────────────────────────────────────────────────────────────────
   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. */
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-value,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-bucket-value {
  color: #E3E1DD;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-title {
  color: #E3E1DD;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-eyebrow,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-bucket-eyebrow {
  color: #B5B7BE;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-unit,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-bucket-unit {
  color: #B5B7BE;
  opacity: 1;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-ytd-inline {
  color: #B5B7BE;
  opacity: 1;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-cta {
  color: #B5B7BE;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-eyebrow + .home-dash-title::before {
  color: #6B6E76;
}
/* Up/down values inside main grid cards (delta row "CURRENT VS PREVIOUS") */
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-delta.is-up,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-foot .is-up {
  color: #4CAF50;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-delta.is-down,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-foot .is-down {
  color: #EF5350;
}
/* Range / foot meta inside cards */
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-range,
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-week-label,

/* (2) Card hover — strip white-inset left border, keep light text. */
html:not(#__never__) body:not(#__never__) .home-dash-card.home-dash-card--link:hover,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover {
  background: #232525;
  background-color: #232525;
  background-image: none;
  border-color: rgba(25, 118, 210, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  color: #E3E1DD;
  transform: translateY(-1px);
}
html:not(#__never__) body:not(#__never__) .home-dash-card.home-dash-card--link:hover,
html:not(#__never__) body:not(#__never__) .home-dash-card.home-dash-card--link:hover *,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover * {
  color: #E3E1DD;
}
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-eyebrow,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-unit,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-range,
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-ytd-inline {
  color: #B5B7BE;
}
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-delta.is-up { color: #4CAF50; }
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-delta.is-down { color: #EF5350; }
html:not(#__never__) body:not(#__never__) .home-dash-card.home-dash-card--link:hover .home-dash-cta {
  background: rgba(25, 118, 210, 0.20);
  color: #64B5F6;
}

/* (3) Bottom toolbar — make sure it doesn't touch the launcher edge. */
html:not(#__never__) body:not(#__never__) .ai-view #home-launcher.home-launcher,
html:not(#__never__) body:not(#__never__) .ai-view .home-launcher {
  padding-bottom: 28px !important;
}
html:not(#__never__) body:not(#__never__) .home-launcher .home-dash-toggles {
  margin-bottom: 16px !important;
  padding-bottom: 4px !important;
}

/* (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:not(#__never__) body:not(#__never__) .ai-view #home-launcher.home-launcher,
html:not(#__never__) body:not(#__never__) .ai-view .home-launcher {
  padding-top: 32px !important;
}
html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize,
html:not(#__never__) body:not(#__never__) .ai-view .home-launcher .kpi-minimize {
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  z-index: 8;
}
html:not(#__never__) body:not(#__never__) .home-launcher .kpi-minimize:hover,
html:not(#__never__) body:not(#__never__) .ai-view .home-launcher .kpi-minimize:hover {
  background: rgba(25, 118, 210, 0.18);
  border-color: rgba(25, 118, 210, 0.55);
  color: #64B5F6;
}
/* 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;
  }
}
/* end v25a */

/* ───────────────────────────────────────────────────────────────────────
   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.
   ─────────────────────────────────────────────────────────────────────── */
html:not(#__never__) body.kpi-active:not(#__never__) #ai-hero,
html:not(#__never__) body.kpi-active:not(#__never__) .ai-hero,
html:not(#__never__) body.kpi-active:not(#__never__) .ai-hero-card,
html:not(#__never__) body.kpi-active:not(#__never__) .ai-hero-stage,
html:not(#__never__) body.kpi-active:not(#__never__) #ai-greeting,
html:not(#__never__) body.kpi-active:not(#__never__) .ai-tagline {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* end v25a-extra */

/* ───────────────────────────────────────────────────────────────────────
   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.
   ─────────────────────────────────────────────────────────────────────── */
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row1 {
  color: #B5B7BE;
  opacity: 1;
}
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-up   { color: #4CAF50; }
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-down { color: #EF5350; }
html:not(#__never__) body:not(#__never__) .ai-view .home-dash-grid .home-dash-ytd-inline .home-dash-baseline-row2.is-flat { color: #B5B7BE; }

/* Hover state should keep the eyebrow light, not revert to dark slate. */
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row1 {
  color: #B5B7BE;
}
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-up   { color: #4CAF50; }
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-down { color: #EF5350; }
html:not(#__never__) body:not(#__never__) .home-dash-card:hover .home-dash-ytd-inline .home-dash-baseline-row2.is-flat { color: #B5B7BE; }
/* end v25c */

/* ───────────────────────────────────────────────────────────────────────
   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:not(#__never__) body:not(#__never__) 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:not(#__never__) body:not(#__never__) .gl-divisions-view {
  padding: 2rem 2rem 3rem !important;
  max-width: 960px !important;
  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:not(#__never__) body:not(#__never__) .gl-divisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
  width: 100%;
  max-width: none;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* Card: match .dr-overview-card exactly. Important to override the
   `flex: 0 0 280px; width: 280px;` rule at style.css:5830. */
html:not(#__never__) body:not(#__never__) .gl-divisions-grid .gl-division-card,
html:not(#__never__) body:not(#__never__) .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: rgba(255,255,255,0.92);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.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:not(#__never__) body:not(#__never__) .gl-division-card:hover {
  box-shadow: 0 4px 16px rgba(25,118,210,0.14);
  transform: translateY(-1px);
  border-color: rgba(25,118,210,0.20);
}

/* 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. */
html:not(#__never__) body:not(#__never__) .gl-division-card .gdc-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(25,118,210,0.10);
  color: #1976D2;
  margin: 0 auto 0.25rem;
}
html:not(#__never__) body:not(#__never__) .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:not(#__never__) body:not(#__never__) .gl-division-card .gdc-meta {
  font-size: 0.78rem;
  color: rgba(15,23,42,0.55);
  text-align: center;
  width: 100%;
  letter-spacing: 0.01em;
  font-family: 'Satoshi','Inter',system-ui,sans-serif;
}
html:not(#__never__) body:not(#__never__) .gl-division-card .gdc-cta {
  font-size: 0.72rem;
  color: #1976D2;
  font-weight: 600;
  margin-top: auto;
  text-align: center;
  width: 100%;
  align-self: center;
  letter-spacing: 0.02em;
}

/* Dim/disabled cards (Coming soon placeholders) keep the centered layout
   but lose the hover lift. */
html:not(#__never__) body:not(#__never__) .gl-division-card.gl-division-card--dim {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}
html:not(#__never__) body:not(#__never__) .gl-division-card.gl-division-card--dim:hover {
  transform: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Header: match .dr-overview-header spacing on /divisions. */
html:not(#__never__) body:not(#__never__) .gl-divisions-view .gl-divisions-header {
  margin-bottom: 1.75rem;
}
html:not(#__never__) body:not(#__never__) .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:not(#__never__) body:not(#__never__) .gl-divisions-sub {
  font-size: 0.85rem;
  color: rgba(15,23,42,0.52);
  margin: 0;
}

/* Breadcrumb sits cleanly above the header (Sales / D2D subpages). */
html:not(#__never__) body:not(#__never__) .gl-divisions-view .ds-crumbs {
  margin-bottom: 1rem;
}

/* 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-meta  { color: rgba(255,255,255,0.55); }
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. */
@media (max-width: 768px) {
  html:not(#__never__) body:not(#__never__) .gl-divisions-view {
    padding: 1rem 1rem 2rem !important;
  }
  html:not(#__never__) body:not(#__never__) .gl-divisions-grid {
    grid-template-columns: 1fr !important;
  }
}
/* end v26b */

/* ───────────────────────────────────────────────────────────────────────
   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:not(#__never__) body:not(#__never__) .gl-divisions-view.gl-divisions-view--centered {
  min-height: calc(100vh - 64px) !important;
  display: grid;
  grid-template-rows: auto 1fr !important;
  padding: 2rem !important;
  max-width: 1100px !important;
  margin: 0 auto;
  align-items: stretch !important;
  justify-items: stretch;
}

/* Header sits at the TOP of the page (not affecting row centering) */
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered {
  text-align: center;
  margin: 0 0 1rem 0;
  align-self: start !important;
}
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-title,
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-sub {
  text-align: center;
}

/* 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:not(#__never__) body:not(#__never__) .gl-divisions-view.gl-divisions-view--centered .gl-divisions-grid.gl-divisions-grid--row5 {
  align-self: center !important;
}

/* === DIVISIONS GRID: force 5 chips in ONE row ======================== */
html:not(#__never__) body:not(#__never__) .gl-divisions-grid.gl-divisions-grid--row5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.75rem;
  width: 100%;
  max-width: 1000px !important;
  margin: 0 auto;
}

/* Compact chip-style cards on the divisions index */
html:not(#__never__) body:not(#__never__) .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:not(#__never__) body:not(#__never__) .gl-division-card.gl-division-chip .gdc-title {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === DARK THEME: divisions page parity =============================== */
html[data-app-theme="dark"] body .gl-divisions-view,
html[data-app-theme="dark"] body .gl-divisions-view--centered {
  background: transparent;
}
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-title {
  color: rgba(255,255,255,0.92);
}
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip .gdc-icon {
  background: rgba(91,169,242,0.14);
  color: #5BA9F2;
}
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip:hover {
  border-color: rgba(91,169,242,0.30);
  box-shadow: 0 4px 16px rgba(91,169,242,0.18);
}

/* === DASHBOARDS HUB: chip sections grouped by division =============== */
html:not(#__never__) body:not(#__never__) .dr-chip-sections {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
html:not(#__never__) body:not(#__never__) .dr-chip-section {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1.25rem;
}
html:not(#__never__) body:not(#__never__) .dr-chip-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
html:not(#__never__) body:not(#__never__) .dr-chip-section-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(25,118,210,0.10);
  color: #1976D2;
}
html:not(#__never__) body:not(#__never__) .dr-chip-section-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.85);
}
html:not(#__never__) body:not(#__never__) .dr-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
html:not(#__never__) body:not(#__never__) .dr-chip,
html:not(#__never__) body:not(#__never__) .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 rgba(0,0,0,0.06);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  white-space: nowrap;
}
html:not(#__never__) body:not(#__never__) .dr-chip:hover,
html:not(#__never__) body:not(#__never__) .gl-report-chip:hover {
  background: rgba(25,118,210,0.08);
  border-color: rgba(25,118,210,0.28);
  color: #1976D2;
}
html:not(#__never__) body:not(#__never__) .dr-chip-empty {
  display: inline-flex;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  color: rgba(15,23,42,0.40);
  font-style: normal;
}

/* Per-division chip-only sub-page */
html:not(#__never__) body:not(#__never__) .gl-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
html:not(#__never__) body:not(#__never__) .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);
}

/* Dark theme parity for chip sections + chips */
html[data-app-theme="dark"] body .dr-chip-section {
  background: #1F2121;
  border-color: rgba(255,255,255,0.08);
}
html[data-app-theme="dark"] body .dr-chip-section-title {
  color: rgba(255,255,255,0.88);
}
html[data-app-theme="dark"] body .dr-chip-section-icon {
  background: rgba(91,169,242,0.14);
  color: #5BA9F2;
}
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 .dr-chip-empty {
  color: rgba(255,255,255,0.40);
}
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 */
@media (max-width: 768px) {
  html:not(#__never__) body:not(#__never__) .gl-divisions-grid.gl-divisions-grid--row5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html:not(#__never__) body:not(#__never__) .gl-divisions-view.gl-divisions-view--centered {
    min-height: auto;
    padding: 1.5rem 1rem !important;
  }
}
/* end v27 */

/* 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: #FFFFFF;
}
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);
}
/* end v27b */

/* ───────────────────────────────────────────────────────────────────────
   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 */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-title,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view--centered .gl-divisions-title,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-header .gl-divisions-title,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-title {
  color: #FFFFFF;
  opacity: 1;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-sub,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view--centered .gl-divisions-sub,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-header .gl-divisions-sub,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-sub {
  color: rgba(255,255,255,0.62);
  opacity: 1;
}

/* DASHBOARDS HUB chip sections: force dark surface (was white) */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.08);
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section-title {
  color: rgba(255,255,255,0.88) !important;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section-icon {
  background: rgba(91,169,242,0.14);
  color: #5BA9F2;
}

/* ALL CHIPS (dashboards .dr-chip + divisions .gl-report-chip): dark */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-report-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip:hover,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-report-chip:hover {
  background: rgba(91,169,242,0.12);
  border-color: rgba(91,169,242,0.32);
  color: #5BA9F2;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-empty {
  color: rgba(255,255,255,0.40) !important;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-empty {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.50);
}
/* end v27c */

/* v27d — Force dark division chip cards on /divisions (override v26b white bg) */
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-divisions-grid .gl-division-card.gl-division-chip,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card.gl-division-chip {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  box-shadow: none;
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card.gl-division-chip .gdc-title {
  color: rgba(255,255,255,0.92);
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .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);
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card.gl-division-chip:hover {
  background: #232525;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card.gl-division-chip:hover .gdc-icon {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}
/* Light theme equivalent — neutral icon, no blue tint */
html:not([data-app-theme="dark"]):not(#__nope__) body:not(#__never__) .gl-division-card.gl-division-chip .gdc-icon {
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.78);
  border: 1px solid rgba(15,23,42,0.06);
}
/* end v27d */

/* ───────────────────────────────────────────────────────────────────────
   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. */
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  background: #232525;
}
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip:hover .gdc-icon {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

/* 3. Light theme: same neutral treatment so no blue tint anywhere. */
html:not([data-app-theme="dark"]) body .gl-division-card.gl-division-chip .gdc-icon {
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.78);
  border: 1px solid rgba(15,23,42,0.06);
}

/* 4. Subtext: constrain width and center as a block so the paragraph
      itself sits centered under the title (long lines were full-width). */
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-sub {
  max-width: 640px !important;
  margin: 0.4rem auto 0;
  text-align: center;
  line-height: 1.5;
  font-size: 0.88rem !important;
}

/* 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:not(#__never__) body:not(#__never__) .gl-divisions-view.gl-divisions-view--centered {
  min-height: auto;
  display: block;
  padding: 2.5rem 2rem 3rem !important;
}
html:not(#__never__) body:not(#__never__) .gl-divisions-view.gl-divisions-view--centered .gl-divisions-grid.gl-divisions-grid--row5 {
  align-self: auto;
  margin-top: 2rem !important;
}

/* 6. Header tightening so subtext sits closer to title. */
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered {
  margin: 0 0 0 0;
}
html:not(#__never__) body:not(#__never__) .gl-divisions-header--centered .gl-divisions-title {
  margin: 0 0 0.25rem 0;
}

/* end v27g */

/* ───────────────────────────────────────────────────────────────────────
   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 */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section-header {
  background: transparent;
  background-color: transparent;
  border: none;
}

/* 2) Section icon badge: neutral white-alpha (was blue) */
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .dr-chip-section-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);
}
html:not([data-app-theme="dark"]):not(#__nope__) body:not(#__never__) .dr-chip-section-icon {
  background: rgba(15,23,42,0.06);
  background-color: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.78);
  border: 1px solid rgba(15,23,42,0.06);
}

/* 3) Chip pills hover: neutral, not blue */
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .dr-chip:hover,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-report-chip:hover {
  background: rgba(255,255,255,0.08);
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

/* 4) Division card "Open dashboard" CTA: neutral (was bright blue) */
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card .gdc-cta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card.gl-division-chip .gdc-cta {
  color: rgba(255,255,255,0.62);
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card:hover .gdc-cta {
  color: rgba(255,255,255,0.92);
}
html:not([data-app-theme="dark"]):not(#__nope__) body:not(#__never__) .gl-division-card .gdc-cta {
  color: rgba(15,23,42,0.62);
}

/* 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(#__never__):not(#__nope__):not(#__x__) body[data-route="/dashboards"]:not(#__never__) .gl-division-card .gdc-icon,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #main-content .gl-division-card .gdc-icon {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* 6) Section title prefix dot if any blue accent leaks */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section-title {
  color: rgba(255,255,255,0.88) !important;
}

/* end v28 */

/* ───────────────────────────────────────────────────────────────────────
   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.
   ─────────────────────────────────────────────────────────────────────── */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-row {
  background: transparent;
  background-color: transparent;
  border: none;
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .dr-overview-card-cta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) a .dr-overview-card-cta {
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .dr-overview-card:hover .dr-overview-card-cta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) a:hover .dr-overview-card-cta {
  color: rgba(255,255,255,0.92);
}
html:not([data-app-theme="dark"]):not(#__nope__) body:not(#__never__) .dr-overview-card-cta {
  color: rgba(15,23,42,0.62);
}

/* Defensive: anything inside .dr-chip-sections or .dr-overview-grid that
   accidentally inherits var(--chip-bg) blue should be transparent. */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-sections .dr-chip-row,
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-sections [class*="chip-row"],
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-sections [class*="chip-list"] {
  background: transparent;
  background-color: transparent;
}
/* end v28b */

/* ───────────────────────────────────────────────────────────────────────
   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 */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-sections,
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-section-title,
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-empty {
  background: transparent;
  background-color: transparent;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chip-empty {
  color: rgba(255,255,255,0.55) !important;
  font-style: italic !important;
  padding: 0.5rem 0;
}

/* 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. */
html[data-app-theme="dark"] body .gl-division-card,
html[data-app-theme="dark"] body .gl-division-card.gl-division-chip,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-divisions-view .gl-division-card,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #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:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #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);
}

/* All title/sub text inside any .gl-division-card → white-ish */
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:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #main-content .gl-division-card .gdc-title {
  color: rgba(255,255,255,0.92);
}
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 {
  color: rgba(255,255,255,0.62);
}

/* Icon badge inside any division card → neutral, never blue */
html[data-app-theme="dark"] body .gl-division-card .gdc-icon,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #main-content .gl-division-card .gdc-icon {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* "Open … →" CTA inside division cards → neutral */
html[data-app-theme="dark"] body .gl-division-card .gdc-cta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #main-content .gl-division-card .gdc-cta {
  color: rgba(255,255,255,0.62);
}
html[data-app-theme="dark"] body .gl-division-card:hover .gdc-cta {
  color: rgba(255,255,255,0.92);
}

/* 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(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view {
  max-width: 1100px !important;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem !important;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-header,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-header--centered {
  text-align: center;
  margin: 0 0 1rem 0;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-title {
  text-align: center;
  margin: 0 auto 0.25rem auto;
  color: rgba(255,255,255,0.95);
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .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:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-grid {
  justify-content: center !important;
  margin: 1.5rem auto 0 !important;
  width: 100%;
}
/* Breadcrumb on /divisions/<slug> and /divisions/sales/<channel> */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-breadcrumb,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-breadcrumb {
  text-align: center;
  color: rgba(255,255,255,0.55);
  margin: 0 auto 0.75rem auto;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-breadcrumb a,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-breadcrumb a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-breadcrumb a:hover,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-breadcrumb a:hover {
  color: rgba(255,255,255,1);
  text-decoration: underline;
}

/* 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%;
}

/* end v29 */

/* ───────────────────────────────────────────────────────────────────────
   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 */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ul a,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ol a,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view nav a,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view li > a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ul a:hover,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ol a:hover,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view nav a:hover,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view li > a:hover {
  color: rgba(255,255,255,1);
  text-decoration: underline;
}
/* Breadcrumb separators ("/") and current text */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ul,
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view ol {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.55);
  margin: 0 auto 0.5rem auto;
}

/* 2) Grid → auto-fit so 2 cards center, 4 cards spread, 5 cards row-5 */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view .gl-divisions-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content)) !important;
  justify-content: center !important;
  width: auto;
  max-width: 1100px !important;
  margin: 1.5rem auto 0 !important;
}

/* 3) Sub-text contrast bump */
html[data-app-theme="dark"] body .gl-division-card .gdc-sub,
html[data-app-theme="dark"] body .gl-division-card .gdc-desc {
  color: rgba(255,255,255,0.70);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* end v29b */

/* ─── v29c — Force .gdc-meta white on dark theme ─────────────────────── */
html[data-app-theme="dark"] body .gl-division-card .gdc-meta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) .gl-division-card .gdc-meta,
html:not(#__never__):not(#__nope__):not(#__x__) body:not(#__never__) #main-content .gl-division-card .gdc-meta {
  color: rgba(255,255,255,0.70);
  font-size: 0.82rem;
  line-height: 1.4;
}
/* end v29c */

/* ───────────────────────────────────────────────────────────────────────
   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. */
html:not(#__never__):not(#__nope__) body:not(#__never__) .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;
}

/* 2) Ensure .gl-divisions-view inner content centers (was margin: 0 20px) */
html:not(#__never__):not(#__nope__) body:not(#__never__) .gl-divisions-view {
  margin: 0 auto;
  text-align: center;
}

/* 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 */
html[data-app-theme="dark"] body .dr-empty,
html[data-app-theme="dark"] body .bi-empty,
html[data-app-theme="dark"] body .dr-kpi-strip-empty {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 12px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 1.5rem;
  margin: 1rem auto;
  font-size: 0.9rem;
  font-style: italic;
  max-width: 480px;
}

/* 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. */
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chart-header,
html:not(#__never__):not(#__nope__) body:not(#__never__) .dr-chart-card-header,
html:not(#__never__):not(#__nope__) body:not(#__never__) .bi-chart-header,
html:not(#__never__):not(#__nope__) body:not(#__never__) [class*="chart-header"][class*="dr-"],
html:not(#__never__):not(#__nope__) body:not(#__never__) [class*="card-header"] {
  background: transparent;
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* 8) "No data for this period" empty state inside charts */
html[data-app-theme="dark"] body .dr-chart-empty,
html[data-app-theme="dark"] body .dr-chart-card .dr-empty {
  color: rgba(255,255,255,0.45);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* 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-period-select,
html[data-app-theme="dark"] body select.bi-period-select {
  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.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
}
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);
}

/* end v30 */

/* ──────────────────────────────────────────────────────────────────
   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:not(#__x__):not(#__y__) body[data-route="/chats"] .chats-header,
html[data-app-theme="dark"]:not(#__x__) 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);
}
html[data-app-theme="dark"] .chats-header .page-title,
html[data-app-theme="dark"] .chats-header h1,
html[data-app-theme="dark"] .chats-header h2 {
  color: var(--fg-primary, #E3E1DD);
}
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, #E3E1DD);
  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: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.dash-hub-filters select,
.dash-hub-filters button {
  background: rgba(255,255,255,0.06);
  color: var(--fg-primary, #E3E1DD);
  border: 1px solid rgba(255,255,255,0.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: rgba(255,255,255,0.10);
  outline: none;
}
.dash-hub-filters .dash-hub-filter-spacer { flex: 1; }

/* 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); } }
@media (max-width: 640px)  { .dash-hub-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.dash-hub-kpi {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.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, #E3E1DD);
  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: rgba(255,255,255,0.55);
}
.dash-hub-kpi-delta.is-up    { color: #4CAF7A; }
.dash-hub-kpi-delta.is-down  { color: #E5736E; }
.dash-hub-kpi-delta.is-flat  { color: rgba(255,255,255,0.55); }

/* 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, #1F2121);
  border: 1px solid rgba(255,255,255,0.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;
}
.dash-hub-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}
.dash-hub-card-body svg {
  width: 100%;
  height: 100%;
  max-height: 240px;
}

/* Leaderboard */
.dash-hub-leaderboard {
  background: var(--bg-card, #1F2121);
  border: 1px solid rgba(255,255,255,0.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 rgba(255,255,255,0.06);
}
.dash-hub-leaderboard tbody td {
  padding: 0.5rem 0.5rem;
  color: var(--fg-primary, #E3E1DD);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
.dash-hub-leaderboard tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}

/* AI insights */
.dash-hub-insights {
  background: var(--bg-card, #1F2121);
  border: 1px solid rgba(255,255,255,0.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, #E3E1DD);
  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) */
.dash-hub-divisions {
  margin-top: 0.5rem;
}
.dash-hub-divisions-title {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary, #8A8C92);
  margin: 0 0 0.6rem;
}

/* end v31 */

/* ──────────────────────────────────────────────────────────────────────
   v34 — Messages view (iMessage-style Speed-to-Lead)
   Routes: /messages, /messages/<phone_e164>
   Mirrors macOS Messages: top status bar, left thread list, right bubbles.
   ────────────────────────────────────────────────────────────────────── */

body.route-messages .main-content {
  padding: 0;
  overflow: hidden;
}

.msg-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg, #F5F5F7);
  overflow: hidden;
}
body.route-messages #main-content,
body.route-messages .main-content {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  overflow: hidden !important;
  padding: 0;
}
/* v38c: lock body + html so hover popups (history-hover-card etc.) cannot inflate page height */
html.route-messages-html,
body.route-messages {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden !important;
}
html[data-app-theme="dark"] .msg-view { background: #191A1A; }

/* ── Top status bar ─────────────────────────────────────────────── */
.msg-status-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.12);
  background: rgba(255, 255, 255, 0.92);
  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: #1d1d1f; }
html[data-app-theme="dark"] .msg-stat-val { color: #f5f5f7; }
.msg-stat-bad .msg-stat-val { color: #C62828; }
.msg-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.msg-pill-on  { background: rgba(46, 125, 50, 0.14); color: #2E7D32; }
.msg-pill-off { background: rgba(198, 40, 40, 0.14); color: #C62828; }
.msg-pill-optout {
  background: rgba(198, 40, 40, 0.14);
  color: #C62828;
  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: #1976D2;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.msg-stat-skeleton {
  width: 120px; height: 14px;
  background: rgba(60, 64, 67, 0.10);
  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); }

/* ── Split panes ────────────────────────────────────────────────── */
.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: rgba(255, 255, 255, 0.92);
  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: #FFFFFF;
}
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: #1d1d1f;
  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: #1d1d1f;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.msg-search:focus {
  border-color: #1976D2;
  background: #fff;
}
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-tabs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.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: #1d1d1f; }
.msg-filter-tab.is-active {
  background: rgba(25, 118, 210, 0.12);
  color: #1976D2;
}
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;
}

/* ── Thread list rows ───────────────────────────────────────────── */
/* Speed Reply queue (v40.11-speed-to-lead-toggle) -- leads with no
   outbound message yet, shown above the regular thread list with a red
   badge + one-tap Send. Nexus palette: red badge is #DC2626 exactly per
   spec, Send button is Nexus teal #4F98A3 (no purple, no blue #2196F3)
   to match the toggle-on color used elsewhere in this change. */
.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-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-speed-reply-row1 { display: flex; align-items: center; gap: 8px; }
.msg-speed-reply-badge {
  background: #DC2626;
  color: #FFF;
  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: rgba(60, 64, 67, 0.55); }
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: #1d1d1f;
  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: #FFF;
  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: rgba(25, 118, 210, 0.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, #64B5F6, #1976D2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.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: #1d1d1f;
  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: rgba(60, 64, 67, 0.55);
  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: #1976D2;
  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: rgba(60, 64, 67, 0.10);
  color: #5f6368;
}
.msg-stage-cold     { background: rgba(96, 125, 139, 0.18); color: #455A64; }
.msg-stage-engaged  { background: rgba(46, 125, 50, 0.16);  color: #2E7D32; }
.msg-stage-booking  { background: rgba(245, 124, 0, 0.16);  color: #E65100; }
.msg-stage-booked   { background: rgba(46, 125, 50, 0.20);  color: #1B5E20; }
.msg-stage-handoff  { background: rgba(25, 118, 210, 0.16); color: #1976D2; }
.msg-stage-opted-out{ background: rgba(198, 40, 40, 0.16);  color: #C62828; }
.msg-stage-closed   { background: rgba(96, 125, 139, 0.16); color: #455A64; }
html[data-app-theme="dark"] .msg-stage-chip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
html[data-app-theme="dark"] .msg-stage-cold     { background: rgba(96, 125, 139, 0.28); color: #B0BEC5; }
html[data-app-theme="dark"] .msg-stage-engaged  { background: rgba(46, 125, 50, 0.28);  color: #A5D6A7; }
html[data-app-theme="dark"] .msg-stage-booking  { background: rgba(245, 124, 0, 0.28);  color: #FFCC80; }
html[data-app-theme="dark"] .msg-stage-booked   { background: rgba(46, 125, 50, 0.34);  color: #A5D6A7; }
html[data-app-theme="dark"] .msg-stage-handoff  { background: rgba(25, 118, 210, 0.28); color: #82B1FF; }
html[data-app-theme="dark"] .msg-stage-opted-out{ background: rgba(198, 40, 40, 0.28);  color: #EF9A9A; }

/* ── Right pane (thread) header ─────────────────────────────────── */
.msg-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.10);
  background: rgba(255, 255, 255, 0.92);
  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: #1976D2;
  cursor: pointer;
}
.msg-thread-back:hover { background: rgba(25, 118, 210, 0.10); }
.msg-thread-header-main { flex: 1 1 auto; min-width: 0; }
.msg-thread-name-big {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
}
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: #1976D2;
  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); }

/* ── Bubble stream ──────────────────────────────────────────────── */
.msg-bubble-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
}
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: rgba(60, 64, 67, 0.55);
  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: #fff;
  border-bottom-right-radius: 5px;
}
.msg-bubble-in .msg-bubble {
  background: #E9E9EB;
  color: #1d1d1f;
  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: #FFFFFF;
  color: #C62828;
  border: 1.5px solid #C62828;
}
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: rgba(60, 64, 67, 0.55);
  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: #C62828; 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: #1976D2;
  animation: msg-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes msg-spin { to { transform: rotate(360deg); } }

/* ── Composer ───────────────────────────────────────────────────── */
.msg-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(60, 64, 67, 0.10);
  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: #1d1d1f;
  background: #FFFFFF;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.35;
  min-height: 36px;
  max-height: 140px;
}
.msg-composer-input:focus { border-color: #1976D2; }
.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: #1976D2;
  color: #fff;
  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;
}

/* ── Empty states ───────────────────────────────────────────────── */
.msg-empty {
  padding: 18px 16px;
  font-size: 13px;
  color: rgba(60, 64, 67, 0.55);
  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: #1d1d1f;
}
html[data-app-theme="dark"] .msg-empty-title { color: #f5f5f7; }
.msg-empty-sub {
  font-size: 13px;
  color: rgba(60, 64, 67, 0.55);
  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 ──────────── */
@media (max-width: 768px) {
  .msg-split { flex-direction: column; }
  .msg-left-pane {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(60, 64, 67, 0.10);
  }
  .msg-right-pane { display: none; }
  body.msg-mobile-thread .msg-right-pane { display: flex; }
  .msg-thread-back { display: inline-flex; }
  .msg-status-bar { gap: 12px; padding: 10px 12px; }
  .msg-stat-hours { display: none; }
  .msg-bubble-row { max-width: 82%; }
}
/* END v34 Messages view */

/* ─────────────────────────────────────────────────────────────────────
   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. */
.msg-split.msg-split-3col {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 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-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.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: #1d1d1f;
  border-color: rgba(60, 64, 67, 0.22);
}
.msg-range-chip.is-active {
  background: #1976D2;
  border-color: #1976D2;
  color: #fff;
}
.msg-range-chip.msg-range-custom svg { margin-right: 2px; }
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 rgba(60, 64, 67, 0.10);
  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: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: #1d1d1f;
  font-family: inherit;
  outline: none;
}
.msg-range-field input[type="date"]:focus { border-color: #1976D2; }
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: #1976D2;
  color: #fff;
  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 */
.msg-dash-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-left: 1px solid rgba(60, 64, 67, 0.10);
  background: rgba(255, 255, 255, 0.92);
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
}
html[data-app-theme="dark"] .msg-dash-pane {
  background: #1F2121;
  border-left-color: rgba(255, 255, 255, 0.08);
}
.msg-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-dash-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.65);
}
html[data-app-theme="dark"] .msg-dash-title { color: rgba(255, 255, 255, 0.55); }
.msg-dash-refresh {
  border: 1px solid rgba(60, 64, 67, 0.14);
  background: transparent;
  color: rgba(60, 64, 67, 0.65);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-dash-refresh:hover {
  background: rgba(60, 64, 67, 0.06);
  color: #1d1d1f;
}
html[data-app-theme="dark"] .msg-dash-refresh {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}
html[data-app-theme="dark"] .msg-dash-refresh:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}
.msg-dash-skeleton {
  padding: 14px;
  font-size: 12px;
  color: rgba(60, 64, 67, 0.55);
}

/* 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;
}
.msg-tile-bad {
  border-color: rgba(198, 40, 40, 0.40);
  background: rgba(198, 40, 40, 0.06);
}
html[data-app-theme="dark"] .msg-tile {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-app-theme="dark"] .msg-tile-bad {
  background: rgba(239, 83, 80, 0.10);
  border-color: rgba(239, 83, 80, 0.50);
}
.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: #1d1d1f;
  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: rgba(60, 64, 67, 0.55);
  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: rgba(60, 64, 67, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.msg-tile-bar > span {
  display: block;
  height: 100%;
  background: #1976D2;
  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-bad .msg-tile-val { color: #C62828; }
html[data-app-theme="dark"] .msg-tile-bad .msg-tile-val { color: #EF5350; }
.msg-tile-foot {
  font-size: 10.5px;
  color: rgba(60, 64, 67, 0.55);
  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: rgba(60, 64, 67, 0.55);
  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: rgba(60, 64, 67, 0.55);
}
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 */
.msg-builder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px solid rgba(25, 118, 210, 0.30);
  background: rgba(25, 118, 210, 0.08);
  color: #1976D2;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.msg-builder-btn:hover {
  background: rgba(25, 118, 210, 0.14);
  border-color: rgba(25, 118, 210, 0.50);
}
html[data-app-theme="dark"] .msg-builder-btn {
  color: #82B1FF;
  background: rgba(25, 118, 210, 0.16);
  border-color: rgba(25, 118, 210, 0.40);
}
html[data-app-theme="dark"] .msg-builder-btn:hover {
  background: rgba(25, 118, 210, 0.24);
  border-color: rgba(25, 118, 210, 0.60);
}

/* Builder modal overlay */
.msg-builder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 17, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
}
.msg-builder-overlay[hidden] { display: none; }
.msg-builder-modal {
  background: #FFFFFF;
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
html[data-app-theme="dark"] .msg-builder-modal {
  background: #1F2121;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.msg-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(60, 64, 67, 0.10);
}
html[data-app-theme="dark"] .msg-builder-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.msg-builder-title {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: 0.01em;
}
html[data-app-theme="dark"] .msg-builder-title { color: #f5f5f7; }
.msg-builder-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: rgba(60, 64, 67, 0.55);
  cursor: pointer;
  padding: 0 6px;
  border-radius: 6px;
}
.msg-builder-close:hover {
  background: rgba(60, 64, 67, 0.08);
  color: #1d1d1f;
}
html[data-app-theme="dark"] .msg-builder-close { color: rgba(255, 255, 255, 0.55); }
html[data-app-theme="dark"] .msg-builder-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}
.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: rgba(60, 64, 67, 0.55);
}
.msg-builder-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-builder-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.65);
}
html[data-app-theme="dark"] .msg-builder-field-label { color: rgba(255, 255, 255, 0.55); }
.msg-builder-input, .msg-builder-textarea {
  width: 100%;
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: #FFFFFF;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #1d1d1f;
  font-family: inherit;
  outline: none;
  line-height: 1.4;
}
.msg-builder-input:focus, .msg-builder-textarea:focus { border-color: #1976D2; }
.msg-builder-textarea {
  resize: vertical;
  min-height: 100px;
}
html[data-app-theme="dark"] .msg-builder-input,
html[data-app-theme="dark"] .msg-builder-textarea {
  background: #2A2C2C;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
}
.msg-builder-counter {
  text-align: right;
  font-size: 11px;
  color: rgba(60, 64, 67, 0.55);
}
html[data-app-theme="dark"] .msg-builder-counter { color: rgba(255, 255, 255, 0.45); }
.msg-builder-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-builder-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.65);
}
html[data-app-theme="dark"] .msg-builder-preview-label { color: rgba(255, 255, 255, 0.55); }
.msg-builder-preview-bubble {
  align-self: flex-start;
  max-width: 88%;
  background: #007AFF;
  color: #fff;
  padding: 9px 13px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-builder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.msg-builder-cancel {
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: transparent;
  color: rgba(60, 64, 67, 0.85);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.msg-builder-save {
  border: none;
  background: #1976D2;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.msg-builder-save:hover:not(:disabled) { background: #1565C0; }
.msg-builder-save:disabled {
  background: rgba(60, 64, 67, 0.20);
  cursor: not-allowed;
}

/* Mobile: collapse to 1-col on small screens. */
@media (max-width: 1100px) {
  .msg-split.msg-split-2col,
  .msg-split.msg-split-3col {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .msg-split.msg-split-2col,
  .msg-split.msg-split-3col {
    grid-template-columns: 1fr;
  }
  body.msg-mobile-thread .msg-left-pane { display: none; }
  body.msg-mobile-thread .msg-thread-pane { display: flex; }
  .msg-builder-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   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: #1d1d1f;
  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: rgba(25, 118, 210, 0.10);
  border-color: rgba(25, 118, 210, 0.40);
  color: #1976D2;
}
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, #F5F5F7);
  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: rgba(255, 255, 255, 0.92);
  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: #1976D2;
  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: rgba(25, 118, 210, 0.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 {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
}
html[data-app-theme="dark"] .msg-page-title { color: #f5f5f7; }
.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: #1d1d1f;
}
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: rgba(255, 255, 255, 0.92);
  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; }
.msg-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.msg-builder-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.msg-builder-textarea-tall { min-height: 220px; }
.msg-builder-preview-stage {
  background: rgba(60, 64, 67, 0.04);
  border: 1px solid rgba(60, 64, 67, 0.08);
  border-radius: 14px;
  padding: 20px;
  min-height: 220px;
  display: flex;
  align-items: flex-start;
}
html[data-app-theme="dark"] .msg-builder-preview-stage {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.msg-builder-preview-stage .msg-builder-preview-bubble {
  max-width: 100%;
}
.msg-builder-cancel {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: transparent;
  color: rgba(60, 64, 67, 0.85);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.msg-builder-cancel:hover { background: rgba(60, 64, 67, 0.06); }
html[data-app-theme="dark"] .msg-builder-cancel {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.80);
}
html[data-app-theme="dark"] .msg-builder-cancel:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 880px) {
  .msg-builder-grid { grid-template-columns: 1fr; }
}
/* END v38c additions */

/* ─────────────────────────────────────────────────────────────────────────
   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
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Ensure has-mobile-topnav body class is unnecessary — apply offsets when
     mobile-topnav is visible (it always is on this breakpoint). */
  body.route-messages #main-content,
  body.route-messages .main-content {
    height: auto;
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)) !important;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-top: 0;
  }
  /* Re-allow body scroll on /messages sub-routes so dashboard + builder pages
     can scroll vertically. Composer routes keep their own internal lock. */
  body.route-messages {
    height: auto;
    max-height: none;
    overflow-y: auto;
  }

  /* ── Messages list view (the default /messages route) ────────────────── */
  body.route-messages .msg-view {
    height: auto;
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
    overflow: visible;
    padding: calc(60px + env(safe-area-inset-top, 0px)) 0 0 0;
    display: flex;
    flex-direction: column;
    background: #191A1A;
  }
  html[data-app-theme="light"] body.route-messages .msg-view { background: #F5F5F7; }

  /* Status bar → compact horizontally-scrolling KPI strip + actions */
  body.route-messages .msg-status-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    scrollbar-width: none;
  }
  body.route-messages .msg-status-bar::-webkit-scrollbar { display: none; }
  body.route-messages .msg-stat {
    flex: 0 0 auto !important;
    min-width: 96px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  body.route-messages .msg-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
  }
  body.route-messages .msg-stat-val {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
  }
  /* Quiet hours is too long; hide on mobile (still on dashboard page) */
  body.route-messages .msg-stat-hours { display: none; }
  /* Cap progress bar shorter on mobile */
  body.route-messages .msg-cap-bar { width: 64px; }
  /* Actions: keep both buttons visible at end of strip */
  body.route-messages .msg-stat-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-left: 4px;
    align-items: center;
  }
  body.route-messages .msg-stat-btn {
    height: 40px !important;
    min-width: 44px !important;
    padding: 0 12px;
    font-size: 13px !important;
    white-space: nowrap;
    border-radius: 10px !important;
  }

  /* Split layout: collapse the 2-col grid into a stack; right pane hidden by default */
  body.route-messages .msg-split,
  body.route-messages .msg-split-2col {
    display: block;
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.route-messages .msg-left-pane {
    width: 100%;
    border-right: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
  }
  body.route-messages .msg-right-pane,
  body.route-messages .msg-thread-pane {
    display: none;
  }
  /* When a thread is open on mobile, the body gets `msg-mobile-thread`. */
  body.msg-mobile-thread.route-messages .msg-left-pane { display: none; }
  body.msg-mobile-thread.route-messages .msg-thread-pane,
  body.msg-mobile-thread.route-messages .msg-right-pane {
    display: flex;
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    bottom: 0;
    z-index: 60;
    background: #191A1A;
    flex-direction: column;
  }
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-thread-pane,
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-right-pane {
    background: #FFFFFF;
  }
  /* Hide the status bar when viewing a thread to maximize message real estate */
  body.msg-mobile-thread.route-messages .msg-status-bar { display: none; }

  /* Left pane header: more compact, full bleed */
  body.route-messages .msg-left-header {
    padding: 12px 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
  }
  body.route-messages .msg-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  body.route-messages .msg-search-wrap { margin-bottom: 10px; }
  body.route-messages .msg-search {
    height: 44px;
    font-size: 15px;
    padding-left: 14px;
    border-radius: 12px;
  }
  /* Filter chip strips: horizontal scroll, no wrap */
  body.route-messages .msg-range-row,
  body.route-messages .msg-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  body.route-messages .msg-range-row::-webkit-scrollbar,
  body.route-messages .msg-filter-tabs::-webkit-scrollbar { display: none; }
  body.route-messages .msg-range-chip,
  body.route-messages .msg-filter-tab {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 17px;
    white-space: nowrap;
  }

  /* Threads list: scroll inside its own container */
  body.route-messages .msg-threads-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  }
  body.route-messages .msg-thread-row {
    padding: 12px 14px;
    gap: 12px;
    min-height: 64px;
  }
  body.route-messages .msg-thread-avatar { width: 40px; height: 40px; font-size: 13px; }

  /* Thread pane (right side, full-screen on mobile) */
  body.msg-mobile-thread.route-messages .msg-thread-header {
    padding: 10px 14px;
    min-height: 56px;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
  }
  /* Ensure the existing .msg-thread-back is large + tappable on mobile */
  body.msg-mobile-thread.route-messages .msg-thread-back {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  body.msg-mobile-thread.route-messages .msg-thread-back:active {
    background: rgba(33, 150, 243, 0.18);
  }
  /* Thread name/meta tighter so header fits on phones */
  body.msg-mobile-thread.route-messages .msg-thread-name-big { font-size: 15px; }
  body.msg-mobile-thread.route-messages .msg-thread-meta { font-size: 11.5px; }
  /* FieldRoutes / Pin links → icon-only style on mobile to save space */
  body.msg-mobile-thread.route-messages .msg-thread-header-actions {
    flex-shrink: 0;
  }
  body.msg-mobile-thread.route-messages .msg-thread-link {
    padding: 6px 8px;
    font-size: 11px;
  }
  body.msg-mobile-thread.route-messages .msg-msgs-scroll,
  body.msg-mobile-thread.route-messages .msg-thread-msgs,
  body.msg-mobile-thread.route-messages .msg-bubble-stream {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  body.msg-mobile-thread.route-messages .msg-composer,
  body.msg-mobile-thread.route-messages .msg-thread-composer {
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(25, 26, 26, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-composer,
  html[data-app-theme="light"] body.msg-mobile-thread.route-messages .msg-thread-composer {
    background: rgba(255,255,255,0.96);
  }
  body.msg-mobile-thread.route-messages .msg-composer textarea,
  body.msg-mobile-thread.route-messages .msg-thread-composer textarea {
    min-height: 44px;
    max-height: 140px;
    font-size: 16px; /* prevents iOS zoom */
  }

  /* ── Dashboard page (#/messages/dashboard) on mobile ─────────────────── */
  body.route-messages .msg-page-view {
    padding-top: calc(60px + env(safe-area-inset-top, 0px));
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    height: auto;
  }
  body.route-messages .msg-page-head {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 14px;
    align-items: center;
  }
  body.route-messages .msg-page-back {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  body.route-messages .msg-page-title {
    font-size: 17px;
    flex: 1 1 100%;
    order: 3;
    margin-top: 4px;
  }
  /* Stack KPI tiles 2-col on small phones, 1-col below 360 */
  body.route-messages .msg-tile-grid-wide,
  body.route-messages .msg-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.route-messages .msg-tile {
    padding: 14px;
    min-height: 84px;
  }
  body.route-messages .msg-tile-label { font-size: 10.5px; }
  body.route-messages .msg-tile-value { font-size: 22px; }
  /* Sparkline section full-bleed */
  body.route-messages .msg-dash-section-wide,
  body.route-messages .msg-spark-wrap-wide {
    padding: 12px;
    margin-top: 12px;
  }
  body.route-messages .msg-spark-wrap-wide svg { width: 100%; height: auto; }

  /* ── Builder page (#/messages/builder) on mobile ─────────────────────── */
  body.route-messages .msg-builder-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body.route-messages .msg-builder-col { width: 100%; }
  body.route-messages .msg-builder-textarea-tall {
    min-height: 200px;
    font-size: 16px;
  }
  body.route-messages .msg-builder-preview-stage {
    min-height: 140px;
    padding: 14px;
  }
  /* Save / Cancel: sticky CTA bar at bottom */
  body.route-messages .msg-builder-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(25,26,26,0.96);
    backdrop-filter: blur(10px);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 8px -14px 0 -14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    gap: 10px;
    justify-content: stretch;
    padding-left: 14px;
    padding-right: 14px;
  }
  body.route-messages .msg-builder-actions .msg-builder-cancel,
  body.route-messages .msg-builder-actions .msg-builder-save,
  body.route-messages .msg-builder-actions button,
  body.route-messages .msg-builder-actions a {
    flex: 1 1 50%;
    height: 48px;
    font-size: 15px;
    justify-content: center;
  }
  html[data-app-theme="light"] body.route-messages .msg-builder-actions {
    background: rgba(255,255,255,0.96);
  }
}

/* iPhone SE / 360px width — drop KPI tiles to 1-col */
@media (max-width: 380px) {
  body.route-messages .msg-tile-grid-wide,
  body.route-messages .msg-tile-grid { grid-template-columns: 1fr !important; }
  body.route-messages .msg-stat { min-width: 88px !important; }
  body.route-messages .msg-stat-btn span { display: none; }
  body.route-messages .msg-stat-btn { padding: 0 10px !important; }
}
/* END v39 mobile layer */

/* ════════════════════════════════════════════════════════════════════════
   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;
}

/* END v40 layer */

/* ════════════════════════════════════════════════════════════════════════
   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-label,
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,
html body .ai-view .home-dash-grid .home-dash-card .home-dash-delta {
  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. */
html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full {
  height: 132px !important;
  min-height: 132px !important;
  margin-top: 0.25rem !important;
  flex: 1 1 auto !important;
  width: 100%;
  overflow: visible;
}
html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full .kpi-week-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* END v40.1 layer */

/* ════════════════════════════════════════════════════════════════════════
   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;
}

/* END v40.2 layer */

/* ═════════════════════════════════════════════════════════════════════════
   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.
   ═════════════════════════════════════════════════════════════════════════ */
html body.route-ask .ai-view .home-dash-grid .home-dash-card {
  min-height: 240px;
  padding: 0.85rem 0.95rem;
}
/* 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. */
html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full {
  height: auto;
  min-height: 130px !important;
  flex: 1 1 auto !important;
  margin-top: 0.55rem !important;
  display: flex;
  align-items: stretch !important;
}
html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full .kpi-week-svg {
  width: 100%;
  height: 100%;
  max-height: 140px !important;
  display: block;
}
/* END v40.3 layer */

/* ═════════════════════════════════════════════════════════════════════════
   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: 70px !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;
}

/* END v40.4c layer */

/* ═════════════════════════════════════════════════════════════════════════
   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;
  }
}

/* ───── BARS + SPARKLINE: studio scaling fix ─────
   On wide studio cards (>= 1680px viewport), the SVG charts letterbox
   themselves because viewBox aspect (~2.3:1) is narrower than card aspect
   (~4:1). Instead of distorting the chart, give the chart container
   slightly more vertical room so the SVG scales UP rather than DOWN.
   On studio the card has more vertical headroom too. */
@media (min-width: 1680px) {
  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.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
  /* Reserve enough top padding for: safe-area + topnav height (~64px
     including padding) + visual breathing room. */
  html body .dash-hub {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    gap: 0.95rem;
    max-width: 100vw;
  }
  /* Header block — give the "TOTAL OPERATIONS" / "DASHBOARDS" / sub text
     proper line-height + lighter eyebrow size. */
  html body .dash-hub .dash-hub-header { gap: 0.3rem; }
  html body .dash-hub .dash-hub-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }
  html body .dash-hub .dash-hub-title {
    font-size: 1.7rem;
    line-height: 1.1;
  }
  html body .dash-hub .dash-hub-sub {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  /* Filters row — full width, wrap nicely on phones. */
  html body .dash-hub .dash-hub-filters {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.55rem;
  }
  html body .dash-hub .dash-hub-filters select,
  html body .dash-hub .dash-hub-filters button {
    font-size: 0.78rem;
    padding: 0.4rem 0.65rem;
  }

  /* KPI strip: one column on very narrow phones for stronger hierarchy;
     two columns from 480px+. */
  html body .dash-hub .dash-hub-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  html body .dash-hub .dash-hub-kpi {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    min-height: 78px;
    gap: 0.2rem;
  }
  html body .dash-hub .dash-hub-kpi-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.10em;
    line-height: 1.25;
  }
  html body .dash-hub .dash-hub-kpi-value {
    font-size: 1.25rem;
    color: rgba(235, 240, 250, 0.94);
  }
  /* Dim placeholder "--" values so empty state doesn't visually shout. */
  html body .dash-hub .dash-hub-kpi-value:where(:empty),
  html body .dash-hub .dash-hub-kpi-value:where([data-placeholder="true"]) {
    color: rgba(235, 240, 250, 0.30);
  }
  /* Same treatment for the literal "--" placeholder text. */
  html body .dash-hub .dash-hub-kpi .dash-hub-kpi-value,
  html body .dash-hub .dash-hub-kpi .dash-hub-kpi-delta {
    transition: color 200ms ease;
  }

  /* Chart grid stacked, taller min-height on phones so bars render fully. */
  html body .dash-hub .dash-hub-chart-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  html body .dash-hub .dash-hub-card {
    min-height: 240px;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }
  html body .dash-hub .dash-hub-card-title {
    font-size: 0.62rem;
    letter-spacing: 0.10em;
  }

  /* Leaderboard + insights blocks: matched radius + tighter padding. */
  html body .dash-hub .dash-hub-leaderboard,
  html body .dash-hub .dash-hub-insights {
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }
}

/* ───── 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,
html body .dash-hub #dash-hub-revenue-chart svg .bar,
html body .dash-hub #dash-hub-revenue-chart .dh-bar {
  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. */
@media (max-width: 820px) {
  /* Kill the previous tint sheet entirely on every route. */
  html body.route-ask::before,
  html body.route-chats::before,
  html body.route-dashboards::before,
  html body.route-reports::before,
  html body.route-divisions::before,
  html body.route-automations::before,
  html body.route-settings::before,
  html body.route-data-sources::before,
  html body::before {
    content: none;
    display: none;
    background: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }

  /* Perplexity-style top fade via a fixed overlay using a NEW dedicated
     element appended at runtime (#perplexity-fade). We avoid body::after
     because earlier route-specific ::after rules (e.g. body.route-ask::after
     at line 13341 sets a flat 2px bottom strip) would conflict. */
  #perplexity-fade {
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    /* v40.5em FIX G (Branson: "bad band at the top of all the tabs"): the
       backdrop-filter:blur below frosted whatever scrolled under this fixed
       overlay and left a hard horizontal seam at its bottom edge on EVERY
       mobile tab — the "bad band". This was already fixed for /hood only
       (override further down); v40.5em promotes that proven treatment to the
       base rule so all tabs get it: drop the blur entirely, cap the band at
       safe-area + 60px (was 92px), and use the lighter gradient (opaque
       status-bar band, then 40% just under the inset fading to fully clear by
       +30px). No frost, no seam. The /hood override below is now redundant but
       harmless. */
    height: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    z-index: 105 !important;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(25, 26, 26, 1.00) 0%,
      rgba(25, 26, 26, 1.00) env(safe-area-inset-top, 0px),
      rgba(25, 26, 26, 0.40) calc(env(safe-area-inset-top, 0px) + 1px),
      rgba(25, 26, 26, 0.00) calc(env(safe-area-inset-top, 0px) + 30px),
      rgba(25, 26, 26, 0.00) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    display: block;
  }
  body.is-auth-page #perplexity-fade { display: none; }
  /* v40.5dt Bug 1: ROOT CAUSE of the "hard line" on /hood. #perplexity-fade
     sits over the map; its alpha gradient is soft, but backdrop-filter:blur
     frosts the map ABOVE the element and leaves it sharp BELOW the element's
     bottom edge — that boundary reads as a hard horizontal line. On /hood the
     map is directly underneath, so drop the blur: only the soft colour
     gradient remains and the top fades gradually with no seam. /ask keeps the
     blur (scrolling text under it benefits from the frost). */
  body.route-hood #perplexity-fade {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    /* v40.5ei FIX B: Branson - the top fade was "really horrible on mobile".
       The shared fade dropped a ~92px dark veil (1.0 -> 0.85 -> 0.55 -> 0.25 ->
       0) over the full-screen aerial map. On /hood, shorten it to a 60px band
       and lighten it: keep only a thin opaque status-bar band (safe-area, so
       the clock/battery stay legible), then 40% just under the inset fading to
       fully transparent by ~50% of the band, so the map reads clean at rest.
       Applied at the <=820px range where #perplexity-fade actually renders (it
       is display:none from 821px up) and scoped to /hood so no other route
       changes. */
    height: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    background: linear-gradient(
      to bottom,
      rgba(25, 26, 26, 1.00) 0%,
      rgba(25, 26, 26, 1.00) env(safe-area-inset-top, 0px),
      rgba(25, 26, 26, 0.40) calc(env(safe-area-inset-top, 0px) + 1px),
      rgba(25, 26, 26, 0.00) calc(env(safe-area-inset-top, 0px) + 30px),
      rgba(25, 26, 26, 0.00) 100%
    ) !important;
  }
}
@media (min-width: 821px) {
  #perplexity-fade { display: none; }
}

/* 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; }

/* v40.5o: Content top padding. With viewport-anchored mask, content
   that scrolls under the top 78px will fade gradually. We still need
   the initial first-row to start somewhere below the chip row so it
   isn't permanently faded out at scrollTop=0. ~78px puts the first
   element right at the edge of fully-opaque — it shows clean at
   rest, fades softly as user scrolls up. */
@media (max-width: 820px) {
  body.route-ask .ai-view .ai-hero,
  body.route-ask .ai-view .ai-messages { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-chats .chats-view,
  body.route-chats .chats-list,
  body.route-chats .chats-main { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-dashboards .dash-hub,
  body.route-dashboards .dashboards-view { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-reports .reports-view,
  body.route-reports .reports-hub { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-divisions .divisions-view,
  body.route-divisions .divisions-hub { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-automations .automations-view,
  body.route-automations .automations-hub { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-data-sources .data-sources-view,
  body.route-data-sources .ds-hub { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
  body.route-settings .settings-view { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
}

/* v40.5o: Composer must NOT get masked (it's position:fixed at bottom,
   so it's outside the scroll container, but be defensive). */
@media (max-width: 820px) {
  html body .ai-composer-wrap,
  html body nav.mobile-topnav {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* END v40.5 layer */

/* ═══════════════════════════════════════════════════════════════════
   v40.5i — TOPNAV CHIPS: TRUE CIRCLES (mobile)
   Earlier layers conflicted: v1940 set flex-basis:44px, v24b set
   width/height:36px. Result rendered 44×36 (oval, not circle).
   Lock both chips to 40×40, square flex-basis, ring/img/svg fill 100%.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 40px !important;
    border-radius: 50%;
    padding: 0;
    overflow: hidden !important;
  }
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-ring,
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip .mt-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
}
/* END v40.5i */

/* ═══════════════════════════════════════════════════════════════════
   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:not(#__never__) body.is-auth-page:not(#__never__) nav.mobile-topnav,
html:not(#__never__) body.is-auth-page:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940,
html:not(#__never__) body.is-auth-page:not(#__never__) #mobile-topnav {
  display: none;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
html body.is-auth-page::before,
html body.is-auth-page.route-login::before,
html body.is-auth-page.route-signup::before,
html body.is-auth-page.route-reset::before,
html body.is-auth-page.route-confirm::before {
  content: none;
  display: none;
  background: transparent;
}
/* END v40.5j */

/* ============================================================
   v40.5q — Thread-state chip composer + bottom fade mask
   + iOS Safari composer position lock + thinking UI redesign
   ============================================================ */

/* ---------- (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. */
@media (max-width: 820px) {
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    /* Prefer visual viewport when available. Fallback to bottom:0. */
    top: auto;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    /* Belt and suspenders: nudge with --vv-h when it deviates from innerHeight.
       The transform stays at 0 in modern browsers, kicks in only on iOS Safari. */
    will-change: transform !important;
  }
}

/* ---------- (B) Thread-state: full composer collapses into pill chip ----------
   When body.ai-has-messages, the rich composer hides its toolbar and renders
   as a single-line pill: "Add details or clarifications..." with a send/stop
   icon inside. A separate circular pencil-plus new-chat button sits to the
   right (rendered in JS). Reference: IMG_0818 (Perplexity in-thread). */
@media (max-width: 820px) {
  /* The composer wrap holds the chip composer + new-chat button side by side. */
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) 12px !important;
    background: transparent;
  }
  /* Pill chip itself — replaces the full rich-composer card */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer {
    flex: 1 1 auto !important;
    min-width: 0;
    background: #1c1c1e !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 24px !important;
    padding: 6px 8px 6px 18px !important;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35) !important;
  }
  /* Textarea collapses to single row, transparent bg, no internal padding */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-textarea {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 0;
    margin: 0;
    min-height: 24px;
    max-height: 96px;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    resize: none;
  }
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-textarea::placeholder {
    color: rgba(255,255,255,0.42);
  }
  /* Hide the full toolbar (+, web, data, model picker, mic) */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-toolbar {
    display: contents; /* dissolve container so .rc-right can flex inline */
  }
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-toolbar .rc-left,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-toolbar .rc-model,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-toolbar .rc-mic {
    display: none;
  }
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-toolbar .rc-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: 4px;
  }
  /* Send button — perfect circle white inside the pill (Claude-style up arrow) */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-send {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #000;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    padding: 0;
  }
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-send svg,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-send svg *,
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-send svg path {
    width: 14px;
    height: 14px;
    stroke: #000000;
    color: #000000;
    fill: none;
  }
  /* Hide attachments strip in chip mode */
  html body.route-ask.ai-has-messages .ai-composer-wrap .rich-composer .rc-attachments:empty {
    display: none;
  }
}

/* ---------- (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 */
@media (max-width: 820px) {
  body:not(.ai-has-messages) .ai-new-chat-btn,
  body.is-auth-page .ai-new-chat-btn { display: none; }
}
@media (min-width: 821px) {
}

/* ---------- (D) Bottom fade mask (mirror of top #perplexity-fade) ----------
   Content fades INTO the area ABOVE the chip composer. The fade must NOT
   overlap the composer itself — it sits in the gap between page content
   and the composer chip. So bottom is offset by the composer height. */
@media (max-width: 820px) {
  /* v40.5z — Minimal Claude-style fade.
     No mask, no overlay, no glow band. Content scrolls under solid topnav
     and solid composer. Both have a tiny soft edge to feel polished but no
     transition zone where antialiasing creates a visible glow. */
  #perplexity-fade-bottom { display: none; }

  body.route-ask.ai-has-messages .ai-view .ai-messages,
  body.route-ask.ai-has-messages .ai-view {
    padding-top: 8px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Topnav: solid canvas. No glow. Content disappears cleanly under it. */
  body.route-ask.ai-has-messages .ai-topnav,
  body.route-ask.ai-has-messages .topnav,
  body.route-ask.ai-has-messages .topbar,
  body.route-ask.ai-has-messages header.topbar {
    background: #191A1A;
    background-color: #191A1A;
    border-bottom: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  /* v40.5aa: Tighter Claude-style gap between user message and thinking. */
  body.ai-has-messages .ai-view .ai-messages {
    gap: 10px !important;
  }
  body.ai-has-messages .ai-view .ai-messages .msg-bubble.msg-user {
    margin-bottom: 0;
  }
  body.ai-has-messages .ai-view .ai-messages .msg-bubble.msg-assistant {
    margin-top: 4px;
  }
  /* Claude thinking block flush to top of assistant bubble */
  body.ai-has-messages .msg-bubble.msg-assistant .cl-block {
    margin-top: 0;
    margin-bottom: 6px;
  }

  /* Composer wrap: solid canvas same as page. Content disappears under it. */
  body.route-ask.ai-has-messages .ai-composer-wrap {
    background: #191A1A !important;
    background-color: #191A1A !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
  }
}
@media (min-width: 821px) {
  #perplexity-fade-bottom { display: none; }
}

/* ---------- (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). */
html body .ai-thinking .thinking-step .tk-dot {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 4px;
  flex: 0 0 16px;
  background: rgba(99, 179, 237, 0.18);
  box-shadow: none;
  position: relative;
}
html body .ai-thinking .thinking-step.is-active .tk-dot {
  background: rgba(99, 179, 237, 0.32);
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.12);
  animation: gl-thinking-pulse 1.4s ease-out infinite;
}
html body .ai-thinking .thinking-step.is-done .tk-dot {
  background: rgba(255,255,255,0.10);
}
/* Step body fills, label clean */
html body .ai-thinking .thinking-step .tk-body {
  flex: 1 1 auto;
  min-width: 0;
}
html body .ai-thinking .thinking-step .tk-label {
  color: inherit;
  font-size: 13.5px;
  font-weight: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .ai-thinking .thinking-step .tk-meta {
  color: rgba(255,255,255,0.45);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 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 */
html body .ai-thinking .thinking-step .tk-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
html body .ai-thinking .thinking-step .tk-source {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  text-decoration: none;
}
html body .ai-thinking .thinking-step .tk-source:hover {
  background: rgba(99,179,237,0.10);
  border-color: rgba(99,179,237,0.32);
  color: #fff;
}

/* 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;
}
html body .cs-phase-label {
  color: #7cc6f5 !important;
  letter-spacing: 0.01em;
}
html body .cs-thinking-dots .cs-dot {
  background: #7cc6f5 !important;
}
html body .cs-source-ring {
  border-color: rgba(124, 198, 245, 0.32) !important;
  border-top-color: #7cc6f5 !important;
}

/* Mono code card inside thinking (rendered when step.meta starts with `$ ` or
   is multi-line — JS now wraps such content in .tk-code). */
html body .ai-thinking .thinking-step .tk-code {
  margin-top: 6px;
  padding: 8px 10px;
  background: #0d0d0e;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

/* 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;
}

/* End v40.5q */

/* v40.5q-fix: With the new thinking-step row design (active row has cyan
   glow + chevron), the legacy cs-phase-row below it duplicates the same
   info. Hide the live phase row \u2014 the active step IS the live indicator. */
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;
}

/* ── Head (clickable row) ────────────────────────────────────────────────── */
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,
html body .claude-thinking .cl-symbol {
  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,
html body .claude-thinking .cl-block.is-active .cl-symbol {
  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;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
html body .claude-thinking .cl-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(33,150,243,0.25);
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: cl-spin 0.7s linear infinite;
}

}

/* ── 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-streaming-text {
  display: block;
}
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;
}

/* ── Tool block code card ────────────────────────────────────────────────── */
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;
}

/* ── Search results pills ────────────────────────────────────────────────── */
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;
}

/* ── Inline error ────────────────────────────────────────────────────────── */
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;
}

/* End v40.5r */

/* ===========================================================
   v40.5u — Claude-faithful exact-replica polish
   1) System font stack (drop Satoshi → use ‑apple‑system / system‑ui first)
   2) Sidebar background matches main (unified canvas, no edge)
   3) Kill sidebar border-right + box-shadow (no visible divider line)
   =========================================================== */
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;
}
/* Preserve monospace where intentional. v40.5ay: JetBrains Mono first. */
html body code, html body pre, html body kbd, html body samp, html body .mono, 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 .material-symbols-outlined,
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: #191A1A;
  background-color: #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,
html body .ai-shell,
html body .ai-main {
  background: #191A1A;
}

/* Topbar: blend with main; no hard underline */
html body .topbar,
html body header.topbar,
/* End v40.5u */

/* =============================================================================
   v40.5af — Thinking text color fixes (body-lock section removed — superseded by v40.5ah)
   ============================================================================= */
/* 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);
}
html body.route-ask .ai-thinking .thinking-step.is-active {
  color: #DFF6E6;
  font-weight: 500;
}
html body.route-ask .ai-thinking .thinking-step.is-done {
  color: rgba(223, 246, 230, 0.55);
}
html body.route-ask .ai-thinking .thinking-step .tk-label {
  color: inherit;
}
html body.route-ask .ai-thinking .thinking-step .tk-meta {
  color: rgba(223, 246, 230, 0.5);
}
html body.route-ask .ai-thinking {
  border-bottom-color: rgba(223, 246, 230, 0.15);
}

/* End v40.5af */

/* ═══════════════════════════════════════════════════════════════════════════
   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-ds-view       (v40.5o used .data-sources-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.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  :root {
    --gl-floating-pill-h: 60px;
  }

  /* /ask — AI chat view */
  html body.route-ask .ai-view .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /dash — main dashboard overview */
  html body .dashboard-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /chats — chat history list */
  html body .chats-view,
  html body .chats-list,
  html body .chats-main {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }

  /* /divisions — divisions grid (actual class: gl-divisions-view) */
  html body .gl-divisions-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /data-sources — data source cards (actual class: gl-ds-view) */
  html body .gl-ds-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /automations — automation cards list */
  html body .automations-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /messages — messaging hub (entirely absent from prior layers) */
  html body .msg-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }

  /* /settings */
  html body .settings-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* /reports — reports hub */
  html body .reports-view {
    padding-top: calc(var(--gl-floating-pill-h) + env(safe-area-inset-top, 0px) + 12px);
  }
}
/* End v40.5ag */

/* =============================================================================
   v40.5ah — Clean chat layout (supersedes v40.5ae + v40.5af scroll/fade rules)
   ----------------------------------------------------------------------------
   PROBLEMS FROM v40.5af:
     1. body { position:fixed; overflow:hidden } on route-ask leaked into /chats
        and other routes after navigation, breaking their scroll.
     2. The ::before/::after fixed-position overlays from v40.5ae didn't render
        because body was position:fixed (pseudo-elements followed the fixed body
        instead of viewport, plus z-index ordering broke).
     3. Content was still spilling past the composer because .ai-messages
        max-height was calc-based off vh but composer used fixed positioning,
        creating a gap or overlap depending on viewport.
     4. Dead space at top of /ask after submit because .ai-view padding-top
        was stacking with .ai-messages padding-top (96px + 14px = 110px+ wasted).
     5. Composer chip strip floating high because composer had ~16px top padding
        plus padding on the chip row.

   APPROACH (PQINA mask-image technique, scoped correctly):
     - body STAYS NORMAL on every route. No position:fixed, no overflow:hidden.
     - .ai-view becomes a flex column: hero (or messages) flex:1, composer
       flex:0 0 auto pinned at the bottom of the view.
     - .ai-messages is THE scroll surface — overflow:auto on itself.
     - Mask gradient applied to .ai-messages directly (PQINA pattern) creates
       fade at top + bottom edges of the scroll container itself, NOT separate
       overlay divs. Works on every viewport, no z-index battles.
     - Composer is position:sticky bottom:0 INSIDE .ai-view (not fixed to
       viewport). Sits flush at bottom, content above it scrolls under the
       bottom fade band of the messages mask.
     - Tighten padding: .ai-messages padding-top reduced from 96px to 24px
       (chip clearance handled by .ai-view padding-top instead), bottom
       padding sized to clear composer height.

   PRIORITY: Use EVERYWHERE since prior versions established a war
   of !important rules; this block must win the cascade.
   ============================================================================= */

/* ─ 1. UNDO the broken v40.5af body-lock ─────────────────────────────────── */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages,
  html.route-ask.ai-has-messages,
  html body.route-ask,
  html body.route-chats,
  html body.route-dash,
  html body.route-divisions,
  html body.route-data-sources,
  html body.route-automations,
  html body.route-messages,
  html body.route-settings,
  html body.route-reports {
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    height: auto;
    max-height: none;
    min-height: 100dvh;
    position: static;
    top: auto;
    left: auto;
    width: auto;
  }
  html.route-ask, html {
    overflow: auto;
    position: static;
    height: auto;
    max-height: none;
  }
}

/* ─ 2. KILL the v40.5ae pseudo-overlays (they didn't work and add weight) ── */
/* superseded by v40.5bg
html body.route-ask.ai-has-messages::before,
html body.route-ask.ai-has-messages::after {
  content: none;
  display: none;
  background: none;
}
*/

/* ─ 3. CHAT LAYOUT — flex column, composer pinned at bottom of view ─────── */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view {
    display: flex;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow: hidden !important;
    position: relative;
  }

  /* Scroll surface: takes remaining space, has the fade mask */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* Padding-top clears chip strip (60px chip + safe-area + 8px) */
    padding-top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px) + 8px) !important;
    /* Padding-bottom clears composer + small gap */
    padding-bottom: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    /* PQINA mask: fade top 32px and bottom 24px of the scroll container */
    --mask-fade-top: 32px;
    --mask-fade-bottom: 24px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
            mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
            mask-size: 100% 100% !important;
  }

  /* Composer: pinned inside .ai-view, NOT fixed to viewport */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    position: sticky !important;
    bottom: 0;
    top: auto;
    flex: 0 0 auto !important;
    width: 100%;
    left: auto;
    right: auto;
    background: #191A1A !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0;
    z-index: 4 !important;
  }

  /* Tighten composer internal spacing: chip strip closer to textarea */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap .composer-chips {
    padding: 4px 0 0 !important;
    margin: 0;
    gap: 6px !important;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap .rich-composer-wrap {
    margin: 0;
    padding: 0;
  }
}

/* ─ 4. DESKTOP — same idea, just different dimensions ────────────────────── */
@media (min-width: 821px) {
  html body.route-ask.ai-has-messages .ai-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    min-height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    padding: 0 1.5rem;
    margin: 0 auto;
    max-width: 780px;
    overflow: hidden;
    position: relative;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
    padding-right: 0.25rem !important;
    --mask-fade-top: 40px;
    --mask-fade-bottom: 32px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
            mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--mask-fade-top),
      #000 calc(100% - var(--mask-fade-bottom)),
      transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
  }
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    position: sticky !important;
    bottom: 0;
    top: auto;
    flex: 0 0 auto !important;
    background: #191A1A !important;
    padding: 8px 0 12px !important;
    margin: 0;
    z-index: 4 !important;
    border-top: 0;
    box-shadow: none;
  }
}

/* End v40.5ah */

/* =============================================================================
   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.
   ============================================================================= */

@media (max-width: 820px) {
  /* Kill v40.5ah mask (it didn't render visibly) */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    -webkit-mask-image: none;
            mask-image: none;
    /* Padding adjustments: tighter top since chip strip is the topnav edge */
    padding-top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px) + 4px) !important;
    padding-bottom: 8px !important;
  }

  /* Ensure .ai-view is positioning context for fade overlays */
  html body.route-ask.ai-has-messages .ai-view {
    position: relative;
    isolation: isolate !important;
  }

  /* TOP fade overlay: starts at topnav bottom edge, fades to transparent.
     Sits ABOVE scrolling content (z-index 2), pointer-events none so
     scroll still works through it. */
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    top: calc(var(--gl-floating-pill-h, 60px) + env(safe-area-inset-top, 0px)) !important;
    height: 36px !important;
    background: linear-gradient(
      to bottom,
      #191A1A 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }

  /* BOTTOM fade overlay: starts above composer, fades up to transparent.
     Positioned so it sits IMMEDIATELY above the sticky composer. */
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    /* Bottom anchored at the composer top edge. Composer height ~60-80px
       depending on chip strip + textarea + padding. */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: 40px !important;
    background: linear-gradient(
      to top,
      #191A1A 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }

  /* Ensure composer sits ABOVE the fade overlay (z-index 4 > 2) */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    z-index: 4 !important;
  }
}

@media (min-width: 821px) {
  /* Same fix for desktop: kill mask, use overlays */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    -webkit-mask-image: none;
            mask-image: none;
  }
  html body.route-ask.ai-has-messages .ai-view {
    position: relative;
    isolation: isolate !important;
  }
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    height: 48px !important;
    background: linear-gradient(
      to bottom,
      #191A1A 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    position: absolute !important;
    display: block;
    left: 0;
    right: 0;
    bottom: 80px !important;
    height: 48px !important;
    background: linear-gradient(
      to top,
      #191A1A 0%,
      rgba(25, 26, 26, 0.95) 25%,
      rgba(25, 26, 26, 0.65) 60%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 2 !important;
  }
}

/* End v40.5ai */

/* =============================================================================
   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.
   ============================================================================= */

@media (max-width: 820px) {
  /* Full-screen tap-anywhere backdrop while panel is open */
  html body .notif-panel.is-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: auto;
    /* Backdrop is OUTSIDE the panel content; tapping it triggers
       _notifOutsideClose because the listener checks panel.contains(target)
       and the backdrop is on a pseudo-element ANCHORED to the panel, but
       semantically counts as outside. To make this work, we use a sibling
       fixed div instead. See ::after below. */
  }

  /* Panel itself: ensure proper stacking on mobile so backdrop sits behind */
  html body .notif-panel.is-open {
    z-index: 100 !important;
    /* Restrict transforms only along Y so it slides from top */
    transition: transform 0.18s ease-out, opacity 0.18s ease-out !important;
  }

  /* Reliable close button in header (uses .notif-panel-clear element which
     already exists; just makes it more visible and tappable on mobile) */
  html body .notif-panel.is-open .notif-panel-clear {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-left: 8px;
  }
}

/* End v40.5aj */

/* === v40.5ak: mobile Ask + chat scroll polish === */
/*
   FIXES IN THIS BLOCK (mobile max-width:820px unless noted):
   1. ai-thinking chip visibility on mobile (dark card style)
   2. Body/topnav scroll lock on route-ask; kill scroll-chip pop
   3. Top + bottom fade verified (v40.5ai handles it; kill mask-image
      residue that could double-process on mobile)
   4. chats-list scrollable height on /chats
   5. Tighten dead space above composer-chips after first submit
   6. Composer flush to bottom (override the 12px gap)
   7. Neutral palette pass — stop #000/#0A0A0A bleed on main surfaces
*/

/* ─────────────────────────────────────────────────────────────────────────
   FIX 1 — ai-thinking visibility on mobile
   The element starts with [hidden] attr in HTML template, JS removes it
   once streaming begins. The catch-all ".ai-thinking[hidden] { display:none }"
   covers that. But on mobile some ancestor overflow or stacking context
   can swallow it. Ensure it renders as a dark chip matching the spec.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Any ai-thinking that does NOT have [hidden] must be visible */
  html body .ai-thinking:not([hidden]) {
    display: block;
    background: #191A1A;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #B8B8B8;
    margin: 6px 0 10px 0;
    width: 100%;
    box-sizing: border-box;
    /* Ensure it isn't clipped by parent overflow:hidden */
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  /* Thinking text "Thinking…" */
  html body .ai-thinking:not([hidden]) .ai-thinking-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #B8B8B8;
    font-weight: 500;
  }

  /* Claude-style thinking block also visible */
  html body .ai-thinking.claude-thinking:not([hidden]) {
    background: #191A1A;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 8px 12px;
  }

  /* Thinking steps inside the chip */
  html body .ai-thinking:not([hidden]) .thinking-step {
    color: #B8B8B8;
    font-size: 13px;
  }

  html body .ai-thinking:not([hidden]) .thinking-step .tk-label {
    color: #B8B8B8;
  }

  html body .ai-thinking:not([hidden]) .thinking-step .tk-meta {
    color: #888;
  }

  html body .ai-thinking:not([hidden]) .thinking-step.is-active .tk-dot {
    background: #42A5F5;
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.22);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   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 */
body.route-ask {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

@media (max-width: 820px) {
  html body.route-ask {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    width: 100%;
    /* Kill any scroll-triggered chip pop — floating pill should not hide
       on route-ask because body scroll is locked and window.scrollY = 0 */
  }

  /* Ensure html root doesn't scroll either */
  html:has(body.route-ask) {
    overflow: hidden;
    height: 100dvh;
  }

  /* Topnav stays fixed, never scrolls with body */
  html body.route-ask nav.gl-floating-pill,
  html body.route-ask #gl-floating-pill,
  html body.route-ask nav.mobile-topnav,
  html body.route-ask header.topbar {
    position: fixed !important;
    z-index: 100 !important;
    top: 0;
  }

  /* Kill data-mobile-hidden animation on route-ask — pill never hides */
  html body.route-ask #gl-floating-pill[data-mobile-hidden="1"] {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* ai-messages is the ONLY scroll surface on route-ask */
  html body.route-ask .ai-view .ai-messages {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 3 — Top + bottom fades on .ai-view
   v40.5ai already implements ::before/::after opaque gradient overlays on
   .ai-view. Verified present. This block ensures any stray mask-image
   residue from v40.5ah doesn't double-process, and that the overlays
   render correctly on mobile without interference from body lock.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Belt-and-suspenders: kill mask-image on .ai-messages so v40.5ai's
     opaque overlays are the sole fade mechanism */
  html body.route-ask .ai-view .ai-messages {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Ensure .ai-view is a positioning context so ::before/::after anchor */
  html body.route-ask .ai-view {
    position: relative;
    isolation: isolate !important;
  }

  /* Top fade: 24px tall, #191A1A → transparent, above messages, below topnav */
  html body.route-ask.ai-has-messages .ai-view::before {
    content: '' !important;
    display: block;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    height: 24px !important;
    background: linear-gradient(
      to bottom,
      #191A1A 0%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 3 !important;
  }

  /* Bottom fade: 32px tall, transparent → #191A1A, above messages, below composer */
  html body.route-ask.ai-has-messages .ai-view::after {
    content: '' !important;
    display: block;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px !important;
    background: linear-gradient(
      to top,
      #191A1A 0%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 3 !important;
  }

  /* Composer sits above fade overlays */
  html body.route-ask .ai-view .ai-composer-wrap {
    z-index: 5;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 4 — Chat history (.chats-list) scrollable on /chats route mobile
   Currently .chats-list has no height/overflow, so if body scroll is
   locked it becomes unscrollable. Even without body lock, the list
   doesn't have a bounded height so it may overflow off-screen.
   64px = topnav; 80px = bottom safe area + any footer.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  html body.route-chats .chats-list {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 64px topnav + 80px bottom clearance */
    height: calc(100dvh - 64px - 80px);
    max-height: calc(100dvh - 64px - 80px);
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Ensure chats-view doesn't clip the list */
  html body.route-chats .chats-view {
    overflow: visible;
    overflow-x: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 5 — Tighten dead space above composer-chips after first submit
   After ai-has-messages is set, the .ai-composer-wrap switches to chip
   mode. The gap above the chips comes from margin-top on the wrap or
   padding-top on the parent. Reduce to 12px.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap .composer-chips {
    margin-top: 12px !important;
    padding-top: 0;
  }

  /* Also tighten any top margin on the composer wrap itself in has-messages */
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    margin-top: 0;
    padding-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 6 — Composer flush to bottom on mobile (iPhone home-indicator gap)
   Multiple earlier rules use `bottom: calc(12px + env(safe-area-inset-bottom))`.
   That 12px is the visible gap. Replace with bottom:0 + use padding-bottom
   inside the wrap for safe-area breathing room. The outer wrap is transparent
   so body color (#191A1A) shows through — exactly matching the home-indicator
   bar color on iOS. JS enforceMobileAskLayout also sets these but CSS must
   agree so there's no frame where they diverge.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap,
  /* Match the fixed-position rules that JS enforces */
  html body.route-ask .ai-composer-wrap {
    position: fixed !important;
    left: 0;
    right: 0;
    /* flush to bottom; safe-area handled by padding-bottom below */
    bottom: calc(var(--kb-offset, 0px)) !important;
    top: auto;
    margin: 0;
    /* padding: top, sides, safe-area-bottom */
    padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px)) !important;
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    z-index: 5 !important;
  }

  /* Inner rounded pill stays styled; just the outer wrap goes flush */
  html body.route-ask .ai-view .rich-composer {
    /* border-radius and bg are set by JS enforceMobileAskLayout; preserve them */
    border-radius: 22px;
  }

  /* Ensure ai-messages padding-bottom clears the fixed composer (~64px) +
     safe-area-bottom so last message isn't hidden */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(72px + max(8px, env(safe-area-inset-bottom, 8px))) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 7 — Neutral palette pass
   Ensure #191A1A is the bg on all main content surfaces on mobile.
   Stop pure #000 / #0A0A0A from bleeding into non-auth elements.
   Active tab stays blue (#1976D2/#2196F3); inactive → #B8B8B8 text.
   Primary text: #E5E5E5, never pure #FFFFFF except active tab label.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Main content surfaces: enforce #191A1A bg */
  html body section#main.main,
  html body #main-content,
  html body .main-content,
  html body .ai-view,
  html body .ai-home,
  html body .chats-view,
  html body .dashboard-view,
  html body .reports-view,
  html body .automations-view,
  html body .settings-view,
  html body .divisions-view,
  html body .gl-divisions-view {
    background: #191A1A !important;
    background-color: #191A1A !important;
  }

  /* Kill any #000 bg leaking into the main content area on mobile
     (auth pages are intentionally #000 and excluded here) */
  html body:not(.is-auth-page) {
    background: #191A1A;
    background-color: #191A1A;
  }

  /* Inactive gfp-item (nav tab) on dark floating pill: #B8B8B8, not white */
  html body .gl-floating-pill .gfp-item:not(.active) {
    color: #B8B8B8;
  }

  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item:not(.active) {
    color: #B8B8B8;
  }

  /* Active tab: keep blue bg, use #E5E5E5 text (not pure #FFF) */
  html body .gl-floating-pill .gfp-item.active,
  html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    color: #E5E5E5 !important;
  }

  /* topbar--with-pill active tab (light topbar variant): keep blue bg */
  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 {
    background: #1976D2;
    color: #E5E5E5;
  }

  /* topbar inactive tabs */
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item:not(.active),
  html body header.topbar.topbar--with-pill .gl-floating-pill--topbar .gfp-item--newchat {
    color: #B8B8B8;
  }

  /* Card surfaces: #1A1A1A → #1F2121 */
  html body .ai-hero-card,
  html body .home-dash-card,
  html body .kpi-card,
  html body .report-card,
  html body .automation-card,
  html body .gl-division-card,
  html body .gl-ds-card,
  html body .chats-row {
    background-color: #1F2121 !important;
  }

  /* Primary text: never pure #FFFFFF, use #E5E5E5 */
  html body .ai-view,
  html body .ai-messages,
  html body .chats-view,
  html body .settings-view {
    color: #E5E5E5 !important;
  }
}
/* === END v40.5ak === */

/* === v40.5ak outreach-hub === */

/* ── Tab switcher ─────────────────────────────────────────────────────────── */
.outreach-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid #2A2A2A;
  flex-shrink: 0;
  background: #191A1A;
}

.outreach-tab {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #6B7280;
  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: #EAEBEC;
  background: rgba(255,255,255,0.04);
}

.outreach-tab.is-active {
  color: #EAEBEC;
  background: #1F2121;
  border-color: #2A2A2A;
  border-bottom-color: #1F2121;
}

/* ── Outreach mount ───────────────────────────────────────────────────────── */
#outreach-mount {
  flex: 1;
  overflow-y: auto;
  min-height: 600px;
}

/* ── Hub wrapper ──────────────────────────────────────────────────────────── */
.outreach-hub {
  background: #191A1A;
  min-height: 600px;
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.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: #EAEBEC;
  margin: 0;
  line-height: 1.2;
}

.outreach-subtitle {
  font-size: 0.85rem;
  color: #8A929E;
  margin: 0;
}

/* ── Rules / Prompt box ───────────────────────────────────────────────────── */
.outreach-rules {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  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: #EAEBEC;
  text-transform: uppercase;
}

.outreach-rules-chevron {
  color: #6B7280;
  transition: transform 220ms ease;
  display: flex;
  align-items: center;
}

.outreach-rules-body {
  border-top: 1px solid #2A2A2A;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.outreach-rules-ta {
  width: 100%;
  box-sizing: border-box;
  background: #191A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #EAEBEC;
  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: #6B7280;
}

.outreach-save-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #EAEBEC;
  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;
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.outreach-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .outreach-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .outreach-actions {
    grid-template-columns: 1fr;
  }
}

.outreach-action-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  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, #2A2A2A);
  border-radius: 12px 12px 0 0;
  opacity: 0.8;
  transition: opacity 160ms ease;
}

.outreach-action-card:hover:not(:disabled) {
  background: #262828;
  border-color: #3A3A3A;
  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: #8A929E;
  display: flex;
  align-items: center;
}

.oac-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #EAEBEC;
  line-height: 1.2;
}

.oac-desc {
  font-size: 0.76rem;
  color: #6B7280;
  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;
}

/* ── Status pills ─────────────────────────────────────────────────────────── */
.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: #8A929E; 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: #2A2A2A;
  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;
}

/* ── Pool table ───────────────────────────────────────────────────────────── */
.outreach-table-wrap {
  overflow-x: auto;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
}

.outreach-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.outreach-table thead {
  background: #191A1A;
  position: sticky;
  top: 0;
  z-index: 2;
}

.outreach-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6B7280;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #2A2A2A;
}

.outreach-table td {
  padding: 10px 12px;
  color: #EAEBEC;
  border-bottom: 1px solid #232424;
  vertical-align: top;
}

.outreach-pool-row:last-child td {
  border-bottom: none;
}

.outreach-pool-row:hover td {
  background: rgba(255,255,255,0.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: #6B7280; }
.col-phone { white-space: nowrap; color: #8A929E; font-size: 0.78rem; }
.col-date  { white-space: nowrap; color: #8A929E; font-size: 0.78rem; }

/* ── Message cell ─────────────────────────────────────────────────────────── */
.outreach-msg-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outreach-msg-text {
  color: #EAEBEC;
  font-size: 0.81rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.outreach-msg-len {
  font-size: 0.68rem;
  color: #6B7280;
}

.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: #191A1A;
  border: 1px solid #2A2A2A;
  border-radius: 7px;
  color: #EAEBEC;
  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: #8A929E;
  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: #EAEBEC;
  background: rgba(138,146,158,0.15);
  border-color: rgba(138,146,158,0.35);
}

.outreach-regen-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Confirmation modal ───────────────────────────────────────────────────── */
.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: #1F2121;
  border: 1px solid #2A2A2A;
  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 rgba(0,0,0,0.5);
}

.outreach-modal-icon {
  color: #D45A5A;
  opacity: 0.85;
}

.outreach-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #EAEBEC;
  margin: 0;
}

.outreach-modal-body {
  font-size: 0.88rem;
  color: #8A929E;
  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: #8A929E;
  background: transparent;
  border: 1px solid #2A2A2A;
  border-radius: 9px;
  padding: 10px 22px;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.outreach-modal-cancel:hover {
  color: #EAEBEC;
  border-color: #3A3A3A;
  background: rgba(255,255,255,0.04);
}

.outreach-modal-confirm {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #fff;
  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;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .outreach-hub {
    padding: 16px 14px 36px;
    gap: 16px;
  }

  .outreach-tabs {
    padding: 8px 12px 0;
  }

  .outreach-title {
    font-size: 1.2rem;
  }

  .outreach-table th,
  .outreach-table td {
    padding: 8px 8px;
    font-size: 0.78rem;
  }

  .col-msg { min-width: 180px; }
}

/* End v40.5ak outreach-hub */

/* === v40.5ak builder-palette === */
/* Builder Hub redesign: vertical flow tree, locked palette, SendBlue-style nodes. */

/* ── Flow canvas background ── */
.imsg-flow-view,
.imsg-flow-view--dd {
  background: #191A1A;
}

/* ── 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 */
.imsg-flow-node--trigger rect:first-child {
  stroke: #2196F3;
  stroke-width: 2;
}

/* ── Action node: dashed 1px border (set inline in JS via stroke-dasharray) ── */
.imsg-flow-node--action rect:first-child {
  stroke-dasharray: 5 3;
}

/* ── Condition node: slight blue accent ── */
.imsg-flow-node--condition rect:first-child {
  stroke: #2A2A2A;
}

/* ── Connector lines \u2014 2px solid #2A2A2A ── */
.imsg-edge {
  stroke: #2A2A2A;
  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 ── */
.imsg-dd-node--selected > rect:first-child {
  stroke: #2196F3;
  stroke-width: 2;
}

/* ── Wire handle: neutral palette ── */
.imsg-dd-wire-handle {
  fill: #2A2A2A;
  stroke: #3A3A3A;
}
.imsg-dd-wire-handle:hover {
  fill: #2196F3;
}

/* ── Palette item: trigger gets blue border ── */
.imsg-dd-palette-item[data-palette-key="trigger"] {
  border-color: #2196F3;
  color: #E3F2FD;
}

/* ── KPI card: locked palette ── */
.stl-kpi-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
}

/* ── Section titles: muted uppercase ── */
.imsg-dd-palette-title,
.imsg-section-title {
  color: #8A8A8A;
  border-bottom-color: #2A2A2A;
}

/* ── Flow view background guarantee ── */
#main-content:has(.imsg-flow-view),
#main-content:has(.imsg-flow-view--dd) {
  background: #191A1A;
}

/* ── Eyebrow text: muted ── */
.imsg-flow-eyebrow {
  color: #8A8A8A;
}

/* ── Flow title: primary text ── */
.imsg-flow-title {
  color: #E5E5E5;
}

/* ── Node subtitle text: muted gray ── */
.imsg-flow-node-sub {
  fill: #8A8A8A;
}

/* end v40.5ak builder-palette */

/* ===================================================================
   v40.5ak-polish: SaaS neutral pass
   Applied: 2026-06-02 overnight cleanup
   Strategy: high-specificity overrides using "body .selector" pattern
   Locked palette enforced throughout.
   =================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   0. CSS CUSTOM PROPERTY OVERRIDES — lock palette tokens
   ───────────────────────────────────────────────────────────────────── */
body {
  --v40-bg-primary:    #191A1A;
  --v40-bg-card:       #1F2121;
  --v40-border:        #2A2A2A;
  --v40-divider:       #232525;
  --v40-text-primary:  #E5E5E5;
  --v40-text-sec:      #B8B8B8;
  --v40-text-muted:    #8A8A8A;
  --v40-accent:        #2196F3;
  --v40-accent-light:  #E3F2FD;
  --v40-success:       #4CAF50;
  --v40-warn:          #FF9800;
  --v40-error:         #EF5350;
  --v40-border-hover:  #3A3A3A;
}

/* ─────────────────────────────────────────────────────────────────────
   1. GLOBAL BACKGROUND + TEXT — kill #171614 / #E3E1DD / off-palette
   ───────────────────────────────────────────────────────────────────── */
body html,
body {
  background-color: #191A1A !important;
  background: #191A1A !important;
  color: #E5E5E5 !important;
}

body html body,
body main,
body #main-content,
body main#main-content {
  background-color: #191A1A;
}

/* ─────────────────────────────────────────────────────────────────────
   2. CARD — solid bg, standard radius 12px, standard padding 20px
      Remove gradient overlays (they read as "foggy" on dark)
   ───────────────────────────────────────────────────────────────────── */
body .card {
  background: #1F2121;
  background-image: none;
  border: 1px solid #2A2A2A;
  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: #3A3A3A;
}

body .kpi-card {
  background: #1F2121;
  background-image: none;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  transition: transform .12s ease, border-color .12s ease;
}
body .kpi-card:hover {
  border-color: #3A3A3A;
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  transform: none;
}

/* hero-card stays 12px, no gradient */
body .hero-card {
  background: #1F2121;
  background-image: none;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 20px;
}
body .hero-card::after {
  background: none;
  display: none;
}

/* Report cards */
body .report-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  transition: transform .12s ease, border-color .12s ease;
}
body .report-card:hover {
  border-color: #3A3A3A;
  transform: translateY(-1px);
}

/* Automation cards */
body .automation-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 20px;
  transition: transform .12s ease, border-color .12s ease;
}
body .automation-card:hover {
  border-color: #3A3A3A;
}

/* ─────────────────────────────────────────────────────────────────────
   3. TEXT COLORS — replace off-palette with locked palette values
   ───────────────────────────────────────────────────────────────────── */

/* Pure white → #E5E5E5 */
body .card h2,
body .card h3,
body .card h4,
body .panel-title,
body .page-title,
body .hero-headline,
body .chats-title,
body .reports-subheader .reports-title {
  color: #E5E5E5 !important;
}

/* #e8efe9 / #e8ecef / #EAEBEC → #E5E5E5 */
body .automation-card-title,
body .home-dash-value,
body .kpi-card .kpi-value,
body .gl-ds-title,
body .gl-divisions-title,
body .gl-ds-sub,
body .gl-divisions-sub {
  color: #E5E5E5;
}

/* 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-ds-sub {
  color: #8A8A8A !important;
}

body .section-label,
body .right-section > .section-label,
body .panel-title,
body .right-section > h3 {
  color: #B8B8B8 !important;
}

/* Page titles: 24px, weight 600 */
body .page-title,
body .gl-divisions-title,
body .gl-ds-title,
body .chats-title {
  font-size: 24px !important;
  font-weight: 600;
  color: #E5E5E5 !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-ds-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: #8A8A8A;
}

/* Settings block heads are section headers, slightly bigger */
body .settings-block-head h2 {
  font-size: 14px !important;
  color: #E5E5E5 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. SIDEBAR — background #191A1A, tones, no #0D47A1 garish blue
   ───────────────────────────────────────────────────────────────────── */
body aside.sidebar,
body aside#sidebar {
  background: #191A1A;
  border-right: 1px solid #2A2A2A;
}

/* 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: rgba(255,255,255,0.04) !important;
  color: #E5E5E5 !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: rgba(33,150,243,0.12) !important;
  border-color: rgba(33,150,243,0.22) !important;
  color: #2196F3 !important;
}

body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active svg,
body:not(.sidebar-collapsed) aside.sidebar.sidebar .sidebar-section .section-body .nav-item.active .nav-label,
body.sidebar-collapsed aside.sidebar.sidebar [data-section] .section-body > .nav-item.active svg {
  color: #2196F3 !important;
  stroke: #2196F3 !important;
}

/* History items in sidebar */
body aside.sidebar #sidebar-history-list .history-item,
body .sidebar .history-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid #2A2A2A;
  color: #B8B8B8;
}
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: #E5E5E5;
}
body aside.sidebar #sidebar-history-list .history-item .history-title {
  color: #E5E5E5;
}
body aside.sidebar #sidebar-history-list .history-item .history-meta {
  color: #8A8A8A;
}

/* Active history item */
body:not(.sidebar-collapsed) aside.sidebar [data-section="history"] .section-body .history-item.active {
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
}

/* Sidebar viewall / toggle links */
body .sidebar-history-viewall:hover,
body:not(.sidebar-collapsed) aside.sidebar .sidebar-history-viewall:hover {
  color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
}

body .sidebar .sidebar-label--toggle .core-caret {
  color: #8A8A8A;
}

/* Sidebar badge pills */
body aside.sidebar .sidebar-quick-item .sqi-badge {
  background: rgba(33,150,243,0.08);
  color: #2196F3;
}

/* Floating pill nav */
body .gl-floating-pill .gfp-item:hover {
  background: rgba(255,255,255,0.04);
  color: #E5E5E5;
}
body .gl-floating-pill .gfp-item.active {
  background: rgba(33,150,243,0.12);
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   6. BUTTONS — primary darkens, ghost lightens, correct colors
   ───────────────────────────────────────────────────────────────────── */
body .btn-primary,
body button.primary,
body .btn-primary.btn-primary--sm {
  background: #2196F3;
  background-image: none;
  color: #191A1A;
  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: #B8B8B8;
  border: 1px solid #2A2A2A;
  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: rgba(255,255,255,0.06);
  color: #E5E5E5;
  border-color: #3A3A3A;
}

/* Send button */
body .rc-send,
body button.rc-send,
body .composer-send {
  background: #2A2A2A;
  background-image: none;
  color: #E5E5E5;
  border: 1px solid #3A3A3A;
  box-shadow: none;
}
body .rc-send:hover,
body button.rc-send:hover,
body .composer-send:hover {
  background: #2196F3;
  color: #191A1A;
  border-color: #2196F3;
}

/* Settings save/inline buttons */
body .settings-outline-btn {
  background: transparent;
  color: #B8B8B8;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
}
body .settings-outline-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: #3A3A3A;
  color: #E5E5E5;
}

body .settings-inline-save,
body .settings-view.settings-view--compact .settings-inline-save {
  background: #2196F3;
  color: #191A1A;
  border-color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   7. INPUTS / TEXTAREAS — #1F2121 bg, #2A2A2A border, 8px radius
   ───────────────────────────────────────────────────────────────────── */
body .chat-textarea,
body .chats-search,
body .msg-search,
body .msg-builder-input,
body .msg-builder-textarea,
body .modal-box input,
body .modal-box textarea,
body .auth-field input,
body .auth-field textarea {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  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: #2196F3;
  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-ds-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-ds-grid,
body .gl-divisions-grid,
body .automations-cards {
  gap: 16px;
}

body .dashboard-lower,
body .right-panel {
  gap: 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   9. PANEL / SECTION CARDS — 20px padding standard
   ───────────────────────────────────────────────────────────────────── */
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;
}

/* ─────────────────────────────────────────────────────────────────────
   10. TOPBAR — #191A1A, border-bottom #2A2A2A
   ───────────────────────────────────────────────────────────────────── */
body .topbar {
  background: #191A1A;
  border-bottom: 1px solid #2A2A2A;
}

/* ─────────────────────────────────────────────────────────────────────
   11. FLOATING CHAT PANEL — locked palette
   ───────────────────────────────────────────────────────────────────── */
body .floating-chat-panel {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
}
body .floating-chat-panel:hover {
  border-color: #3A3A3A;
}
body .floating-chat-composer .chat-textarea:focus {
  border-color: #2196F3;
}
body .floating-chat-composer .composer-send:hover,
body .floating-chat-composer .composer-actions .composer-send:hover {
  background: #2196F3;
  color: #191A1A;
  border-color: #2196F3;
}
body .floating-chat-header .btn-close:hover {
  color: #E5E5E5;
  background: rgba(255,255,255,0.06);
}
/* #1c1c1e / #1A1B1B chat bg → #1F2121 */
body .floating-chat-panel,
body .chat-panel.card,
body .dashboard-view .card.chat-panel {
  background: #1F2121 !important;
  border: 1px solid #2A2A2A !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: #2196F3;
  border-color: rgba(33,150,243,0.3);
}

/* ─────────────────────────────────────────────────────────────────────
   12. DIVISIONS VIEW — title/cta use #E5E5E5/#B8B8B8, icons use accent
   ───────────────────────────────────────────────────────────────────── */
body .gl-division-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  transition: transform .12s ease, border-color .12s ease;
}
body .gl-division-card:hover {
  border-color: #3A3A3A;
  transform: translateY(-1px);
}
body .gl-division-card .gdc-icon {
  background: rgba(33,150,243,0.10);
  color: #2196F3;
}
body .gl-division-card .gdc-title {
  color: #E5E5E5;
  font-weight: 600;
}
body .gl-division-card .gdc-meta {
  color: #8A8A8A;
}
body .gl-division-card .gdc-cta {
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   13. DATA SOURCES VIEW — fix #0D47A1 text → #E5E5E5 / #2196F3
   ───────────────────────────────────────────────────────────────────── */
body .gl-ds-title {
  color: #E5E5E5;
  font-size: 24px;
  font-weight: 600;
}
body .gl-ds-sub {
  color: #8A8A8A !important;
}
body .gl-ds-stats .gl-ds-stat strong {
  color: #E5E5E5;
}
body .gl-ds-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 16px;
  transition: border-color .12s ease;
}
body .gl-ds-card:hover {
  border-color: #3A3A3A;
}
body .gl-ds-card .gds-icon {
  background: rgba(33,150,243,0.08);
  color: #2196F3;
}
body .gl-ds-card .gds-title {
  color: #E5E5E5;
  font-weight: 600;
}
body .gl-ds-card .gds-desc {
  color: #8A8A8A;
}
body .gl-ds-card .gds-chip--connected {
  background: rgba(76,175,80,0.12);
  color: #4CAF50;
}
body .gl-ds-card .gds-chip:not(.gds-chip--connected) {
  background: rgba(255,255,255,0.04);
  color: #8A8A8A;
}
body .gl-ds-card .gds-cta {
  background: #2196F3;
  color: #191A1A;
  border-radius: 8px;
  font-weight: 600;
}
body .gl-ds-card .gds-cta:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}
body .gl-ds-card .gds-cta--disconnect {
  background: transparent;
  color: #EF5350;
  border: 1px solid rgba(239,83,80,0.3);
}

/* ─────────────────────────────────────────────────────────────────────
   14. MESSAGES VIEW — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .msg-thread-row {
  background: transparent;
  border-bottom: 1px solid #232525;
  transition: background .1s ease;
}
body .msg-thread-row:hover {
  background: rgba(255,255,255,0.03);
}
body .msg-thread-row.is-active {
  background: rgba(33,150,243,0.08);
}
body .msg-thread-name {
  color: #E5E5E5;
}
body .msg-thread-preview,
body .msg-thread-time {
  color: #8A8A8A;
}
body .msg-left-pane {
  background: #1F2121;
  border-right: 1px solid #2A2A2A;
}
body .msg-bubble-out .msg-bubble {
  background: #2196F3;
  color: #191A1A;
  border-radius: 12px;
}
body .msg-bubble-in .msg-bubble {
  background: #2A2A2A;
  color: #E5E5E5;
  border-radius: 12px;
}
body .msg-composer {
  border-top: 1px solid #2A2A2A;
  background: #1F2121;
}
body .msg-composer-input {
  background: #232525;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  border-radius: 8px;
}
body .msg-composer-send {
  background: #2196F3;
  color: #191A1A;
  border-radius: 8px;
  font-weight: 600;
}
body .msg-tile {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 16px;
}
body .msg-stat {
  background: transparent;
}
body .msg-status-bar {
  background: #1F2121;
  border-bottom: 1px solid #2A2A2A;
}
body .msg-title {
  color: #E5E5E5;
  font-size: 18px;
  font-weight: 600;
}
body .msg-page-title {
  color: #E5E5E5;
  font-size: 18px;
  font-weight: 600;
}
body .msg-filter-tab,
body .msg-range-chip {
  color: #8A8A8A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  background: transparent;
}
body .msg-filter-tab.is-active,
body .msg-range-chip.is-active {
  background: rgba(33,150,243,0.12);
  border-color: rgba(33,150,243,0.3);
  color: #2196F3;
}
body .msg-pill-on {
  background: rgba(76,175,80,0.15);
  color: #4CAF50;
  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: #EF5350;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   15. AUTOMATIONS VIEW
   ───────────────────────────────────────────────────────────────────── */
body .automations-toolbar {
  background: transparent;
  border-bottom: 1px solid #232525;
  padding-bottom: 16px;
}
body .automations-sub {
  color: #8A8A8A;
  font-size: 14px;
}
body .automation-card-title {
  color: #E5E5E5;
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .automation-card-status {
  color: #8A8A8A;
  font-size: 13px;
}
body .automation-card-desc {
  color: #B8B8B8;
  font-size: 14px;
}
body .wire-pill--wired {
  background: rgba(76,175,80,0.12);
  color: #4CAF50;
  border-radius: 8px;
}
body .wire-pill--paused {
  background: rgba(255,152,0,0.12);
  color: #FF9800;
  border-radius: 8px;
}
body .wire-pill--not-wired {
  background: rgba(255,255,255,0.04);
  color: #8A8A8A;
  border-radius: 8px;
}
body .auto-status.on {
  background: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}
body .auto-status.off {
  background: #8A8A8A;
}
/* Toggle track: when checked → accent green, not garish #1976D2 */
body .toggle-switch.toggle-switch--inline input:checked + .toggle-track {
  background: #4CAF50;
}
body .automation-row .auto-status.on {
  background: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}

/* ─────────────────────────────────────────────────────────────────────
   16. SETTINGS VIEW — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .settings-view,
body .settings-view--compact,
body .main-content .settings-view--v1929 {
  color: #E5E5E5;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .settings-block {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 0;
}
body .settings-block-head h2 {
  color: #E5E5E5 !important;
  font-size: 16px !important;
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body .settings-row {
  border-bottom: 1px solid #232525;
  padding: 16px 0;
}
body .settings-row:last-child {
  border-bottom: none;
}
body .srl-title {
  color: #E5E5E5;
  font-weight: 500;
}
body .srl-value,
body .settings-row-muted {
  color: #8A8A8A;
  font-size: 13px;
}
body .settings-identity-name {
  color: #E5E5E5;
  font-weight: 600;
}
body .settings-identity-handle {
  color: #8A8A8A;
}
body .settings-avatar {
  background: rgba(33,150,243,0.12);
  color: #2196F3;
  font-weight: 600;
}
body .settings-promo {
  background: rgba(33,150,243,0.05);
  border: 1px solid rgba(33,150,243,0.15);
  border-radius: 8px;
}
body .settings-promo-title {
  color: #E5E5E5;
  font-weight: 600;
}
body .settings-promo-sub {
  color: #8A8A8A;
}
body .settings-promo-btn {
  background: #2196F3;
  color: #191A1A;
  border-radius: 8px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   17. REPORTS VIEW
   ───────────────────────────────────────────────────────────────────── */
body .reports-division h3,
body .division-header {
  color: #8A8A8A;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
body .report-title {
  color: #E5E5E5;
  font-weight: 600;
}
body .division-badge {
  background: rgba(255,255,255,0.05);
  color: #8A8A8A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
}
body .report-thumb {
  background: #232525;
}
body .thumb-empty-overlay {
  background: rgba(25,26,26,0.75);
  color: #8A8A8A;
  backdrop-filter: blur(2px);
}

/* ─────────────────────────────────────────────────────────────────────
   18. LOGIN VIEW — verify palette (mobile already polished)
   ───────────────────────────────────────────────────────────────────── */
body .auth-view {
  background: #191A1A;
}
body .auth-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
}
body .auth-title {
  color: #E5E5E5;
  font-weight: 600;
  font-size: 24px;
}
body .auth-sub {
  color: #8A8A8A;
}
body .auth-field input {
  background: #191A1A;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  border-radius: 8px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .auth-field input:focus {
  border-color: #2196F3;
}
body .auth-field span,
body .auth-field label span {
  color: #B8B8B8;
  font-size: 13px;
}
body .auth-primary-btn {
  background: #2196F3;
  color: #191A1A;
  border: none;
  border-radius: 8px;
  font-weight: 600;
}
body .auth-primary-btn:hover {
  filter: brightness(0.88);
}
body .auth-link {
  color: #2196F3;
}
body .auth-link-muted {
  color: #8A8A8A;
}
body .auth-foot {
  color: #8A8A8A;
}
body .auth-divider {
  color: #8A8A8A;
}
body .auth-divider::before,
body .auth-divider::after {
  border-color: #2A2A2A;
}
body .auth-oauth-btn {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  border-radius: 8px;
  font-weight: 500;
}
body .auth-oauth-btn:hover {
  border-color: #3A3A3A;
  background: #232525;
}

/* ─────────────────────────────────────────────────────────────────────
   19. TOAST / MODAL — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .toast {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  border-radius: 8px;
}
body .modal {
  background: rgba(0,0,0,0.6);
}
body .modal-box {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  color: #E5E5E5;
}
body .modal-box h3 {
  color: #E5E5E5;
  font-size: 18px;
  font-weight: 600;
}
body .modal-box label {
  color: #B8B8B8;
}

/* ─────────────────────────────────────────────────────────────────────
   20. CHATS VIEW (Chat history list)
   ───────────────────────────────────────────────────────────────────── */
body .chats-view {
  background: transparent;
}
body .chats-header {
  background: transparent;
  border-bottom: 1px solid #232525;
  padding-bottom: 16px;
}
body .chats-title {
  color: #E5E5E5 !important;
  font-size: 24px !important;
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body .chats-new-btn {
  background: #2196F3;
  color: #191A1A;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 16px;
}
body .chats-search {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  border-radius: 8px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .chats-row {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  color: #E5E5E5;
  transition: border-color .12s ease;
}
body .chats-row:hover {
  border-color: #3A3A3A;
}
body .chats-row-title {
  color: #E5E5E5;
  font-weight: 500;
}
body .chats-row-preview {
  color: #8A8A8A;
  font-size: 13px;
}
body .chats-row-meta {
  color: #8A8A8A;
  font-size: 12px;
}
body .chats-empty {
  color: #8A8A8A;
}

/* ─────────────────────────────────────────────────────────────────────
   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;
}
body .chats-search,
body .floating-chat-composer .chat-textarea {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .settings-view,
body .settings-view--v1929,
body .main-content .settings-view--v1929 .settings-block-head h2 {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────────────────────────────────
   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: #2196F3;
  background-image: none;
  color: #191A1A;
}
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: #E3F2FD;
}

/* Confirm button gradient → solid */
body .gl-confirm-btn--primary {
  background: #2196F3;
  background-image: none;
  color: #191A1A;
}

/* Settings avatar gradient */
body .settings-view.settings-view--compact .settings-avatar {
  background: rgba(33,150,243,0.12);
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   23. SUMMARY ITEMS / DIVIDERS — use #232525, not rgba(255,255,255,0.05)
   ───────────────────────────────────────────────────────────────────── */
body .summary-item {
  border-top-color: #232525;
  color: #B8B8B8;
}
body .summary-item strong {
  color: #E5E5E5;
}
body .automation-row {
  border-top-color: #232525;
}
body .settings-view .panel label {
  border-top-color: #232525;
}

/* ─────────────────────────────────────────────────────────────────────
   24. DASHBOARD COO KPI BUTTONS — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .coo-kpi-btn {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  transition: border-color .12s ease;
}
body .coo-kpi-btn:hover {
  border-color: #3A3A3A;
}
body .coo-kpi-label {
  color: #E5E5E5;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .coo-kpi-src {
  color: #8A8A8A;
  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: #B8B8B8;
}

/* ─────────────────────────────────────────────────────────────────────
   25. HOME DASH CARDS — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .home-dash-card {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  transition: border-color .12s ease;
}
body .home-dash-card:hover {
  border-color: #3A3A3A;
}
body .home-dash-value {
  color: #E5E5E5;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .home-dash-delta.is-up {
  color: #4CAF50;
}
body .home-dash-delta.is-down {
  color: #EF5350;
}
body html .home-dash-card .home-dash-delta.is-up {
  color: #4CAF50;
}
body html .home-dash-card .home-dash-delta.is-down {
  color: #EF5350;
}
body html .home-dash-card.home-dash-card--link:hover .home-dash-cta {
  background: rgba(33,150,243,0.10);
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   26. PILL / SYNC CHIPS — locked palette (success/warn/error only)
   ───────────────────────────────────────────────────────────────────── */
body .pill {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #B8B8B8;
  border-radius: 8px;
}
body .pill.live::before {
  background: #4CAF50;
}
body .sync-chip[class*="success"],
body .sync-chip.success {
  background: rgba(76,175,80,0.12);
  color: #4CAF50;
}
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: #EF5350;
}

/* ─────────────────────────────────────────────────────────────────────
   27. DATA TABLE — palette pass
   ───────────────────────────────────────────────────────────────────── */
body .data-table th {
  background: #232525;
  color: #8A8A8A;
  border-bottom: 1px solid #2A2A2A;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
body .data-table td {
  color: #E5E5E5;
  border-bottom: 1px solid #232525;
  font-size: 14px;
}
body .data-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

/* ─────────────────────────────────────────────────────────────────────
   28. MOBILE CHAT PANEL — patch #1A1B1B → #1F2121
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body .dashboard-view .card.chat-panel {
    background: #1F2121 !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   29. MISC OFF-PALETTE OVERRIDES
   ───────────────────────────────────────────────────────────────────── */

/* #e8efe9 → #E5E5E5 for card h3 */
body .card h3 {
  color: #E5E5E5;
}

/* Sidebar nav hover was #ffffff → #E5E5E5 */
body .sidebar .nav-item:hover {
  color: #E5E5E5;
}

/* .kpi-label was #8a9690 → #8A8A8A */
body .kpi-label {
  color: #8A8A8A;
}

/* .eyebrow was #1E88E5 (garish blue) → #8A8A8A */
body .eyebrow {
  color: #8A8A8A;
}

/* page-title was #e8ecef → #E5E5E5 */
body .page-title {
  color: #E5E5E5;
}

/* #9AA0A6 "Recent actions" section-label → #8A8A8A */
body .section-label[style*="color:#9AA0A6"],
body [style*="color:#9AA0A6"] {
  color: #8A8A8A;
}

/* #C62828 error red → #EF5350 */
body [style*="background:#C62828"] {
  background: #EF5350;
}

/* Chat panel radial gradient overlay → remove */
body .chat-panel::after {
  display: none;
}

/* KPI pills row */
body .kpi-pill {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #B8B8B8;
  border-radius: 8px;
  transition: border-color .12s ease;
}
body .kpi-pill:hover {
  border-color: #3A3A3A;
  color: #E5E5E5;
}
body .kpi-pill.is-active,
body .kpi-pill[aria-pressed="true"] {
  background: rgba(33,150,243,0.10);
  border-color: rgba(33,150,243,0.3);
  color: #2196F3;
}

/* Quick action buttons */
body .qa-btn {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  color: #B8B8B8;
  border-radius: 8px;
  font-weight: 500;
  transition: border-color .12s ease, color .12s ease;
}
body .qa-btn:hover {
  border-color: #3A3A3A;
  color: #E5E5E5;
}

/* ─────────────────────────────────────────────────────────────────────
   30. AI THINKING / SOURCE LINKS — palette
   ───────────────────────────────────────────────────────────────────── */
body .ai-thinking .thinking-step.is-active .tk-dot {
  background: #2196F3;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.15);
}
body .ai-thinking .thinking-step .tk-source {
  color: #B8B8B8;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
}
body .ai-thinking .thinking-step .tk-source:hover {
  background: rgba(33,150,243,0.08);
  border-color: rgba(33,150,243,0.25);
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   31. HISTORY / FLOATING PILL OVERRIDES — #0D47A1 → #2196F3 or muted
   ───────────────────────────────────────────────────────────────────── */
body .home-tab-dot {
  background: #2196F3;
}
body .sidebar-collapse-btn:hover {
  background: rgba(33,150,243,0.10);
  border-color: rgba(33,150,243,0.3);
  color: #2196F3;
}
body .rc-icon-btn:hover {
  border-color: rgba(33,150,243,0.3);
  color: #2196F3;
}
body .rc-mic--on {
  background: rgba(33,150,243,0.15);
  border-color: #2196F3;
  color: #2196F3;
}

/* ─────────────────────────────────────────────────────────────────────
   32. FLOATING CHAT TOGGLE — locked palette (no garish glow)
   ───────────────────────────────────────────────────────────────────── */
body .floating-chat-toggle {
  background: #2196F3;
  color: #191A1A;
  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);
}

/* ─────────────────────────────────────────────────────────────────────
   33. SCROLLBAR — consistent #2A2A2A thumb
   ───────────────────────────────────────────────────────────────────── */
body ::-webkit-scrollbar-thumb {
  background: #2A2A2A;
}
body ::-webkit-scrollbar-thumb:hover {
  background: #3A3A3A;
}

/* === END v40.5ak-polish === */

/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* GPU compositing on .ai-view so ::before / ::after backdrop-filter works
     on iOS Safari. will-change:transform was removed here because it creates
     a containing block for position:fixed in iOS Safari/Chrome just like
     transform:translateZ(0) does — both promote the element to a stacking
     context that re-parents fixed descendants, pinning the composer under
     the topnav instead of the viewport bottom.
     v40.5at: strip all promoting properties from .ai-view; the sledgehammer
     block at the end of this file enforces fixed positioning via !important
     regardless of any remaining containing-block ancestor. */
  html body.route-ask .ai-view {
    isolation: isolate !important;
    position: relative;
  }

  /* Kill any old body::before / body::after from v40.5al */
  html body.route-ask::before,
  html body.route-ask::after {
    content: none;
    display: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* TOP glass strip — pseudo on .ai-view, height covers status bar + nav
     + a tall fade so text dissolves gradually rather than cutting off */
  html body.route-ask .ai-view::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* status bar (~50-60px on iPhone) + nav (~64px) + fade zone (60px) */
    height: calc(env(safe-area-inset-top, 0px) + 124px);
    pointer-events: none;
    z-index: 90;
    /* Tinted dark fill so text behind reads as faded, not hidden */
    background: linear-gradient(
      to bottom,
      #191A1A 0%,
      #191A1A 50%,
      rgba(25, 26, 26, 0.85) 70%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    /* Backdrop blur on whatever scrolls behind it */
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    /* Mask the blur to fade out smoothly so it doesn't have a hard edge */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 65%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 65%,
      transparent 100%
    ) !important;
  }

  /* BOTTOM glass strip — fade UP into messages so text never bleeds
     past the composer. Composer height ~64px + safe-area + fade zone */
  html body.route-ask .ai-view::after {
    content: '';
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 140px);
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(
      to top,
      #191A1A 0%,
      #191A1A 50%,
      rgba(25, 26, 26, 0.85) 70%,
      rgba(25, 26, 26, 0) 100%
    ) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    -webkit-mask-image: linear-gradient(
      to top,
      black 0%,
      black 65%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to top,
      black 0%,
      black 65%,
      transparent 100%
    ) !important;
  }

  /* Layering */
  html body.route-ask .ai-view .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap {
    z-index: 6 !important;
  }
  html body.route-ask nav.mobile-topnav,
  html body.route-ask nav.mobile-topnav.mobile-topnav--v1940 {
    z-index: 130;
  }

  /* v40.5ay: top fade removed in v40.5ax — 96px was wasted, tightened to 52px.
     Bottom: 140px keeps composer clear of last message. */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
  }
}

/* === END v40.5am === */

/* ═════════════════════════════════════════════════════════════════════════
   v40.5ao — STOP TOP FADE FROM SWALLOWING FIRST MESSAGE
   The v40.5am top glass strip is ~124px tall (status bar + topnav + 60px
   fade zone). Previously .ai-messages padding-top was 96px on mobile, so
   the first user bubble sat INSIDE the 60px fade band and looked cut off.
   Push the first message clear of the entire fade region.

   Desktop has no fade strip but does have a sticky/glass topbar; bump its
   padding too so the first message doesn't kiss the topbar.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    /* v40.5ay: top fade removed → no buffer needed beyond topnav.
       safe-area-inset + 52px (topnav 48px + 4px breathing). */
    padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
  }
}
@media (min-width: 821px) {
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    /* desktop topbar ~56px + 24px breathing so the first bubble is fully
       visible below the topbar with no fade interaction */
    padding-top: 88px;
  }
}

/* === END v40.5ao first-message-clear === */

/* ═════════════════════════════════════════════════════════════════════════
   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: #1F2121 !important;
  border-right-color: #2A2A2A !important;
}

/* Right pane: was #FFFFFF */
.msg-right-pane {
  background: #191A1A !important;
}

/* Thread header: was rgba(255,255,255,0.92) */
.msg-thread-header {
  background: #1F2121 !important;
  border-bottom-color: #2A2A2A !important;
}

/* Bubble stream: was #FFFFFF */
.msg-bubble-stream {
  background: #191A1A !important;
}

/* Failed bubble: was #FFFFFF (light mode) — keep dark card surface */
.msg-bubble-row.is-failed .msg-bubble {
  background: #1F2121 !important;
  color: #EF5350 !important;
  border-color: #EF5350 !important;
}

/* Composer input: was #FFFFFF */
.msg-composer-input {
  background: #191A1A !important;
  border-color: #2A2A2A !important;
  color: #E5E5E5 !important;
}
.msg-composer-input:focus {
  border-color: #2196F3 !important;
  background: #191A1A !important;
}
.msg-composer-input::placeholder {
  color: #8A8A8A;
}

/* Search box focus: was #fff */
.msg-search:focus {
  background: #191A1A !important;
}

/* Thread row hover: ensure palette-correct in all modes */
.msg-thread-row:hover {
  background: rgba(255,255,255,0.04) !important;
}
.msg-thread-row.is-active {
  background: rgba(33,150,243,0.12) !important;
}

/* Thread text: override any light-mode #1d1d1f */
.msg-thread-name {
  color: #E5E5E5 !important;
}
.msg-thread-preview {
  color: #8A8A8A !important;
}
.msg-thread-time {
  color: #6B7280 !important;
}

/* Outreach modal-confirm text color (#fff is fine on dark bg, no change needed) */
/* Already correct: .outreach-modal-confirm { color: #fff; background: #8B2020; } */

/* === END v40.5ao messages-white-surface-override === */

/* ═════════════════════════════════════════════════════════════════════════
   v40.5ao -- DATA TAB BACKGROUND + OVERVIEW BREATHING ROOM
   Applied: 2026-06-02
   Fixes:
     (a) Data Sources tab: visible background behind/between the chip row
         (the strip of color showing between .gl-ds-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-ds-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-ds-view container and its direct children must be transparent.
   The visible strip was: the glass gradient from the 767px media block
   leaking onto .gl-ds-section (3 selector levels) beating the 4-level
   override only on mobile. Re-assert with matching mobile specificity. */
body .gl-ds-view,
html body .gl-ds-view {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Section wrappers (Operations, Finance, Sales, etc.) -- transparent so
   the page bg shows between cards, not a glass panel. */
body .gl-ds-view .gl-ds-header,
body .gl-ds-view .gl-ds-section,
body .gl-ds-view .gl-ds-cat {
  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. */
@media (max-width: 767px) {
  html body .gl-ds-view,
  html body .gl-ds-view .gl-ds-header,
  html body .gl-ds-view .gl-ds-section,
  html body .gl-ds-view .gl-ds-cat {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── (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. */
body .dash-hub .dash-hub-divisions {
  margin-top: 1rem;
}

/* Mobile (max 820px): tighten back slightly so it doesn't overflow.
   Still more spacious than before (was 24px, now 20px). */
@media (max-width: 820px) {
  body .dash-hub {
    padding: 20px 16px 32px !important;
    gap: 1.25rem !important;
  }
  body .dash-hub .dash-hub-kpi-strip {
    gap: 0.6rem;
  }
  body .dash-hub .dash-hub-kpi {
    padding: 0.75rem 0.85rem 0.65rem;
  }
}

/* === END v40.5ao data-tab-bg + overview-squish === */

/* ═══════════════════════════════════════════════════════════════════════════
   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).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Force composer to viewport bottom on the AI/ask route */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap--chip {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px))) !important;
    top: auto;
    z-index: 50 !important;
    background: transparent;
    padding: 6px 12px !important;
  }

  /* Give .ai-view enough bottom clearance so messages don't scroll
     under the fixed composer (~56px chip + 6px top padding + safe area).
     Reduced from 140px: composer is ~56px tall, not 140px. */
  html body.route-ask .ai-view {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
  }

  /* Top padding below the mobile topnav (~60px nav + safe-area + 12px gap) */
  html body.route-ask .ai-view .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  }

  /* Messages region: keep clear of both topnav and composer */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
  }
}

/* === END v40.5at === */

/* ═══════════════════════════════════════════════════════════════════════════
   v40.5aw — Queue UI + Per-message Edit + Composer Spacing + Stream Fix
   ───────────────────────────────────────────────────────────────────────────
   Issues 1, 2, 3, 4 shipped as one batch.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Issue 1: Message Queue region ──────────────────────────────────────── */
.ai-queue-region {
  width: 100%;
  padding: 8px 12px 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  html body.route-ask .ai-queue-region {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--composer-region-h, 60px) + var(--kb-offset, 0px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)));
    z-index: 49;
    padding: 6px 12px;
    background: #191A1A;
  }
}

.ai-queue-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8A8A8A;
  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: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 7px 10px;
  min-height: 32px;
}

.ai-queue-chip__drag {
  flex: 0 0 auto;
  color: #8A8A8A;
  cursor: grab;
  padding-top: 2px;
  display: flex;
  align-items: center;
}

.ai-queue-chip__text {
  flex: 1 1 auto;
  color: #E5E5E5;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  cursor: text;
  min-width: 0;
}

.ai-queue-chip__text:hover {
  color: #fff;
}

.ai-queue-chip__del {
  all: unset;
  flex: 0 0 auto;
  color: #8A8A8A;
  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: #EF5350;
  background: rgba(239,83,80,0.1);
}

/* ── Queue button in composer toolbar ────────────────────────────────────── */
.rc-queue-btn {
  opacity: 0.6;
}
.rc-queue-btn:hover {
  opacity: 1;
  color: #2196F3;
}

/* ── 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: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: #8A8A8A !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: #E5E5E5;
  background: rgba(255,255,255,0.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) */
@media (max-width: 768px) {
  html body.route-ask .ai-view {
    padding-bottom: calc(var(--composer-region-h, 80px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)) + 8px) !important;
  }

  /* ai-messages bottom padding also uses dynamic height */
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-region-h, 80px) + var(--kb-safe, env(safe-area-inset-bottom, 0px)) + 16px) !important;
  }

  /* Composer wrap: max padding 4px top/bottom to keep chip compact */
  html body.route-ask .ai-composer-wrap,
  html body.route-ask .ai-composer-wrap--chip {
    padding: 4px 12px max(4px, env(safe-area-inset-bottom, 4px)) !important;
  }

  /* Ensure queue region gap to composer is 0 (queue is positioned directly above) */
  .ai-queue-region + .ai-composer-wrap {
    margin-top: 0;
  }
}

/* ── 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;
}

/* === END v40.5aw === */

/* === 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: #FFFFFF !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: #FFFFFF !important;
    background: #2196F3 !important;
  }
}

/* ---- (b) Top-right status chips (Offline / Brain) ----
   The strip rule in @media (min-width: 720px) at line ~7445 already removes
   the boxed-chip chrome (no bg, no border, no border-radius). We only adjust
   color so the chip text reads as theme-muted (#B8B8B8), not 55% white.
   Higher-specificity (ID-level) targets to win against the strip rule. */
@media (min-width: 720px) {
  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,
html body .ai-composer .ai-composer-card,
html body .ai-composer .rich-composer,
html body .ask-composer {
  background: #1F2121 !important;
  background-color: #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: #E5E5E5 !important;
}
html body .rich-composer textarea,
html body .glass-composer textarea,
html body .ai-composer textarea,
html body .ai-composer input[type="text"] {
  background: transparent;
  color: #E5E5E5 !important;
}
html body .rich-composer textarea::placeholder,
html body .glass-composer textarea::placeholder,
html body .ai-composer textarea::placeholder {
  color: #8A8A8A !important;
}
/* === END v40.5ax === */

/* ============================================================
   === v40.5ay Enterprise polish ===
   Mobile layout, code wrap, thinking separator, send button clip,
   toolbar depth, font fallbacks.
   ============================================================ */

/* 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 .ai-thinking .thinking-step .tk-meta,
html body .gl-ds-stats {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-variant-ligatures: none;
}

/* Inline code on assistant bubbles: wrap at word boundaries only.
   v40.5az Fix-4: :not(pre) ensures pre code inherits pre (no wrap). */
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;
}

/* Code blocks (pre): consistent dark surface + visible scroll affordance.
   v40.5ay: high-specificity override of line 11879 (.msg-bubble.msg-assistant) +
   cover every render path (ai-prose, cl-prose, cl-stream-text, pre.cl-code). */
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;
  /* === v40.5az Fix-4: scroll horizontally, never wrap mid-token === */
  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;
  /* === v40.5az Fix-4: pre code must not wrap (inherits pre) === */
  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). */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    background: linear-gradient(to top, #191A1A 0%, #191A1A 60%, rgba(25,26,26,0.85) 85%, transparent 100%) !important;
  }
}

/* Mobile composer: prevent send-button right-edge clip; tighten toolbar. */
@media (max-width: 820px) {
  html body .rich-composer {
    box-sizing: border-box;
    padding: 8px 10px !important;
  }
  html body .rich-composer .rc-toolbar {
    padding: 8px 4px 0 4px !important;
    gap: 6px !important;
  }
  html body .rich-composer .rc-send,
  html body .ai-view .rc-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
  }
  /* Don't let the left chip row push the send off-screen. */
  html body .rich-composer .rc-left {
    min-width: 0;
    flex: 1 1 auto !important;
  }
  html body .rich-composer .rc-right {
    flex: 0 0 auto !important;
  }
}

/* Mobile thinking block: tighter rhythm and full-width meta. */
@media (max-width: 820px) {
  html body .ai-thinking {
    padding: 0.5rem 0 0.65rem;
    margin-bottom: 0.7rem !important;
  }
  html body .ai-thinking .thinking-step {
    font-size: 0.82rem !important;
  }
  html body .ai-thinking .thinking-step .tk-meta {
    max-width: 100%;
    font-size: 0.72rem !important;
  }
}

/* Remove any legacy fixed top fade that was 92px tall (taller than the 60px
   topnav) and intercepting taps in the 32px gap. */
html body .ai-top-fade,
html body .ai-view .ai-top-fade,
html body [class*="top-fade"] {
  display: none;
}
/* === END v40.5ay === */

/* ============================================================
   === v40.5az Enterprise CSS Overhaul ===
   Fixes: composer ghost, keyboard dead space, pencil outside
   card, pre wrap, subagent chip, status-bar bleed, sweep.
   All new selectors tagged v40.5az for findability.
   ============================================================ */

/* === v40.5az Fix-1: Composer overflow - Model pill ghost + single-row === */

/* 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;
}

@media (max-width: 820px) {
  /* Toolbar: single-row, no wrapping, clip overflow. */
  html body .rich-composer .rc-toolbar,
  html body .ai-view .rich-composer .rc-toolbar {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* Left cluster: shrink to fit, no overflow. */
  html body .rich-composer .rc-left,
  html body .ai-view .rich-composer .rc-left {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden !important;
    gap: 6px !important;
  }

  /* Right cluster: never shrink. */
  html body .rich-composer .rc-right,
  html body .ai-view .rich-composer .rc-right {
    flex: 0 0 auto !important;
    min-width: 0;
    gap: 6px !important;
  }

  /* Data chip: hide on mobile (keep Web + Model). */
  html body .rich-composer .rc-chip[data-chip="data"],
  html body .ai-view .rich-composer .rc-chip[data-chip="data"] {
    display: none;
  }

  /* Queue/list button: hide on mobile toolbar row. */
  html body .rich-composer .rc-queue-btn,
  html body .ai-view .rich-composer .rc-queue-btn {
    display: none;
  }

  /* While typing: also hide the Data chip (already done above, kept explicit). */
  html body .rich-composer.rc-typing .rc-chip[data-chip="data"],
  html body .ai-view .rich-composer.rc-typing .rc-chip[data-chip="data"] {
    display: none;
  }
}

/* === v40.5az Fix-2: Keyboard open - dock composer + launcher === */

/* When keyboard is open (body.kb-open set by JS), use 100svh (small viewport)
   so the page does not overflow above the keyboard. Then push the home-launcher
   to the very bottom of the visual viewport area, just above the composer. */
@media (max-width: 820px) {
  body.kb-open.route-ask:not(.ai-has-messages) .ai-view.ai-home {
    height: 100svh !important;
    min-height: 0;
    justify-content: flex-end !important;
  }

  /* Re-anchor the home-launcher tabs row just above the fixed composer when
     keyboard is open. Uses --kb-offset to push up with the keyboard. */
  body.kb-open.route-ask:not(.ai-has-messages) .ai-view .home-launcher,
  body.kb-open.route-ask:not(.ai-has-messages) section#main .ai-view .home-launcher {
    bottom: calc(var(--kb-offset, 0px) + 82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The beaded wordmark: hide it when keyboard open so it does not float in
     the middle of the blank void. */
  body.kb-open .ai-view .ai-bg-mark {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease !important;
  }
}

/* === v40.5az Fix-3: Inline reply pencil outside card === */

/* The ai-new-chat-btn floats as a sibling of .rich-composer inside
   .ai-composer-wrap. On mobile in-thread state it renders OUTSIDE the
   rounded card. Fix: hide it on mobile (the + inside composer is sufficient,
   and the sidebar drawer already has a new-chat action). */
@media (max-width: 820px) {
  html body .ai-new-chat-btn {
    display: none;
  }
}

/* === v40.5az Fix-5: Perplexity-style live thinking shimmer + subagent chip === */

/* 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; }
}

/* v40.5bo: removed !important from shimmer — v40.5bj overrides cleanly by cascade order */
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,
html body .cl-step--active .cl-step-text,
html body .ai-thinking-step.is-active .step-text {
  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: rgba(33, 150, 243, 0.08);
  border: 1px solid rgba(33, 150, 243, 0.18);
  color: #2196F3;
  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. */
.cl-tool-card {
  display: grid;
  grid-template-columns: 22px 1fr 22px 22px;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: #1F2121;
  border: 1px solid #2A2A2A;
}

.cl-tool-card-title {
  color: #E5E5E5;
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-tool-card-detail {
  grid-column: 1 / -1;
  color: #8A8A8A;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sparkle spinner for active tool card (uses existing cl-spin keyframe). */

.cl-sparkle {
  width: 18px;
  height: 18px;
  color: #B8B8B8;
  animation: cl-spin 1.8s linear infinite;
  flex-shrink: 0;
}

/* Stop button inside tool card. */
.cl-stop-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 0;
  color: #B8B8B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.cl-stop-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #E5E5E5;
}

.cl-stop-btn svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

/* === v40.5az Fix-6: Status-bar safe area (mobile topnav + bg mark) === */

@media (max-width: 820px) {
  /* The fixed header band (body.route-ask::before) is 60px but does NOT
     account for safe-area-inset-top on iOS notch. Expand its height so
     it fills the notch zone with the bg color instead of letting the
     background pattern bleed through. */
  html body.route-ask::before,
  html body.route-ask.sidebar-collapsed::before {
    height: calc(env(safe-area-inset-top, 0px) + 60px) !important;
  }

  /* The beaded wordmark is positioned at top:50% (centered). On empty-state
     before keyboard opens, it sits at vertical center which can bleed into
     the status bar area if the phone has a large safe-area-inset-top.
     Ensure it respects the inset by capping its vertical position. */
  html body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    top: max(50%, calc(env(safe-area-inset-top, 0px) + 80px)) !important;
  }

  /* If there is a ::before on body.route-ask that paints a color strip,
     ensure it is the exact bg color so no contrast band appears. */
  html body.route-ask::before {
    background: #191A1A !important;
    background-color: #191A1A !important;
  }
}

/* === v40.5az Sweep A: Border color consolidation to #2A2A2A === */

/* Cards and panels using legacy near-black or off-spec border colors. */
html body .card,
html body .gl-card,
html body .report-card {
  border-color: #2A2A2A !important;
}

html body .floating-chat {
  border-color: #2A2A2A !important;
}

html body .sidebar-nav-item:focus-visible,
html body .nav-item:focus-visible {
  outline-color: #2196F3;
}

/* === v40.5az Sweep B: Card border-radius 8px -> 12px === */

html body .gl-card,
html body .report-card,
html body .data-card {
  border-radius: 12px;
}

/* === v40.5az Sweep C: Trim wasteful 24px padding on mobile === */

@media (max-width: 820px) {
  html body .gl-card,
  html body .report-card {
    padding: 16px !important;
  }

  html body .modal-body,
  html body .modal-content {
    padding: 16px !important;
  }
}

/* === v40.5az Sweep D: box-shadow pure-black -> alpha === */

/* 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;
}

/* === v40.5az Sweep E: no em-dashes in visible output (CSS/JS only, not content) === */
/* (No em-dashes found in CSS comment text in this file - confirmed by grep.) */

/* === END v40.5az === */

/* ============================================================================
   === v40.5ba — Center composer + Kill white backgrounds =====================
   
   Issue 1: AI Ask page empty state — center composer vertically
   Issue 2: Automations, Divisions, Data Sources white cards -> dark theme
   Polish: vertical rhythm, dividers, hover, skeletons, scrollbars
   ============================================================================ */

/* === v40.5ba Issue 1: Center composer on Ask empty state === */

/* 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. */
@media (min-width: 821px) {
  html body.route-ask:not(.ai-has-messages) .ai-view,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100dvh - 60px);
    padding-top: 0;
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }

  html body.route-ask:not(.ai-has-messages) .ai-view .ai-hero,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-hero {
    flex: 0 0 auto !important;
    width: 100%;
    padding: 0 0 0.5rem;
  }

  html body.route-ask:not(.ai-has-messages) .ai-view .ai-composer-wrap,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .ai-composer-wrap {
    flex: 0 0 auto !important;
    width: 100%;
    position: static;
    background: transparent;
    padding: 0;
    margin-top: 0;
  }

  /* Chips/launcher strip: appears just above composer */
  html body.route-ask:not(.ai-has-messages) .ai-view .home-launcher,
  html body.route-ask:not(.ai-has-messages) .ai-view.ai-home .home-launcher {
    flex: 0 0 auto !important;
    width: 100%;
    margin: 0;
    gap: 0.5rem;
  }
}

/* Mobile (< 821px): center when keyboard closed, dock when keyboard open */
@media (max-width: 820px) {
  html body.route-ask:not(.ai-has-messages) .ai-view {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-height: 100dvh !important;
    padding: 0 16px;
    gap: 0.75rem;
  }

  /* When keyboard is open: dock to bottom */
  html body.route-ask:not(.ai-has-messages).kb-open .ai-view {
    justify-content: flex-end !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

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

/* === v40.5ba Issue 2: Kill white glass on Automations cards === */
/* 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;
}

html[data-app-theme="dark"] body .automation-card:hover,
html[data-app-theme="dark"] body .automations-view .automation-card:hover {
  border-color: #3A3A3A !important;
  background: #222424 !important;
  background-color: #222424 !important;
  background-image: none;
  box-shadow: none;
  transform: none;
}

/* Text inside automation cards */
html[data-app-theme="dark"] body .automation-card .automation-card-title,
html[data-app-theme="dark"] body .automation-card [class*="-name"],
html[data-app-theme="dark"] body .automation-card [class*="-title"],
html[data-app-theme="dark"] body .automations-view [class*="automation"] [class*="-title"],
html[data-app-theme="dark"] body .automations-view [class*="automation"] [class*="-name"] {
  color: #E5E5E5 !important;
}

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 */
html[data-app-theme="dark"] body .automations-view .automations-toolbar,
html[data-app-theme="dark"] body .automations-view .automations-sub {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* === v40.5ba Issue 2: Kill white on Data Sources cards === */
/* Line 3138: .gl-ds-card { background: rgba(255, 255, 255, 0.92) !important } */

html[data-app-theme="dark"] body .gl-ds-card,
html[data-app-theme="dark"] body .gl-ds-grid .gl-ds-card,
html[data-app-theme="dark"] body .gl-ds-view .gl-ds-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;
}

html[data-app-theme="dark"] body .gl-ds-card:hover,
html[data-app-theme="dark"] body .gl-ds-view .gl-ds-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-ds-card.is-connected,
html[data-app-theme="dark"] body .gl-ds-view .gl-ds-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-ds-card .gds-title {
  color: #E5E5E5 !important;
}
html[data-app-theme="dark"] body .gl-ds-card .gds-desc {
  color: #B8B8B8 !important;
}
html[data-app-theme="dark"] body .gl-ds-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-ds-view {
  background: transparent;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* === v40.5ba Issue 2: Kill white on Divisions cards === */
/* 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;
}

html[data-app-theme="dark"] body .gl-division-card:hover,
html[data-app-theme="dark"] body .gl-divisions-grid .gl-division-card:hover {
  border-color: rgba(33, 150, 243, 0.35) !important;
  background: #232525 !important;
  background-color: #232525 !important;
  background-image: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !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 */
html[data-app-theme="dark"] body .gl-divisions-view,
html[data-app-theme="dark"] body .gl-divisions-grid {
  background: transparent;
  background-image: none;
}

/* === v40.5ba Issue 2: Overview / Dashboards page === */
/* Overview cards already look dark from screenshots - reinforce */

html[data-app-theme="dark"] body .dr-overview-page {
  background: transparent;
}

html[data-app-theme="dark"] body .dr-overview-card {
  background: #1F2121 !important;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #2A2A2A !important;
  box-shadow: none;
  color: #E5E5E5 !important;
}

html[data-app-theme="dark"] body .dr-overview-card:hover {
  background: #222424 !important;
  border-color: rgba(33, 150, 243, 0.30) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

html[data-app-theme="dark"] body .dr-chip-section {
  background: #1F2121 !important;
  border: 1px solid #2A2A2A !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 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;
}

/* === v40.5ba Polish A: Vertical rhythm sweep === */

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; }

/* === v40.5ba Polish B: Section dividers under tab strips === */

html[data-app-theme="dark"] body .tab-strip,
html[data-app-theme="dark"] body .tabs-row,
html[data-app-theme="dark"] body .nav-tabs {
  border-bottom: 1px solid #2A2A2A;
  margin-bottom: 24px;
}

/* === v40.5ba Polish C: Hover/active transition on buttons === */

/* v40.5bb: !important removed from transition/transform; [data-app-theme=dark] attr wins over html body */
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);
}

/* === v40.5ba Polish D: Dark loading skeletons === */

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;
}

/* === v40.5ba Polish E: Scrollbar consistency === */

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);
}

/* === v40.5ba Polish F: Fix send button white-on-dark (desktop) === */
/* v40.5bb: !important removed; html[data-app-theme=dark] body specificity wins over .composer-send:hover */
/* Line 415: .composer-send:hover { background: #ffffff } - 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 */
/* v40.5bb: !important removed; html[data-app-theme=dark] body beats body .kpi-pill: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;
}

/* === v40.5ba: Toggle switch off-state dark === */
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 .automations-view .auto-status--active,
html[data-app-theme="dark"] body .automations-view .status-pill--active {
  color: #2EE6A0;
  background: rgba(46, 230, 160, 0.10);
}
html[data-app-theme="dark"] body .automations-view .auto-status--paused,
html[data-app-theme="dark"] body .automations-view .status-pill--paused {
  color: #B8B8B8;
  background: rgba(184, 184, 184, 0.10);
}
html[data-app-theme="dark"] body .automations-view .auto-status--error,
html[data-app-theme="dark"] body .automations-view .status-pill--error {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.10);
}

/* === END v40.5ba === */

/* === v40.5ba patch 2: Kill backdrop-filter on ds-header and mt-switch in dark mode === */

html[data-app-theme="dark"] body .gl-ds-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;
}

/* === END v40.5ba patch 2 === */

/* ============================================================================
   === v40.5bb Totaly thinking spinner + code efficiency =====================
   ============================================================================ */

/* === v40.5bb Spinner: pre-init thinking header (shows immediately on send) === */
.cl-thinking-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #B8B8B8;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 0 8px;
}

.cl-thinking-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #2196F3;
  flex-shrink: 0;
}

.cl-thinking-spinner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cl-thinking-label {
  color: #B8B8B8;
  font-size: 13px;
  letter-spacing: 0.01em;
}

@keyframes tot-spin {
  to { transform: rotate(360deg); }
}

/* Done state: spinner stops, accent turns green */
.cl-thinking-header.is-done .cl-thinking-spinner {
  animation: none;
  color: #2EE6A0;
}
.cl-thinking-header.is-done .cl-thinking-label {
  color: #8A8A8A;
}

/* === v40.5bb Efficiency: consolidate duplicate spin keyframes ===
   All components that used msg-spin / apm-spin / cs-ring-spin / cs-spinner
   now reference tot-spin. Original names kept as aliases via animation-name
   where they are structurally identical (rotate 0->360, linear, no from/to
   difference). Approach: re-declare them as single-line wrappers pointing at
   the same body so the browser only stores one interpolation table. */

/* Alias: cl-spin -> identical to tot-spin */
@keyframes cl-spin   { to { transform: rotate(360deg); } }
/* etlSpin, cs-ring-spin, cs-spinner, apm-spin, msg-spin are all
   from:0 to:360 linear -> no change needed; they're already identical.
   Kept as-is to avoid selector search-and-replace risk. */

/* === v40.5bb Efficiency: hide stale perplexity plex-think inside claude-thinking ===
   The rule at ~line 12053 (.ai-thinking .plex-think { display:none })
   is correct. The duplicate rule at ~18656 is redundant. Both kept for safety
   but flagged here. No new rule added. */

/* === v40.5bb Efficiency: ensure .claude-stream is always visible when non-empty === */
html body .ai-thinking.claude-thinking .claude-stream:not(:empty) {
  display: block;
  min-height: 36px;
}

/* === v40.5bb Mobile rhythm: constrain void between user bubble and composer ===
   The screenshot shows a large empty area. This ensures .ai-messages doesn't
   grow beyond the viewport while the single assistant bubble loads. */
html body .ai-messages {
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
}

/* === END v40.5bb === */
/* Note: composer-send hover !important reduced in-place at v40.5ba Polish F (line ~31254) */

/* ============================================================================
   === v40.5bc — Pin composer + Kill iOS chip + Efficiency pass ===============
   ============================================================================ */

/* === v40.5bc Issue A: Hide stray rounded arc below spinner ===
   The old .ai-thinking skeleton card (empty state) was visible as a faint
   rounded-rect arc below the cl-thinking-pre header. Hide any empty block
   containers in the claude-stream until real content arrives via
   content_block_start. The cl-thinking-pre header is the ONLY visible element
   during the pre-stream wait. */
.claude-stream .ai-thinking:empty,
.claude-stream .cl-thinking-block: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. */
@media (max-width: 820px) {
  /* v40.5bo: Issue B+C kb-open composer rules moved to v40.5bo block. */

  /* === v40.5bc Issue D: Kill iOS form-assistant bar via contenteditable ===
     contenteditable elements do NOT trigger iOS Safari's form-assistant bar
     (the up/down arrow + checkmark chip). The .rc-input replaces the textarea.
     Textarea fallback: attributes are set in HTML, but the CE approach is used. */
  .rc-input {
    outline: none;
    min-height: 24px;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    white-space: pre-wrap;
    font: inherit;
    color: inherit;
    caret-color: #E5E5E5;
    line-height: 1.5;
    padding: 0;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
  }
  /* Placeholder via CSS on empty contenteditable */
  .rc-input:empty::before {
    content: attr(data-placeholder);
    color: #7a7a79;
    pointer-events: none;
  }
}

/* === v40.5bc Issue F: Efficiency — GPU compositing for spinner ===
   Promotes the spinner to its own compositor layer so rotation is handled
   by the GPU and does not trigger paint or layout. */
.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;
}

/* === v40.5bc Issue F: Efficiency — kill !important overuse ===
   Below rules replace prior chains with proper specificity.
   Each removes one per the "10 more rules max" mandate. */

/* Reduce: cl-thinking-header display */
html body .cl-thinking-header {
  display: flex;
}

/* 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. */

/* === END v40.5bc === */

/* === v40.5bc: contenteditable .rc-input global styles ===
   These supplement the .rc-textarea rules since .rc-input has both classes. */

/* 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: #C5C5C4;
  caret-color: #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 */
@media (max-width: 820px) {
  html body .ai-view .rich-composer .rc-input {
    font-size: 15px;
    color: #F3F2EF;
    min-height: 26px;
    max-height: 120px;
  }
  html body .ai-view .rich-composer .rc-input:empty::before {
    color: #6B6F70;
  }
}

/* === END v40.5bc contenteditable === */

/* === v40.5bc Issue A fix2: The .ai-thinking element gets .claude-thinking added
   to it by _claudeInit(). Once the Claude-faithful renderer takes over, kill
   the legacy border-bottom and padding that create the stray rounded arc. */
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;
}
/* === END v40.5bc Issue A fix2 === */

/* ============================================================
   === v40.5bd — Opaque composer + fade mask + Y-axis spinner
   Tag: v40.5bd. Three targeted fixes only.
   ============================================================ */

/* === v40.5bd Fix-1A: Composer fully opaque in-thread (no text bleed-through) ===
   When ai-has-messages is active the composer MUST be a solid surface.
   The gradient wrappers at lines 966, 1143, ~30479 are overridden here.
   Both the wrap background and the rich-composer card are pinned to
   #191A1A / #1F2121 respectively. backdrop-filter killed everywhere in-thread. */

/* Desktop in-thread: wrap carries solid background */
html body.route-ask.ai-has-messages .ai-composer-wrap {
  background: #191A1A;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile in-thread: override the gradient background set at ~line 30479 */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    background: #191A1A;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* v40.5bd kb-open background rule removed in v40.5bo (handled by v40.5be+bn) */

/* The inner card itself: always #1F2121, 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: #1F2121;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* === v40.5bd Fix-2: Last message stops above composer ===
   The ai-messages container (page scroll on mobile, inner scroll on desktop)
   needs padding-bottom = composer-h + fade-mask-height + breathing room.
   This rule is placed at end-of-file to win cascade over all prior rules. */

/* Mobile: page is the scroll surface, composer is position:fixed at bottom */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-h, 120px) + env(safe-area-inset-bottom, 0px) + 80px);
  }

  /* kb-open: same formula, keyboard reduces visual viewport so composer sits at 0 */
  html body.kb-open.route-ask .ai-view .ai-messages,
  html body.kb-open .ai-messages {
    padding-bottom: calc(var(--composer-h, 120px) + 80px);
  }
}

/* Desktop: inner scroll container */
@media (min-width: 821px) {
  html body.route-ask.ai-has-messages .ai-view .ai-messages {
    padding-bottom: calc(var(--composer-h, 120px) + 80px);
  }
}

/* === END v40.5bd === */

/* ============================================================
   === v40.5be Visual Fixes ===================================
   Six targeted fixes. Source-of-truth approach: each block
   overrides the prior cascade cleanly.
   ============================================================ */

/* === 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. */
@media (max-width: 820px) {
  /* Ensure the scroll container has enough bottom padding so text never
     hides under the fixed composer. padding-bottom = composer height +
     safe area + generous buffer (120px).
     Also: remove max-height cap from line 1140 so the container can expand
     to fill the viewport and scroll freely. The composer is position:fixed
     so it does NOT reduce available scroll height.
     required to beat v40.5bd at line 31740. */
  html body.route-ask.ai-has-messages .ai-view .ai-messages,
  html body.route-ask.ai-has-messages .ai-messages,
  html body.ai-has-messages .ai-messages {
    padding-bottom: calc(var(--composer-h, 140px) + env(safe-area-inset-bottom, 20px) + 120px);
    max-height: none; /* let page scroll, not inner overflow */
    overflow-y: visible; /* page is the scroller on mobile */
    min-height: 0;
  }

  /* kb-open: keyboard owns the bottom space, composer is fixed at 0 */
  html body.kb-open .ai-messages {
    padding-bottom: calc(var(--composer-h, 140px) + 100px);
  }
}

/* Upgrade fade mask: fully solid #191A1A for bottom 40px so text is masked cleanly */
/* === v40.5be Fix-4: Kill iOS form-assistant bar ===
   Ensure ALL file inputs inside the composer get tabindex=-1 so iOS
   does not include them in its form navigation. The contenteditable is
   already in place. This CSS hides any stray inputs from the a11y tree. */
.rc-plus-wrap input[type="file"] {
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
  tab-index: -1;
}

/* === v40.5be Fix-5: Kill leaf-logo bleed through status bar ===
   The .ai-bg-mark uses position:fixed with top:50%, so it doesn't bleed
   into the status bar. But any body background-image can show through.
   Force a solid status-bar-safe zone at the top of body. */
@media (max-width: 820px) {
  /* Kill the bg-mark entirely — it reads as noise in the status bar area */
  body.route-ask .ai-view .ai-bg-mark,
  body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark,
  .ai-view .ai-bg-mark {
    display: none;
  }

  /* Solid status-bar cap: pseudo on body covers the safe-area-inset-top zone */
  body.route-ask::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 44px);
    background: #191A1A;
    z-index: 9999;
    pointer-events: none;
  }

  /* Also kill any decorative background pattern on the body in ask route */
  body.route-ask:not(.ai-has-messages),
  body.route-ask {
    background-image: none;
  }

  body.route-ask:not(.ai-has-messages)::after {
    display: none;
  }
}

/* === v40.5be Fix-1C: ai-view must NOT clip message overflow on mobile ===
   Flex containers clip overflow by default. Make ai-view overflow visible
   so the padded ai-messages pushes the page height correctly. */
@media (max-width: 820px) {
  html body.route-ask.ai-has-messages .ai-view {
    overflow: visible;
    min-height: unset; /* page grows naturally with content */
  }

  /* Also: the ai-composer-wrap needs to be fixed on mobile in-thread
     so it stays at the bottom of the viewport, not bottom of the page.
     Use #main to beat line 5114 specificity. */
  html body.route-ask.ai-has-messages section#main .ai-view .ai-composer-wrap,
  html body.route-ask.ai-has-messages .ai-composer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 50;
    background: #191A1A;
    background-image: none;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* === END v40.5be === */

/* ============================================================================
   === v40.5bf: bleed/queue/thought fixes + enterprise pass ==================
   ============================================================================ */

/* === 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. */
@media (max-width: 768px) {
  html body .rc-queue-btn { display: none; }
}
@media (min-width: 769px) {
  html body .rich-composer:not(.rc-has-queue) .rc-queue-btn { display: none; }
}

/* === v40.5bf: send button touch safety ===
   touch-action: manipulation removes the 300ms tap delay that made the user
   think the first tap did nothing. Larger touch target on mobile (44px is
   the Apple HIG minimum) so the send arrow is hard to miss. */
html body .rc-send {
  touch-action: manipulation;
  min-width: 36px;
  min-height: 36px;
}
@media (max-width: 768px) {
  html body .rc-send { min-width: 44px; min-height: 44px; }
}

/* === 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. */

/* v40.5bh: tightened from 200+120px (= ~450px void) to a single
   reservation of composer-h + 48px. The last-child handles vertical
   spacing alone; the scroll container only needs to make the last
   bubble reachable above the fixed composer. */
body.route-ask.ai-has-messages .ai-thread > *:last-child,
body.route-ask.ai-has-messages .ai-thread .ai-msg:last-child,
body.route-ask.ai-has-messages .cl-prose-text:last-child,
body.route-ask.ai-has-messages .msg-text:last-child,
body.route-ask.ai-has-messages .ai-thread .cl-block:last-child {
  padding-bottom: calc(var(--composer-h, 140px) + var(--safe-bottom-real, 0px) + 48px);
  margin-bottom: 0;
}

/* 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. */
body.route-ask.ai-has-messages,
body.route-ask.ai-has-messages section#main,
body.route-ask.ai-has-messages .ai-view,
body.route-ask.ai-has-messages .ai-thread {
  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: #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;
}

/* === END v40.5bg === */

/* ============================================================
   === 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. */
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-avatar-chip:not(#__x__) {
  border: 0;
  border-width: 0;
  border-style: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

/* 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. */
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__x__) {
  border: 0;
  border-width: 0;
  border-style: none;
  /* v40.5eo FIX 3: no shadow on the switch container (pure transparent gap). */
  box-shadow: none;
}
/* Keep the inner pill (and active segment) fully rounded. */
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__x__),
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__x__) {
  border-radius: 999px;
}

/* ============================================================
   === 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)
   ============================================================ */
@media (max-width: 768px) {
  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark {
    display: block;
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.95;
    pointer-events: none;
    z-index: 1;
    background: transparent;
  }
  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark .ai-bg-mark__img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: var(--tenant-logo-url);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: none;
  }
  /* Tenant logo is photographic, not a vector wordmark: hide the shimmer. */
  html.has-tenant-logo body.route-ask:not(.ai-has-messages) .ai-view .ai-bg-mark .ai-bg-mark__shimmer {
    display: none;
  }
}

/* === END v40.5bi === */

/* ============================================================================
   === 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;
}

/* 3. Header row: inline, no bg, no border, no radius, no hover fill.
   v40.5bo: no !important needed — this selector is later in cascade than base. */
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;
}

/* 3a. Active header label: Totaly brand blue (#2196F3).
   v40.5bo: shimmer rule no longer has !important, so we win by cascade order. */
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;
}

/* 3b. Symbol slot: small (14px). v40.5bo: specificity beats base, no !important. */
html body .claude-thinking .cl-thinking .cl-symbol {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #8A8A8A;
}
html body .claude-thinking .cl-block.cl-thinking.is-active .cl-symbol {
  color: #2196F3;
}

/* 3c. Spinner ring (legacy CSS ring, not SVG). */
html body .claude-thinking .cl-thinking .cl-spinner {
  width: 10px;
  height: 10px;
  border-color: rgba(33,150,243,0.25);
  border-top-color: #2196F3;
}

/* 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;
}

/* === END v40.5bj thinking-perplexity === */

/* =============================================================
   === v40.5bk: Totaly hex SVG color + Perplexity-swing spin ===
   Two user fixes folded into same deploy:
   A) All active-step indicators use Totaly hex SVG, color #2196F3
   B) Spinner replaces linear rotation with ease-in-out swing keyframe
   ============================================================= */

/* A1-A4. SVG spinner color + sizing -- superseded by v40.5bl consolidated block. */

/* 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. */
@keyframes tot-spin-swing {
  0%   { transform: perspective(120px) rotateY(0deg); animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
  60%  { transform: perspective(120px) rotateY(280deg); animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  85%  { transform: perspective(120px) rotateY(340deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { transform: perspective(120px) rotateY(360deg); }
}

/* B2-B3. Animation overrides -- superseded by v40.5bl consolidated block. */

/* === END v40.5bk spinner-swing === */

/* ============================================================================
   === v40.5bl: thinking collapsed + composer gap + mask fix + CSS cleanup ===
   Six issues addressed in this block. Enterprise-clean consolidation at end.
   ============================================================================ */

/* ── 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. ──────────────────────────── */
/* v40.5bo: kb-open composer positioning via --kb-inset var (see v40.5bo block). */

/* ── 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. ─────────────────────── */
/* When NOT expanded: hide the body with maximum specificity override.
   Outranks the v40.5bj .cl-body.cl-prose rule (which had higher specificity
   but didn't set display). Using !important to guarantee it wins. */
/* v40.5bo: :not(.is-expanded) has higher specificity than base, no !important needed. */
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,
html body .cl-symbol .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),
html body .cl-symbol .cl-thinking-spinner svg circle:nth-of-type(2) {
  animation-delay: 0.18s;
}
html body .cl-thinking-spinner svg circle:nth-of-type(3),
html body .cl-symbol .cl-thinking-spinner svg circle:nth-of-type(3) {
  animation-delay: 0.36s;
}
html body .cl-thinking-spinner svg,
html body .cl-symbol .cl-thinking-spinner svg {
  color: #2196F3;
  width: 14px;
  height: 14px;
}
html body .cl-symbol .cl-thinking-spinner {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Done state: dots settle solid, no pulse */
html body .cl-thinking-header.is-done .cl-thinking-spinner svg circle,
html body .cl-block.cl-thinking.is-done .cl-symbol .cl-thinking-spinner svg circle {
  animation: none;
  opacity: 1;
}
@keyframes totaly-think-pulse {
  0%, 70%, 100% { opacity: 0.28; transform: scale(0.72); }
  35%           { opacity: 1;    transform: scale(1); }
}

/* cl-thinking-pre deleted in v40.5bo (pre-spinner architecture removed) */

/* === END v40.5bl === */

/* === v40.5bm: superseded by v40.5bo === */

/* ============================================================================
   === 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) ── */
@media (max-width: 767px) {
  /* Base: composer is fixed at bottom, rises by keyboard inset amount.
     position: fixed beats line 5114 which also uses */
  .ai-composer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    z-index: 60;
    transition: bottom 80ms ease-out;
  }
  /* When keyboard IS open: bottom equals the inset (composer sits at keyboard top).
 on bottom is the ONE necessary override to beat line 5114 bottom:0 */
  body.kb-open .ai-composer-wrap {
    bottom: var(--kb-inset, 0px);
    padding-bottom: 4px;
    background: #191A1A;
  }
  /* When keyboard is closed: flush with safe area. */
  body:not(.kb-open) .ai-composer-wrap {
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── 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;
}

/* === END v40.5bo === */

/* ============================================================================
   === 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. */
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;
}

/* 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 {
  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). */
@media (min-width: 821px) {
  html body.route-ask.ai-has-messages .ai-view {
    overflow: clip;
  }

  /* Belt-and-suspenders: ensure composer is always flex-visible at bottom */
  html body.route-ask.ai-has-messages .ai-view .ai-composer-wrap {
    display: block;
    visibility: visible;
    opacity: 1;
    flex-shrink: 0;
  }
}

/* === 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.
   ============================================================================ */

/* === END v40.5bq === */

/* ─────────────────────────────────────────────────────────────────
   v40.5br — Route Hub (Jobber-style mobile route)
   Locked tokens: surface #191A1A, panels #1F2121, cards #2A2A2A,
   radius 12px, Nexus teal #2196F3, text #E5E5E5/#B8B8B8/#8A8A8A
   ───────────────────────────────────────────────────────────────── */

.route-view {
  max-width: 760px;
  margin: 0 auto;
  /* v40.5ce: tightened top padding 18 → 8; mobile override above adds chip-safety. */
  padding: 8px 14px 120px;
  color: #E5E5E5;
}

.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);
  /* v40.5ce: tightened header padding + margin to reclaim ~16px. */
  padding: 6px 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #2A2A2A;
}
/* v40.5cj: route header rows — base styles */
.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-row1 {
  grid-template-columns: repeat(3, 1fr);
}
/* Row 2: GPS + Refresh + Lock = 3 equal cols (v40.5ct — All stops chip removed) */
.route-hdr-row2 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 10px;
}
/* Cell: make all header buttons fill their grid cell (v40.5ct: 44px tap targets) */
.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-title {
  flex: 1;
  font-size: 18px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #E5E5E5;
  margin: 0;
}
.route-gps-btn,
.route-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  color: #B8B8B8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-gps-btn:hover,
.route-refresh-btn:hover {
  background: #2A2A2A;
  color: #E5E5E5;
  border-color: #2196F3;
}
.route-gps-btn svg,
.route-refresh-btn svg { color: #2196F3; }

/* v40.11 Route CRM cards: trim header/toolbar vertical padding ~25% on
   mobile/tablet so the stop list starts higher on screen. Scoped to the
   header rows only, does not affect the stop card padding set elsewhere. */
@media (max-width: 820px) {
  .route-hdr {
    padding: 4px 0 6px;
    margin-bottom: 6px;
  }
  .route-hdr-row {
    margin-bottom: 6px;
  }
  .route-hdr-row2 {
    margin-bottom: 7px;
  }
  .route-hdr-stats {
    margin-bottom: 7px;
  }
}

.route-hdr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.route-stat {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 999px;
  padding: 8px 6px;
  text-align: center;
}
.route-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: #E5E5E5;
  line-height: 1.1;
}
.route-stat-num .rs-unit {
  font-size: 11px;
  color: #8A8A8A;
  margin-left: 2px;
  font-weight: 600;
}
.route-stat-lbl {
  font-size: 10px;
  color: #8A8A8A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.route-tabs {
  display: flex;
  gap: 4px;
  background: #1F2121;
  border-radius: 12px;
  padding: 4px;
  border: 1px solid #2A2A2A;
}
.route-tab {
  flex: 1;
  height: 32px;
  background: transparent;
  border: 0;
  color: #8A8A8A;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-tab.is-active {
  background: #2196F3;
  color: #fff;
}
.route-tab:not(.is-active):hover { color: #E5E5E5; background: #2A2A2A; }

/* List + cards */
.route-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.route-stop {
  background: #1C1B19;
  border: 1px solid #393836;
  border-radius: 12px;
  padding: 14px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.route-stop.is-closed,
.route-stop.is-skipped { opacity: 0.5; }
.route-stop.is-closed { border-color: rgba(33, 150, 243, 0.5); }
.route-stop.is-not_home { border-color: rgba(255, 167, 38, 0.45); }
.route-stop.is-reschedule { border-color: rgba(187, 134, 252, 0.45); }

/* v40.5ce — visited stop: faded grey, but still readable.
   The stop-number badge becomes green with a white check. */
.route-stop.is-visited {
  opacity: 0.55;
  background: #1A1B1B;
  border-color: rgba(33, 150, 243, 0.35);
}
.route-stop.is-visited .route-stop-num {
  background: #2196F3 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.18);
}
.route-stop.is-visited .route-stop-check {
  display: block;
}
.route-stop.is-visited .route-stop-name,
.route-stop.is-visited .route-stop-val { color: #9CA3AF; }
.route-stop.is-visited:hover { opacity: 0.85; }

/* v40.5ce — current (in-progress) stop: bright blue peripheral halo, slight
   lift. Matches the Google Material blue accent used in modal buttons. */
.route-stop.is-current {
  border-color: #2196F3;
  box-shadow:
    0 0 0 2px rgba(33, 150, 243, 0.35),
    0 0 18px rgba(33, 150, 243, 0.28);
  position: relative;
  animation: routeStopCurrentPulse 2.4s ease-in-out infinite;
}
.route-stop.is-current .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
}
@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); }
}
@media (prefers-reduced-motion: reduce) {
  .route-stop.is-current { animation: none; }
}
/* Tiny "NOW" pill on the current stop — absolutely positioned in the corner. */
.route-stop.is-current::after {
  content: 'NOW';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #2196F3;
  padding: 3px 7px;
  border-radius: 999px;
  pointer-events: none;
}

/* v40.14 — selected (drawer currently open for this stop). Separate from
   is-current: this is purely "which card is the user viewing right now",
   using Totaly blue so it's visually distinct from the is-current teal
   halo. Selected takes precedence when both classes are present because
   this rule is declared after .is-current and uses a stronger ring. */
.route-stop.is-selected {
  border-color: #2196F3 !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.is-selected .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.28) !important;
}

.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: rgba(255, 255, 255, 0.06);
  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: rgba(33, 150, 243, 0.15);
  color: #2196F3;
  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: #2A2A2A;
  color: #B8B8B8;
  border: 1px solid #3A3A3A;
}
.route-pill--status-closed {
  background: rgba(33, 150, 243, 0.15);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}
.route-pill--status-not_home {
  background: rgba(255, 167, 38, 0.15);
  color: #FFA726;
  border: 1px solid rgba(255, 167, 38, 0.4);
}
.route-pill--status-reschedule {
  background: rgba(187, 134, 252, 0.15);
  color: #BB86FC;
  border: 1px solid rgba(187, 134, 252, 0.4);
}
.route-pill--status-skipped {
  background: #2A2A2A;
  color: #8A8A8A;
  border: 1px solid #3A3A3A;
}

/* Deals (stacked) */
.route-deals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.route-deal {
  background: #2A2A2A;
  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: #E5E5E5;
}
.route-deal-val {
  font-size: 13px;
  font-weight: 700;
  color: #2196F3;
  white-space: nowrap;
}
.route-deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: #8A8A8A;
}
.route-deal-rep { color: #B8B8B8; }
.route-deal-notes {
  font-size: 12px;
  color: #B8B8B8;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #3A3A3A;
  line-height: 1.4;
}
.route-deal-addons {
  font-size: 11px;
  color: #8A8A8A;
  margin-top: 4px;
}

.route-cnote {
  background: rgba(33, 150, 243, 0.08);
  border: 1px solid rgba(33, 150, 243, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #B8B8B8;
  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: #2196F3;
  color: #fff;
  border: 1px solid #2196F3;
}
.route-act--call:hover { background: #1976D2; border-color: #1976D2; }
.route-act--nav {
  background: #2A2A2A;
  color: #E5E5E5;
  border: 1px solid #3A3A3A;
}
.route-act--nav:hover { background: #333; border-color: #2196F3; color: #2196F3; }

/* Status mark row */
.route-stop-mark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.route-mark {
  height: 38px;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  color: #B8B8B8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-mark:hover { background: #2A2A2A; color: #E5E5E5; }
.route-mark--closed:hover     { border-color: #2196F3; color: #2196F3; }
.route-mark--not_home:hover   { border-color: #FFA726; color: #FFA726; }
.route-mark--reschedule:hover { border-color: #BB86FC; color: #BB86FC; }
.route-mark--skipped:hover    { border-color: #8A8A8A; color: #8A8A8A; }

.route-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8A8A8A;
  font-size: 13px;
}

.route-skel { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.route-skel-bar {
  height: 120px;
  background: linear-gradient(90deg, #1F2121, #2A2A2A, #1F2121);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: route-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes route-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile (phone) refinements */
@media (max-width: 640px) {
  .route-view { padding: 12px 10px 140px; }
  .route-hdr-stats { gap: 4px; }
  .route-stat { padding: 7px 4px; }
  .route-stat-num { font-size: 16px; }
  .route-stop { padding: 12px; }
  .route-stop-head { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .route-stop-num { width: 28px; height: 28px; font-size: 13px; }
  .route-stop-name { font-size: 14px; }
  .route-act { height: 48px; font-size: 14px; }
  .route-mark { height: 42px; font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────
   v40.5bs — Route polish:
   - Neutralize ON HOLD orange to soft white-on-grey (brand-fit)
   - Drop the colored left stripe on stacked deal cards
   - Period dropdown (Apple-style) + Leads tab badge
   ───────────────────────────────────────────────────────────────── */

/* Neutral ON HOLD: replace amber with restrained white-on-grey */
.route-pill--hold {
  background: #2A2A2A;
  color: #E5E5E5;
  border: 1px solid #3A3A3A;
}
.route-pill--status-not_home {
  background: #2A2A2A;
  color: #B8B8B8;
  border: 1px solid #3A3A3A;
}
.route-pill--status-reschedule {
  background: #2A2A2A;
  color: #B8B8B8;
  border: 1px solid #3A3A3A;
}
.route-mark--not_home:hover   { border-color: #4A4A4A; color: #E5E5E5; }
.route-mark--reschedule:hover { border-color: #4A4A4A; color: #E5E5E5; }

/* Drop the side stripe entirely on deal cards */
.route-deal {
  border-left: 0;
  border: 1px solid #333;
}
.route-deal.is-onhold {
  border-left: 0;
  border: 1px solid #333;
}

/* Stop card: also drop side accents from status-tinted borders */
.route-stop.is-closed,
.route-stop.is-not_home,
.route-stop.is-reschedule,
.route-stop.is-skipped {
  border-color: #2A2A2A;
}
.route-stop.is-closed { background: #1B1C1C; }

/* Period dropdown (Apple-style) */
.route-period-wrap { position: relative; }
.route-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  color: #E5E5E5;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-period-btn:hover { background: #2A2A2A; border-color: #2196F3; }
.route-period-btn svg:first-child { color: #2196F3; }
.route-period-btn[aria-expanded="true"] { border-color: #2196F3; }

.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 #2A2A2A;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  /* v40.14: grew from 4 to 9 period options — cap height and let it scroll
     on short viewports instead of overflowing off-screen. */
  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: #E5E5E5;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.route-period-opt:hover { background: #2A2A2A; }
.route-period-opt.is-active { background: #2196F3; color: #fff; font-weight: 600; }

/* Leads tab badge */
.route-tabs { grid-template-columns: repeat(4, 1fr); display: grid; }
.route-tab-badge {
  display: inline-block;
  margin-left: 4px;
  background: rgba(33, 150, 243, 0.18);
  color: #2196F3;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.route-tab.is-active .route-tab-badge { background: rgba(255,255,255,0.22); color: #fff; }

@media (max-width: 640px) {
  .route-period-btn { height: 30px; font-size: 11px; padding: 0 8px; }
  .route-period-btn span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ─────────────────────────────────────────────────────────────────
   v40.5bs — Topnav consolidation + spacing + watermark restore
   ───────────────────────────────────────────────────────────────── */

/* 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 #2A2A2A !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 8px !important;
  min-width: 220px;
}
.dr-dd-section-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #8A8A8A;
  text-transform: uppercase;
  padding: 6px 10px 4px;
}
.dr-dd-divider {
  height: 1px;
  background: #2A2A2A;
  margin: 6px 4px;
}
.dr-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #E5E5E5;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s ease;
}
.dr-dd-item:hover { background: #2A2A2A; }
.dr-dd-item-icon { display: inline-flex; width: 18px; height: 18px; color: #B8B8B8; }

/* 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: #B8B8B8;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.gfp-kebab:hover { background: rgba(255,255,255,0.05); color: #E5E5E5; }
.gfp-kebab[aria-expanded="true"] { background: rgba(33,150,243,0.12); color: #2196F3; }
.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 #2A2A2A;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.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: #E5E5E5;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.gfp-kebab-item:hover { background: #2A2A2A; }
.gfp-kebab-item svg { color: #2196F3; flex-shrink: 0; }
.gfp-kebab-item-meta { font-size: 11px; color: #8A8A8A; 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; }
.chat-history-item,
.chat-hist-item,
.chat-history-row {
  padding: 6px 10px !important;
  margin-bottom: 1px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
}
.chat-history-section,
.chat-hist-section { margin-bottom: 4px !important; }
.chat-history-section-label,
.chat-hist-section-label {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  padding: 6px 10px 2px !important;
  margin: 0 !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=20260422-v1978d');
    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; }
}

/* ============================================================
   v40.5bt — Mobile topnav: Chat + Views as separate chips,
   soft long top fade, no content bleed-through
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Long, soft fade behind topnav — no visible cut line.
     Position: fixed band at top, taller than the topnav, with a smooth
     gradient that starts solid at the top and trails off slowly. */
  body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 160px !important;
    z-index: 119 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(25, 26, 26, 1.00) 0%,
      rgba(25, 26, 26, 0.96) 28%,
      rgba(25, 26, 26, 0.80) 52%,
      rgba(25, 26, 26, 0.50) 72%,
      rgba(25, 26, 26, 0.22) 88%,
      rgba(25, 26, 26, 0.00) 100%
    ) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%) !important;
  }

  /* 2. Mobile topnav — make container transparent so the fade shows through,
     remove visible borders/strip. Chips themselves provide their own pill bg. */
  html body nav.mobile-topnav.mobile-topnav--v1940 {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 121 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }

  /* 3. Break the mt-switch container apart — make it a transparent flex row
     with a real gap between Chat and Views chips. Each opt becomes its own
     pill chip. */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  /* 4. Each chip (Chat, Views) is its own pill — fully self-contained */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(20, 20, 28, 0.65) !important;
    background-color: rgba(20, 20, 28, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  /* 5. Views chip gets a tiny chevron after the label (Apple selector look).
     Use the longest-spec selector to win over the earlier ::after rule. */
  html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[data-view="dashboards"]::after {
    content: "Views \00a0˅" !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em !important;
    line-height: 44px !important;
  }

  /* 6. Active state for the standalone chip — blue fill, white text */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  /* 7. Mobile Views dropdown — Apple-style native selector menu */
  .mt-views-menu {
    position: fixed !important;
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    z-index: 200 !important;
    min-width: 240px !important;
    background: rgba(31, 33, 33, 0.98) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
  }
  .mt-views-menu.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  .mt-views-menu-section {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #8A8A8A !important;
    padding: 8px 12px 6px !important;
  }
  .mt-views-menu-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    margin: 6px 4px !important;
  }
  .mt-views-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #E5E5E5 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 120ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mt-views-menu-item:active {
    background: rgba(33, 150, 243, 0.18) !important;
  }
  .mt-views-menu-item.is-active {
    background: rgba(33, 150, 243, 0.18) !important;
    color: #FFFFFF !important;
  }
  .mt-views-menu-item-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #B8B8B8 !important;
    font-size: 16px !important;
  }
  /* v40.5ci — inline SVGs in icon span */
  .mt-views-menu-item-icon svg {
    display: block !important;
    flex-shrink: 0 !important;
    fill: none !important;
  }
  .mt-views-menu-item.is-active .mt-views-menu-item-icon {
    color: #FFFFFF !important;
  }
}
/* === end v40.5bt === */

/* ============================================================
   v40.5bu — Logo + tone-down blue + scroll bleed + chip polish
   ============================================================ */

/* 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 */
.route-tab-badge {
  background: #5B7CB8 !important;
  color: #FFFFFF !important;
  border: 0 !important;
}

/* Period dropdown chip — keep grey, no blue */
.route-period-btn {
  background: #2A2A2A !important;
  border: 1px solid #3A3A3A !important;
  color: #E5E5E5 !important;
}

/* "Use my GPS" + "Refresh" header buttons → grey not blue, no wrap */
button.route-gps-btn,
button.route-refresh-btn {
  background: #2A2A2A !important;
  border: 1px solid #3A3A3A !important;
  color: #E5E5E5 !important;
  white-space: nowrap !important;
  padding: 6px 10px !important;
}
button.route-gps-btn svg,
button.route-refresh-btn svg { flex-shrink: 0; }

/* v40.5cj: On narrow phones — grid rows stay as grid (3-col each).
   Override the old flex rule that fought the new layout. */
@media (max-width: 600px) {
  .route-hdr-row,
  .route-hdr-row1,
  .route-hdr-row2 {
    display: grid !important;
    gap: 6px !important;
  }
  .route-hdr-row1 { grid-template-columns: repeat(3, 1fr) !important; }
  .route-hdr-row2 { grid-template-columns: repeat(3, 1fr) !important; }
  .route-period-wrap { min-width: 0; }
  button.route-gps-btn,
  button.route-refresh-btn {
    font-size: 11px !important;
    padding: 6px 6px !important;
  }
  .route-lock-btn {
    font-size: 11px !important;
    padding: 6px 6px !important;
  }
}
@media (max-width: 380px) {
  /* Truly narrow: tighten text further but keep it visible */
  button.route-gps-btn span,
  button.route-refresh-btn span,
  .route-lock-btn span { font-size: 10px !important; }
}

/* v40.5cp Bug 2: unselected stop circles → dark grey, NOT blue/steel */
.route-stop-num,
.route-deal-num {
  background: #3A3A3C !important;
  color: #E5E5E5 !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. */
.route-deal-value {
  color: #E5E5E5 !important;
}

/* 2. SCROLL BLEED: push content below the topnav so it never starts
      under the chips at scrollTop=0. */
@media (max-width: 768px) {
  /* Route page wrapper */
  body.route-route #main-content,
  body.route-route .route-page,
  body.route-ask #main-content,
  body.route-chats #main-content {
    padding-top: 78px !important;
  }
  /* Specifically the route page header — give it room */
  .route-page-header {
    padding-top: 8px !important;
  }
  /* v40.5cw Fix 1: Restore rt-num to left of card (revert v40.5cv absolute centering) */
  /* rt-card: restore default grid layout — no relative/padding-top override */
  .rt-card {
    position: static;
    padding-top: 12px;
  }
  /* rt-num: no absolute positioning — stays in flow as first grid column */
  .rt-num {
    position: static;
    left: auto;
    transform: none;
    top: auto;
    align-self: center;
  }
  /* v40.5cw Fix 2: Dotted leg — centered on viewport via flex column */
  .rt-leg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    margin: 0;
    width: 100%;
    /* FIX 1 v40.5cx: !important so desktop border-left:2px dashed (lower in file)
       doesn't override this mobile rule and create stubby dashed artifacts */
    border-left: none !important;
    font-size: 11px;
    color: #8A8A8A;
    gap: 2px;
  }
  .rt-leg::before {
    content: '';
    display: block;
    /* FIX 2 v40.5cx: Use 2px wide strip + gradient instead of border-left
       so the dashed line is truly centered (border-left on width:0 sits 1px
       left of the flex-item center). */
    width: 2px;
    height: 24px;
    border-left: none;
    background: repeating-linear-gradient(
      to bottom,
      #3A3A3A 0 4px,
      transparent 4px 8px
    );
    margin: 0;
  }
  .rt-leg--start::before {
    background: repeating-linear-gradient(
      to bottom,
      #5B7CB8 0 4px,
      transparent 4px 8px
    );
  }
  .rt-leg--start {
    border-left: none;
    /* v40.5cw Fix 3: Restore Start pill look on mobile */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: center;
    margin: 4px 0;
    padding: 6px 18px;
    background: rgba(33, 150, 243,0.10);
    border: 1px solid rgba(33, 150, 243,0.35);
    color: #E3F2FD;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .rt-leg--start::before {
    display: none;
  }
}

/* 3. RECAST "ON HOLD" — the current chip has a faint blue underline strip
      bleeding from a stale rule. Force fully neutral. */
.route-pill--hold,
.route-stop.is-onhold .route-pill,
.route-deal .route-pill--hold {
  background: #2A2A2A !important;
  color: #B8B8B8 !important;
  border: 1px solid #3A3A3A !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* 4. ACTIVE TODAY tab pill — was screaming #2196F3; muted slightly */
.route-tab.is-active,
.route-tab[aria-selected="true"] {
  background: #5B7CB8 !important;
  color: #FFFFFF !important;
  border-color: #5B7CB8 !important;
}

/* 5. PHONE-NUMBER CTA (the big primary tap target) — KEEP bright blue
      because it's the most important action on the card */
.route-phone-cta {
  background: #2196F3 !important;
  color: #FFFFFF !important;
}

/* 6. Logo watermark — make it visible on mobile too, low opacity */
@media (max-width: 768px) {
  body.route-ask .ai-bg-mark,
  body.route-chats .ai-bg-mark {
    display: block !important;
    opacity: 0.05 !important;
  }
}
/* Tab explainer (defines Lead vs Route in-context) */
.route-tab-explainer {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(91, 124, 184, 0.08);
  border: 1px solid rgba(91, 124, 184, 0.20);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #B8B8B8;
  letter-spacing: 0.005em;
}
.route-tab-explainer strong { color: #E5E5E5; font-weight: 600; }
.route-tab-explainer em { color: #C8C8C8; font-style: normal; font-weight: 500; }

/* 7. TWO-TAB LAYOUT (Route | Leads) — wider, equal-width chips */
.route-tabs.route-tabs--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.route-tabs.route-tabs--two .route-tab {
  justify-content: center;
  padding: 10px 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 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;
  /* v40.5cu: margin-left 30px centers the 2px dashed border through the
     32px circle (.rt-num). With border-box sizing, rt-card has 1px left
     border + 14px padding-left, so rt-num center = 1+14+16 = 31px from
     rt-row edge. border-left center = margin-left+1 = 30+1 = 31px. ✓ */
  padding: 8px 16px 8px 16px;
  margin-left: 30px;
  font-size: 12px;
  color: #8A8A8A;
  border-left: 2px dashed #3A3A3A;
}
.rt-leg--start {
  color: #5B7CB8;
  font-weight: 600;
  border-left-color: #5B7CB8;
}
.rt-leg-mi { color: #E5E5E5; font-weight: 600; }
.rt-leg-dot { color: #5A5A5A; }
.rt-leg-min { color: #B8B8B8; }
.rt-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: stretch;
  padding: 12px 14px;
  background: #1F2121;
  border: 1px solid #3A3A3A;
  border-radius: 12px;
  margin: 0 0 8px 0;
}
.rt-row.is-closed .rt-card  { opacity: 0.6; }
.rt-row.is-skipped .rt-card { opacity: 0.5; }

/* v40.5ce — visited (faded grey + green check) and current (blue halo).
   Targets .rt-row (timeline) and .rt-compact-row (compact view). */
.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: #fff !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
.rt-row.is-visited .rt-num-check { display: block; }
.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: #2196F3 !important;
  box-shadow:
    0 0 0 2px rgba(33, 150, 243, 0.35),
    0 0 18px rgba(33, 150, 243, 0.28);
  animation: rtRowCurrentPulse 2.4s ease-in-out infinite;
}
.rt-row.is-current .rt-num,
.rt-compact-row.is-current .rt-compact-num {
  background: #2196F3 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.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: #fff;
  background: #2196F3;
  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; }

/* v40.14 — selected (drawer currently open for this stop). Separate from
   is-current: purely "which row is the user viewing right now". Uses
   Totaly blue so it reads distinct from the teal is-current halo, and
   takes visual precedence when both are present on the same row. */
.rt-row.is-selected .rt-card,
.rt-compact-row.is-selected {
  border-color: #2196F3 !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: #2196F3 !important;
  color: #fff !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: rgba(33, 150, 243,0.10);  /* v40.5cv Fix 2: light blue tint */
  color: #2196F3;
  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: #E5E5E5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-val { color: #E5E5E5; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.rt-addr {
  font-size: 12px;
  color: #B8B8B8;
  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: #2A2A2A;
  border: 1px solid #3A3A3A;
  color: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .12s, transform .08s;
}
.rt-act:hover { background: #333333; transform: translateY(-1px); }
.rt-act--gmaps { background: #FFFFFF; border-color: #FFFFFF; }
.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: #1F2121;
  border: 1px solid #3A3A3A;
  border-radius: 12px;
}
.rt-total { text-align: center; }
.rt-total-num {
  font-size: 18px;
  font-weight: 700;
  color: #E5E5E5;
  letter-spacing: 0.01em;
}
.rt-unit { font-size: 11px; color: #8A8A8A; margin-left: 2px; font-weight: 500; }
.rt-total-lbl {
  font-size: 10px;
  color: #8A8A8A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* 9. LEADS PAGINATION */
.route-leads-summary {
  font-size: 12px;
  color: #B8B8B8;
  padding: 8px 4px 12px 4px;
  letter-spacing: 0.01em;
}
.route-leads-summary strong { color: #E5E5E5; font-weight: 600; }
.route-leads-more {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: #2A2A2A;
  border: 1px solid #3A3A3A;
  border-radius: 12px;
  color: #E5E5E5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.route-leads-more:hover { background: #333333; }
.route-leads-more-count { color: #8A8A8A; font-weight: 500; margin-left: 6px; }
.route-leads-end {
  text-align: center;
  padding: 16px;
  color: #8A8A8A;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === end v40.5bu === */

/* === v40.5bv: Consolidated Route + AI Optimize + Compact + Modal === */

/* View switcher bar (replaces 2-tab) */
.route-viewbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  flex-wrap: wrap;
  /* v40.5cj: full-width so viewswitch fills row 4 */
  width: 100%;
}

/* v40.5bw: Global breathing room — push any tab/switcher row away
   from the page heading nav (Views chip + section title rows). */
.route-viewbar,
.home-tabs-row,
.dash-period-bar,
.div-tabs,
.ds-tabs,
.aut-tabs {
  margin-top: 28px;
}
@media (max-width: 600px) {
  .route-viewbar,
  .home-tabs-row,
  .dash-period-bar,
  .div-tabs,
  .ds-tabs,
  .aut-tabs {
    margin-top: 20px;
  }
}
/* v40.5ct: viewswitch = full-width 4-col grid, fully rounded pill container */
.route-viewswitch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background: #1F2121;
  border: 1px solid #333333;
  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: #B8B8B8;
  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: #E5E5E5; background: rgba(255,255,255,0.06); }
.route-viewbtn.is-active {
  background: #2196F3;
  color: #FFFFFF;
  box-shadow: none;
}
.route-viewbtn svg { opacity: 0.85; flex-shrink: 0; }
/* v40.5ct: AI Optimize — same pill shape as others, accent text when inactive */
.route-viewbtn.route-ai-btn {
  color: #2196F3;
  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: #2196F3; opacity: 0.95; }
.route-viewbtn.route-ai-btn:hover {
  background: rgba(33,150,243,0.10);
  color: #2196F3;
  transform: none;
  box-shadow: none;
}
.route-viewbtn.route-ai-btn.is-active {
  background: #2196F3;
  color: #FFFFFF;
  box-shadow: none;
}

.route-tab-explainer-meta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: rgba(91,124,184,0.18);
  border-radius: 10px;
  font-size: 11px;
  color: #5B7CB8;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "More" chip (the ⋯ tap-for-details one) */
.route-pill--more {
  background: rgba(255,255,255,0.06) !important;
  color: #8A8A8A !important;
  border: 1px solid #333333 !important;
  cursor: pointer;
  padding: 0 8px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  transition: background 100ms ease, color 100ms ease;
}
.route-pill--more:hover {
  background: rgba(91,124,184,0.18) !important;
  color: #E5E5E5 !important;
}
.route-pill[data-stop-chip] { cursor: pointer; }
.rt-row[data-stop], .rt-compact-row[data-stop] { cursor: pointer; }

/* Compact view: FieldRoutes-style tight rows */
.rt-compact {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #191A1A;
  border-radius: 12px;
  border: 1px solid #2A2A2A;
  overflow: hidden;
}
.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 #2A2A2A;
  transition: background 100ms ease;
  min-height: 40px;
}
.rt-compact-row:last-child { border-bottom: none; }
.rt-compact-row:hover { background: rgba(255,255,255,0.02); }
.rt-compact-row.is-hold { border-left: 3px solid #B8804F; }
.rt-compact-row.is-closed { opacity: 0.5; }
.rt-compact-row.is-skipped { opacity: 0.4; }
.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 #2A2A2A;
  padding-right: 10px;
}
.rt-compact-drive-min {
  font-size: 13px;
  font-weight: 600;
  color: #E5E5E5;
  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: #1F2121;
  border: 1px solid #333333;
  color: #B8B8B8;
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.rt-compact-act:hover {
  background: #2A2A2A;
  color: #E5E5E5;
  border-color: #5B7CB8;
}

.rt-totals--compact {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .rt-compact-row {
    grid-template-columns: 24px 52px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }
  .rt-compact-actions { grid-column: 1 / -1; justify-self: end; padding-top: 4px; border-top: 1px solid #2A2A2A; margin-top: 4px; padding-top: 6px; }
  .rt-compact-val { font-size: 12px; }
  .rt-compact-nametext { font-size: 13px; }
}

/* AI Optimize panel */
.rt-ai {
  background: linear-gradient(180deg, #1F2121 0%, #191A1A 100%);
  border: 1px solid #333333;
  border-radius: 14px;
  overflow: hidden;
}
.rt-ai-hdr {
  padding: 14px 16px;
  border-bottom: 1px solid #2A2A2A;
  background: rgba(91,124,184,0.06);
}
.rt-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #E5E5E5;
  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: rgba(255,255,255,0.04);
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #B8B8B8;
  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: #B8B8B8;
  font-size: 13px;
  padding: 12px 0;
}
.rt-ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #333333;
  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 #2A2A2A;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.rt-ai-thinking summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #8A8A8A;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}
.rt-ai-thinking summary:hover { color: #B8B8B8; }
.rt-ai-thinking pre {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  color: #8A8A8A;
  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: #E5E5E5;
  font-size: 14px;
  line-height: 1.6;
}
.rt-ai-answer h2, .rt-ai-answer h3, .rt-ai-answer strong { color: #E5E5E5; }
.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: #B8B8B8; font-style: normal; }
.rt-ai-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #2A2A2A;
  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: #2196F3;
  color: #FFFFFF;
  border-color: #2196F3;
  box-shadow: 0 2px 8px rgba(33, 150, 243,0.25);
}
.rt-ai-cta--primary:hover {
  background: #1E88E5;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(33, 150, 243,0.4);
}
.rt-ai-cta--ghost {
  background: transparent;
  color: #B8B8B8;
  border-color: #333333;
}
.rt-ai-cta--ghost:hover {
  background: #2A2A2A;
  color: #E5E5E5;
  border-color: #5B7CB8;
}

/* Stop detail modal (clickable chips open this) */
.rsm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9990;
  animation: rsm-fade 140ms ease;
}
@keyframes rsm-fade { from { opacity: 0; } to { opacity: 1; } }
.rsm {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #1F2121;
  border: 1px solid #333333;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 9991;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: rsm-pop 160ms ease;
}
@keyframes rsm-pop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.rsm-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #2A2A2A;
}
.rsm-id { min-width: 0; }
.rsm-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #E5E5E5;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.rsm-addr { font-size: 13px; color: #B8B8B8; margin-top: 3px; }
.rsm-close {
  background: transparent;
  border: 1px solid #333333;
  color: #B8B8B8;
  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: #2A2A2A; color: #E5E5E5; }
.rsm-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid #2A2A2A;
}
.rsm-val {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  color: #E5E5E5;
  font-variant-numeric: tabular-nums;
}
.rsm-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #2A2A2A;
  flex-wrap: wrap;
}
.rsm-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #2A2A2A;
  border: 1px solid #3A3A3A;
  color: #E5E5E5;
  text-decoration: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  transition: background 100ms ease, border-color 100ms ease;
}
.rsm-act:hover { background: #333333; border-color: #5B7CB8; }
.rsm-deals {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 18px;
}
.rsm-deal {
  background: #161616;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.rsm-deal.is-onhold { border-left: 3px solid #B8804F; }
.rsm-deal-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rsm-deal-svc { font-size: 13px; font-weight: 600; color: #E5E5E5; }
.rsm-deal-val { font-size: 13px; font-weight: 700; color: #E5E5E5; font-variant-numeric: tabular-nums; }
.rsm-deal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; color: #8A8A8A; }
.rsm-deal-rep { color: #8A8A8A; }
.rsm-deal-notes { font-size: 12px; color: #B8B8B8; margin-top: 6px; line-height: 1.5; }
.rsm-deal-addons { font-size: 11px; color: #8A8A8A; margin-top: 4px; }
.rsm-empty { color: #8A8A8A; font-size: 13px; padding: 16px 0; text-align: center; }
.rsm-cnote {
  padding: 10px 18px 14px;
  background: rgba(91,124,184,0.08);
  border-top: 1px solid #2A2A2A;
  font-size: 12px;
  color: #B8B8B8;
  line-height: 1.5;
}
.rsm-cnote strong { color: #5B7CB8; letter-spacing: 0.03em; text-transform: uppercase; font-size: 10px; }

@media (max-width: 600px) {
  .rsm {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
    border-radius: 12px;
  }
  .rsm-name { font-size: 16px; }
  .rsm-hdr, .rsm-tags, .rsm-actions { padding-left: 14px; padding-right: 14px; }
  .rsm-deals { padding-left: 14px; padding-right: 14px; }
}

/* === end v40.5bv === */

/* === v40.5bw: Map subtab ============================================== */
.rt-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
/* v40.5cj — legend always 5 chips on a single scrollable row, no wrapping.
   On narrow phones: smaller dots + tighter font so 5 fit at 375px. */
.rt-map-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px 10px;
  font-size: 12px;
  color: #B8B8B8;
  padding: 0 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rt-map-legend::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
  .rt-map-legend {
    font-size: 11px;
    gap: 4px 8px;
  }
  .rt-map-dot { width: 9px; height: 9px; }
}
.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 rgba(0,0,0,0.35);
  flex-shrink: 0;
}
/* Brand palette pulled from Greenleaf packaging:
   pest=green, termite=mustard yellow, weed=orange, hold=khaki. */
/* v40.5cj: hold → neutral grey, other → light grey (distinct from hold) */
.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 #333333;
  background: #0F1115;
  overflow: hidden;
}
@media (max-width: 600px) {
  .rt-map { height: 420px; }
}

.rt-map-hint {
  font-size: 11px;
  color: #8A8A8A;
  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: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  letter-spacing: -0.02em;
}

/* v40.14 — route-progress "current stop" halo on the Leaflet pin. Kept
   separate from is-selected below; current uses the existing teal accent
   used elsewhere for route progress. */
.rt-map-pin.is-current,
.rt-map-marker.is-current {
  border: 2px solid #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35), 0 2px 6px rgba(0,0,0,0.5);
}
/* v40.14 — selected pin (drawer open for this stop). Separate from
   is-current — always exact Totaly blue #2196F3, and wins visually when
   both classes are present (declared after .is-current, uses a stronger
   ring + z-index bump so it renders above neighboring pins). */
.rt-map-pin.is-selected,
.rt-map-marker.is-selected {
  border: 2px solid #2196F3 !important;
  box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.45), 0 2px 8px rgba(0,0,0,0.55) !important;
  z-index: 900 !important;
  transform: scale(1.08);
}

/* Leaflet popup theming */
.leaflet-popup-content-wrapper {
  background: #1F2121 !important;
  color: #E5E5E5 !important;
  border-radius: 10px !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: #1F2121 !important; border: 1px solid #333333 !important; }
.leaflet-popup-content { margin: 10px 12px !important; min-width: 200px; }
.leaflet-container a.leaflet-popup-close-button { color: #8A8A8A !important; }

.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: #2196F3;
  text-transform: uppercase;
}
.rt-map-popup-name { font-size: 14px; font-weight: 600; color: #E5E5E5; }
.rt-map-popup-addr { font-size: 12px; color: #B8B8B8; }
.rt-map-popup-meta { font-size: 11px; color: #8A8A8A; margin-bottom: 4px; }
.rt-map-popup-btn {
  margin-top: 4px;
  background: #2196F3;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rt-map-popup-btn:hover { background: #1E88E5; }

/* Zoom buttons match dark theme */
.leaflet-bar a, .leaflet-bar a:hover {
  background: #1F2121 !important;
  color: #E5E5E5 !important;
  border-color: #333333 !important;
}
/* === end v40.5bw === */

/* === v40.5bx — map toolbar, layer toggle, full-screen === */

/* 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;
}

/* v40.5cj: Native dropdown chip — replaces Street/Satellite/Hybrid segmented control.
   Transparent <select> overlaid on chip so iOS opens Apple wheel picker. */
.rt-map-layer-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #E5E5E5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.rt-map-layer-chip svg { flex-shrink: 0; color: #8A8A8A; }
.rt-map-layer-chip-label { color: #E5E5E5; }
.rt-map-layer-chip:hover { background: #232323; border-color: #3A3A3A; }
.rt-map-layer-chip[aria-expanded="true"] { background: #232323; border-color: #3A3A3A; }
.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-layer-select {
  display: none; /* v40.5cv Fix 3: replaced by custom dropdown — hidden but kept for legacy refs */
}
/* v40.5cv Fix 3: Custom map-layer dropdown menu */
.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: #1F2121;
  border: 1px solid #3A3A3A;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.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: #E5E5E5;
  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: rgba(255,255,255,0.07); color: #FFFFFF; }
.rt-map-layer-opt.is-active { background: rgba(33, 150, 243,0.15); color: #2196F3; font-weight: 600; }
/* Keep old segmented control CSS in case used elsewhere */
.rt-map-layers {
  display: inline-flex;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.rt-map-layer-btn {
  background: transparent;
  color: #B5B5B5;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.2px;
}
.rt-map-layer-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); }
.rt-map-layer-btn.is-active {
  background: #2196F3;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Full-screen toggle button */
.rt-map-fs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1A1A1A;
  color: #E5E5E5;
  border: 1px solid #2A2A2A;
  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: #3A3A3A;
}

/* 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-header-card,
body.rt-map-fullscreen .route-tab-explainer,
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 #app,
body.rt-map-fullscreen .app-shell,
body.rt-map-fullscreen .route-page,
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 */
@media (max-width: 700px) {
  .rt-map-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .rt-map-controls {
    justify-content: space-between;
  }
  .rt-map-fs-label { display: none; }
  .rt-map-fs-btn { padding: 6px 10px; }
}
/* === end v40.5bx === */

/* === v40.5by: Google Maps integration polish === */
.gm-style .rt-map-popup { color: #1A1A1A; padding: 4px 2px 2px; min-width: 200px; }
.gm-style .rt-map-popup-num { font-size: 11px; color: #6B7280; 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: #6B7280; margin-bottom: 8px; }
.gm-style .rt-map-popup-btn { background: #2196F3; color: #FFF; border: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.gm-style .rt-map-popup-btn:hover { background: #1E88E5; }
/* === end v40.5by === */

/* === v40.5bz: added-date + rep-mode toggle === */
.rt-map-popup-added { font-size: 11px; color: #8A8A8A; margin-bottom: 6px; }
.gm-style .rt-map-popup-added { font-size: 11px; color: #6B7280; margin-bottom: 8px; font-style: italic; }
.rt-added {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 500;
  color: #8A8A8A; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.rsm-added {
  font-size: 11px; color: #8A8A8A; margin-left: 8px;
  font-style: italic;
}
.rsm-deal-added { color: #8A8A8A; font-style: italic; }

.route-repmode {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
  margin-left: 8px;
}
.route-repmode-opt {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: #B8B8B8;
  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: #E5E5E5; background: rgba(255,255,255,0.04); }
.route-repmode-opt.is-active {
  background: rgba(33, 150, 243,0.18);
  color: #2196F3;
}
.route-repmode-opt svg { flex-shrink: 0; }
/* === end v40.5bz === */

/* === v40.5ca: 6-status colors + knock counter + notes textarea === */

/* Status color tokens (single source of truth) */
:root {
  --st-gave-pitch:     #2196F3;  /* teal   - pitched */
  --st-call-back:      #F59E0B;  /* yellow */
  --st-made-sale:      #10B981;  /* green  */
  --st-not-interested: #EF4444;  /* red    */
  --st-not-home:       #6B7280;  /* grey   */
  --st-never-knock:    #0D0D0D;  /* black  */
}

/* Colored ring on the timeline chip when knocked */
.rt-num--knocked {
  position: relative;
  background: rgba(91, 124, 184, 0.18);
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: -0.2px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.06),
    0 0 0 3px var(--st-ring, #5B7CB8);
}
.rt-num--gave_pitch     { --st-ring: var(--st-gave-pitch);     background: rgba(33, 150, 243, 0.22); }
.rt-num--call_back      { --st-ring: var(--st-call-back);      background: rgba(245, 158, 11, 0.22); }
.rt-num--made_sale      { --st-ring: var(--st-made-sale);      background: rgba(16, 185, 129, 0.22); }
.rt-num--not_interested { --st-ring: var(--st-not-interested); background: rgba(239, 68, 68, 0.22); }
.rt-num--not_home       { --st-ring: var(--st-not-home);       background: rgba(107, 114, 128, 0.30); }
.rt-num--never_knock    { --st-ring: var(--st-never-knock);    background: rgba(13, 13, 13, 0.55); }

/* Status pills (for tags row) — 6 new colors */
.route-pill--status-gave_pitch     { background: rgba(33, 150, 243, 0.18);  color: #80C8FF;  border: 1px solid rgba(33, 150, 243, 0.45); }
.route-pill--status-call_back      { background: rgba(245, 158, 11, 0.18);  color: #FFC97A;  border: 1px solid rgba(245, 158, 11, 0.45); }
.route-pill--status-made_sale      { background: rgba(16, 185, 129, 0.18);  color: #6EE7B7;  border: 1px solid rgba(16, 185, 129, 0.45); }
.route-pill--status-not_interested { background: rgba(239, 68, 68, 0.18);   color: #FCA5A5;  border: 1px solid rgba(239, 68, 68, 0.45); }
.route-pill--status-not_home       { background: rgba(107, 114, 128, 0.25); color: #D1D5DB;  border: 1px solid rgba(107, 114, 128, 0.50); }
.route-pill--status-never_knock    { background: rgba(13, 13, 13, 0.65);    color: #BFBFBF;  border: 1px solid rgba(80, 80, 80, 0.70); }

/* 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: rgba(33, 150, 243, 0.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: #E5E5E5;                  background: rgba(107, 114, 128, 0.16); }
.route-mark--never_knock:hover,
.route-mark--never_knock.is-active    { border-color: #2A2A2A;                  color: #E5E5E5;                  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: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.rsm-knock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30);
}
.rsm-knock-btn:hover  { box-shadow: 0 4px 14px rgba(33, 150, 243, 0.45); }
.rsm-knock-btn:active,
.rsm-knock-btn.is-bumped { transform: scale(0.96); }
.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: rgba(33, 150, 243, 0.15);
  color: #80C8FF;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(33, 150, 243, 0.45);
  font-variant-numeric: tabular-nums;
}
/* v40.5ce — .rsm-knock-undo removed; the K-chip popover (−/+/Reset) replaces
   the legacy inline minus button. */

/* v40.5cd — K-chip is a button + popover.  */
.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: rgba(33, 150, 243, 0.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 rgba(0, 0, 0, 0.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: rgba(33, 150, 243, 0.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: rgba(33, 150, 243, 0.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: #E5E5E5;
  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: #B8B8B8;
  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;
}
@media (max-width: 640px) {
  .rsm-knock-pop-btn { width: 44px; height: 44px; font-size: 24px; }
  .rsm-knock-pop-reset { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* Modal: 6-button status grid */
.rsm-mark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.rsm-mark-grid .route-mark {
  width: 100%;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #C8C8C8;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* 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 rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: #E5E5E5;
  font-size: 13px;
  line-height: 1.45;
  font-family: inherit;
  box-sizing: border-box;
}
.rsm-notes-ta:focus {
  outline: none;
  border-color: rgba(33, 150, 243, 0.55);
  background: rgba(33, 150, 243, 0.05);
}
.rsm-notes-ta::placeholder { color: #5F5F5F; }
.rsm-notes-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rsm-notes-status { font-size: 11px; color: #64B5F6; } /* v40.5ck: Totaly blue-300 (was emerald #6EE7B7) */
.rsm-notes-save {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(33, 150, 243, 0.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: rgba(33, 150, 243, 0.28); }

/* Mobile tweaks for the modal additions */
@media (max-width: 600px) {
  .rsm-knock-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .rsm-knock-btn { justify-content: center; }
  .rsm-knock-count { justify-content: space-between; }
  .rsm-mark-grid { grid-template-columns: repeat(2, 1fr); }
}
/* === end v40.5ca === */

/* ==========================================================================
   v40.5cb — Lock route button, Next stop button, Initial+Monthly price stack
   ========================================================================== */

/* 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 #333333;
  background: #1A1A1A;
  color: #E5E5E5;
  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:hover { background: #232323; border-color: #444444; }
.route-lock-btn svg { width: 14px; height: 14px; }
.route-lock-btn.is-locked {
  background: rgba(33, 150, 243, 0.12);
  border-color: #2196F3;
  color: #93C5FD;
}
.route-lock-btn.is-locked:hover {
  background: rgba(33, 150, 243, 0.18);
  border-color: #60A5FA;
  color: #BFDBFE;
}

/* v40.5cj: Grid cell helpers — ensure all header row buttons fill their cells */
.route-hdr-row1 .route-period-wrap,
.route-hdr-row1 .route-period-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
}
/* repmode-opt as standalone grid cell (no wrapper .route-repmode) */
.route-hdr-row1 .route-repmode-opt {
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 12px !important;
  background: #2A2A2A !important;
  height: 32px !important;
  padding: 0 8px !important;
}
.route-hdr-row1 .route-repmode-opt.is-active {
  background: rgba(33, 150, 243,0.18) !important;
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}
.route-hdr-row2 .route-gps-btn,
.route-hdr-row2 .route-refresh-btn,
.route-hdr-row2 .route-lock-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !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 #2196F3;
  background: linear-gradient(180deg, #2196F3 0%, #1B7CD0 100%);
  color: #FFFFFF;
  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: #E5E5E5;
  white-space: nowrap;
}
.rt-price-mo {
  font-size: 11px;
  font-weight: 600;
  color: #2196F3;  /* v40.5cp: brand blue (was cyan-green #4FC3A4) */
  white-space: nowrap;
}
.rt-price--compact .rt-price-init { font-size: 12px; }
.rt-price--compact .rt-price-mo   { font-size: 10px; }

/* When the price stack lives inside a deal row, make sure it stays tight */
.rsm-deal-val .rt-price,
.route-deal-val .rt-price { gap: 1px; }

@media (max-width: 600px) {
  .route-lock-btn { padding: 0 10px; font-size: 11px; }
  .rsm-next-btn { height: 48px; font-size: 15px; }
  .rt-price-init { font-size: 13px; }
  .rt-price-mo   { font-size: 11px; }
}
/* === end v40.5cb === */

/* ============================================================================
   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 rgba(255,255,255,0.06);
}

/* Account card — the customer-facing "wow, they have me organized" panel */
.rsm-acct-card {
  margin: 12px 14px 0;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  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 rgba(255,255,255,0.06);
}
.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: #E5E5E5;
}
.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: #B8B8B8;
  white-space: nowrap;
}
.rsm-acct-mo {
  font-size: 13px;
  font-weight: 700;
  color: #2196F3; /* v40.5ck: Totaly blue (was cyan-green #10B981) */
  white-space: nowrap;
}
.rsm-acct-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #8A8A8A;
}
.rsm-acct-rep {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #B8B8B8;
}
.rsm-acct-rep svg { opacity: 0.85; }
.rsm-acct-date { color: #8A8A8A; }
.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: #8A8A8A;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
}
.rsm-acct-notes {
  font-size: 12px;
  color: #B8B8B8;
  font-style: italic;
  line-height: 1.4;
}
.rsm-acct-empty {
  font-size: 13px;
  color: #8A8A8A;
  padding: 4px 0;
}
.rsm-acct-cnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(33, 150, 243, 0.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 rgba(255,255,255,0.06);
}
.rsm-history-title {
  font-size: 10px;
  font-weight: 700;
  color: #8A8A8A;
  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: rgba(255,255,255,0.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: #2196F3;
  box-shadow: 0 0 0 2px #161616;
}
.rsm-history-pending .rsm-history-dot {
  background: #3A3A3A;
}
.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 rgba(255,255,255,0.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: #B8B8B8;
  border-color: rgba(255,255,255,0.16);
}
.rsm-reptoggle.is-on {
  background: rgba(33, 150, 243, 0.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 rgba(255,255,255,0.06);
  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 */
.rsm.is-custmode {
  /* tighter overall — let content size itself, scroll only if needed */
}

/* Mobile polish */
@media (max-width: 600px) {
  .rsm.is-custmode .rsm-acct-card,
  .rsm.is-repmode .rsm-acct-card { margin: 10px 12px 0; padding: 12px; }
  .rsm-acct-svc { font-size: 13px; }
  .rsm-acct-mo { font-size: 12px; }
  .rsm-history { margin: 10px 12px 0; }
  .rsm-reptoggle { margin: 10px 12px 0; width: calc(100% - 24px); }
  .rsm-rep { padding: 12px 12px 14px; }
}
/* === end v40.5cf === */

/* ============================================================================
   v40.5cg — Door-type single-chip selector + K-chip-as-knock
   ============================================================================ */

/* 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;
}
@media (max-width: 600px) {
  .rsm-knock-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
}

/* K-chip color rings inside the modal — match the timeline chip palette */
.rsm-knock-num--gave_pitch     { box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.22), 0 0 0 3px var(--st-gave-pitch); }
.rsm-knock-num--call_back      { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22), 0 0 0 3px var(--st-call-back); }
.rsm-knock-num--made_sale      { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22), 0 0 0 3px var(--st-made-sale); }
.rsm-knock-num--not_interested { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22),  0 0 0 3px var(--st-not-interested); }
.rsm-knock-num--not_home       { box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.30),0 0 0 3px var(--st-not-home); }
.rsm-knock-num--never_knock    { box-shadow: 0 0 0 2px rgba(13, 13, 13, 0.55),   0 0 0 3px var(--st-never-knock); }

/* 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: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.rsm-doortype:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.rsm-doortype-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #8A8A8A;
  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: #E5E5E5;
}
.rsm-doortype-caret { color: #8A8A8A; 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 */
.rsm-doortype.is-set { background: rgba(33, 150, 243, 0.06); }
.rsm-doortype--gave_pitch.is-set     { border-color: rgba(33, 150, 243, 0.55);  background: rgba(33, 150, 243, 0.08); }
.rsm-doortype--gave_pitch.is-set     .rsm-doortype-value { color: var(--st-gave-pitch); }
.rsm-doortype--call_back.is-set      { border-color: rgba(245, 158, 11, 0.55);  background: rgba(245, 158, 11, 0.08); }
.rsm-doortype--call_back.is-set      .rsm-doortype-value { color: var(--st-call-back); }
.rsm-doortype--made_sale.is-set      { border-color: rgba(16, 185, 129, 0.55);  background: rgba(16, 185, 129, 0.08); }
.rsm-doortype--made_sale.is-set      .rsm-doortype-value { color: var(--st-made-sale); }
.rsm-doortype--not_interested.is-set { border-color: rgba(239, 68, 68, 0.55);   background: rgba(239, 68, 68, 0.08); }
.rsm-doortype--not_interested.is-set .rsm-doortype-value { color: var(--st-not-interested); }
.rsm-doortype--not_home.is-set       { border-color: rgba(107, 114, 128, 0.55); background: rgba(107, 114, 128, 0.10); }
.rsm-doortype--not_home.is-set       .rsm-doortype-value { color: #D1D5DB; }
.rsm-doortype--never_knock.is-set    { border-color: rgba(80, 80, 80, 0.65);    background: rgba(13, 13, 13, 0.45); }
.rsm-doortype--never_knock.is-set    .rsm-doortype-value { color: #BFBFBF; }

/* 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-mark-grid { display: none; }

/* ── v40.13-doortype-pills: tappable pill row replacing the broken <select> ── */
.rsm-doortype-pillbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  transition: border-color 140ms ease, background 140ms ease;
}
.rsm-doortype-pillbox.is-set { background: rgba(33, 150, 243, 0.05); }
.rsm-doortype-pill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8A8A8A;
  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: rgba(255,255,255,0.06);
  color: #E5E7EB;
}
.rsm-doortype-pill-active--gave_pitch     { background: rgba(33, 150, 243, 0.20); color: var(--st-gave-pitch); }
.rsm-doortype-pill-active--call_back      { background: rgba(245, 158, 11, 0.20); color: var(--st-call-back); }
.rsm-doortype-pill-active--made_sale      { background: rgba(16, 185, 129, 0.20); color: var(--st-made-sale); }
.rsm-doortype-pill-active--not_interested { background: rgba(239, 68, 68, 0.20); color: var(--st-not-interested); }
.rsm-doortype-pill-active--not_home       { background: rgba(107, 114, 128, 0.24); color: #D1D5DB; }
.rsm-doortype-pill-active--never_knock    { background: rgba(13, 13, 13, 0.55); color: #BFBFBF; }

.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 rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.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: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #F3F4F6; }
.rsm-dt-pill.is-selected { color: #FFFFFF; }

.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: #E5E7EB; }

@media (max-width: 480px) {
  .rsm-doortype-pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsm-dt-pill { font-size: 12.5px; min-height: 44px; }
}
/* ── end v40.13-doortype-pills ─────────────────────────────────────────── */

/* Compact-row K-chip color rings (door-type aware) */
.rt-compact-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.rt-compact-num--knocked { color: #FFFFFF; font-weight: 700; }
.rt-compact-num--gave_pitch     { box-shadow: 0 0 0 2px var(--st-gave-pitch);     background: rgba(33, 150, 243, 0.22); }
.rt-compact-num--call_back      { box-shadow: 0 0 0 2px var(--st-call-back);      background: rgba(245, 158, 11, 0.22); }
.rt-compact-num--made_sale      { box-shadow: 0 0 0 2px var(--st-made-sale);      background: rgba(16, 185, 129, 0.22); }
.rt-compact-num--not_interested { box-shadow: 0 0 0 2px var(--st-not-interested); background: rgba(239, 68, 68, 0.22); }
.rt-compact-num--not_home       { box-shadow: 0 0 0 2px var(--st-not-home);       background: rgba(107, 114, 128, 0.30); }
.rt-compact-num--never_knock    { box-shadow: 0 0 0 2px var(--st-never-knock);    background: rgba(13, 13, 13, 0.55); }

/* Override the prior v40.5ce visited fade — keep K-chip color rather than
   greying out, because a sold/pitched/call-back stop should still pull the
   rep's eye if they want to circle back. Only the row gets a subtle dim. */
.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 */
.rt-num-check { display: none !important; }
/* === end v40.5cg === */

/* ═══════════════════════════════════════════════════════════════════════
   v40.5ck — ALL 26 FIXES  (appended as one block — do not remove)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop Fix 1: Enterprise pill ───────────────────────────────────── */
html body aside.sidebar#sidebar .sidebar-footer .footer-org-tier-badge {
  background: #1565C0 !important;
  color: #FFFFFF !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: #8A8A8A !important;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #E5E5E5 !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,
html body .app-shell-main,
html body .page-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,
html body header.topbar .topbar-right .topbar-btn {
  border-radius: 999px !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── Route filter chip CSS ───────────────────────────────────────────── */
.route-filter-chip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  color: #E5E5E5 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.route-filter-chip.is-active {
  background: rgba(33, 150, 243,0.14) !important;
  border-color: rgba(33, 150, 243,0.40) !important;
  color: #E3F2FD !important;
}
.route-filter-select {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* ── 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: #2A2A2A;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 12px;
  color: #E5E5E5;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.msg-select-chip:hover {
  background: #333;
  border-color: rgba(255,255,255,0.18);
}
.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: #8A8A8A;
  text-align: center;
}
.msg-retry-btn {
  background: #2196F3;
  color: #fff;
  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: #42A5F5; }

/* ── Overview Fix 1+2: Quick Actions + section buttons dark ─────────── */
html body .dashboard-view .quick-actions-grid button,
html body .dashboard-view .quick-actions a,
html body .dashboard-view .quick-action-btn {
  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;
}
html body .dashboard-view .quick-actions-grid button:hover,
html body .dashboard-view .quick-actions a:hover,
html body .dashboard-view .quick-action-btn:hover {
  background: #333 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── Overview Fix 3: KPI tile border consistency ──────────────────── */
html body .dashboard-view .coo-kpi-btn,
html body .dashboard-view .hero-card .coo-kpi-grid .coo-kpi-btn {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}
html body .dashboard-view .coo-kpi-btn:hover {
  border-color: rgba(33,150,243,0.35) !important;
}

/* ── Overview Fix 4: Laptop grid layout ─────────────────────────── */
@media (min-width: 1024px) {
  html body .dashboard-view .page-hero {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }
  html body .dashboard-view .coo-kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── 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"],
html body .automations-view .automation-list .automation-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;
}
html body .automations-view .automation-card:hover {
  border-color: rgba(33,150,243,0.30) !important;
  background: #252727 !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; }
}
@media (max-width: 639px) {
  html body .gl-divisions-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
html body .gl-division-card {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 20px 16px !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #E5E5E5 !important;
  text-decoration: none !important;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease !important;
}
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-kpi {
  color: #8A8A8A !important;
  font-size: 11px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}
html body .gl-division-card .gdc-cta {
  color: #2196F3 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
/* Sidebar bleed fix — v40.5cr: overflow:hidden without !important so flex children can scroll */
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: Data Sources — header glass + category labels ─────────── */
html body .gl-ds-view .gl-ds-header,
html body [class*="data-source"] .gl-ds-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
html body .gl-ds-view .gl-ds-cat,
html body [class*="data-source"] .gl-ds-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 ─────────── */
.main-content .settings-view--v1929,
.main-content .settings-view--v1931 {
  max-width: 720px !important;
  padding: 24px 20px 80px !important;
  margin: 0 auto !important;
}
.settings-view--v1929 .settings-block,
.settings-view--v1931 .settings-block {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.settings-view--v1929 .settings-block-head,
.settings-view--v1931 .settings-block-head {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding-bottom: 12px !important;
  margin-bottom: 4px !important;
}
.settings-view--v1929 .settings-block-head h2,
.settings-view--v1931 .settings-block-head h2 {
  font-size: 15px !important;
  color: #F4F4F4 !important;
  font-weight: 700 !important;
}
.settings-view--v1929 .settings-row,
.settings-view--v1931 .settings-row {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.settings-view--v1929 .settings-row:last-child,
.settings-view--v1931 .settings-row:last-child { border-bottom: none !important; }
.settings-view--v1929 .srl-title { font-size: 14px !important; color: #E5E5E5 !important; }
.settings-view--v1929 .srl-value { font-size: 12px !important; color: #8A8A8A !important; }
.settings-view--v1929 .settings-outline-btn,
.settings-view--v1931 .settings-outline-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: transparent !important;
  color: #E5E5E5 !important;
  cursor: pointer !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.settings-view--v1929 .settings-outline-btn:hover,
.settings-view--v1931 .settings-outline-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.20) !important;
}
/* Avatar fallback */
.settings-avatar {
  background: linear-gradient(135deg, #2196F3, #1565C0);
  color: #fff;
  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"],
.beaded-settings-section,
.settings-beaded-block { display: none !important; }
/* Double divider fix — ensure single rule lines */
.settings-view--v1929 hr + hr,
.settings-view--v1931 hr + hr { display: none !important; }

/* ── 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;
}
.dr-chip-section {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
}
.dr-chip-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.dr-chip-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.dr-chip {
  background: #2A2A2A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #E5E5E5 !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: border-color 0.12s, background 0.12s !important;
}
.dr-chip:hover {
  border-color: rgba(33,150,243,0.40) !important;
  color: #E3F2FD !important;
  background: rgba(33,150,243,0.08) !important;
}
.dr-overview-card {
  padding: 12px 16px !important;
  min-height: 80px !important;
}
.dr-overview-card .dr-overview-card-icon svg { width: 20px !important; height: 20px !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: #191A1A !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: #8A8A8A;
}
.bi-error-icon { opacity: 0.7; }
.bi-error-msg {
  font-size: 14px;
  color: #B8B8B8;
  max-width: 360px;
  line-height: 1.5;
}
.bi-error-msg strong { color: #E5E5E5; }
.bi-error-sub { font-size: 12px; color: #666; margin-top: 4px; }
.bi-retry-btn {
  background: #2196F3;
  color: #fff;
  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: #42A5F5; }
/* BI header pill buttons */
.bi-header {
  background: #191A1A !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.bi-back-link {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  color: #B8B8B8 !important;
  text-decoration: none !important;
  transition: background 0.12s !important;
}
.bi-back-link:hover { background: rgba(255,255,255,0.08) !important; color: #E5E5E5 !important; }
.bi-period-sel,
.bi-refresh-btn,
.dash-hub-period,
.dash-hub-division {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  color: #E5E5E5 !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: rgba(255,255,255,0.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: rgba(255,255,255,0.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;
}
html body .page-content {
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding-bottom: 80px !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 */
.topnav-center {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}
/* 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: rgba(255,255,255,0.06) !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: #E5E5E5 !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: #8A8A8A !important;   /* muted grey for inactive icons */
  opacity: 1 !important;
}
/* Hover */
.dr-dd-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
}
.dr-dd-item:hover .dr-dd-item-icon { color: #E5E5E5 !important; }
/* Active — only ONE item, subtle blue tint, white bold */
.dr-dd-item.active {
  background: rgba(33,150,243,0.10) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.dr-dd-item.active .dr-dd-item-icon { color: #FFFFFF !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: #EAEBEC !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: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !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: rgba(33,150,243,0.12) !important;
  border: none !important;
  color: #2196F3 !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: #2196F3 !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 ─────────────────────────────── */
body.route-dashboards .main-content,
body.route-reports .main-content,
body.route-divisions .main-content,
body.route-automations .main-content,
body.route-settings .main-content,
body.route-data .main-content {
  overflow-y: auto !important;
}

/* === end v40.5ck === */

/* ============ v40.5ck ============ */

/* Fix 1: Enterprise pill contrast */
.sub-tier-pill, .subscription-badge, .tier-badge, .plan-badge {
  background: #1565C0 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Fix 2: Remove blue top border on profile/footer */
.sidebar-footer, .profile-footer, .sidebar .footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Fix 3: Sidebar collapse button */
.sidebar-collapse-btn, .sidebar-toggle {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #B8B8B8;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-collapse-btn:hover, .sidebar-toggle:hover {
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
}

/* Fix 5 + 7: Standardize all chips/pills to fully-rounded */
.chip, .pill, .nav-pill, .topnav-pill, .filter-chip, .action-chip,
[class*="-chip"], [class*="-pill"] {
  border-radius: 999px !important;
}
.kpi-card, .stat-card, .division-card, .automation-card, .ds-card,
.bi-card, .dashboard-card, .settings-section, .settings-card {
  border-radius: 12px !important;
}
.modal-card, .rsm-acct-card {
  border-radius: 14px !important;
}

/* Fix 6: Kill white left vertical line */
body, #app, .app-shell, .sidebar {
  border-left: none !important;
}
body { background: #191A1A; }

/* Fix 7: Top-right pill cleanup */
.topbar #etl-pill, .topbar .pill--status, .topnav-views, .topnav-more {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Messages CSS */
.msg-chip-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.msg-select-chip {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #E5E5E5;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.msg-select-chip:hover { background: rgba(255,255,255,0.08); }
.msg-select-chip-native {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.msg-retry-btn {
  background: #2196F3; color: #fff; border: none;
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.msg-retry-btn:hover { background: #1976D2; }
.msg-empty-error { padding: 40px 20px; text-align: center; color: #B8B8B8; }

/* Overview/Home polish */
.quick-action-btn, .quick-actions button {
  background: #2A2A2A !important;
  color: #E5E5E5 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  backdrop-filter: none !important;
}
.quick-action-btn:hover {
  border-color: #2196F3 !important;
  color: #E3F2FD !important;
}
.automation-card, .aut-card, .recurring-job-card, [class*="automation-row"] {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: #E5E5E5 !important;
}
.automation-card *, .aut-card *, .recurring-job-card * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.automation-card .aut-desc, .automation-card .aut-meta, .automation-card .aut-footer {
  background: transparent !important;
}
.automation-card:hover {
  background: #252727 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.kpi-tile, .ops-kpi-card {
  background: #1F2121 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.kpi-tile:hover {
  border-color: rgba(33,150,243,0.4) !important;
}

/* Divisions grid */
.divisions-grid, .division-tiles {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .divisions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .divisions-grid { grid-template-columns: repeat(2, 1fr); } }
.division-card {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 140px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.division-card:hover {
  background: #252727;
  border-color: rgba(33,150,243,0.4);
  transform: translateY(-1px);
}
.division-card .division-icon { color: #E5E5E5; }
.division-card:hover .division-icon { color: #2196F3; }

/* Data Sources */
.data-sources-header, .ds-page-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 24px 0;
}
.ds-section-label, .data-section-header, .section-label {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #8A8A8A;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 24px 0 12px;
  display: block;
}

/* Settings tightening */
.settings-section {
  background: #1F2121;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.settings-section h2, .settings-section h3 {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
  margin-bottom: 16px;
  font-size: 16px;
}
.settings-section h2 + *, .settings-section h3 + * { border-top: none !important; }
.settings-avatar-fallback {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  border-radius: 999px;
  width: 48px; height: 48px;
}

/* Page scroll */
.page-content, .main-content, .app-content, .dash-hub {
  overflow-y: auto !important;
  max-height: 100vh;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}

/* BI dashboard black band */
.bi-page footer, .dashboard-footer, .empty-footer-band {
  background: transparent !important;
  display: none !important;
}
.bi-error-state {
  padding: 40px 20px;
  text-align: center;
  color: #B8B8B8;
}

/* Total Operations: top nav chip layout */
.topnav-center { display: inline-flex; gap: 8px; align-items: center; }
.topnav-views {
  background: rgba(33,150,243,0.15) !important;
  border: 1px solid rgba(33,150,243,0.35) !important;
  color: #E3F2FD !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.topnav-views:hover { background: rgba(33,150,243,0.22) !important; }
.topnav-more {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #E5E5E5 !important;
  border-radius: 999px !important;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.topnav-more:hover { background: rgba(255,255,255,0.08) !important; }

/* Views dropdown items — override .dr-dd-item active blue text */
.dr-dd-item,
.views-dropdown-item, .views-menu-item {
  color: #E5E5E5 !important;
  font-weight: 400 !important;
  background: transparent !important;
}
.dr-dd-item .dr-dd-item-icon,
.views-dropdown-item .views-icon, .views-menu-item .views-icon { color: #8A8A8A !important; }
.dr-dd-item:hover,
.views-dropdown-item:hover, .views-menu-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
}
.dr-dd-item:hover .dr-dd-item-icon,
.views-dropdown-item:hover .views-icon, .views-menu-item:hover .views-icon { color: #E5E5E5 !important; }
.dr-dd-item.active,
.views-dropdown-item.is-active, .views-menu-item.is-active {
  background: rgba(33,150,243,0.08) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.dr-dd-item.active .dr-dd-item-icon,
.views-dropdown-item.is-active .views-icon, .views-menu-item.is-active .views-icon { color: #FFFFFF !important; }

/* Chat history hover */
.chat-history-item, .sidebar-chat-item, .pinned-chat-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 12px;
  color: #B8B8B8;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.chat-history-item:hover, .sidebar-chat-item:hover, .pinned-chat-item:hover {
  background: rgba(255,255,255,0.04);
  color: #E5E5E5;
  border-color: rgba(255,255,255,0.06);
}
.chat-history-item.is-active, .sidebar-chat-item.is-active, .pinned-chat-item.is-active {
  background: rgba(33,150,243,0.10);
  color: #E3F2FD;
  border-color: rgba(33,150,243,0.25);
}

/* All Dashboards hub tightening */
.dash-hub-section { padding: 16px 20px !important; }
.dash-hub-section + .dash-hub-section { margin-top: 16px !important; }

/* Fix 27: Route Start marker pill/badge */
.rt-leg.rt-leg--start,
.rt-start, .route-start, .timeline-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(33, 150, 243,0.10);
  border: 1px solid rgba(33, 150, 243,0.35);
  color: #E3F2FD;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* End v40.5ck */

/* ============ v40.5cl ============ */

/* ── Priority Fix P1: Chat history hover — white text, not blue ────────
   v40.5ck set hover color to #E5E5E5 but earlier high-specificity rules
   (route-chats body class + .active) were bleeding through. Force white
   on ALL hover states; .is-active gets a whisper tint only.
   ────────────────────────────────────────────────────────────────────── */
.chat-history-item:hover,
.sidebar-chat-item:hover,
.pinned-chat-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.chat-history-item.is-active,
.sidebar-chat-item.is-active,
.pinned-chat-item.is-active {
  background: rgba(33,150,243,0.06) !important;  /* very subtle — not bold */
  color: #FFFFFF !important;
  border-color: transparent !important;
  font-weight: 500 !important;
}
.chat-history-item:hover:not(.is-active),
.pinned-chat-item:hover:not(.is-active) {
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
}

/* ── 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 .pill,
.topnav [class*="pill"],
#etl-pill,
#brain-pill,
.brain-pill,
.connection-pill,
.status-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;
}

/* ── Priority Fix P4: Enterprise pill — faded, not billboard blue ──────
   Override the v40.5ck #1565C0 solid blue. Now: muted tint, grey text.
   ────────────────────────────────────────────────────────────────────── */
.sub-tier-pill, .subscription-badge, .tier-badge, .plan-badge,
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: rgba(33,150,243,0.10) !important;
  color: #B8B8B8 !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"],
html body .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
  background: #2196F3 !important;
  background-color: #2196F3 !important;
  background-image: none !important;
  color: #FFFFFF !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: #FFFFFF !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,
.seg-btn.is-active,
.tab-btn.is-active,
.topnav-views.is-active {
  background: #2196F3 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* End v40.5cl */

/* ============ v40.5cn ============ */
/* 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.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Top-nav floating pill — active chip = #2196F3 brand blue */
  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 .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 999px !important;
  }
  /* Mobile topnav Views/Chat chip (mt-switch-opt) active = blue */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30) !important;
  }
  /* Route sub-tab buttons (Timeline / Compact / Map / AI Optimize) */
  .route-viewbtn.is-active,
  .route-viewswitch .route-viewbtn.is-active {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }
  /* BUG 2: Guarantee tap targets are interactive on mobile */
  .route-viewbtn,
  .route-viewswitch .route-viewbtn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 480px) {
  /* Repeat at phone breakpoint to win over any 820px block */
  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 .gl-floating-pill.gl-floating-pill--topbar .gfp-item.active {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 999px !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active,
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"] {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.30) !important;
  }
  .route-viewbtn.is-active,
  .route-viewswitch .route-viewbtn.is-active {
    background: #2196F3 !important;
    background-color: #2196F3 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }
  .route-viewbtn,
  .route-viewswitch .route-viewbtn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}

/* 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__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #E5E5E5;
}
.route-empty-state__sub {
  margin: 0;
  font-size: 13px;
  color: #888888;
  max-width: 280px;
  line-height: 1.5;
}
.route-empty-state__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.route-empty-state__btn {
  background: rgba(33, 150, 243, 0.14);
  border: 1px solid rgba(33, 150, 243, 0.35);
  color: #2196F3;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease;
}
.route-empty-state__btn:hover,
.route-empty-state__btn:active {
  background: rgba(33, 150, 243, 0.24);
}

/* End v40.5cn */

/* ============================================================
   === 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 #FFFFFF 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 */
@media (max-width: 768px) {
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* BUG 1 — inactive chip: solid dark grey, no border */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__) {
    background: #2A2A2A !important;
    background-color: #2A2A2A !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #E5E5E5 !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
  }

  /* v40.5en: active chip = soft translucent blue (matches Drafting answer pill) */
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    background: rgba(33, 150, 243, 0.15) !important;
    background-color: rgba(33, 150, 243, 0.15) !important;
    background-image: none !important;
    border: 1px solid rgba(33, 150, 243, 0.35) !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: none !important;
    color: #2196F3 !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 480px) {
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch:not(#__never__) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt:not(#__never__) {
    background: #2A2A2A !important;
    background-color: #2A2A2A !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #E5E5E5 !important;
    border-radius: 999px !important;
  }
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt.is-active:not(#__never__),
  html body nav.mobile-topnav.mobile-topnav--v1940 .mt-switch-opt[aria-selected="true"]:not(#__never__) {
    background: rgba(33, 150, 243, 0.15) !important;
    background-color: rgba(33, 150, 243, 0.15) !important;
    border: 1px solid rgba(33, 150, 243, 0.35) !important;
    outline: none !important;
    box-shadow: none !important;
    color: #2196F3 !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }
}

/* BUG 3 — bulletproof /mo color override: brand blue, never cyan/green */
body .route-monthly-value,
body [class*="monthly"],
body .stop-card .mo,
body .mt-stop .mo,
body .rt-price-mo,
body .rsm-acct-mo { color: #2196F3 !important; }

/* BUG 4 — all route toolbar chips/buttons: fully rounded pills */
@media (max-width: 768px) {
  body .gfp-item,
  body .route-chip,
  body .route-toolbar button,
  body .route-grid > *,
  body .route-actions button,
  body .mt-switch-opt,
  body .route-gps-btn,
  body .route-refresh-btn,
  body .route-lock-btn,
  body .route-period-btn,
  body .route-hdr-cell button,
  body .route-hdr-row button,
  body .route-hdr-row1 button,
  body .route-hdr-row2 button {
    border-radius: 999px !important;
  }
}

/* End v40.5cp */

/* ============================================================
   === v40.5cq — Desktop Polish Pass (11 items) ===
   All overrides use high specificity to win over existing rules.
   Appended at end of file — no existing rules modified.
   ============================================================ */

/* ── Fix 1: Dashboards dropdown — rectangular card (14px), NOT pill ──────── */
html body .dr-dd-menu,
html body .dashboards-dropdown,
html body .dashboards-menu,
html body .gl-menu,
html body .gl-popover,
html body .dashboards-hub-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,
html body .dashboards-dropdown .dr-dd-item {
  border-radius: 8px !important;
}

/* ── Fix 2: Top Brain / No sync yet pills — remove border, solid bg ──────── */
html body #sync-indicator,
html body #brain-pill,
html body #etl-pill,
html body .topbar-status-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 {
  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;
}
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 */
html body.route-ask .gfp-item--newchat {
  display: none !important;
}
/* Hide any white square logo chip floating overlay on ask view */
html body.route-ask .ai-logo-chip,
html body.route-ask .ask-fab,
html body.route-ask .compose-fab,
html body.route-ask .new-chat-fab,
html body.route-ask [class*="create-chat"],
html body.route-ask [class*="chat-fab"] {
  display: none !important;
}

/* ── Fix 4: Overview — kill white chip borders on Quick Actions ───────────── */
html body .quick-actions-grid button,
html body .quick-actions-grid a,
html body .dashboard-view .quick-actions button,
html body .dashboard-view .quick-actions a,
html body .quick-action,
html body .overview-quick-action,
html body .gl-quick-action,
html body .quick-action-btn,
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 .dashboard-view .quick-actions button: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 .overview-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 .automation-status,
html body .auto-status-label,
html body [class*="automation-status-pill"],
html body .automations-view .status-chip,
html body .automation-row .status-badge,
html body .automation-card .status-badge {
  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 .run-now-btn,
html body .automation-actions .run-now-btn,
html body .automation-card-foot .run-now-btn,
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;
}
html body .run-now-btn:hover,
html body .automation-actions .run-now-btn:hover {
  background: rgba(33,150,243,0.16) !important;
}
/* View history — ghost */
html body .view-history-btn,
html body .automation-actions .view-history-btn,
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;
}
html body .view-history-btn:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #E5E5E5 !important;
}
/* Auto-status dot on = brand blue */
html body .automation-row .auto-status.on,
html body .automation-card .auto-status.on {
  background: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.18) !important;
}

/* ── Fix 6: Route — dotted line centered + stop circle exact #2196F3 ─────── */
/* Active/current stop keeps its existing halo color. is-selected (v40.14:
   the stop whose drawer is open right now) is intentionally NOT teal —
   it must be exact Totaly blue #2196F3, and takes precedence when both
   classes land on the same stop. */
html body .route-stop.is-current .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
}
html body .route-stop.is-selected .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
}
/* DEFAULT stop (unselected) keeps the grey from v40.5cp */
html body .route-stop-num,
html body .route-deal-num {
  background: #3A3A3C !important;
  color: #E5E5E5 !important;
}
/* Active overrides the grey above */
html body .route-stop.is-current .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
}
html body .route-stop.is-selected .route-stop-num {
  background: #2196F3 !important;
  color: #FFFFFF !important;
}
/* Timeline connector line — centered via .rt-leg margin-left: 29px in v40.5ct */

/* ── Fix 7: Data Sources — center text + remove between-chip color ────────── */
/* Center the header block */
html body .gl-ds-header,
html body .data-sources-header,
html body .ds-page-header {
  text-align: center !important;
}
html body .gl-ds-title,
html body .data-sources-header h2,
html body .ds-page-header h2 {
  color: #E5E5E5 !important;
  text-align: center !important;
}
html body .gl-ds-sub,
html body .data-sources-header p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #B8B8B8 !important;
}
html body .gl-ds-stats {
  display: flex !important;
  justify-content: center !important;
  color: #B8B8B8 !important;
}
html body .gl-ds-stats .gl-ds-stat strong {
  color: #E5E5E5 !important;
}
/* Section category labels — center */
html body .gl-ds-cat,
html body .ds-section-label,
html body .data-section-header,
html body .gl-ds-view .gl-ds-cat {
  text-align: center !important;
  color: #8A8A8A !important;
}
/* Remove between-card border/shadow */
html body .gl-ds-card,
html body .data-source-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-ds-card .connect-btn,
html body .data-source-card .connect-btn,
html body .gl-ds-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-ds-card .connect-btn:hover,
html body .gl-ds-card button:hover {
  background: rgba(33,150,243,0.16) !important;
}

/* ── Fix 8: Settings — remove double borders, add breathing room ──────────── */
html body .settings-row,
html body .settings-section > *,
html body .settings-card {
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 16px 20px !important;
}
html body .settings-row:last-child,
html body .settings-section > *:last-child,
html body .settings-card:last-child {
  border-bottom: none !important;
}
/* Settings panel labels (existing toggle-row style) */
html body .settings-view .panel label {
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 16px 0 !important;
}
html body .settings-view .panel label:last-of-type {
  border-bottom: none !important;
}

/* ── 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:hover {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  color: #FFFFFF !important;
}
html body #chat-history-list .history-item.active,
html body #chat-history-list .history-item.is-active {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  color: #FFFFFF !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 */
html body .chat-history-item,
html body .sidebar-chat-item,
html body .pinned-chat-item {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
}
html body .chat-history-item:hover,
html body .sidebar-chat-item:hover,
html body .pinned-chat-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  color: #FFFFFF !important;
}
html body .chat-history-item.is-active,
html body .sidebar-chat-item.is-active,
html body .pinned-chat-item.is-active {
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

/* ── Fix 11: Enterprise pill — white bg, black text, bold ────────────────── */
html body .enterprise-pill,
html body .tenant-pill,
html body .plan-badge,
html body .sub-tier-pill,
html body .subscription-badge,
html body .tier-badge,
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"],
html body .settings-view .sub-tier-chip--enterprise {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ── End v40.5cq ── */

/* ============================================================
   === v40.5cq — SIDEBAR FIXES (5 items + active icon) ===
   Appended to v40.5cq block. High specificity overrides only.
   ============================================================ */

/* ── 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) */
  -webkit-box-shadow: none !important;
}
/* 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-header,
html body aside.sidebar#sidebar .sidebar-header--v1944 {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
html body aside.sidebar#sidebar .sidebar-footer,
html body aside.sidebar#sidebar .sidebar-footer--v1940 {
  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;
}

/* ── End v40.5cq Sidebar Fixes ── */


/* ============================================================
   === 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
   ============================================================ */

/* ── v40.5cr Fix 1: Collapsed sidebar icons — readable color on dark bg ─── */
/* 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;
}

/* ── v40.5cr Fix 2: Topbar nav pill — rectangular 16px, NOT 999px capsule ─ */
/* 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;
}

/* ── v40.5cr Fix 3: Top status chips — solid #2A2A2A bg with proper border ─ */
/* 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: 1px solid rgba(255,255,255,0.08) !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;
}

/* ── v40.5cr Fix 4: Sidebar left edge — kill all inset box-shadows ───────── */
/* 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;
  -webkit-box-shadow: none !important;
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* ── v40.5cr Fix 5: Enterprise pill — white bg, black text ───────────────── */
/* 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: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* ── v40.5cr Fix 6: Dashboards dropdown — 14px not pill-shaped ───────────── */
/* 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;
}

/* ── v40.5cr Fix 7: Messages view — remove any spurious border-radius ────── */
/* 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;
}

/* ── v40.5cr Fix 8: Quick actions — blue tint, no white outline ─────────── */
html body .quick-actions-grid button,
html body .quick-actions-grid a,
html body .dashboard-view .quick-actions button,
html body .dashboard-view .quick-actions 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;
}

/* ── v40.5cr Fix 9: Sidebar active item label — keep visible ─────────────── */
/* v40.20: was #FFFFFF, which fought the Fix 6 blue-tint background and read
   as a dark navy/cyan pill on mobile instead of Totaly blue. Active label
   and icon must be #2196F3 (Totaly blue), matching the background tint. */
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;
}

/* ── v40.5cr Fix 10: Chat history items — no border by default ───────────── */
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;
}

/* ── End v40.5cr ── */

/* ============ v40.5cw — Calendar Compact View ============ */

/* Wrapper */
.rt-cal {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #191A1A;
  border-radius: 12px;
  border: 1px solid #2A2A2A;
  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 #2A2A2A;
  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 #2A2A2A;
}

/* Event area (right of time label) */
.rt-cal-events {
  flex: 1;
  position: relative;
  min-height: 56px;
  /* v40.5cx: removed padding so absolute-positioned blocks
     use full area; left offset handled on blocks themselves */
  padding: 0 4px;
  overflow: visible;
}

/* Stop block (calendar event) */
.rt-cal-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(33, 150, 243,0.10);
  border-left: 3px solid #2196F3;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
}
.rt-cal-block:hover {
  background: rgba(33, 150, 243,0.18);
}
.rt-cal-block--hold {
  background: rgba(90,90,90,0.15);
  border-left-color: #5A5A5A;
}
.rt-cal-block--hold:hover {
  background: rgba(90,90,90,0.22);
}
.rt-cal-block--new {
  background: rgba(16,185,129,0.12);
  border-left-color: #10B981;
}
.rt-cal-block--new:hover {
  background: rgba(16,185,129,0.20);
}
.rt-cal-block--now {
  background: #2196F3;
  border-left-color: #1565C0;
}
.rt-cal-block--now:hover {
  background: #1E88E5;
}

/* v40.14 — selected (drawer open for this stop) on the AI Optimize
   calendar view. Separate from --now/is-current — always Totaly blue,
   wins visually when both are present since it's declared after --now
   and uses !important on the accent properties. */
.rt-cal-block.is-selected {
  background: #2196F3 !important;
  border-left-color: #0D47A1 !important;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.45);
}
.rt-cal-block.is-selected:hover {
  background: #1E88E5 !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: #FFFFFF !important;
}

/* Block content */
.rt-cal-block-name {
  font-size: 13px;
  font-weight: 600;
  color: #E5E5E5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-cal-block--now .rt-cal-block-name {
  color: #FFFFFF;
}
.rt-cal-block-addr {
  font-size: 11px;
  color: #8A8A8A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-cal-block--now .rt-cal-block-addr {
  color: rgba(255,255,255,0.75);
}
.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: #2196F3;
}
.rt-cal-block--now .rt-cal-block-price {
  color: #FFFFFF;
}
.rt-cal-block-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #B8B8B8;
}
.rt-cal-block--now .rt-cal-block-pill {
  background: rgba(255,255,255,0.25);
  color: #FFFFFF;
}
.rt-cal-block--hold .rt-cal-block-pill {
  background: rgba(184,128,79,0.20);
  color: #B8804F;
}

/* 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 #2A2A2A;
  background: #1A1B1B;
}
.rt-cal-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #E5E5E5;
  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;
}

/* ── v40.5cx: calendar block time + footer ── */
.rt-cal-block-time {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-top: auto;
  padding-top: 2px;
  letter-spacing: 0.02em;
}
.rt-cal-block--now .rt-cal-block-time {
  color: rgba(255,255,255,0.75);
}
/* 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;
}
/* ── End v40.5cx ── */

/* ════════════════════════════════════════════════════════════════════════
   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 #393836;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.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: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rt-crm-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 821px) {
  .rt-crm-sheet {
    top: 70px;
    right: 0;
    left: auto;
    bottom: 0;
    width: 380px;
    border-radius: 12px 0 0 12px;
    border-top: 1px solid #393836;
    border-left: 1px solid #393836;
    box-shadow: -8px 0 32px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
    max-height: none;
  }
  .rt-crm-sheet.is-open { transform: translateX(0); }
  .rt-crm-sheet-backdrop { display: none !important; }
}

.rt-crm-sheet-handle {
  width: 36px;
  height: 4px;
  background: #3A3A3A;
  border-radius: 999px;
  margin: 10px auto 0;
}
@media (min-width: 821px) { .rt-crm-sheet-handle { display: none; } }

/* 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 #393836;
}
.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;
}
/* v40.14 — drawer quick-action icons (Call/Text/Nav/Log note/Reschedule)
   must be Totaly blue, not Nexus teal. */
.rt-crm-qbtn svg { color: #2196F3; 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: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: #1C1B19;
  border-top: 1px solid #393836;
  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 rgba(0,0,0,0.5);
}
.rt-crm-drawer.is-open { transform: translateY(0); }
.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 #393836;
  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: #2196F3;
  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 #393836;
  background: #26251F;
  color: #A0A09E;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rt-crm-drawer-btn--primary {
  background: #2196F3;
  border-color: #2196F3;
  color: #FFFFFF;
}
.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 #393836;
  background: #26251F;
  color: #A0A09E;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rt-crm-datechip.is-active {
  background: rgba(33,150,243,0.18);
  border-color: #2196F3;
  color: #2196F3;
}
.rt-crm-datechip-custom {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #393836;
  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: #FFFFFF;
  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 #393836;
}


/* ════════════════════════════════════════════════════════════════════════
   v40.5cy — My Hood Territory Intelligence
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.hood-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topnav-h, 0px));
  background: #191A1A;
  position: relative;
  overflow: hidden;
}

/* Desktop: sidebar is present — subtract sidebar width from height calc */
body.sidebar-open .hood-page,
body:not(.sidebar-collapsed) .hood-page {
  height: 100vh;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
/* v40.5dp: .hood-toolbar / .hood-chips / .hood-chip / .hood-gps-btn removed —
   the map toolbar was collapsed into Hood Settings + the locate FAB. */

/* ── Map wrap ───────────────────────────────────────────────────────────── */
.hood-map-wrap {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.hood-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* ── Loading overlay ────────────────────────────────────────────────────── */
/* v40.12: canonical rule lives further down (~line 39171). This stub is kept
   only so no other file breaks on missing selectors — every visual property
   is set on the second block so the first paint never renders above the
   topbar. */
.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-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(79,152,163,0.25);
  border-top-color: #4F98A3;
  border-radius: 50%;
  animation: hood-spin 0.6s linear infinite;
}
@keyframes hood-spin { to { transform: rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────────────────── */
.hood-empty {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 26, 26, 0.92);
  border: 1px solid #2A2A2A;
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  max-width: 320px;
  z-index: 20;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.hood-empty-title { font-size: 14px; font-weight: 600; color: #E5E5E5; margin-bottom: 4px; }
.hood-empty-body  { font-size: 12px; color: #6B6B6B; line-height: 1.4; }

/* ── Bottom sheet (mobile default) / Right drawer (desktop) ─────────────── */
.hood-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1F2121;
  border-top: 1px solid #2E3030;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hood-sheet.is-open {
  transform: translateY(0);
}
.hood-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
}

/* Desktop: right drawer instead of bottom sheet */
@media (min-width: 769px) {
  .hood-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 380px;
    border-radius: 0;
    border-top: none;
    border-left: 1px solid #2E3030;
    box-shadow: -4px 0 24px rgba(0,0,0,0.45);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: none;
  }
  .hood-sheet.is-open {
    transform: translateX(0);
  }
  .hood-sheet-backdrop {
    display: none !important;
  }
}

.hood-sheet-inner { padding: 0 0 24px; }

.hood-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 8px auto;
  padding: 20px 4px;               /* ≥44×44 touch target around the 4px bar */
  background-clip: content-box;
  box-sizing: content-box;
  cursor: grab;
  touch-action: none;              /* let the drag gesture own vertical moves */
}
/* FIX 6 — no transition while dragging; the release snap uses the base transition. */
.hood-sheet.hood-dragging { transition: none; }
@media (min-width: 769px) {
  .hood-sheet-handle { display: none; }
}

.hood-sheet-header {
  padding: 12px 48px 10px 16px;
  border-bottom: 1px solid #2A2A2A;
}
.hood-sheet-addr {
  font-size: 16px;
  font-weight: 700;
  color: #F0F0F0;
  line-height: 1.25;
}
.hood-sheet-addr-sub {
  font-size: 12px;
  color: #6B6B6B;
  margin-top: 2px;
}
.hood-sheet-close { position: absolute; top: 12px; right: 12px; }

/* 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;
}
.hood-customer-active {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}
.hood-sheet-knock-count {
  font-size: 12px;
  color: #6B6B6B;
}
.hood-sheet-date { font-size: 11px; color: #5A5A5A; }

/* Sections */
.hood-sheet-section {
  padding: 10px 16px 4px;
  border-top: 1px solid #242626;
}
.hood-sheet-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4A4A4A;
  margin-bottom: 8px;
}

/* Knock history */
.hood-sheet-history { display: flex; flex-direction: column; gap: 6px; }
.hood-sheet-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hood-sheet-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hood-sheet-history-status { font-size: 13px; color: #D0D0D0; font-weight: 600; flex: 1; }
.hood-sheet-history-date   { font-size: 11px; color: #5A5A5A; }
.hood-sheet-history-notes  { font-size: 11px; color: #5A5A5A; padding-left: 16px; margin-top: -2px; }
.hood-sheet-empty-hist     { font-size: 12px; color: #4A4A4A; }

/* Customer card */
.hood-sheet-customer-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hood-sheet-customer-name   { font-size: 14px; font-weight: 600; color: #E5E5E5; }
.hood-sheet-customer-phone  { font-size: 12px; color: #6B6B6B; }
.hood-sheet-customer-status { font-size: 11px; color: #10B981; font-weight: 600; }

/* KV list */
.hood-sheet-kv { display: flex; flex-direction: column; gap: 4px; }
.hood-sheet-kv-row { display: flex; align-items: center; gap: 8px; }
.hood-sheet-kv-key { font-size: 11px; color: #A0A09E; width: 56px; flex-shrink: 0; font-weight: 600; }
.hood-sheet-kv-val { font-size: 13px; color: #ECEBE9; }

/* v40.13c customer sheet: skeleton loader, subscriptions, recent service,
   upcoming, and meaningful empty states. Nexus teal only (#4F98A3 / #01696F),
   dark-mode surface matches existing .hood-sheet (#1F2121 / #2E3030). */
.hood-sheet-empty {
  font-size: 12px;
  color: #6B6B6B;
  padding: 4px 0 2px;
}

/* 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; }
.hood-sk-line {
  height: 11px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: sk 1.3s infinite;
}
.hood-sheet-header .hood-sk-line:first-child { height: 15px; }

/* 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: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.hood-sub-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hood-sub-name { font-size: 13px; font-weight: 600; color: #ECEBE9; }
.hood-sub-cycle { font-size: 11px; color: #8A8988; }
.hood-sub-sold { font-size: 11px; color: #6B6B6B; }
.hood-sub-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.hood-sub-value { font-size: 13px; font-weight: 600; color: #42A5F5; }
.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;
}
.hood-sub-badge--active { background: rgba(33,150,243,0.18); color: #42A5F5; }
.hood-sub-badge--hold { background: rgba(255,255,255,0.06); color: #B8B8B8; }
.hood-sub-badge--cancelled { background: rgba(255,255,255,0.05); color: #797876; font-weight: 600; }

/* 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;
}
.hood-appt-row--next {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(33,150,243,0.06);
  border: 1px solid rgba(33,150,243,0.14);
}
.hood-appt-date { color: #ECEBE9; font-weight: 600; width: 78px; flex-shrink: 0; }
.hood-appt-tech { color: #42A5F5; font-weight: 600; }
.hood-appt-notes {
  color: #6B6B6B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Body text for pins */
.hood-sheet-body-text { font-size: 13px; color: #B0B0B0; line-height: 1.5; white-space: pre-wrap; }

/* 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-error {
  padding: 24px 16px;
  text-align: center;
}
.hood-sheet-error-msg { font-size: 13px; color: #6B6B6B; margin-bottom: 12px; }
.hood-sheet-retry {
  background: rgba(33,150,243,0.15); border: 1px solid rgba(33,150,243,0.3);
  color: #2196F3; border-radius: 8px; padding: 8px 16px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.hood-sheet-actions {
  padding: 12px 16px 0;
  border-top: 1px solid #242626;
  margin-top: 8px;
}
.hood-sheet-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hood-outcome-wrap { position: relative; flex: 1 1 auto; min-width: 130px; }
.hood-outcome-select {
  width: 100%;
  height: 36px;
  background: rgba(33,150,243,0.08);
  border: 1px solid rgba(33,150,243,0.25);
  border-radius: 8px;
  color: #2196F3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.hood-outcome-select:focus { outline: none; border-color: #2196F3; }
.hood-outcome-select option { background: #1F2121; color: #E5E5E5; }
.hood-action-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: #2A2A2A;
  border: 1px solid #3A3A3A;
  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-action-btn:hover { background: #333; border-color: #484848; color: #FFFFFF; }
.hood-action-btn--pin { border-color: rgba(33,150,243,0.4); color: #2196F3; background: rgba(33,150,243,0.10); }
.hood-action-btn--pin:hover { background: rgba(33,150,243,0.20); border-color: #2196F3; }
.hood-action-btn--danger { border-color: rgba(239,68,68,0.35); color: #EF4444; background: rgba(239,68,68,0.08); }
.hood-action-btn--danger:hover { background: rgba(239,68,68,0.15); border-color: #EF4444; }

/* ── Drop-pin modal ──────────────────────────────────────────────────────── */
.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: #1F2121;
  border: 1px solid #2E3030;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 20px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hood-pin-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #F0F0F0;
  margin: 0;
}
.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-select,
.hood-pin-modal-input {
  background: #161818;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #E5E5E5;
  font-size: 13px;
  padding: 8px 10px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.hood-pin-modal-select {
  height: 40px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23E5E5E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  font-weight: 500;
}
.hood-pin-modal-select:focus,
.hood-pin-modal-input:focus { outline: none; border-color: #2196F3; }
.hood-pin-modal-textarea {
  background: #161818;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #E5E5E5;
  font-size: 13px;
  padding: 8px 10px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 64px;
}
.hood-pin-modal-textarea:focus { outline: none; border-color: #2196F3; }
.hood-pin-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.hood-pin-modal-cancel {
  background: transparent;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: #6B6B6B;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
  height: 36px;
  cursor: pointer;
  font-family: inherit;
}
.hood-pin-modal-cancel:hover { border-color: #3A3A3A; color: #E5E5E5; }
.hood-pin-modal-save {
  background: #2196F3;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 0 18px;
  height: 36px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.hood-pin-modal-save:hover { background: #1E88E5; }
.hood-pin-modal-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.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);
}
.hood-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── route-hood body class ─────────────────────────────────────────────── */
body.route-hood #main-content {
  padding: 0;
  overflow: hidden;
}

/* ── End v40.5cy ── */

/* v40.5dp: v40.5cy mobile toolbar overrides removed (toolbar deleted). */

/* ════════════════════════════════════════════════════════════════════════
   v40.5cz — Hood Fixes: mask, toolbar, default state, Load Doors
   ════════════════════════════════════════════════════════════════════════ */

/* FIX 1: body::before gradient mask must NOT cover map on /hood
   The v40.5bt rule sets body::before to 160px fixed overlay (z-index 119)
   on all routes. On /hood this gradient bleeds over the full-screen map.
   Solution: constrain to topbar height (64px) and set z-index below the
   hood toolbar (z-index 10) so it only covers the topnav strip. */
@media (max-width: 768px) {
  body.route-hood::before {
    height: 64px !important;
    z-index: 9 !important;
  }
}

/* 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. */
@media (max-width: 820px) {
  body.route-hood .hood-page {
    position: relative;
    height: 100svh;
  }
  body.route-hood .hood-map-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  body.route-hood .hood-loading {
    z-index: 25;
  }
  body.route-hood .hood-sheet {
    z-index: 30;
  }
  body.route-hood .hood-sheet-backdrop {
    z-index: 29;
  }
  body.route-hood .hood-pin-modal {
    z-index: 35;
  }
}

/* v40.5cz chip/doors overrides removed in v40.5de — chips are now styled by
   body.route-hood .hood-chip below, and the doors control no longer exists. */

/* ── End v40.5cz ── */

/* ════════════════════════════════════════════════════════════════════════
   v40.5db — Hood: mask kill + unified buttons + topbar clearance
   ════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Kill body::before gradient mask on /hood entirely ──────────── */
/* v40.5cz only constrained it to 64px height but the gradient stops still
   bled into the toolbar. On /hood the topbar pill has its own backdrop-filter
   so the body::before mask is not needed at all. */
body.route-hood::before {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* v40.5dp: toolbar-clearance + filter-chip overrides removed (toolbar deleted). */

/* ── End v40.5db ── */

/* ════════════════════════════════════════════════════════════════════════
   v40.5dc — Hood COMPLETE REBUILD
   Ground-up toolbar/chip/button layout fix. Kills mask. Two-row toolbar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Kill body::before mask on /hood absolutely ────────────────────────── */
body.route-hood::before,
body.route-hood::after {
  display: none;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Disable pull-to-refresh (overscroll) on hood page ─────────────────── */
body.route-hood {
  overscroll-behavior-y: contain;
}

/* ── Remove padding from main-content on /hood ─────────────────────────── */
body.route-hood #main-content {
  padding: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOOD PAGE LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

/* Full-screen hood page container */
body.route-hood .hood-page {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #191A1A;
}

/* v40.5dm FIX 2: global tactile press feedback. Any element with .tactile-press
   scales down briefly while pressed; a delegated pointerdown handler in hood.js
   also fires navigator.vibrate(8) on devices that support the Vibration API. */
.tactile-press {
  transition: transform 60ms ease-out;
  touch-action: manipulation;
}
.tactile-press:active {
  transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════════
   MAP WRAPPER — fills entire hood-page behind toolbar
   ══════════════════════════════════════════════════════════════════════════ */

body.route-hood .hood-map-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.route-hood .hood-map {
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════════════════════════════════════════ */

/* v40.10: loading pill pinned to BOTTOM so it never sits behind the Chat/Views
   topbar. Nexus teal spinner instead of legacy blue. Self-contained —
   every positioning property explicit to override the earlier block. */
.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 rgba(255,255,255,0.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;
}
.hood-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(79,152,163,0.25);
  border-top-color: #4F98A3;
  border-radius: 50%;
  animation: hood-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes hood-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM SHEET
   ══════════════════════════════════════════════════════════════════════════ */

body.route-hood .hood-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  /* v40.10 — solid Nexus dark surface; the glassy 0.35 alpha version made
     the map bleed through and killed text contrast (Branson: "can't see text"). */
  background: #1C1B19;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid #393836;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.55);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1),
              max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 50svh;
  overflow-y: auto;
}
body.route-hood .hood-sheet.is-open {
  transform: translateY(0);
}
/* PART A (v40.5dv) — tap-to-expand fills to the top; mobile-scoped so the
   desktop right-drawer (max-height:none) is untouched. v40.5dy FIX 2: expand
   jumps to the FULL viewport (100svh minus the safe-area top inset), not a
   partial half-sheet — squared top corners and a top safe-area pad. */
@media (max-width: 820px) {
  body.route-hood .hood-sheet.is-expanded {
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
  }
}
/* 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). */
body.route-hood .hood-sheet.hood-dragging { transition: none; }
body.route-hood .hood-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0,0,0,0.45);
}

/* Desktop: right drawer */
@media (min-width: 821px) {
  body.route-hood .hood-sheet {
    position: fixed;
    top: 70px;
    right: 0;
    left: auto;
    bottom: 0;
    width: 360px;
    border-radius: 12px 0 0 12px;
    /* v40.10 — solid Nexus surface, matches the mobile sheet. */
    background: #1C1B19;
    border-top: 1px solid #393836;
    border-left: 1px solid #393836;
    box-shadow: -8px 0 32px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
    max-height: none;
  }
  body.route-hood .hood-sheet.is-open {
    transform: translateX(0);
  }
  body.route-hood .hood-sheet-backdrop {
    display: none !important;
  }
}

/* PART F — clear the iOS home indicator on the scrollable sheet body. */
.hood-sheet-inner { padding: 0 0 max(32px, env(safe-area-inset-bottom)); }

.hood-sheet-handle {
  width: 36px;
  height: 4px;
  background: #3A3A3A;
  border-radius: 999px;
  margin: 10px auto 0;
}
@media (min-width: 821px) { .hood-sheet-handle { display: none; } }

/* PART A (v40.5dv) — chevron expand button replaces the drag handle. Sticky so
   it stays reachable while the sheet body scrolls; margin auto centers it. */
.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: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #2196F3;
  cursor: pointer;
}
.hood-sheet-expand-btn svg { transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
.hood-sheet.is-expanded .hood-sheet-expand-btn svg { transform: rotate(180deg); }
@media (min-width: 821px) { .hood-sheet-expand-btn { display: none; } }

.hood-sheet-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 60px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hood-sheet-addr {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #E5E5E5;
  line-height: 1.3;
}
.hood-sheet-addr-sub {
  font-size: 12px;
  color: #5A5A5A;
  margin-top: 2px;
}
.hood-sheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}

.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-customer-active {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}
.hood-sheet-knock-count {
  font-size: 12px;
  color: #5A5A5A;
}
.hood-sheet-date { font-size: 11px; color: #5A5A5A; }

.hood-sheet-section {
  padding: 12px 16px 4px;
  border-top: 1px solid #2C2B29;
}
.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-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hood-sheet-history-status { font-size: 13px; color: #D0D0D0; font-weight: 600; flex: 1; }
.hood-sheet-history-date   { font-size: 11px; color: #5A5A5A; }
.hood-sheet-history-notes  { font-size: 11px; color: #5A5A5A; padding-left: 16px; margin-top: -2px; }
.hood-sheet-empty-hist     { font-size: 12px; color: #4A4A4A; }

.hood-sheet-customer-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hood-sheet-customer-name   { font-size: 14px; font-weight: 600; color: #E5E5E5; }
.hood-sheet-customer-phone  { font-size: 12px; color: #6B6B6B; }
.hood-sheet-customer-status { font-size: 11px; color: #10B981; font-weight: 600; }

.hood-sheet-kv { display: flex; flex-direction: column; gap: 6px; }
.hood-sheet-kv-row { display: flex; align-items: flex-start; gap: 8px; }
.hood-sheet-kv-key { font-size: 10px; font-weight: 700; color: #A0A09E; width: 88px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.hood-sheet-kv-val { font-size: 13px; color: #ECEBE9; flex: 1; }

.hood-sheet-body-text { font-size: 13px; color: #B0B0B0; line-height: 1.5; white-space: pre-wrap; }

.hood-sheet-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.hood-sheet-error { padding: 24px 16px; text-align: center; }
.hood-sheet-error-msg { font-size: 13px; color: #6B6B6B; margin-bottom: 12px; }
.hood-sheet-retry {
  background: #1565C0; border: none; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; cursor: pointer;
}

.hood-sheet-actions {
  padding: 12px 16px 0;
  border-top: 1px solid #222;
  margin-top: 4px;
}
.hood-sheet-action-group { display: flex; gap: 8px; flex-wrap: wrap; }

.hood-outcome-wrap { position: relative; flex: 1 1 auto; min-width: 130px; }
.hood-outcome-select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: #222;
  border: 1px solid #333;
  border-radius: 8px;
  color: #B8B8B8;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}
.hood-outcome-select:focus { outline: none; border-color: #2196F3; }
.hood-outcome-select option { background: #1F2121; color: #E5E5E5; }

.hood-action-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: #242424;
  border: 1px solid #333;
  border-radius: 8px;
  color: #D0D0D0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s;
}
.hood-action-btn:hover { background: #333; border-color: #484848; color: #FFF; }
.hood-action-btn--pin { border-color: rgba(33,150,243,0.4); color: #2196F3; background: rgba(33,150,243,0.10); }
.hood-action-btn--pin:hover { background: rgba(33,150,243,0.20); border-color: #2196F3; }
.hood-action-btn--danger { border-color: rgba(239,68,68,0.35); color: #EF4444; background: rgba(239,68,68,0.08); }
.hood-action-btn--danger:hover { background: rgba(239,68,68,0.15); border-color: #EF4444; }

/* 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-badge--warning { background: rgba(33,150,243,0.15); color: #2196F3; }
.hood-badge--info    { background: rgba(33,150,243,0.15); color: #2196F3; }
.hood-badge--neutral { background: rgba(107,114,128,0.15); color: #9CA3AF; }

/* v40.5dq FIX 5 — unified chip (nothing above 24px tall) */
.hood-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;   /* v40.5ds A4: full pill, not a 12px rounded rect */
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.35);
  color: #2196F3;
  cursor: pointer;
  white-space: nowrap;
}
.hood-chip.solid { background: #2196F3; border-color: #2196F3; color: #fff; }
.hood-chip.ghost { background: transparent; border-color: rgba(33, 150, 243, 0.35); color: #2196F3; }
.hood-chip svg { width: 14px; height: 14px; }

.hood-parcel-explain-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: rgba(33,150,243,0.08);
  border: 1px solid rgba(33,150,243,0.25);
  border-radius: 6px;
  color: #2196F3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.hood-parcel-explain-btn:hover { background: rgba(33,150,243,0.15); }
.hood-parcel-explain-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.hood-parcel-explain-result {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.hood-explain-result { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.hood-explain-confidence { font-size: 11px; color: #5A5A5A; align-self: center; }
.hood-explain-reasoning { font-size: 12px; color: #B0B0B0; line-height: 1.5; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   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-inner {
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
}
.hood-pin-modal-title { font-size: 16px; font-weight: 700; color: #E5E5E5; margin: 0 0 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-select,
.hood-pin-modal-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: #252525;
  border: 1px solid #333;
  border-radius: 8px;
  color: #E5E5E5;
  font-size: 13px;
  font-family: inherit;
  appearance: none;
}
.hood-pin-modal-select:focus,
.hood-pin-modal-input:focus { outline: none; border-color: #2196F3; }
.hood-pin-modal-textarea {
  width: 100%;
  padding: 8px 12px;
  background: #252525;
  border: 1px solid #333;
  border-radius: 8px;
  color: #E5E5E5;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
}
.hood-pin-modal-textarea:focus { outline: none; border-color: #2196F3; }
.hood-pin-modal-actions { display: flex; gap: 8px; margin-top: 4px; }
.hood-pin-modal-cancel {
  flex: 1;
  height: 38px;
  background: #252525;
  border: 1px solid #333;
  border-radius: 8px;
  color: #B8B8B8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.hood-pin-modal-cancel:hover { border-color: #3A3A3A; color: #E5E5E5; }
.hood-pin-modal-save {
  flex: 2;
  height: 38px;
  background: #2196F3;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.hood-pin-modal-save:hover { background: #1E88E5; }
.hood-pin-modal-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════════════════ */

.hood-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 60;
  background: #1F2121;
  border: 1px solid #2A2A2A;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #E5E5E5;
  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);
}
.hood-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */

.hood-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.hood-empty-title { font-size: 14px; font-weight: 600; color: #E5E5E5; margin-bottom: 4px; }
.hood-empty-body  { font-size: 12px; color: #6B6B6B; line-height: 1.4; }

/* ── End v40.5dc ── */

/* ════════════════════════════════════════════════════════════════════════
   v40.5dd — Hood Toolbar: safe-area top clearance + horizontal scroll rows
   ════════════════════════════════════════════════════════════════════════ */

/* ── 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. */
@media (max-width: 820px) {
  /* v40.5dp: toolbar removed — the map fills the viewport (the fixed mobile
     topnav floats over the top edge, matching desktop). */
  body.route-hood .hood-map-wrap {
    position: fixed;
    inset: 0;
    z-index: 1;
  }
}

/* ── End v40.5dd ── */

/* ══════════════════════════════════════════════════════════════════════════
   HOOD SETTINGS PANEL + customer-sheet additions — v40.5dg
   Bottom sheet on mobile / right drawer on desktop. Brand blue #2196F3 only.
   ══════════════════════════════════════════════════════════════════════════ */

/* Body scroll-lock while the settings panel is open */
body.hood-scroll-lock { overflow: hidden; }

/* Backdrop */
.hood-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
}

/* Panel — mobile bottom sheet */
.hood-settings {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #1A1B1B;
  border-top: 1px solid #2A2A2A;
  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 rgba(0,0,0,0.5);
}
.hood-settings.is-open { transform: translateY(0); }

/* Panel — desktop right drawer */
@media (min-width: 821px) {
  .hood-settings {
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: 380px;
    max-height: none;
    border-top: none;
    border-left: 1px solid #2A2A2A;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  }
  .hood-settings.is-open { transform: translateX(0); }
}

.hood-set-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Header — v40.5dp: single-source compact rule (no stacked overrides); refresh btn + title + close in one row */
.hood-set-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.hood-set-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: #F0F0F0;
  letter-spacing: -0.01em;
}
.hood-set-close { flex-shrink: 0; }

/* Scrollable body */
.hood-set-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 8px;
}

/* Sections — v40.5dn: compacted spacing + subtle dividers */
.hood-set-section { padding: 10px 0 4px; }
.hood-set-section + .hood-set-section { border-top: 1px solid rgba(255,255,255,0.06); }
/* Section headers: 12px uppercase 600, 0.5px tracking, muted. */
.hood-set-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #797876;
  margin-bottom: 8px;
}

/* 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;
}
.hood-toggle-row:hover { background: rgba(255,255,255,0.04); }
/* Sub-rows: indent 40px, connected to the parent by a thin left border. */
.hood-toggle-row--sub {
  min-height: 40px;
  margin: 0 -10px 0 12px;
  padding: 8px 10px 8px 14px;
  border-left: 1px solid #393836;
  border-radius: 0 10px 10px 0;
}
.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-row:has(.hood-switch.is-on) .hood-toggle-icon { color: #42A5F5; }
.hood-toggle-row--sub .hood-toggle-icon { display: none; }
.hood-toggle-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: #CDCCCA;
  line-height: 1.3;
}
.hood-toggle-row--sub .hood-toggle-label { font-size: 14px; }
.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. */
.hood-switch {
  position: relative;
  width: 44px;
  height: 26px;
  min-height: 26px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: #3A3A3C;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}
.hood-switch.is-on { background: #2196F3; }
.hood-switch:focus-visible { outline: 2px solid #42A5F5; outline-offset: 2px; }
.hood-switch-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.16);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hood-switch.is-on .hood-switch-thumb { transform: translateX(16px); }

/* Filter field + chips (status / time range / map type) */
.hood-set-field { padding: 6px 0 2px; }
.hood-set-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #797876;
  margin-bottom: 6px;
}
.hood-set-hint-sub {
  font-weight: 400;
  font-size: 11px;
  color: #5A5957;
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.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 #393836;
  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:focus,
.hood-filter-chip:focus-visible { outline: none; box-shadow: none; }
.hood-filter-chip:hover { border-color: #42A5F5; color: #E8E7E5; }
.hood-filter-chip.is-active {
  background: #2196F3;
  border-color: #2196F3;
  color: #FFFFFF;
}

/* 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-set-section-label { color: #7A7974; }
[data-app-theme="light"] .hood-toggle-row:hover { background: rgba(0,0,0,0.03); }
[data-app-theme="light"] .hood-toggle-row--sub { border-left-color: #D4D1CA; }
[data-app-theme="light"] .hood-toggle-icon { color: #7A7974; }
[data-app-theme="light"] .hood-toggle-row:has(.hood-switch.is-on) .hood-toggle-icon { color: #1976D2; }
[data-app-theme="light"] .hood-toggle-label { color: #28251D; }
[data-app-theme="light"] .hood-toggle-hint { color: #7A7974; }
[data-app-theme="light"] .hood-switch { background: #E5E5E5; }
[data-app-theme="light"] .hood-switch.is-on { background: #1976D2; }
[data-app-theme="light"] .hood-switch:focus-visible { outline-color: #1976D2; }
[data-app-theme="light"] .hood-set-field-label { color: #7A7974; }
[data-app-theme="light"] .hood-filter-chip { border-color: #D4D1CA; color: #28251D; }
[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: #FFFFFF; }

/* Light theme: panel surface + chrome, so the drawer reads correctly on a light
   background (the control palette above assumes a light surface). v40.5eq. */
[data-app-theme="light"] .hood-settings {
  background: #F9F8F5;
  border-top-color: #D4D1CA;
  border-left-color: #D4D1CA;
}
[data-app-theme="light"] .hood-set-header { border-bottom-color: #D4D1CA; }
[data-app-theme="light"] .hood-set-title { color: #28251D; }
[data-app-theme="light"] .hood-set-section + .hood-set-section { border-top-color: #D4D1CA; }
[data-app-theme="light"] .hood-set-footer { border-top-color: #D4D1CA; }
[data-app-theme="light"] .hood-set-reset { color: #7A7974; }
[data-app-theme="light"] .hood-set-reset:hover { color: #28251D; }
[data-app-theme="light"] .hood-set-done { background: #1976D2; }
[data-app-theme="light"] .hood-set-done:hover { background: #0D47A1; }
[data-app-theme="light"] .hood-set-refresh {
  border-color: rgba(25,118,210,0.35);
  background: rgba(25,118,210,0.10);
  color: #1976D2;
}
[data-app-theme="light"] .hood-set-refresh:hover {
  border-color: rgba(25,118,210,0.55);
  background: rgba(25,118,210,0.18);
}
[data-app-theme="light"] .hood-settings .hood-close-btn {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05);
}
[data-app-theme="light"] .hood-settings .hood-close-btn svg { stroke: #28251D; }
[data-app-theme="light"] .hood-settings .hood-close-btn:hover { background: rgba(0,0,0,0.09); }

/* Footer */
.hood-set-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.hood-set-reset {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #8A8A8A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 4px;
  font-family: inherit;
  transition: color 0.12s;
}
.hood-set-reset:hover { color: #E5E5E5; }
.hood-set-done {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #2196F3;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.hood-set-done:hover { background: #42A5F5; }

/* Refresh-data button in the settings header (v40.5dp — was the toolbar reload). */
.hood-set-refresh {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(33,150,243,0.35);
  background: rgba(33,150,243,0.12);
  color: #42A5F5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.hood-set-refresh:hover { background: rgba(33,150,243,0.2); border-color: rgba(33,150,243,0.55); }
.hood-set-refresh:disabled { opacity: 0.6; cursor: not-allowed; }
.hood-set-refresh.is-loading svg { animation: hood-spin 0.8s linear infinite; }
.hood-set-refresh.is-pulse { animation: hood-pulse 1.5s ease-in-out infinite; }

/* Locate FAB — floats bottom-right of the map (v40.5dp — was the You/locate chip). */
.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: #FFFFFF;
  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;
}
.hood-locate-fab:hover { background: #2196F3; box-shadow: 0 4px 16px rgba(33,150,243,0.5); }
@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); }
}

/* v40.12: Refresh chip is now injected into the floating topnav pill
   (#gl-floating-pill) so it sits inline with Chat / Views / share kebab —
   the same location Sales Rabbit uses. Idle state shows a curved refresh
   arrow; while refreshing, we swap in a cloud-sync up/down icon whose
   arrows animate. Inherits .gfp-kebab base styles for size/hit target. */
.hood-pill-refresh {
  position: relative;
  overflow: hidden;
  /* v40.12c: explicit box so the two absolute-inset inner spans render.
     Inherited .gfp-kebab was collapsing to 0×0 without this. */
  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. */
.hood-pill-refresh.hood-pill-refresh--mobile {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 0;
  margin-right: 4px;
  color: currentColor;
}
.hood-pill-refresh .hood-pill-refresh-idle,
.hood-pill-refresh .hood-pill-refresh-sync {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.hood-pill-refresh .hood-pill-refresh-sync {
  opacity: 0;
  transform: scale(0.85);
}
.hood-pill-refresh.is-refreshing .hood-pill-refresh-idle {
  opacity: 0;
  transform: scale(0.85);
}
.hood-pill-refresh.is-refreshing .hood-pill-refresh-sync {
  opacity: 1;
  transform: scale(1);
}
/* Idle state: quick 360 spin on click / at start of refresh. */
.hood-pill-refresh.is-refreshing .hood-pill-refresh-idle svg {
  animation: hood-pill-refresh-spin 0.6s linear;
}
@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. */
.hood-pill-refresh .hpr-up,
.hood-pill-refresh .hpr-up-h {
  transform-origin: 8px 12px;
  animation: hpr-cloud-up 1.2s ease-in-out infinite;
}
.hood-pill-refresh .hpr-dn,
.hood-pill-refresh .hpr-dn-h {
  transform-origin: 16px 12px;
  animation: hpr-cloud-dn 1.2s ease-in-out infinite;
  animation-delay: 0.6s;
}
@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. */
.hood-pill-refresh:not(.is-refreshing) .hpr-up,
.hood-pill-refresh:not(.is-refreshing) .hpr-up-h,
.hood-pill-refresh:not(.is-refreshing) .hpr-dn,
.hood-pill-refresh:not(.is-refreshing) .hpr-dn-h {
  animation: none;
}
.hood-pill-refresh.is-cooldown { opacity: 0.4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .hood-pill-refresh .hood-pill-refresh-idle,
  .hood-pill-refresh .hood-pill-refresh-sync,
  .hood-pill-refresh .hpr-up,
  .hood-pill-refresh .hpr-up-h,
  .hood-pill-refresh .hpr-dn,
  .hood-pill-refresh .hpr-dn-h,
  .hood-pill-refresh.is-refreshing .hood-pill-refresh-idle svg {
    animation: none !important;
    transition: none !important;
  }
}

/* v40.5ej: live "you are here" GPS dot. A zero-size OverlayView anchor whose
   children center on the projected lat/lng; solid blue core + pulsing halo. */
.hood-loc-dot { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 10000; }
.hood-loc-core {
  position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #2196F3; border: 2px solid #FFFFFF; box-sizing: border-box;
  box-shadow: 0 0 4px rgba(0,0,0,0.45);
}
.hood-loc-pulse {
  position: absolute; left: -10px; top: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(33,150,243,0.35);
  animation: hood-loc-pulse 2s ease-out infinite;
}
@keyframes hood-loc-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* Directional heading cone (v40.5ek). SVG center (apex) sits on the dot anchor
   so rotate() pivots around the dot. No z-index: DOM order keeps it above the
   pulse ring and below the solid core. Hidden until a fresh heading arrives. */
.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;
}

/* Compass enable banner (v40.5el). Bottom-center dark card with a blue Enable
   button; the Enable tap is the iOS user gesture that unlocks the heading cone. */
.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 rgba(33, 150, 243, 0.35);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.hood-compass-banner-text { font-size: 13px; color: #FFFFFF; line-height: 1.3; }
.hood-compass-banner-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hood-compass-banner-skip {
  background: transparent; color: rgba(255, 255, 255, 0.7);
  border: none; font-size: 13px; padding: 8px 6px; cursor: pointer;
}
.hood-compass-banner-enable {
  background: #2196F3; color: #FFFFFF; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.hood-compass-banner-enable:hover { background: #1E88E5; }

/* ── Customer sheet additions (FIX 4) ── */
.hood-sheet-acct { font-size: 12px; color: #6B6B6B; margin-top: 3px; }
.hood-sheet-ltv { font-size: 12px; font-weight: 600; color: #2196F3; }
.hood-sheet-muted { color: #5A5A5A; }

/* 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-cname {
  font-size: 20px;
  font-weight: 600;
  color: #F0F0F0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hood-sheet-caddr {
  font-size: 13px;
  color: #9A9A9A;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.hood-sheet-cacct {
  font-size: 12px;
  color: #6B6B6B;
}
.hood-sheet-cstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hood-sheet-cstatus .hood-sheet-ltv { font-size: 13px; }
.hood-sheet-pastdue-val { color: #EF4444; font-weight: 700; }

/* Status badge variants */
.hood-customer-pastdue { background: rgba(239,68,68,0.15); color: #EF4444; }
.hood-customer-cancelled { background: rgba(255,255,255,0.06); color: #8A8A8A; }
.hood-customer-neutral { background: rgba(255,255,255,0.06); color: #B8B8B8; }

/* Contact action buttons */
.hood-sheet-contact-actions { margin-bottom: 8px; }
.hood-action-btn--call,
.hood-action-btn--text {
  border-color: rgba(33,150,243,0.4);
  color: #2196F3;
  background: rgba(33,150,243,0.10);
  text-decoration: none;
}
.hood-action-btn--call:hover,
.hood-action-btn--text:hover {
  background: rgba(33,150,243,0.20);
  border-color: #2196F3;
  color: #2196F3;
}
.hood-action-btn--fr { text-decoration: none; }

/* Map parcel labels (APN/owner at high zoom over satellite) */
.hood-parcel-label {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8);
}

/* ── End v40.5dg ── */

/* ══════════════════════════════════════════════════════════════════════════
   HOOD v40.5dh — floating empty-state message + reload "0" badge state
   Brand blue #2196F3 only; existing surfaces. No new color tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Floating empty-state notice, anchored under the toolbar (top set inline). */
.hood-msg {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  /* v40.9c: raise above the mobile top nav (z:120) so the Chat/Views chip
     strip does not overlap this notice and produce a stacked-box artifact. */
  z-index: 140;
  max-width: calc(100vw - 32px);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(31,33,33,0.95);
  border: 1px solid #2A2A2A;
  color: #E5E5E5;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hood-msg.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── End v40.5dh ── */

/* ── v40.5dj: Termites hologram section (nested in parcel Analytics drawer) ── */

.hood-termites,
.hood-diagram {
  /* overrides the base .hood-sheet-section look: a distinct hologram card */
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(33, 150, 243, 0.4);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 16px;
  box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.4),
              inset 0 0 18px rgba(33, 150, 243, 0.12);
}

.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-title,
.hood-diagram-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
.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-badge--loading { background: rgba(138, 138, 138, 0.15); border-color: rgba(138, 138, 138, 0.4); color: #8A8A8A; }
.hood-termites-badge--none    { background: transparent;               border-color: #2196F3; color: #2196F3; }
.hood-termites-badge--active  { background: rgba(33, 150, 243, 0.25);  border-color: rgba(33, 150, 243, 0.5); color: #2196F3; }

.hood-termites-chevron,
.hood-diagram-chevron {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #8A8A8A;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.hood-termites.is-open .hood-termites-chevron,
.hood-diagram.is-open .hood-diagram-chevron { transform: rotate(90deg); }

.hood-termites-body,
.hood-diagram-body {
  padding: 12px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.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-caption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin: 8px 0 4px;
}

.hood-termites-records {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.hood-termites-records::-webkit-scrollbar { height: 0; }
.hood-termite-rec {
  flex: 0 0 auto;
  min-width: 108px;
  background: rgba(10, 15, 20, 0.55);
  border: 1px solid rgba(33, 150, 243, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  padding: 8px 10px;
}
.hood-termite-rec-species { font-size: 13px; font-weight: 700; color: #D0D0D0; }
.hood-termite-rec-meta    { font-size: 11px; color: #8A8A8A; margin-top: 2px; }
.hood-termite-rec-date    { font-size: 11px; color: #6A6A6A; margin-top: 2px; }

.hood-termites-report-btn {
  margin-top: 12px;
  width: 100%;
  background: #2196F3;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hood-termites-report-btn:hover { background: #1E88E5; }
.hood-termites-report-btn:active { background: #1976D2; }

/* ── End v40.5dj ── */

/* ── v40.5dk: hologram design polish (title, HUD, reset, loading) ── */

/* v40.5ei FIX A: hologram header - a tight chip row (APN/SQFT/STORY/BUILT) on
   the left with the sketch (home) + close (X) icon group inline top-right. The
   header aligns to flex-start so the icons stay pinned to the first row while
   the chips wrap beneath them on narrow (~340px) screens. */
.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: #2196F3;
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
/* v40.5el: the home (sketch) + close icons now read as ONE floating control
   group - a single pill wrapper with a hairline divider between them, instead
   of two lost circles. */
.hood-holo-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px;
  background: rgba(33, 150, 243, 0.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: #2196F3;
  cursor: pointer;
}
.hood-holo-icon:hover {
  background: rgba(33, 150, 243, 0.15);
}
.hood-holo-icon svg { width: 18px; height: 18px; }
.hood-holo-icon-sep {
  width: 1px;
  height: 16px;
  background: rgba(33, 150, 243, 0.15);
  flex: 0 0 auto;
}
/* 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. */
.hood-holo-chip-num { letter-spacing: normal; font-variant-numeric: tabular-nums; }
/* Hide the reset (refresh) button and walkthrough chevron hint while the
   hologram is loading, so neither leaks over the LOADING overlay. */
.hood-termites-canvas-wrap.is-loading .hood-termites-reset,
.hood-termites-canvas-wrap.is-loading .hood-holo-rzone-hint { display: none; }
/* Very narrow phones (~320px): shrink chips to keep the APN chip + icon group
   on one row; the icon hit area stays 28px. */
@media (max-width: 360px) {
  .hood-holo-chip { font-size: 10px; padding: 3px 8px; letter-spacing: 0.3px; }
}

/* v40.5ei FIX A: the corner HUD telemetry is redundant with the new top chip
   row in the inline card, so hide it there; it still renders in fullscreen
   (where the canvas wrap is reparented out of .hood-diagram-body). */
.hood-diagram-body .holo-hud { display: none; }

/* v40.5dt — "Walkthrough" trigger, centred below the hologram. Replaces the old
   in-title "Diagram" chip (which overlapped the PARCEL HOLOGRAM title). "Diagram"
   is now the section label; this pill launches the silent guided walkthrough. */
.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-modal.is-visible { display: flex; }
.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-sketch-close { position: absolute; top: 8px; right: 8px; }

/* v40.5dq FIX 4 — unified close button (applied to every modal/drawer X) */
.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: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.12s;
}
.hood-close-btn:hover { background: rgba(255, 255, 255, 0.18); }
.hood-close-btn:active { background: rgba(255, 255, 255, 0.22); transform: scale(0.96); }
.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-title {
  padding: 0 40px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2196F3;
  text-align: center;
  word-break: break-all;
}
.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: #fff;
  border-radius: 8px;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
  touch-action: none;
  cursor: zoom-in;
  will-change: transform;
}
.hood-sketch-img.is-zoomed { cursor: grab; }
.hood-sketch-loading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hood-sketch-caption {
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* v40.5dq FIX 3 — sketch zoom/pan stage, analyze card, fullscreen viewer */
.hood-sketch-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
.hood-sketch-zoom-reset {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(33, 150, 243, 0.7);
  background: rgba(0, 0, 0, 0.55);
  color: #2196F3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
}
/* Analyze button — wider pill than a standard 24px chip */
.hood-sketch-analyze-btn {
  align-self: center;
  margin-top: 12px;
  height: 30px;
  padding: 0 18px;
  font-size: 12px;
}
/* Linear-ft result card */
.hood-sketch-analysis {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(33, 150, 243, 0.06);
  border: 1px solid rgba(33, 150, 243, 0.25);
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hood-lf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hood-lf-row:last-child { border-bottom: none; }
.hood-lf-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hood-lf-val {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.hood-lf-pt .hood-lf-val { color: #2196F3; }
.hood-lf-note {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
.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);
}
.hood-lf-err {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 120, 120, 0.9);
}
/* 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-fullscreen.is-visible { display: flex; }
.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: #fff;
  border-radius: 12px;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
  touch-action: none;
  cursor: zoom-in;
  will-change: transform;
}
.hood-sketch-fs-img.is-zoomed { cursor: grab; }
.hood-sketch-fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.hood-sketch-fs-reset {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(33, 150, 243, 0.7);
  background: rgba(0, 0, 0, 0.55);
  color: #2196F3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  cursor: pointer;
}

/* 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: #2196F3;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.5);
  line-height: 1.3;
}
.holo-hud-tl { top: 8px;  left: 10px;  align-items: flex-start; }
.holo-hud-tr { top: 8px;  right: 44px; align-items: flex-end; text-align: right; }
.holo-hud-bl { bottom: 8px; left: 10px;  align-items: flex-start; }
.holo-hud-br { bottom: 8px; right: 10px; align-items: flex-end; text-align: right; }

/* Reset-view button, top-right of the canvas. */
.hood-termites-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(33, 150, 243, 0.7);
  background: rgba(0, 0, 0, 0.4);
  color: #2196F3;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  z-index: 4;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}
.hood-termites-reset::before { content: '\21BB'; }
.hood-termites-reset:hover { background: rgba(33, 150, 243, 0.25); }

/* v40.5du FIX 2 — walkthrough chrome (2px progress bar + chevrons + close X) */
.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: rgba(255, 255, 255, 0.12);
  z-index: 5;
  pointer-events: none;
}
.holo-walk-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #2196F3;
  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: rgba(255, 255, 255, 0.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-prev { left: 8px; }
.holo-walk-nav-next { right: 8px; }
.holo-walk-nav:hover { background: rgba(33, 150, 243, 0.25); }

/* v40.5dy FIX 9 — per-step caption centered above the progress bar. */
.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 rgba(255, 255, 255, 0.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;
}

/* Loading state (v40.5dy FIX 7): animated cyan cube + label; fades out over
   400ms once the real geometry has rendered (opacity, not display, so the
   hologram fades in underneath it — no default-box flash). */
.hood-termites-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  perspective: 220px;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.hood-termites-loading.is-hidden { opacity: 0; pointer-events: none; }
.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: #2196F3;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}

/* v40.5dy FIX 7 — hologram canvas fades in over 400ms once rendered. */
.hood-termites-canvas { opacity: 0; transition: opacity 0.4s ease; }
.hood-termites-canvas.is-ready { opacity: 1; }

/* v40.5dy FIX 3 — fullscreen immersive hologram overlay. The diagram's
   canvas-wrap is moved in here on tap and restored on close, so the WebGL
   context and walkthrough chrome carry over intact. */
.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 .hood-termites-canvas-wrap {
  width: 100vw;
  height: 100svh;
  max-width: none;
  margin: 0;
}
.hood-holo-fs .hood-termites-canvas {
  width: 100vw;
  height: 100svh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
}
/* v40.5ea FIX F: pure 3D model view, so hide the inline reset control. */
.hood-holo-fs .hood-termites-reset { display: none; }
.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: #fff;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.hood-holo-fs-close:hover { opacity: 1; }

/* v40.5ed FIX A: decorative hint for the right-edge "tap for walkthrough" zone.
   Purely visual: pointer-events are off, the actual tap zone is the whole right
   30% of the canvas (routed in hood.js _wireHoloTap). Hidden while fullscreen
   (model-only view) and hidden by JS during the walkthrough (it would sit under
   the next chevron). Blue #2196F3 at low opacity, right-center of the canvas. */
.hood-holo-rzone-hint {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2196F3;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}
.hood-holo-fs .hood-holo-rzone-hint { display: none; }

/* ── End v40.5dk ── */

/* ═══════════════════════════════════════════════════════════════════
   v40.22 — Hood: desktop address search pill + hood/setting-chip fade fixes
   ══════════════════════════════════════════════════════════════════ */

/* ── Address search pill: hidden by default, shown on desktop only ────────── */
.hood-addr-search {
  display: none;
}
@media (min-width: 900px) {
  .hood-page .hood-map-wrap .hood-addr-search {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    width: 320px;
    max-width: calc(100% - 24px);
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(33, 150, 243, 0.28);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .hood-page .hood-map-wrap .hood-addr-search:focus-within {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.28), 0 6px 20px rgba(0, 0, 0, 0.28);
  }
  .hood-addr-search-icon {
    flex-shrink: 0;
    color: #2196F3;
  }
  .hood-addr-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #16181A;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
  }
  .hood-addr-search-input::placeholder {
    color: rgba(22, 24, 26, 0.45);
    font-weight: 400;
  }
  .hood-addr-search-input.is-searching {
    opacity: 0.6;
  }
  .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: rgba(33, 150, 243, 0.12);
    color: #2196F3;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease;
  }
  .hood-addr-search-clear:hover {
    background: rgba(33, 150, 243, 0.22);
  }
}

/* ── 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. */
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;
  opacity: 1 !important;
  filter: none !important;
}

/* ── Fade fix: settings gear/kebab chip (mobile topnav) ────────────────────
   v40.5eo FIX 4 deliberately dropped the gear icon to rgba(255,255,255,0.55)
   to "soften" it -- Branson reads that as a fade/washed-out chip. Restore the
   icon to full-strength white so the settings/kebab chip matches the other
   mobile-topnav chips at full opacity. Background/border/blur are untouched. */
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip,
html:not(#__never__) body:not(#__never__) nav.mobile-topnav.mobile-topnav--v1940 .mt-kebab-chip svg {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ── 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. */
.settings-view .sub-tier-chip,
.settings-view .sub-tier-chip--enterprise,
.settings-view--v1929 .sub-tier-chip {
  opacity: 1 !important;
  filter: none !important;
}

/* ── End v40.22 ── */

/* ──────────────────────────────────────────────────────────────────────────
   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;
}
html body .ai-messages .cs-phase-row .cs-thinking-dots,
html body .ai-thinking .cs-phase-row .cs-thinking-dots,
html body .cs-phase-row .cs-thinking-dots {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
html body .ai-messages .cs-phase-row .cs-thinking-dots .cs-dot,
html body .ai-thinking .cs-phase-row .cs-thinking-dots .cs-dot,
html body .cs-phase-row .cs-thinking-dots .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2196F3 !important;
  opacity: 0.4;
  animation: cs-phase-pulse 1.2s ease-in-out infinite;
}
html body .cs-phase-row .cs-thinking-dots .cs-dot:nth-child(2) { animation-delay: 0.2s; }
html body .cs-phase-row .cs-thinking-dots .cs-dot:nth-child(3) { animation-delay: 0.4s; }
/* The blue dots are now the single indicator, so drop the label's leading
   spinner ring (18623) and its reserved padding (18619). */
html body .ai-thinking .cs-phase-row .cs-phase-label,
html body .ai-messages .cs-phase-row .cs-phase-label,
html body .cs-phase-row .cs-phase-label {
  padding-left: 0 !important;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.82rem;
}
html body .cs-phase-row .cs-phase-label::before {
  display: none !important;
}
@keyframes cs-phase-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
/* ── End v40.5em FIX F ── */

/* ============================================================================
   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.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. */
html body .claude-thinking .cl-timeline {
  margin: 2px 0 6px 0;
}
html body .claude-thinking .cl-timeline-head {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #B8B8B8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: background 150ms ease, color 150ms ease;
}
html body .claude-thinking .cl-timeline-head:hover {
  background: rgba(255,255,255,0.04);
  color: #E5E5E5;
}
html body .claude-thinking .cl-timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #2196F3;
}
html body .claude-thinking .cl-timeline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8A8A8A;
}
html body .claude-thinking .cl-timeline-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: #2196F3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .claude-thinking .cl-timeline.is-done .cl-timeline-summary {
  color: #8A8A8A;
  font-weight: 500;
}
html body .claude-thinking .cl-timeline-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #8A8A8A;
  transform: rotate(0deg);
  transition: transform 150ms ease;
}
html body .claude-thinking .cl-timeline.is-expanded .cl-timeline-chev {
  transform: rotate(90deg);
}
/* Body: hidden when collapsed, a left-railed thread when expanded. */
html body .claude-thinking .cl-timeline-body {
  display: none;
  margin: 4px 0 0 13px;
  padding: 2px 0 2px 15px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
html body .claude-thinking .cl-timeline.is-expanded .cl-timeline-body {
  display: block;
}

/* ---- Sources chip (executed SQL provenance, rendered by chat_render.js) --- */
html body .chat-sources {
  margin: 8px 0 2px 0;
  font-size: 12px;
}
html body .chat-sources-toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(33,150,243,0.08);
  border: 1px solid rgba(33,150,243,0.20);
  color: #2196F3;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 150ms ease, border-color 150ms ease;
}
html body .chat-sources-toggle:hover {
  background: rgba(33,150,243,0.14);
  border-color: rgba(33,150,243,0.32);
}
html body .chat-sources-chev {
  display: inline-flex;
  transform: rotate(0deg);
  transition: transform 150ms ease;
}
html body .chat-sources.is-open .chat-sources-chev {
  transform: rotate(90deg);
}
html body .chat-sources-panel {
  display: none;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #14161B;
}
html body .chat-sources.is-open .chat-sources-panel {
  display: block;
}
html body .chat-sources-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #8A8F9C;
  font-size: 11px;
}
html body .chat-sources-meta b {
  color: #B8B8B8;
  font-weight: 600;
}
html body .chat-sources-sql {
  margin: 0;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

/* ---- Empty state suggested chips (injected by chat_ui.js) ---------------- */
html body .chat-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
}
html body .chat-suggest-chip {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(33,150,243,0.06);
  border: 1px solid rgba(33,150,243,0.20);
  color: #E3E1DD;
  font-size: 13px;
  line-height: 1.3;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
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) ----------------- */
html body .chat-jump-latest {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  background: #1F2121;
  border: 1px solid rgba(33,150,243,0.35);
  color: #2196F3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}
html body .chat-jump-latest.is-visible {
  display: inline-flex;
}
html body .chat-jump-latest:hover {
  background: #252727;
  transform: translateY(-1px);
}

/* ---- 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-timeline-head:focus-visible,
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-spinner,
  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;
  }
  html body .claude-thinking .cl-timeline-head,
  html body .claude-thinking .cl-timeline-chev,
  html body .chat-sources-toggle,
  html body .chat-sources-chev,
  html body .chat-suggest-chip,
  html body .chat-jump-latest {
    transition: none;
  }
}
/* End v40.5eq Notion Me2 chat pane. */

/* =========================================================================
 * 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;
}
/* Active label: re-apply the shimmer here at higher specificity + !important
   so it wins over both my own "done" override and the .cl-block.is-active
   .cl-head { color: #2196F3 } blue tint from the pre-v40.12h ruleset. */
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;
}
html body .claude-thinking .cl-block.cl-thinking .cl-body .cl-prose-text:not(:empty) ~ *,
html body .claude-thinking .cl-block.cl-thinking.is-active .cl-chev {
  /* placeholder — chev visibility handled by :has() below */
}
/* 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. */
html body .claude-thinking .cl-timeline,
html body .claude-thinking .cl-timeline-head,
html body .claude-thinking .cl-timeline-body,
html body .claude-thinking .cl-timeline-icon,
html body .claude-thinking .cl-timeline-chev,
html body .claude-thinking .cl-timeline-summary {
  all: unset;
  display: block;
}
html body .claude-thinking .cl-timeline-icon,
html body .claude-thinking .cl-timeline-chev {
  display: none;
}

/* 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;
}

/* End v40.12h — Claude-native reasoning line. */

/* ============================================================================
   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-symbol,
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;
}
html body .claude-thinking .cl-spinner {
  border-color: rgba(205, 204, 202, 0.25);
  border-top-color: rgba(205, 204, 202, 0.85);
}
/* 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);
}
/* End v40.13 neutralize. */

/* v40.13-2230 block removed; superseded by the v40.13-2300 nx-thinking block
   at the bottom of this file. The msg-bubble neutralization moved there too,
   and the legacy .ai-thinking shell is now hidden by app.js, so its old
   blue/italic label styling and the nx-thinking-shimmer keyframe are gone. */

/* 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; }
}

/* v40.13-2300 nx-thinking
   One canonical thinking component: chevron + shimmer "Thinking" label + a
   slide-in phase verb, an expandable step dropdown, and source chips below.
   No blue, no italic, no border box, no bounce. Palette via scoped vars for
   both themes (values from NX_THINKING_SPEC.md). */

/* 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: rgba(255, 255, 255, 0.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.nx-verb-enter { opacity: 0; transform: translateX(8px); }
.nx-thinking-verb.nx-verb-exit  { opacity: 0; transform: translateX(-4px); }

/* v40.13-2345: elapsed sits BELOW the source chips (in its own block).
   No margin-left auto — the head no longer contains it. */
.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-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--nx-thinking-faint);
}
.nx-source-chip:hover .nx-source-icon { 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; }
}
/* End v40.13-2300 nx-thinking */


/* v40.13-2315 nx-thinking hardening: kill any legacy thinking chrome that
   renders as a sibling of the nx-thinking component. .ai-thinking and
   .claude-thinking / .cl-block.cl-thinking are the two culprits that keep
   coming back due to CSS specificity fights elsewhere in the sheet. When
   nx-thinking is present in the message bubble, we hide them absolutely. */
.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;
}

/* v40.13-2315 nx-source-chip button variant. When no url is present the chip
   is a <button> not an <a>. Reset browser button defaults so it matches the
   anchor variant exactly, and add tap affordance. */
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);
}
/* End v40.13-2315 */

/* v40.13-2325 nx-source-chip sizing + done-mode collapse
   Streaming: ellipsize long entity names so 3+ chips fit on one mobile row
   Done:      collapse chips to small circular icon-only "avatars" (like the
              ChatGPT sources row that sits under the answer). Chips remain
              clickable; a tooltip carries the entity name. */
.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; }
}

/* v40.13-2350: circular icon-only chips + tappable details drawer.
   The wrapper .nx-source holds one chip and (optionally) a details panel.
   Chips are perfect 26x26 circles — the earlier oval look came from the
   base rule's padding/gap winning at the ends. Belt-and-suspenders !important
   here because the sheet has multiple .nx-source-chip declarations. */
.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-icon {
  width: 13px !important;
  height: 13px !important;
  color: var(--nx-thinking-muted);
}
.nx-source-chip:hover,
.nx-source-chip:focus-visible {
  border-color: var(--nx-thinking-dot-active);
}
.nx-source-chip:hover .nx-source-icon {
  color: var(--nx-thinking-dot-active);
}
.nx-source--open .nx-source-chip {
  border-color: var(--nx-thinking-dot-active);
}
.nx-source--open .nx-source-chip .nx-source-icon {
  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);
}
/* End v40.13-2350 */

/* ── 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 rgba(33, 150, 243, 0.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: #E3E1DD;
  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: rgba(33, 150, 243, 0.12);
  border-color: rgba(33, 150, 243, 0.36);
  transform: translateY(-1px);
}
/* End v40.13-2360 */

/* v40.13-2025: Route CRM drawer — phone copy button --------------------- */
/* 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 rgba(33, 150, 243, 0.28);
  background: rgba(33, 150, 243, 0.08);
  color: #2196F3;
  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: #ffffff;
}
.rt-crm-phone-copy svg {
  display: block;
  pointer-events: none;
}
/* End v40.13-2025 */

/* ── v40.13-notes: Route CRM Details / Notes tab strip + timeline ───────── */
.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: #2196F3;
}
.rt-crm-tab.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: #2196F3;
  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: rgba(255, 255, 255, 0.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-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(33, 150, 243, 0.12);
  color: #64B5F6;
  margin-bottom: 6px;
  line-height: 1.4;
}
.rt-crm-note-badge-cancellation,
.rt-crm-note-badge-cancel_reason {
  background: rgba(239, 83, 80, 0.14);
  color: #FF8A80;
}
.rt-crm-note-badge-lead_status {
  background: rgba(255, 167, 38, 0.16);
  color: #FFB74D;
}
.rt-crm-note-badge-office_note {
  background: rgba(129, 199, 132, 0.14);
  color: #A5D6A7;
}
.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: rgba(255, 255, 255, 0.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, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.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, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.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; }
}
/* End v40.13-notes */

/* ==========================================================================
   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: rgba(33, 150, 243, 0.14) !important;
  color: var(--totaly-blue-300, #64B5F6) !important;
  border: 1px solid rgba(33, 150, 243, 0.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, #2196F3) !important;
  border-color: var(--totaly-blue-500, #2196F3) !important;
  color: #FFFFFF !important;
}
.rsm-next-btn:hover { background: var(--totaly-blue-600, #1E88E5) !important; border-color: var(--totaly-blue-600, #1E88E5) !important; }

/* K-chip / knock pill */
.rsm-knock-num {
  background: rgba(33, 150, 243, 0.14) !important;
  color: var(--totaly-blue-300, #64B5F6) !important;
  border-color: rgba(33, 150, 243, 0.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, #64B5F6) !important; }

/* Door-type "Gave pitch" & pillbox is-set backgrounds — override old teal */
.rsm-doortype-pillbox.is-set { background: rgba(33, 150, 243, 0.05) !important; }
.rsm-doortype-pill-active--gave_pitch { background: rgba(33, 150, 243, 0.20) !important; color: var(--totaly-blue-300, #64B5F6) !important; }
.rsm-dt-pill--gave_pitch.is-selected {
  background: rgba(33, 150, 243, 0.22) !important;
  border-color: var(--totaly-blue-500, #2196F3) !important;
  box-shadow: 0 0 0 1px var(--totaly-blue-500, #2196F3) 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) */
.route-lock-btn.is-locked {
  background: rgba(33, 150, 243, 0.14) !important;
  border-color: var(--totaly-blue-500, #2196F3) !important;
  color: var(--totaly-blue-300, #64B5F6) !important;
}
.route-lock-btn.is-locked:hover {
  background: rgba(33, 150, 243, 0.22) !important;
  border-color: var(--totaly-blue-400, #42A5F5) !important;
}

/* Rep-mode active pill */
.route-hdr-row1 .route-repmode-opt.is-active {
  background: rgba(33, 150, 243, 0.18) !important;
  border-color: var(--totaly-blue-500, #2196F3) !important;
  color: var(--totaly-blue-300, #64B5F6) !important;
}

/* ── Mark as Won block ─────────────────────────────────────────────────── */
.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 rgba(33, 150, 243, 0.55);
  background: rgba(33, 150, 243, 0.14);
  color: var(--totaly-blue-300, #64B5F6);
  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, #42A5F5);
  color: #FFFFFF;
}
.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-btn.is-won {
  background: var(--totaly-blue-500, #2196F3);
  border-color: var(--totaly-blue-500, #2196F3);
  color: #FFFFFF;
}
.rt-crm-won-btn.is-won:hover {
  background: var(--totaly-blue-600, #1E88E5);
  border-color: var(--totaly-blue-600, #1E88E5);
}
.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, #2196F3);
  background: var(--totaly-blue-500, #2196F3);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rt-crm-won-confirm:hover { background: var(--totaly-blue-600, #1E88E5); border-color: var(--totaly-blue-600, #1E88E5); }
/* ── end v40.13-20260728 ───────────────────────────────────────────────── */

/* ==========================================================================
   v40.13-20260728b — Tries stepper (inline +/-) + kill pill-box outer border
   ========================================================================== */

/* 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-pillbox.is-set { background: transparent !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: #8A8A8A;
}

/* 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: rgba(33, 150, 243, 0.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, #64B5F6);
  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: #FFFFFF; }
.rsm-tries-btn:active,
.rsm-tries-btn.is-bumped { transform: scale(0.94); background: rgba(33, 150, 243, 0.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 rgba(33, 150, 243, 0.35) !important;
  border-right: 1px solid rgba(33, 150, 243, 0.35) !important;
  border-radius: 0 !important;
  background: rgba(33, 150, 243, 0.06) !important;
  color: var(--totaly-blue-300, #64B5F6) !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: rgba(33, 150, 243, 0.18) !important;
  color: #FFFFFF !important;
}
.rsm-tries-stepper .rsm-knock-num.is-bumped { transform: scale(0.96); }
/* ── end v40.13-20260728b ─────────────────────────────────────────────── */

/* ── v40.13-20260729-1130: collapsible Notes + Tries history ─────────── */

/* 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, #64B5F6);
  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 rgba(33, 150, 243, 0.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 rgba(33, 150, 243, 0.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, #64B5F6);
}
.rsm-tries-history-date {
  color: #7A7977;
}
/* ── end v40.13-20260729-1130 ─────────────────────────────────────────── */

/* ── 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. */
@media (min-width: 821px) {
  html body .ai-view .ai-hero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }
  html body .ai-view .ai-hero .ai-hero-stage {
    display: block !important;
    width: 420px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 128px !important;
  }
  html body .ai-view .ai-hero .ai-hero-card .ai-hero-logo,
  html body .ai-view .ai-hero .ai-hero-logo--img,
  html body .ai-view .ai-hero img#ai-hero-logo-img {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 300px !important;
    /* Undo the leaked mobile-pill filter (brightness(0) invert(1)) that was
       turning this image into a plain white square with no visible mark. */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.30)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.08)) !important;
    opacity: 1 !important;
  }
  html body .ai-view .ai-hero .ai-hero-logo--canvas {
    height: auto !important;
    max-height: none !important;
  }
}
/* 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. */
html body.route-ask:not(.ai-has-messages) .ai-view .composer-stop,
html body.route-ask:not(.ai-has-messages) .ai-view .composer-mic,
html body.route-ask:not(.ai-has-messages) .ai-view .composer-send {
  display: none !important;
}
/* ── end v40.15-20260729-1500 (Bug 1) ─────────────────────────────────── */

/* ── v40.15-20260729-1500: Bug 2 — chat history sidebar list styling ──────
   Restates the required history-item look at high cascade priority so it
   wins over an older leaked light-theme ruleset earlier in this file. */
#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: rgba(255, 255, 255, 0.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: #EAEBEC;
}
/* ── 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: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.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: #2196F3 !important;
}
#sidebar-collapse-btn svg { width: 16px !important; height: 16px !important; }
/* ── end v40.15-20260729-1500 (Bugs 2 & 3) ────────────────────────────── */

/* ── v40.15-20260729-1500: Bug 4 — note-type filter chips (customer drawer) */
.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: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 140ms ease; }
.rt-crm-notes-chip:hover { background: rgba(255,255,255,0.08); color: #EAEBEC; }
.rt-crm-notes-chip.is-active { background: rgba(33,150,243,.15); color: #2196F3; border-color: rgba(33,150,243,.35); }
/* ── end v40.15-20260729-1500 (Bug 4) ─────────────────────────────────── */

/* ── v40.15-20260729-1500: Bug 5 — unify palette in /route view ──────────
   Kills any native/default focus ring on the period filter button (was
   showing a browser-default orange/red outline since no focus-visible
   reset existed), and neutralizes leftover legacy teal accents on the
   route-stop number badges and map markers so the whole view reads with
   Totaly blue + neutral greys only. */
.route-period-btn { outline: none !important; }
.route-period-btn:focus,
.route-period-btn:focus-visible {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.route-period-btn[aria-expanded="true"]:focus,
.route-period-btn[aria-expanded="true"]:focus-visible {
  border-color: #2196F3 !important;
}
/* Route-stop number circles: neutral by default, Totaly blue only for the
   explicit selected/current/visited states (already set above). */
.route-stop-num { background: rgba(255, 255, 255, 0.06) !important; color: rgba(234, 235, 236, 0.6) !important; }
.route-stop.is-visited .route-stop-num,
.route-stop.is-current .route-stop-num,
.route-stop.is-selected .route-stop-num { color: #FFFFFF !important; }
.route-stop.is-visited .route-stop-num { background: #2196F3 !important; }
.route-stop.is-current .route-stop-num { background: #2196F3 !important; }
.route-stop.is-selected .route-stop-num { background: #2196F3 !important; }
.route-stop.is-current { border-color: #2196F3 !important; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35), 0 0 18px rgba(33, 150, 243, 0.28) !important; }
.route-stop.is-current::after { background: #2196F3 !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: #2196F3 !important; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35), 0 2px 6px rgba(0,0,0,0.5) !important; }
/* ── end v40.15-20260729-1500 (Bug 5) ─────────────────────────────────── */

/* ── v40.15-20260729-1500: Bug 6 — Notion-style collapse button (drawer) ── */
.rt-crm-collapse-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.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: #2196F3;
}
/* ── end v40.15-20260729-1500 (Bug 6) ─────────────────────────────────── */

/* v40.16-20260729-1625 — kill the big white Totaly logo hero card + background
   watermark on the /ask page. User: "no this big white border thing has to go
   get it out of here". The composer, sidebar, and KPI pills at bottom remain. */
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;
}

/* v40.17 — composer polish */
html body .rich-composer {
  background: #16181A !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: #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: #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;
}

/* v40.17 — fade above composer. v40.19: mask only on desktop where
   .ai-messages IS the scroll container. On mobile the page body scrolls
   and the container is static height, so the mask painted half the screen
   permanently faded (visible bug shown in the 4:42 AM screenshot). */
html body .ai-view .ai-messages {
  padding-bottom: 40px !important;
}
@media (min-width: 821px) {
  html body .ai-view .ai-messages {
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 32px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 32px), transparent 100%) !important;
  }
}

/* v40.17 — floating chat corner button restyle */
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; }

/* v40.17 — thinking panel visibility fix (mobile + desktop) */
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; }

/* v40.17 — floating-chat-composer parity. This codebase's floating "Ask"
   panel currently renders the legacy .glass-composer/.chat-textarea markup
   (not .rich-composer/.rc-*), so the Bug 2 rc-* rules above do not reach it.
   Apply the same modern look directly to the floating chat's own classes so
   the corner panel matches the main composer. */
html body .floating-chat-composer.glass-composer {
  background: #16181A !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: #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;
}

/* ============================================================
   v40.20 - Sidebar polish (chat-history button chrome, mobile
   Route nav pill Totaly-blue lock-in, chat-history list rows)
   ============================================================ */

/* v40.20 - reset chat-history button chrome so it matches the sibling <a> nav items */
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.route-chats aside.sidebar#sidebar button.sidebar-quick-item#sqi-history {
  background: rgba(33,150,243,0.14) !important;
  color: #2196F3 !important;
}

/* v40.20 - force Totaly blue on active sidebar nav item, all viewports */
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;
}

/* v40.20 - chat history list rows */
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;
}

/* ============================================================
   v40.20 - Route lead-type filter chips
   Same visual language as .rt-crm-notes-chip (compact pill row).
   ============================================================ */
.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: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
  font-family: inherit;
}
.rt-lead-type-chip:hover { background: rgba(255,255,255,0.08); color: #EAEBEC; }
.rt-lead-type-chip.is-active { background: rgba(33,150,243,.15); color: #2196F3; border-color: rgba(33,150,243,.35); }

/* v40.21-20260730-1155 — nuclear reset on Chat history nav item + section wrapper.
   User: "chat history outline still there". Something upstream (either the .sidebar-history
   section wrapper with border+background, or a stray focus/box-shadow/outline on the
   button element itself) is still painting a rounded pill around the "Chat history" row.
   Kill every possible source. */
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;
  -webkit-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. */
html body.route-chats aside.sidebar#sidebar button.sidebar-quick-item--history {
  background: rgba(33,150,243,0.14) !important;
  color: #2196F3 !important;
}
html body.route-chats aside.sidebar#sidebar button.sidebar-quick-item--history .sqi-label,
html body.route-chats aside.sidebar#sidebar button.sidebar-quick-item--history .sqi-icon {
  color: #2196F3 !important;
}

/* 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;
}

/* ── v40.23: Google Places Autocomplete dropdown styling ─────────────────────
   .pac-container is appended directly to document.body by the Google Maps
   JS SDK, outside our app's DOM tree, so it does not inherit the sidebar's
   fade mask or any app background. Force it above all app chrome (modals,
   the sidebar, map controls) and match it to Totaly's dark UI + blue accent. */
.pac-container {
  z-index: 100000 !important;
  background-color: #1A1A1A !important;
  border: 1px solid rgba(33, 150, 243, 0.35) !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif !important;
  overflow: hidden;
}
.pac-container:after { display: none !important; } /* remove "powered by Google" logo bar spacing artifact */
.pac-item {
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(230, 232, 235, 0.86) !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  cursor: pointer;
}
.pac-item:first-child { border-top: 0 !important; }
.pac-item:hover, .pac-item-selected, .pac-item-selected:hover {
  background-color: rgba(33, 150, 243, 0.14) !important;
}
.pac-item-query {
  color: rgba(245, 246, 247, 0.96) !important;
  font-weight: 500;
}
.pac-matched { color: #2196F3 !important; font-weight: 600; }
.pac-icon { display: none !important; } /* 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: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25) !important;
}

/* ── v40.23: sidebar footer settings gear (matches .footer-notif-btn) ──────── */
aside.sidebar .sidebar-footer .footer-settings-btn { appearance: none; -webkit-appearance: none; }

/* ── v40.23: defensive override -- chat history rows must render at full
   opacity, never faded, regardless of any other rule ordering above. ────── */
aside.sidebar .sidebar-scroll { -webkit-mask-image: none !important; mask-image: none !important; }

/* ── v40.25: chat dataset preview -- inline table + Download CSV button ───── */
.chat-dataset { margin: 12px 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.02); overflow: hidden; }
.chat-dataset-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); 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: #2196F3; color: #fff; border: none; font-size: 0.78rem; font-weight: 500; cursor: pointer; }
.chat-dataset-download:hover { background: #1e88e5; }
.chat-dataset-table-wrap { overflow-x: auto; }
.chat-dataset-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.chat-dataset-table th, .chat-dataset-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.chat-dataset-table th { color: rgba(255,255,255,0.55); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; background: rgba(255,255,255,0.03); }
.chat-dataset-table tbody tr:hover { background: rgba(33, 150, 243, 0.05); }
.chat-dataset-footer { padding: 8px 14px; font-size: 0.72rem; color: rgba(255,255,255,0.45); border-top: 1px solid rgba(255,255,255,0.04); }

/* ── 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,
.rt-start, .route-start, .timeline-start {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ── v40.26: Custom date range option in Route period menu ──────────────── */
.route-period-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.route-period-opt--custom { font-style: normal; }
.route-period-opt--custom.is-active { color: #2196F3; }


/* v40.27: Termite filter chips on the Route lead-type row */
.rt-lead-typebar-spacer {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.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;
}

/* v40.27: Sort mode chips (Chronological / Highest value) on the Route
   lead-type row -- Totaly blue accent, distinct from the amber termite
   chips above. */
.rt-sort-chip {
  border-color: rgba(33,150,243,0.28) !important;
}
.rt-sort-chip.is-active {
  background: rgba(33,150,243,0.14) !important;
  border-color: rgba(33,150,243,0.55) !important;
  color: #A8D0FF !important;
}