/* Mekari Cowork — Pixel-flavored tokens */
:root {
  /* Brand — Mekari blue family */
  --mk-blue-50: #eef3ff;
  --mk-blue-100: #dbe5ff;
  --mk-blue-200: #b9ccff;
  --mk-blue-300: #8aaaff;
  --mk-blue-400: #5481fb;
  --mk-blue-500: #2b57dc;  /* primary */
  --mk-blue-600: #1f43b8;
  --mk-blue-700: #183792;
  --mk-blue-800: #142d75;
  --mk-blue-900: #0f235a;

  /* Neutrals — slightly cool */
  --mk-n-0:  #ffffff;
  --mk-n-25: #fbfcfd;
  --mk-n-50: #f5f7fa;
  --mk-n-100: #eef1f5;
  --mk-n-150: #e3e8ef;
  --mk-n-200: #d6dde6;
  --mk-n-300: #b9c2cf;
  --mk-n-400: #8e98a8;
  --mk-n-500: #6b7585;
  --mk-n-600: #4d5666;
  --mk-n-700: #343c4a;
  --mk-n-800: #1f2530;
  --mk-n-900: #11151c;
  --mk-n-950: #0a0d12;

  /* Status */
  --mk-success: #1a8754;
  --mk-success-bg: #e6f4ec;
  --mk-warning: #c97a0c;
  --mk-warning-bg: #fdf3e2;
  --mk-danger:  #c8312b;
  --mk-danger-bg: #fbe9e8;

  /* Per-agent accents */
  --ag-ap: #4f46e5;     /* indigo */
  --ag-ap-bg: #eeecfb;
  --ag-ar: #0d9488;     /* teal */
  --ag-ar-bg: #defaf3;
  --ag-cash: #b45309;   /* amber */
  --ag-cash-bg: #fdf1d6;
  --ag-rep: #9333ea;    /* violet */
  --ag-rep-bg: #f3e8ff;
  --ag-studio: #db2777; /* pink — Reporting Studio */
  --ag-studio-bg: #fce7f3;
  --ag-airene: #2b57dc; /* mekari blue */
  --ag-airene-bg: #eef3ff;
  --ag-payroll: #047857; /* emerald — Talenta payroll */
  --ag-payroll-bg: #d1fae5;

  /* Semantic — light */
  --bg: var(--mk-n-50);
  --surface: var(--mk-n-0);
  --surface-2: var(--mk-n-25);
  --surface-3: var(--mk-n-100);
  --border: var(--mk-n-150);
  --border-strong: var(--mk-n-200);
  --text: var(--mk-n-800);
  --text-secondary: var(--mk-n-600);
  --text-tertiary: var(--mk-n-500);
  --text-inverse: var(--mk-n-0);
  --primary: var(--mk-blue-500);
  --primary-hover: var(--mk-blue-600);
  --primary-soft: var(--mk-blue-50);

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17, 21, 28, 0.04), 0 0 0 1px rgba(17, 21, 28, 0.04);
  --shadow-md: 0 2px 6px rgba(17, 21, 28, 0.06), 0 1px 2px rgba(17, 21, 28, 0.04);
  --shadow-lg: 0 12px 40px rgba(17, 21, 28, 0.10), 0 2px 6px rgba(17, 21, 28, 0.06);

  /* Density */
  --row-h: 36px;
  --pad-y: 10px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[data-density="compact"] {
  --row-h: 30px;
  --pad-y: 6px;
  --s-3: 10px;
  --s-4: 12px;
}

