/* ═══════════════════════════════════════════════════════════════
   Sivarr — layout.css
   Login screen · Topbar · Sidebar · Mobile shell (nav/FAB/drawer)
   Split from styles.css (Path A restructure)
   Depends on: base.css (design tokens)
   ═══════════════════════════════════════════════════════════════ */

/* ── OFFLINE BANNER ────────────────────────────────────────── */
#offline-banner {
  /* default hidden — JS toggles style.display to 'flex' on the 'offline' event */
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 95;
  background: var(--amber3);
  color: #1a1000;
  padding: 7px 20px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}
#offline-banner i {
  font-size: 1rem;
  flex-shrink: 0;
}
body.offline .layout {
  padding-top: calc(var(--topbar-h) + 34px);
}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: rgba(var(--bg2-rgb, 255, 255, 255), 0.85);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 100;
}
[data-theme="dark"] .topbar {
  background: rgba(22, 22, 22, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: var(--sb-width);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.tb-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--ai-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--glow-teal);
}
.tb-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.tb-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.tb-name span {
  color: var(--teal);
}

@media (min-width: 721px) {
  .tb-brand {
    display: none;
  }
  .topbar {
    left: var(--sb-width);
  }
  body.sb-retracted .topbar {
    left: 0;
  }
  body.sb-retracted .tb-brand {
    display: flex;
  }
}
@media (min-width: 721px) {
  body.hide-topbar .layout {
    padding-top: 0;
  }
}

.tb-center {
  flex: 1;
  max-width: 520px;
}

.tb-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 0 14px;
  height: 36px;
  cursor: pointer;
  transition: var(--transition);
}
.tb-search:hover {
  border-color: var(--teal);
  background: var(--bg2);
  box-shadow: 0 0 0 3px var(--teal2);
}
[data-theme="dark"] .tb-search:hover {
  box-shadow: 0 0 0 3px rgba(15, 219, 173, 0.1);
}
.tb-search span {
  font-size: 14px;
  color: var(--text4);
  flex: 1;
}
.tb-search kbd {
  font-size: 11px;
  color: var(--text4);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: var(--font);
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.global-save-status {
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--text4);
  padding: 0 6px;
  transition:
    color 0.2s,
    opacity 0.2s;
  pointer-events: none;
}

.tb-btn,
.tb-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 18px;
  transition: var(--transition);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.tb-btn:hover,
.tb-icon-btn:hover {
  background: var(--bg3);
  color: var(--text1);
}

.pa {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ai-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font);
}
.tb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ai-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font);
}
.tb-ham {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 20px;
  border: none;
  background: transparent;
}
.tb-mobback {
  display: none;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}
.tb-mobback:hover,
.tb-mobback:active {
  background: var(--bg3);
  color: var(--text1);
}

/* ── OVERLAY (mobile) ──────────────────────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 89;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ── LAYOUT ────────────────────────────────────────────────── */
.layout {
  display: flex;
  padding-top: var(--topbar-h);
  height: 100vh;
  height: 100dvh;
}

@media (hover: none) and (pointer: coarse) and (min-width: 721px) {
  html,
  body {
    height: auto;
  }
  body.dashboard-active {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layout {
    height: auto;
  }
  .main {
    overflow: visible;
  }
  .panel.active:not(#panel-chat) {
    overflow: visible !important;
    height: auto !important;
  }
  .home-wrap,
  .content {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #panel-chat.active {
    height: calc(100dvh - var(--topbar-h)) !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  #panel-chat.active .chat-msgs {
    flex: 1 !important;
    overflow-y: auto !important;
    height: 0 !important;
    min-height: 0 !important;
  }
  #chat-welcome {
    min-height: 0 !important;
  }
  .sb-scroll {
    padding-top: 110px;
    padding-bottom: 48px;
  }
  .si {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 8px;
  }
  .sb-section-row {
    padding-top: 26px;
    padding-bottom: 8px;
  }
  .sb-nav-group {
    margin-bottom: 12px;
  }
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sb-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  z-index: 90;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.2s;
}
@media (min-width: 721px) {
  .sidebar {
    top: 0;
  }
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 12px 6px;
  flex-shrink: 0;
}
.sb-brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sb-brand {
    display: none;
  }
}

.sb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-top-search {
  flex: 1;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text4);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.sb-top-search:hover {
  background: var(--bg2);
  border-color: var(--teal);
  color: var(--text3);
}
.sb-top-search i {
  font-size: 0.92rem;
  flex-shrink: 0;
}
.sb-top-search span:not(.sb-top-kbd) {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-top-kbd {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--font);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text4);
}

.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}
.sb-scroll::-webkit-scrollbar {
  width: 2px;
}
.sb-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.sb-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text4);
  text-transform: uppercase;
  padding: 14px 6px 5px;
  white-space: nowrap;
}
.sb-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6px 5px;
}
.sb-nav-group {
  margin-bottom: 4px;
}

.si {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  margin-bottom: 1px;
}
.si:hover {
  background: var(--bg3);
}
.si.on {
  background: var(--teal2);
}

.si-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text3);
  transition:
    color 0.15s,
    background 0.15s;
}
.si:hover .si-icon {
  color: var(--text2);
}
.si.on .si-icon {
  color: var(--teal);
}
.si-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text3);
  transition: color 0.15s;
}
.si:hover .si-ic {
  color: var(--text2);
}
.si.on .si-ic {
  color: var(--teal);
}

