html, body {
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100%;
  min-height: 100svh;
  background: var(--bg, #eef0f8); /* fills any white gap */
}
/* Pinning html/body via position:fixed (rather than relying on #app's own
   height:100dvh + overflow:hidden alone) is what actually stops the whole
   page — header included — from being draggable off-screen on iPad Safari.
   iPadOS is far more willing than iPhone to let the outer document itself
   rubber-band/scroll (e.g. during a keyboard show/hide, or a bounce at the
   edge of an inner scroller), and since the nav sits in normal flow at the
   top of that document, any outer scroll drags it up and out of view. Every
   real scroll surface in the app (.sidebar-body, .right-body, etc.) already
   scrolls independently, so the outer document never needs to move at all. */
/* Prevent white gap at bottom on iOS */
body::after {
  content: '';
  display: block;
  height: env(safe-area-inset-bottom);
  background: var(--bg, #eef0f8);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: -1;
}


/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background: #f4f9f6; min-height: 100vh; }

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Rebranded to a bold flat green + warm charcoal palette — variable
     names kept as --purple/--purple-l/--purple-m so the hundreds of
     existing references cascade automatically without needing to touch
     every call site individually. Copilot/AI deliberately keeps a purple
     accent (--ai-accent) rather than following the green rebrand. */
  --purple:    #4ADE80;  /* bright reference green — used with DARK text/icons on top, matching the reference's own contrast pattern */
  --purple-l:  #ecfdf5;
  --purple-m:  #6ee7b7;
  --ai-accent:   #8B5CF6;
  --ai-accent-l: #f3eeff;
  --blue:      #0F6CBD;
  --blue-l:    #e8f4ff;
  --blue-m:    #93c5fd;
  --green:     #16a34a;
  --green-l:   #dcfce7;
  --red:       #C0162A;
  --red-l:     #fde8ea;
  --amber:     #d97706;
  --amber-l:   #fef3c7;
  --orange:    #ea580c;
  --orange-l:  #ffedd5;

  --t1: #1c1c1a; /* warmer near-black charcoal, matching the bold reference */
  --t2: #374151;
  --t3: #6b7280;
  --t4: #9ca3af;

  --glass:        rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.5);
  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.14);

  --r:    8px;
  --r-sm: 5px;
  --r-lg: 12px;
  --r-xl: 18px;

  --shadow:    0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);

  --blur:    blur(16px);
  --blur-sm: blur(8px);

  --nav-h:   62px;
  --stat-h:  40px;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ── TOPNAV ───────────────────────────────────────────────── */
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  z-index: 100;
  transition: margin-right 0.38s cubic-bezier(0.32,0.72,0,1);
}
.nav-brand {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
.nav-brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-sep { flex: 1; }
.nav-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r);
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--t2);
  font-family: inherit; white-space: nowrap;
  min-height: 36px; transition: background 0.15s;
}
@media (hover: hover) { .nav-btn:hover { background: rgba(0,0,0,0.06); } }
.nav-btn.active { background: var(--purple-l); color: var(--purple); }
.org-sel {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r);
  background: rgba(0,0,0,0.04); border: 1px solid var(--border2);
  font-size: 13px; font-weight: 600; color: var(--t1);
  cursor: pointer; max-width: 180px;
  overflow: hidden; /* clip to the pill so nothing (like the caret) can
                        get pushed outside it */
}
.org-sel select {
  border: none; background: none; outline: none;
  font: inherit; color: inherit; cursor: pointer;
  max-width: 140px; min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  appearance: none; -webkit-appearance: none;
}
.org-sel > i:last-child { flex-shrink: 0; }

/* ── STATS STRIP ──────────────────────────────────────────── */
.stats {
  display: flex; gap: 4px; padding: 6px 10px;
  background: var(--glass); border-bottom: 1px solid var(--glass-border);
  overflow-x: auto; flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.stats::-webkit-scrollbar { display: none; }
.stat-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,0.7); border: 1px solid var(--border2);
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.stat-pill:hover { background: rgba(255,255,255,0.9); }
.stat-num { font-size: 13px; font-weight: 800; color: var(--t1); }
.stat-num.red { color: var(--red); }
.stat-num.amber { color: var(--amber); }
.stat-num.blue { color: var(--blue); }
.stat-num.green { color: var(--green); }
.stat-num.purple { color: var(--purple); }
.stat-lbl { font-size: 11px; font-weight: 500; color: var(--t3); }