[data-theme="dark"] {
  --bg: #0c0f15;
  --surface: #131822;
  --surface-2: #181e2a;
  --surface-3: #1f2737;
  --border: #232b3b;
  --border-strong: #2c3650;
  --text: #e7ecf4;
  --text-secondary: #adb6c6;
  --text-tertiary: #7c8597;
  --text-inverse: #0a0d12;
  --primary: #6f8fff;
  --primary-hover: #8aa4ff;
  --primary-soft: #1a2342;

  --mk-success-bg: #0f2a1c;
  --mk-warning-bg: #2c2110;
  --mk-danger-bg: #2c1715;

  --ag-ap-bg: #1d1c3b;
  --ag-ar-bg: #0a2a26;
  --ag-cash-bg: #2c2010;
  --ag-rep-bg: #2a1740;
  --ag-studio-bg: #2a1424;
  --ag-airene-bg: #16223e;
  --ag-payroll-bg: #0a2a1f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-tertiary); }

/* App shell */
.app {
  display: grid;
  grid-template-columns: var(--rail-w, 260px) 1fr;
  height: 100vh;
  background: var(--bg);
}
/* Animate width transitions only when not actively dragging — otherwise
   the easing fights every mousemove and feels laggy. */
.app:not([data-resizing="true"]) {
  transition: grid-template-columns .25s ease;
}
/* During a drag, the App component sets --rail-w-drag on :root each
   mousemove. Use it directly (no React re-render) for snappy feedback. */
.app[data-resizing="true"] {
  grid-template-columns: var(--rail-w-drag, var(--rail-w, 260px)) 1fr;
}
.app[data-collapsed="true"] { --rail-w: 52px; }

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .app[data-mobile-rail="true"] .rail {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: 80%; max-width: 320px; box-shadow: var(--shadow-lg);
  }
}

/* --- Sidebar / Rail --- */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-width: 0;
}
.rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
  height: 48px;
}
.rail-logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--mk-blue-500), var(--mk-blue-700));
  display: grid; place-items: center; color: white; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.2);
}
.rail-title { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.rail-title small { display: block; color: var(--text-tertiary); font-size: 10.5px; font-weight: 500; }
.rail-collapse {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: none; color: var(--text-tertiary);
  display: grid; place-items: center;
}
.rail-collapse:hover { background: var(--surface-3); color: var(--text); }

.rail-section {
  padding: 2px 6px;
  display: flex; flex-direction: column; gap: 1px;
}
/* No divider between sections — Claude-style clean rail. The rail-label
   provides enough visual separation. */
.rail-label {
  font-size: 10.5px; font-weight: 600; color: var(--text-tertiary);
  padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rail-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  text-decoration: none;
  border: none; background: transparent; width: 100%; text-align: left;
  cursor: pointer;
}
.rail-item:hover { background: var(--surface-3); color: var(--text); }
.rail-item.active { background: var(--primary-soft); color: var(--primary); }
.rail-item .ico { width: 16px; height: 16px; flex-shrink: 0; }
.rail-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item .badge {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-tertiary); font-weight: 600;
}
.rail-item.active .badge { background: white; color: var(--primary); }

[data-collapsed="true"] .rail-title,
[data-collapsed="true"] .rail-label,
[data-collapsed="true"] .rail-item .label,
[data-collapsed="true"] .rail-item .badge,
[data-collapsed="true"] .rail-foot-meta,
[data-collapsed="true"] .rail-foot-chevron,
[data-collapsed="true"] .rail-conv { display: none; }

/* Slim collapsed mode — Slack/Linear/Notion-style icon column.
   Items are square hit areas with the icon centered; no labels,
   no badges, no chevrons. The toggle still lives at the top. */
[data-collapsed="true"] .rail-section { padding: 4px 6px; }
[data-collapsed="true"] .rail-item {
  justify-content: center;
  padding: 8px 0;
  width: 40px;
  height: 36px;
  margin: 0 auto;
}
[data-collapsed="true"] .rail-head {
  padding: 8px 0;
  justify-content: center;
  height: 44px;
}
[data-collapsed="true"] .rail-logo { display: none; }
[data-collapsed="true"] .rail-collapse { margin-left: 0; }

/* Drag handle on the right edge of the rail. Wide hit-area, narrow visual. */
.rail { position: relative; }
.rail-resize {
  position: absolute;
  top: 0; right: -3px;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background .12s ease;
}
.rail-resize:hover,
.app[data-resizing="true"] .rail-resize {
  background: linear-gradient(to right, transparent 1px, var(--primary) 2px, var(--primary) 4px, transparent 5px);
}
[data-collapsed="true"] .rail-resize { display: none; }
.app[data-resizing="true"] { cursor: col-resize; user-select: none; }
.app[data-resizing="true"] * { user-select: none !important; }