.si-lb {
  font-size: 14px;
  color: var(--text2);
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.si.on .si-lb {
  color: var(--text1);
  font-weight: 600;
}

.si-new-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--teal), var(--accent2));
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.wl-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.si-bd {
  font-size: 11px;
  border-radius: 20px;
  padding: 1px 6px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.bd-teal {
  background: var(--teal2);
  color: var(--teal);
}
.bd-red {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.bd-gray {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
}
.bd-purple {
  background: var(--purple2);
  color: var(--accent2);
}

.si-ch {
  font-size: 13px;
  color: var(--text4);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.si-ch.op {
  transform: rotate(180deg);
}
.sub-nav {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s;
}
.sub-nav.open {
  max-height: 400px;
}
.ssi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.ssi:hover {
  background: var(--bg3);
}
.ssi.on {
  background: var(--teal2);
}
.ssd {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
}
.ssi.on .ssd {
  background: var(--teal);
}
.ss-lb {
  font-size: 13px;
  color: var(--text3);
  flex: 1;
}
.ssi.on .ss-lb {
  color: var(--text1);
  font-weight: 600;
}
.sdiv {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.sb-spaces-add {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text4);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.sb-spaces-add:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.sb-spaces-head {
  cursor: pointer;
  user-select: none;
}
.sb-spaces-caret {
  font-size: 0.8rem;
  color: var(--text4);
  transition: transform 0.18s;
}
#sgi-spaces.collapsed {
  display: none;
}
.sb-spaces-head.collapsed .sb-spaces-caret {
  transform: rotate(-90deg);
}

.sp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 1px;
}
.sp-row:hover {
  background: var(--bg3);
}
.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-lb {
  font-size: 14px;
  color: var(--text3);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.sp-row.active .sp-lb {
  color: var(--text1);
  font-weight: 600;
}

.sb-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-user-row:hover {
  background: var(--bg3);
}

.u-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.user-row:hover {
  background: var(--bg3);
}
.u-info {
  flex: 1;
  min-width: 0;
}
.u-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-role {
  font-size: 12px;
  color: var(--text3);
}

.sb-icon-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.sb-icon-action:hover {
  background: var(--bg3);
  color: var(--text1);
}

.sb-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sb-rail-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text3);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.sb-rail-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal2);
}

.si-stat {
  font-size: 11px;
  font-weight: 600;
  color: var(--text4);
  flex-shrink: 0;
  white-space: nowrap;
}
.si-stat:empty {
  display: none;
}
.si-stat-info {
  color: var(--teal);
}
.si-stat-success {
  color: var(--green3, #3fb950);
}
.si-stat-danger {
  color: var(--red3, #e2554f);
}

/* ── Collapsed sidebar (tablet) ─── */
.sidebar.collapsed {
  width: 52px;
}
.sidebar.collapsed .sb-top-search,
.sidebar.collapsed .sb-cust-btn,
.sidebar.collapsed .si-stat {
  display: none !important;
}
.sidebar.collapsed .sb-header {
  justify-content: center;
}
.sidebar.collapsed .sb-head-actions {
  width: auto;
  justify-content: center;
}
.sidebar.collapsed .si-lb,
.sidebar.collapsed .sb-section-label,
.sidebar.collapsed .sb-section-row .sb-section-label,
.sidebar.collapsed .sub-nav,
.sidebar.collapsed .si-ch,
.sidebar.collapsed .si-bd,
.sidebar.collapsed .sb-spaces,
.sidebar.collapsed .u-name,
.sidebar.collapsed .u-role,
.sidebar.collapsed .sb-icon-action span,
.sidebar.collapsed .sb-spaces-add,
.sidebar.collapsed .si-new-badge,
.sidebar.collapsed .si-dot {
  display: none !important;
}
.sidebar.collapsed .sb-header {
  padding: 10px 8px;
  justify-content: center;
}
.sidebar.collapsed .sb-scroll {
  padding: 8px 6px;
}
.sidebar.collapsed .si {
  padding: 8px;
  justify-content: center;
  border-radius: 8px;
}
.sidebar.collapsed .si-icon,
.sidebar.collapsed .si-ic {
  margin: 0;
}
.sidebar.collapsed .sb-user-row,
.sidebar.collapsed .user-row {
  padding: 6px;
  justify-content: center;
}
.sidebar.collapsed ~ .main {
  margin-left: 52px;
}

.sidebar.retracted {
  transform: translateX(calc(-1 * var(--sb-width)));
}
.sidebar.retracted ~ .main {
  margin-left: 0;
}

.sg {
  display: none;
}
.sg-items {
  overflow: hidden;
}
.sg-items.collapsed {
  display: none;
}
.sl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text4);
  text-transform: uppercase;
}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main {
  margin-left: var(--sb-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── LOGIN ─────────────────────────────────────────────────── */
/* Brand purple — matched to the Sivarr mark (deep violet-black ground,
   glowing magenta-violet highlight). Scoped to the login screen so it
   can't collide with anything else in the cascade. */
:root {
  --sv-purple-dark: #0d0221;
  --sv-purple-deep: #2e1065;
  --sv-purple-mid: #6d28d9;
  --sv-purple: #7c3aed;
  --sv-purple-bright: #a855f7;
  --sv-purple-glow: #c084fc;
  --sv-purple-tint: rgba(124, 58, 237, 0.1);
}
[data-theme="dark"] {
  --sv-purple-tint: rgba(168, 85, 247, 0.12);
}

#dashboard {
  display: none;
}

/* #login-screen defaults to fully OFF — not painted, not hit-tested.
   It only becomes active while body.auth-screen is present (set by
   _setAuthScreen() in app.js). This is the single source of truth for
   whether the login page can be seen or interacted with; there is no
   "on by default, turn it off" state for a race/duplicate-function bug
   to fall through anymore. Paired with the `inert` attribute (toggled
   in JS) so focus/keyboard/screen-reader access is cut too, not just
   pointer events. */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  pointer-events: none;
  background: var(--bg);
  overflow: hidden;
}