/* ── MAIN AREA ────────────────────────────────────────────── */
.main {
  display: flex; flex: 1; overflow: hidden;
  padding: 8px; gap: 8px;
  min-height: 0; /* critical for nested flex scroll */
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  min-height: 0;
  transition: width 0.35s cubic-bezier(0.32,0.72,0,1), min-width 0.35s, padding 0.35s, overflow 0.35s;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.sidebar-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-tab {
  flex: 1; padding: 10px 8px; border: none; background: none;
  font-size: 13px; font-weight: 600; color: var(--t3); cursor: pointer;
  font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 5px;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.sidebar-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.sidebar-body { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; overscroll-behavior: contain; }
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }
.sidebar-tools {
  padding: 8px; display: flex; flex-wrap: wrap; gap: 5px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.search-box {
  width: 100%; padding: 8px 10px; border-radius: var(--r);
  border: 1px solid var(--border2); background: rgba(255,255,255,0.8);
  font-size: 13px; font-family: inherit; outline: none; color: var(--t1);
  margin-bottom: 6px;
}
.search-box:focus { border-color: var(--blue); background: #fff; }

/* ── ISSUE ITEMS ──────────────────────────────────────────── */
.issue-item {
  padding: 10px 12px; border-radius: var(--r-lg); margin-bottom: 4px;
  cursor: pointer; background: rgba(255,255,255,0.5);
  border: 1px solid transparent; transition: all 0.15s;
}
.issue-item:hover { background: rgba(255,255,255,0.8); }
.issue-item.selected { background: var(--blue-l); border-color: var(--blue-m); }
.issue-item.selected .issue-title { color: var(--blue); }
.issue-ref { font-size: 10px; font-weight: 700; color: var(--t4); font-family: monospace; letter-spacing: 0.5px; }
.issue-title { font-size: 13px; font-weight: 700; color: var(--t1); margin: 2px 0; line-height: 1.3; }
.issue-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

/* ── EMAIL ITEMS ──────────────────────────────────────────── */
.email-item {
  padding: 10px 12px; border-radius: var(--r-lg); margin-bottom: 4px;
  cursor: pointer; border: 1px solid transparent;
  background: rgba(255,255,255,0.5); transition: all 0.15s;
}
.email-item:hover { background: rgba(255,255,255,0.8); }
.email-item.tagged { border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.04); }
.email-item.dismissed { opacity: 0.5; }
.email-item.viewing { background: var(--blue-l); border-color: var(--blue-m); }
.email-item.viewing .email-from { color: var(--blue); }
.email-from { font-size: 12px; font-weight: 700; color: var(--t1); }
.email-subj { font-size: 12px; color: var(--t2); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-tag  { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; font-weight: 700; color: var(--green); background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.25); border-radius: 20px; padding: 2px 8px; }
.email-date { font-size: 10px; color: var(--t4); }

/* ── FEED CARDS ──────────────────────────────────────────── */
.feed-card {
  border-left: 3px solid var(--t3); margin-bottom: 8px; padding: 10px 14px;
  background: rgba(255,255,255,0.7); border-radius: 0 var(--r) var(--r) 0;
  border-top: 1px solid var(--border-inner); border-right: 1px solid var(--border-inner); border-bottom: 1px solid var(--border-inner);
}
.feed-card.you { border-left-color: var(--blue); }
.beta-ui .feed-card {
  border-left: none; border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03); background: #fff;
}
.beta-ui .feed-card.you { border-color: var(--blue-m); background: var(--blue-l); }
.feed-note {
  padding: 8px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--amber); background: rgba(255,200,50,.07);
  border-radius: 0 var(--r) var(--r) 0;
  border-top: 1px solid rgba(217,119,6,.15); border-right: 1px solid rgba(217,119,6,.15); border-bottom: 1px solid rgba(217,119,6,.15);
}
.beta-ui .feed-note {
  border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03); background: #fff;
  /* Same shape/shadow/background as .beta-ui .feed-card (email items) so the
     whole feed reads as one consistent list — the colored left accent
     (amber for log entries/tagged evidence, overridden per-type via inline
     style) is what marks a card as a non-email type, not a different card
     shape entirely. */
  border-left: 4px solid var(--amber);
}

/* ── RIGHT PANEL ──────────────────────────────────────────── */
.right {
  flex: 1; display: flex; flex-direction: column; min-width: 320px;
  background: rgba(255,255,255,0.68); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-md);
  min-height: 0;
}
.right-hdr {
  padding: 14px 16px 0; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.right-tabs {
  display: flex; overflow-x: auto; padding: 0 16px;
  gap: 2px; flex-shrink: 0;
}
.right-tabs::-webkit-scrollbar { display: none; }
.right-tab {
  padding: 10px 14px; border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--t3); font-family: inherit;
  border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px; transition: all 0.15s;
  min-height: 42px;
}
.right-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.right-body {
  flex: 1; overflow-y: auto; padding: 16px;
  min-height: 0; /* allows flex child to shrink and scroll */
  overscroll-behavior: contain;
}
.right-body::-webkit-scrollbar { width: 4px; }
.right-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }

/* ── CHIPS ────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.chip-grey   { background: rgba(0,0,0,0.06); color: var(--t3); border-color: var(--border2); }
.chip-blue   { background: var(--blue-l); color: var(--blue); border-color: var(--blue-m); }
.chip-green  { background: var(--green-l); color: var(--green); }
.chip-amber  { background: var(--amber-l); color: var(--amber); }
.chip-red    { background: var(--red-l); color: var(--red); }
/* --purple is the bright reference-green accent — designed for dark
   text/icons ON it, not as a text colour itself. Using it directly as the
   foreground here (bright green on pale green) was low-contrast and, next
   to .chip-green's separate darker green, made the two read as competing
   themes rather than one cohesive palette. Dark green text on the same
   pale tint fixes contrast and keeps every green chip part of one family. */
