/* titi-premium.css — Round 7 Premium UI Overhaul
   Strategy: Override existing tokens + add new components as a layer.
   Loads after app.css — same specificity wins by source order. */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg-main:          #0b0f14;
  --bg-sidebar:       #101720;
  --bg-surface:       #151c24;
  --bg-surface-hover: #1b2530;
  --bg-active:        #1f2937;
  --border-soft:      rgba(255,255,255,0.08);
  --text-main:        #f3f4f6;
  --text-muted:       #9ca3af;
  --icon-muted:       #9aa4b2;
  --icon-active:      #ffffff;
  --accent:           #4f9cff;
  --accent-soft:      rgba(79,156,255,0.14);
  --success:          #22c55e;
  --danger:           #ef4444;

  /* Map existing app.css vars to new tokens so all existing components update */
  --bg:    var(--bg-main);
  --panel: var(--bg-surface);
  --panel2: var(--bg-surface-hover);
  --text:  var(--text-main);
  --muted: var(--text-muted);
  --line:  var(--border-soft);
}

/* Body */
body {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* ─── 2. SIDEBAR OVERHAUL ───────────────────────────────────────────────── */
.workspace-sidebar,
#workspaceSidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-soft) !important;
  display: flex;
  flex-direction: column;
}

/* Brand */
.workspace-sidebar .brand {
  padding: 16px 14px 8px;
  flex-shrink: 0;
}
.workspace-sidebar .brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  flex-shrink: 0;
}
.workspace-sidebar .brand h1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}
.workspace-sidebar .brand small {
  font-size: 11px;
  color: var(--text-muted);
}

/* New Chat button */
.workspace-sidebar .nav-new-chat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 10px 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(79,156,255,0.2);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.workspace-sidebar .nav-new-chat:hover {
  background: rgba(79,156,255,0.2);
  border-color: rgba(79,156,255,0.35);
}

/* Search button */
.workspace-sidebar .sidebar-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 10px 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.workspace-sidebar .sidebar-search-btn:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255,255,255,0.15);
}

/* Nav items */
.workspace-sidebar .nav-v19-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  margin: 1px 6px;
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: 13.5px;
}
.workspace-sidebar .nav-v19-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}
.workspace-sidebar .nav-v19-item.active,
.workspace-sidebar .nav-v19-item[aria-current="page"] {
  background: var(--bg-active);
  color: var(--text-main);
}
.workspace-sidebar .nav-v19-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-muted);
}
.workspace-sidebar .nav-v19-item:hover .nav-v19-icon,
.workspace-sidebar .nav-v19-item.active .nav-v19-icon {
  color: var(--icon-active);
}

/* Session history section */
.sidebar-history-section {
  /* R97B-FIX: R96/R97 gave nav + projects + history each their own
     max-height/overflow-y — three independent scrollbars stacked in one
     sidebar, which read as cluttered/unprofessional ("nhiều thanh kéo bên
     trái trồng nhau"). ChatGPT/Gemini's sidebar has exactly ONE scrollbar
     for the whole thing. Reverting this section (and nav/projects below)
     to plain block flow, no flex-grow, no per-section scroll — the shared
     ancestor .sidebar-scroll-body (overflow:auto) is the single scroll
     owner, same as before but now nav/projects can't crowd history out of
     existence because nothing here fights them for a fixed pixel share. */
  overflow: visible;
  padding: 4px 0;
}
.sidebar-section-label {
  display: block;
  padding: 6px 14px 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Session items in history */
.session-history-list .session-item,
.session-history-list .chat-history-item {
  border-radius: 8px;
  margin: 1px 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.session-history-list .session-item:hover,
.session-history-list .chat-history-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}
.session-history-list .session-item.active,
.session-history-list .chat-history-item.active {
  background: var(--bg-active);
  color: var(--text-main);
}

/* Date group headers in history */
.chat-history-group-label,
.session-date-group-label {
  display: block;
  padding: 8px 14px 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  opacity: 0.65;
}

/* Projects section */
.sidebar-section.projects-section {
  flex-shrink: 0;
  /* R97G-FIX: R96's own max-height:240/overflow-y:auto gave this section a
     SECOND independent scrollbar nested inside .sidebar-scroll-body's outer
     one (confirmed live via getComputedStyle: both had scrollHeight >
     clientHeight simultaneously) — the exact "nhiều thanh cuộn" (multiple
     scrollbars) complaint, and neither ChatGPT nor Gemini nest a scroll
     region inside their folders/projects list. The real ChatGPT/Gemini
     pattern this section already implements elsewhere (renderProjectSidebarList's
     "show first N, then Show more") is what should bound its height, not an
     inner scrollbar — so this section now just flows as a normal block
     inside the single outer .sidebar-scroll-body scroll region (titi-ux-flow.css).
     R96's original concern (many projects squeezing history to a few px)
     doesn't reproduce with a single shared scroll: expanding "Show more"
     just makes the one outer list taller, exactly like scrolling past a
     long folders list in ChatGPT/Gemini to reach Recents. */
}
.projects-header {
  padding: 6px 14px 3px;
}
.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  opacity: 0.7;
}