.rail-conv {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow-y: auto; padding-bottom: 8px;
}
.rail-conv .rail-item { padding: 7px 10px; }
.rail-conv .rail-item .agent-dot {
  width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
}

.rail-foot {
  margin-top: auto;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  border-radius: 10px;
  margin: 4px 8px;
  position: relative;
}
.rail-foot:hover { background: var(--surface-3); }
.rail-foot.menu-open { background: var(--surface-3); }
.rail-foot-chevron {
  color: var(--text-tertiary); flex-shrink: 0;
}

/* Collapsed-mode rail-foot — mirror the rail-item collapsed shape so
   the user-pill avatar sits on the same vertical axis as the icons
   above it. Without this, the rail-foot keeps its expanded
   `padding: 10px 12px` + `margin: 4px 8px` and the avatar visibly
   floats off to one side of the icon column.
   `margin-top: auto` keeps the avatar pushed to the bottom of the
   rail in collapsed mode — the conversations section that does
   this in expanded mode (`flex: 1`) is hidden when collapsed, so
   without auto-margin the avatar would stack right under the last
   nav icon at the top of the rail. */
[data-collapsed="true"] .rail-foot {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 4px auto;
  margin-top: auto;
  margin-bottom: 8px;
}
[data-collapsed="true"] .rail-foot .avatar {
  /* Slightly smaller in the slim rail so the avatar doesn't bulge
     past the icon column above it. */
  width: 28px; height: 28px; font-size: 11px;
}

/* User menu popup attached to the bottom user pill */
.user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px; right: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px;
  z-index: 30;
  display: flex; flex-direction: column; gap: 1px;
}
.user-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.user-menu .menu-item:hover { background: var(--surface-3); }
.user-menu .menu-item.danger { color: var(--mk-danger); }
.user-menu .menu-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}

/* Hover-revealed actions on conversation rows */
.rail-conv .rail-item .conv-actions {
  display: none;
  flex-shrink: 0;
}
.rail-conv .rail-item:hover .conv-actions,
.rail-conv .rail-item.menu-open .conv-actions { display: inline-flex; }
.rail-conv .rail-item:hover .badge,
.rail-conv .rail-item.menu-open .badge { display: none; }
.conv-actions button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: 4px;
}
.conv-actions button:hover { background: var(--surface-3); color: var(--text); }
.conv-rename-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--primary);
  background: var(--surface);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit; font-size: 12.5px;
  color: var(--text); outline: none;
}

/* Conversation context menu (rename + archive) */
.conv-menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px; z-index: 40;
  min-width: 160px;
}
.conv-menu .menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.conv-menu .menu-item:hover { background: var(--surface-3); }
.conv-menu .menu-item.danger { color: var(--mk-danger); }
.avatar {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  color: white;
}
.rail-foot-meta { flex: 1; min-width: 0; }
.rail-foot-meta .nm { font-size: 13px; font-weight: 600; }
.rail-foot-meta .co { font-size: 11px; color: var(--text-tertiary); }

/* --- Top bar --- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 56px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.topbar .ttl { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.topbar .crumb { color: var(--text-tertiary); font-size: 13px; }
.topbar .spacer { flex: 1; }
.tabs { display: flex; gap: 2px; }
.tab {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { background: var(--surface-3); color: var(--text); }
.tab.active { background: var(--primary-soft); color: var(--primary); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--primary); color: white; border-color: transparent;
  box-shadow: 0 1px 2px rgba(43, 87, 220, .25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger {
  background: var(--mk-danger); color: white; border-color: transparent;
}
.btn.danger:hover { filter: brightness(.94); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
.btn.icon { padding: 7px; }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.pill.success { background: var(--mk-success-bg); color: var(--mk-success); border-color: transparent; }
.pill.warning { background: var(--mk-warning-bg); color: var(--mk-warning); border-color: transparent; }
.pill.danger  { background: var(--mk-danger-bg); color: var(--mk-danger); border-color: transparent; }
.pill.primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* Headings */
h1,h2,h3,h4 { margin: 0; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
.muted { color: var(--text-tertiary); }
.kbd {
  display: inline-flex; align-items: center; padding: 1px 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); background: var(--surface);
}