.chip-purple { background: var(--purple-l); color: #15803d; border-color: var(--purple-m); }
.chip-orange { background: var(--orange-l); color: var(--orange); }
/* Ombudsman-specific — chip-purple is actually the bright brand GREEN
   (a legacy name from before the rebrand), which made Ombudsman referrals
   render green everywhere except the filter icon and Copilot, which
   correctly use the real purple accent. This gives Ombudsman one
   consistent genuine purple across every place it shows up. */
.chip-violet { background: var(--ai-accent-l); color: var(--ai-accent); border-color: rgba(139,92,246,.3); }
.status-chip.chip-violet { background: var(--ai-accent); color: #fff; }

/* ── RICH TEXT EDITOR (Ombudsman referral notes) ─────────────── */
.rich-editor { border: 1px solid var(--border2); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.rich-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.015); }
.rich-toolbar .btn-ghost { padding: 5px 8px; min-height: 28px; }
.rich-editor-body {
  min-height: 140px; max-height: 360px; overflow-y: auto;
  padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--t1);
  outline: none;
}
.rich-editor-body:empty::before {
  content: attr(data-placeholder);
  color: var(--t4); font-style: italic;
}
.rich-editor-body p { margin-bottom: 8px; }
.rich-editor-body ul { margin: 4px 0 8px 20px; }

/* ── STATUS / STAGE CHIPS (dropdown + its trigger) ───────────── */
/* These sit on their own solid-colour surface rather than the soft pastel
   tint used by ordinary label chips elsewhere — they're the one place a
   status is being actively set/changed, so they get the same bold, flat,
   fully-saturated treatment as buttons and the nav, instead of reading as a
   leftover from the pre-rebrand pastel style. */
