/* ==========================================================================
   1. CORE VARIABLES & DEFAULTS
   ========================================================================== */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-smooth: all 0.2s ease;
  --transition-fast: 0.1s ease;
}

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  background-color: var(--bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body { 
  display: flex; 
  color: var(--text);
}

.hidden { display: none !important; }

/* ==========================================================================
   2. SCREEN & SHELL LAYOUT
   ========================================================================== */
/* .sidebar-advisor-btn (the advisor's sidebar entry card) now lives in
   css/sidebar.css, next to the rest of the sidebar's own components - the
   old floating round bubble this replaced was the only thing styled here. */

#screen-advisor {
  display: none;
  flex: 1;
  width: 100%;
  height: 100vh;
  /* 100vh is the layout viewport, not the visible one - on mobile Safari/
     Chrome it's taller than what's actually on screen once the browser's
     own address bar is factored in, which is what was pushing the header
     off the top or the input dock off the bottom depending on scroll
     state. 100dvh tracks the real visible viewport; kept 100vh above only
     as a fallback for browsers that don't support dvh yet. */
  height: 100dvh;
  min-height: 0;
  position: relative;
  background-color: var(--bg);
  overflow: hidden;
}

#screen-advisor.vis { display: flex; }

#screen-advisor > .advisor-sidebar,
#screen-advisor > .advisor-main {
  min-height: 0;
}

@media (min-width: 769px) {
  #screen-advisor { padding-left: 0 !important; }
}

/* ==========================================================================
   3. PREMIUM SIDEBAR
   ========================================================================== */
.advisor-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 20px;
  z-index: 20;
  transition: transform var(--transition-smooth);
}

.advisor-sidebar-top { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  flex-shrink: 0; 
}

.advisor-new-chat-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.advisor-new-chat-btn:hover {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

/* --- Navigation Tabs --- */
.advisor-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  width: 100%;
}

.advisor-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: calc(var(--r-md) - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.advisor-tab-btn i { font-size: 16px; }
.advisor-tab-btn:hover { color: var(--text); }
.advisor-tab-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(17, 17, 17, 0.04);
}

/* --- Conversation List Flow --- */
.advisor-conv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.advisor-conv-list::-webkit-scrollbar { width: 4px; }
.advisor-conv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.advisor-conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.advisor-conv-row:hover { background: var(--bg); }
.advisor-conv-row.active {
  background: var(--accent-soft);
  border-color: var(--border);
}

.advisor-conv-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.advisor-conv-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advisor-conv-row.active .advisor-conv-title { font-weight: 600; }
.advisor-conv-time { font-size: 11px; color: var(--dim); }

.advisor-conv-del {
  background: transparent;
  border: none;
  color: var(--dim);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.advisor-conv-row:hover .advisor-conv-del { opacity: 1; }
.advisor-conv-del:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.advisor-conv-empty { font-size: 13px; color: var(--dim); padding: 20px 12px; text-align: center; }

/* ==========================================================================
   4. MAIN CONVERSATION PANEL & HEADERS
   ========================================================================== */
.advisor-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.ai-panel-header-center { display: flex; align-items: center; gap: 12px; }
.advisor-sidebar-toggle { display: none; }
/* Mobile-only exit button - see the @media override below; on desktop the
   sidebar's own "Back" button (always visible there) already covers this. */
.ai-panel-exit-btn { display: none; margin-left: auto; }

.ai-panel-logo-wrap { position: relative; display: flex; flex-shrink: 0; }
.ai-panel-logo { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; }

.ai-panel-status-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid var(--surface);
}

.ai-panel-title { font-size: 15px; font-weight: 600; color: var(--text); }

/* --- Inline Banners --- */
.ai-sync-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.ai-sync-banner i { font-size: 14px; flex-shrink: 0; }

/* ==========================================================================
   5. CHAT STREAMING CONTAINER & MESSAGES
   ========================================================================== */
#advisorChatView {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ai-chat-container {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-behavior: smooth;
}