body.auth-screen #login-screen {
  display: flex;
  pointer-events: auto;
}

/* ── Hero / branding panel — locked to an even 50/50 split with the
   form panel on desktop ─────────────────────────────────────── */
.login-left {
  width: 50%;
  flex: 0 0 50%;
  background: linear-gradient(
    135deg,
    var(--sv-purple-dark) 0%,
    var(--sv-purple-deep) 45%,
    var(--sv-purple-mid) 75%,
    var(--sv-purple-bright) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}
/* Glow highlight echoing the icon's light source, top-right */
.login-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 85% 10%,
      rgba(192, 132, 252, 0.35) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(124, 58, 237, 0.25) 0%,
      transparent 50%
    );
  pointer-events: none;
}
.ll-content {
  position: relative;
  z-index: 2;
}
.ll-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 2.75rem;
}
.ll-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.ll-logo span {
  font-family: var(--font);
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.ll-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 14px;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}
.ll-headline {
  font-family: var(--font);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 2.5rem;
}
.ll-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ll-feat {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 11px 14px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.ll-feat:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(2px);
}
.ll-feat i {
  font-size: 1.05rem;
  color: #fff;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 9px;
}
.ll-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(192, 132, 252, 0.1);
  pointer-events: none;
}
.ll-orb1 {
  width: 500px;
  height: 500px;
  top: -180px;
  right: -200px;
}
.ll-orb2 {
  width: 300px;
  height: 300px;
  bottom: -110px;
  left: -90px;
  background: rgba(124, 58, 237, 0.12);
}

/* ── Form panel — same 50/50 share as the hero ────────────────── */
.login-right {
  width: 50%;
  flex: 0 0 50%;
  display: flex;
  /* Dead-centering in 100dvh leaves a big empty gap above the card on
     tall screens, so "Welcome back" reads as floating with nothing
     anchoring it. Top-align with generous padding instead — same visual
     weight as the left panel's content, which starts near the top too. */
  align-items: flex-start;
  justify-content: center;
  padding: 6rem 2rem 2.5rem;
  overflow-y: auto;
  background: var(--bg);
  background-image: radial-gradient(
    circle at 0% 0%,
    var(--sv-purple-tint) 0%,
    transparent 45%
  );
}
.login-card {
  width: 100%;
  max-width: 420px;
  animation: fadeUp 0.4s ease;
}
.login-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sv-purple);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
[data-theme="dark"] .login-card-kicker {
  color: var(--sv-purple-glow);
}

.lc-brand-mob {
  display: none;
  align-items: center;
  gap: 9px;
  margin-bottom: 2rem;
}
.lc-logo-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    var(--sv-purple) 0%,
    var(--sv-purple-bright) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lc-logo-sm img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.lc-brand-mob span {
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -0.03em;
}

.login-card h1 {
  font-family: var(--font);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.login-card > p {
  color: var(--text3);
  font-size: 1rem;
  margin-bottom: 1.85rem;
}

/* Segmented pill tabs — reads more like a modern toggle than plain
   underlined tabs, and gives the active state a clearer surface. */
.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 4px;
  margin-bottom: 1.85rem;
}
.auth-tab {
  flex: 1;
  padding: 9px 0;
  background: none;
  border: none;
  border-radius: calc(var(--radius2) - 4px);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}
.auth-tab:hover {
  color: var(--text1);
}
.auth-tab.active {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--sv-purple) 0%,
    var(--sv-purple-bright) 100%
  );
  box-shadow: var(--shadow);
}

.field {
  margin-bottom: 1.1rem;
}
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-ic {
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.field-ic:focus-within {
  border-color: var(--sv-purple);
  background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.field-ic > i.ti {
  font-size: 17px;
  color: var(--text4);
  padding: 0 0 0 14px;
  flex-shrink: 0;
}
.field-ic input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 14px;
  color: var(--text1);
  font-size: 0.95rem;
  outline: none;
  font-family: var(--font);
}
.field-ic input::placeholder {
  color: var(--text4);
}
.field-eye {
  background: none;
  border: none;
  padding: 0 14px;
  color: var(--text4);
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  flex-shrink: 0;
}
.field-eye:hover {
  color: var(--text2);
}

.field input:not([class]) {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  color: var(--text1);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}
.field input:not([class]):focus {
  border-color: var(--sv-purple);
}
.field input::placeholder {
  color: var(--text4);
}

.login-err {
  font-size: 0.84rem;
  color: var(--red);
  min-height: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.btn-login {
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--sv-purple) 0%,
    var(--sv-purple-bright) 100%
  );
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition:
    opacity 0.2s,
    transform 0.1s,
    box-shadow 0.2s;
}
.btn-login:hover {
  opacity: 0.94;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}
.btn-login:active {
  transform: scale(0.99);
}

.msg-error {
  border: 1px solid var(--coral) !important;
  color: var(--coral) !important;
  background: rgba(255, 80, 80, 0.06) !important;
}
.chat-retry-btn {
  display: inline-block;
  margin-top: 7px;
  background: none;
  border: 1px solid var(--coral);
  color: var(--coral);
  border-radius: 8px;
  padding: 3px 12px;
  font-size: 0.76rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.chat-retry-btn:hover {
  background: rgba(255, 80, 80, 0.12);
}

.auth-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sv-purple);
  font-size: 0.85rem;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  transition: opacity 0.15s;
}
[data-theme="dark"] .auth-back-btn {
  color: var(--sv-purple-glow);
}
.auth-back-btn:hover {
  opacity: 0.75;
}

