/* ── Jarvis AI Chat Drawer — HUD Aesthetic ── */
:root { --jarvis-drawer-width: 400px; }

/* Push main content left when Jarvis is open (desktop only) */
@media (min-width: 769px) {
  body.jarvis-open .app-body { margin-right: var(--jarvis-drawer-width); transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .app-body { transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  body.jarvis-open .page-body,
  body.jarvis-open .page-content,
  body.jarvis-open .page { padding-right: calc(20px + var(--jarvis-drawer-width)); transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
}

.chat-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  width: 52px; height: 52px; border-radius: 50%;
  background: #0a1628; color: #00d4ff; z-index: 9996;
  border: 1px solid rgba(0, 212, 255, 0.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 0 28px rgba(0, 212, 255, 0.45), 0 6px 24px rgba(0,0,0,0.5); }
.chat-fab .fab-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.chat-fab .fab-icon > svg { width: 100%; height: 100%; }
.chat-fab.open .fab-icon { opacity: 0.7; }

/* ─── FAB icon states (Concept B: waveform-bolt) ──────────────────────────── */
.jarvis-fab-ring {
  opacity: 0.9;
  transform-origin: 50% 50%;
  transition: stroke 0.2s, opacity 0.2s, stroke-width 0.2s;
}
.jarvis-fab-bolt {
  transform-origin: 50% 50%;
  transition: opacity 0.2s, fill 0.2s;
}

/* Thinking — dashed ring spins while waiting for first token */
#chatFab.jarvis-thinking .jarvis-fab-ring {
  stroke-dasharray: 18 8;
  animation: jarvisFabSpin 1.2s linear infinite;
}
#chatFab.jarvis-thinking .jarvis-fab-bolt { opacity: 0.6; }
@keyframes jarvisFabSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Streaming — ring brightens + thickens; typewriter in bubble carries the motion */
#chatFab.jarvis-streaming .jarvis-fab-ring {
  stroke: #00d4ff;
  stroke-width: 2.5;
  opacity: 1;
  stroke-dasharray: none;
}

/* Recording — ring turns red and pulses; waveform bars bounce */
#chatFab.jarvis-recording {
  box-shadow: 0 0 24px rgba(229, 62, 62, 0.55), 0 4px 16px rgba(0,0,0,0.4);
}
#chatFab.jarvis-recording .jarvis-fab-ring {
  stroke: #e53e3e;
  stroke-dasharray: none;
  animation: jarvisFabPulse 1s ease-in-out infinite;
}
#chatFab.jarvis-recording .jarvis-fab-bolt { fill: #e53e3e; }
#chatFab.jarvis-recording .jarvis-fab-wave {
  stroke: #e53e3e;
  transform-origin: 50% 50%;
  animation: jarvisFabBars 0.9s ease-in-out infinite;
}
#chatFab.jarvis-recording .jarvis-fab-wave-l1, #chatFab.jarvis-recording .jarvis-fab-wave-r1 { animation-delay: 0s; }
#chatFab.jarvis-recording .jarvis-fab-wave-l2, #chatFab.jarvis-recording .jarvis-fab-wave-r2 { animation-delay: 0.15s; }
#chatFab.jarvis-recording .jarvis-fab-wave-l3, #chatFab.jarvis-recording .jarvis-fab-wave-r3 { animation-delay: 0.3s; }
@keyframes jarvisFabPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes jarvisFabBars {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.fab-dot { filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.8)); }