.ai-messages::-webkit-scrollbar { width: 6px; }
.ai-messages::-webkit-scrollbar-track { background: transparent; }
.ai-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* --- Message Architecture --- */
.ai-msg { max-width: 100%; }

.ai-msg-row { display: flex; align-items: flex-start; gap: 16px; }
.ai-msg.user .ai-msg-row { flex-direction: row-reverse; }

.ai-msg-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border);
}

.ai-bubble-text {
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
  min-width: 0;
}
.ai-bubble-text p { margin: 0 0 12px; }
.ai-bubble-text p:last-child { margin-bottom: 0; }
.ai-bubble-text ul { margin: 8px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ai-bubble-text ul:last-child { margin-bottom: 0; }
.ai-bubble-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-bubble-text strong { font-weight: 600; color: var(--text); }

/* User Styling */
.ai-msg.user .ai-bubble-text {
  background: var(--surface);
  color: var(--text);
  padding: 16px 20px;
  border-radius: 20px 20px 4px 20px;
  border: 1px solid var(--border);
  max-width: 75%;
  margin-left: auto;
  user-select: text !important;
}

/* Model & Framework States */
.ai-msg.model .ai-bubble-text { 
  padding: 4px 0; 
  user-select: text !important; 
  color: var(--text); 
}
.ai-msg.system .ai-bubble-text {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  text-align: center;
  margin: 0 auto;
}
.ai-msg.error .ai-bubble-text { 
  background: rgba(239, 68, 68, 0.05); 
  border: 1px solid rgba(239, 68, 68, 0.2); 
  color: #EF4444; 
  border-radius: var(--r-md); 
  padding: 12px 16px; 
}

.ai-msg-time { font-size: 11px; color: var(--dim); margin-top: 8px; display: block; }
.ai-msg.user .ai-msg-time { text-align: right; }

.ai-msg-actions { display: flex; gap: 8px; margin-top: 12px; }
.ai-msg-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ai-msg-action-btn:hover { background: var(--surface); color: var(--text); border-color: var(--text); }

/* --- Typestate --- */
.ai-typing { display: flex; gap: 6px; padding: 16px 0; align-items: center; }
.ai-typing span { 
  width: 6px; height: 6px; 
  border-radius: 50%; 
  background: var(--dim);
}
.ai-typing span:nth-child(1) { opacity: 0.4; }
.ai-typing span:nth-child(2) { opacity: 0.7; }
.ai-typing span:nth-child(3) { opacity: 1; }

/* --- Empty States --- */
.ai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--dim);
  margin: auto;
}

.ai-empty-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text);
}
.ai-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }

/* ==========================================================================
   6. INTERACTIVE FLOATING DOCK & INPUTS
   ========================================================================== */
.ai-input-container-wrap {
  padding: 0 32px 24px 32px;
  background: var(--bg);
  position: relative;
  z-index: 10;
}

/* --- Input capsule - a single pill: quick-prompts icon, textarea, context
   icon, send button. Replaces the old stack of a chip row + a separate
   context-limiter bar sitting above a boxy input - everything now lives in
   one modern-looking dock, chip/dropup triggers included. --- */
.ai-modern-input-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 8px 8px 6px 12px;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-modern-input-box:focus-within {
  border-color: var(--text);
  box-shadow: 0 6px 24px rgba(17, 17, 17, 0.08);
}
.ai-modern-input-box.builder-on { border-color: var(--text); }

/* Row 1: textarea + send/copy button. Row 2: the tool buttons. */
.ai-input-row-primary { display: flex; align-items: flex-end; gap: 4px; }
.ai-input-row-tools { display: flex; align-items: center; gap: 2px; padding-top: 2px; }

/* ── Builder-mode attachment chips (data an exported prompt will carry) ──── */
.ai-builder-chips { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 8px; }
.ai-builder-chips.hidden { display: none; }
.ai-builder-chips-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--dim);
}
.ai-builder-chips-title { display: inline-flex; align-items: center; gap: 6px; }
.ai-builder-chips-head i { font-size: 14px; }
.ai-builder-tok { margin-left: auto; font-weight: 600; }