/* Agent glyph */
.agent-glyph {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: -.02em;
  flex-shrink: 0;
  color: white;
}
.agent-glyph.lg { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
.agent-glyph.sm { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }

/* Agent chip (token style) */
.agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.agent-chip .agent-glyph.sm { width: 18px; height: 18px; border-radius: 999px; font-size: 9px; }

/* utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.flex-1 { flex: 1; min-width: 0; }
.hide-sm { }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .26s ease both; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--border) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* Mono number */
.num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ─── Users & agent grants table ───────────────────────────────────────── */
.grants-table { /* the card wrapping the rows */ }

.grants-row {
  display: grid;
  /* user · 6 toggle columns · fixed actions column. Pinning the last
     column to a fixed width (instead of `auto`) ensures the toggle
     columns are the same width in BOTH the header and the data row —
     `auto` gave us 0px in the header and ~110px in the row, which
     skewed the toggles off their column labels. The 6 specialist
     agents are AP, AR, Cash, Reporting, Studio, Payroll — see
     pages.jsx `shortCodes`. Update both lists when adding agents. */
  grid-template-columns:
    minmax(200px, 1.4fr) repeat(6, minmax(70px, 1fr)) 116px;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.grants-row:last-child { border-bottom: none; }

.grants-head {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: 11px;
  padding-bottom: 11px;
}

.grants-col-header {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

.grants-toggle-cell {
  display: flex; align-items: center; justify-content: center;
}

/* ─── Documents page ───────────────────────────────────────────────────── */
.docs-row {
  display: grid;
  grid-template-columns: minmax(260px, 2.4fr) 110px 90px 120px 120px;
  align-items: center;
  gap: 12px;
  /* 16px horizontal padding matches the inbox + memory card rows so a
     user comparing the three pages doesn't see a 2px right-shift on
     Documents. The vertical 12px is the conventional row height the
     other list surfaces use. */
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.docs-row:last-child { border-bottom: none; }
.docs-head {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (max-width: 720px) {
  .docs-row { grid-template-columns: 1fr 110px; }
}

/* ─── Account switcher in the topbar ───────────────────────────────────── */
.account-switcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit; cursor: pointer;
  color: var(--text);
  max-width: 360px;
}
.account-switcher:hover { background: var(--surface-3); }
.account-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.account-label {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  line-height: 1.2;
}
.account-label strong { font-weight: 600; font-size: 13.5px; }
.account-label small { font-size: 11px; }

.account-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px;
  z-index: 30;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 280px;
}
.account-menu .menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.account-menu .menu-item:hover { background: var(--surface-3); }
.account-menu .menu-item.active { background: var(--primary-soft); color: var(--primary); }
.account-menu .menu-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}

/* ─── Markdown body in agent bubbles ───────────────────────────────────── */
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child  { margin-bottom: 0; }
.md-body p { margin: 0 0 8px 0; }
.md-body strong { font-weight: 600; }
.md-body em { font-style: italic; }
.md-body ul, .md-body ol { margin: 6px 0 8px 0; padding-left: 22px; }
.md-body li { margin: 2px 0; }
.md-body li > p { margin: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  font-weight: 600; margin: 14px 0 6px 0; line-height: 1.3;
}
.md-body h1 { font-size: 17px; }
.md-body h2 { font-size: 15px; }
.md-body h3 { font-size: 14px; }
.md-body h4 { font-size: 13px; }
.md-body code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px;
}
.md-body pre {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  overflow-x: auto; margin: 8px 0;
}
.md-body pre code { background: transparent; padding: 0; border-radius: 0; }
.md-body blockquote {
  margin: 6px 0 10px 0; padding: 4px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
.md-body a { color: var(--primary); text-decoration: underline; }
.md-body a:hover { color: var(--mk-blue-700); }
.md-body hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 12px 0;
}
.md-body table {
  border-collapse: collapse; margin: 8px 0; font-size: 13px;
}
.md-body th, .md-body td {
  border: 1px solid var(--border);
  padding: 6px 10px; text-align: left;
}
.md-body th { background: var(--surface-2); font-weight: 600; }