.login-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text4);
  margin-top: 1.1rem;
  line-height: 1.5;
}
.login-note a {
  color: var(--sv-purple);
}
[data-theme="dark"] .login-note a {
  color: var(--sv-purple-glow);
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--text4);
  font-size: 0.8rem;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
.btn-google:hover {
  background: var(--bg2);
  box-shadow: var(--shadow);
}
.btn-google:active {
  transform: scale(0.99);
}

/* ── Responsive — form only below 768px ───────────────────────
   The split-screen hero doesn't fit a phone viewport, and rather than
   shrinking it into a strip it's dropped entirely: on mobile the login
   form is the whole screen, full width, with just the compact brand
   mark (.lc-brand-mob) standing in for the hero's context. */
@media (max-width: 768px) {
  #login-screen {
    flex-direction: column;
  }
  .login-left {
    display: none;
  }
  .login-right {
    width: 100%;
    flex: 1;
    padding: 2rem 1.25rem;
    align-items: flex-start;
    padding-top: max(2rem, calc(env(safe-area-inset-top) + 1.5rem));
  }
  .lc-brand-mob {
    display: flex;
  }
  .login-card h1 {
    font-size: 1.65rem;
  }
}
/* ── PROFILE DROPDOWN ──────────────────────────────────────── */
.profile-menu {
  position: relative;
}
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.profile-trigger .pa {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.profile-trigger .pn {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
}
.profile-trigger .pa-arrow {
  font-size: 10px;
  color: var(--text4);
}

.profile-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 42px;
  width: 220px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  z-index: 200;
  overflow: hidden;
}
.profile-dropdown.open {
  display: block;
  animation: fadeUp 0.15s ease;
}
.profile-trigger.open + .profile-dropdown {
  display: block;
}

.pd-header {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
}
.pd-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
}
.pd-matric {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

.pd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.pd-item:hover {
  background: var(--bg3);
}
.pd-item.danger {
  color: var(--red3);
}
.pd-item.danger:hover {
  background: var(--red2);
}
.pd-icon {
  font-size: 15px;
}

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

.pd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.pd-toggle:hover {
  background: var(--bg3);
}
.pd-toggle-left {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text2);
}

.toggle-sw {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  position: relative;
  transition: background 0.2s;
}
.toggle-sw::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toggle-sw.on {
  background: var(--teal);
}
.toggle-sw.on::after {
  left: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SHELL — Notion-style launcher + drill-down (≤720px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .mobile-nav,
  .mob-fab {
    display: none !important;
  }
  .main {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  .sidebar .sb-header {
    display: flex !important;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .sb-head-actions {
    gap: 4px;
  }
  #sb-rail-icon {
    display: none;
  }
  .sb-mob-close-icon {
    display: inline-block;
    font-size: 1.3rem;
  }

  .sidebar,
  .sidebar.retracted,
  .sidebar.collapsed {
    width: 70% !important;
    transform: translateX(0) !important;
    z-index: 95;
    border-right: none;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.55);
    bottom: auto !important;
    height: calc(100dvh - var(--topbar-h)) !important;
  }

  body:not(.mob-drilled) #overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 94 !important;
  }
  .sidebar.collapsed .si-lb {
    display: inline !important;
  }
  .sidebar.collapsed .si-stat {
    display: inline-flex !important;
  }
  .sidebar.collapsed .sb-top-search,
  .sidebar.collapsed .sb-cust-btn,
  .sidebar.collapsed .sb-section-label,
  .sidebar.collapsed .sb-spaces,
  .sidebar.collapsed .u-name,
  .sidebar.collapsed .u-role {
    display: revert !important;
  }
  body.mob-drilled .tb-ham {
    display: flex;
  }
  body.mob-drilled .sidebar,
  body.mob-drilled .sidebar.retracted,
  body.mob-drilled .sidebar.collapsed {
    transform: translateX(-100%) !important;
  }

  .sidebar .sb-header {
    padding: 12px 18px;
  }
  .sidebar .sb-scroll {
    padding: 6px 18px 32px;
  }

  .sidebar .si {
    padding: 10px 12px;
    border-radius: 11px;
    margin-bottom: 3px;
    gap: 12px;
  }
  .sidebar .si .si-lb {
    font-size: 0.9rem;
    font-weight: 500;
  }
  .sidebar .si .si-icon {
    font-size: 1.02rem;
  }
  .sidebar .si::after {
    content: "\203A";
    margin-left: auto;
    color: var(--text4);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 400;
  }

  .sidebar .sb-section-row {
    padding-top: 20px;
    padding-bottom: 5px;
  }
  .sidebar .sb-section-label {
    font-size: 11px;
    letter-spacing: 0.09em;
  }
  .sidebar .sb-nav-group {
    margin-bottom: 4px;
  }
  .sidebar .sb-user-row .u-info {
    cursor: pointer;
  }

  .sb-mob-cust-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text2);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
  }
  .sb-mob-cust-btn i {
    font-size: 0.85rem;
  }
  .sb-mob-cust-btn:active {
    opacity: 0.7;
  }
}