/* Second export path - download context.json and attach it (no paste cap). */
.ai-builder-json-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.ai-builder-json-hint { font-size: 10.5px; color: var(--dim); line-height: 1.4; flex: 1; min-width: 140px; }
.ai-builder-json-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.ai-builder-json-btn i { font-size: 14px; }
.ai-builder-json-btn:hover { background: var(--bg); border-color: var(--dim); }
.ai-builder-json-btn.suggested { background: var(--text); color: var(--bg); border-color: var(--text); }
.ai-builder-json-btn.suggested:hover { background: var(--text); opacity: 0.9; }
.ai-builder-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-builder-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 500; color: var(--text);
}
.ai-builder-chip-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-builder-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border: none; border-radius: 50%;
  background: transparent; color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.ai-builder-chip-x:hover { background: var(--surface); color: var(--text); }
.ai-builder-chip-empty {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px dashed var(--border); background: transparent;
  color: var(--dim); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.ai-builder-chip-empty:hover { color: var(--text); border-color: var(--dim); }

/* Builder toggle sits at the far end of the tool row; active = filled, like
   the send button, to read as "mode is on". */
.ai-builder-toggle { margin-left: auto; }
.ai-builder-toggle.active { background: var(--text); color: var(--bg); }
.ai-builder-toggle.active:hover { background: var(--text); opacity: 0.9; }

.ai-input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 8px 2px !important;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  resize: none;
  outline: none !important;
  max-height: 200px;
}
.ai-input::placeholder { color: var(--dim); }
.ai-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-send-btn-modern {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.ai-send-btn-modern:hover { opacity: 0.9; }
.ai-send-btn-modern:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-send-btn-modern i { font-size: 18px; }

/* Inline verification utility */
.ai-clear-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.ai-clear-confirm button {
  border: none;
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.ai-clear-confirm .ai-clear-yes { background: #EF4444; color: #fff; }
.ai-clear-confirm .ai-clear-no { background: var(--bg); color: var(--text); border: 1px solid var(--border); }

/* ==========================================================================
   7. REPORTS TARGET CONTAINER
   ========================================================================== */
#advisorReportsView {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.advisor-reports-scroll {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}
.advisor-reports-scroll::-webkit-scrollbar { width: 6px; }
.advisor-reports-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* ==========================================================================
   8. ACCOUNT MANAGEMENT PROFILE WIDGET
   ========================================================================== */
.advisor-profile-wrap {
  position: relative;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.advisor-profile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}
.advisor-profile-trigger:hover { background: var(--bg); border-color: var(--border); }

.advisor-profile-avatar-wrap { position: relative; display: flex; flex-shrink: 0; }
.advisor-profile-avatar { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg); border: 1px solid var(--border); }

.advisor-profile-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dim);
  border: 2px solid var(--surface);
}
.advisor-profile-dot.synced { background: #10B981; }
.advisor-profile-dot.syncing { background: #F59E0B; }
.advisor-profile-dot.error { background: #EF4444; }

.advisor-profile-trigger-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.advisor-profile-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.advisor-profile-sub { font-size: 12px; color: var(--dim); }
.advisor-profile-chevron { font-size: 16px; color: var(--dim); flex-shrink: 0; transition: transform var(--transition-fast); }

.advisor-profile-wrap.open .advisor-profile-chevron { transform: rotate(180deg); }
.advisor-profile-wrap.open .advisor-profile-trigger { background: var(--bg); border-color: var(--border); }

/* Drop-up Engine */
.advisor-profile-menu {
  position: absolute;
  bottom: calc(100% + 12px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
  /* Grows upward from the bottom of a fixed-height mobile drawer - without a
     cap it can run off the top of the screen on short viewports (or with the
     on-screen keyboard open) with no way to reach the items above the fold. */
  max-height: min(420px, calc(100vh - 100px));
  max-height: min(420px, calc(100dvh - 100px));
  overflow-y: auto;
}

.advisor-profile-menu-row { padding: 8px 12px; }
.advisor-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: default;
  text-align: left;
  transition: var(--transition-fast);
}

button.advisor-profile-menu-item { cursor: pointer; }
button.advisor-profile-menu-item:hover { background: var(--bg); }
button.advisor-profile-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; }

.advisor-profile-usage { color: var(--dim); font-size: 12px; }
.advisor-profile-usage.limit-reached { color: #EF4444; }
.advisor-profile-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

.ai-sync-banner-mini {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.advisor-profile-menu .google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}
.advisor-profile-menu .google-btn:hover { background: var(--bg); }

.sync-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); font-weight: 500; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.sync-dot.synced { background: #10B981; }
.sync-dot.syncing { background: #F59E0B; }
.sync-dot.error { background: #EF4444; }

/* ==========================================================================
   9. MODALS KEYVAULTS & GATEWAYS
   ========================================================================== */
.modal-wide {
  border-radius: var(--r-lg) !important;
  padding: 40px !important;
  border: 1px solid var(--border);
  background: var(--surface);
}

.ai-key-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; margin-bottom: 16px; }
.ai-key-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: var(--transition-fast);
}
.ai-key-row.active { border-color: var(--text); background: var(--surface); }

.ai-key-radio {
  border: none; background: transparent; color: var(--dim); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; flex-shrink: 0; padding: 0;
}
.ai-key-row.active .ai-key-radio { color: var(--text); }
.ai-key-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ai-key-label { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-key-masked { font-size: 12px; color: var(--dim); font-family: 'JetBrains Mono', monospace; }

.ai-key-del {
  border: none; background: transparent; color: var(--dim); cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 14px; transition: var(--transition-fast);
}
.ai-key-del:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; }

.ai-key-add-row { display: flex; gap: 12px; }
.ai-key-label-input { flex: 1; }

/* Auth Gateway Wall */
.ai-auth-wall {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 40px 24px;
  color: var(--dim);
  align-items: center;
  margin-block: auto;
}
.ai-auth-wall-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.ai-auth-wall-icon i { font-size: 28px; color: var(--text); }
.ai-auth-wall-title { font-size: 16px; font-weight: 600; color: var(--text); }
.ai-auth-wall-sub { font-size: 14px; line-height: 1.6; max-width: 320px; }
.ai-auth-wall-btn { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; padding: 12px 24px; }

/* ==========================================================================
   10. MEDIA RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  #screen-advisor { position: relative; }

  /* The logo/title give way to the exit button below - a mobile visitor
     already knows they're in the Advisor (they just tapped in from there),
     so this space is better spent letting them leave directly instead of
     having to open the drawer first for its "Back" button. */
  .ai-panel-header-center { display: none; }
  .ai-panel-exit-btn { display: flex; }

  .advisor-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(320px, 85vw);
    z-index: 240;
    border-radius: 0;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    padding-top: max(24px, env(safe-area-inset-top));
  }
  .advisor-sidebar.open { transform: translateX(0); }
  
  .advisor-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 230;
  }
  .advisor-sidebar.open ~ .advisor-sidebar-overlay,
  #advisorSidebar.open ~ #advisorSidebarOverlay { display: block; }
  
  .advisor-main { border-radius: 0; border: none; }
  .advisor-sidebar-toggle { display: flex; }
}

@media (min-width: 769px) {
  .advisor-sidebar-toggle { display: none; }
  .sidebar.collapsed ~ .main-content #screen-advisor.vis { padding-left: 112px; }
}

@media (max-width: 600px) {
  .advisor-main .ai-panel-header { padding-top: max(16px, env(safe-area-inset-top)); }
  .ai-input-container-wrap { padding: 0 16px 16px 16px; }
  .ai-messages { padding: 24px 16px; gap: 20px; }
  .ai-msg.user .ai-bubble-text { max-width: 90%; }
  .modal-wide { padding: 24px !important; }
}

.model > .ai-msg-utils {
  display: flex;
  flex-direction: column-reverse;
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 12px;
}

.ai-starter-chips {
  display: flex;
  min-width: 200px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.ai-starter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ai-starter-chip:hover {
  background: var(--bg);
  border-color: var(--text);
}