/* ─── 3. SIDEBAR FOOTER — REPLACED BY ACCOUNT CARD ─────────────────────── */
.sidebar-footer-note {
  display: none !important; /* hidden; JS injects .prem-account-card instead */
}

/* ─── 4. ACCOUNT CARD ───────────────────────────────────────────────────── */
.prem-account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 4px 8px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  /* Never obscured by Android nav bar */
  margin-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  position: relative;
  user-select: none;
}
.prem-account-card:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255,255,255,0.13);
}

.prem-account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0;
}

.prem-account-info {
  flex: 1;
  min-width: 0;
}
.prem-account-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.prem-plan-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.prem-plan-free {
  background: rgba(156,163,175,0.15);
  color: var(--text-muted);
  border: 1px solid rgba(156,163,175,0.25);
}
.prem-plan-pro {
  background: rgba(79,156,255,0.15);
  color: var(--accent);
  border: 1px solid rgba(79,156,255,0.3);
}
.prem-plan-admin {
  background: rgba(34,197,94,0.12);
  color: var(--success);
  border: 1px solid rgba(34,197,94,0.25);
}

.prem-account-settings-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--icon-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.prem-account-settings-btn:hover {
  background: var(--bg-active);
  color: var(--icon-active);
}
.prem-account-settings-btn svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* Collapsed sidebar: account card becomes avatar only */
.sidebar-collapsed-grid .prem-account-card,
[style*="width: 64px"] .prem-account-card {
  padding: 8px;
  margin: 4px 6px;
  justify-content: center;
  border-radius: 12px;
}
.sidebar-collapsed-grid .prem-account-info,
.sidebar-collapsed-grid .prem-account-settings-btn {
  display: none;
}

/* ─── 5. ACCOUNT MENU ───────────────────────────────────────────────────── */
.prem-account-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 6px;
  min-width: 230px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  z-index: 9999;
  animation: prem-menu-in 0.12s ease;
  overflow: hidden;
}
@keyframes prem-menu-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.prem-account-menu-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.prem-account-menu-email {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prem-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-main);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
.prem-menu-item:hover {
  background: var(--bg-surface-hover);
}
.prem-menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--icon-muted);
  flex-shrink: 0;
}
.prem-menu-item:hover svg {
  color: var(--icon-active);
}
.prem-menu-item.danger {
  color: var(--danger);
}
.prem-menu-item.danger svg {
  color: var(--danger);
}
.prem-menu-item.danger:hover {
  background: rgba(239,68,68,0.1);
}

.prem-menu-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 6px;
}

.prem-menu-label {
  padding: 6px 12px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Menu overlay */
.prem-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}

/* Mobile account menu → bottom sheet */
@media (max-width: 700px) {
  .prem-account-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 20px 20px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    min-width: unset;
    width: 100%;
  }
}

/* ─── 6. SETTINGS MODAL ─────────────────────────────────────────────────── */
.prem-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: prem-overlay-in 0.15s ease;
}
@keyframes prem-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.prem-settings-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  width: min(780px, 95vw);
  height: min(580px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: prem-modal-in 0.15s ease;
}
@keyframes prem-modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.prem-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.prem-settings-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}
.prem-settings-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.prem-settings-close:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}

