/* =====================================================================
   CAMILLE — shared styles
   Brand: Montserrat · primary blue #1570EF · white sidebar · light canvas
   (color scheme inherited from dashboard-mockup.html)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --brand: #1570EF;
  --brand-600: #1570EF;
  --brand-500: #2E90FA;
  --brand-700: #175CD3;
  --brand-50: #F0F8FF;
  --brand-100: #E3F0FF;
  --emerald: #10B981;
  --emerald-50: #E8F7EE;
  --amber: #F59E0B;
  --amber-50: #FDF4E3;
  --rose: #F43F5E;
  --rose-50: #FEECEE;

  --ink: #0F172A;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --line: #E6EAF0;
  --canvas: #F4F7FB;
  --card: #ffffff;
  /* Neutral surfaces above the card: chip fills, hovers, inset rows. Pages used
     to hardcode #eef1f6 / #f6f8fb, which stayed light in dark mode. */
  --tint: #eef1f6;
  --tint-soft: #f6f8fb;
  --violet-50: #faf5ff;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -14px rgba(15,23,42,.12);
  --sb-w: 280px;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --brand-50: #27476B;
  /* Accent text colour, not a fill: it sits on --brand-50, so it has to invert
     with the theme (it was navy-on-navy, ratio 1.6). */
  --brand-700: #A9CBFF;
  --brand-100: #33587F;
  --emerald-50: #234534;
  --amber-50: #48391D;
  --rose-50: #4A2833;
  --ink: #F7FAFD;
  --slate-700: #E4EAF2;
  --slate-600: #CBD5E3;
  --slate-500: #ABB8C9;
  --slate-400: #8D9BAE;
  --slate-300: #5F6E82;
  --line: #46546A;
  --canvas: #1B2430;
  --card: #2A3648;
  --tint: #3D4E68;
  --tint-soft: #333F53;
  --violet-50: #3B2E52;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 55% 45% at 14% 10%, rgba(46,144,250,.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 95%, rgba(46,144,250,.06), transparent 60%),
    var(--canvas);
}
/* flip hardcoded white surfaces */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar-back,
[data-theme="dark"] .topbar-burger,
[data-theme="dark"] .topbar-help,
[data-theme="dark"] .topbar-tool,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] select.input,
[data-theme="dark"] .side-toggle,
[data-theme="dark"] .composer-box,
[data-theme="dark"] .sess-search,
[data-theme="dark"] .skill,
[data-theme="dark"] .model-pick,
[data-theme="dark"] .mp-drop,
[data-theme="dark"] .lang-btn,
[data-theme="dark"] .lang-menu,
[data-theme="dark"] .hermes-gear,
[data-theme="dark"] .hermes-pop,
[data-theme="dark"] .clip-menu,
[data-theme="dark"] .team-msg .bubble,
[data-theme="dark"] .acct-menu { background: var(--card); }
[data-theme="dark"] .chat-switch,
[data-theme="dark"] .tm-tag { background: #3D4E68; }
[data-theme="dark"] .cs-tab.on { background: var(--card); color: var(--ink); }
[data-theme="dark"] .topbar { background: rgba(42,54,72,.9); }
[data-theme="dark"] .brand-logo { box-shadow: 0 6px 16px rgba(0,0,0,.5); }
[data-theme="dark"] .dt-main { color: var(--ink) !important; }
[data-theme="dark"] .acct-logout:hover { background: #2E1820; }
[data-theme="dark"] .toggle { background: #526176; }
/* common page surfaces (beat single-class page rules via attr+class specificity) */
[data-theme="dark"] .panel,
[data-theme="dark"] .conn,
[data-theme="dark"] .sk-card,
[data-theme="dark"] .ustat,
[data-theme="dark"] .org-stat,
[data-theme="dark"] .auto-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .plan-col,
[data-theme="dark"] .plan-ev,
[data-theme="dark"] .step,
[data-theme="dark"] .pa-config-card { background: var(--card); }
[data-theme="dark"] .sk-card.off { background: #232E3F; }
[data-theme="dark"] .plan-col.weekend { background: #222C3B; }
[data-theme="dark"] .seg,
[data-theme="dark"] .cost-tabs,
[data-theme="dark"] .usum-card,
[data-theme="dark"] .insight,
[data-theme="dark"] .flow,
[data-theme="dark"] .usage-intro,
[data-theme="dark"] .pa-banner { background: rgba(255,255,255,.07); }
[data-theme="dark"] .seg-opt.on,
[data-theme="dark"] .cost-tab.on { background: var(--card); }
[data-theme="dark"] img.av-cell-x { filter: none; }
/* Accent text baked as literals: too dark to read on their dark tints. */
[data-theme="dark"] .opt-tag.mgr { color: #FDBA8C; }
[data-theme="dark"] .photo-av { color: #C4B5FD; border-color: #8B7FF8; }
[data-theme="dark"] .ag-r { color: #C4B5FD; }
[data-theme="dark"] .life-del { color: #FDA4AF; border-color: #7F3546; }
[data-theme="dark"] .del-link,
[data-theme="dark"] .logout-btn,
[data-theme="dark"] .btn-danger-text { color: #FDA4AF; }
[data-theme="dark"] .opt-tag.green,
[data-theme="dark"] .opt-price { color: #6EE7B7; }
/* chat readability: bubbles clearly lighter than canvas, light text */
[data-theme="dark"] .msg-ai .bubble { background: #34425A; border-color: #52627C; color: var(--ink); }
[data-theme="dark"] .msg-user .bubble { background: #3C567E; color: var(--ink); }
[data-theme="dark"] .msg-user .who { background: #47586F; color: var(--ink); }
[data-theme="dark"] .sessions { background: rgba(255,255,255,.05); }
[data-theme="dark"] .skills { background: rgba(255,255,255,.05); }
[data-theme="dark"] .sess-item:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .team-av { color: var(--ink); }
[data-theme="dark"] #ai-create-drop { background: var(--card) !important; }
/* night mode: flip remaining hardcoded-white chips & controls */
[data-theme="dark"] .qa-chip,
[data-theme="dark"] .ct-plus,
[data-theme="dark"] .ct-pill,
[data-theme="dark"] .ct-mic,
[data-theme="dark"] .ct-drop,
[data-theme="dark"] .plan-select,
[data-theme="dark"] .plan-nav button,
[data-theme="dark"] .tcard,
[data-theme="dark"] .rsum-pill,
[data-theme="dark"] .search-box,
[data-theme="dark"] .tpl,
[data-theme="dark"] .agent-chip,
[data-theme="dark"] .sk-enabled { background: var(--card); }
[data-theme="dark"] .api-reveal .api-mono { background: #232E3F; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(ellipse 55% 45% at 14% 10%, rgba(132,202,255,.14), transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 95%, rgba(46,144,250,.08), transparent 60%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) 1fr; height: 100vh; overflow: hidden; }
@media (min-width: 1081px) {
  .app.sb-collapsed { grid-template-columns: 1fr; }
  .app.sb-collapsed > .sidebar { display: none; }
}
.main-wrap { min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* top bar inside content */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 32px 14px;
}
/* The dynamic header supplies its own padding when used standalone. */
.topbar.dyn-head { background: rgba(255,255,255,.92); }
.topbar-title { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.topbar-title .tb-ic { color: var(--brand-700); display: grid; place-items: center; }
/* Project sub-pages name their project ahead of the page title, so the two
   never get confused when several projects are open. */
.topbar-title .tb-proj { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--slate-500); background: var(--tint); border-radius: 8px; padding: 4px 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-back {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--slate-600); display: grid; place-items: center; cursor: pointer;
}
.topbar-back:hover { background: var(--brand-50); color: var(--brand-700); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--slate-400); }
.topbar-right .moon { cursor: pointer; border: 0; background: none; padding: 0; color: inherit; display: grid; place-items: center; }
.topbar-right .moon:hover { color: var(--slate-600); }

/* ---------- Dynamic page header (SAP Fiori shape) ----------
   Breadcrumb, then title + info chip + actions on one line, then the summary.
   One block, so the page is named once. */
.dyn-head { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 32px 14px; }
.dh-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--slate-500); min-height: 20px; }
.dh-crumb a { color: var(--brand-700); text-decoration: none; }
.dh-crumb a:hover { text-decoration: underline; }
.dh-crumb .sep { color: var(--slate-300); }
.dh-crumb .cur { color: var(--slate-500); }
.dh-burger { display: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--slate-600); place-items: center; cursor: pointer; margin-right: 4px; }
.dh-burger:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100, #dbe2fe); }
/* Outside any media query on purpose: the rail's own fold button disappears
   with the rail, so this is the counterpart that brings it back. */
.app.sb-collapsed .dh-burger { display: grid; }
.dh-row { display: flex; align-items: flex-start; gap: 16px; margin-top: 4px; }
.dh-titlewrap { flex: 1 1 auto; min-width: 0; }
.dh-titleline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dh-head h1, .dyn-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.dyn-head p { margin: 4px 0 0; color: var(--slate-500); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.dyn-head p:empty { display: none; }
.dyn-head p.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 900px; }
.dh-more { border: 0; background: none; padding: 0; margin-top: 2px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand-700); cursor: pointer; }
.dh-more:hover { text-decoration: underline; }
.dh-info { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--brand-50); color: var(--brand-700); border: 0; border-radius: 50%; padding: 0; cursor: pointer; }
.dh-info svg { display: block; }
.dh-info:hover { background: var(--brand-100, #dbe2fe); }
.dh-actions { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .dyn-head { padding: 10px 18px 12px; }
  .dh-row { flex-wrap: wrap; }
}

/* Retained so pages still calling renderPageHead keep working. */
.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; flex-wrap: nowrap; }
.page-head-text { flex: 1 1 auto; min-width: 0; }
.page-head h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.page-head p { margin: 3px 0 0; color: var(--slate-500); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.page-head p:empty { display: none; }
.page-head-actions { flex: none; display: flex; align-items: center; gap: 10px; }

:root { --gap-top: 20px; --gap-band: 16px; }
.main { padding: var(--gap-top) 32px 40px; max-width: 1640px; width: 100%; flex: 1; overflow-y: auto; }
/* Emptied hosts and hidden placeholders must not open a gap of their own. */
.main > div:empty { display: none; }
.main > span[hidden], [hidden] { display: none !important; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 16px 10px; overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #e7ebf1; border-radius: 99px; }
.brand { display: flex; align-items: center; gap: 11px; justify-content: flex-start; padding: 2px 8px 22px; }
.brand-logo { width: 40px; height: 40px; border-radius: 12px; flex: none; overflow: hidden; box-shadow: 0 6px 16px rgba(37,99,235,.28); display: grid; place-items: center; }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-word { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.04; }
.dt-main { font-weight: 800; font-size: 21px; letter-spacing: .02em; color: var(--ink); }
.dt-sub { font-weight: 700; font-style: italic; font-size: 12.5px; color: var(--emerald); margin-top: 1px; }
.brand-word .ax { color: var(--brand-700); }
.brand-burger { color: var(--slate-400); cursor: pointer; display: grid; place-items: center; }
.sb-search { display: flex; align-items: center; gap: 9px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; margin: 0 4px 16px; }
.sb-search:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(46,144,250,.12); }
.sb-search .ss-ic { color: var(--slate-400); display: grid; place-items: center; flex: none; }
.sb-search input { border: 0; outline: 0; background: none; font-family: inherit; font-size: 14px; flex: 1; min-width: 0; color: var(--ink); }
.sb-search input::placeholder { color: var(--slate-400); }
.sb-search .ss-clear { display: none; color: var(--slate-400); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; flex: none; }
.sb-search.has-val .ss-clear { display: block; }
.sb-search .ss-clear:hover { color: var(--slate-600); }
.sb-empty { color: var(--slate-400); font-size: 13.5px; font-weight: 500; padding: 6px 14px 12px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: 10px;
  color: var(--slate-700); font-weight: 500; font-size: 14px; transition: background .15s, color .15s;
}
.nav-item .nav-ic { display: grid; place-items: center; color: var(--slate-500); flex: none; }
.nav-item:hover { background: rgba(21,112,239,.06); }
.nav-item.active { background: rgba(21,112,239,.10); color: var(--brand-700); font-weight: 700; }
.nav-item.active .nav-ic { color: var(--brand-700); }
.nav-label { flex: 1; }

.nav-section { margin-top: 16px; }
.nav-head { display: flex; align-items: baseline; gap: 8px; color: var(--slate-400); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 0 12px 6px; }
.nav-head-all { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--slate-400); text-decoration: none; }
.nav-head-all:hover { color: var(--brand-700); }
.nav-head-all.active { color: var(--brand-700); }

/* project group */
.proj { }
.proj-head {
  display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: 10px;
  color: var(--slate-700); font-weight: 600; font-size: 14px; cursor: pointer;
}
.proj-head:hover { background: rgba(21,112,239,.06); }
.proj-head .pj-ic { color: var(--slate-500); display: grid; place-items: center; }
.proj-head .pj-name { flex: 1; line-height: 1.25; }
.proj-head .pj-chev { color: var(--slate-400); transition: transform .2s; }
.proj.collapsed .pj-chev { transform: rotate(-90deg); }
.proj-sub { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 4px 14px; padding-left: 12px; border-left: 1.5px solid var(--line); overflow: hidden; }
.proj.collapsed .proj-sub { display: none; }
.sub-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 11px; border-radius: 9px;
  color: var(--slate-600); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s;
}
.sub-item .sub-ic { color: var(--slate-400); display: grid; place-items: center; flex: none; }
.sub-item:hover { background: rgba(21,112,239,.06); color: var(--brand-700); }
.sub-item.active { color: var(--brand-700); font-weight: 700; }
.sub-item.active .sub-ic { color: var(--brand-700); }

.proj-empty { color: var(--slate-400); font-size: 12.5px; font-weight: 500; line-height: 1.5; padding: 2px 14px 10px; }
.new-proj { display: flex; align-items: center; gap: 11px; padding: 10px 14px; margin-top: 6px; color: var(--slate-600); font-weight: 600; font-size: 14.5px; cursor: pointer; border-radius: 11px; }
.new-proj:hover { background: rgba(21,112,239,.06); color: var(--brand-700); }
.new-proj.active { background: rgba(21,112,239,.10); color: var(--brand-700); font-weight: 700; }
.new-proj.active .nav-ic { color: var(--brand-700); }

.sb-bottom { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Account menu (sidebar bottom) ---------- */
.acct { position: relative; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.acct-btn { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid transparent; background: none; font-family: inherit; padding: 5px 6px; border-radius: 10px; cursor: pointer; text-align: left; }
.acct-btn:hover { background: rgba(21,112,239,.06); }
.acct.open .acct-btn { background: rgba(21,112,239,.06); border-color: rgba(21,112,239,.18); }
.acct-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #fff; background: linear-gradient(135deg, #2E90FA, #6D5DF6); letter-spacing: .02em; }
/* The menu's own header still has room for the larger mark. */
.acct-av.lg { width: 38px; height: 38px; font-size: 14px; }
.acct-av.lg { width: 42px; height: 42px; font-size: 15px; }
.acct-btn-id { display: flex; align-items: baseline; min-width: 0; flex: 1; }
.acct-btn-id .acct-first { flex: 0 1 auto; }
.acct-btn-id .acct-plan-inline { margin-left: auto; padding-left: 8px; }
.acct-btn-id .acct-dot { display: none; }
.acct-name, .acct-first { font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-email { font-size: 12px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-chev { color: var(--slate-400); flex: none; transition: transform .2s; }
.acct.open .acct-chev { transform: rotate(180deg); }

.acct-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 8px; z-index: 60; }
.acct-menu-head { display: flex; align-items: center; gap: 11px; padding: 10px 8px 12px; }
.acct-id { min-width: 0; }
.acct-plan { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; margin: 0 0 8px; background: var(--brand-50); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.acct-plan-badge { background: var(--brand); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; }
.acct-menu-list { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; border-top: 1px solid var(--line); }
.acct-mi { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--slate-700); font-size: 13.5px; font-weight: 500; }
.acct-mi:hover { background: rgba(21,112,239,.06); color: var(--brand-700); }
.acct-mi-ic { display: grid; place-items: center; color: var(--slate-500); flex: none; }
.acct-mi:hover .acct-mi-ic { color: var(--brand-700); }
.acct-theme { display: flex; align-items: center; gap: 11px; padding: 4px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.acct-theme .at-seg { display: inline-flex; flex: 1; background: var(--tint); border-radius: 999px; padding: 2px; gap: 2px; }
.acct-theme .at-seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 3px 10px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--slate-500); cursor: pointer; line-height: 1.5; }
.acct-theme .at-seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.acct-menu-list button.acct-mi { width: 100%; text-align: left; border: 0; background: none; font-family: inherit; cursor: pointer; }
.acct-row { display: flex; align-items: center; gap: 4px; }
.acct-row .acct-btn { flex: 1; min-width: 0; }
.sb-ic-btn { flex: none; width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--slate-400); display: grid; place-items: center; cursor: pointer; }
.sb-ic-btn:hover { background: var(--tint); color: var(--ink); }
.sb-ic-btn svg { display: block; }
.acct-dot { color: var(--slate-300); margin: 0 5px; }
.acct-plan-inline { color: var(--slate-400); font-weight: 600; }
.acct-div { height: 1px; background: var(--line); margin: 6px 0; }

/* Nav search dialog — replaces the permanent field in the rail. */
.ns-ov { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
.ns-ov.open { display: flex; }
.ns-box { width: min(560px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 26px 60px rgba(15,23,42,.24); overflow: hidden; }
.ns-top { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--slate-400); }
.ns-top input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.ns-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.ns-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.ns-row.on, .ns-row:hover { background: var(--brand-50); color: var(--brand-700); }
.ns-grp { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--slate-400); }
.ns-none { padding: 20px; text-align: center; color: var(--slate-400); font-size: 13.5px; font-weight: 600; }

.acct-logout { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 6px; padding: 10px; border: 0; border-top: 1px solid var(--line); background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #E11D48; cursor: pointer; border-radius: 0 0 8px 8px; }
.acct-logout:hover { background: var(--rose-50); }
.acct-logout .acct-mi-ic { color: #E11D48; }

/* ---------- Page header (in-content) ---------- */
.section-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; }

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

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; transition: background .15s, transform .08s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { background: var(--card); color: var(--slate-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-50); }
/* --emerald is the chart/accent green; as a button fill under white text it
   only reaches 2.5:1, so the filled variant uses a darker green. */
.btn-emerald { background: #047857; color: #fff; }
.btn-emerald:hover { background: #036B4E; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.b-encours { background: var(--amber-50); color: #B7791F; }
.b-resolu { background: var(--emerald-50); color: #0E9F6E; }
.b-attente { background: var(--amber-50); color: #B7791F; }
.b-urgent { background: var(--rose-50); color: #E11D48; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }

/* ---------- Toggle ---------- */
.toggle { width: 44px; height: 25px; border-radius: 999px; background: #d7dde6; position: relative; cursor: pointer; transition: background .2s; flex: none; border: 0; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--card); transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle.on { background: var(--emerald); }
.toggle.on::after { transform: translateX(19px); }

/* ---------- avatar circle ---------- */
.av-circle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; }

/* ---------- Task controls (Task summary + project board) ----------
   Two different jobs on one line: how the list is grouped, then what it
   contains. The divider keeps them from reading as one set of controls;
   both wrap onto their own row when there isn't width for one. */
.rsum-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--gap-band); min-height: 46px; position: relative; }
.rsum-controls.acting .rsum-switch { flex: 0 0 0; width: 0; height: 0; padding: 0; border: 0; overflow: hidden; visibility: hidden; }
.rsum-controls.acting .rsum-div { display: none; }
.rsum-controls.acting .rsum-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.rsum-controls .board-add:empty { display: none; }
/* The filter group is the part that gives way: it scrolls rather than wrapping,
   so the row stays one line and selecting never moves the list below. */
.rsum-controls .rsum-bar { flex: 1 1 auto; min-width: 0; }
.rsum-controls .rsum-switch { flex: 0 1 auto; min-width: 0; }
#tkBulk { position: absolute; right: 0; bottom: 0; z-index: 2; }
/* The divider separates two groups sharing a line. Once the bar wraps it
   separates nothing, so it goes away rather than sitting there as a stray
   hairline at the end of the first row. */
.rsum-div { width: 1px; align-self: stretch; min-height: 26px; background: var(--line); }
@media (max-width: 1000px){ .rsum-div { display: none; } }
.rsum-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rsum-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rsum-switch .gl { white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-400); }
.rsum-seg { display: inline-flex; background: var(--tint); border-radius: 10px; padding: 3px; gap: 2px; }
.rsum-seg button { white-space: nowrap; border: 0; background: none; border-radius: 8px; padding: 7px 14px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--slate-500); cursor: pointer; }
.rsum-seg button.on { background: var(--card); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.rsum-pill { display: inline-flex; align-items: center; white-space: nowrap; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--slate-600); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rsum-pill.on { background: var(--brand-50); border-color: transparent; color: var(--brand-700); }
.rsum-pill b { font-weight: 700; }
.rsum-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ---------- Task board (project Kanban + the summary's Status view) ---------- */
.board { display: grid; gap: 20px; align-items: start; overflow-x: auto; }
.col { background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 16px; padding: 8px; min-height: 480px; }
.col-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-title { font-weight: 700; font-size: 15px; flex: 1; color: var(--ink); }
.col-count { color: var(--slate-400); font-weight: 700; font-size: 14px; }
.cards { display: flex; flex-direction: column; gap: 12px; padding: 0 6px 8px; }
[data-theme="dark"] .col { background: rgba(255,255,255,.03); }

:root {
  /* 60px button + 24px inset − the row's own 20px padding, rounded up. */
  --fab-gutter: 72px;
  /* Referenced with literal fallbacks in a few places; defined here so the
     scale is in one file. */
  --slate-200: #e2e8f0;
  --brand-200: #dbe2fe;
  --brand-300: #c7d2fe;
}
@media (max-width: 560px){ :root { --fab-gutter: 60px; } }
.fab-safe { padding-right: var(--fab-gutter); }

/* "What is this?" next to a page title — the task/automation split is the one
   thing users ask about, so the answer sits where the question occurs. */
.help-dot { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--slate-400); font: inherit; font-size: 11.5px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; margin-left: 9px; padding: 0; }
.help-dot:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.help-pop { position: fixed; z-index: 200; width: 330px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 45px rgba(15,23,42,.16); padding: 16px 17px; }
.help-pop .help-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.help-pop p { font-size: 12.8px; font-weight: 500; line-height: 1.55; color: var(--slate-600); margin: 0 0 8px; text-wrap: pretty; }
.help-pop .help-l { display: inline-block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
.help-pop .help-l:hover { text-decoration: underline; }

/* An automation that failed lands here as a task; the card names the blocker
   so the board answers "what is broken" without opening Automations. */
.tcard-fail { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 8px 10px; border-radius: 9px; background: rgba(225,29,72,.06); border: 1px solid rgba(225,29,72,.2); font-size: 12px; font-weight: 700; color: #9F1239; }
.tcard-fail a { margin-left: auto; color: var(--brand); text-decoration: none; white-space: nowrap; }
.tcard-fail a:hover { text-decoration: underline; }

/* Awaiting-approval block on a task card — board and summary share it. */
.tcard-approve { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(109,93,246,.08); display: flex; flex-direction: column; gap: 9px; }
.tcard-approve .ap-t { font-size: 12.5px; font-weight: 700; color: #6D5DF6; }
.tcard-approve .ap-b { display: flex; gap: 8px; }
.tcard-approve .btn { flex: 1; padding: 7px 10px; font-size: 13px; }
.tcard-approve .ap-reason { width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; outline: 0; resize: vertical; min-height: 58px; line-height: 1.45; }
.tcard-approve .ap-reason:focus { border-color: #6D5DF6; box-shadow: 0 0 0 3px rgba(109,93,246,.14); }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(15,23,42,.3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Mobile ---------- */
.sb-overlay { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.45); }
.sb-overlay.show { display: block; }
@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: 0; z-index: 90; width: 284px; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .sidebar.open { transform: translateX(0); }
  /* Appears exactly when the sidebar goes off-canvas — same query. */
  .dh-burger { display: grid; }
  /* The drawer is used by thumb: rows go back to a comfortable target. */
  .nav-item, .sub-item, .proj-head { padding: 10px 14px; font-size: 15px; }
  .main { padding: var(--gap-top) 18px 40px; }
  .topbar { padding: 10px 18px 12px; }
  /* The topbar is a nowrap flex row (burger, optional back, title, then help +
     language + theme pinned right). A long title such as "Historique des
     conversations" made it 102px wider than .main-wrap, which clips instead of
     scrolling — the language and theme buttons were simply cut off. Wrapping the
     row and letting the title shrink keeps every control reachable. */
  .topbar { padding: 10px 18px 12px; }
  .dyn-head h1 { font-size: 20px; }
  .topbar-right { gap: 12px; flex-wrap: wrap; }
}
/* ---------- Form fields ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; color: var(--slate-600); font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.input, .textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px; outline: 0; transition: border-color .15s, box-shadow .15s; }
.input:focus, .textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(46,144,250,.14); }
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

/* settings switch row */
.switch-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid #f1f3f7; }
.switch-row:first-of-type { border-top: 0; padding-top: 0; }
.switch-row .sr-body { flex: 1; }
.switch-row .sr-title { font-weight: 700; font-size: 15px; }
.switch-row .sr-desc { color: var(--slate-500); font-size: 13px; font-weight: 500; margin-top: 4px; }

/* ---------- Language switcher ---------- */
.lang-wrap { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--slate-700); cursor: pointer; }
.lang-btn:hover { background: var(--brand-50); border-color: var(--brand-100); }
.lang-btn svg { color: var(--slate-500); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); padding: 6px; min-width: 180px; display: none; z-index: 60; }
.lang-wrap.open .lang-menu { display: block; }
.lang-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--slate-700); cursor: pointer; }
.lang-opt svg { color: var(--slate-400); }
.lang-opt:hover { background: var(--brand-50); }
.lang-opt.sel { color: var(--brand-700); background: rgba(21,112,239,.08); }
.lang-opt.sel svg { color: var(--brand-700); }
.lang-opt .lo-code { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--slate-400); }

.topbar-help { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--slate-500); display: grid; place-items: center; cursor: pointer; }
.topbar-help:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* Chat-only tools (Browser Live, Planning) — same affordance as .topbar-help
   so the group reads as one row of icon buttons. */
/* Labelled pills, mirroring the original .browser-activity-trigger: icon/dot +
   text, so they read as named actions rather than another anonymous glyph in a
   row of four. */
.topbar-tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--slate-600); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, color .16s; }
.topbar-tool:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.topbar-tool-label { line-height: 1; }
/* Grey until the panel reports a live stream, then green — same states the
   original trigger dot used. */
.topbar-tool-dot { width: 8px; height: 8px; border-radius: 99px; background: #94a3b8; box-shadow: 0 0 0 3px #e2e8f0; flex: none; }
.topbar-tool[data-state="connected"] .topbar-tool-dot { background: #12B76A; box-shadow: 0 0 0 3px #d1fae5; }
@media (max-width: 900px){ .topbar-tool-label { display: none; } .topbar-tool { padding: 0 11px; } }

/* ---------- Browser Live panel (static/js/browser-activity-panel.js) ----------
   That panel is shared with the old static/ SPA, which loads Tailwind. This
   frontend doesn't, so its inner markup arrives unstyled (the panel's own
   injected CSS only covers the frame and cards). These are scoped Tailwind
   equivalents for the handful of utility classes it actually uses — scoped to
   #browser-activity-panel so they can't leak into our own components, and kept
   here rather than editing the shared script so the SPA is unaffected. */
#browser-activity-panel .flex { display: flex; }
#browser-activity-panel .flex-shrink-0 { flex-shrink: 0; }
#browser-activity-panel .max-h-44 { max-height: 11rem; }
#browser-activity-panel .overflow-y-auto { overflow-y: auto; }
#browser-activity-panel .space-y-2 > * + * { margin-top: .5rem; }
#browser-activity-panel .px-4 { padding-left: 1rem; padding-right: 1rem; }
#browser-activity-panel .py-3 { padding-top: .75rem; padding-bottom: .75rem; }
#browser-activity-panel .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
#browser-activity-panel .p-4 { padding: 1rem; }
#browser-activity-panel .mt-1 { margin-top: .25rem; }
#browser-activity-panel .bg-slate-50 { background: var(--tint-soft); }
#browser-activity-panel .bg-white { background: var(--card); }
#browser-activity-panel .border { border: 1px solid #e2e8f0; }
#browser-activity-panel .border-b { border-bottom: 1px solid #e2e8f0; }
#browser-activity-panel .border-dashed { border-style: dashed; }
#browser-activity-panel .border-slate-200 { border-color: #e2e8f0; }
#browser-activity-panel .border-slate-300 { border-color: #cbd5e1; }
#browser-activity-panel .rounded-2xl { border-radius: 1rem; }
#browser-activity-panel .text-xs { font-size: 12px; }
#browser-activity-panel .text-sm { font-size: 13.5px; }
#browser-activity-panel .text-base { font-size: 15px; }
#browser-activity-panel .text-slate-500 { color: #64748b; }
#browser-activity-panel .text-slate-700 { color: #334155; }
#browser-activity-panel .text-slate-900 { color: var(--ink); }
#browser-activity-panel .font-bold { font-weight: 700; }
#browser-activity-panel .font-black { font-weight: 800; }
#browser-activity-panel .leading-relaxed { line-height: 1.625; }

/* ---------- Chat layout (Discussion libre / Chat IA) ---------- */
.chat-wrap { display: grid; grid-template-columns: 1fr 340px; flex: 1; min-height: 0; overflow: hidden; }
.chat-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.side-toggle { position: absolute; top: 14px; right: 14px; z-index: 6; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--slate-600); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.side-toggle:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.chat-wrap.hide-skills.with-sessions { grid-template-columns: 268px 1fr; }
.chat-wrap.hide-skills.sess2 { grid-template-columns: 268px 1fr; }
.chat-wrap.hide-skills .skills { display: none; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 32px 40px; }
.msg { max-width: 70%; margin-bottom: 22px; }
.msg-user { margin-left: auto; display: flex; gap: 12px; align-items: flex-start; flex-direction: row-reverse; }
.msg-user .bubble { background: var(--tint); color: var(--ink); border-radius: 16px; padding: 16px 18px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.msg-user .who { width: 36px; height: 36px; border-radius: 50%; background: #e7ebf1; color: var(--slate-600); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.msg-ai { max-width: 78%; }
.msg-ai .bubble { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--slate-700); }
.msg-ai .bubble b { color: var(--ink); font-weight: 700; }
.msg-ai .bubble em { color: var(--brand-700); font-style: italic; }
.msg-ai p { margin: 0 0 12px; }
.msg-ai p:last-child { margin-bottom: 0; }

/* Live tool-call timeline (streaming progress) */
.live-tool-timeline { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.live-tool-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 500; border: 1px solid; }
.live-tool-row.pending { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; animation: ltpulse 1.2s ease-in-out infinite; }
.live-tool-row.done { background: var(--emerald-50); border-color: #bbf7d0; color: #166534; animation: none; }
.live-tool-row.routed { background: var(--violet-50); border-color: #e9d5ff; color: #6b21a8; }
@keyframes ltpulse { 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.lt-icon { flex: none; font-size: 14px; line-height: 1.4; }
.lt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-name { font-weight: 700; }
.lt-detail { font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Agent avatar pulse when thinking */
@keyframes agent-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(109,93,246,.5); } 50%{ box-shadow: 0 0 0 8px rgba(109,93,246,0); } }
.hermes-av.agent-thinking { animation: agent-pulse 1.4s ease-in-out infinite; }

/* Input on its own row, tool pills beneath — the same shape as the landing and
   session composers. Sharing one nowrap line squeezed the field to 171px at
   924px wide, truncating the placeholder mid-word. */
.composer { padding: 18px 40px 26px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.composer-box { flex: 1 1 100%; order: -1; min-width: 0; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 12px 14px 12px 18px; box-shadow: var(--shadow); }
.composer-box .clip { color: var(--slate-400); cursor: pointer; display: grid; place-items: center; }
.composer-box input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 15px; background: transparent; color: var(--ink); }
.composer-box input::placeholder { color: var(--slate-400); }
.send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; flex: none; }
.send-btn:hover { background: var(--brand-700); }
.model-pick { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--slate-700); box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap; }
.model-pick .sp { color: var(--brand-700); }
/* Model picker menu — opens upward, the pill sits at the bottom of the composer. */
.mp-wrap { position: relative; display: inline-flex; }
.mp-drop { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 210px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 6px; z-index: 60; display: none; }
.mp-drop.open { display: block; }
.mp-opt { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--slate-700); cursor: pointer; }
.mp-opt:hover { background: var(--tint); }
.mp-opt.on { color: var(--brand-700); background: rgba(46,144,250,.08); }
[data-theme="dark"] .mp-drop { background: var(--card); }

.skills { border-left: 1px solid var(--line); background: rgba(255,255,255,.5); overflow-y: auto; padding: 22px 20px; min-height: 0; }
.skills-head { display: flex; align-items: center; margin-bottom: 22px; }
.skills-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.skills-head .gear { margin-left: auto; color: var(--slate-400); cursor: pointer; }
.skills-group { color: var(--slate-400); font-size: 11px; font-weight: 700; letter-spacing: .1em; margin: 22px 0 12px; }
.skills-group:first-of-type { margin-top: 0; }
.skill { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
a.skill:hover { border-color: var(--brand-500); background: var(--brand-50); transform: translateY(-1px); box-shadow: var(--shadow); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.skill-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.skill-name { font-weight: 700; font-size: 14px; }
.skill-sub { color: var(--slate-500); font-size: 12.5px; font-weight: 500; margin-top: 2px; }
@media (max-width: 1080px){ .chat-wrap { grid-template-columns: 1fr; } .skills { display: none; } .chat-scroll, .composer { padding-left: 20px; padding-right: 20px; } }
/* Narrow screens: .chat-col clips rather than scrolls, so the pills have to be
   able to shrink or the last one sits off screen with no way to reach it. */
@media (max-width: 900px){
  .composer { padding-bottom: 18px; }
  .mp-wrap, .model-pick { min-width: 0; max-width: 100%; }
  .model-pick { padding: 9px 13px; font-size: 13px; overflow: hidden; }
  .model-pick > span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Sessions bar (free chat + AI chat) ---------- */
.chat-wrap.with-sessions { grid-template-columns: 268px 1fr 340px; }
.chat-wrap.sess2 { grid-template-columns: 268px 1fr; }
.sessions { border-right: 1px solid var(--line); background: rgba(255,255,255,.55); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.sess-head { padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 11px; }
.sess-new { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sess-new:hover { background: var(--brand-700); }
.sess-search { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; color: var(--slate-400); }
.sess-search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--ink); }
.sess-list { flex: 1; overflow-y: auto; padding: 6px 10px 18px; }
.sess-group { font-size: 11px; font-weight: 700; color: var(--slate-400); letter-spacing: .06em; padding: 14px 8px 5px; }
.sess-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: none; border-radius: 10px; padding: 10px 12px; cursor: pointer; box-sizing: border-box; }
.sess-item .sess-del:hover { opacity: 1 !important; background: var(--rose-50); color: #e11d48; }
.sess-item:hover { background: var(--tint); }
.sess-item.on { background: var(--brand-50); }
.sess-title { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-sub { color: var(--slate-500); font-size: 12px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1240px){ .chat-wrap.with-sessions, .chat-wrap.sess2 { grid-template-columns: 1fr; } .sessions { display: none; }
  /* .hide-skills variants have higher specificity than the rules above, so they
     kept the 268px sessions track alive after .sessions was hidden — squeezing
     the chat into the narrow left column. */
  .chat-wrap.hide-skills.with-sessions, .chat-wrap.hide-skills.sess2 { grid-template-columns: 1fr; } }
@media (max-width: 1080px){ .chat-wrap.with-sessions { grid-template-columns: 1fr; } }

/* ---------- Hermes (AI CEO) free chat ---------- */
.hermes-profile { text-align: center; padding: 8px 6px 22px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.hermes-av { position: relative; width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--brand), var(--brand-700)); box-shadow: 0 8px 20px rgba(109,93,246,.32); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hermes-av:hover { transform: scale(1.06); box-shadow: 0 12px 28px rgba(109,93,246,.44); }
.hermes-name { font-weight: 800; font-size: 19px; }
.hermes-title { color: var(--brand-700); font-weight: 700; font-size: 13px; letter-spacing: .03em; margin-top: 3px; }
.hermes-bio { color: var(--slate-500); font-size: 13px; font-weight: 500; line-height: 1.5; margin: 12px 4px 0; }
.hermes-online { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; display: inline-block; flex: none; }
.hermes-online.big { position: absolute; right: 4px; bottom: 4px; width: 15px; height: 15px; border: 3px solid #fff; }
.hermes-sec-head { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.hermes-sec-head h3 { font-size: 14px; }
.hermes-profile { position: relative; }
.hermes-gear { position: absolute; top: 0; right: 0; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--slate-500); display: grid; place-items: center; cursor: pointer; }
.hermes-gear:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.hermes-pop-ov { position: fixed; inset: 0; background: rgba(15,23,42,.4); display: none; align-items: center; justify-content: center; z-index: 140; padding: 24px; }
.hermes-pop-ov.open { display: flex; }
.hermes-pop { background: var(--card); border-radius: 16px; width: 400px; max-width: 100%; max-height: 84vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.hermes-pop-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.hermes-pop-head .hp-ic { color: var(--brand-700); display: grid; place-items: center; }
.hermes-pop-head h3 { font-size: 16px; font-weight: 800; margin: 0; flex: 1; letter-spacing: .04em; }
.hermes-pop-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--slate-400); font-size: 20px; line-height: 1; cursor: pointer; }
.hermes-pop-x:hover { background: var(--tint); color: var(--ink); }
.hermes-pop-body { padding: 16px 20px 20px; }
/* chat view switch + team chat */
.chat-switch { display: inline-flex; gap: 4px; background: var(--tint); border-radius: 999px; padding: 4px; margin: 16px 40px 0; align-self: flex-start; }
.cs-tab { border: 0; background: none; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--slate-500); padding: 7px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.cs-tab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.team-strip { display: flex; align-items: center; gap: 12px; padding: 14px 40px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.team-strip-label { font-size: 13.5px; font-weight: 700; color: var(--slate-600); }
.team-strip-manage { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--slate-600); font-size: 13px; font-weight: 700; text-decoration: none; }
.team-strip-manage:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-700); }
.team-avas { display: flex; }
.team-avas .ta { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; border: 2px solid #fff; margin-left: -8px; }
.team-avas .ta:first-child { margin-left: 0; }
.team-msg { display: flex; gap: 11px; margin-bottom: 18px; max-width: 82%; }
.team-av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; font-weight: 700; flex: none; }
.tm-body { min-width: 0; }
.tm-name { font-size: 13px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.tm-tag { font-size: 10.5px; font-weight: 700; color: var(--slate-400); background: var(--tint); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.team-msg .bubble { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow-sm); font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.hermes-typing { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.hermes-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-400); display: inline-block; animation: hermesBounce 1.2s infinite ease-in-out; }
.hermes-typing i:nth-child(2){ animation-delay: .18s; }
.hermes-typing i:nth-child(3){ animation-delay: .36s; }
@keyframes hermesBounce { 0%,80%,100%{ transform: translateY(0); opacity:.5; } 40%{ transform: translateY(-5px); opacity:1; } }

/* clip (paperclip) insert/properties dropdown */
.clip-wrap { position: relative; display: flex; align-items: center; }
.clip { border: 0; background: none; padding: 0; color: var(--slate-400); cursor: pointer; display: grid; place-items: center; }
.clip:hover { color: var(--brand-700); }
.clip-menu { position: absolute; bottom: calc(100% + 14px); left: -6px; width: 256px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 18px 44px -16px rgba(15,23,42,.4); padding: 8px; display: none; z-index: 50; }
.clip-menu.open { display: block; animation: onbIn .16s ease; }
.cm-head { color: var(--slate-400); font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 9px 10px 5px; }
.cm-head:first-child { padding-top: 4px; }
.cm-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--slate-700); cursor: pointer; border-radius: 9px; text-align: left; }
.cm-opt:hover { background: var(--brand-50); color: var(--brand-700); }
.cm-ic { color: var(--slate-400); display: grid; place-items: center; flex: none; }
.cm-opt:hover .cm-ic { color: var(--brand-700); }
.comp-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comp-chips:empty { display: none; }
.comp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--slate-700); font-size: 12.5px; font-weight: 700; padding: 5px 5px 5px 11px; border-radius: 999px; white-space: nowrap; }
.comp-chip.is-format { background: var(--brand-50); color: var(--brand-700); }
.comp-chip .cc-ic { display: grid; place-items: center; opacity: .8; }
.chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.chip-x:hover { background: rgba(15,23,42,.12); }