.chat-drawer {
  position: fixed; top: 0; right: calc(-1 * var(--jarvis-drawer-width) - 20px);
  width: var(--jarvis-drawer-width);
  /* 100vh on Android/iOS refers to the tallest possible viewport (no browser
     chrome) — so the bottom of the drawer, including .chat-input-area, gets
     pushed below the visible screen. 100dvh resizes with the dynamic browser
     chrome so the input row stays in view. Fallback to 100vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  background: #0d1117; z-index: 9997;
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(0, 212, 255, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'DM Sans', sans-serif;
}
.chat-drawer.open { right: 0; }

.chat-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(0, 212, 255, 0.12);
  flex-shrink: 0; background: #0a0f18;
}
.chat-drawer-header h3 {
  margin: 0; font-size: 15px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 2px; text-transform: uppercase;
}
.chat-drawer-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jarvis-awareness {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500; color: #00d4ff; opacity: 0.6;
  letter-spacing: 0.4px; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jarvis-emblem { flex-shrink: 0; }
.jarvis-emblem .je-ring1 { animation: jePulse 3s ease-in-out infinite; transform-origin: 50% 50%; }
.jarvis-emblem .je-ring2 { animation: jePulse 3s ease-in-out infinite 0.5s; transform-origin: 50% 50%; }
.jarvis-emblem .je-ring3 { animation: jePulse 3s ease-in-out infinite 1s; transform-origin: 50% 50%; }

.chat-new-btn {
  background: none; border: 1px solid #1e3a5f; color: #5a8ab5;
  padding: 5px 12px; border-radius: 6px; font-size: 12px;
  cursor: pointer; transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
}
.chat-new-btn:hover { border-color: #00d4ff; color: #00d4ff; }
.chat-close-btn {
  background: none; border: 1px solid #1e3a5f; color: #5a8ab5;
  width: 32px; height: 32px; border-radius: 6px; font-size: 18px;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.chat-close-btn:hover { border-color: #00d4ff; color: #00d4ff; }
@media (max-width: 768px) {
  .chat-close-btn { display: flex; }
}

.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: #1e3a5f transparent;
}

.chat-msg { max-width: 95%; animation: chatFadeIn 0.3s ease; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.assistant { align-self: flex-start; }

.chat-account-label {
  align-self: center;
  font-size: 11px;
  color: #7a8ba0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 10px;
  margin: 8px 0 2px;
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
  width: fit-content;
}

.chat-msg-bubble {
  padding: 10px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: #c8d6e5;
  word-wrap: break-word;
}
.chat-msg.user .chat-msg-bubble {
  background: #1a2332; border-bottom-right-radius: 4px;
  border: 1px solid #1e3a5f;
}
.chat-msg.assistant .chat-msg-bubble {
  background: #111922; border-bottom-left-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.1);
}
.chat-msg.assistant .chat-msg-bubble strong { color: #fff; }
.chat-msg.assistant .chat-msg-bubble ul,
.chat-msg.assistant .chat-msg-bubble ol { margin: 6px 0; padding-left: 20px; }
.chat-msg.assistant .chat-msg-bubble li { margin: 3px 0; }
.chat-msg.assistant .chat-msg-bubble p { margin: 0 0 8px; }
.chat-msg.assistant .chat-msg-bubble p:last-child { margin: 0; }

.jarvis-brief-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8ba0;
  opacity: 0.6;
  margin-bottom: 6px;
}

.chat-typing {
  align-self: flex-start; padding: 10px 14px;
  background: #111922; border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 12px;
  display: flex; gap: 10px; align-items: center;
}
.chat-typing-text { font-size: 12px; color: #00d4ff; font-style: italic; }
.chat-typing-rings { flex-shrink: 0; }
.chat-typing-rings .tr-ring1 { animation: jePulse 2s ease-in-out infinite; transform-origin: 50% 50%; }
.chat-typing-rings .tr-ring2 { animation: jePulse 2s ease-in-out infinite 0.4s; transform-origin: 50% 50%; }

.chat-suggestions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 20px; flex-shrink: 0;
}
.chat-suggestion-btn {
  background: #111922; border: 1px solid #1e3a5f; color: #5a8ab5;
  padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  cursor: pointer; text-align: left; transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
}
.chat-suggestion-btn:hover { border-color: #00d4ff; color: #c8d6e5; }

.chat-input-area {
  padding: 12px 16px; border-top: 1px solid rgba(0, 212, 255, 0.12);
  /* Clear Android gesture/nav bar + Samsung Internet bottom toolbar + iOS home
     indicator — without this, the bottom toolbar draws over the input row */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0;
  background: #0a0f18;
}
.chat-input {
  flex: 1; background: #111922; border: 1px solid #1e3a5f;
  color: #c8d6e5; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-family: 'DM Sans', sans-serif;
  resize: none; min-height: 20px; max-height: 120px;
  line-height: 1.4; outline: none;
}
.chat-input::placeholder { color: #3a5a7a; }
.chat-input:focus { border-color: rgba(0, 212, 255, 0.4); }
.chat-send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: #00d4ff; color: #0a1628;
  border: none; cursor: pointer; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s, box-shadow 0.2s; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
.chat-send-btn:hover { box-shadow: 0 0 16px rgba(0, 212, 255, 0.4); }
.chat-send-btn:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }

/* Mic button — voice input (Web Speech API). Hidden entirely on browsers
   without SpeechRecognition (JS toggles display:none). */
.jarvis-mic-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid #1e3a5f;
  color: #5a8ab5; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s, background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0; line-height: 1;
}
.jarvis-mic-btn:hover { color: #93c5fd; border-color: #2a4a70; }
.jarvis-mic-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.jarvis-mic-btn.recording {
  color: #fff; background: #ef4444; border-color: #ef4444;
  animation: jarvis-mic-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}
@keyframes jarvis-mic-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); }
  50%      { opacity: 0.7; box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

.jarvis-speaker-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid #1e3a5f;
  color: #5a8ab5; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; line-height: 1;
  opacity: 0.45; transition: opacity 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.jarvis-speaker-btn:hover { opacity: 0.7; }
.jarvis-speaker-btn.tts-active { opacity: 1.0; border-color: #D97706; }

/* ── JARVIS FULL-SCREEN MODE ── */
.chat-drawer.jarvis-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  z-index: 9000; background: #0a1628;
  transition: none;
}
.chat-drawer.jarvis-fullscreen .chat-drawer-header {
  padding: 10px 16px; flex-shrink: 0;
}
.chat-drawer.jarvis-fullscreen .chat-messages {
  flex: 1; overflow-y: auto; padding-bottom: 60px;
}
.chat-drawer.jarvis-fullscreen .chat-input-area {
  padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1e3a5f; flex-shrink: 0; margin-bottom: 48px;
}

/* Stop card */
.jarvis-stop-card {
  background: #0f1d32; border: 1px solid #1e3a5f; border-radius: 10px;
  margin: 8px 12px 4px; padding: 10px 14px; flex-shrink: 0;
  cursor: pointer; transition: max-height 0.25s ease;
  overflow: hidden;
}
.jarvis-stop-card.collapsed { max-height: 36px; }
.jarvis-stop-card .stop-summary {
  font-size: 12px; color: #9CA3AF; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.jarvis-stop-card .stop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12px; color: #c8d6e5;
}
.jarvis-stop-card .stop-item.done { color: #6B7280; text-decoration: line-through; }
.jarvis-stop-card .stop-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.jarvis-stop-card .stop-dot.done { background: #16A34A; }
.jarvis-stop-card .stop-dot.next { background: #00d4ff; }
.jarvis-stop-card .stop-dot.upcoming { background: #374151; }
.jarvis-stop-card .stop-dot.atrisk { background: #DC2626; }
.jarvis-stop-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 10px;
  text-transform: uppercase; margin-left: auto;
}
.jarvis-stop-badge.done { background: #052e16; color: #4ade80; }
.jarvis-stop-badge.next { background: #0c2d48; color: #00d4ff; }
.jarvis-stop-badge.atrisk { background: #450a0a; color: #f87171; }
.jarvis-stop-chevron {
  float: right; font-size: 10px; color: #6B7280; transition: transform 0.2s;
}
.jarvis-stop-card.collapsed .jarvis-stop-chevron { transform: rotate(-90deg); }

/* Bottom nav — z-index 9550 keeps it above wp-mobile-tab-strip (9500) if
   state ever drifts; the strip's .above-jarvis-nav rule still positions
   it at bottom:48px on Week tab, so both remain visible there. */
.jarvis-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 48px;
  background: #0a1628; border-top: 1px solid #1e3a5f; z-index: 9550;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Use CSS Grid with explicit 4 equal columns instead of flex:1. Dashboard
   specifically was producing a 2-tab layout from 4 DOM children despite
   each tab having flex:1 — some inherited CSS or computed flex-basis was
   collapsing 2 of the 4. Grid is more deterministic: each tab gets
   exactly 1fr regardless of content size. */
.jarvis-bottom-nav.visible {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.jarvis-nav-tab {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-size: 10px; font-weight: 500;
  color: #6B7280; background: none; border: none; cursor: pointer;
}
.jarvis-nav-tab.active { color: #00d4ff; }
.jarvis-nav-tab svg { width: 18px; height: 18px; }
/* More tab: visually distinct via a left separator so it reads as a menu
   trigger rather than a peer state. Icon set is intentionally not cyan on
   active — it's a sheet trigger, not a navigated-to state. */
.jarvis-nav-tab-more { border-left: 1px solid #1e3a5f; }

/* Field Mode avatar — body-level fixed in the top-right corner so it works
   on every chat.js-loading page regardless of which header element the
   page uses. Sits above the .mobile-page-title bar (z 1000) but below the
   bottom nav (z 9550) and More sheet (z 9700+). */
#jarvis-field-avatar {
  position: fixed; top: 8px; right: 8px; z-index: 1001;
}

/* ── Universal Field Mode mobile rules ─────────────────────────────────────
   These live in chat.css (universally imported) rather than styles.css
   (index.html only) so every page picks them up. Moved here from styles.css
   in Phase 3.5 after the dashboard regression surfaced the import gap. */
@media (max-width: 768px) {
  /* Hide the page's own top chrome. chat.css is only imported by the 8
     Field-Mode pages (workstation doesn't import it), and Phase 3 makes
     every mobile user Field Mode — so we can hide unconditionally without
     waiting for the body.field-mode class. This eliminates the CV logo
     flash that happened when page bootstrap showed .topbar before chat.js
     finished its currentRep poll and added body.field-mode. */
  .topbar,
  .topnav,
  header,
  #manager-topbar { display: none !important; }

  /* Reserve space for the 48px title bar at top and 48px bottom nav.
     Fixed-positioned elements ignore body padding and are handled below. */
  body.field-mode {
    padding-top: 48px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  /* .mobile-page-title — fixed top-bar element. Phase 4 migrated the base
     positioning rules from mobile-nav.css. chat.js owns the element and
     creates it during initFieldMode. */
  .mobile-page-title {
    display: block; position: fixed; top: 0; left: 0; right: 0;
    height: 48px; line-height: 48px; text-align: center;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    z-index: 1000; pointer-events: none;
  }
  /* Field Mode title bar: CV logo on the left + page title centered.
     Logo is absolute-positioned so the title text stays optically
     centered regardless of label length. */
  body.field-mode .mobile-page-title {
    background: #000;
    color: #fff;
  }

  /* Legacy index.html hamburger button inside .map-wrap — NOT inside
     header, so chat.css's wrapper hide doesn't reach it. Phase 4
     migrated from mobile-nav.css. */
  .mobile-menu-btn { display: none !important; }
  body.field-mode .mobile-page-title-logo {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    pointer-events: none;
  }
  body.field-mode .mobile-page-title-text {
    display: block; text-align: center; line-height: 48px;
  }

  /* friday-review.html — permanent fixed footer at bottom:0 height:52px
     would otherwise be covered entirely by the 48px nav. */
  body.field-mode .page-footer-bar {
    bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9500 !important;
  }

  /* #session-warning-banner — identical inline-styled element on all 8
     pages with bottom:24px. !important defeats the inline style.
     72px = 48px nav + 24px original offset. */
  body.field-mode #session-warning-banner {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* index.html — My Tasks FAB sits at bottom:24px inline. */
  body.field-mode #my-tasks-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toast notifications across pages (home.html, ideas.html). */
  body.field-mode .home-toast,
  body.field-mode .toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Legacy overlays + panels from the old chat drawer and hamburger
     drawer. Field Mode replaces both: Jarvis owns the page on /, More
     sheet replaces the hamburger drawer. The hamburger drawer's panel
     (width 280px) shows up in elementsFromPoint stacks on dashboard
     specifically, covering the left half of the bottom nav. Even if
     no JS opens it, the panel's existence in DOM at z 10001 is a
     liability. Kill all four unconditionally in Field Mode. */
  body.field-mode #chatOverlay,
  body.field-mode .chat-overlay,
  body.field-mode #mobileNavOverlay,
  body.field-mode .mobile-nav-overlay,
  body.field-mode #mobileNavPanel,
  body.field-mode .mobile-nav-panel { display: none !important; }
}

/* Phase 3.5+: orientation guard removed. DevTools panel resizes (Brett
   testing) were pushing innerWidth past 768px and hiding the bar mid-
   session. Field Mode is a chat.css-loading-page-only feature, and on
   desktop the avatar + bar are visually unobtrusive. Keep them visible
   at every viewport rather than playing whack-a-mole with breakpoints. */

/* ── MORE SHEET ── */
#more-sheet-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9700;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-out;
}
#more-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

#more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #0a1628; color: #fff;
  border-top: 1px solid #1e3a5f;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  z-index: 9750;
  max-height: 80vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.2s ease-out;
}
#more-sheet.open { transform: translateY(0); }

.more-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #1e3a5f; margin: 8px auto 4px;
  border: none; padding: 0;
  position: relative;
  cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
/* Expand the tap target to a comfortable size without changing the visual.
   The drag handle reads as 40x4 but the hit zone is 60x16. */
.more-sheet-handle::before {
  content: ''; position: absolute;
  left: -10px; right: -10px; top: -6px; bottom: -6px;
}

.more-sheet-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 14px; border-bottom: 1px solid #1e3a5f;
  flex-shrink: 0;
}
.more-sheet-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #CC0000; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.more-sheet-identity { display: flex; flex-direction: column; min-width: 0; }
.more-sheet-name { font-size: 14px; font-weight: 600; color: #fff; }
.more-sheet-role { font-size: 11px; color: #9CA3AF; margin-top: 2px; }

.more-sheet-nav {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.more-sheet-link {
  display: block; padding: 14px 20px;
  color: #c8d6e5; text-decoration: none;
  font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.more-sheet-link:active { background: #0f1d32; }
.more-sheet-link.active {
  color: #fff; background: #0f1d32;
  border-left-color: #00d4ff;
}

.more-sheet-footer {
  padding: 12px 18px 14px;
  border-top: 1px solid #1e3a5f;
  flex-shrink: 0;
}
.more-sheet-signout {
  display: block; width: 100%;
  padding: 12px; border-radius: 8px;
  background: transparent; color: #DC2626;
  border: 1px solid #DC2626;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.more-sheet-signout:active { background: rgba(220, 38, 38, 0.1); }

.chat-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.2); z-index: 9990;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.chat-overlay.open { opacity: 1; pointer-events: auto; }

/* Keep account popup clickable when chat drawer is open */
.popup-panel.visible { z-index: 9995 !important; }

@keyframes chatFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fabSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes jePulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 768px) {
  .chat-drawer { width: 100%; right: -100%; }
  .chat-fab { bottom: 24px; right: 16px; width: 48px; height: 48px; }
}

/* ─── Jarvis tool-use status chip (inside assistant bubble) ─────────────── */
.jarvis-tool-status {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  background: rgba(16, 185, 129, 0.15); color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.jarvis-tool-status.err {
  background: rgba(239, 68, 68, 0.15); color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

/* ─── Jarvis action suggestion chips ─────────────────────────────────────── */
.jarvis-action-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 14px 8px;
  animation: chatFadeIn 0.25s ease-out;
}
.jarvis-action-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0f172a; border: 1px solid #1e3a5f; color: #93c5fd;
  border-radius: 16px; padding: 6px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.jarvis-action-chip:hover { background: #162238; border-color: #2a4a70; }
.jarvis-action-chip:active { background: #1e3a5f; }
.jarvis-chip-icon { font-size: 11px; line-height: 1; }
.jarvis-chip-label { line-height: 1.2; }

.jarvis-session-chips {
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.jarvis-session-chips .jarvis-action-chip {
  text-align: center;
  justify-content: center;
  font-size: 13px;
  padding: 10px 16px;
}