/* ── HAMBURGER SIDEBAR OVERLAY (mobile) ───────────────────────
   The hamburger opens the full nav menu (Home, Sivarr AI, Finance
   Tracker, Journal, Marketplace, Plans, Settings, etc.) as a slide-in
   overlay ON TOP of whatever panel you're currently viewing — from any
   screen, at any drill depth. It is a pure visual toggle driven by the
   `mobile-sidebar-open` body class (see toggleMobileSidebar() /
   openMobileSidebar() / closeMobileSidebar() in app.js) and never
   touches browser history, so it can't interact with or reintroduce
   the login/OAuth history-back bug.
   Deliberately declared AFTER the block above so it wins the cascade
   tie (same selector specificity + !important on both sides) whenever
   `mobile-sidebar-open` and `mob-drilled` are both present at once —
   i.e. you open the menu while already inside a panel. */
@media (max-width: 720px) {
  .tb-ham {
    display: flex !important;
  }
  body.mobile-sidebar-open .sidebar,
  body.mobile-sidebar-open.mob-drilled .sidebar {
    transform: translateX(0) !important;
    z-index: 300 !important;
    width: 80% !important;
    box-shadow: var(--shadow3);
  }
  body.mobile-sidebar-open #overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 299 !important;
  }
}

/* Legacy mobile slide-in drawer + overlay (old shell) — hidden, unused */
.mob-sidebar-overlay,
.mob-sidebar-panel {
  display: none !important;
}

/* Customize sidebar bottom-sheet (mobile) */
.mob-cust-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  align-items: flex-end;
}
.mob-cust-overlay.open {
  display: flex;
}
.mob-cust-sheet {
  width: 100%;
  max-height: 82vh;
  background: var(--bg2);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: mob-sheet-up 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mob-cust-sheet::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border2);
  margin: 10px auto 6px;
}
.mob-cust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.mob-cust-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text1);
  margin: 0;
}
.mob-cust-done {
  border: none;
  background: var(--teal);
  color: #fff;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.mob-cust-body {
  overflow-y: auto;
  padding: 10px 16px 20px;
  flex: 1;
}
.mob-cust-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text4);
  padding: 14px 2px 6px;
}
.mob-cust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.mob-cust-row:last-child {
  border-bottom: none;
}
.mob-cust-handle {
  color: var(--text4);
  font-size: 1.1rem;
  cursor: grab;
  touch-action: none;
}
.mob-cust-icon {
  font-size: 1rem;
  color: var(--text3);
  width: 22px;
  text-align: center;
}
.mob-cust-label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text1);
}
.mob-cust-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mob-cust-toggle::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mob-cust-toggle.on {
  background: var(--teal);
}
.mob-cust-toggle.on::after {
  left: 18px;
}
.mob-cust-toggle.locked {
  background: var(--bg3);
  cursor: not-allowed;
  opacity: 0.5;
}
.mob-cust-toggle.locked::after {
  left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV  — 3 tabs: Today · AI · Me
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.mobile-nav-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 60px;
}
.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 6px;
  flex: 1;
  min-height: 52px;
  color: var(--muted);
  transition: color 0.15s;
}
.mob-nav-btn.active {
  color: var(--teal);
}
.mob-nav-btn i {
  font-size: 1.2rem;
}
.mob-nav-btn span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mob-ai-btn {
  position: relative;
}
.mob-ai-orb {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--teal);
  margin-bottom: 2px;
  margin-top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(13, 122, 95, 0.5);
  transition:
    box-shadow 0.2s,
    transform 0.15s;
}
.mob-ai-btn.active .mob-ai-orb {
  box-shadow: 0 0 24px rgba(13, 122, 95, 0.7);
  transform: translateY(-2px);
}
.mob-ai-btn .mob-ai-orb i {
  font-size: 1.15rem;
  color: #fff;
}
.mob-ai-btn.active {
  color: var(--teal);
}
.mob-ai-btn span {
  font-size: 0.62rem;
  font-weight: 700;
}

.mob-fab {
  display: none;
  position: fixed;
  bottom: 76px;
  right: 18px;
  z-index: 7999;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--teal);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(13, 122, 95, 0.45);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.mob-fab:active {
  transform: scale(0.92);
}

@media (max-width: 480px) {
  .mobile-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }
  .layout {
    --mob-nav-h: env(safe-area-inset-bottom, 0px);
  }
}

/* ── SNAV COMPAT (legacy no-ops kept for JS calls) ───────────── */
.snav-item {
  display: none;
}
.snav-section-btn {
  display: none;
}
.nav-btn {
  display: none;
}
.mn-btn {
  display: none;
}
.tab-bar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   PARITY PATCH — rules restored from original styles.css that were
   missing after the base/layout/panels/mobile split.
   ═══════════════════════════════════════════════════════════════ */
.sidebar.collapsed .sg {
  padding: 6px 8px;
  justify-content: center;
}

.sidebar.collapsed .sb-foot {
  padding: 8px;
}

.sidebar.collapsed .u-av {
  width: 32px;
  height: 32px;
}

/* Pricing cards */
.pricing-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg2);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.pricing-card:hover {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal2);
}

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-bg.open {
  display: flex;
  animation: fadeUp 0.15s ease;
}

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius3);
  padding: 1.5rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* ── VOICE BTN ─────────────────────────────────────────────── */
#voice-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text3);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

#voice-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal2);
}

#voice-btn.recording {
  background: var(--red2);
  border-color: var(--red3);
  color: var(--red3);
}

/* ── STUDY GROUPS ──────────────────────────────────────────── */
.group-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 13px;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}

.group-card:hover {
  box-shadow: var(--shadow);
}

/* ── EXAM PANEL ────────────────────────────────────────────── */
.exam-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 14px;
  margin-bottom: 10px;
  transition: var(--transition);
}

.exam-card:hover {
  box-shadow: var(--shadow);
}

/* Space items share .si styling; dot indicator */
.sp-si-dot {
  font-size: 10px !important;
}