.status-chip { font-weight: 700; border-color: transparent !important; }
.status-chip.chip-amber  { background: var(--amber);  color: #fff; }
.status-chip.chip-blue   { background: var(--blue);   color: #fff; }
.status-chip.chip-orange { background: var(--orange); color: #fff; }
.status-chip.chip-red    { background: var(--red);    color: #fff; }
.status-chip.chip-green  { background: var(--green);  color: #fff; }
.status-chip.chip-grey   { background: var(--t3);     color: #fff; }
.status-chip.chip-purple { background: var(--purple); color: var(--t1); }
.status-chip-arrow { display: inline-block; }
/* Every row's chip stretches to the row's full width (which now matches the
   trigger's own width exactly) so the list reads as one clean aligned
   column instead of ragged, differently-sized pills of varying label length. */
.status-row .status-chip { flex: 1; justify-content: center; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--border2);
  background: rgba(255,255,255,0.8); color: var(--t1);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  min-height: 38px;
}
.btn:hover { background: #fff; box-shadow: var(--shadow); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--purple); color: var(--t1); border-color: transparent; font-weight: 700; }
.btn-primary:hover { background: #22c55e; }
.btn-success { background: var(--green); color: #fff; border-color: transparent; }
.btn-success:hover { background: #15803d; }
.btn-danger  { background: var(--red-l); color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-ghost   { background: transparent; border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; min-height: 32px; }

/* ── FORM ELEMENTS ────────────────────────────────────────── */
.inp {
  width: 100%; padding: 9px 11px; border-radius: var(--r);
  border: 1px solid var(--border2); background: rgba(255,255,255,0.8);
  font-size: 16px; font-family: inherit; color: var(--t1); outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none; /* prevents iOS rounding */
}
/* Scale text down visually without triggering zoom */
@media (max-width: 899px) {
  .inp { font-size: 16px; }
}
.inp:focus { border-color: var(--blue); background: #fff; }
textarea.inp { resize: vertical; min-height: 80px; }
.lbl { display: block; font-size: 11px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: rgba(255,255,255,0.75); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card-hdr {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--t4);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── EVIDENCE HIGHLIGHT ───────────────────────────────────── */
.highlight {
  background: var(--amber-l); border-left: 3px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 6px 10px; font-size: 12px; font-style: italic;
  color: var(--t2); margin: 4px 0;
}

/* ── MODALS & OVERLAYS ────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: rgba(255,255,255,0.97); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 500px;
  max-height: min(80vh, 80dvh); display: flex; flex-direction: column;
  overflow: hidden;
}
/* Keyboard-safe modal overlay on iOS */
@supports (height: 1dvh) {
  .overlay {
    align-items: flex-start;
    padding-top: max(40px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .modal {
    margin: auto;
    max-height: 80dvh;
  }
}
.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  font-size: 15px; font-weight: 700;
}
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }

/* ── TOASTS ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: 600;
  z-index: 9999; white-space: nowrap; box-shadow: var(--shadow-lg);
  animation: toastIn 0.2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ── CAPTURE BAR ──────────────────────────────────────────── */
/* Floating card near the top rather than pinned to the bottom — iOS
   Safari's bottom toolbar shows/hides dynamically and regularly hides or
   misplaces bottom-fixed elements, especially with the keyboard involved.
   Top positioning doesn't have that problem. */
#capture-bar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 9000; width: calc(100% - 24px); max-width: 480px;
  background: rgba(255, 200, 50, 0.97); border: 2px solid var(--amber);
  border-radius: var(--r-lg);
  padding: 10px 12px; display: none; align-items: center; gap: 8px;
  flex-wrap: wrap; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
  padding-top: max(10px, env(safe-area-inset-top));
}
#capture-bar.visible { display: flex; }
#capture-preview { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: #7D4E00; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#capture-sel { font-size: 12px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: var(--r); background: rgba(255,255,255,0.9); flex: 1; min-width: 140px; font-family: inherit; }
#capture-resolved-toggle { background: rgba(255,255,255,0.6); border: 1px solid var(--amber); border-radius: var(--r); padding: 6px 10px; font-size: 11px; cursor: pointer; color: #7D4E00; font-family: inherit; flex-shrink: 0; }
#capture-btn { background: var(--amber); color: #fff; border: none; border-radius: var(--r); padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; }
#capture-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #7D4E00; padding: 0 4px; line-height: 1; flex-shrink: 0; }

/* Tagged evidence spans within an email body — visual confirmation that a
   text selection was actually captured, which was previously invisible. */
.evidence-mark { background: rgba(255, 200, 50, 0.45); border-bottom: 2px solid var(--amber); padding: 0 1px; border-radius: 2px; }

/* ── BETA HOME SCREEN ─────────────────────────────────────── */
.home-screen { overflow-y: auto; }
.home-header {
  background: var(--purple);
  padding: 20px 24px; color: var(--t1); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
/* Nav is the one permanent flat-colour surface across every screen. Each
   screen's own header is a light contextual tint band instead of a second
   solid block — that avoids the doubled-up look while still giving every
   page its own identifiable header treatment. */
/* Nav + each screen's own header now form ONE continuous flat-green surface
   (matching the reference's single clean banner) rather than two visually
   separate bars stacked on top of each other. */
.beta-ui .home-header {
  background: var(--purple); color: var(--t1); padding: 18px 24px;
  margin-top: -1px; /* removes any hairline seam between nav and this band */
}
.beta-ui .home-greeting p { color: rgba(28,28,26,.75); }
.home-greeting { flex-shrink: 0; }
.home-greeting h1 { font-size: 19px; font-weight: 800; margin: 0 0 3px; }
.home-greeting p { font-size: 12.5px; opacity: .88; margin: 0; }
.home-case-strip { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.home-case-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; }
.home-case-chip.active { background: #fff; color: var(--purple); }

.home-layout { display: grid; grid-template-columns: 1.65fr 1fr; gap: 20px; padding: 20px 24px 28px; align-items: start; }
.home-layout.stacked { grid-template-columns: 1fr; }
.home-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.home-section-title { display: flex; justify-content: space-between; align-items: center; }
.home-section-title h2 { font-size: 14px; font-weight: 800; margin: 0; color: var(--t1); }
.home-section-title a { font-size: 12px; color: var(--blue); font-weight: 700; cursor: pointer; }

.home-empty-mini { display: flex; align-items: center; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; color: var(--t3); }

.home-urgent-card {
  background: linear-gradient(135deg, #fff 0%, var(--purple-l) 100%); border: 1.5px solid var(--purple-m);
  border-radius: 16px; padding: 13px 15px; display: flex; align-items: center; gap: 13px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(5,150,105,.06); transition: box-shadow .15s, transform .15s;
}
@media (hover: hover) { .home-urgent-card:hover { box-shadow: 0 6px 20px rgba(5,150,105,.14); transform: translateY(-1px); } }
.home-urgent-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.home-urgent-text { flex: 1; min-width: 0; }
.home-urgent-text .ref { font-size: 10px; color: var(--t4); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.home-urgent-text .title { font-size: 13.5px; font-weight: 700; margin: 2px 0 2px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-urgent-text .meta { font-size: 11.5px; color: var(--t3); }
.home-urgent-arrow { width: 27px; height: 27px; border-radius: 50%; background: #fff; border: 1px solid var(--purple-m); display: flex; align-items: center; justify-content: center; color: var(--purple); flex-shrink: 0; }

.home-copilot-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.home-copilot-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--ai-accent); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.home-copilot-title { font-size: 13px; font-weight: 800; color: var(--t1); }
.home-copilot-badge { display: inline-block; background: var(--ai-accent); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.home-copilot-sub { font-size: 11.5px; color: var(--t3); margin-top: 1px; }

.home-summary-card { background: #fff; border-radius: 16px; padding: 16px; border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.home-ring-wrap { position: relative; width: 66px; height: 66px; flex-shrink: 0; }
.home-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.home-summary-label { font-size: 12.5px; font-weight: 700; color: var(--t1); }
.home-summary-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }

.home-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.home-stat-tile { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 11px; }
.home-stat-tile.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { .home-stat-tile.clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); } }
.home-stat-tile .top { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--t3); font-weight: 600; margin-bottom: 5px; }
.home-stat-tile .val { font-size: 17px; font-weight: 800; }
.home-stat-tile .sub { font-size: 10px; color: var(--t4); margin-top: 1px; }

.home-recent-card { background: #fff; border-radius: 16px; border: 1px solid var(--border); padding: 2px 0; }
.home-recent-row { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-bottom: 1px solid var(--border); font-size: 12px; }
@media (hover: hover) { .home-recent-row:hover { background: rgba(0,0,0,.02); } }
.home-recent-row:last-child { border-bottom: none; }
.home-recent-row .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.home-recent-row .txt { flex: 1; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-recent-row .time { font-size: 10px; color: var(--t4); flex-shrink: 0; }

/* ── EMPTY STATES ─────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; color: var(--t4); }
.empty-title { font-size: 15px; font-weight: 700; color: var(--t2); }
.empty-sub { font-size: 13px; }

/* ── LOGIN PAGE ───────────────────────────────────────────── */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: rgba(255,255,255,0.95); border-radius: var(--r-xl); padding: 40px 32px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.login-logo { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 20px; display: block; }
.login-title { font-size: 26px; font-weight: 800; color: var(--t1); margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--t3); line-height: 1.6; margin-bottom: 28px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: var(--purple); color: var(--t1); border: none; border-radius: var(--r-lg); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; margin-bottom: 12px; }
.login-note { font-size: 11px; color: var(--t4); }
.login-note a { color: var(--purple-m, #6ee7b7); font-weight: 700; }
.login-note a:hover { text-decoration: none; }

/* ── SECTION HEADERS ──────────────────────────────────────── */
.section-hdr { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 4px 4px; display: flex; align-items: center; justify-content: space-between; }

/* ── STATUS DROPDOWN ──────────────────────────────────────── */
.status-menu { position: fixed; background: rgba(255,255,255,0.97); border: 1px solid var(--border2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 2000; min-width: 160px; overflow: hidden; }
.status-row { display: flex; align-items: center; padding: 10px 14px; cursor: pointer; font-size: 13px; gap: 8px; }
.status-row:hover { background: var(--blue-l); }
.status-row:hover .status-chip { filter: brightness(1.08); }

/* ── NOTIFICATION SHEET (slides down from the header) ────────── */
.notif-backdrop {
  position: fixed; inset: 0; z-index: 2999;
  background: rgba(10,5,20,0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.32s ease;
}
.notif-backdrop.open { opacity: 1; pointer-events: auto; }
.notif-sheet {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
  max-width: 480px; margin: 0 auto;
  background: #fff; border-radius: 0 0 22px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.notif-sheet.open { transform: translateY(0); }
.notif-sheet-hdr {
  background: var(--purple); color: var(--t1); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; padding-top: max(16px, env(safe-area-inset-top));
  flex-shrink: 0;
}
.notif-sheet-body { overflow-y: auto; padding: 8px 16px 16px; }

/* Single-pane layout (phone width, OR any iPad regardless of orientation/
   width — see isMobileView() in app.js) always gets the same comfortable
   phone-proportioned column, matching iPhone exactly, instead of the list
   and issue detail stretching edge-to-edge across an iPad's much wider
   screen. max-width + auto margins center it with free space on either
   side rather than the content just growing to fill the whole width. */
.single-pane .sidebar, .single-pane .right {
  width: 100%; max-width: 480px; margin: 0 auto;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .main { padding: 5px; }
  .sidebar, .right { width: 100%; border-radius: var(--r-lg); flex: 1; }
  .nav-label { display: none; }
  .sidebar-tools .btn-sm .nav-label { display: none; }
  /* Icon-only nav-btns plus a full-width org name easily add up to wider
     than an iPhone screen, which used to push the rightmost icons (Menu)
     off the edge entirely with no way to reach them. Capping the org
     selector's width leaves enough room for every icon to fit on screen. */
  .org-sel { max-width: 96px; }
  .org-sel select { max-width: 60px; }
}
/* Belt-and-braces: if the nav's contents are ever wider than the screen
   regardless (a long org name, a future icon), let the bar scroll
   horizontally instead of silently clipping/hiding icons past the edge. */
.nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.nav-btn, .nav-brand, .org-sel { flex-shrink: 0; }

/* ── TABLET ───────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .sidebar { width: 250px; }
}

/* ── SCROLLBAR ────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; }

/* ── COPILOT ──────────────────────────────────────────────── */

/* FAB */
.copilot-fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 800;
  background: var(--ai-accent);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139,92,246,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
/* Nav already has its own "Copilot" button at this width (see the !isMobile
   check in app.js) — showing the floating FAB too was just a second,
   redundant way to open the exact same thing sitting on screen at once. */
@media (min-width: 768px) { .copilot-fab { display: none; } }
.copilot-fab:hover { transform: scale(1.07); }
.copilot-fab.open  { transform: scale(0.9); }

/* Flowing Siri ring around FAB — pseudo-element rotates a gradient mask */
.copilot-fab::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, transparent 60%, #a78bfa, #0F6CBD, var(--ai-accent), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  animation: siri-spin 2s linear infinite;
  z-index: -1;
}
.copilot-fab.active::after  { opacity: 1; }
.copilot-fab.thinking::after { opacity: 1; animation-duration: 0.9s; }
@keyframes siri-spin { to { rotate: 360deg; } }

/* Panel */
.copilot-panel {
  position: fixed;
  z-index: 850;
  background: rgba(250,249,255,0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Ensure messages area can scroll */
  height: 100%;
}

/* Siri flowing border — SVG-based animated gradient border around panel */
.copilot-siri-border {
  position: absolute;
  inset: 0; pointer-events: none; z-index: 1;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
@media (min-width: 900px) {
  .copilot-siri-border { border-radius: var(--r-xl); }
}
.copilot-siri-border::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 0deg at 50% 100%,
    transparent 0%,
    #a78bfa 15%, #0F6CBD 30%, var(--ai-accent) 45%,
    transparent 60%
  );
  animation: siri-border-spin 3s linear infinite;
}
.copilot-siri-border.thinking::before {
  animation-duration: 1.2s;
  background: conic-gradient(from 0deg at 50% 100%,
    transparent 0%,
    #0F6CBD 10%, #a78bfa 25%, #0F6CBD 40%,
    transparent 55%
  );
}
@keyframes siri-border-spin { to { rotate: 360deg; } }

/* Inner mask so only a thin border shows */
.copilot-siri-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(250,249,255,0.97);
  border-radius: 19px 19px 0 0;
}
@media (min-width: 900px) {
  .copilot-siri-border::after { border-radius: 0; inset: 0 0 0 2px; }
}

/* Header */
.copilot-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  flex-shrink: 0;
  position: relative; z-index: 2;
  border-bottom: 1px solid rgba(139,92,246,0.08);
}
.copilot-hdr-title {
  flex: 1; font-size: 15px; font-weight: 700; color: #1a0a2e;
  display: flex; align-items: center; gap: 8px;
}
.copilot-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: conic-gradient(var(--ai-accent), #0F6CBD, #a78bfa, var(--ai-accent));
  animation: dot-pulse 2.4s ease-in-out infinite, siri-spin 4s linear infinite;
  flex-shrink: 0;
}
.copilot-dot.thinking {
  animation: dot-pulse 0.7s ease-in-out infinite, siri-spin 0.8s linear infinite;
}
@keyframes dot-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.65); opacity: 0.5; }
}

/* Messages */
.copilot-messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px 4px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative; z-index: 2;
  min-height: 0;
  max-height: none;
  /* Force scroll on iOS */
  -webkit-overflow-scrolling: touch;
}
.copilot-msg {
  max-width: 88%; display: flex; flex-direction: column; gap: 3px;
  flex-shrink: 0;
}
.copilot-msg.user { align-self: flex-end; align-items: flex-end; }
.copilot-msg.ai   { align-self: flex-start; align-items: flex-start; }

.copilot-bubble {
  padding: 9px 13px; border-radius: 16px;
  font-size: 13px; line-height: 1.6; word-break: break-word;
}
.copilot-msg.user .copilot-bubble {
  background: var(--ai-accent);
  color: #fff; border-bottom-right-radius: 4px;
}
.copilot-msg.ai .copilot-bubble {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(139,92,246,0.1);
  color: #1a0a2e; border-bottom-left-radius: 4px;
  box-shadow: 0 1px 6px rgba(139,92,246,0.07);
}
.copilot-msg-time { font-size: 10px; color: #bbb; padding: 0 4px; }

/* Action chips */
.copilot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.copilot-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1.5px solid rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.06); color: var(--ai-accent);
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.copilot-action-btn:hover { background: rgba(139,92,246,0.12); }
.copilot-action-btn.primary {
  background: var(--ai-accent);
  color: #fff; border-color: transparent;
}

/* Thinking dots */
.copilot-thinking {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(139,92,246,0.1);
  border-radius: 16px; border-bottom-left-radius: 4px;
  width: fit-content;
}
.copilot-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ai-accent);
  animation: copilot-bounce 1.2s ease-in-out infinite;
}
.copilot-thinking span:nth-child(2) { animation-delay: 0.18s; }
.copilot-thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes copilot-bounce {
  0%,80%,100% { transform: translateY(0); opacity: 0.4; }
  40%          { transform: translateY(-5px); opacity: 1; }
}

/* Suggestions — wrap into rows, no horizontal scroll */
.copilot-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 12px 4px;
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.copilot-suggestion {
  padding: 6px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(255,255,255,0.85); color: var(--ai-accent);
  cursor: pointer; text-align: left; line-height: 1.3;
  -webkit-tap-highlight-color: transparent; transition: all 0.15s;
  max-width: 100%;
}
.copilot-suggestion:hover { background: rgba(139,92,246,0.08); }
.copilot-suggestion.urgent {
  border-color: rgba(139,92,246,0.5);
  background: rgba(139,92,246,0.08);
  font-weight: 600;
}

/* Input — keyboard-safe on iOS */
.copilot-input-wrap {
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(139,92,246,0.08);
  display: flex; gap: 8px; align-items: flex-end;
  flex-shrink: 0;
  background: rgba(250,249,255,0.99);
  position: relative; z-index: 2;
}
.copilot-input {
  flex: 1; border: 1.5px solid rgba(139,92,246,0.2);
  border-radius: 20px; padding: 9px 14px;
  font-size: 16px; /* 16px prevents iOS auto-zoom */
  font-family: inherit; background: rgba(255,255,255,0.92);
  color: #1a0a2e; resize: none; outline: none;
  max-height: 90px; line-height: 1.4;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.copilot-input:focus { border-color: var(--ai-accent); }
.copilot-input.thinking {
  border-color: var(--ai-accent);
  animation: copilot-input-pulse 1.4s ease-in-out infinite;
}
@keyframes copilot-input-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); border-color: rgba(139,92,246,.4); }
  50% { box-shadow: 0 0 0 4px rgba(139,92,246,.2); border-color: var(--ai-accent); }
}
.copilot-input-wrap.thinking .copilot-send {
  animation: copilot-input-pulse 1.4s ease-in-out infinite;
}
@keyframes copilot-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}
.copilot-input::placeholder { color: #bbb; }
.copilot-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ai-accent);
  border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.copilot-send:disabled { opacity: 0.35; }
.copilot-send:not(:disabled):active { transform: scale(0.92); }

/* Backdrop */
.copilot-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(10,5,20,0.35); z-index: 789;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* Show backdrop on phone and iPad (drawer mode) — not on wide desktop inline */
.copilot-backdrop.visible { display: block; }
@media (min-width: 1100px) {
  .copilot-backdrop { display: none !important; }
}

/* Suppress the iOS keyboard accessory bar height offset */
@media (max-width: 1024px) {
  .overlay { padding-bottom: env(safe-area-inset-bottom, 20px); }
}

/* ── UNREAD INDICATOR ─────────────────────────────────────── */
.email-item.unread .email-from::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.email-item.unread { font-weight: 600; }
.email-item.unread .email-subj { color: var(--t1); font-weight: 600; }

/* ── SWIPE ACTIONS ────────────────────────────────────────── */
.email-item {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  transition: transform 0.2s, background 0.15s, border-color 0.15s;
  will-change: transform;
}
.email-item.swiping { transition: none; }
.swipe-hint {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 16px;
  font-size: 12px; font-weight: 700;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s;
  gap: 6px;
}
.swipe-hint.left  { right: 0; background: var(--green);   color: #fff; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.swipe-hint.right { left: 0;  background: rgba(139,92,246,.15); color: var(--ai-accent); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.email-item.swipe-left  .swipe-hint.left  { opacity: 1; }
.email-item.swipe-right .swipe-hint.right { opacity: 1; }

/* ── SORT BAR ─────────────────────────────────────────────── */
.sort-bar {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
}

/* ── KEYBOARD ACCESSORY BAR ───────────────────────────────── */
/* Prevent iOS keyboard accessory bar from resizing layout */
@supports (height: 1dvh) {
  .copilot-input-wrap,
  .copilot-panel {
    /* Use small viewport height which excludes the accessory bar */
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* When hardware keyboard + accessory bar: phone only */
@media (hover: hover) and (max-width: 767px) {
  .copilot-panel { bottom: 0 !important; }
}

/* ── SCROLL FIX: Cards and containers inside right-body ──── */
.right-body > * { flex-shrink: 0; }
.right-body .card { overflow: visible; }

/* Prevent any child from breaking the scroll container */
.right-body > div,
.right-body > form,
.right-body > section { max-width: 100%; box-sizing: border-box; }

/* ── DRAG TO REORDER ──────────────────────────────────────── */
.drag-handle { opacity: 0; transition: opacity 0.15s; }
.issue-item:hover .drag-handle,
.issue-item.selected .drag-handle { opacity: 1; }
.issue-item.drag-over {
  border: 2px dashed var(--ai-accent) !important;
  background: rgba(139,92,246,.06) !important;
}
.issue-item[draggable="true"] { cursor: default; }
/* Touch — always show handle */
@media (hover: none) {
  .drag-handle { opacity: 0.4; }
}

/* ── TRIAGE SHEET ─────────────────────────────────────────── */
.triage-overlay-enter {
  animation: triage-in 0.3s cubic-bezier(0.32,0.72,0,1);
}
@keyframes triage-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SKELETON LOADING ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.06) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-wrap { display: flex; flex-direction: column; gap: 0; }

/* ── SEND BUTTON THINKING SPIN ────────────────────────────── */
.copilot-send.thinking {
  animation: send-btn-pulse 1s ease-in-out infinite;
  background: var(--ai-accent);
  background-size: 200% 200%;
  animation: send-spin 1.2s linear infinite;
}
@keyframes send-spin {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}

/* ── COPILOT PANEL RESPONSIVE ─────────────────────────────── */


/* ── COPILOT PANEL — base transition ─────────────────────── */
.copilot-panel {
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1) !important;
}

/* ── PHONE: bottom sheet ──────────────────────────────────── */
@media (max-width: 767px) {
  .copilot-panel {
    position: fixed !important;
    bottom: 0; left: 0; right: 0; top: auto;
    transform: translateY(110%);
    border-radius: 20px 20px 0 0 !important;
    z-index: 850;
  }
  .copilot-panel.visible { transform: translateY(0) !important; }
}

/* ── IPAD + DESKTOP ≥768px: inline column ────────────────── */
@media (min-width: 768px) {
  .copilot-panel {
    /* Hidden off-screen when not inline */
    position: fixed !important;
    transform: translateX(110%);
    pointer-events: none;
  }
  .copilot-panel.inline {
    position: relative !important;
    transform: none !important;
    pointer-events: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
  }
  /* iPad: fixed width since sidebar is hidden */
  @media (max-width: 1099px) {
    .copilot-panel.inline { width: clamp(300px, 42vw, 420px); }
  }
  /* Desktop: 3 columns */
  @media (min-width: 1100px) {
    .copilot-panel.inline { width: clamp(280px, 28vw, 380px); }
  }
}

/* ── PRINT: Issue detail ──────────────────────────────────── */
@media print {
  .nav, .stats, .sidebar, .copilot-panel, .copilot-fab,
  .copilot-backdrop, .btn, .tab-bar, .sidebar-tools,
  .right-hdr .right-tabs, .status-menu,
  .compose-wrap, .right-tab { display: none !important; }

  .main { padding: 0 !important; gap: 0 !important; }
  .right {
    border: none !important; box-shadow: none !important;
    background: #fff !important; width: 100% !important;
  }
  .right-body { overflow: visible !important; }
  .right-hdr { border-bottom: 2px solid #333 !important; padding-bottom: 8px !important; margin-bottom: 12px !important; }
  .card { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
  .chip { border: 1px solid #ccc !important; background: #f5f5f5 !important; }
  body { background: #fff !important; }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   BETA UI — applied app-wide via the .beta-ui class on #app (Menu → Beta:
   New Design). Purely a visual theme layer on top of the existing markup —
   no structural/JS changes needed per-screen, so dialogs (Compose, Summary,
   Contacts, etc.) all pick this up automatically since they're appended
   into the same #app root.
   ══════════════════════════════════════════════════════════════════════════ */
.beta-ui .nav {
  background: transparent;
  border-bottom: none;
}
.nav-wrap { background: #fff; flex-shrink: 0; }
.beta-ui .nav-wrap {
  background: var(--purple);
  /* Rounded bottom edge gives the merged bar back the "floating card" feel
     the old standalone .home-header had, instead of it reading as a thin
     flat strip now that it's been pulled up to double as the top nav. */
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.nav-context { padding: 8px 24px 22px; }
.nav-context-title { font-size: 22px; font-weight: 800; color: var(--t1); }
.nav-context-sub { font-size: 13px; color: rgba(28,28,26,.75); margin-top: 3px; }
.beta-ui .nav-btn { color: rgba(28,28,26,.75); }
@media (hover: hover) { .beta-ui .nav-btn:hover { background: rgba(0,0,0,.08); color: var(--t1); } }
.beta-ui .nav-btn.active { background: rgba(0,0,0,.08); color: var(--t1); }
/* Removed: a stray `.beta-ui .nav select { background: rgba(255,255,255,.5) }`
   rule used to double up with .org-sel's own identical background below,
   layering two translucent whites on top of each other and making the
   <select> itself look like a separate, more-opaque box nested inside the
   org pill. The org-sel wrapper below already owns this background. */
.beta-ui .org-sel {
  background: rgba(255,255,255,.5); color: var(--t1); border: 1px solid rgba(0,0,0,.15);
}
.beta-ui .org-sel select { color: var(--t1); background: none; }
.beta-ui .org-sel select option { color: var(--t1); }
.beta-ui .nav-brand i { color: var(--t1); }

.beta-ui .sidebar { background: #f4f5f9; }
.beta-ui .search-box { border-radius: 14px; border-color: var(--border2); }
.beta-ui .section-hdr {
  color: var(--purple); font-weight: 800; border-left: 3px solid var(--purple);
  padding-left: 8px; margin-left: -8px;
}
.beta-ui .overview-icon-btn { border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.beta-ui .btn-primary {
  background: var(--purple);
  border: none; border-radius: 12px; box-shadow: 0 3px 10px rgba(5,150,105,.25);
}
.beta-ui .issue-item {
  border-radius: 16px; border: 1px solid var(--border2); margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03); transition: box-shadow .15s, transform .15s;
}
.beta-ui .issue-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-1px); }
.beta-ui .issue-item.selected {
  border: 2px solid var(--purple); background: var(--purple-l);
  box-shadow: 0 4px 16px rgba(74,222,128,.2);
}
.beta-ui .email-item { border-radius: 14px; border: 1px solid var(--border2); margin-bottom: 6px; }

.beta-ui .right-hdr {
  background: var(--purple-l);
  border-radius: 0 0 20px 20px; border-bottom: 2px solid rgba(5,150,105,.12);
}
.beta-ui .right-tabs { gap: 4px; padding: 0 4px; }
.beta-ui .right-tab {
  border-radius: 10px 10px 0 0; font-weight: 700;
}
.beta-ui .right-tab.active {
  color: var(--purple); border-bottom-color: var(--purple); font-weight: 800;
  background: rgba(255,255,255,.6);
}
.beta-ui .chip { border-radius: 20px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.beta-ui .card {
  border-radius: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.04); border-color: var(--border);
}
.beta-ui .card-hdr { font-weight: 800; }

.beta-ui .modal {
  border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.beta-ui .modal-hdr {
  background: var(--purple);
  color: var(--t1); border-bottom: none; padding: 16px 20px; font-weight: 800;
}
.beta-ui .modal-hdr button { color: var(--t1); }
.beta-ui .modal-hdr button:hover { background: rgba(0,0,0,.08); }

.beta-ui .btn { border-radius: 10px; }
.beta-ui .btn-sm { border-radius: 8px; }
.beta-ui .status-menu { border-radius: 16px; overflow: hidden; }
.beta-ui .status-row:hover { background: var(--purple-l); }

.beta-ui .copilot-panel { border-radius: 22px 0 0 22px; }
.beta-ui .copilot-messages .copilot-bubble.ai {
  background: var(--purple-l);
  border-radius: 16px;
}
.beta-ui .copilot-suggestion { border-radius: 20px; }