.prem-settings-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.prem-settings-nav {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-soft);
  padding: 10px 8px;
  overflow-y: auto;
  background: var(--bg-sidebar);
}
.prem-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
  margin-bottom: 1px;
}
.prem-settings-nav-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}
.prem-settings-nav-item.active {
  background: var(--bg-active);
  color: var(--text-main);
}
.prem-settings-nav-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--icon-muted);
}
.prem-settings-nav-item.active svg,
.prem-settings-nav-item:hover svg {
  color: var(--icon-active);
}
.prem-settings-nav-section {
  padding: 10px 12px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
}

.prem-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-width: 0;
}
.prem-settings-tab {
  display: none;
}
.prem-settings-tab.active {
  display: block;
}
.prem-settings-tab h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 16px;
}
.prem-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  gap: 16px;
}
.prem-settings-row:last-child {
  border-bottom: none;
}
.prem-settings-row-label {
  font-size: 13.5px;
  color: var(--text-main);
}
.prem-settings-row-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.prem-settings-row-val {
  font-size: 13px;
  color: var(--text-muted);
}

/* AI Providers tab — status only, no key exposure */
.prem-provider-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.prem-provider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prem-provider-dot.ok     { background: var(--success); }
.prem-provider-dot.warn   { background: #f59e0b; }
.prem-provider-dot.error  { background: var(--danger); }
.prem-provider-dot.unknown { background: var(--text-muted); }
.prem-provider-name {
  flex: 1;
  font-size: 13.5px;
  color: var(--text-main);
}
.prem-provider-status-text {
  font-size: 12px;
  color: var(--text-muted);
}

/* Mobile settings → full screen */
@media (max-width: 700px) {
  .prem-settings-modal {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .prem-settings-layout {
    flex-direction: column;
  }
  .prem-settings-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px;
    gap: 2px;
    white-space: nowrap;
  }
  .prem-settings-nav-item {
    flex-shrink: 0;
  }
  .prem-settings-nav-section {
    display: none;
  }
}

/* ─── 7. RIGHT INSPECTOR — CRITICAL FIX ────────────────────────────────── */
/* NEVER let content stack vertically. min-width must hold. */
.reviewer-panel,
#researchInspector {
  min-width: 300px !important;
  overflow-x: hidden;
}

/* Inspector tab row: prevent wrapping, horizontal scroll if needed */
.inspector-tabs {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 1px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-sidebar);
}
.inspector-tabs::-webkit-scrollbar { display: none; }

/* Inspector tab: compact, horizontal always */
.inspector-tab {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 5px;
  padding: 6px 9px !important;
  border-radius: 8px;
  font-size: 12px !important;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.inspector-tab:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}
.inspector-tab.active {
  background: var(--bg-active);
  color: var(--text-main);
}
.inspector-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  font-style: normal;
  /* Override any emoji font size inflation */
  font-size: 13px;
  line-height: 1;
}
.inspector-tab-icon svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
/* Label: hide on very narrow inspector, show on >=340px */
.inspector-tab-label {
  overflow: hidden;
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 1300px) {
  .inspector-tab-label {
    max-width: 42px;
    font-size: 11px;
  }
}
@media (max-width: 1180px) {
  .inspector-tab-label {
    display: none;
  }
  .inspector-tab {
    padding: 6px 8px !important;
  }
}

/* Inspector panels: no horizontal overflow, text wraps normally */
.inspector-panel {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Source cards */
.prem-source-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}
.prem-source-card:hover {
  border-color: rgba(255,255,255,0.14);
}
.prem-source-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 4px;
  /* wrap, do NOT let it stack vertically */
  white-space: normal;
  overflow-wrap: break-word;
}
.prem-source-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.prem-source-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prem-source-btn {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s;
}
.prem-source-btn:hover {
  background: var(--bg-active);
  color: var(--text-main);
}