/* Options button on hover */
.sb-space-more {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.si.sp-si:hover .sb-space-more {
  opacity: 1;
}

.sb-space-more:hover {
  background: var(--bg3);
}

/* ── Me mobile panel ── */
#panel-me-mobile .me-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
}

#panel-me-mobile .me-av {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: var(--ai-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

#panel-me-mobile .me-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text1);
}

#panel-me-mobile .me-plan {
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 3px;
}

#panel-me-mobile .me-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

#panel-me-mobile .me-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

#panel-me-mobile .me-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -0.04em;
}

#panel-me-mobile .me-stat-lbl {
  font-size: 0.68rem;
  color: var(--text3);
  margin-top: 3px;
  font-weight: 600;
}

#panel-me-mobile .me-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

#panel-me-mobile .me-link-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

#panel-me-mobile .me-link-btn:hover {
  border-color: var(--teal);
}

#panel-me-mobile .me-link-icon {
  font-size: 1.4rem;
}

#panel-me-mobile .me-link-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text1);
}

#panel-me-mobile .me-link-sub {
  font-size: 0.72rem;
  color: var(--text3);
}

#panel-me-mobile .me-sign-out {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: none;
  color: var(--coral);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING STEP 5 — Connect Integration
   ═══════════════════════════════════════════════════════════════ */
.si-ob-int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

/* ── PARITY PATCH — restored @media content ── */

@media (max-width: 720px) {
  .help-grid {
    grid-template-columns: 1fr;
  }

  .help-wrap {
    padding: 18px 14px 50px;
  }

  .st-layout {
    flex-direction: column;
    padding: 14px 16px;
    gap: 14px;
  }

  .st-subnav {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .st-subnav-item {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .st-content {
    overflow-y: visible;
  }

  .st-wheel,
  .st-light-slider {
    width: 160px;
  }

  .st-wheel {
    height: 160px;
  }

  :root {
    --panel-max: 9999px;
    --chat-max: 9999px;
  }

  .topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .tb-brand {
    width: auto;
  }

  .tb-center {
    display: none;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow2);
  }

  .overlay {
    display: block;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .g2 {
    grid-template-columns: 1fr;
  }

  .view-head {
    padding: 0 14px;
  }

  /* Reset ALL centering on mobile — full width with small padding */
  .home-wrap,
  .habits-wrap,
  .journal-wrap,
  .community-wrap,
  .library-wrap,
  .quiz-wrap,
  .stats-wrap,
  .ask-notes-panel,
  .quizzes-wrap,
  .inbox-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Calendar: drop the side rail, let the main timeline take the full width */
  .cal-rail {
    display: none;
  }

  .cal-main-hd {
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .cal-range {
    min-width: 0;
    font-size: 0.95rem;
  }

  .cal-month-view {
    padding: 12px 14px;
  }

  #panel-settings,
  #panel-goals,
  #panel-progress {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #panel-settings > div,
  #panel-goals > div,
  #panel-progress > div {
    max-width: 100% !important;
  }

  #panel-courses > div:last-child,
  #panel-lab > div:last-child,
  #panel-announcements > div:last-child,
  #panel-studyplan > div:last-child,
  #panel-contenthub > div:last-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #panel-templates .tpl-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }

  .content {
    padding: 14px !important;
  }

  .chat-msgs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #chat-welcome {
    max-width: 100%;
  }

  /* Keep the page title (and its actions) pinned while content scrolls.
     Harmless no-op for panels whose header is already flex-pinned. */
  .panel .view-head {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .chat-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Native-feeling momentum scroll on the main scroll regions */
  .sb-scroll,
  .panel,
  .chat-msgs,
  .home-wrap,
  .content,
  .si-modal-form-body,
  .mkt-modal {
    -webkit-overflow-scrolling: touch;
  }

  /* Marketplace / Space-settings modal → slide-up bottom sheet
     (consistent with the si-modal sheet already in place) */
  .mkt-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .mkt-modal {
    max-width: none !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)) !important;
    animation: mob-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .mkt-modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border2, var(--border));
    margin: 2px auto 14px;
  }

  /* Comfortable tap targets for modal actions */
  .si-modal-btn {
    min-height: 44px;
  }

  /* Feedback modal → slide-up bottom sheet (matches si-/mkt- sheets) */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-overlay .modal-box {
    max-width: none !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0)) !important;
    animation: mob-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .modal-overlay .modal-box::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border2, var(--border));
    margin: -4px auto 14px;
  }

  /* Launcher Space rows: surface the ⋮ options (hover-only on desktop is
     unreachable on touch) and drop the redundant drill chevron there */
  .sidebar .si.sp-si::after {
    content: none;
  }

  .sidebar .sb-space-more {
    opacity: 1;
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-wrap {
    padding: 20px 18px calc(52px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Softer, roomier cards */
  .siva-brief {
    padding: 22px 20px;
    margin-bottom: 18px;
    border-radius: 20px;
  }

  .gs-section {
    padding: 20px 18px;
    margin-bottom: 18px;
    border-radius: 20px;
  }

  /* Stat cards — compact on mobile so the home page scrolls quicker (the 2x2
     grid was eating too much vertical space). Desktop/tablet sizing unchanged. */
  .h-stat-grid {
    gap: 7px;
    margin-bottom: 10px;
  }

  .h-stat-card {
    padding: 8px 10px;
    border-radius: 12px;
  }

  .h-stat-ic {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 12px;
    margin-bottom: 3px;
  }

  .h-stat-val {
    font-size: 1.1rem;
  }

  .h-stat-lbl {
    font-size: 0.68rem;
    margin-top: 1px;
  }

  /* Two-column blocks stack with comfortable gaps */
  .h2col {
    gap: 14px;
    margin-bottom: 18px;
  }

  .h2col-card {
    padding: 20px 18px;
    border-radius: 18px;
  }

  /* Action pills → edge-to-edge swipeable row (no cramped wrapping) */
  .siva-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 9px;
    margin: 2px -18px 20px;
    padding: 2px 18px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .siva-pills::-webkit-scrollbar {
    display: none;
  }

  .siva-pill {
    flex-shrink: 0;
    padding: 9px 15px;
    font-size: 0.82rem;
    border-radius: 22px;
  }

  /* Global zoom — bigger, closer type across all panels (keeps font-scale) */
  html {
    font-size: calc(17px * var(--font-scale, 1));
  }

  /* Model selector → single swipeable row instead of wrapping to 2 lines
     (the wrap was stealing vertical space at the top of the AI tab) */
  .agent-selector {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 14px 2px;
    gap: 6px;
  }

  .agent-selector::-webkit-scrollbar {
    display: none;
  }

  .agent-chip {
    flex-shrink: 0;
  }

  /* Slim chat header so the conversation/composer gets more of the screen */
  .chat-header {
    padding: 10px 14px 9px;
  }

  /* Compact welcome — fits one screen, leaves the composer in view */
  #chat-welcome {
    padding: 1.25rem 1.25rem 0.5rem;
  }

  .chat-welcome-orb {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    margin-bottom: 1rem;
  }

  .chat-welcome-orb img {
    width: 34px;
    height: 34px;
  }

  .chat-welcome-heading {
    font-size: 1.55rem;
    margin-bottom: 0.3rem;
  }

  .chat-welcome-sub {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  .chat-welcome-hint {
    margin-top: 1rem;
  }

  .chat-prompt-grid {
    gap: 9px;
  }

  .chat-prompt-card {
    padding: 14px 13px 12px;
    border-radius: 14px;
  }

  /* Tighter, roomier message bubbles — closer reading like Notion */
  .chat-msgs {
    padding: 16px 14px 12px;
    gap: 5px;
  }

  .msg {
    max-width: 90%;
  }

  /* Chat bar — hide the inline msg counter on mobile; it takes horizontal space
     from the textarea making it near-invisible. Counter shown in chat menu. */
  .chat-msg-counter {
    display: none;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .os-pane-chat {
    flex-direction: column !important;
    position: relative;
    overflow: hidden;
  }

  /* Sidebar becomes an off-canvas drawer that slides in over the chat */
  .oc-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 41;
    width: 78%;
    max-width: 280px;
    height: auto !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow2);
    border-right: 1px solid var(--border);
  }

  .oc-sidebar.open {
    transform: translateX(0);
  }

  .oc-ws-name,
  .oc-section-lbl {
    display: block;
  }

  .oc-ch-item,
  .oc-dm-item {
    padding: 9px 16px;
  }

  /* bigger tap targets */
  .oc-drawer-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.42);
  }

  .oc-drawer-overlay.open {
    display: block;
  }

  .oc-chan-toggle {
    display: inline-flex !important;
  }

  .oc-main {
    flex: 1;
    min-height: 0;
  }

  .oc-msgs {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 1. Layout — no bottom nav anymore (Notion launcher redesign) ──
     The old mobile bottom-nav/FAB were retired, so we no longer reserve
     ~60px at the bottom. Reserving it left a dead gap under the chat
     composer and every panel footer. Only honour the safe-area inset. */
  .layout {
    --mob-nav-h: 0px;
  }

  /* ── 2. Chat bar — lift above bottom nav ─────────────────────
     The panel-chat uses flex column; chat-bar is the last child.
     Adding padding-bottom here gives breathing room above the nav. */
  .chat-bar {
    margin-bottom: 0 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }

  /* Org chat input bar */
  .oc-bar {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }

  /* ── 3. Org tabs — all 9 tabs scrollable without wrapping ─── */
  .os-tabs {
    padding: 0 8px !important;
    gap: 0 !important;
  }

  .os-tab {
    padding: 10px 10px !important;
    font-size: 0.75rem !important;
    min-height: 44px;
  }

  /* ── 4. Touch targets — min 44×44 px for all tappable things ─ */
  .nav-btn {
    min-height: 44px;
  }

  .tb-icon-btn,
  .chat-icon-btn,
  .chat-send-btn,
  .si-modal-close,
  .os-card-link,
  .os-tool-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .mob-nav-btn {
    min-height: 52px;
  }

  /* ── 5. Personal & academic space tabs ───────────────────────
     Already have overflow-x:auto but need tab padding tightened */
  .sp-tab {
    padding: 10px 10px !important;
    font-size: 0.76rem !important;
    min-height: 44px;
  }

  /* ── 6. Home dashboard grid — single column ──────────────────  */
  .home-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 7. Doc editor toolbars — horizontal scroll not wrap ─────
     Override "flex-wrap:wrap" which creates 3 rows on small screens */
  .dh-toolbar,
  .doc-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .dh-tool-btn,
  .doc-tb-btn {
    min-height: 38px;
  }

  /* ── 8. Profile dropdown — prevent off-screen right ─────────
     On small phones right:0 can still overflow; clamp to viewport */
  .profile-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
  }

  /* ── 9. Library / integrations grids ─────────────────────────
     3-column int-grid is too cramped; collapse to 2 then 1 */
  .int-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .lib-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 10. Topbar — tighten on small screens ───────────────────
     The right action icons remain, search hidden (done already) */
  .tb-brand {
    gap: 6px;
  }

  .tb-name {
    font-size: 13px;
  }

  /* ── 11. Org chat mobile — channel drawer handled in the dedicated
     media query above (retractable off-canvas sidebar). ── */
  .oc-main {
    flex: 1;
    min-height: 0;
  }

  /* ── 12. Analytics grid — 2 columns on tablet ───────────────── */
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* But keep placeholder styling readable */
  input::placeholder,
  textarea::placeholder {
    font-size: 14px !important;
  }
}

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

  .stat-val {
    font-size: 18px;
  }

  .content {
    padding: 12px;
  }

  .doc-sidebar {
    width: 160px;
  }

  .doc-title-input {
    font-size: 1.1rem;
  }

  .brief-card {
    padding: 24px 20px;
  }

  .brief-greeting {
    font-size: 1.3rem;
  }

  .chat-prompt-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 360px;
    gap: 7px;
  }

  .chat-prompt-card {
    padding: 10px 10px 9px;
    border-radius: 12px;
  }

  .cpc-title {
    font-size: 0.76rem;
  }

  .cpc-sub {
    font-size: 0.67rem;
  }

  .cpc-icon {
    font-size: 0.85rem;
    margin-bottom: 3px;
  }

  .chat-welcome-heading {
    font-size: 1.5rem;
  }

  .chat-action-pills {
    gap: 4px;
  }

  .chat-pill {
    font-size: 0.72rem;
    padding: 4px 10px;
  }

  .chat-header {
    padding: 10px 14px;
  }

  .chat-header-av {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .msg {
    max-width: 90%;
  }

  .chat-hdr-btn {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }

  .h-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .h2col {
    grid-template-columns: 1fr;
  }

  .siva-brief {
    padding: 16px 16px;
  }

  .home-wrap {
    padding: 16px;
  }

  .si-ob-role-grid {
    grid-template-columns: 1fr;
  }

  .si-ob-int-grid {
    grid-template-columns: 1fr;
  }

  .si-ob-goal-row {
    grid-template-columns: 1fr;
  }

  .si-ob-title {
    font-size: 1.3rem;
  }

  .analytics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .si-onboard-box {
    padding: 0 8px;
  }

  .si-ob-actions {
    flex-direction: column;
    gap: 6px;
  }

  .si-ob-btn-pri {
    width: 100%;
  }

  .si-ob-int-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Modals as bottom sheets ─────────────────────────────────
     On small phones, center modals feel cramped.
     Slide up from bottom instead — more thumb-friendly.          */
  .si-modal-bg {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .si-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    max-width: 100% !important;
    animation: si-modal-mob-in 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  }

  @keyframes si-modal-mob-in {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .si-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .si-modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Pricing modal — full-width bottom sheet */
  #pricing-modal.si-modal-bg .si-modal {
    padding: 24px 16px 32px !important;
  }

  /* ── Integrations / library — single column ────────────────── */
  .int-grid {
    grid-template-columns: 1fr !important;
  }

  .lib-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Analytics — 2×3 grid on phone ─────────────────────────── */
  .analytics-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Org space ───────────────────────────────────────────────── */
  .os-hero {
    padding: 10px 12px !important;
    gap: 10px;
  }

  .os-stat {
    padding: 10px 12px !important;
  }

  .os-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .os-scroll {
    padding: 12px !important;
  }

  .os-card {
    padding: 12px !important;
  }

  .os-grid2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Topbar — show logo icon only, hide name text ───────────── */
  .tb-name {
    display: none;
  }

  /* ── Content padding ─────────────────────────────────────────── */
  .content {
    padding: 12px !important;
  }

  .view-head {
    padding: 0 12px !important;
  }

  /* ── Cards & grids ───────────────────────────────────────────── */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .h-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Onboarding ──────────────────────────────────────────────── */
  .si-ob-actions {
    flex-direction: column;
    gap: 8px;
  }

  .si-ob-btn-pri {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1280px) {
  :root {
    --sb-width: 264px;
    --panel-max: 1180px;
    --chat-max: 860px;
  }
}

@media (min-width: 1440px) {
  :root {
    --sb-width: 272px;
    --panel-max: 1240px;
    --chat-max: 900px;
    --topbar-h: 56px;
  }

  .view-head {
    height: 56px;
    padding: 0 28px;
  }

  .h-stat-grid {
    gap: 16px;
  }

  .h-stat-card {
    padding: 22px;
  }
}

@media (min-width: 1920px) {
  :root {
    --sb-width: 300px;
    --panel-max: 1380px;
    --chat-max: 1000px;
    --topbar-h: 58px;
  }

  html {
    font-size: 17px;
  }

  .view-head {
    height: 58px;
    padding: 0 32px;
  }

  .msg {
    max-width: 72%;
  }

  .h-stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

@media (min-width: 2560px) {
  :root {
    --sb-width: 320px;
    --panel-max: 1600px;
    --chat-max: 1100px;
  }

  html {
    font-size: 18px;
  }
}

@media (max-width: 390px) {
  #chat-welcome {
    padding: 0.75rem 1rem 0.25rem;
  }

  .chat-welcome-orb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 0.65rem;
  }

  .chat-welcome-orb img {
    width: 26px;
    height: 26px;
  }

  .chat-welcome-heading {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
  }

  .chat-welcome-sub {
    font-size: 0.82rem;
    margin-bottom: 0.9rem;
  }

  .chat-prompt-card {
    padding: 9px 8px;
  }

  .cpc-icon {
    display: none;
  }
}

@media (max-width: 640px) {
  .dh-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .dh-tool-btn,
  .dh-tb-btn {
    flex-shrink: 0;
    min-height: 36px;
  }
}