/* ─── 8. MAIN CHAT AREA ─────────────────────────────────────────────────── */
.workspace-main {
  background: var(--bg-main) !important;
  min-width: 0;
}
.chat-window,
.chat-area,
.chat-messages,
#chatMessages {
  background: var(--bg-main) !important;
}

/* Assistant messages */
.msg-assistant,
.message-assistant {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 14px !important;
}

/* ─── 9. RESEARCH WORKSPACE ICONS ───────────────────────────────────────── */
/* Replace emoji in workspace cards with consistent line style */
.workspace-metric-icon,
.research-card-icon {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}

/* Research workspace: metric cards */
.workspace-metric-card,
.research-metric-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 12px !important;
}

/* Progress bars */
.progress-bar-track {
  background: var(--bg-surface-hover) !important;
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  background: var(--accent) !important;
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}

/* ─── 10. MOBILE SIDEBAR DRAWER ─────────────────────────────────────────── */
@media (max-width: 899px) {
  .workspace-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 86vw !important;
    max-width: 340px !important;
    transform: translateX(-110%) !important;
    transition: transform 0.25s ease !important;
    z-index: 1200 !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .workspace-sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.5) !important;
  }

  /* Sidebar overlay */
  .prem-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1199;
    animation: prem-overlay-in 0.2s ease;
    display: none;
  }
  .prem-sidebar-overlay.active {
    display: block;
  }

  /* Account card: full padding on mobile */
  .prem-account-card {
    margin-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  /* Right inspector: full-screen bottom sheet on mobile */
  .reviewer-panel,
  #researchInspector {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: unset !important;
    max-height: 80dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(110%) !important;
    transition: transform 0.25s ease !important;
    z-index: 1100 !important;
    overflow-y: auto;
  }
  .reviewer-panel.mobile-open,
  #researchInspector.mobile-open {
    transform: translateY(0) !important;
    box-shadow: 0 -4px 40px rgba(0,0,0,0.5) !important;
  }
}

/* ─── 11. LOADING / EMPTY / ERROR STATES ────────────────────────────────── */
.prem-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  gap: 10px;
}
.prem-empty-state svg {
  width: 36px;
  height: 36px;
  opacity: 0.4;
}
.prem-empty-state p {
  font-size: 13px;
  margin: 0;
}

.prem-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.prem-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: prem-dot-bounce 1.2s ease-in-out infinite;
}
.prem-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.prem-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes prem-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

.prem-error-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--danger);
  font-size: 13px;
}

/* ─── 12. UPGRADE BUTTON ────────────────────────────────────────────────── */
.prem-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
}
.prem-upgrade-btn:hover { opacity: 0.88; }

/* ─── 13. SCROLLBAR STYLING ─────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── 14. MISC OVERRIDES ────────────────────────────────────────────────── */
/* Topbar */
.workspace-topbar-minimal {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}

/* Composer
   R37B: .composer-r22e is excluded here — it renders its own pill chrome
   (background/border/radius/focus ring) on the inner .composer-row in
   titi-ux-flow.css. Without the :not(), this rule's outer border +
   focus-within blue border stacked on top of the inner pill's own border,
   producing a double-bordered box that turned entirely blue on focus
   (the "viền xanh nặng cả vùng lớn" reported by the user). */
.composer:not(.composer-r22e),
.message-composer,
#composerArea {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 16px !important;
}
.composer:not(.composer-r22e):focus-within,
#composerArea:focus-within {
  border-color: rgba(79,156,255,0.35) !important;
}

/* Collapse button (icon rail) */
.nav-collapse-btn {
  color: var(--icon-muted) !important;
  background: transparent !important;
  border: none !important;
}
.nav-collapse-btn:hover {
  color: var(--icon-active) !important;
  background: var(--bg-surface-hover) !important;
}

/* Selected item highlight */
::selection {
  background: var(--accent-soft);
  color: var(--text-main);
}

.prem-account-plan { font-size: 11px; line-height: 1.3; color: var(--muted, #8b949e); margin-top: 2px; }
.prem-account-plan.prem-plan-admin { color: #58a6ff; }
.prem-account-plan.prem-plan-pro { color: #3fb950; }