:root {
  --bg: #0f1419;
  --panel: #151c24;
  --panel2: #1a232e;
  --text: #e8eef2;
  --muted: #94a3b8;
  --line: #2a3544;
  --accent: #52b788;
  --accent2: #74c69d;
  --forest: #2d6a4f;
  --slate: #64748b;
  --ok: #52b788;
  --warn: #d4a574;
  --bad: #c77d7d;
  --shadow: 0 16px 48px rgba(0, 0, 0, .28)
}

@media(prefers-color-scheme:light) {
  :root {
    --bg: #f8faf9;
    --panel: #ffffff;
    --panel2: #f1f5f4;
    --text: #1a2e24;
    --muted: #64748b;
    --line: #d1ddd8;
    --accent: #2d6a4f;
    --accent2: #40916c;
    --forest: #1b4332;
    --slate: #475569;
    --ok: #2d6a4f;
    --warn: #b0892a;
    --bad: #9b2226;
    --shadow: 0 12px 40px rgba(26, 46, 36, .08)
  }

  body {
    background: radial-gradient(circle at 15% 0%, #e8f0ec 0, var(--bg) 42%, #eef2f0 100%)
  }

  .gate-shell {
    background: radial-gradient(circle at 15% 0%, #e8f0ec 0, var(--bg) 42%, #eef2f0 100%)
  }

  .composer-research textarea,
  .manuscript-editor {
    background: var(--panel2)
  }

  .send {
    color: #f8faf9
  }

  .landing-btn {
    color: #f8faf9
  }
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: radial-gradient(circle at 12% 0%, #1a2830 0, var(--bg) 38%, #0a0e12 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
}

.shell {
  display: grid;
  grid-template-columns: 300px 1fr 360px;
  min-height: 100vh
}

.sidebar,
.inspector {
  background: rgba(12, 18, 34, .92);
  backdrop-filter: blur(18px);
  border-color: var(--line);
  padding: 18px;
  overflow: auto
}

.sidebar {
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.sidebar::-webkit-scrollbar {
  width: 8px
}

.sidebar::-webkit-scrollbar-track {
  background: transparent
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.inspector {
  border-left: 1px solid var(--line)
}

.titi-account-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.titi-account-dock-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 6px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.titi-account-dock-main:hover {
  background: rgba(255, 255, 255, .05);
}

.titi-account-dock-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0b1117;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.titi-account-dock-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.titi-account-dock-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titi-account-dock-meta [class*="titi-account-dock-badge"] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  align-self: flex-start;
}

.titi-account-dock-badge--admin {
  background: rgba(255, 107, 107, .15);
  color: #ff9b9b;
}

.titi-account-dock-badge--pro {
  background: rgba(82, 183, 136, .15);
  color: var(--accent2);
}

.titi-account-dock-admin,
.titi-account-dock-settings {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.titi-account-dock-admin:hover,
.titi-account-dock-settings:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--forest), var(--accent));
  box-shadow: 0 8px 24px rgba(82, 183, 136, .28)
}

h1,
h2,
h3 {
  margin: 0 0 10px
}

.brand h1 {
  font-size: 17px;
  line-height: 1.2
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.nav {
  display: grid;
  gap: 7px
}

.nav button,
.btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  transition: .15s
}

.nav button:hover,
.btn:hover {
  background: rgba(82, 183, 136, .1);
  border-color: var(--forest)
}

.nav button.active {
  background: linear-gradient(135deg, rgba(45, 106, 79, .22), rgba(82, 183, 136, .12));
  border-color: var(--forest)
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.topbar {
  height: 66px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: rgba(8, 12, 22, .55);
  backdrop-filter: blur(16px)
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--ok);
  box-shadow: 0 0 18px var(--ok)
}

.workspace {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 22px;
  min-height: calc(100vh - 66px)
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow)
}

.metric {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em
}

.muted {
  color: var(--muted)
}

/* R82-FIX: .composer-warning (the "TiTi Core Agent có thể tạo thông tin
   không chính xác..." disclaimer under the composer) had zero CSS
   anywhere in the app — same missing-CSS pattern found repeatedly this
   session (ToolHub icons, composer-model-picker, .composer-globe-btn).
   It rendered at the default browser <p> font-size (~16px), far too
   prominent for a footnote-style disclaimer. */
.composer-warning {
  font-size: 11px;
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.4;
}

.chat {
  display: grid;
  gap: 14px;
  align-content: start;
  overflow: auto
}

.msg {
  max-width: 86%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  line-height: 1.55
}

.msg.user {
  justify-self: end;
  background: rgba(45, 106, 79, .18);
  border-color: var(--forest)
}

.msg.assistant {
  justify-self: start
}

.composer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px
}

.composer textarea {
  min-height: 58px;
  max-height: 170px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 10px
}

/* R61-FIX: .composer-model-picker (composer-model-picker.js dropdown) shipped
   with zero CSS anywhere in the app - the label/sub/badge spans rendered as
   unstyled inline text, running together ("TiTi SmartFast", "TiTi
   ThinkingDeep reasoning"). Live-confirmed via DOM inspection: the markup
   itself was always correct (separate spans), only the stylesheet was
   missing. */
.composer-model-picker {
  position: relative;
  flex-shrink: 0;
}
.composer-model-picker-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.composer-model-picker-btn:hover {
  background: rgba(255, 255, 255, .06);
}
[data-theme="light"] .composer-model-picker-btn:hover {
  background: rgba(0, 0, 0, .05);
}
.composer-model-picker-caret {
  font-size: 10px;
  color: var(--muted);
}
.composer-model-picker-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 20;
}
.composer-model-picker-head {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}
.composer-model-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.composer-model-picker-item:hover,
.composer-model-picker-item.active {
  background: rgba(255, 255, 255, .06);
}
.composer-model-picker-item-label {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.composer-model-picker-item-sub {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}
.composer-model-picker-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}
.composer-model-pro-badge {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--accent);
  color: #06251a;
}

/* R69-FIX: the "+" composer menu's ToolHub items (.titi-toolhub-*, built by
   app.js's r22ePlusRender-family code) shipped with zero CSS anywhere in the
   app, same pattern as the composer-model-picker bug above. The SVG icons
   have no width/height, so they rendered at raw intrinsic size (~214px
   square) blowing each row up to 250-300px tall — the "icon to bất thường"
   / broken plus-menu layout bug. */
.composer-plus-menu.titi-toolhub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.titi-toolhub-title {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.titi-toolhub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
}
.titi-toolhub-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.titi-toolhub-item:hover .titi-toolhub-icon,
.titi-toolhub-item.is-disabled .titi-toolhub-icon {
  color: inherit;
}
.titi-toolhub-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.titi-toolhub-label {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.titi-toolhub-desc {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  white-space: normal;
}
.titi-toolhub-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
}

/* R70-FIX: .composer-globe-btn (composer-model-picker.js's injectGlobeBtn)
   had zero CSS anywhere — same missing-CSS pattern as the ToolHub icons and
   composer-model-picker dropdown above. It rendered on raw native <button>
   chrome, which is why it looked like a plain gray/white outset system
   button instead of matching the "+" button next to it, most visible in
   light theme where every other composer control is themed but this one
   wasn't. */
.composer-globe-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.composer-globe-btn:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}
.composer-globe-btn.active {
  background: rgba(82, 183, 136, .15);
  border-color: var(--accent, #52b788);
  color: var(--accent, #52b788);
}
.composer-globe-btn.is-disabled,
.composer-globe-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
[data-theme="light"] .composer-globe-btn:hover {
  background: rgba(0, 0, 0, .05);
}

/* R71-FIX: .composer-plus-btn is also .btn, which paints a visible
   rounded-box background+border by default (app.css .btn). Next to the
   fully flat .composer-globe-btn (R70 fix above) that reads as "one icon
   has a box, one doesn't" — inconsistent, and unlike the reference (Gemini)
   composer where every icon sits flat with no per-icon box. Flatten the +
   button to match, scoped to the live composer only. */
.composer-r22e .composer-plus-btn {
  background: transparent;
  border-color: transparent;
}
.composer-r22e .composer-plus-btn:hover {
  background: rgba(255, 255, 255, .06);
}
[data-theme="light"] .composer-r22e .composer-plus-btn:hover {
  background: rgba(0, 0, 0, .05);
}

/* R60-FIX: the JS (uxEnsureScrollToBottomFab) creates this button and
   toggles the shared .hidden utility on it, but never had its own styling —
   it was rendering as a plain inline gray button in normal flow instead of
   a floating circular arrow above the composer, the ChatGPT jump-to-bottom
   pattern the task explicitly asked for. */
.titi-scroll-bottom-fab {
  /* Anchored inside .workspace-main (position:relative), offset above the
     composer by the same --titi-chat-scroll-pad the app already computes
     from real composer height, so it sits just above it at any composer
     size (1-row vs stacked) instead of a hardcoded guess. */
  position: absolute;
  left: 50%;
  bottom: calc(var(--titi-chat-scroll-pad, 90px) + 8px);
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  z-index: 5;
  transition: transform .12s ease, box-shadow .12s ease;
}
.titi-scroll-bottom-fab:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.titi-scroll-bottom-fab.hidden {
  display: none;
}

.send {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #07101f;
  font-weight: 800;
  padding: 0 18px;
  cursor: pointer
}

.toolgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.tool {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .04)
}

.tool b {
  display: block;
  margin-bottom: 5px
}

.tool-active {
  border-color: #5e8fbd;
  background: rgba(124, 196, 255, .1)
}

.searchbox,
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: #0d172a;
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px
}

.table {
  width: 100%;
  border-collapse: collapse
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 9px;
  text-align: left;
  font-size: 13px
}

.canvas {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  min-height: 180px;
  padding: 14px
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px
}

.tab {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  cursor: pointer
}

.tab.active {
  color: var(--text);
  background: rgba(124, 196, 255, .16)
}

.kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #0a1020;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px
}

.warning {
  border-color: #7e6737;
  background: rgba(255, 209, 102, .08)
}

.ok {
  border-color: #356a52;
  background: rgba(93, 230, 163, .08)
}

@media(max-width:1180px) {
  .shell {
    grid-template-columns: 260px 1fr;
  }

  .inspector {
    display: none;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.shell-chat-first {
  grid-template-columns: 0 minmax(0, 1fr) 300px;
}

.shell-chat-first .workspace-sidebar-drawer {
  position: fixed;
  left: 0;
  top: 52px;
  bottom: 0;
  width: 260px;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform .2s ease;
  box-shadow: var(--shadow)
}

.shell-chat-first.sidebar-open .workspace-sidebar-drawer {
  transform: translateX(0)
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 22, .55);
  backdrop-filter: blur(12px);
  flex-wrap: wrap
}

.workspace-topbar-left,
.workspace-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.project-select-inline {
  display: flex;
  align-items: center;
  gap: 6px
}

.project-select-inline .project-select {
  max-width: 160px;
  padding: 6px 10px;
  font-size: 13px
}

.workspace-pill {
  font-size: 12px
}

.user-menu {
  position: relative
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 6px;
  box-shadow: var(--shadow);
  z-index: 40;
  display: grid;
  gap: 4px
}

.user-menu-panel a,
.user-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
  background: rgba(82, 183, 136, .1)
}

.composer-clean {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05)
}

.composer-clean textarea {
  min-height: 44px;
  max-height: 160px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  width: 100%
}

.composer-extra summary {
  list-style: none;
  cursor: pointer
}

.composer-extra-fields {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  min-width: 220px
}

.composer-more-btn {
  user-select: none
}

.next-actions-panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5
}

@media(max-width:900px) {
  .shell-chat-first {
    grid-template-columns: 1fr;
  }

  .shell-chat-first .research-inspector {
    display: none;
  }
}

.shell-status {
  grid-template-columns: 280px 1fr
}

.nav-links {
  display: grid;
  gap: 7px
}

.nav-links a {
  display: block;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  text-decoration: none;
  font-size: 13px
}

.nav-links a:hover {
  background: rgba(124, 196, 255, .12);
  border-color: #4d7fad
}

.nav-links a.active {
  background: linear-gradient(135deg, rgba(124, 196, 255, .18), rgba(177, 140, 255, .15));
  border-color: #5e8fbd
}

.workspace-status {
  display: block;
  min-height: calc(100vh - 66px)
}

.status-panels {
  display: grid;
  gap: 14px;
  margin-top: 4px
}

.status-panel {
  padding: 0;
  overflow: hidden
}

.status-panel h3 {
  padding: 14px 16px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700
}

.status-table td:first-child {
  width: 34%;
  font-weight: 600
}

.status-foot {
  margin-top: 8px
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4
}

.page-chat-first .badge,
.workspace-pill {
  text-transform: none;
  font-size: 12px;
  font-weight: 500
}

.badge-ok {
  background: rgba(93, 230, 163, .15);
  color: var(--ok)
}

.badge-warn {
  background: rgba(255, 209, 102, .12);
  color: var(--warn)
}

.badge-bad {
  background: rgba(255, 118, 118, .12);
  color: var(--bad)
}

.inspector a {
  color: var(--accent)
}

.cards-boot {
  min-height: 88px
}

.card-loading {
  opacity: .85
}

.card-status.card-ok {
  border-color: #356a52
}

.card-status.card-warn {
  border-color: #7e6737
}

.card-status.card-bad {
  border-color: #7a3a3a
}

.metric-badge {
  font-size: 16px;
  line-height: 1.4
}

.metric-badge .badge {
  font-size: 12px
}

.metric-detail {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35
}

.status-pill.status-ok {
  border-color: #356a52;
  color: var(--ok)
}

.status-pill.status-warn {
  border-color: #7e6737;
  color: var(--warn)
}

.status-pill.status-bad {
  border-color: #7a3a3a;
  color: var(--bad)
}

.status-pill.status-bad .dot,
.status-pill.status-warn .dot {
  background: var(--warn);
  box-shadow: 0 0 18px var(--warn)
}

#bootStatus h3 {
  font-size: 14px;
  margin: 18px 0 8px
}

.workspace {
  grid-template-rows: auto 1fr auto
}

.workspace-chat-first {
  grid-template-rows: auto minmax(280px, 1fr) auto auto
}

.workspace-chat-first .chat-primary {
  min-height: 280px
}

.workspace-chat-first #metrics {
  margin-bottom: 0
}

.provider-panel {
  margin-top: 14px;
  padding: 12px
}

.provider-panel select {
  margin-top: 8px
}

.advanced-panel {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .02)
}

.advanced-panel>summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style-position: outside
}

.advanced-subpanel {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .02)
}

.advanced-subpanel>summary {
  cursor: pointer
}

.advanced-subpanel h3 {
  display: inline;
  font-size: 13px;
  margin: 0
}

.evidence-lane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px
}

.evidence-lane-step {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(124, 196, 255, .08)
}

.evidence-lane-arrow {
  color: var(--muted);
  font-size: 11px;
  align-self: center
}

.manuscript-panel {
  margin: 0;
  padding: 18px
}

.manuscript-policy {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(124, 196, 255, .06);
  font-size: 13px;
  line-height: 1.45
}

.manuscript-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.manuscript-block h3 {
  font-size: 14px;
  margin: 0 0 10px
}

.manuscript-block-wide {
  grid-column: 1/-1
}

.manuscript-editor {
  width: 100%;
  min-height: 140px;
  max-height: 260px;
  resize: vertical;
  border: 1px solid var(--line);
  background: #0d172a;
  color: var(--text);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  line-height: 1.5
}

.manuscript-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px
}

.revision-list {
  display: grid;
  gap: 10px;
  max-height: 220px;
  overflow: auto
}

.revision-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03)
}

.revision-item.revision-active {
  border-color: #5e8fbd;
  background: rgba(124, 196, 255, .08)
}

.revision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px
}

.process-map {
  margin-bottom: 10px
}

.process-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.process-node {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, .03)
}

.process-node.process-complete {
  border-color: #356a52;
  color: var(--ok)
}

.process-node.process-active {
  border-color: #5e8fbd;
  background: rgba(124, 196, 255, .14);
  color: var(--accent)
}

.process-node.process-pending {
  opacity: .72
}

.process-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  font-weight: 700;
  font-size: 11px
}

.workflow-timeline {
  display: grid;
  gap: 6px;
  font-size: 12px
}

.timeline-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(37, 54, 84, .65)
}

.status-panels .status-panel+.status-panel {
  margin-top: 0
}

.provider-status-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted)
}

.status-foot {
  margin-top: 12px
}

.card-status.card-ok {
  border-color: rgba(93, 230, 163, .25)
}

.card-status.card-warn {
  border-color: rgba(255, 209, 102, .25)
}

.card-status.card-bad {
  border-color: rgba(255, 118, 118, .25)
}

.badge-disabled,
.badge-unreachable {
  color: var(--warn)
}

.evidence-status {
  font-size: 13px;
  line-height: 1.5
}

.evidence-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0
}

.evidence-pill {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .04)
}

.source-registry-table {
  font-size: 12px;
  width: 100%
}

.source-registry-table td,
.source-registry-table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top
}

.source-registry-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5
}

.source-registry-list li {
  margin: 4px 0
}

.adapter-endpoint {
  font-family: var(--mono, monospace);
  font-size: 11px
}

.file-input {
  display: block;
  width: 100%;
  margin: 10px 0;
  font-size: 12px
}

.storage-router-status {
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0
}

.storage-pointer-panel {
  margin-top: 10px
}

.storage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.storage-table td:first-child {
  width: 38%;
  color: var(--muted)
}

.storage-warning {
  color: var(--warn);
  font-weight: 600
}

.storage-next-actions {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5
}

.agent-panel {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03)
}

.agent-panel summary {
  cursor: pointer;
  font-size: 13px
}

.agent-panel-body {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 8px
}

.agent-steps {
  margin: 8px 0 0;
  padding-left: 18px
}

.deploy-warnings,
.deploy-actions {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5
}

.provider-status-inspector {
  font-size: 12px
}

#inspectorPanelVerifier {
  max-height: calc(100vh - 180px);
  overflow: auto
}

.source-registry-panel,
.evidence-graph-panel {
  font-size: 12px;
  line-height: 1.5;
  max-height: 180px;
  overflow: auto
}

.source-discovery-panel {
  border-bottom: 1px solid var(--line);
  padding: 0 0 10px;
  margin-bottom: 10px
}

.source-discovery-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px
}

.source-search-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface)
}

.source-discovery-status {
  font-size: 12px;
  margin: 0 0 8px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(82, 183, 136, .08);
  border: 1px solid rgba(82, 183, 136, .18);
  color: var(--text)
}

.source-discovery-results {
  max-height: 300px;
  overflow: auto
}

.source-candidate-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface)
}

.source-candidate-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 4px
}

.source-candidate-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0
}

.source-candidate-meta {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0
}

.source-candidate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}

.source-candidate-actions .btn {
  font-size: 11px;
  padding: 4px 8px
}

.source-metadata-dialog {
  font-size: 12px;
  line-height: 1.5
}

.admin-source-providers {
  margin-bottom: 16px
}

.admin-migration-doctor {
  margin-top: 12px
}

.admin-migration-card h4 {
  margin: 14px 0 6px;
  font-size: 13px
}

.migration-patch-order {
  margin: 8px 0 12px;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.6
}

.migration-import-note {
  font-size: 12px;
  line-height: 1.45;
  margin: 10px 0
}

.graph-node-pill {
  font-size: 10px
}

.gate-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 0%, #17294c 0, #0c1222 36%, #070a12 100%)
}

.gate-shell.hidden {
  display: none !important
}

.gate-card {
  max-width: 420px;
  width: 100%;
  padding: 22px
}

.gate-panel {
  margin-top: 16px
}

.gate-panel.hidden {
  display: none !important
}

.gate-form {
  display: grid;
  gap: 12px;
  margin-top: 12px
}

.gate-form label {
  display: grid;
  gap: 6px;
  font-size: 13px
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px
}

.gate-actions .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text, #e8f0ff);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: inline-flex;
  align-items: center
}

.gate-error {
  color: var(--bad);
  font-size: 13px;
  margin-top: 10px
}

.gate-error.hidden {
  display: none
}

.boot-fallback {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg, #0f1117);
  color: var(--text, #e8eaed);
  z-index: 99999;
  text-align: center
}

.boot-fallback p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5
}

.boot-fallback--error {
  background: #1a1214;
  color: #f5c2c7
}

.boot-fallback--error strong {
  display: block;
  margin-bottom: 8px;
  color: #ff8a8a
}

.btn-danger {
  background: var(--bad, #c0392b);
  color: #fff;
  border-color: transparent
}

.btn-danger:disabled {
  opacity: .6
}

.project-delete-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 420px
}

.project-delete-form {
  padding: 20px
}

.project-delete-target {
  font-weight: 600;
  margin: 8px 0 16px
}

.warning-text {
  color: var(--warn);
  font-size: 12px;
  margin-top: 10px
}

.setup-list {
  font-size: 13px;
  line-height: 1.5
}

.hidden {
  display: none !important
}

#appShell.hidden {
  display: none !important
}

.sidebar-links {
  margin-top: 12px
}

.btn-link {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line)
}

.landing-shell {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 20px
}

.landing-welcome,
.landing-auth {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: 28px 26px
}

.landing-auth {
  text-align: left
}

.landing-brand {
  margin-bottom: 12px;
  justify-content: center
}

.landing-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 18px
}

.landing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px
}

.landing-badges .status-pill {
  font-size: 12px
}

.landing-badges .status-ok {
  border-color: #2d6a4f;
  color: #8fd9a8
}

.landing-badges .status-warn {
  border-color: #b0892a;
  color: #e9c46a
}

.landing-badges .status-bad {
  border-color: #9b2226;
  color: #f4a3a8
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}

.landing-btn {
  min-width: 140px
}

.landing-btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text)
}

.landing-diagnostics {
  margin-top: 18px;
  text-align: left;
  font-size: 13px
}

.landing-diagnostics summary {
  cursor: pointer;
  color: var(--muted)
}

.platform-diagnostic-inner {
  margin-top: 10px
}

.nav-logout {
  margin-left: auto
}

.landing-btn {
  display: inline-block;
  text-decoration: none;
  color: #07101f;
  font-weight: 800;
  padding: 12px 20px
}

.landing-links a {
  color: var(--accent)
}

.landing-router {
  max-width: 520px;
  width: 100%;
  text-align: left;
  padding: 18px 20px
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px
}

.control-plane-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center
}

.control-plane-toolbar .btn,
.control-plane-toolbar a.btn {
  text-decoration: none
}

.admin-checklist {
  margin-bottom: 16px
}

.platform-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid var(--line);
  font-size: 13px
}

.platform-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0
}

.platform-nav a.active,
.platform-nav a:hover {
  color: var(--accent)
}

.platform-diagnostic {
  max-width: 960px;
  margin: 12px auto;
  padding: 0 18px
}

.platform-diagnostic.hidden {
  display: none !important
}

.platform-diagnostic-card {
  border-color: #c45c5c !important
}

.nav-register.hidden {
  display: none !important
}

.admin-sections details.admin-section {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .02)
}

.admin-sections summary {
  cursor: pointer;
  font-weight: 600
}

.admin-section-body {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px
}

.settings-instructions {
  padding: 14px;
  margin-bottom: 14px
}

.settings-instructions h3 {
  margin: 0 0 10px;
  font-size: 15px
}

.settings-env-hints {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6
}

.settings-provider-grid {
  margin-bottom: 16px
}

.worker-boundary-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px
}

.landing-tagline {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 700
}

.landing-features {
  text-align: left;
  margin: 0 0 20px;
  padding-left: 20px;
  line-height: 1.55;
  color: var(--muted);
  font-size: 14px
}

.landing-features li {
  margin: 8px 0
}

.landing-foot {
  font-size: 12px;
  margin-top: 16px
}

.landing-sub {
  font-size: 14px;
  margin: -8px 0 14px
}

.workspace-nav button small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.35
}

.workspace-nav button b {
  font-size: 13px
}

.workspace-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px
}

.composer-research {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px
}

.composer-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px
}

.composer-doi {
  font-size: 13px
}

.composer-file {
  font-size: 12px;
  width: auto;
  max-width: 180px
}

.composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.composer-research textarea {
  min-height: 72px;
  max-height: 170px;
  resize: vertical;
  border: 1px solid var(--line);
  outline: 0;
  background: #0d172a;
  color: var(--text);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  width: 100%
}

.research-inspector h2 {
  font-size: 15px;
  margin: 0 0 14px;
  letter-spacing: -.02em
}

.inspector-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(37, 54, 84, .65)
}

.inspector-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700
}

.inspector-sw-note {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12px
}

.sidebar-note,
.sidebar-admin-note {
  margin-top: 14px;
  padding: 12px;
  font-size: 12px
}

.msg-welcome {
  border-color: var(--forest);
  background: rgba(45, 106, 79, .1)
}

.tool-active {
  border-color: var(--forest);
  background: rgba(82, 183, 136, .1)
}

.citation-slot {
  background: rgba(45, 106, 79, .12)
}

.nav-links a:hover {
  background: rgba(82, 183, 136, .1);
  border-color: var(--forest)
}

.nav-links a.active {
  background: linear-gradient(135deg, rgba(45, 106, 79, .22), rgba(82, 183, 136, .12));
  border-color: var(--forest)
}

.send {
  background: linear-gradient(135deg, var(--forest), var(--accent));
  color: #f8faf9
}

.msg-sources,
.msg-citations {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 54, 84, .8);
  font-size: 12px
}

.citation-slot {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(177, 140, 255, .1);
  font-size: 11px
}

cite.citation-slot {
  font-style: normal
}

.admin-users-panel .status-table td:first-child {
  width: 32%
}

.settings-highlight-card {
  border-color: rgba(82, 183, 136, .22)
}

.landing-hero {
  max-width: 920px;
  text-align: left;
  padding: 32px 28px
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  gap: 28px;
  align-items: start
}

.landing-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.landing-badges-stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start
}

.landing-badges-stack .status-pill {
  justify-content: center
}

.landing-sub-en {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 12px
}

.landing-diagnostics {
  max-width: 920px;
  width: 100%;
  margin-top: 8px
}

.cards-compact {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px
}

.cards-compact .card {
  padding: 12px 14px;
  border-radius: 16px
}

.cards-compact .metric {
  font-size: 14px
}

.composer-input-row-triple {
  grid-template-columns: 1fr 1fr auto;
  align-items: center
}

.composer-url {
  font-size: 13px
}

.composer-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none
}

.composer-file-label {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 9px 12px
}

.composer-honesty {
  font-size: 11px;
  margin-right: auto;
  text-align: left
}

.composer-actions {
  align-items: center;
  flex-wrap: wrap
}

.research-blocks {
  display: grid;
  gap: 10px;
  margin-top: 4px
}

.research-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.5
}

.research-claim {
  border-color: rgba(82, 183, 136, .35);
  background: rgba(45, 106, 79, .08)
}

.research-evidence {
  border-color: rgba(116, 198, 157, .25);
  background: rgba(82, 183, 136, .06)
}

.research-limitation {
  border-color: rgba(212, 165, 116, .3);
  background: rgba(212, 165, 116, .06)
}

.block-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700
}

.research-status-line {
  margin-bottom: 8px
}

.revision-inspector-item {
  padding: 8px 10px;
  margin-bottom: 6px
}

.settings-test-actions {
  margin-bottom: 16px;
  padding: 16px
}

.settings-test-actions h3 {
  margin: 0 0 8px;
  font-size: 15px
}

.settings-test-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px
}

.settings-test-result {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 1.5em
}

.badge-partial {
  background: rgba(212, 165, 116, .14);
  color: var(--warn)
}

.badge-needs {
  background: rgba(212, 165, 116, .12);
  color: var(--warn)
}

@media(max-width:900px) {
  .landing-hero-grid {
    grid-template-columns: 1fr
  }

  .landing-hero-aside {
    order: -1
  }
}

@media(max-width:1180px) {

  .composer-input-row,
  .composer-input-row-triple {
    grid-template-columns: 1fr
  }
}

/* Page shells */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 20, 25, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.page-research .platform-nav,
.page-admin .platform-nav,
.page-settings .platform-nav {
  background: transparent;
  border: 0;
  padding: 10px 18px;
}

.shell-research {
  grid-template-columns: 272px minmax(0, 1fr) 320px;
}

.shell-admin,
.shell-settings {
  display: block
}

.main-full {
  min-height: calc(100vh - 52px)
}

.topbar-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.topbar-eyebrow {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  font-weight: 700
}

.topbar-subtitle {
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word
}

.brand-copy {
  min-width: 0
}

.brand-copy h1,
.brand-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.workspace-nav button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px
}

.nav-item-title,
.mode-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word
}

.nav-item-sub,
.mode-sub {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  word-break: break-word
}

.composer-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px
}

.composer-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  min-width: 88px
}

.composer-mode.active {
  border-color: var(--forest);
  background: rgba(45, 106, 79, .14)
}

.composer-research textarea {
  min-height: 96px;
  max-height: 220px
}

.metrics-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px
}

.metrics-strip .card {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 14px
}

.inspector-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line)
}

.inspector-sub {
  display: block;
  font-size: 12px;
  margin-top: 4px
}

.hub-card {
  padding: 0;
  overflow: hidden
}

.hub-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line)
}

.hub-card-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3
}

.hub-card-sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4
}

.hub-card-body td,
.hub-card-body th {
  padding: 8px 12px;
  font-size: 12px
}

.hub-card-action {
  padding: 10px 12px;
  border-top: 1px solid var(--line)
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 16px
}

.admin-summary-grid .hub-card {
  min-height: 120px
}

.admin-role-banner {
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--bad)
}

.admin-policy {
  margin: 0 0 14px;
  font-size: 13px
}

.env-banner-lead {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5
}

.settings-oauth {
  padding: 16px;
  margin-bottom: 14px
}

.settings-oauth h3 {
  margin: 0 0 8px;
  font-size: 15px
}

.settings-oauth-note {
  margin-top: 10px;
  font-size: 12px
}

.research-citation {
  border-color: rgba(100, 116, 139, .35);
  background: rgba(100, 116, 139, .08)
}

.research-next {
  border-color: rgba(82, 183, 136, .25);
  background: rgba(45, 106, 79, .06)
}

.pin-btn {
  padding: 4px 8px;
  font-size: 11px
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px
}

.gate-shell {
  background: radial-gradient(circle at 12% 0%, #1a2830 0, var(--bg) 38%, #0a0e12 100%)
}

.nav-links a:hover {
  background: rgba(82, 183, 136, .1);
  border-color: var(--forest)
}

.nav-links a.active {
  background: linear-gradient(135deg, rgba(45, 106, 79, .22), rgba(82, 183, 136, .12));
  border-color: var(--forest)
}

@media(max-width:1180px) {
  .shell-research {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.source-registry-workspace,
.document-rag-panel {
  margin-bottom: 10px;
  padding: 14px
}

.source-registry-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 8px;
  margin: 12px 0
}

.source-registry-table-wrap {
  max-height: 220px;
  overflow: auto;
  font-size: 12px
}

.active-project-panel {
  font-size: 12px;
  line-height: 1.5
}

.hub-card-head.compact {
  padding: 0 0 10px;
  border: 0;
  margin-bottom: 8px
}

@media(max-width:900px) {
  .source-registry-form {
    grid-template-columns: 1fr
  }
}

.nav-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
  padding: 12px 12px 4px;
  margin-top: 4px
}

.nav-group-label:first-child {
  margin-top: 0;
  padding-top: 4px
}

.lab-hub-panel {
  margin-bottom: 10px;
  padding: 14px
}

.lab-hub-tools,
.lab-hub-detail {
  font-size: 12px;
  line-height: 1.5
}

.lab-tools-table,
.lab-jobs-table,
.lab-artifacts-table {
  font-size: 12px;
  width: 100%
}

.lab-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0
}

.lab-jobs-inspector,
.lab-artifacts-inspector {
  font-size: 12px;
  line-height: 1.45;
  max-height: 180px;
  overflow: auto
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px
}

.admin-tab,
.settings-tab,
.inspector-tab {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  cursor: pointer
}

.admin-tab.active,
.settings-tab.active,
.inspector-tab.active {
  color: var(--text);
  border-color: var(--forest);
  background: rgba(45, 106, 79, .14)
}

.inspector-tabs {
  margin-bottom: 12px
}

.inspector-panel {
  border-bottom: 0
}

.quick-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px
}

.quick-action-btn {
  white-space: nowrap
}

.project-selector-bar {
  padding: 12px 14px;
  margin-bottom: 8px
}

.project-select-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600
}

.project-select {
  max-width: 320px
}

.card-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px
}

.admin-action-result {
  min-height: 1.4em;
  margin-bottom: 12px;
  font-size: 13px
}

.lab-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 10px
}

.lab-category-grid .tool {
  font-size: 12px;
  line-height: 1.4
}

.lab-category-grid .tool b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px
}

.center-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03)
}

.center-mode-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer
}

.center-mode-tab.active {
  background: rgba(45, 106, 79, .18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--forest)
}

.prompt-context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px dashed rgba(82, 183, 136, .25);
  border-radius: 12px;
  background: rgba(45, 106, 79, .05)
}

.ctx-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  font-size: 11px;
  line-height: 1.3
}

.ctx-chip-btn {
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit
}

.ctx-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 700
}

.ctx-value {
  font-size: 11px;
  font-weight: 600;
  word-break: break-word
}

.ctx-select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 0;
  cursor: pointer
}

.empty-state {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02)
}

.empty-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--warn);
  margin-top: 5px;
  flex: 0 0 auto
}

.empty-state p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45
}

.empty-state-extra {
  font-size: 11px;
  margin-top: 4px
}

.inspector-compact {
  margin-bottom: 12px;
  padding-bottom: 10px
}

.inspector-compact h3 {
  font-size: 11px;
  margin-bottom: 6px
}

.compact-card {
  padding: 10px 12px;
  font-size: 12px
}

.compact-advanced {
  font-size: 12px;
  padding: 8px 10px
}

.compact-policy {
  font-size: 12px;
  padding: 8px 10px;
  margin-bottom: 8px
}

.compact-meta {
  font-size: 11px
}

.compact-revisions {
  max-height: 120px
}

.compact-grid {
  grid-template-columns: 1fr;
  gap: 10px
}

.center-manuscript-panel,
.center-analysis-panel {
  margin-bottom: 8px;
  padding: 12px
}

.metrics-collapsible {
  margin-bottom: 6px
}

.metrics-summary {
  cursor: pointer;
  font-size: 11px;
  padding: 4px 2px
}

.topbar-mobile {
  display: none;
  gap: 6px;
  margin-right: 8px
}

.mobile-pane-toggle {
  min-width: auto;
  padding: 6px 10px
}

@media(max-width:900px) {
  .shell-research {
    display: block;
    position: relative
  }

  .workspace-sidebar,
  .research-inspector {
    position: fixed;
    top: 52px;
    bottom: 0;
    z-index: 30;
    width: min(88vw, 300px);
    transform: translateX(-110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow)
  }

  .research-inspector {
    right: 0;
    left: auto;
    transform: translateX(110%);
    max-height: none;
    border-top: 0;
    width: min(92vw, 320px)
  }

  .workspace-sidebar.mobile-open {
    transform: translateX(0)
  }

  .research-inspector.mobile-open {
    transform: translateX(0)
  }

  .topbar-mobile {
    display: flex
  }

  .topbar-research {
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    padding: 10px 14px
  }

  .workspace {
    padding: 12px
  }

  .prompt-context-strip .ctx-chip {
    min-width: calc(50% - 6px);
    flex: 1 1 calc(50% - 6px)
  }

  .center-mode-tabs {
    overflow-x: auto;
    flex-wrap: nowrap
  }

  .inspector {
    display: block
  }
}

@media(min-width:901px) {
  .shell-research .research-inspector {
    display: block;
    max-height: none;
    border-left: 1px solid var(--line)
  }
}

/* V_18 professional workspace */
.page-workspace-v18 .app-header {
  display: none
}

.page-workspace-v18 .shell-chat-first {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px)
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px
}

.msg {
  display: flex;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0
}

.msg.user {
  justify-content: flex-end
}

.msg.assistant {
  justify-content: flex-start
}

.msg-bubble {
  max-width: min(720px, 92%);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .045)
}

.msg-bubble-user {
  background: rgba(45, 106, 79, .18);
  border-color: var(--forest);
  border-bottom-right-radius: 6px
}

.msg-bubble-assistant {
  background: rgba(255, 255, 255, .05);
  border-bottom-left-radius: 6px
}

.msg-answer {
  font-size: 15px
}

.msg-footer {
  font-size: 11px;
  margin-top: 8px
}

.msg-academic-details {
  margin-top: 10px;
  font-size: 12px
}

.msg-academic-details summary {
  cursor: pointer;
  color: var(--accent2)
}

.academic-tabs {
  display: grid;
  gap: 8px;
  margin-top: 8px
}

.academic-tab-panel h4 {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.workspace-source-note,
.workspace-empty-note {
  font-size: 12px;
  color: var(--muted);
  padding: 0 12px 8px;
  line-height: 1.45
}

.workspace-empty-state {
  padding: 12px 12px 10px;
  max-width: 460px;
}

.workspace-empty-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.workspace-empty-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
}

.workspace-empty-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}

.workspace-empty-hint {
  font-size: 12px;
  margin: 0;
}

.workspace-empty-state .btn {
  min-height: 44px;
}

.composer-plus-wrap {
  position: relative
}

.composer-plus-btn {
  min-width: 36px;
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px
}

.composer-plus-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 6px;
  box-shadow: var(--shadow);
  z-index: 50;
  display: grid;
  gap: 2px
}

.composer-menu-group {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.composer-menu-item {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px
}

.composer-menu-item:hover {
  background: rgba(82, 183, 136, .1)
}

.composer-menu-item:focus-visible {
  outline: 2px solid var(--accent, #52b788);
  outline-offset: -2px;
}

.composer-menu-icon {
  display: inline-block;
  width: 1.3em;
  margin-right: 6px;
  text-align: center;
}

.composer-menu-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 6px;
}

/* === V_64: + menu submenu (Kết nối nguồn), disabled item, mobile bottom sheet === */
.composer-plus-sheet-header {
  display: none;
}

/* R34E: ToolHub search/filter input (renderR22EPlusMenu in app.js is the
   actual live ToolHub renderer — composer-ai-sync.js's own searchable
   version never runs because this function's dataset flags cause it to
   bail out early). */
.r22e-plus-search-wrap {
  padding: 4px 4px 8px;
}
.r22e-plus-search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: inherit;
  font-size: 13px;
  padding: 7px 10px;
}
.r22e-plus-search-input:focus {
  outline: none;
  border-color: rgba(82, 132, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
}
.composer-menu-item.hidden,
.composer-menu-group.hidden {
  display: none !important;
}

.composer-menu-item-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.composer-menu-caret {
  font-size: 11px;
  opacity: .7;
}

.composer-submenu {
  display: grid;
  gap: 2px;
  padding-left: 8px;
  border-left: 2px solid var(--line);
  margin: 0 0 2px 12px;
}

.composer-submenu.hidden {
  display: none;
}

.composer-submenu-item {
  font-size: 12.5px;
}

.composer-menu-item-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.composer-menu-item-disabled:hover {
  background: transparent;
}

@media (max-width: 768px) {
  body.composer-plus-sheet-open {
    overflow: hidden;
  }

  body.composer-plus-sheet-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 60;
  }

  body.composer-plus-sheet-open .composer-plus-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-width: 0;
    width: 100%;
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    z-index: 61;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
  }

  body.composer-plus-sheet-open .composer-plus-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }

  body.composer-plus-sheet-open .composer-plus-sheet-title {
    font-weight: 600;
    font-size: 14px;
  }

  body.composer-plus-sheet-open .composer-plus-close {
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }

  body.composer-plus-sheet-open .composer-menu-item {
    padding: 12px 10px;
    font-size: 14px;
  }
}

.composer-inline-fields {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04)
}

.composer-inline-fields.hidden {
  display: none
}

.composer-inline-fields input {
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px
}

.lab-open-btn {
  margin-top: 12px;
  width: 100%
}

.lab-tools-dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  max-width: 640px;
  width: min(92vw, 640px)
}

.lab-tools-dialog::backdrop {
  background: rgba(0, 0, 0, .45)
}

.lab-tools-dialog-inner {
  padding: 0
}

.lab-tools-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line)
}

.lab-tools-list {
  display: grid;
  gap: 10px;
  padding: 14px 16px 18px;
  max-height: 70vh;
  overflow: auto
}

.lab-tool-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03)
}

.lab-tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px
}

.lab-tool-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap
}

.lab-tool-honest {
  font-size: 11px
}

.lab-connector-panel {
  padding: 12px 16px 18px;
  max-height: 70vh;
  overflow: auto
}

.lab-connector-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px
}

.lab-step {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted)
}

.lab-step.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 255, 255, .04)
}

.lab-connector-tool-list {
  display: grid;
  gap: 8px
}

.lab-connector-tool-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12px;
  cursor: pointer
}

.lab-connector-hint {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 10px
}

.lab-input-pointer {
  width: 100%;
  margin: 0 0 8px;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface)
}

.lab-connector-status {
  font-size: 12px;
  margin-top: 8px
}

.admin-lab-connectors {
  margin-bottom: 16px
}

.q1-studio-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.q1-left-panel, .q1-right-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  overflow-y: auto;
  background: var(--surface);
}

.q1-left-panel { min-width: 0; }
.q1-right-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.q1-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.q1-field select, .q1-field textarea, .q1-field input {
  font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}

.q1-left-actions, .q1-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.q1-readiness-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.q1-outline-tree { font-size: 12px; }
.q1-outline-node summary { cursor: pointer; font-weight: 600; }

.q1-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.q1-tab { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.q1-tab.active { background: var(--accent, #2563eb); color: #fff; }

.q1-tab-body { flex: 1; min-height: 0; overflow-y: auto; font-size: 12px; }
.q1-table-scroll { overflow-x: auto; max-width: 100%; }
.q1-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.q1-table th, .q1-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.q1-datasets-tab .q1-dataset-list, .q1-datasets-tab .q1-kaggle-results { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.q1-dataset-card, .q1-kaggle-result { padding: 8px; }
.q1-dataset-preview { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.q1-dataset-file-preview { margin-bottom: 6px; }
.q1-dataset-preview-rows { max-height: 160px; overflow: auto; font-size: 10px; background: var(--surface-2, rgba(0,0,0,.03)); padding: 6px; border-radius: 4px; }
.q1-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.q1-checklist li { display: flex; align-items: center; gap: 6px; }
.q1-check-toggle { border: none; background: none; cursor: pointer; font-size: 14px; }
.q1-lit-form, .q1-meth-form { display: flex; flex-direction: column; gap: 6px; }
.q1-error { color: var(--danger, #b91c1c); font-size: 12px; }
.q1-export-counts { list-style: none; padding: 0; margin: 6px 0; font-size: 12px; }
.q1-missing { color: var(--danger, #b91c1c); font-size: 12px; }
.status-pill-warn { color: var(--danger, #b91c1c); }

@media (max-width: 900px) {
  .q1-studio-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .q1-left-panel { order: 2; max-height: 240px; }
  .q1-right-panel { order: 1; max-height: 60vh; }
}

.manuscript-studio-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100vh - 140px);
  padding: 0 4px
}

.manuscript-studio-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between
}

.manuscript-studio-meta {
  font-size: 12px;
  flex: 1;
  min-width: 200px
}

.manuscript-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center
}

.manuscript-select {
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface)
}

.manuscript-editor {
  flex: 1;
  min-height: 280px;
  width: 100%;
  font-size: 13px;
  line-height: 1.55;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  resize: vertical
}

.manuscript-export-status {
  font-size: 12px;
  padding: 0 4px
}

.manuscript-inspector-block {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line)
}

.admin-compact-table td {
  vertical-align: top
}

.admin-compact-table td:first-child {
  width: 38%
}

.admin-connector-setup-table td:nth-child(4) code {
  font-size: .78rem;
  word-break: break-word
}

.session-history-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: .5rem 0 1rem;
  padding: 0 .25rem;
  /* R96-CLAUDE-POLISH: this base rule's own max-height:220px/overflow:auto
     was the ORIGINAL source of the nested-scrollbar-under-history bug —
     confirmed live it's what workspace-product.css's own max-height:34vh
     rule (already fixed) was stacking on top of. #sessionHistoryList only
     has one usage in the whole app (the sidebar), and the single outer
     .sidebar-scroll-body already owns scrolling for the entire sidebar. */
}

.session-history-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem .55rem;
  border: 1px solid var(--border, #2a3344);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .82rem
}

.session-history-item.active {
  border-color: var(--accent, #5b8cff);
  background: rgba(91, 140, 255, .08)
}

.session-history-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sidebar-new-project {
  margin: .25rem 0 .75rem;
  width: 100%
}

.admin-row-detail {
  font-size: 11px;
  margin-top: 3px
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.admin-row-actions .btn {
  padding: 6px 8px;
  font-size: 11px
}

.admin-table-wrap {
  margin-bottom: 14px
}

.admin-card-grid.admin-sections {
  display: block
}

.quick-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 8px
}

/* V_19 AgentTex-like academic workspace */
.page-workspace-v19 .app-header {
  display: none
}

.shell-v19 {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) minmax(300px, 360px);
  min-height: 100vh
}

.shell-v19 .workspace-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 12px;
  overflow: auto;
  transform: none
}

.shell-v19 .workspace-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line)
}

.shell-v19 .reviewer-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto
}

.workspace-topbar-minimal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  min-height: 44px
}

.nav-new-chat {
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-bottom: 4px
}

.sidebar-project {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}

.sidebar-project-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap
}

/* V_65: "Dự án" pill promoted into its own labeled section (header + new
   project button + manage link) instead of a bare <select>, closer to a
   ChatGPT-style Projects block without replacing the working dropdown. */
.sidebar-projects-section {
  margin-bottom: 8px;
}

.sidebar-projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .25rem .25rem;
}

.sidebar-projects-head .sidebar-section-label {
  padding: 0;
  /* R60-FIX: force the same weight/color as the "Lịch sử" label below it —
     these two headers were rendering at different boldness (700 vs 600) and
     different color depending on CSS load order, which read as visually
     inconsistent between "sections" instead of siblings in one flow. */
  font-weight: 600;
  color: var(--muted);
}

.sidebar-new-project {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  line-height: 1;
  font-size: 14px;
}

.sidebar-new-project:hover {
  background: rgba(82, 183, 136, .15);
}

.sidebar-project-pill-icon {
  font-size: 14px;
  flex: 0 0 auto;
}

.sidebar-manage-project {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11.5px;
  padding: 2px .25rem;
  cursor: pointer;
}

.sidebar-manage-project:hover {
  color: var(--text);
  text-decoration: underline;
}

.workspace-sidebar.sidebar-collapsed .sidebar-projects-head,
.workspace-sidebar.sidebar-collapsed .sidebar-manage-project,
.workspace-sidebar.sidebar-collapsed .sidebar-project-pill-icon {
  display: none;
}

.sidebar-history-section {
  margin-top: auto;
  /* R60-FIX: ChatGPT's sidebar has no hard divider between the pinned
     projects/folders list and the "Chats" section below it — they read as
     one continuous list, just with a small label. Drop the border so
     Projects → Chats flows seamlessly instead of feeling like two separate
     boxes stacked on top of each other. */
  padding-top: 6px;
}

.sidebar-section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  padding: 0 .25rem .25rem
}

.workspace-sidebar.sidebar-collapsed .sidebar-section-label {
  display: none
}

.sidebar-project .project-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text)
}

.project-actions-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05)
}

.project-actions-btn:hover {
  background: rgba(82, 183, 136, .12)
}

.workspace-nav-v19 {
  display: grid;
  gap: 4px;
  flex: 1
}

.nav-v19-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  text-align: left
}

.nav-v19-item:hover,
.nav-v19-item.active {
  background: rgba(82, 183, 136, .12);
  border-color: rgba(82, 183, 136, .35)
}

.nav-v19-icon {
  width: 22px;
  text-align: center;
  font-size: 16px;
  line-height: 1
}

.nav-v19-label {
  font-size: 14px;
  font-weight: 500
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line)
}

.sidebar-settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px
}

.sidebar-settings-btn:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text)
}

.workspace-center-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0
}

.workspace-center-pane .chat-primary {
  flex: 1;
  overflow: auto;
  padding: 16px 18px
}

.composer-v19 {
  margin: 0 16px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  padding: 10px 12px;
  display: grid;
  gap: 8px
}

.composer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.composer-badge {
  font-size: 11px;
  padding: 4px 8px
}

.model-select-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0
}

.composer-thinking-select {
  font-size: 11px;
  max-width: 148px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: inherit
}

.source-scope-select {
  font-size: 11px;
  max-width: 140px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-right: 6px
}

.thinking-trace-panel {
  margin-top: 8px;
  font-size: 12px
}

.thinking-trace-steps {
  margin: 6px 0 0;
  padding-left: 18px
}

.source-risk-flags {
  font-size: 11px;
  margin: 4px 0
}

.model-badge {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.composer-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 8px
}

.composer-slash-hint {
  display: none
}

.composer-slash-select {
  max-width: 148px;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d172a;
  color: var(--text)
}

.workspace-advanced-only {
  display: none !important
}

.page-workspace-v19 .platform-diagnostic {
  display: none !important
}

.reviewer-doc-card {
  padding: 4px 2px
}

.reviewer-chunk {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.5
}

.reviewer-anchor-note {
  font-size: 11px;
  margin-top: 8px
}

.reviewer-subhead {
  font-size: 12px;
  margin: 12px 0 6px;
  color: var(--muted)
}

.citation-marker {
  border: 0;
  background: rgba(82, 183, 136, .18);
  color: var(--accent2);
  border-radius: 6px;
  padding: 0 5px;
  margin: 0 1px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  vertical-align: super
}

.citation-marker:hover {
  background: rgba(82, 183, 136, .32)
}

.md-body h2,
.md-body h3,
.md-body h4 {
  margin: .6em 0 .35em;
  font-size: 1em
}

.md-body code {
  font-family: ui-monospace, Menlo, Consolas, monospace
}

@media(max-width:1100px) {
  .shell-v19 {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .shell-v19 .reviewer-panel {
    position: fixed;
    right: 0;
    top: 44px;
    bottom: 0;
    width: min(92vw, 360px);
    z-index: 35;
    transform: translateX(110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow)
  }

  .shell-v19 .reviewer-panel.mobile-open {
    transform: translateX(0)
  }
}

@media(max-width:760px) {
  .shell-v19 {
    grid-template-columns: 1fr
  }

  .shell-v19 .workspace-sidebar {
    position: fixed;
    left: 0;
    top: 44px;
    bottom: 0;
    width: min(88vw, 260px);
    z-index: 35;
    transform: translateX(-110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow)
  }

  .shell-v19 .workspace-sidebar.mobile-open {
    transform: translateX(0)
  }
}

/* V_31 — compact workspace polish */
.nav-v19-item {
  padding: 7px 10px;
  border-radius: 10px;
  min-height: 36px
}

.nav-v19-label {
  font-size: 13px
}

.nav-v19-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(82, 183, 136, .14);
  color: var(--accent2);
  line-height: 1.3
}

.session-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px
}

.session-history-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted)
}

.session-history-highlight {
  outline: 1px solid rgba(82, 183, 136, .45);
  outline-offset: 2px;
  border-radius: 10px
}

.session-history-empty-wrap .workspace-empty-state {
  padding: 4px 0
}

.sidebar-footer-note {
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px
}

.composer-v19 .composer-row textarea {
  min-height: 72px;
  max-height: 200px;
  font-size: 14px;
  line-height: 1.45
}

.composer-slash-select.hidden {
  display: none
}

.composer-slash-select.composer-slash-visible {
  display: block
}

.source-discovery-results {
  max-height: min(52vh, 520px);
  overflow-y: auto;
  overflow-x: hidden
}

.source-candidate-card {
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .03)
}

.source-candidate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 8px 0;
  font-size: 11px
}

.source-field dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em
}

.source-field dd {
  margin: 2px 0 0;
  word-break: break-word
}

.source-candidate-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end
}

.msg-route-line {
  margin-top: 6px
}

.route-soft-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  display: inline-block
}

.admin-tabs .admin-tab {
  padding: 6px 10px;
  font-size: 12px
}

.admin-action-result {
  min-height: 2em;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.45
}

.admin-action-result-visible {
  border-color: rgba(82, 183, 136, .35);
  background: rgba(82, 183, 136, .08)
}

.admin-app-version {
  font-size: 11px;
  margin-left: 10px;
  align-self: center
}

.topbar-admin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px
}

.research-inspector .inspector-tabs {
  gap: 4px;
  margin-bottom: 8px
}

.research-inspector .inspector-tab {
  font-size: 11px;
  padding: 5px 9px
}

@media(max-width:1100px) {
  .source-candidate-fields {
    grid-template-columns: 1fr
  }
}

.source-library-workspace,
.projects-workspace {
  margin: 12px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  max-height: calc(100vh - 180px);
  overflow: auto
}

.source-library-head,
.projects-workspace-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.source-library-head h2,
.projects-workspace-head h2 {
  margin: 0;
  font-size: 16px
}

.source-library-actions,
.projects-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px
}

.projects-workspace-meta {
  font-size: 12px;
  margin: 4px 0 0
}

.source-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.source-panel-candidates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow: auto
}

.source-panel-card {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02)
}

.source-panel-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.35
}

.source-panel-card-actions {
  margin-top: 6px
}

.source-panel-table td,
.source-panel-table th {
  white-space: normal;
  word-break: break-word
}

.source-panel-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}

.source-panel-error {
  color: var(--warn, #c90)
}

.projects-workspace-sub {
  margin: 0
}

.project-module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  transition: border-color .15s, transform .15s
}

.project-module-card:hover {
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-1px)
}

.project-module-icon {
  font-size: 18px;
  line-height: 1
}

.chat-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: center
}

.chat-empty-state {
  padding: 32px 20px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto
}

.app-toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none
}

.app-toast {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(20, 24, 32, .96);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  max-width: 320px
}

.app-toast-in {
  opacity: 1;
  transform: translateY(0)
}

.app-toast-out {
  opacity: 0;
  transform: translateY(4px)
}

.app-toast-ok {
  border-color: rgba(80, 180, 120, .45)
}

.app-toast-warn {
  border-color: rgba(200, 160, 60, .45)
}

.project-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  width: calc(100vw - 32px);
  background: var(--panel, #1a1f28);
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4)
}

.project-modal-form {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.project-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px
}

.project-modal-form input,
.project-modal-form textarea,
.project-modal-form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
  color: inherit
}

.project-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px
}

.source-library-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px
}

.source-library-tab {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer
}

.source-library-tab.active {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2)
}

.source-library-lead {
  max-width: 52rem;
  line-height: 1.45
}

.source-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px
}

.source-library-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, .03)
}

.source-library-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start
}

.source-library-card h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.35
}

.source-card-meta,
.source-card-doi {
  font-size: 11px;
  margin: 6px 0
}

.source-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0
}

.source-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px
}

.chat-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted, #888)
}

.composer-drag-over {
  outline: 2px dashed rgba(120, 170, 255, .45);
  outline-offset: 4px
}

.workspace-main {
  position: relative
}

.document-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 32, .72);
  border: 2px dashed rgba(120, 170, 255, .55);
  border-radius: 12px;
  pointer-events: none
}

.document-drop-overlay p {
  margin: 0;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #e8f0ff;
  text-align: center
}

.document-drop-overlay.hidden {
  display: none
}

.doc-card-error {
  color: #f0a8a8;
  font-size: 12px;
  margin: 6px 0
}

.manuscript-editor,
.manuscript-preview-pane,
.manuscript-side-panel .manuscript-preview-pane {
  text-align: justify;
  text-justify: inter-word
}

.manuscript-editor {
  hyphens: auto
}

.workspace-main.document-drop-active .document-drop-overlay {
  pointer-events: none
}

.workspace-main.document-drop-active #chat,
.workspace-main.document-drop-active .composer {
  pointer-events: auto
}

.source-library-table {
  font-size: 11px;
  width: 100%;
  table-layout: fixed
}

.source-library-table td,
.source-library-table th {
  word-break: break-word;
  vertical-align: top;
  padding: 6px 5px
}

.projects-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0
}

.project-module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  text-align: left;
  width: 100%
}

.project-module-card:hover {
  border-color: rgba(82, 183, 136, .45)
}

.project-module-count {
  font-size: 1.25rem;
  font-weight: 700
}

.project-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 480px;
  width: 92vw;
  background: var(--panel, #151b28);
  color: inherit
}

.project-modal-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.project-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600
}

.project-modal-form input,
.project-modal-form textarea,
.project-modal-form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg, #0f1419);
  color: inherit
}

.project-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px
}

.admin-config-snippet {
  max-height: 200px;
  overflow: auto;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
  white-space: pre-wrap
}

.admin-security-warn {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px
}

#prompt {
  min-height: 72px;
  line-height: 1.45
}

/* V_40 compact project manager + workspace */
.shell-v19 {
  grid-template-columns: 220px minmax(0, 1fr) 340px;
}

.shell-v19 .workspace-sidebar {
  padding: 12px 10px;
  gap: 8px
}

.module-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left
}

.module-nav-item:hover,
.module-nav-item.active {
  background: rgba(255, 255, 255, .06)
}

.module-nav-icon {
  width: 18px;
  text-align: center;
  opacity: .85
}

.module-nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  padding: 1px 6px;
  border-radius: 999px
}

.nav-collapse-btn {
  align-self: flex-end;
  margin: 2px 0 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px
}

.workspace-sidebar.sidebar-collapsed {
  width: 64px;
  min-width: 64px;
  overflow: hidden
}

.workspace-sidebar.sidebar-collapsed .brand-copy,
.workspace-sidebar.sidebar-collapsed .nav-new-chat,
.workspace-sidebar.sidebar-collapsed .session-history-list,
.workspace-sidebar.sidebar-collapsed .sidebar-history-section,
.workspace-sidebar.sidebar-collapsed .projects-section,
.workspace-sidebar.sidebar-collapsed .sidebar-project-label,
.workspace-sidebar.sidebar-collapsed .sidebar-footer-note,
.workspace-sidebar.sidebar-collapsed .module-nav-label,
.workspace-sidebar.sidebar-collapsed .module-nav-count,
.workspace-sidebar.sidebar-collapsed .nav-v19-label,
.workspace-sidebar.sidebar-collapsed .nav-v19-count {
  /* Both .module-nav-* (project-manager.js's renderCompactModuleNav) and
     .nav-v19-* (workspace-shell.js's same-named function) are real markup —
     both files assign window.renderCompactModuleNav, and project-manager.js
     loads after workspace-shell.js in index.html so its version currently
     wins, but this is a fragile, easy-to-flip dependency on script order
     (a real structural duplication, flagged in this round's report rather
     than risking a rename/dedupe of two global functions in the same pass
     as a CSS fix). Hiding both label/count class names here means the
     collapsed icon rail can't show full label text regardless of which
     definition is active today or after a future unrelated edit. */
  display: none
}

.workspace-sidebar.sidebar-collapsed .nav-collapse-btn {
  transform: rotate(180deg)
}

.workspace-sidebar.sidebar-collapsed .module-nav-item,
.workspace-sidebar.sidebar-collapsed .module-nav-compact,
.workspace-sidebar.sidebar-collapsed .nav-v19-item {
  justify-content: center;
  padding: 8px 0
}

.workspace-sidebar.sidebar-collapsed .sidebar-project {
  flex-direction: column;
  align-items: stretch
}

.workspace-sidebar.sidebar-collapsed .sidebar-project-label {
  display: none
}

.wph-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.wph-title {
  font-size: 1.1rem;
  margin: 0
}

.wph-topic,
.wph-context {
  font-size: 12px;
  margin: 4px 0 0
}

.wph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.sidebar-project {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative
}

.project-actions-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 40;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #151b28);
  box-shadow: var(--shadow)
}

.project-actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer
}

.project-actions-menu button:hover {
  background: rgba(255, 255, 255, .06)
}

.project-manager-modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 640px;
  width: 94vw;
  background: var(--panel, #151b28);
  color: inherit
}

.project-manager-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 85vh
}

.project-manager-head h2 {
  margin: 0 0 8px;
  font-size: 1.05rem
}

.project-manager-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg, #0f1419);
  color: inherit
}

.project-manager-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.pm-tab {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer
}

.pm-tab.active {
  background: rgba(82, 183, 136, .18);
  border-color: rgba(82, 183, 136, .45)
}

.project-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  max-height: 50vh;
  padding-right: 4px
}

.pm-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02)
}

.pm-row h4 {
  margin: 0 0 4px;
  font-size: 14px
}

.pm-meta {
  font-size: 11px
}

.pm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start
}

.project-activity-panel,
.project-activity-panel-right {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02)
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px
}

.activity-icon {
  width: 22px;
  text-align: center;
  opacity: .85
}

.activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.activity-summary {
  line-height: 1.35
}

.activity-time {
  font-size: 11px
}

.context-panel-card h3 {
  margin: 0 0 6px;
  font-size: 14px
}

.context-stats {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-size: 12px
}

.context-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px
}

.documents-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.documents-drive-warn {
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed var(--line)
}

.session-context-menu {
  position: fixed;
  z-index: 50;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #151b28);
  box-shadow: var(--shadow)
}

.session-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer
}

.session-context-menu button:hover {
  background: rgba(255, 255, 255, .06)
}

.workspace-advanced-only {
  display: none
}

body.inspector-debug .workspace-advanced-only {
  display: block
}

@media (max-width:900px) {
  .shell-v19 {
    grid-template-columns: 1fr
  }

  .wph-actions {
    width: 100%
  }
}

/* V_41 professional research UI */
.composer-v41 .composer-badges {
  display: none
}

.composer-v41 .composer-row {
  align-items: flex-end;
  gap: 8px
}

.composer-v41 #prompt {
  flex: 1;
  min-height: 52px;
  max-height: 160px;
  resize: vertical
}

.composer-v41 .composer-auto-chip {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  align-self: center
}

.composer-v41 .composer-plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.1rem
}

.sidebar-v41-hidden {
  display: none
}

.academic-source-card,
.academic-card-grid .academic-source-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, .025);
  margin-bottom: 8px
}

.academic-source-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start
}

.academic-source-head h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35
}

.academic-source-meta,
.academic-source-foot {
  font-size: 12px;
  margin: 6px 0
}

.academic-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px
}

.source-quality-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line)
}

.source-quality-high {
  background: rgba(82, 183, 136, .15)
}

.source-quality-medium {
  background: rgba(255, 193, 7, .12)
}

.source-quality-low {
  background: rgba(255, 255, 255, .04)
}

.provider-chip {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted)
}

.chat-context-strip-wrap {
  padding: 8px 16px 0
}

.chat-context-strip {
  font-size: 12px;
  margin: 0
}

.msg-meta-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05)
}

.msg-meta-line {
  margin-top: 8px
}

.doc-library-tabs,
.doc-card-grid {
  margin-top: 10px
}

.doc-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.pf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pf-import-note { font-size: 12px; }
.pf-filter-tabs { margin-bottom: 10px; }
.pf-src-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.pf-src-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted, rgba(128, 128, 128, 0.15));
}
.pf-rag-ready-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--success-color, #4caf50);
  border: 1px solid currentColor;
  margin-left: 4px;
}
.pf-cached-note { font-size: 11px; }

.doc-tab {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer
}

.doc-tab.active {
  background: rgba(82, 183, 136, .16);
  border-color: rgba(82, 183, 136, .4)
}

.doc-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .02)
}

.doc-card h4 {
  margin: 0 0 6px;
  font-size: 14px
}

.doc-card-grid {
  display: grid;
  gap: 8px
}

.doc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px
}

.doc-card-note {
  font-size: 11px;
  margin: 4px 0
}

.doc-card-result {
  margin-top: 6px
}

.doc-summary-actions {
  margin-bottom: 6px
}

.doc-summary-pre {
  white-space: pre-wrap;
  font-size: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px
}

.doc-detail-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .02)
}

.doc-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px
}

.doc-chunk-list, .doc-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.doc-chunk-item, .doc-ref-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  font-size: 12px
}

.doc-chunk-idx {
  font-weight: 600
}

@media (max-width: 720px) {
  .doc-card-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px
  }
  .doc-card-actions .btn {
    flex: 0 0 auto
  }
}

.project-actions-menu {
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35)
}

.project-actions-menu button {
  padding: 8px 12px;
  font-size: 13px
}

/* V_42 research workspace shell */
.page-workspace .workspace-sidebar {
  padding: 10px 8px
}

.page-workspace .brand-copy h1 {
  font-size: 15px
}

.page-workspace .brand-copy small {
  display: none
}

.page-workspace .nav-new-chat {
  width: 100%;
  margin: 8px 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px
}

.page-workspace .module-nav-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin: 2px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer
}

.page-workspace .module-nav-compact:hover {
  background: rgba(255, 255, 255, .05)
}

.page-workspace .module-nav-compact.active {
  background: rgba(82, 183, 136, .14)
}

.page-workspace .module-nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center
}

.page-workspace .module-nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted)
}

.page-workspace .session-history-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 10px;
  width: 100%;
  text-align: left
}

.page-workspace .session-history-date {
  font-size: 11px
}

.page-workspace .wph-compact {
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--line)
}

.page-workspace .wph-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.page-workspace .wph-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600
}

.page-workspace .wph-menu-btn {
  min-width: 32px;
  padding: 4px 8px
}

.page-workspace .wph-context {
  font-size: 12px;
  margin: 4px 0 0
}

.page-workspace .composer-v42 .composer-badges {
  display: none !important
}

.page-workspace .composer-v42 .composer-auto-chip {
  display: none !important
}

.page-workspace .composer-v42 .send {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1
}

.page-workspace .projects-workspace {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px
}

.page-workspace .projects-module-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px
}

.page-workspace .project-module-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02)
}

.page-workspace .project-overview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0
}

.page-workspace .project-overview-activity {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line)
}

.page-workspace .knowledge-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0
}

.page-workspace .knowledge-tab {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer
}

.page-workspace .knowledge-tab.active {
  background: rgba(82, 183, 136, .16);
  border-color: rgba(82, 183, 136, .4)
}

.page-workspace .knowledge-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px
}

.page-workspace .activity-timeline-compact {
  font-size: 12px
}

.page-workspace .project-manager-v42 {
  width: min(900px, 94vw);
  max-width: 900px
}

.page-workspace .chat-empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted)
}

.page-workspace .chat-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px
}

.page-workspace #projectActivityPanel {
  display: none !important
}

/* V_43 context sync + polish */
.page-workspace .workspace-topbar-minimal {
  min-height: 0;
  padding: 4px 8px;
  border: 0
}

.page-workspace .workspace-topbar-minimal .mobile-pane-toggle {
  display: none
}

.page-workspace .sidebar-account {
  margin-top: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--line)
}

.page-workspace .sidebar-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer
}

.page-workspace .sidebar-account-btn:hover {
  background: rgba(255, 255, 255, .05)
}

.page-workspace .sidebar-install-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px 6px;
  padding: 8px 10px;
  border: 1px solid rgba(124, 196, 255, .35);
  border-radius: 8px;
  background: rgba(124, 196, 255, .08);
  color: inherit;
  font-size: 13px;
  cursor: pointer
}

.page-workspace .sidebar-install-btn:hover {
  background: rgba(124, 196, 255, .16)
}

.page-workspace .sidebar-account-avatar {
  font-size: 14px;
  opacity: .7
}

.page-workspace .project-actions-menu {
  min-width: 220px
}

.page-workspace .project-menu-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0
}

/* ChatGPT-Projects-style sidebar project list */
.project-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.project-section-header .section-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  display: flex;
  gap: 2px;
}

.project-section-header:hover .section-actions,
.project-section-header:focus-within .section-actions {
  opacity: 1;
  pointer-events: auto;
}

.projects-section.is-collapsed .project-list,
.projects-section.is-collapsed .sidebar-projects-footer {
  display: none;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
}

.project-list-empty {
  font-size: 12px;
  padding: 6px 8px;
}

.project-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.project-item:hover {
  background: rgba(255, 255, 255, .08);
}

.project-item.is-active {
  background: rgba(255, 255, 255, .14);
}

.project-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.project-icon {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}

.project-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.project-name,
.project-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-name {
  font-size: 13px;
}

.project-meta {
  font-size: 11px;
  opacity: .65;
}

.project-actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.project-item:hover .project-actions,
.project-item:focus-within .project-actions,
.project-item.is-active .project-actions {
  opacity: 1;
  pointer-events: auto;
}

.project-actions .icon-btn,
.project-section-header .section-actions .icon-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
}

.project-actions .icon-btn:hover {
  background: rgba(255, 255, 255, .12);
}

.sidebar-collapsed .project-text,
.sidebar-collapsed .project-actions {
  display: none;
}

.sidebar-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebar-projects-footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 4px;
  padding: 0 2px;
}

.sidebar-projects-footer.is-empty {
  display: none;
}

.sidebar-show-more,
.sidebar-manage-link {
  display: block;
  border: 0;
  background: transparent;
  color: var(--muted-text, rgba(255, 255, 255, .58));
  font-size: 12px;
  padding: 4px 8px;
  min-height: 32px;
  text-align: left;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
}

.sidebar-show-more:hover,
.sidebar-manage-link:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--text, #fff);
}

.sidebar-manage-link.hidden {
  display: none;
}

.sidebar-show-more.hidden {
  display: none;
}

.sidebar-collapsed .sidebar-projects-footer {
  display: none;
}

.project-organize-menu {
  position: fixed;
  min-width: 220px;
  z-index: 60;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #151b28);
  box-shadow: var(--shadow);
}

.project-organize-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.project-organize-menu button:hover {
  background: rgba(255, 255, 255, .06);
}

.project-actions-menu [data-project-action="delete"],
.project-actions-menu .project-action-danger {
  color: var(--danger, #b91c1c);
}

.project-hub-modal {
  width: min(640px, 92vw);
  max-height: 80vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
}

.project-hub-form {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.project-hub-head {
  padding: 16px 18px 8px;
}

.project-hub-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.project-hub-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.project-hub-tab {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.project-hub-tab.active {
  border-bottom-color: rgba(82, 183, 136, .7);
}

.project-hub-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}

.project-hub-counts {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 13px;
}

.project-hub-empty.api-missing {
  opacity: .7;
  font-size: 12px;
}

.project-hub-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

@media (hover: none) {
  .project-item.is-active .project-actions,
  .project-item:focus-within .project-actions,
  .project-section-header .section-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.page-workspace .inspector-tabs .inspector-tab {
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 2px solid transparent
}

.page-workspace .inspector-tabs .inspector-tab.active {
  border-bottom-color: rgba(82, 183, 136, .7);
  background: transparent
}

.page-workspace .chat {
  font-size: 15px;
  line-height: 1.55
}

.page-workspace .composer-v42 #prompt {
  font-size: 15px;
  scrollbar-width: thin
}

.page-workspace .knowledge-upload-zone {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center
}

.page-workspace .knowledge-upload-zone.drag-over {
  background: rgba(82, 183, 136, .08);
  border-color: rgba(82, 183, 136, .4)
}

.page-workspace .sidebar-project .project-actions-btn {
  display: none
}

.page-workspace .wph-menu-btn {
  margin-left: auto
}

/* V_44 Mobile-first workspace */
.page-workspace .workspace-topbar-minimal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line)
}

.page-workspace .mobile-workspace-header {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0
}

.page-workspace .mobile-header-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center
}

.page-workspace .mobile-drawer-btn,
.page-workspace .mobile-overflow-btn {
  min-width: 36px;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1
}

.page-workspace .mobile-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100
}

.page-workspace .mobile-nav-drawer.hidden {
  display: none
}

.page-workspace .mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45)
}

.page-workspace .mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 86vw);
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.page-workspace .mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.page-workspace .mobile-drawer-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer
}

.page-workspace .mobile-drawer-item:hover {
  background: rgba(255, 255, 255, .05)
}

.page-workspace .composer-plus-menu-v44 {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.page-workspace .composer-v42 {
  padding-bottom: max(8px, env(safe-area-inset-bottom))
}

.page-workspace .composer-v42 #prompt {
  max-height: calc(1.55em * 4);
  resize: none
}

.page-workspace .chat {
  font-size: 15px
}

.page-workspace .msg.user {
  max-width: min(92%, 520px)
}

.page-workspace .msg.assistant {
  max-width: min(96%, 680px)
}

.page-workspace .manuscript-studio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px
}

.page-workspace .manuscript-studio-tabs {
  display: none;
  gap: 6px;
  flex-wrap: wrap
}

.page-workspace .manuscript-tab {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer
}

.page-workspace .manuscript-tab.active {
  background: rgba(82, 183, 136, .16);
  border-color: rgba(82, 183, 136, .4)
}

.page-workspace .manuscript-preview-pane,
.page-workspace .manuscript-versions-pane {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-height: 200px;
  overflow: auto
}

.page-workspace .manuscript-writing-actions {
  margin-top: 8px
}

.page-workspace .manuscript-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0
}

.manuscript-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0
}

.manuscript-action-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 15px;
  border-radius: 8px
}

.manuscript-action-select-wrap {
  flex: 1 1 200px;
  min-width: 160px
}

.manuscript-action-select {
  width: 100%
}

.manuscript-action-run {
  white-space: nowrap;
  font-weight: 600
}

.page-workspace .manuscript-draft-panel {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px
}

.page-workspace .manuscript-draft-panel pre {
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 240px;
  overflow: auto
}

.page-workspace .deep-research-panel {
  margin: 12px;
  padding: 12px
}

.page-workspace .evidence-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px
}

.page-workspace .evidence-table th,
.page-workspace .evidence-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left
}

@media (max-width:768px) {
  .page-workspace .mobile-workspace-header {
    display: flex
  }

  .page-workspace .workspace-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 86vw);
    z-index: 90;
    transform: translateX(-102%);
    transition: transform .2s ease
  }

  .page-workspace.mobile-drawer-open .workspace-sidebar {
    transform: translateX(0)
  }

  .page-workspace .workspace-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom))
  }

  .page-workspace .composer-v42 {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-bottom: max(8px, env(safe-area-inset-bottom))
  }

  .page-workspace .research-inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 72vh;
    transform: translateY(102%);
    transition: transform .2s ease;
    z-index: 80;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .2)
  }

  .page-workspace .research-inspector.inspector-mobile-open {
    transform: translateY(0)
  }

  .page-workspace .inspector-sheet-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2
  }

  .page-workspace .manuscript-studio-tabs {
    display: flex
  }

  .page-workspace .shell,
  .page-workspace .workspace-main {
    overflow-x: hidden
  }
}

/* V_45 Composer dark-mode fix + Manuscript Studio + Evidence */
.page-workspace .composer-v42 {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin: 0 12px 12px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom))
}

.page-workspace .composer-v42 .composer-row {
  align-items: flex-end;
  gap: 8px
}

.page-workspace .composer-v42 #prompt {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  resize: none;
  color: var(--text);
  min-height: 44px;
  max-height: calc(1.55em * 4);
  line-height: 1.55;
  padding: 10px 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.page-workspace .composer-v42 #prompt::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

.page-workspace .composer-v42 #prompt::-webkit-scrollbar-track {
  background: transparent
}

.page-workspace .composer-v42 #prompt::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.page-workspace .composer-v42 #prompt:focus {
  outline: none;
  box-shadow: none
}

.page-workspace .composer-v42 .composer-badges,
.page-workspace .composer-v42 .composer-auto-chip,
.page-workspace .composer-v42 #sourcesPill {
  display: none !important
}

.page-workspace .composer-v42 .send {
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1
}

.page-workspace .composer-plus-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 60
}

.page-workspace .composer-plus-backdrop.hidden {
  display: none
}

.page-workspace .composer-plus-menu.composer-plus-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  z-index: 70;
  -webkit-overflow-scrolling: touch
}

.page-workspace .manuscript-studio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 420px
}

.page-workspace .manuscript-studio-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(200px, 24vw);
  align-items: start;
  gap: 10px
}

.page-workspace .manuscript-outline-panel,
.page-workspace .manuscript-side-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  overflow: auto;
  max-height: 70vh
}

.page-workspace .manuscript-outline-panel:empty,
.page-workspace .manuscript-side-panel:empty {
  display: none
}

.page-workspace .manuscript-outline-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.page-workspace .manuscript-outline-list .outline-jump {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px
}

.page-workspace .manuscript-outline-list .outline-jump:hover {
  background: rgba(255, 255, 255, .05)
}

.page-workspace .manuscript-editor-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0
}

.page-workspace .manuscript-editor-col .manuscript-editor {
  flex: 1;
  min-height: 280px;
  resize: vertical
}

.page-workspace .manuscript-mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.page-workspace .manuscript-side-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px
}

.page-workspace .manuscript-side-tab {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer
}

.page-workspace .manuscript-side-tab.active {
  background: rgba(82, 183, 136, .16)
}

.page-workspace .track-add {
  background: rgba(82, 183, 136, .12);
  border-left: 3px solid var(--forest);
  padding: 8px;
  margin: 6px 0
}

.page-workspace .track-del {
  background: rgba(220, 53, 69, .08);
  text-decoration: line-through;
  color: var(--muted);
  padding: 8px;
  margin: 6px 0
}

.page-workspace .evidence-table-v45 {
  font-size: 12px
}

.page-workspace .manuscript-cite-warn {
  color: #f0ad4e
}

.manuscript-studio .outline-jump.outline-active {
  background: rgba(82, 183, 136, .14);
  font-weight: 600
}

.manuscript-studio .outline-dot {
  display: inline-block;
  width: 1em;
  text-align: center;
  margin-right: 2px
}

.manuscript-studio .manuscript-section-editor {
  min-height: 280px;
  resize: vertical
}

.manuscript-studio #manuscriptAutosaveHint.ms-autosave-saving {
  color: var(--muted)
}

.manuscript-studio #manuscriptAutosaveHint.ms-autosave-failed {
  color: #f0ad4e
}

.manuscript-studio .manuscript-health-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px
}

.manuscript-studio .ms-health-sub {
  padding-left: 12px
}

.manuscript-studio .manuscript-agents-pane {
  font-size: 12px
}

.manuscript-studio .ms-agent-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px
}

.manuscript-studio .ms-agent-card {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px
}

.manuscript-studio .ms-agent-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap
}

.manuscript-studio .ms-agent-diff summary {
  cursor: pointer;
  margin: 6px 0
}

.manuscript-studio .ms-agent-before,
.manuscript-studio .ms-agent-after,
.manuscript-studio .ms-agent-text {
  max-height: 140px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  background: var(--surface-2, #1a1a1a);
  padding: 6px;
  border-radius: 4px
}

@media (max-width: 390px) {
  .manuscript-studio .ms-agent-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
  }

  .manuscript-studio .ms-agent-card {
    overflow-x: hidden
  }
}

.manuscript-studio .manuscript-citation-pane {
  font-size: 12px
}

.manuscript-studio .ms-citation-doi-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0
}

.manuscript-studio .ms-citation-doi-row input {
  flex: 1;
  min-width: 120px
}

.manuscript-studio .ms-bibtex-input {
  min-height: 72px;
  margin: 6px 0
}

.manuscript-studio .manuscript-citation-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 180px;
  overflow: auto
}

.manuscript-studio .ms-citation-export-row {
  display: flex;
  gap: 6px;
  margin-top: 8px
}

.page-workspace .workspace-topbar-minimal .user-menu {
  display: none
}

@media(max-width:768px) {
  .page-workspace .manuscript-studio-layout {
    grid-template-columns: 1fr
  }

  .manuscript-studio .manuscript-outline-panel {
    display: block;
    max-height: 140px
  }

  .manuscript-studio .manuscript-side-panel {
    display: block;
    max-height: 200px
  }

  .page-workspace .manuscript-outline-panel,
  .page-workspace .manuscript-side-panel {
    display: none
  }

  .page-workspace .manuscript-studio-layout:not(.hidden) .manuscript-editor-col {
    display: block
  }

  .page-workspace .workspace-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom))
  }
}

/* V_46 Deep Research stepper, evidence table, journal panel, scrollbars */
.page-workspace .session-history-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.page-workspace .session-history-list::-webkit-scrollbar {
  width: 6px
}

.page-workspace .session-history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.page-workspace .dr-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px
}

.page-workspace .dr-step {
  flex: 1 1 100px;
  min-width: 90px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03)
}

.page-workspace .dr-step-done {
  background: rgba(82, 183, 136, .12)
}

.page-workspace .dr-step-active {
  outline: 1px solid rgba(82, 183, 136, .35)
}

.page-workspace .dr-step-label {
  display: block;
  font-size: 12px;
  font-weight: 600
}

.page-workspace .dr-step-status {
  font-size: 11px
}

.page-workspace .dr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0
}

.page-workspace .dr-plan-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px
}

.page-workspace .evidence-table-v46 {
  font-size: 12px;
  width: 100%
}

.page-workspace .evidence-table-wrap {
  overflow-x: auto;
  max-width: 100%
}

.page-workspace .journal-check-list {
  list-style: none;
  margin: 8px 0;
  padding: 0
}

.page-workspace .journal-check {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px
}

.page-workspace .journal-check-pass {
  color: var(--forest)
}

.page-workspace .journal-check-error {
  color: #dc3545
}

.page-workspace .manuscript-journal-panel,
.page-workspace .manuscript-export-panel,
.page-workspace .manuscript-evidence-tab,
.page-workspace .manuscript-evidence-map-tab {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px
}

.evidence-map-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12.5px
}

.evidence-map-table th,
.evidence-map-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top
}

.ev-status-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2, #f1f3f5);
  font-size: 11px
}

.ev-risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize
}

.ev-risk-low { background: #d4edda; color: #155724 }
.ev-risk-medium { background: #fff3cd; color: #856404 }
.ev-risk-high { background: #f8d7da; color: #721c24 }

.page-workspace .source-library-grid,
.page-workspace .academic-source-card {
  gap: 12px
}

.page-workspace .academic-source-card {
  padding: 12px;
  margin-bottom: 10px
}

.page-workspace .sidebar .nav-item.active {
  background: rgba(82, 183, 136, .1)
}

.page-workspace .dr-prisma-counts {
  margin: 0;
  padding-left: 18px;
  font-size: 13px
}

/* V_47 Right panel scope, stepper line, sidebar scrollbar, composer minimal */
.page-workspace #projectActivityPanelRight {
  display: none !important
}

.page-workspace .context-quick-actions {
  display: none !important
}

.page-workspace .dr-step-label {
  display: inline;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0
}

.page-workspace .dr-step-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  line-height: 1.35
}

.page-workspace .dr-step-sep {
  color: var(--muted);
  font-weight: 400;
  padding: 0 1px
}

.page-workspace .dr-step-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  vertical-align: baseline
}

.page-workspace .dr-step-done .dr-step-badge {
  background: rgba(82, 183, 136, .2);
  color: #9fd4b8
}

.page-workspace .dr-step-running .dr-step-badge {
  background: rgba(255, 193, 7, .2)
}

.page-workspace .dr-step-review .dr-step-badge {
  background: rgba(82, 183, 136, .25)
}

.page-workspace .dr-step-error .dr-step-badge {
  background: rgba(220, 53, 69, .2)
}

.page-workspace .dr-step-running {
  background: rgba(255, 193, 7, .12)
}

.page-workspace .dr-step-review {
  background: rgba(82, 183, 136, .14)
}

.page-workspace .dr-step-error {
  background: rgba(220, 53, 69, .1)
}

.page-workspace .session-history-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.page-workspace .session-history-list::-webkit-scrollbar {
  width: 6px;
  height: 6px
}

.page-workspace .session-history-list::-webkit-scrollbar-track {
  background: transparent
}

.page-workspace .session-history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.page-workspace .session-history-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted)
}

.page-workspace .sidebar,
.page-workspace .inspector,
.page-workspace .main {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.page-workspace .sidebar::-webkit-scrollbar,
.page-workspace .inspector::-webkit-scrollbar,
.page-workspace .main::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

.page-workspace .sidebar::-webkit-scrollbar-track,
.page-workspace .inspector::-webkit-scrollbar-track,
.page-workspace .main::-webkit-scrollbar-track {
  background: transparent
}

.page-workspace .sidebar::-webkit-scrollbar-thumb,
.page-workspace .inspector::-webkit-scrollbar-thumb,
.page-workspace .main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.page-workspace #chat,
.page-workspace .chat-thread,
.page-workspace .messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent
}

.page-workspace #chat::-webkit-scrollbar,
.page-workspace .chat-thread::-webkit-scrollbar,
.page-workspace .messages::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

.page-workspace #chat::-webkit-scrollbar-track,
.page-workspace .chat-thread::-webkit-scrollbar-track,
.page-workspace .messages::-webkit-scrollbar-track {
  background: transparent
}

.page-workspace #chat::-webkit-scrollbar-thumb,
.page-workspace .chat-thread::-webkit-scrollbar-thumb,
.page-workspace .messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px
}

.page-workspace .composer-badges {
  display: none !important
}

.composer-controls-v60 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  width: 100%
}

.composer-controls-v60 label {
  flex: 1 1 minmax(140px, 1fr);
  min-width: 0
}

.composer-controls-v60 .composer-task-wrap {
  min-width: 180px
}

.composer-controls-v60 .model-select-wrap,
.composer-controls-v60 .thinking-select-wrap {
  min-width: 150px
}

.composer-controls-v60 select {
  width: 100%;
  max-width: 100%;
  font-size: 13px;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  padding: 8px 10px
}

.session-history-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px
}

.session-history-item.active {
  background: rgba(82, 183, 136, .1)
}

.session-history-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  color: inherit
}

.session-history-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  min-height: 13px
}

.session-history-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.5;
  background: rgba(91, 140, 255, .14);
  color: var(--accent, #5b8cff)
}

.session-history-badge.badge-data { background: rgba(82, 183, 136, .14); color: #52b788 }
.session-history-badge.badge-manuscript { background: rgba(245, 166, 35, .14); color: #f5a623 }
.session-history-badge.badge-agent { background: rgba(160, 120, 255, .14); color: #a078ff }
.session-history-badge.badge-general { background: rgba(148, 163, 184, .16); color: #94a3b8 }
.session-history-badge.badge-deep-research { background: rgba(236, 72, 153, .14); color: #ec4899 }

.chat-item-actions {
  flex: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease
}

.session-history-item:hover .chat-item-actions,
.session-history-item:focus-within .chat-item-actions,
.chat-item-actions:has(.session-actions-btn[aria-expanded="true"]) {
  opacity: 1;
  pointer-events: auto
}

.session-actions-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.session-actions-btn:hover,
.session-actions-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .1);
  color: var(--text, #e8f0ff)
}

.session-history-menu {
  z-index: 10000;
  min-width: 180px;
  background: var(--panel2, #161d2c);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px
}

.session-menu-item {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer
}

.session-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, .08)
}

.session-menu-item:disabled {
  opacity: .4;
  cursor: not-allowed
}

.session-menu-danger {
  color: #e5594f
}

.session-menu-danger:hover {
  background: rgba(229, 89, 79, .12)
}

.manuscript-writer-menu {
  position: relative;
  display: inline-flex
}

.manuscript-writer-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 220px;
  margin-top: 4px;
  padding: 8px;
  display: grid;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow)
}

.manuscript-writer-panel .btn {
  width: 100%;
  text-align: left
}

.page-workspace .composer-slash-select,
.page-workspace .composer-auto-chip {
  display: none !important
}

.page-workspace .composer-inline-fields {
  display: none !important
}

.page-workspace .composer-inline-fields:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04)
}

.page-workspace .composer-inline-fields input {
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px
}

.page-workspace .composer-v42 .composer-row {
  grid-template-columns: auto minmax(0, 1fr) auto
}

.page-workspace .composer-controls-v60 label {
  flex: 1 1 minmax(130px, 1fr);
  min-width: 0
}

.page-workspace .composer-controls-v60 .composer-task-wrap {
  min-width: 170px
}

.page-workspace .composer-controls-v60 .model-select-wrap,
.page-workspace .composer-controls-v60 .thinking-select-wrap {
  min-width: 150px
}

.page-workspace .composer-controls-v60 select {
  width: 100%;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  padding: 9px 10px
}

.page-workspace .module-nav-item.active {
  background: rgba(82, 183, 136, .1);
  border-color: transparent;
  box-shadow: none
}

.page-workspace .chat-empty-single {
  padding: 24px 16px;
  text-align: center
}

.page-workspace .admin-worker-jobs {
  font-size: 12px
}

.page-workspace .project-worker-jobs {
  margin: 12px 0;
  padding: 12px 14px
}

.page-workspace .labs-env-banner {
  font-size: 12px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(82, 183, 136, .08);
  border: 1px solid rgba(82, 183, 136, .15)
}

.page-labs-v47 .project-worker-jobs {
  border-color: rgba(82, 183, 136, .2)
}

.page-workspace .worker-jobs-table {
  font-size: 12px;
  width: 100%
}

.page-workspace .doc-job-status {
  font-size: 11px;
  margin: 4px 0 0
}

.page-workspace .worker-chart-wrap {
  max-height: 280px;
  margin: 8px 0
}

.page-workspace .worker-mermaid-src {
  font-size: 11px;
  max-height: 120px;
  overflow: auto
}

.page-workspace .worker-mermaid-render {
  margin: 8px 0;
  padding: 8px;
  background: rgba(0, 0, 0, .2);
  border-radius: 6px
}

.page-workspace .worker-profile-list {
  font-size: 12px;
  margin: 8px 0;
  padding-left: 18px
}

.page-workspace .worker-chat-hint {
  font-size: 12px;
  margin-top: 6px
}

/* V_61 research workspace clarity pass */
.page-workspace {
  background: var(--bg);
}

.page-workspace .shell-v19 {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(260px, 300px);
  background: var(--bg);
}

.page-workspace .workspace-sidebar,
.page-workspace .research-inspector {
  background: var(--panel);
  backdrop-filter: none;
  padding: 12px;
  border-color: var(--line);
}

.page-workspace .workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  min-width: 0;
  max-width: 260px;
}

.page-workspace .brand {
  margin-bottom: 4px;
  padding: 2px 4px
}

.page-workspace .logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: none
}

.page-workspace .brand-copy h1 {
  font-size: 14px;
  margin: 0
}

.page-workspace .nav-new-chat {
  border-radius: 8px;
  margin: 2px 0 4px;
  padding: 8px 10px;
  text-align: center
}

.page-workspace .project-select,
.page-workspace .composer-controls-v60 select,
.page-workspace .source-scope-select {
  border-radius: 8px;
  background: var(--panel2);
  padding: 8px 10px;
  font-size: 12px
}

.page-workspace .workspace-nav-v19 {
  gap: 2px;
}

.page-workspace .workspace-nav-v19 button,
.page-workspace .module-nav-compact {
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
}

.page-workspace .session-history-list {
  max-height: 260px;
  margin: 2px 0 8px;
  padding: 0;
  gap: 2px
}

.page-workspace .session-history-item {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 4px 6px
}

.page-workspace .session-history-item:hover,
.page-workspace .session-history-item.active {
  background: rgba(255, 255, 255, .06)
}

.page-workspace .workspace-main {
  border-right: 1px solid var(--line);
  background: var(--bg);
  min-width: 0;
}

.page-workspace .workspace-topbar-minimal {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 24, 39, .9);
}

.page-workspace .workspace-center-pane {
  gap: 0;
  min-height: 100vh
}

.page-workspace .workspace-project-header {
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.page-workspace .chat-context-strip-wrap {
  padding: 6px 18px 0;
}

.page-workspace .chat-primary {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 12px;
}

.page-workspace .msg {
  border: 0;
  box-shadow: none;
  border-radius: 10px;
  max-width: min(980px, 94%);
  padding: 12px 14px
}

.page-workspace .msg.assistant {
  background: transparent;
  padding-left: 0
}

.page-workspace .msg.user {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08)
}

.page-workspace .msg-meta-line,
.page-workspace .msg-sources,
.page-workspace .msg-citations {
  font-size: 12px
}

.page-workspace .chat-empty-state {
  max-width: 640px;
  margin: 8vh auto 0;
  padding: 28px 18px
}

.page-workspace .composer-v42 {
  max-width: 1100px;
  width: min(1100px, calc(100% - 28px));
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.page-workspace .composer-controls-v60 {
  margin-bottom: 6px;
  gap: 6px
}

.page-workspace .composer-controls-v60 label {
  flex: 1 1 140px;
  min-width: 0;
}

.page-workspace .composer-v42 .composer-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: end;
  gap: 8px;
}

.page-workspace .composer-plus-btn,
.page-workspace .composer-v42 .send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center
}

.page-workspace .composer-v42 #prompt {
  min-height: 42px;
  max-height: 150px;
  padding: 8px 2px;
  font-size: 15px;
  line-height: 1.55
}

.page-workspace .composer-plus-menu {
  border-radius: 10px;
  min-width: 230px
}

.page-workspace .research-inspector {
  font-size: 12px;
  min-width: 0;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-workspace .research-inspector h2,
.page-workspace .reviewer-subhead {
  font-size: 13px;
}

.page-workspace .research-inspector .inspector-panel {
  padding: 10px 0;
}

.page-workspace .research-inspector .inspector-tabs {
  margin-bottom: 8px;
}

.page-workspace .inspector-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-padding: 8px;
}

.page-workspace .inspector-tabs .inspector-tab {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  min-height: 32px;
}

.page-workspace .inspector-tabs .inspector-tab.active {
  color: var(--text);
  background: rgba(82, 183, 136, .08);
  border-bottom-color: transparent;
}

.page-workspace .inspector-tabs .inspector-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent)
}

.page-workspace .source-discovery-search {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px
}

.page-workspace .source-discovery-results,
.page-workspace .source-registry-panel,
.page-workspace .evidence-graph-panel {
  max-height: 360px
}

.page-workspace .source-candidate-card,
.page-workspace .doc-card,
.page-workspace .academic-source-card {
  border-radius: 8px;
  background: rgba(255, 255, 255, .025)
}

.page-workspace .card {
  border-radius: 8px;
  box-shadow: none;
  background: rgba(255, 255, 255, .025)
}

.page-workspace .btn {
  border-radius: 8px;
  padding: 8px 10px
}

.page-workspace .badge {
  letter-spacing: 0;
  font-weight: 600
}

.page-workspace .admin-table-wrap {
  overflow: auto
}

.page-workspace .admin-compact-table {
  table-layout: auto;
  min-width: 760px;
  font-size: 12px
}

.page-workspace .admin-compact-table th,
.page-workspace .admin-compact-table td {
  padding: 7px 8px;
  vertical-align: top
}

.page-workspace .admin-row-detail {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35
}

.page-workspace .admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

@media(max-width:1180px) {
  .page-workspace .shell-v19 {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }
}

@media(max-width:768px) {
  .page-workspace .workspace-topbar-minimal {
    display: flex
  }

  .page-workspace .workspace-center-pane {
    min-height: calc(100vh - 48px)
  }

  .page-workspace .workspace-project-header,
  .page-workspace .chat-context-strip-wrap {
    padding-left: 14px;
    padding-right: 14px
  }

  .page-workspace .chat-primary {
    padding: 14px
  }

  .page-workspace .composer-v42 {
    width: calc(100% - 20px);
    margin-bottom: max(10px, env(safe-area-inset-bottom));
    border-radius: 12px;
  }

  .page-workspace .composer-controls-v60 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-workspace .msg {
    max-width: 94%;
  }
}

@media(max-width:1180px) {
  .page-workspace .shell-v19 {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .page-workspace .workspace-topbar-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
    background: rgba(17, 24, 39, .92);
  }

  .page-workspace .workspace-side-actions {
    display: flex;
    gap: 8px;
  }

  .page-workspace .workspace-sidebar {
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    width: min(88vw, 260px);
    z-index: 35;
    transform: translateX(-110%);
    transition: transform .2s ease;
    background: var(--panel);
    border-right: 1px solid var(--line);
    max-width: 260px;
  }

  .page-workspace .workspace-sidebar.mobile-open {
    transform: translateX(0);
  }

  .page-workspace .workspace-main {
    border-right: none;
  }

  .page-workspace .research-inspector {
    display: none;
  }

  .page-workspace .research-inspector.mobile-open {
    display: block;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    width: min(92vw, 320px);
    z-index: 35;
    transform: translateX(110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
    border-left: 1px solid var(--line);
    background: var(--panel);
  }

  .page-workspace .research-inspector.mobile-open {
    transform: translateX(0);
  }
}

@media(max-width:900px) {
  .page-workspace .workspace-sidebar {
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    width: min(88vw, 260px);
    z-index: 35;
    transform: translateX(-110%);
    transition: transform .2s ease;
    background: var(--panel);
  }

  .page-workspace .workspace-sidebar.mobile-open {
    transform: translateX(0);
  }

  .page-workspace .workspace-sidebar {
    border-right: 1px solid var(--line);
  }

  .page-workspace .workspace-main {
    border-right: none;
  }
}

/* Data Connector Center */
.data-connector-center {
  margin-top: 12px;
}
.data-connector-badges {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.data-connector-badge {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.data-connector-badge--live,
.data-connector-badge--configured {
  border-color: rgba(46, 160, 67, 0.35);
}
.data-connector-badge--config_needed {
  border-color: rgba(210, 153, 34, 0.45);
}
.data-connector-badge--error {
  border-color: rgba(248, 81, 73, 0.45);
}
.data-connector-badge-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.data-connector-note {
  margin: 6px 0 0;
  font-size: 0.85em;
}
.data-connector-search {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.data-connector-search .input-sm {
  flex: 1;
  min-width: 160px;
}
.data-connector-results,
.data-connector-imports {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.data-connector-results li,
.data-connector-imports li {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
@media (max-width: 640px) {
  .data-connector-badges {
    grid-template-columns: 1fr;
  }
  .data-connector-search {
    flex-direction: column;
  }
  .data-connector-search .btn {
    width: 100%;
  }
}

/* PASS 4E-3 (item F) — Mobile bottom action bar */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 900px) {
  body {
    padding-bottom: 64px;
  }
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--panel, #14161c);
    border-top: 1px solid var(--line, #2a2d36);
    padding: 4px 2px env(safe-area-inset-bottom, 4px);
  }
  .mobile-bottom-nav-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--muted, #9aa0ab);
    font-size: 11px;
    padding: 6px 2px;
    cursor: pointer;
  }
  .mobile-bottom-nav-btn span[aria-hidden] {
    font-size: 18px;
    line-height: 1;
  }
  .mobile-bottom-nav-btn.active {
    color: var(--accent, #6aa9ff);
  }
  /* Sidebar collapsed by default on mobile; existing toggle still works */
  .sidebar.workspace-sidebar {
    position: fixed;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.workspace-sidebar.mobile-open {
    transform: translateX(0);
  }
}

/* PASS 4G: Attachment chat tray */
.attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px;
}
.attachment-tray.hidden { display: none; }
@media (max-width: 600px) {
  .attachment-tray {
    max-height: 120px;
    overflow-y: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .attachment-chip { flex: 0 0 auto; }
}
.attachment-ask-scope {
  font-size: 11px;
  background: var(--surface-2, #1e2330);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: inherit;
  padding: 2px 4px;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, #1e2330);
  border: 1px solid var(--border-color, #333);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  max-width: 320px;
}
.attachment-chip-name {
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-chip-badge { opacity: 0.75; font-size: 11px; }
.attachment-chip-badge.status-rag_ready,
.attachment-chip-badge.status-indexed { color: var(--success-color, #4caf50); }
.attachment-chip-badge.status-failed { color: var(--error-color, #e57373); }
.attachment-chip-rag-ok { color: var(--success-color, #4caf50); }
.attachment-chip-rag-warn { color: var(--warning-color, #ffb74d); }
.attachment-chip-action,
.attachment-chip-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  padding: 0 2px;
}
.attachment-chip-action { text-decoration: underline; }
.attachment-chip-remove { font-size: 14px; opacity: 0.6; }
.attachment-chip-info { font-size: 11px; opacity: 0.6; font-style: italic; }

/* PASS 4M — shared responsive utilities */
.responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.mobile-scroll { overflow-x: auto; max-width: 100%; }
.mobile-stack { display: flex; flex-direction: column; }

@media (max-width: 600px) {
  .source-registry-table, .lab-artifacts-table, .source-library-table,
  .page-workspace .evidence-table, .page-workspace .worker-jobs-table,
  .page-workspace .admin-compact-table, .table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  .admin-lab-connectors,
  .lab-connector-status {
    overflow-x: auto;
    max-width: 100%;
  }
  .q1-row-actions, .q1-left-actions, .source-candidate-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* === V_48: answer mode chips, source badges, analysis box === */
.composer-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.answer-mode-chips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.answer-mode-chips::-webkit-scrollbar {
  display: none;
}

.composer-settings-toggle {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
}

.composer-settings-toggle[aria-expanded="true"] {
  background: var(--accent, #2f9e6e);
  color: #fff;
  border-color: transparent;
}

.composer-settings-panel {
  margin-top: 4px;
}

.composer-settings-panel.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === V_63: composer redesign — one main input row only. Replaces the old
   top-row stack of answer-mode-chips + ai-mode-select + gear button.
   .composer's base rule (display:grid; grid-template-columns:1fr auto auto)
   predates this redesign and auto-places children left-to-right into 3
   columns, so stray visible children would land side-by-side on the same
   line instead of stacking. Force a single-column flex stack here. === */
.composer.composer-v63 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* V_65: DOI/Source URL quick-add no longer pushes the composer layout open —
   it floats as a small popover anchored above the composer, like the +
   menu, instead of inserting a permanent row under the chat box. */
.composer-v63 .composer-inline-fields {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  grid-template-columns: 1fr;
}

.composer-v63 .composer-inline-fields-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1/-1;
  margin: -2px -2px 4px;
}

.composer-v63 .composer-inline-fields-title {
  font-size: 12px;
  color: var(--muted, #9aa0a6);
}

.composer-v63 .composer-inline-fields-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}

.composer-v63 .composer-inline-fields-close:hover {
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
  .composer-v63 .composer-inline-fields {
    grid-template-columns: 1fr;
  }
}

/* === V_64: composer is now [+] [input] [Auto ▾] [↑] only — Context (Chat
   thường/Project/Bản thảo/Nguồn/Dữ liệu) moved into the + menu as a
   submenu, AI Mode is a single "Auto" pill button that opens a popover
   (Auto Router / Titi Smart / Titi Thinking / Titi Deep Research / API
   Expert→provider submenu) instead of a visible 5-option <select>. === */
.ai-mode-wrap {
  position: relative;
  flex: 0 0 auto;
}

.ai-mode-btn {
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--surface-2, #1a1a1a);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-mode-btn:hover {
  background: rgba(82, 183, 136, .1);
}

.ai-mode-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 6px;
  box-shadow: var(--shadow);
  z-index: 50;
  display: grid;
  gap: 2px;
}

.ai-mode-menu.hidden {
  display: none;
}

@media (max-width: 768px) {
  .ai-mode-btn {
    max-width: 96px;
    font-size: 11px;
    padding: 7px 8px;
  }
  .ai-mode-menu {
    min-width: 170px;
  }
}

/* Cursor-style compact mode selector: one active chip + dropdown instead of
   6 chips laid out in a row. */
.chat-mode-selector {
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
}

.chat-mode-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chat-mode-caret {
  font-size: 10px;
  opacity: 0.7;
}

.chat-mode-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  gap: 2px;
}

.chat-mode-dropdown.hidden {
  display: none !important;
}

.chat-mode-option {
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.chat-mode-option:hover {
  background: var(--bg-soft, rgba(127, 127, 127, 0.12));
}

.chat-mode-option.active {
  background: var(--accent, #2f9e6e);
  color: #fff;
}

.answer-mode-chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.answer-mode-chip.active {
  background: var(--accent, #2f9e6e);
  color: #fff;
  border-color: transparent;
}

.msg-source-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.msg-source-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  opacity: .85;
}

.msg-analysis-box {
  margin-bottom: 8px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  background: var(--panel);
}

.msg-provider-chip {
  font-size: 11px;
  margin-bottom: 6px;
  opacity: .75;
}

.msg-warnings {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.msg-warning-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(234, 179, 8, .12);
  border: 1px solid rgba(234, 179, 8, .4);
  color: #eab308;
}

.msg-analysis-box summary {
  cursor: pointer;
  font-weight: 600;
}

.msg-analysis-box ul {
  margin: 6px 0 2px;
  padding-left: 18px;
}

.msg-activity-panel {
  margin-top: 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  background: var(--panel);
}

.msg-activity-panel summary {
  cursor: pointer;
  font-weight: 600;
  opacity: .85;
}

.msg-activity-steps {
  margin: 6px 0 2px;
  padding-left: 18px;
  line-height: 1.6;
}

.msg-activity-steps li {
  color: var(--muted, #888);
}

.msg-activity-steps li b {
  color: inherit;
  opacity: .9;
}

.dr-card {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  font-size: 13px;
}

.dr-timeline {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
}

.dr-timeline li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  color: var(--muted, #888);
}

.dr-step-icon {
  width: 16px;
  flex: none;
  text-align: center;
}

.dr-timeline li.dr-status-done .dr-step-icon { color: #2e9b4f; }
.dr-timeline li.dr-status-running .dr-step-icon { color: #d68a1c; }
.dr-timeline li.dr-status-error .dr-step-icon { color: #d23c3c; }
.dr-timeline li.dr-status-needs_action .dr-step-icon { color: #2b6fd6; }

.dr-step-label {
  color: inherit;
  font-weight: 600;
}

.dr-step-msg {
  opacity: .85;
}

.dr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dr-actions .btn {
  flex: 1 1 auto;
}

.dr-sources {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.dr-source-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.dr-source-item:last-child {
  border-bottom: none;
}

.dr-source-title {
  font-weight: 600;
}

.dr-source-meta {
  opacity: .7;
}

.dr-empty-note {
  opacity: .7;
  font-style: italic;
}

.dr-source-status {
  margin-left: 6px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(46,155,79,.15));
  color: var(--accent, #2e9b4f);
  text-transform: uppercase;
}

.dr-sources-toggle {
  margin-top: 6px;
}

/* Shared Activity Timeline (Chat / Deep Research / Academic / Data / Code / Finance) */
.activity-timeline {
  margin-top: 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  background: var(--panel);
  max-width: 100%;
  overflow: hidden;
}

.activity-timeline summary {
  cursor: pointer;
  font-weight: 600;
  opacity: .9;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.activity-status-pill {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--line);
  opacity: .85;
  text-transform: uppercase;
}

.activity-step-list {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
}

.activity-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  color: var(--muted, #888);
  line-height: 1.5;
  word-break: break-word;
}

.activity-step-icon {
  width: 16px;
  flex: none;
  text-align: center;
}

.activity-step.is-done .activity-step-icon { color: #2e9b4f; }
.activity-step.is-running .activity-step-icon { color: #d68a1c; }
.activity-step.is-warning .activity-step-icon { color: #d6a31c; }
.activity-step.is-error .activity-step-icon { color: #d23c3c; }
.activity-step.is-needs_action .activity-step-icon { color: #2b6fd6; }

.activity-step-label {
  font-weight: 600;
  color: inherit;
}

.activity-step-msg {
  opacity: .85;
}

.activity-warning-note {
  margin-top: 6px;
  font-size: 11px;
  opacity: .8;
  font-style: italic;
}

@media (max-width: 600px) {
  .dr-actions {
    flex-direction: column;
  }
  .dr-actions .btn {
    width: 100%;
  }
  .activity-timeline {
    font-size: 11px;
    padding: 4px 8px;
  }
  .activity-step {
    flex-wrap: wrap;
  }
}

/* === V_48: mobile bottom nav === */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 8px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 11px;
  }

  .mobile-bottom-nav-icon {
    font-size: 18px;
    line-height: 1;
  }

  .mobile-bottom-nav-item.active {
    color: var(--accent, #2f9e6e);
    font-weight: 600;
  }

  /* Chat takes priority: shrink labels so the bar stays compact */
  .mobile-bottom-nav-chat .mobile-bottom-nav-label {
    display: none;
  }

  .mobile-bottom-nav-chat .mobile-bottom-nav-item {
    padding: 6px 2px;
  }

  body.mobile-drawer-open .mobile-bottom-nav {
    display: none;
  }

  .workspace-main,
  .chat-primary,
  .composer {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .composer-v42 {
    margin-bottom: calc(54px + env(safe-area-inset-bottom));
  }

  .msg {
    max-width: 100%;
  }

  .msg-bubble-assistant {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* === V_48: manuscript mobile single column + icon action grid === */
@media (max-width: 768px) {
  #manuscriptStudioLayout {
    display: block !important;
  }

  #manuscriptStudioLayout > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .manuscript-studio-tabs {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .manuscript-studio-tabs .manuscript-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .manuscript-action-quick.mobile-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .manuscript-action-quick.mobile-action-grid .manuscript-write-btn {
    width: 100%;
    height: auto;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 20px;
    border-radius: 10px;
  }

  @media (max-width: 400px) {
    .manuscript-action-quick.mobile-action-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .manuscript-editor,
  #manuscriptPreview,
  .manuscript-preview {
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
  }
}


/* PASS 4P: shared responsive/icon utilities */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.mobile-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.mobile-stack {
  display: flex;
  flex-direction: column;
}

.icon-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-icon-svg svg { width: 1.1em; height: 1.1em; vertical-align: -2px; }

@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-grid,
  .dashboard-grid,
  .workspace-grid,
  .manuscript-grid,
  .dataset-grid,
  .admin-card-grid,
  .responsive-grid {
    grid-template-columns: 1fr !important;
  }

  table {
    max-width: 100%;
  }

  .modal,
  .dialog,
  .panel {
    max-width: 100vw;
  }

  button,
  .btn,
  .icon-btn {
    min-height: 40px;
  }

  .admin-table-wrap,
  .mobile-scroll {
    overflow-x: auto;
  }

  .file-name, .dataset-name, td, th {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* V_48 Workflow bridge */
.workflow-bridge-v48 .chat-workflow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.workflow-bridge-v48 .chat-mode-chip {
  min-height: 40px;
  padding: 6px 12px;
}
.doc-intake-group {
  margin-bottom: 1.25rem;
}
.doc-intake-title {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-intake-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.doc-intake-count {
  font-weight: 500;
}
.doc-intake-empty {
  margin: 0.25rem 0 0.75rem;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
}
.doc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sources-evidence-workspace .se-actions,
.sources-evidence-workspace .se-tabs,
.sources-evidence-workspace .se-toolbar,
.sources-evidence-workspace .se-filter-row,
.exports-workspace .exp-format-grid,
.data-lab-center-panel .dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.se-matrix-scroll,
.evidence-table-wrap.se-matrix-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.se-matrix-table,
.se-matrix-table th,
.se-matrix-table td {
  font-size: 0.82rem;
  white-space: nowrap;
}
.se-matrix-table td:first-child {
  white-space: normal;
  min-width: 140px;
  max-width: 220px;
}
.se-import-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin: 8px 0;
}
.se-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
  min-width: 0;
}
.se-tab-btn.active,
.se-ev-filter.active,
.ev-filter-chip.active {
  font-weight: 600;
  border-color: var(--accent, #4a7cff);
}
.se-row-actions,
.ev-row-actions {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.se-empty {
  margin: 8px 0;
}
@media (max-width: 390px) {
  .sources-evidence-workspace,
  .se-matrix-scroll {
    overflow-x: hidden;
  }
  .se-matrix-table {
    font-size: 0.75rem;
  }
}
.admin-integration-grid .ic-card-grid,
.settings-integration-board .ic-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}
.ic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.ic-card-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ic-card-items {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.ic-card-items li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.ic-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.ic-compact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--surface-2, #1e1e2e);
  font-size: 0.75rem;
  text-align: center;
}
.ic-compact-label {
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-fmt-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  padding: 8px 10px !important;
}
.exp-fmt-icon {
  font-size: 1.1rem;
}
.exp-fmt-label {
  font-size: 0.72rem;
}
.dl-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.dl-action-status {
  min-height: 1.2em;
}
@media (max-width: 390px) {
  .admin-integration-grid .ic-card-grid,
  .ic-compact-card,
  .exp-fmt-card,
  .data-lab-center-panel .dl-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
}
.data-preview-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.data-lab-center-panel .dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.msg-tools-used, .msg-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.msg-tool-chip {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2, #1e1e2e);
}
.exp-log {
  max-height: 200px;
  overflow: auto;
  font-size: 0.75rem;
}
.ms-evidence-links .ms-ev-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ms-evidence-head { margin-bottom: 8px; }
.ms-evidence-next { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ms-ev-btn, .ms-ev-remove { min-height: 40px; min-width: 40px; }
.msg-answer-actions .btn { min-height: 40px; }
@media (max-width: 390px) {
  .ms-evidence-next, .msg-answer-actions { max-width: 100%; }
}

/* ===== Research Command Center (RCC) ===== */
.rcc-header {
  padding: 16px;
  border-bottom: 1px solid var(--border, #2d2d3d);
  margin-bottom: 12px;
}
.rcc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rcc-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.rcc-project-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.rcc-project-label {
  font-weight: 500;
  font-size: 0.9rem;
}
.rcc-topic {
  font-size: 0.8rem;
}
.rcc-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #3d3d5c);
  white-space: nowrap;
}
.rcc-badge-ok {
  background: var(--ok-bg, #1a3a2a);
  color: var(--ok, #4ade80);
  border-color: #4ade8060;
}
.rcc-badge-warn {
  background: var(--warn-bg, #3a2a1a);
  color: var(--warn, #fbbf24);
  border-color: #fbbf2460;
}
.rcc-badge-empty {
  background: var(--surface-2, #1e1e2e);
  color: var(--muted, #888);
}
.rcc-link {
  color: inherit;
  text-decoration: underline;
}
.rcc-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border, #2d2d3d);
  margin-bottom: 12px;
}
.rcc-quick-btn {
  min-height: 36px;
  font-size: 0.8rem;
}
.rcc-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
.rcc-zone {
  background: var(--surface-2, #1e1e2e);
  border: 1px solid var(--border, #2d2d3d);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rcc-zone:hover {
  border-color: var(--accent, #6c63ff);
}
.rcc-zone-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rcc-zone-icon {
  font-size: 1.1rem;
}
.rcc-zone-title {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
}
.rcc-zone-count {
  font-size: 0.75rem;
}
.rcc-zone-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  min-height: 22px;
}
.rcc-zone-action {
  width: 100%;
  font-size: 0.75rem;
  min-height: 32px;
}
.rcc-activity {
  padding: 0 16px 16px;
}
.rcc-activity-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.rcc-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rcc-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle, #22223a);
  font-size: 0.78rem;
}
.rcc-activity-summary { flex: 1; }
.rcc-activity-time { font-size: 0.7rem; white-space: nowrap; }

@media (max-width: 600px) {
  .rcc-zones-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 8px 8px;
  }
  .rcc-quick-actions {
    padding: 6px 8px;
  }
}
@media (max-width: 390px) {
  .rcc-zones-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== @mention picker ===== */
.mention-picker {
  position: fixed;
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 260px;
  max-width: 340px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.mention-picker.hidden { display: none; }
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.mention-item:hover, .mention-item.mention-active {
  background: rgba(82,183,136,.12);
}
.mention-icon { font-size: 15px; flex-shrink: 0; }
.mention-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-category { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* ===== Context chips (chat context strip) ===== */
.ctx-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 14px 4px;
}
.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  transition: .15s;
  line-height: 1.3;
}
.ctx-chip:hover { background: rgba(82,183,136,.1); color: var(--text); }
.ctx-chip-active { border-color: var(--accent); color: var(--accent2); background: rgba(82,183,136,.08); }
.ctx-chip-ok { border-color: var(--ok); color: var(--ok); }
.ctx-chip-warn { border-color: var(--warn); color: var(--warn); }
.ctx-chip-icon { font-size: 13px; }
.ctx-chip-label { font-weight: 500; }

/* ===== Documents workspace enhancements ===== */
.doc-new-paper-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}
.doc-type-select {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}
.doc-create-form {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.doc-create-form input[type="text"] {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.doc-create-form input[type="text"]:focus { outline: 1px solid var(--accent); }

/* ===== Sources Evidence workspace ===== */
.sources-evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) {
  .sources-evidence-grid { grid-template-columns: 1fr; }
}

/* mobile-bottom-nav: keep existing CSS (defined at line ~6842) */

/* ===== Manuscript tabs ===== */
.ms-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  overflow-x: auto;
}
.ms-tab {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: .15s;
}
.ms-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ms-tab:hover { color: var(--text); }

/* ===== Review module ===== */
.review-checklist { display: grid; gap: 8px; }
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.review-item-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.review-item-body { flex: 1; }
.review-item-title { font-weight: 600; font-size: 13px; }
.review-item-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }
.review-item-severity-ok { border-left: 3px solid var(--ok); }
.review-item-severity-warn { border-left: 3px solid var(--warn); }
.review-item-severity-error { border-left: 3px solid var(--bad); }

/* ===== Export workspace ===== */
.export-formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.export-format-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  background: rgba(255,255,255,.04);
  text-align: center;
  cursor: pointer;
  transition: .15s;
}
.export-format-card:hover { border-color: var(--accent); background: rgba(82,183,136,.08); }
.export-format-card.export-unavailable { opacity: .5; cursor: not-allowed; }
.export-format-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.export-format-label { font-size: 12px; font-weight: 600; }
.export-format-status { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* === Review Module === */
.review-issues-list { list-style: none; padding: 0; margin: 0; }
.review-issue-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.review-issue-item:last-child { border-bottom: none; }
.review-issue-header { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.review-issue-fix { font-size: 11.5px; margin-top: 3px; padding-left: 4px; }
.review-sev-error .review-issue-header strong { color: var(--red, #ef4444); }
.review-sev-warn .review-issue-header strong { color: var(--amber, #f59e0b); }
.review-sev-ok .review-issue-header strong { color: var(--green-500, #22c55e); }

/* === Citation Panel === */
.citation-panel-item { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.citation-panel-item:last-child { border-bottom: none; }
.citation-label { font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citation-insert-btn { flex-shrink: 0; font-size: 10px; padding: 2px 6px; }

/* === RH-FIX: Mobile sidebar toggle always visible ===
   workspace-shell-v43 hides .mobile-pane-toggle via page-workspace-v43 rule;
   restore whenever sidebar/inspector are compact-or-overlay (<=1199px),
   not just <=900px — at 901-1199px the buttons were display:none with
   no way to open the inspector drawer at all (1110px screenshot bug). */
@media (max-width: 1199px) {
  .page-workspace .workspace-topbar-minimal .mobile-pane-toggle,
  #toggleSidebar.workspace-advanced-only,
  #toggleReviewer.workspace-advanced-only {
    display: flex !important;
    align-items: center;
  }
  .workspace-topbar-minimal {
    justify-content: space-between;
  }
  /* Keep workspace-topbar-minimal visible on mobile */
  .workspace-topbar-minimal .user-menu {
    display: flex !important;
  }
}

/* === RH-FIX: Mobile bottom nav padding so content not hidden under nav === */
@media (max-width: 900px) {
  .workspace-main, .workspace-center-pane, .chat-primary {
    padding-bottom: 72px;
  }
}

/* === RH-FIX: Desktop 3-column layout stable === */
.shell-v19 {
  min-width: 0;
}
.shell-v19 .workspace-main {
  min-width: 0;
  overflow-x: hidden;
}

/* === RH-FIX: Documents workspace full width === */
.documents-workspace {
  min-height: 300px;
}
.doc-library-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.doc-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.doc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.doc-tab:hover { color: var(--text); }

/* === RH-FIX: Source evidence grid mobile === */
@media (max-width: 760px) {
  .sources-evidence-grid { grid-template-columns: 1fr; }
  .doc-new-paper-bar { flex-wrap: wrap; }
  .doc-type-select { width: 100%; }
}

/* === RH-FIX: Export format grid === */
.exp-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.exp-fmt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  font-size: 13px;
  border-radius: 12px;
  text-align: center;
  min-height: 70px;
}
.exp-fmt-card:not(:disabled):hover {
  border-color: var(--accent);
  background: rgba(82,183,136,.08);
}
.exp-fmt-icon { font-size: 22px; }
.exp-fmt-label { font-size: 12px; font-weight: 600; }
.exp-disabled { opacity: .45; }
.exp-log { font-size: 11px; white-space: pre-wrap; word-break: break-all; }

/* === RH-FIX: RCC zone cards === */
.rcc-zone {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.025);
  transition: border-color .15s;
}
.rcc-zone:hover { border-color: rgba(82,183,136,.4); }
.rcc-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rcc-zone-icon { font-size: 18px; }
.rcc-zone-title { font-weight: 700; font-size: 13px; }
.rcc-zone-count { font-size: 11px; margin-left: auto; }
.rcc-zone-status { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.rcc-zone-action { width: 100%; margin-top: 4px; }
.rcc-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .rcc-zones-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .rcc-zones-grid { grid-template-columns: 1fr; }
}

/* === RH-FIX: Mention picker === */
.mention-picker {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.mention-item.mention-active, .mention-item:hover { background: rgba(82,183,136,.12); }
.mention-icon { font-size: 15px; }
.mention-label { font-weight: 600; }
.mention-category { font-size: 11px; margin-left: auto; }

/* === RH-FIX: Review inspector panel button === */
.review-run-btn {
  width: 100%;
  margin-bottom: 12px;
  background: rgba(82,183,136,.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.review-run-btn:hover { background: rgba(82,183,136,.25); }

/* === RH-FIX: Context chips strip === */
.ctx-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  border-top: 1px solid var(--line);
  background: var(--panel2);
}
.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 11px;
  cursor: pointer;
  transition: .12s;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.ctx-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(82,183,136,.1); }
.ctx-chip:hover { border-color: var(--text); color: var(--text); }

/* === RH-FIX: Admin integration center === */
.admin-integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.admin-integration-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.03);
}
.admin-integration-card.status-ok { border-left: 3px solid var(--ok); }
.admin-integration-card.status-warn { border-left: 3px solid var(--warn); }
.admin-integration-card.status-error { border-left: 3px solid var(--bad); }

/* === Research Command Center === */
.research-command-center {
  padding: 20px 24px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rcc-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.rcc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rcc-project-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.rcc-project-desc {
  margin: 6px 0 0;
  font-size: 13px;
}
.rcc-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.rcc-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: .15s;
  text-align: left;
  color: inherit;
}
.rcc-stat:hover {
  border-color: var(--accent);
  background: rgba(82,183,136,.08);
}
.rcc-stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.rcc-stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.rcc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}
.rcc-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcc-pct {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.rcc-progress {
  height: 6px;
  background: var(--panel2);
  border-radius: 99px;
  margin-bottom: 12px;
  overflow: hidden;
}
.rcc-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .3s ease;
}
.rcc-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcc-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.rcc-check-item.done {
  color: var(--text);
}
.rcc-check-icon {
  font-size: 14px;
  width: 18px;
  flex-shrink: 0;
}
.rcc-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rcc-action-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: .15s;
  font-weight: 500;
}
.rcc-action-btn:hover {
  border-color: var(--accent);
  background: rgba(82,183,136,.08);
}
.rcc-ms-card {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 13px;
  color: var(--text);
}
.rcc-ms-card .btn {
  margin-left: auto;
}
.rcc-warn-banner {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(212,165,116,.4);
  border-radius: 10px;
  background: rgba(212,165,116,.08);
  font-size: 12px;
  color: var(--warn);
  flex-wrap: wrap;
}
.rcc-warn-link {
  margin-left: auto;
}
@media(max-width:900px) {
  .rcc-stats-row { grid-template-columns: repeat(2, 1fr); }
  .rcc-body { grid-template-columns: 1fr; }
  .rcc-action-grid { grid-template-columns: repeat(2, 1fr); }
  .research-command-center { padding: 14px 16px; }
}

/* === Fix manuscript view — takes full height, no chat overflow === */
.page-workspace.view-manuscript .workspace-center-pane {
  overflow: hidden;
}
.manuscript-studio-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 52px);
  overflow: auto;
}
.manuscript-studio-layout {
  flex: 1;
  min-height: 0;
}

/* === Fix sidebar max-width on desktop === */
@media(min-width:1025px) {
  .page-workspace .shell-v19 {
    grid-template-columns: 220px minmax(0,1fr) minmax(240px,280px);
  }
  .page-workspace .workspace-sidebar {
    max-width: 220px;
  }
}

/* === Nav v19 — ensure full-width items in sidebar === */
.page-workspace .workspace-nav-v19 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.page-workspace .nav-v19-item {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  padding: 7px 9px;
  border-radius: 8px;
  min-height: 34px;
}
.page-workspace .nav-v19-icon {
  font-size: 14px;
  width: 20px;
  flex-shrink: 0;
}
.page-workspace .nav-v19-label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.page-workspace .nav-v19-count {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(82,183,136,.18);
  color: var(--accent2);
  flex-shrink: 0;
}

/* === Manuscript studio — proper styling === */
.page-workspace .manuscript-studio-panel {
  background: var(--bg);
}
.page-workspace .manuscript-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.page-workspace .manuscript-studio-meta {
  font-size: 12px;
}
.page-workspace .manuscript-studio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-workspace .manuscript-studio-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.page-workspace .manuscript-tab {
  padding: 7px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: .15s;
}
.page-workspace .manuscript-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.page-workspace .manuscript-tab:hover:not(.active) {
  color: var(--text);
}
.page-workspace .manuscript-studio-layout {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) minmax(220px,26vw);
  gap: 0;
  min-height: 0;
  flex: 1;
}
.page-workspace .manuscript-outline-panel {
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  overflow-y: auto;
  background: var(--panel);
}
.page-workspace .manuscript-outline-panel h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 0 6px;
}
.page-workspace .manuscript-outline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-workspace .manuscript-outline-list li {
  margin: 1px 0;
}
.page-workspace .outline-jump {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-workspace .outline-jump:hover,
.page-workspace .outline-jump.outline-active {
  background: rgba(82,183,136,.12);
  color: var(--accent);
}
.page-workspace .outline-dot {
  margin-right: 4px;
  font-size: 8px;
}
.page-workspace .manuscript-editor-col {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 8px;
  overflow: auto;
}
.page-workspace .manuscript-mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.page-workspace .ms-autosave-hint {
  font-size: 11px;
  color: var(--muted);
  border: none;
  background: transparent;
  padding: 2px 6px;
}
.page-workspace .manuscript-section-editor-wrap,
.page-workspace .manuscript-full-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ms-edit-scope-toggle {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}
.ms-edit-scope-toggle .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.page-workspace .manuscript-full-editor {
  flex: 1;
  min-height: 480px;
  resize: vertical;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
.page-workspace .manuscript-full-editor:focus {
  outline: none;
  border-color: var(--accent);
}
.ms-full-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms-full-editor-hint {
  font-size: 11px;
}
.ms-pub-heading-flash {
  animation: msPubHeadingFlash 1.2s ease-out;
}
@keyframes msPubHeadingFlash {
  0% { background: rgba(255, 215, 0, .35); }
  100% { background: transparent; }
}
.page-workspace .ms-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.page-workspace .manuscript-editor,
.page-workspace .manuscript-section-editor {
  flex: 1;
  min-height: 400px;
  resize: vertical;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
.page-workspace .manuscript-editor:focus,
.page-workspace .manuscript-section-editor:focus {
  outline: none;
  border-color: var(--accent);
}
.page-workspace .manuscript-side-panel {
  border-left: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-workspace .manuscript-side-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
}
.page-workspace .manuscript-side-tab {
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
}
.page-workspace .manuscript-side-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.page-workspace .manuscript-preview-pane,
.page-workspace .manuscript-evidence-pane {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.page-workspace .manuscript-writing-actions {
  padding: 10px 20px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.page-workspace .manuscript-writing-actions > p {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 6px;
}
.page-workspace .manuscript-writing-actions .manuscript-action-bar {
  position: static;
  flex-shrink: 0;
  z-index: 1;
}
.page-workspace .manuscript-editor-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-workspace .manuscript-editor-col .manuscript-editor {
  flex: 1 1 auto;
  min-height: 200px;
}
.page-workspace .manuscript-action-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.page-workspace .manuscript-write-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.page-workspace .manuscript-draft-panel {
  margin: 8px 0 0;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.page-workspace .manuscript-draft-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
@media(max-width:1024px) {
  .page-workspace .manuscript-studio-layout {
    grid-template-columns: 150px minmax(0,1fr);
  }
  .page-workspace .manuscript-side-panel {
    display: none;
  }
  .page-workspace .manuscript-preview-col {
    display: none;
  }
}
@media(max-width:767px) {
  .page-workspace .manuscript-studio-layout {
    grid-template-columns: 1fr;
  }
  .page-workspace .manuscript-outline-panel {
    display: none;
  }
  .manuscript-studio-panel:not(.hidden) {
    min-height: calc(100vh - 110px);
  }
}

/* === Manuscript Studio v68+ enhancements === */
.manuscript-studio-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt, var(--bg-alt, rgba(0,0,0,.03)));
}
.manuscript-tab {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-muted, var(--muted, #888));
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.manuscript-tab:hover { background: rgba(82,183,136,.08); color: var(--text); }
.manuscript-tab.active {
  background: var(--surface, #fff);
  color: var(--forest, #2e8b57);
  border-color: var(--line);
  font-weight: 600;
  position: relative;
  bottom: -1px;
}
/* Review pane */
.manuscript-review-pane { padding: 8px 4px; }
.ms-panel-title { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.ms-review-findings { display: flex; flex-direction: column; gap: 6px; }
.ms-review-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.ms-review-ok { background: rgba(82,183,136,.1); }
.ms-review-warn { background: rgba(255,193,7,.12); }
.ms-review-error { background: rgba(220,53,69,.1); }
.ms-review-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* Export pane */
.manuscript-export-pane { padding: 8px 4px; }
.ms-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}
.ms-export-btn { font-size: 12px; text-align: left; justify-content: flex-start; }
.ms-export-zip { grid-column: 1 / -1; }
.ms-export-status { font-size: 12px; margin-top: 6px; }
/* Outline panel improvements */
.outline-item { list-style: none; }
.outline-item.outline-level-1 > .outline-jump { font-weight: 600; }
.outline-item.outline-level-2 > .outline-jump { padding-left: 12px; }
.outline-item.outline-level-3 > .outline-jump { padding-left: 24px; font-size: 12px; }
.outline-item.outline-level-4 > .outline-jump { padding-left: 36px; font-size: 11px; }
/* Manage-mode row (outlineItemHtml() in manuscript-studio.js, sectionEditMode=true):
   .outline-actions had NO display rule at all before this fix, so its 5 icon
   buttons (each .btn-icon -> display:flex, which is block-outside) fell back to
   stacking one per line under the section title — every managed section took
   5-6x the height of a normal row. Force the whole row (status dot + title +
   actions) onto one flex line, and the actions themselves onto one compact row. */
.page-workspace .outline-item.outline-manage {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 2px 4px;
}
.page-workspace .outline-item.outline-manage .outline-jump {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-workspace .outline-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.page-workspace .outline-act-btn {
  width: 20px;
  height: 20px;
  font-size: 10px;
  flex-shrink: 0;
}
.ms-outline-filetree-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
}
.ms-oft-tab {
  flex: 1 1 auto;
  font-size: 12px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ms-oft-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.ms-filetree-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}
.ms-filetree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 12px;
}
.ms-filetree-child {
  padding-left: 18px;
}
.ms-filetree-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 8px 2px 2px;
}
.ms-filetree-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-filetree-status {
  font-size: 11px;
  flex-shrink: 0;
}
.ms-filetree-gen {
  flex-shrink: 0;
}
.outline-jump {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.outline-jump:hover { background: rgba(82,183,136,.12); }
.outline-empty { font-size: 12px; padding: 8px 4px; }
/* Save-to-library button for search results */
.academic-source-card .btn-save-source {
  margin-top: 6px;
  font-size: 11px;
}
.save-source-status { font-size: 11px; margin: 2px 0 0; }
.save-source-ok { color: var(--color-success, #52b788); font-weight: 500; }
.save-source-error { color: var(--color-danger, #e63946); }

/* Chat context strip — tools/missing/next actions */
.msg-context-strip {
  font-size: 11px;
  margin: 4px 0 2px;
  padding: 4px 8px;
  background: rgba(82,183,136,.06);
  border-left: 2px solid rgba(82,183,136,.3);
  border-radius: 0 4px 4px 0;
  color: var(--color-muted, #888);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  line-height: 1.6;
}
.msg-ctx-label { font-weight: 600; color: var(--color-text-secondary, #666); }
.msg-ctx-label.msg-ctx-warn { color: var(--color-warn, #d97706); }
.msg-ctx-chip {
  display: inline-block;
  background: rgba(99,102,241,.10);
  border-radius: 3px;
  padding: 0 4px;
  color: inherit;
}
.msg-ctx-chip.msg-ctx-next {
  background: rgba(82,183,136,.12);
  cursor: default;
}
/* Compact human-readable answer metadata line ("Titi Smart · Chat · No sources · Draft
   available") — replaces showing raw providerKey/scope/project_id in the main answer body. */
.msg-compact-meta {
  font-size: 11px;
  margin: 0 0 4px;
  color: var(--color-muted, #888);
}
.msg-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(136,136,136,.3);
  color: var(--color-muted, #888);
}
.btn-ghost[disabled] {
  cursor: not-allowed;
  opacity: .65;
}
/* badge-info / badge-ok for admin provider table */
.badge-info { background: rgba(59,130,246,.15); color: #2563eb; }
.badge-ok { background: rgba(82,183,136,.15); color: #166534; }
.badge-warn { background: rgba(217,119,6,.15); color: #92400e; }
.badge-disabled { background: rgba(150,150,150,.12); color: #888; }
/* RCC Next actions row */
.rcc-next-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(128,128,128,.12);
}
.rcc-next-actions .rcc-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted,#888); margin-bottom: 6px; }
.rcc-next-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin: 2px 4px 2px 0;
  white-space: nowrap;
}

/* Manuscript Assistant Panel — Cursor-style right panel */
.page-workspace .manuscript-assistant-panel {
  display: flex;
  flex-direction: column;
  width: 360px;
  min-width: 280px;
  max-width: 42vw;
  border-left: 1px solid var(--line);
  background: var(--panel);
  min-height: 0;
  overflow: hidden;
}
.page-workspace .manuscript-assistant-panel.collapsed {
  width: 44px;
  min-width: 44px;
}
.page-workspace .manuscript-assistant-panel.collapsed .ms-assistant-tabs,
.page-workspace .manuscript-assistant-panel.collapsed .ms-assistant-body,
.page-workspace .manuscript-assistant-panel.collapsed .ms-assistant-meta-wrap {
  display: none;
}
.page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
  /* Assistant is an off-canvas drawer (always position:fixed, see the
     RH-FIX-V3 block below), not a grid column — only outline/editor/preview
     get a hard track, so Editor+Preview keep full width by default and the
     drawer only narrows them when explicitly opened. */
  grid-template-columns: 220px minmax(540px, 1fr) minmax(540px, 1fr);
}
.page-workspace .manuscript-preview-col {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--panel2);
  overflow-y: auto;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ms-preview-col-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ms-preview-col-inner {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 14px;
}
.ms-assistant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ms-assistant-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.ms-assistant-tab {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ms-assistant-body,
.ms-assistant-body p,
.ms-preview-col-inner,
.ms-preview-body {
  font-size: 13px;
}
.ms-assistant-tab.active {
  border-color: var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
}
.ms-assistant-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  min-height: 120px;
}
.ms-assistant-meta-wrap {
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.ms-assistant-meta p { margin: 2px 0; }
.page-workspace .manuscript-writing-actions.ms-actions-in-assistant {
  border: none;
  padding: 0 0 8px;
  background: transparent;
}
body.manuscript-assistant-mode .inspector-collapsed-for-assistant,
body.manuscript-assistant-mode #inspectorRail,
body.manuscript-assistant-mode #researchInspector {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border-left: 0 !important;
  padding: 0 !important;
}
/* Explicit reopen (🧭 button in the assistant panel header) wins back over the
   collapse rule above — same selector weight, later in source order. */
body.manuscript-assistant-mode.ms-show-global-inspector #researchInspector {
  width: auto !important;
  min-width: 0;
  max-width: 320px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: auto !important;
  border-left: 1px solid var(--line) !important;
  padding: 12px !important;
}
.ms-history-list { list-style: none; padding: 0; margin: 0; }
.ms-history-item { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ms-diff-view pre {
  white-space: pre-wrap;
  font-size: 11px;
  max-height: 160px;
  overflow: auto;
  background: var(--bg);
  padding: 6px;
  border-radius: 6px;
}
  @media (max-width: 1100px) {
  .page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
    grid-template-columns: 180px 1fr;
    grid-template-rows: 1fr auto;
  }
  /* .manuscript-assistant-panel is an off-canvas fixed drawer at every width
     now (see the unconditional rule further below) — it is never a grid
     child anymore, so this block must not set grid-column/width/max-height
     for it. A stale max-height:42vh here used to silently cap the open
     drawer to under half the viewport on screens <=1100px even though the
     drawer rule itself spans top:96px to bottom:0 — removed. */
  .page-workspace .manuscript-writing-actions {
    display: none;
  }
  .page-workspace .manuscript-writing-actions.ms-actions-in-assistant {
    display: block;
  }
}

/* Smooth workflow — hide legacy overlays; assistant-only manuscript mode */
.workspace-legacy-hidden,
.ms-legacy-side-hidden,
#manuscriptSidePanel.ms-legacy-side-hidden {
  display: none !important;
}
.inspector-minimal-assistant,
#inspectorContextPanel.inspector-minimal-assistant {
  max-height: 72px;
  overflow: hidden;
  padding: 8px 12px;
  font-size: 12px;
}
body.manuscript-assistant-mode #inspectorContextPanel {
  flex: 0 0 auto;
}
.page-workspace .manuscript-action-bar,
.page-workspace .writing-action-bar {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
}
.page-workspace .manuscript-studio-editor,
.page-workspace #manuscriptEditorArea {
  position: relative;
  z-index: 0;
  min-height: 0;
}
.ms-suggestion-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}
.ms-assistant-agents-host .ms-agent-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ms-assistant-pane { display: block; }
.ms-suggestion-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ms-suggestion-filters .btn.active {
  border-color: var(--line);
  background: var(--bg);
}
.jobs-compact-badge:not([open]) .jobs-compact-body {
  display: none;
}
.rcc-workflow-os-wrap {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rcc-workflow-flags {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.ms-coverage-panel {
  font-size: 12px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* === RH-FIX-FINAL: canonical desktop 3-column layout, no dead gaps, real drawer collapse ===
   This is the single source of truth for .shell-v19's column widths. Earlier rounds left
   several competing grid-template-columns declarations for .shell-v19 at different specificity
   levels (lines ~3204, ~4215, ~6437, plus media variants). Those are left in place (removing them
   risks breaking mobile rules that depend on the same selectors) but are all overridden here via
   CSS custom properties + !important so there is exactly one place that decides the actual widths,
   and so collapsing the sidebar/drawer shrinks the grid TRACK itself instead of leaving blank
   space when only the child element's width was changed. */
:root {
  --rh-sidebar-w: 220px;
  --rh-drawer-w: 260px;
}

html {
  width: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

@media (min-width: 1025px) {
  /* R27: the chat/home route (AppState.route.view === "chat_shell") never adds
     body.page-workspace — only workspace/project routes do (workspace-shell.js).
     The original rule below only fired with .page-workspace present, so on
     /chat the grid track never picked up the sidebar/inspector collapse vars,
     leaving stale 300px/360px (or earlier competing) track sizes while the
     child elements inside them had already shrunk — the dead-gutter/clipped
     layout seen on production /chat. Un-scoping from .page-workspace so the
     same canonical grid applies on every route that uses #appShell.shell-v19. */
  .page-workspace .shell-v19,
  #appShell.shell-v19 {
    grid-template-columns: var(--rh-sidebar-w) minmax(0, 1fr) var(--rh-drawer-w) !important;
    transition: grid-template-columns .18s ease;
  }
  #appShell.sidebar-collapsed-grid {
    --rh-sidebar-w: 64px;
  }
  #appShell.inspector-collapsed {
    --rh-drawer-w: 0px;
  }
}

.page-workspace .workspace-sidebar.sidebar-collapsed {
  /* This rule's higher specificity (.page-workspace prefix) was winning over
     the earlier, correct `width:64px; min-width:64px` rule and replacing it
     with width:100%/min-width:0/max-width:none — fine ONLY if the parent
     grid track is exactly 64px (#appShell.sidebar-collapsed-grid sets
     --rh-sidebar-w:64px), but the moment that custom property fails to
     apply for any reason (stale cascade, a future unrelated grid change),
     this rule had nothing stopping the rail from stretching to fill
     whatever width its container actually computed to — exactly the kind
     of silent distortion bug a fixed width:64px doesn't have. Made it
     consistent with the 64px-rail intent instead of relying on the grid
     var alone. */
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

#appShell.inspector-collapsed .research-inspector {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.inspector-head-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px
}

.inspector-collapse-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.inspector-collapse-btn:hover {
  background: rgba(255, 255, 255, .08)
}

#appShell.inspector-collapsed .inspector-collapse-btn {
  transform: rotate(180deg)
}

.inspector-rail-toggle {
  display: none;
  position: fixed;
  top: 70px;
  right: 10px;
  z-index: 30;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center
}

@media (min-width: 1025px) {
  #appShell.inspector-collapsed .inspector-rail-toggle {
    display: flex
  }
}

/* Module/quick-action card grids: auto-fit so they wrap instead of overflowing the
   middle grid column when the sidebar and right drawer are both open. */
.rcc-stats-row,
.rcc-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

/* No element inside the 3-column shell should be able to force horizontal scroll
   on the whole page; any table/wide content scrolls locally instead. */
.shell-v19,
.shell-v19 > * {
  min-width: 0;
}

.shell-v19 .worker-jobs-table,
.shell-v19 table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.worker-jobs-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.worker-jobs-title-sm {
  margin: 0;
  font-size: 13px
}

.worker-jobs-summary {
  font-size: 12px
}

.worker-jobs-body {
  margin-top: 8px
}

.project-worker-jobs.card {
  padding: 10px 14px
}

/* === New Chat type picker modal === */
.rh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200
}

.rh-modal-card {
  width: min(92vw, 380px);
  max-height: 80vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow)
}

.rh-modal-title {
  margin: 0 0 12px;
  font-size: 15px
}

.rh-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.rh-modal-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  cursor: pointer;
  font-size: 13px
}

.rh-modal-item:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(82, 183, 136, .08)
}

.rh-modal-item.active {
  border-color: var(--accent);
  background: rgba(82, 183, 136, .12)
}

.rh-modal-item:disabled {
  opacity: .4;
  cursor: not-allowed
}

.rh-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px
}

/* ============================================================
   RH-FIX-V2: single authoritative responsive breakpoint table.
   Earlier rounds added a canonical 3-column rule but only for
   >=1025px (see "RH-FIX-FINAL" above). Below that, the page fell
   through to several older scattered .shell-v19 rules (some
   2-column, some 1-column, none with !important) that disagreed
   with each other and with the >=1025px rule depending on exact
   width — the actual cause of "co màn hình thì vỡ": the right
   drawer stayed reserved as a real grid column at widths where it
   was supposed to become an overlay, and the sidebar stayed full
   width when it was supposed to go compact/overlay.
   This block uses #appShell (ID) + !important so it always wins
   over every older .shell-v19/.page-workspace .shell-v19 rule in
   this file regardless of source order, and covers the full range
   continuously (no gap between breakpoints).
   ============================================================ */

#appShell.shell-v19,
.page-workspace #appShell.shell-v19 {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
}

html, body {
  width: 100%;
  max-width: 100vw;
  min-height: 100%;
  overflow-x: hidden;
}

/* >= 1440px: full 3-column layout, generous widths
   RH-FIX-V3: these used to hardcode the drawer-track width as a literal
   (minmax(320px,360px)), which completely bypassed the --rh-drawer-w /
   --rh-sidebar-w custom properties that #appShell.inspector-collapsed and
   #appShell.sidebar-collapsed-grid set (RH-FIX-FINAL, above). Same selector
   + !important + later in source order meant this always won, so collapsing
   the inspector left a dead 360px gap instead of letting the middle column
   reclaim it. Now routes through the vars so collapse actually shrinks the
   track. */
@media (min-width: 1440px) {
  #appShell.shell-v19 {
    --rh-sidebar-w: 240px;
    --rh-drawer-w: 360px;
    grid-template-columns: var(--rh-sidebar-w) minmax(0, 1fr) var(--rh-drawer-w) !important;
  }
}

/* 1200-1439px: full 3-column layout, narrower tracks */
@media (min-width: 1200px) and (max-width: 1439px) {
  #appShell.shell-v19 {
    --rh-sidebar-w: 220px;
    --rh-drawer-w: 300px;
    grid-template-columns: var(--rh-sidebar-w) minmax(0, 1fr) var(--rh-drawer-w) !important;
  }
}

#appShell.shell-v19.inspector-collapsed {
  --rh-drawer-w: 0px;
}
#appShell.shell-v19.sidebar-collapsed-grid {
  --rh-sidebar-w: 64px;
}

/* PASS responsive hardening for 1110px screenshot bug
   900-1199px: sidebar auto-compacts to icon rail, right drawer
   becomes a slide-over overlay instead of a reserved grid column
   (so it can't leave dead space when nothing is open in it).
   Verified against the real DOM (app.html) and renderNav() in
   app.js — at this breakpoint #nav renders .nav-v19-item /
   .nav-v19-icon / .nav-v19-label / .nav-v19-count (NOT
   .module-nav-*, which is a different markup only emitted by
   project-manager.js's renderCompactModuleNav() when the user
   manually clicks the « collapse button). The previous round
   hid .module-nav-label/.module-nav-count here, which never
   matched anything actually on the page, so the real
   .nav-v19-label text kept rendering inside the 64px rail —
   that is the clipped-text bug from the screenshot. Also: the
   older @media(max-width:1180px) rule (~line 6821) sets the
   sidebar to position:fixed + transform:translateX(-110%) (an
   off-canvas drawer). That rule has no !important and shares
   the same selector specificity as this block, but doesn't
   declare position/transform on the *icon-rail default* state
   here, so without an explicit override below it kept winning —
   the sidebar was rendering off-screen by default and only
   reachable via .mobile-open, instead of sitting as a static
   always-visible icon rail. Fixed explicitly here. */
@media (min-width: 900px) and (max-width: 1199px) {
  #appShell.shell-v19 {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  /* The existing topbar-with-toggle-buttons rule only fires at
     <=1180px; force it visible up to 1199px too so there is no
     19px dead zone where the drawer is an unreachable overlay. */
  .page-workspace .workspace-topbar-minimal {
    display: flex !important;
  }
  /* R26: /chat and /home never get body.page-workspace (see the R27 note
     on the >=1025px canonical grid rule above — that route was already
     un-scoped from .page-workspace for the same reason). The rules below
     were still .page-workspace-only, so on /chat the sidebar fell through
     to its unscoped default (a full-width fixed panel) at this breakpoint
     and visibly overlaid the chat content/composer. Adding the plain
     #appShell.shell-v19 selector alongside .page-workspace so /chat gets
     the same icon-rail compaction instead of an overlay. */
  .page-workspace .workspace-sidebar,
  #appShell.shell-v19 .workspace-sidebar {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    box-shadow: none !important;
    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    overflow: visible;
  }
  .page-workspace .workspace-sidebar .brand-copy,
  .page-workspace .workspace-sidebar .nav-new-chat,
  .page-workspace .workspace-sidebar .session-history-list,
  .page-workspace .workspace-sidebar .sidebar-project-label,
  .page-workspace .workspace-sidebar .sidebar-footer-note,
  .page-workspace .workspace-sidebar .nav-v19-label,
  .page-workspace .workspace-sidebar .nav-v19-count,
  #appShell.shell-v19 .workspace-sidebar .brand-copy,
  #appShell.shell-v19 .workspace-sidebar .nav-new-chat,
  #appShell.shell-v19 .workspace-sidebar .session-history-list,
  #appShell.shell-v19 .workspace-sidebar .sidebar-project-label,
  #appShell.shell-v19 .workspace-sidebar .sidebar-footer-note,
  #appShell.shell-v19 .workspace-sidebar .nav-v19-label,
  #appShell.shell-v19 .workspace-sidebar .nav-v19-count {
    display: none !important;
  }
  .page-workspace .workspace-sidebar .nav-v19-item,
  #appShell.shell-v19 .workspace-sidebar .nav-v19-item {
    justify-content: center !important;
    padding: 8px 0 !important;
  }
  /* R26: a second, newer sidebar markup (ux-sidebar-v22f / titi-sidebar-ws /
     ux-lib-app-item / sidebar-section-label) renders on some routes (e.g.
     the research workspace behind /chat) and was never covered by the
     nav-v19-* rules above, so its text labels kept rendering full-width
     inside the 64px rail and wrapped into unreadable vertical stacks
     (visible live at ~900-1000px). Hide the same category of text here. */
  .page-workspace .workspace-sidebar .sidebar-section-label,
  #appShell.shell-v19 .workspace-sidebar .sidebar-section-label,
  .page-workspace .workspace-sidebar .section-header,
  #appShell.shell-v19 .workspace-sidebar .section-header,
  .page-workspace .workspace-sidebar .titi-sidebar-ws > span:not(.titi-icon),
  #appShell.shell-v19 .workspace-sidebar .titi-sidebar-ws > span:not(.titi-icon),
  .page-workspace .workspace-sidebar .ux-lib-app-item > span,
  #appShell.shell-v19 .workspace-sidebar .ux-lib-app-item > span {
    display: none !important;
  }
  .page-workspace .workspace-sidebar .titi-sidebar-ws,
  #appShell.shell-v19 .workspace-sidebar .titi-sidebar-ws,
  .page-workspace .workspace-sidebar .ux-lib-app-item,
  #appShell.shell-v19 .workspace-sidebar .ux-lib-app-item {
    justify-content: center !important;
  }
  /* .sidebar-search-btn has no child span — its "Tìm kiếm" label is a raw
     text node next to a ::before emoji icon, so it can't be hidden with
     display:none on a child. font-size:0 hides the text node while the
     ::before keeps its own explicit font-size. */
  .page-workspace .workspace-sidebar .sidebar-search-btn,
  #appShell.shell-v19 .workspace-sidebar .sidebar-search-btn {
    font-size: 0 !important;
    justify-content: center !important;
  }
  .page-workspace .workspace-sidebar .sidebar-search-btn::before,
  #appShell.shell-v19 .workspace-sidebar .sidebar-search-btn::before {
    font-size: 16px !important;
  }
  /* Opening the sidebar via #toggleSidebar at this breakpoint expands
     the rail into a full overlay with labels, instead of staying a
     fixed 64px static column (which would have no room to show them). */
  .page-workspace .workspace-sidebar.mobile-open,
  #appShell.shell-v19 .workspace-sidebar.mobile-open {
    position: fixed !important;
    left: 0 !important;
    top: 44px !important;
    bottom: 0 !important;
    width: min(88vw, 260px) !important;
    max-width: min(88vw, 260px) !important;
    min-width: 0 !important;
    z-index: 36;
    background: var(--panel);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow) !important;
    overflow: auto;
  }
  .page-workspace .workspace-sidebar.mobile-open .brand-copy,
  .page-workspace .workspace-sidebar.mobile-open .nav-new-chat,
  .page-workspace .workspace-sidebar.mobile-open .session-history-list,
  .page-workspace .workspace-sidebar.mobile-open .sidebar-project-label,
  .page-workspace .workspace-sidebar.mobile-open .sidebar-footer-note,
  .page-workspace .workspace-sidebar.mobile-open .nav-v19-label,
  .page-workspace .workspace-sidebar.mobile-open .nav-v19-count,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .brand-copy,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .nav-new-chat,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .session-history-list,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .sidebar-project-label,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .sidebar-footer-note,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .nav-v19-label,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .nav-v19-count {
    display: revert !important;
  }
  .page-workspace .workspace-sidebar.mobile-open .nav-v19-item,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .nav-v19-item {
    justify-content: flex-start !important;
    padding: 7px 9px !important;
  }
  .page-workspace .research-inspector,
  .page-workspace .reviewer-panel {
    position: fixed !important;
    right: 0;
    top: 44px;
    bottom: 0;
    width: min(92vw, 360px) !important;
    z-index: 35;
    transform: translateX(110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  .page-workspace .research-inspector.mobile-open,
  .page-workspace .reviewer-panel.mobile-open {
    transform: translateX(0);
  }
}

/* < 900px: single column, sidebar AND drawer are both full overlays.
   Reuses the same .mobile-open toggle already wired in app.js's
   bindMobilePanes(). */
@media (max-width: 899px) {
  #appShell.shell-v19 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* R26: see the matching note in the 900-1199px block above — /chat never
     gets body.page-workspace, so it needs the plain #appShell.shell-v19
     selector too or the sidebar falls back to an unscoped overlay here. */
  .page-workspace .workspace-sidebar,
  #appShell.shell-v19 .workspace-sidebar {
    position: fixed !important;
    left: 0;
    top: 44px;
    bottom: 0;
    width: min(88vw, 280px) !important;
    max-width: min(88vw, 280px) !important;
    z-index: 36;
    transform: translateX(-110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
    overflow: auto;
  }
  .page-workspace .workspace-sidebar.mobile-open,
  #appShell.shell-v19 .workspace-sidebar.mobile-open {
    transform: translateX(0);
  }
  .page-workspace .research-inspector,
  .page-workspace .reviewer-panel {
    position: fixed !important;
    right: 0;
    top: 44px;
    bottom: 0;
    width: min(92vw, 340px) !important;
    z-index: 35;
    transform: translateX(110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  .page-workspace .research-inspector.mobile-open,
  .page-workspace .reviewer-panel.mobile-open {
    transform: translateX(0);
  }
  .page-workspace .manuscript-studio-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Overview / stat cards: .rcc-body already does 2-col desktop / 1-col
   mobile (existing rule, line ~8231/8346) for the Research-progress +
   Quick-actions split — confirmed by reading workspace-shell.js's
   markup before assuming, no change needed here. .rcc-stats-row's
   auto-fit rule above already handles the stat-card wrapping. */

/* Manuscript Studio: Assistant is now an off-canvas drawer at EVERY width
   (not a fixed grid column on desktop) — Editor+Preview keep the full
   outline/editor/preview grid track width by default; the drawer only
   slides in over them when opened via the AI/History/Agents buttons.
   Outline/Editor/Preview keep their 3-column grid down to 1200px, then
   Preview itself folds into the drawer's own "Preview" tab on narrow
   screens (not enough room for 3 real columns + an overlay). */
.ms-assistant-mobile-toggle {
  display: inline-flex;
}
.ms-assistant-drawer-openers {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.ms-assistant-drawer-close {
  margin-left: auto;
}
.page-workspace .manuscript-assistant-panel {
  position: fixed !important;
  right: 0;
  top: 96px;
  bottom: 0;
  width: min(92vw, 380px) !important;
  max-width: min(420px, 92vw) !important;
  z-index: 35;
  transform: translateX(110%);
  transition: transform .2s ease;
  box-shadow: var(--shadow);
  border-left: 1px solid var(--line);
}
.page-workspace .manuscript-assistant-panel.mobile-open,
.page-workspace .manuscript-assistant-panel.is-open {
  transform: translateX(0);
}
@media (min-width: 1280px) {
  .page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
    --ms-outline-w: 220px;
    grid-template-columns: var(--ms-outline-w) minmax(540px, 1fr) minmax(540px, 1fr) !important;
  }
}
/* 1100–1279px used to force a real 3rd Preview column with NO minimum width guard
   (minmax(0,1fr) each) — on the real outline(200px)+sidebar width at this range that
   squeezed Preview down to ~350-450px, well under the "never narrower than 480px"
   product requirement. Merged into the same <=1279px fallback as <1099px instead:
   below 1280px the Preview column hides cleanly and the drawer's own Preview tab
   (same renderer) takes over — no squeezed column is ever shown. */
@media (max-width: 1279px) {
  .page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
    --ms-outline-w: 160px;
    grid-template-columns: var(--ms-outline-w) minmax(0, 1fr) !important;
  }
  /* Below 1280px there isn't room for 3 real columns >=480px each — the persistent Preview
     column hides and the drawer's own "Preview" tab (renderPreviewTab, same
     renderer) takes over: Editor/Preview/AI become tabs instead of forced
     columns, per this round's exact breakpoint spec. */
  .page-workspace .manuscript-preview-col {
    display: none;
  }
}

/* Outline panel collapse (◀/▶ toggle, manuscript-studio.js#toggleOutlineCollapse):
   shrinks the grid track itself to 44px (same var-driven pattern as the appShell
   inspector collapse above) instead of just hiding the panel's own content and
   leaving a dead 220px gap. */
.page-workspace .manuscript-studio-layout.manuscript-assistant-ready.ms-outline-collapsed {
  --ms-outline-w: 44px !important;
}
.manuscript-outline-panel.ms-outline-collapsed {
  padding-left: 2px;
  padding-right: 2px;
  overflow: hidden;
}
.manuscript-outline-panel.ms-outline-collapsed .ms-outline-search,
.manuscript-outline-panel.ms-outline-collapsed .ms-add-section-btn,
.manuscript-outline-panel.ms-outline-collapsed .ms-section-edit-toggle,
.manuscript-outline-panel.ms-outline-collapsed .outline-jump,
.manuscript-outline-panel.ms-outline-collapsed .ms-chapter-toggle,
.manuscript-outline-panel.ms-outline-collapsed .ms-mode-badge,
.manuscript-outline-panel.ms-outline-collapsed .outline-actions {
  display: none !important;
}
.manuscript-outline-panel.ms-outline-collapsed .outline-item,
.manuscript-outline-panel.ms-outline-collapsed .ms-chapter-head {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.ms-outline-collapse-btn {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.ms-outline-collapse-btn:hover {
  background: rgba(255, 255, 255, .08);
}

/* ============================================================
   RH-FIX-V3: research-app declutter pass (round 12).
   Earlier rounds fixed the grid/overlay mechanics (RH-FIX-FINAL,
   RH-FIX-V2). This block only reduces visual density — tighter
   sidebar/topbar/tabs, narrower default right-inspector column,
   and collapses the bottom composer in Manuscript view (it used
   to stay fully expanded — answer-mode chips + model/thinking
   selects + textarea — eating real vertical space on top of the
   outline/editor/assistant columns, the "bottom chat đè layout"
   complaint). Appended at the end with real selectors only
   (verified against app.html / manuscript-studio.js / app.js
   before writing any rule here) so it wins over the older,
   looser declarations earlier in this file without deleting them.
   ============================================================ */

/* Tighter sidebar: smaller type, less padding, same structure */
.page-workspace .workspace-sidebar {
  font-size: 13px;
}
.page-workspace .sidebar-project {
  margin-bottom: 4px;
}
.page-workspace .module-nav-item {
  padding: 6px 9px;
  font-size: 12.5px;
}
.page-workspace .sidebar-history-section {
  padding-top: 8px;
}

/* Tighter topbar/header row so it stops eating vertical space */
.page-workspace .workspace-topbar-minimal {
  padding: 6px 10px;
  min-height: 38px;
}
.page-workspace .workspace-project-header {
  padding: 8px 14px;
}
.page-workspace .wph-title {
  font-size: 15px;
}
.page-workspace .wph-context {
  font-size: 12px;
}

/* Manuscript/center tabs: smaller, never force-wrap the row, scroll
   horizontally instead of breaking the layout when space is tight */
.page-workspace .manuscript-studio-tabs,
.page-workspace #centerModeTabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 4px;
}
.page-workspace .manuscript-tab,
.page-workspace .center-mode-tab {
  flex: none;
  font-size: 12.5px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* Right inspector: denser tabs so the column reads less cluttered.
   Column WIDTH itself is governed by the #appShell.shell-v19 rules
   above (RH-FIX-V2): 300px at 1200-1439px, up to 360px at >=1440px —
   already narrower than the original 360-440px range, not changed
   further here to avoid re-opening that already-verified cascade. */
.page-workspace .research-inspector .inspector-tabs {
  gap: 2px;
}
.page-workspace .research-inspector .inspector-tab {
  padding: 5px 6px;
  font-size: 11px;
}

/* Manuscript bottom composer: collapsed-by-default behind a single
   "Hỏi AI về phần này" toggle bar (#msComposerToggle, injected by
   manuscript-studio.js's ensureLayout()). Scoped to body.view-manuscript,
   which app.js's updateCenterModePanels() now sets/clears alongside the
   existing state.view checks — does not touch composer behavior on any
   other view (chat/documents/sources/etc. keep the full composer). */
.ms-composer-toggle {
  display: none;
}
.ms-composer-close {
  display: none;
}
body.view-manuscript .ms-composer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 8px;
  align-self: flex-start;
}
body.view-manuscript .composer.composer-v19 {
  display: none;
}
body.view-manuscript .composer.composer-v19.ms-composer-open {
  display: flex;
  flex-direction: column;
  position: relative;
  max-height: 38vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .25);
}
body.view-manuscript .composer.composer-v19.ms-composer-open .ms-composer-close {
  display: inline-flex;
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 1;
}

/* Manuscript outline panel: cap height + scroll instead of pushing the
   editor column down when the thesis outline has many chapters/sections */
.page-workspace .manuscript-outline-panel {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

/* === Manuscript Workbench v63: outline search/collapse, Preview tab, export
   readiness — overrides earlier 12px outline font and adds the new classes the
   right-workspace (assistant) panel actually renders into. !important matches the
   existing override pattern for this file (see RH-FIX-FINAL block above) so this
   wins regardless of which legacy .outline-jump rule loaded first. === */
.page-workspace .outline-jump,
.outline-jump {
  font-size: 13px !important;
  padding: 6px 8px !important;
  line-height: 1.4;
}
.ms-outline-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px 8px;
}
.ms-outline-search {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.ms-outline-header-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ms-chapter-group { list-style: none; margin: 2px 0; }
.ms-chapter-head {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ms-chapter-head .outline-item { flex: 1 1 auto; min-width: 0; }
.ms-chapter-toggle {
  flex: none;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-chapter-toggle:hover { color: var(--accent); }
.ms-chapter-children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
}
.ms-chapter-group.collapsed .ms-chapter-children { display: none; }

/* Preview tab */
.ms-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ms-preview-scope { display: flex; gap: 4px; }
.ms-preview-meta { font-size: 11px; margin-bottom: 6px; }
.ms-preview-body {
  font-size: 13px;
  line-height: 1.6;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.ms-preview-body h1, .ms-preview-body h2, .ms-preview-body h3 { margin: 10px 0 6px; }
.ms-preview-warn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.ms-preview-mode-line {
  font-size: 11px;
  margin-bottom: 6px;
}
.ms-preview-rendermode { display: inline-flex; gap: 4px; }
.ms-preview-source {
  white-space: pre-wrap;
  font-size: 12px;
  font-family: var(--mono, monospace);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  margin: 0;
}

/* Publication-style preview — Overleaf-like read view produced by
   latexToPublicationHtml() in manuscript-studio.js. Every LaTeX construct it
   recognizes becomes one of these classes; unknown commands stay as plain
   text/inline-code rather than disappearing, so this stylesheet only needs
   to cover the known set below. */
.ms-pub-title {
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1.3;
}
.ms-pub-author {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.ms-pub-abstract {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel2);
  padding: 10px 14px;
  margin: 10px 0;
}
.ms-pub-abstract h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.ms-pub-abstract p { margin: 0; }
.ms-pub-keywords {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 14px;
}
.ms-pub-chapter { font-size: 20px; font-weight: 700; margin: 18px 0 8px; }
.ms-pub-h2 { font-size: 17px; font-weight: 700; margin: 16px 0 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.ms-pub-h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
.ms-pub-h4 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.ms-math-display {
  display: block;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: var(--mono, monospace);
  font-size: 13px;
}
.ms-math-inline {
  font-family: var(--mono, monospace);
  background: var(--panel2);
  border-radius: 3px;
  padding: 0 3px;
}
.ms-cite-pill {
  display: inline-block;
  font-size: 11px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  padding: 1px 7px;
  margin: 0 1px;
}
.ms-cite-pill-unknown {
  background: #dc3545;
  color: #fff;
  font-weight: 600;
}
.ms-ref-pill {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}
.ms-pub-figure {
  margin: 12px 0;
  text-align: center;
}
.ms-pub-figure-img { max-width: 100%; border-radius: 6px; }
.ms-pub-figure-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
}
.ms-pub-figure figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.ms-pub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 10px 0;
}
.ms-pub-table th, .ms-pub-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: left;
}
.ms-pub-table thead th { background: var(--panel2); font-weight: 600; }
.ms-pub-table + figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 10px;
}
.ms-pub-list { margin: 8px 0; padding-left: 22px; }
.ms-pub-references {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ms-pub-references h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.ms-pub-fallback {
  white-space: pre-wrap;
  font-size: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  overflow-x: auto;
}

/* Default-LaTeX policy: normalize button, legacy-markdown badges, convert-to-LaTeX diff modal */
.ms-normalize-latex-btn {
  border-color: var(--forest, #52b788);
  color: var(--forest, #52b788);
}
.ms-legacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #f0ad4e;
  border: 1px solid #f0ad4e;
  border-radius: 999px;
  padding: 2px 8px;
}
.ms-legacy-badge.hidden { display: none; }
.outline-md-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f0ad4e;
  border: 1px solid #f0ad4e;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.ms-convert-latex-card { max-width: 720px; }
.ms-convert-latex-card .ms-agent-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}
.ms-convert-latex-card .ms-agent-before,
.ms-convert-latex-card .ms-agent-after {
  max-height: 280px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  background: var(--surface-2, #1a1a1a);
  padding: 6px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .ms-convert-latex-card .ms-agent-diff { grid-template-columns: 1fr; }
}
.ms-preview-empty-card {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  color: var(--text);
}
.ms-preview-empty-card p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.ms-preview-empty-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.ms-preview-body {
  font-size: 13px;
  line-height: 1.55;
}

/* Export readiness */
.ms-export-readiness { margin-bottom: 10px; }
.ms-readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

/* Agents tab: spec-named cards instead of icon-only toolbar buttons */
.ms-assistant-agents-host .ms-agent-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ms-agent-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  font-size: 11px;
}
.ms-agent-card:hover:not(:disabled) { border-color: var(--accent); }
.ms-agent-card:disabled { opacity: .5; cursor: not-allowed; }
.ms-agent-card-icon { font-size: 16px; }
.ms-agent-card-name { font-weight: 600; }
.ms-agent-card-status { color: var(--muted); font-size: 10px; }

/* AI Chat tab (Cursor-style) */
.ms-assistant-chat-ctx { font-size: 11px; margin-bottom: 6px; }
.ms-chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: calc(100vh - 380px);
  min-height: 120px;
  padding: 4px 2px;
  margin-bottom: 8px;
}
.ms-chat-msg {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ms-chat-msg-user { background: rgba(82,183,136,.10); align-self: flex-end; max-width: 90%; }
.ms-chat-msg-ai { background: var(--panel); border: 1px solid var(--line); }
.ms-chat-msg-error { background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.3); color: var(--text); }
.ms-chat-msg-actions { display: flex; gap: 6px; margin-top: 6px; }
.ms-chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ms-chat-quick-btn { font-size: 11px; }
.ms-chat-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.ms-chat-input {
  flex: 1 1 auto;
  resize: vertical;
  font-size: 13px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

/* Overleaf-lite editor toolbar: undo/redo, search, zoom, jump, code/visual */
.ms-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.ms-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 2px;
}
.ms-toolbar-spacer { flex: 1 1 auto; }
.ms-toolbar-search {
  width: 160px;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.ms-toolbar-jump {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  max-width: 160px;
}
.ms-toolbar-linecol {
  font-size: 11px;
  white-space: nowrap;
}
.ms-problems-count {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.ms-problems-count.ms-problems-count-ok { background: var(--accent); }
.ms-problems-count.ms-problems-count-warn { background: #d9a13a; }
.ms-symbol-popover, .ms-cite-popover, .ms-problems-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: 8px;
  margin-bottom: 6px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 12px;
}
.ms-symbol-group { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 6px; }
.ms-symbol-group-label { font-weight: 600; color: var(--muted); width: 72px; }
.ms-symbol-btn { font-family: monospace; }
.ms-cite-popover-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ms-cite-popover-list li { margin-bottom: 2px; }
.ms-cite-popover-insert { width: 100%; text-align: left; }
.ms-problems-list { list-style: none; margin: 0; padding: 0; }
.ms-problem-item { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.ms-problem-item.ms-problem-error { color: #d9534f; }
.ms-problem-item.ms-problem-warn { color: #d9a13a; }
.ms-problem-item.ms-problem-info { color: var(--muted); }
.ms-problem-jump { padding: 0 6px; font-size: 10px; }
.ms-problems-empty { margin: 0; }
.manuscript-preview-col.ms-visual-focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  transition: outline-color .3s;
}

/* Editor header status bar */
.ms-editor-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  padding: 4px 2px 8px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ms-editor-status-bar strong { color: var(--text); }
.ms-cite-pass { color: var(--accent); }
.ms-cite-warn { color: #d9a13a; }
.ms-cite-fail { color: #dc3545; }

/* "Mở Global Inspector" reopen toggle — global inspector defaults to collapsed
   while Manuscript Studio is open (see collapseGlobalInspector in
   manuscript-assistant-panel.js), this gives an explicit way back. */
.ms-global-inspector-toggle {
  font-size: 11px;
}

/* ===========================================================
   MS-OVERLEAF-V63 — balanced full-height editor/preview
   Root cause: `.page-workspace .manuscript-studio-layout` set
   `align-items: start` (app.css:5611), so the editor & preview
   columns stayed at their content height (~470px) inside a
   ~940px grid row, leaving a tall black gap below each pane.
   Force the columns to stretch and let the textarea / preview
   body fill the remaining height, Overleaf-style.
   =========================================================== */
.page-workspace .manuscript-studio-layout,
.page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
  align-items: stretch;
}
.page-workspace .manuscript-studio-layout.manuscript-assistant-ready {
  min-height: 620px;
}
.page-workspace .manuscript-editor-col,
.page-workspace .manuscript-preview-col {
  min-height: 0;
  max-height: 100%;
}
.page-workspace .manuscript-editor-col {
  overflow-y: auto;            /* textarea fills; only scrolls if truly overflowing */
}
/* the wrapper that holds the full / section editor grows to fill the column */
.page-workspace .manuscript-full-editor-wrap,
.page-workspace .manuscript-section-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
/* the actual textarea fills the wrapper instead of a fixed 480px min-height.
   Also clears `.manuscript-editor { max-height: 260px }` (app.css:823) which
   was clamping the full editor to a small box even though its flex parents
   had room to stretch it. */
.page-workspace .manuscript-full-editor,
.page-workspace #manuscriptEditor,
.page-workspace #manuscriptFullEditor,
.page-workspace .manuscript-editor-col .manuscript-editor,
.page-workspace .manuscript-section-editor {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  resize: none;
}
/* preview: keep the column header pinned, let the body scroll to fill height.
   `.ms-preview-col-inner` was `display:block`, so the child's `flex:1 1 auto`
   (app.css:9203) was a no-op and the body shrank to its content height
   instead of filling the column. Make it a column flex container so the
   body actually stretches. */
.page-workspace .manuscript-preview-col .ms-preview-col-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.page-workspace .manuscript-preview-col .ms-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Manuscript Library (Sprint 1B) — list view shown before entering any single
   manuscript editor; mirrors the .rcc-zone card pattern used elsewhere. */
.manuscript-library-panel {
  padding: 16px;
}
.manuscript-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.manuscript-library-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.manuscript-library-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.manuscript-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.manuscript-card {
  background: var(--surface-2, #1e1e2e);
  border: 1px solid var(--border, #2d2d3d);
  border-radius: 8px;
  padding: 12px;
}
.manuscript-card-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}
.manuscript-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.manuscript-card-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface-3, #2a2a3d);
}
.manuscript-card-sub {
  font-size: 0.75rem;
  margin: 0 0 8px;
}
.manuscript-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.manuscript-library-empty {
  text-align: center;
  padding: 24px 12px;
}
.manuscript-library-empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.manuscript-back-to-library {
  margin-right: 8px;
}

.project-menu-label {
  margin: 2px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .55;
}

.project-sidebar-item-menu {
  min-width: 200px;
  max-width: min(260px, calc(100vw - 16px));
}

.projects-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 2px;
  cursor: pointer;
}

.projects-header .section-caret {
  font-size: 11px;
  opacity: .7;
}

.project-list {
  gap: 2px;
  margin: 4px 0 2px;
}

@media (max-width: 768px) {
  .project-actions .icon-btn,
  .project-section-header .section-actions .icon-btn {
    min-width: 36px;
    min-height: 36px;
  }
}
/* RCC — AI provider setup card (replaces rcc-warn-banner) */
.rcc-ai-setup-card {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(124, 196, 255, .22);
  background: linear-gradient(135deg, rgba(124, 196, 255, .09), rgba(82, 183, 136, .07));
  display: grid;
  gap: 10px;
}
.rcc-ai-setup-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rcc-ai-setup-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 196, 255, .14);
  color: #9ed4ff;
  font-size: 16px;
  flex: 0 0 auto;
}
.rcc-ai-setup-copy { flex: 1; min-width: 0; }
.rcc-ai-setup-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.rcc-ai-setup-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.rcc-ai-setup-dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.rcc-ai-setup-dismiss:hover { background: rgba(255,255,255,.08); }
.rcc-ai-setup-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rcc-ai-provider-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.rcc-ai-setup-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
.rcc-ai-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rcc-link-btn {
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.rcc-warn-banner { display: none; }
/* Chat gateway error + AI meta (Hostinger) */
.msg-bubble-error { border-left: 3px solid var(--danger, #c0392b); }
.msg-chat-error { margin-top: 0.5rem; font-size: 0.85rem; }
.msg-chat-error summary { cursor: pointer; color: var(--danger, #c0392b); }
.msg-ai-meta { margin-top: 0.35rem; font-size: 0.8rem; }
/* Chat gateway UX — activity timeline, health strip, message extras */
.activity-timeline-live .activity-item-live[data-status="failed"] .activity-icon {
  color: var(--danger, #f87171);
}
.activity-timeline-live .activity-item-live[data-status="success"] .activity-icon,
.activity-timeline-live .activity-item-live[data-status="succeeded"] .activity-icon {
  color: var(--ok, #4ade80);
}
.activity-msg,
.activity-agent {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
}
.activity-right-sub {
  margin-top: 12px;
}
.activity-fallback-note {
  font-size: 0.82rem;
  border-left: 3px solid var(--warn, #fbbf24);
  padding-left: 8px;
}
.workspace-health-strip {
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
}
.health-strip-title {
  margin: 0 0 6px;
  font-size: 0.85rem;
}
.health-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.health-strip-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border, #2d2d3d);
}
.health-strip-item:last-child {
  border-bottom: 0;
}
.health-ok span:first-child::before {
  content: "✓ ";
  color: var(--ok, #4ade80);
}
.health-warn span:first-child::before {
  content: "○ ";
  color: var(--warn, #fbbf24);
}
.msg-reasoning-box,
.msg-citations-box,
.msg-artifacts-box {
  margin-top: 8px;
  font-size: 0.85rem;
}
.msg-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.msg-error-debug {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  word-break: break-word;
}
.composer-menu-item .composer-menu-desc {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Composer AI Sync — popover, bottom sheet, mode chips */
.composer-plus-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
}
.composer-mode-chip-wrap {
  display: flex;
  align-items: center;
  max-width: min(220px, 45vw);
}
.composer-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: rgba(82, 183, 136, 0.14);
  border: 1px solid rgba(82, 183, 136, 0.35);
  font-size: 12px;
  line-height: 1.2;
  max-width: 100%;
}
.composer-mode-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-mode-chip-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
}
.composer-mode-chip-clear:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.composer-plus-popover {
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  overflow-y: auto;
  border-radius: 16px;
  padding: 8px;
  background: var(--panel, #1a1a24);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.composer-plus-sheet-handle {
  display: none;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  margin: 6px auto 8px;
}
.composer-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 4px 10px;
}
.composer-quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--line, #2d2d3d);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  min-height: 72px;
  transition: background 0.15s, border-color 0.15s;
}
.composer-quick-card:hover,
.composer-quick-card:focus-visible {
  background: rgba(82, 183, 136, 0.1);
  border-color: rgba(82, 183, 136, 0.35);
  outline: none;
}
.composer-quick-icon {
  font-size: 18px;
  line-height: 1;
}
.composer-quick-label {
  font-size: 12px;
  font-weight: 600;
}
.composer-quick-desc {
  font-size: 10px;
  line-height: 1.25;
}
.composer-menu-item-adv {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 44px;
}
.composer-menu-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.composer-menu-name {
  font-size: 13px;
  font-weight: 500;
}
.composer-menu-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.composer-advanced-list {
  display: grid;
  gap: 2px;
}
@media (max-width: 768px) {
  .composer-plus-sheet-handle {
    display: block;
  }
  .composer-plus-popover.composer-plus-menu {
    max-height: 70dvh;
  }
  .composer-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .composer-quick-card {
    min-height: 80px;
    padding: 12px 10px;
  }
  .composer-menu-item-adv {
    min-height: 52px;
    padding: 10px 12px;
  }
}
.page-workspace .composer-row {
  align-items: flex-end;
  gap: 8px;
}


/* ===================================================================
   v63-ui-fix — Sidebar, Composer popover, Empty state, Inspector
   =================================================================== */

/* --- A. Sidebar: "Manage projects" thành dạng nhỏ + row layout --- */
.sidebar-projects-footer {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 0 2px !important;
  min-height: 28px;
}
.sidebar-show-more {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  min-height: 26px;
  padding: 3px 8px;
}
/* R96-CLAUDE-POLISH: "Quản lý dự án" already exists as the last item in the
   Projects section's "⋮" organize menu (buildProjectOrganizeMenu() in
   workspace-shell.js, data-organize-action="manage") — this standalone
   footer button was a second, redundant entry point to the exact same
   action, and its cramped flex-sharing with "Show more (+13)" squeezed
   Show More down to ~16px wide, visually overlapping the two labels
   (confirmed live via getBoundingClientRect). Keeping the element in the
   DOM (not deleting it) since the organize menu's "manage" action still
   triggers it via #manageProjectsBtn.click(). */
.sidebar-manage-link {
  display: none !important;
}
.sidebar-manage-link:hover {
  opacity: 1;
  background: rgba(255,255,255,.07) !important;
  color: var(--text, #fff) !important;
}

/* --- B. Composer + menu: popover sát nút + trên desktop, bottom sheet trên mobile --- */
.composer-plus-wrap {
  position: relative !important;
}
/* Desktop popover: mở lên từ nút +, sát góc trái */
.composer-plus-menu.composer-plus-popover {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  top: auto !important;
  min-width: 320px;
  max-width: min(380px, calc(100vw - 24px));
  max-height: min(480px, 68vh);
  overflow-y: auto;
  padding: 6px 6px 8px;
  border-radius: 16px;
  background: var(--panel, #1a1a24) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 300 !important;
  /* Ẩn scrollbar nhưng vẫn scroll được */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
/* Override rule cũ không còn cần */
.page-workspace .composer-plus-menu {
  border-radius: 16px !important;
  min-width: 280px !important;
}

/* Sheet handle — ẩn trên desktop */
.composer-plus-sheet-handle {
  display: none;
}

/* --- C. Mobile: bottom sheet thay vì popover --- */
@media (max-width: 768px) {
  .composer-plus-menu.composer-plus-popover {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100%;
    max-width: 100% !important;
    max-height: 70dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 500 !important;
  }
  .composer-plus-sheet-handle {
    display: block;
  }
  /* Backdrop khi sheet mở */
  body.composer-plus-sheet-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 499;
  }
  /* Composer không bị mobile bottom nav che */
  .page-workspace .workspace-center-pane {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
  }
  .composer.composer-v19 {
    bottom: max(env(safe-area-inset-bottom, 0px), 4px);
  }
}

/* --- D. Mode chip hiển thị rõ hơn --- */
.composer-mode-chip-wrap:not(.hidden) {
  display: flex !important;
  align-items: center;
}
.composer-mode-chip {
  background: rgba(82,183,136,.16) !important;
  border-color: rgba(82,183,136,.4) !important;
  font-size: 11.5px;
}
.composer-mode-chip-icon {
  font-size: 13px;
}

/* --- E. Project item active — nền nổi nhẹ giống ChatGPT --- */
.project-item.is-active {
  background: rgba(82,183,136,.12) !important;
  border: 1px solid rgba(82,183,136,.22) !important;
}
.project-item.is-active .project-name {
  color: var(--text, #fff);
  font-weight: 500;
}
/* Mobile: luôn hiện project-actions (không cần hover) */
@media (max-width: 768px) {
  .project-item .project-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* --- F. Right inspector: nhỏ gọn hơn mặc định --- */
.page-workspace .shell-v19 {
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) 260px !important;
}
.page-workspace .research-inspector {
  width: 260px !important;
  min-width: 0 !important;
  max-width: 260px !important;
  flex: 0 0 260px !important;
}
/* Inspector tabs: ẩn label, chỉ hiện icon để tiết kiệm chỗ */
.page-workspace .inspector-tab .inspector-tab-label {
  display: none;
}
.page-workspace .inspector-tabs .inspector-tab {
  padding: 6px 8px !important;
  min-width: 32px;
  text-align: center;
}
.page-workspace .inspector-tabs .inspector-tab.active .inspector-tab-label {
  display: inline;
  margin-left: 4px;
  font-size: 11px;
}

/* --- G. Workspace empty state — card hướng dẫn --- */
.chat-empty-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.chat-empty-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text, #fff);
  margin: 0;
}
.chat-empty-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: -12px 0 0;
}
.chat-empty-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.chat-empty-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line, #2d2d3d);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.chat-empty-card:hover,
.chat-empty-card:focus-visible {
  background: rgba(82,183,136,.09);
  border-color: rgba(82,183,136,.3);
  outline: none;
}
.chat-empty-card-icon {
  font-size: 22px;
  line-height: 1;
}
.chat-empty-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #fff);
}
.chat-empty-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .chat-empty-cards {
    grid-template-columns: 1fr;
  }
  .chat-empty-title {
    font-size: 18px;
  }
}

/* --- H. Activity timeline trong chat message --- */
.msg-activity-toggle {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  background: rgba(255,255,255,.03);
  transition: background .12s;
}
.msg-activity-toggle:hover {
  background: rgba(255,255,255,.07);
  color: var(--text);
}
.msg-activity-box {
  margin-top: 8px;
}
.msg-activity-box.hidden {
  display: none;
}

/* --- I. Chat error message: đẹp hơn --- */
.msg-chat-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  font-size: 12px;
}
.msg-chat-error summary {
  cursor: pointer;
  color: rgba(239,68,68,.9);
  font-weight: 600;
  font-size: 12.5px;
}
.msg-error-debug {
  list-style: none;
  padding: 4px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 2px;
}
.msg-error-debug li {
  font-size: 11px;
  color: var(--muted);
}
.msg-chat-retry {
  margin-top: 8px;
}
.msg-action-row {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- J. Composer group label rõ hơn --- */
.composer-menu-group {
  font-size: 10.5px;
  padding: 8px 10px 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* session icon emoji font fix */
.session-rename-btn, .session-delete-btn {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
  font-size: 14px !important;
}

/* sidebar footer nowrap */
.sidebar-show-more {
  white-space: nowrap !important;
}

/* === Activity Timeline Library (ATL) v1 === */
.atl-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.atl-item {
  display: grid;
  grid-template-columns: 22px 2px 1fr;
  grid-template-rows: auto;
  gap: 0 6px;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 13px;
  position: relative;
}
.atl-last {
  grid-template-columns: 22px 1fr;
}
.atl-dot {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s;
  min-width: 22px;
}
.atl-line {
  grid-column: 2;
  grid-row: 1 / 99;
  width: 2px;
  background: var(--line, rgba(255,255,255,.1));
  margin: 20px 0 0 0;
  border-radius: 1px;
  align-self: stretch;
}
.atl-body {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-bottom: 4px;
}
.atl-last .atl-body {
  grid-column: 2;
}
.atl-label {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}
.atl-msg {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.atl-meta {
  font-size: 11px;
  color: var(--muted);
  opacity: .8;
}
.atl-err {
  font-size: 11.5px;
  color: rgba(239,68,68,.85);
}
.atl-empty {
  font-size: 13px;
  padding: 6px 0;
}
/* Status dot colors */
.atl-running .atl-dot  { color: var(--accent, #6366f1); }
.atl-done .atl-dot     { color: #22c55e; }
.atl-warning .atl-dot  { color: #f59e0b; }
.atl-error .atl-dot    { color: #ef4444; }
.atl-pending .atl-dot  { color: var(--muted, rgba(255,255,255,.4)); }
/* Running animation */
.atl-running .atl-dot {
  animation: atl-pulse 1.4s ease-in-out infinite;
}
@keyframes atl-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
/* Compact variant */
.atl-compact .atl-item { padding: 3px 0; }
.atl-compact .atl-label { font-size: 12px; }
.atl-compact .atl-msg   { display: none; }

/* Sources list */
.atl-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atl-src-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
}
.atl-src-title {
  font-weight: 500;
  line-height: 1.35;
}
a.atl-src-title {
  color: var(--accent, #6366f1);
  text-decoration: none;
}
a.atl-src-title:hover { text-decoration: underline; }
.atl-src-more { font-size: 12px; color: var(--muted); }
.atl-show-more-btn {
  background: none;
  border: none;
  color: var(--accent, #6366f1);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* === AI Mode Selector — TiTi Core + AI Expert sections === */
.ai-mode-section {
  padding: 4px 0 2px;
}
.ai-mode-section + .ai-mode-section {
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
  margin-top: 2px;
  padding-top: 6px;
}
.ai-mode-section-heading {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 12px 4px;
  opacity: .7;
}
.ai-titi-mode-item,
.ai-expert-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 12px;
  line-height: 1.3;
}
.ai-mode-item-desc {
  font-size: 10.5px;
  opacity: .7;
}
.ai-titi-mode-item.is-active,
.ai-expert-item.is-active {
  background: rgba(99,102,241,.13);
  color: var(--accent, #6366f1);
}
.ai-titi-mode-item.is-active::before,
.ai-expert-item.is-active::before {
  content: "✓ ";
  opacity: .7;
}
.ai-mode-btn {
  font-size: 12.5px;
}

/* AI mode menu static section headings */
.ai-mode-section-heading-static {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px 3px;
  opacity: .7;
}
.ai-mode-section-sep {
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
  margin-top: 4px;
  padding-top: 8px;
}

/* ── Manuscript Library List ──────────────────────────────────────── */
.manuscript-library-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ms-lib-card { background: var(--bg-surface, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.ms-lib-card:hover, .ms-lib-card:focus { border-color: var(--accent, #7c3aed); background: var(--bg-hover, #2a2a3e); outline: none; }
.ms-lib-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ms-lib-meta { font-size: 12px; }
.ms-lib-date { font-size: 11px; }

/* ── Composer + menu group headers (V43) ────────────────────────────── */
.composer-menu-group-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 3px;
  pointer-events: none;
  user-select: none;
}

/* ── AI Selector: Nâng cao / API Expert accordion ───────────────────── */
.composer-menu-advanced {
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
  margin-top: 4px;
}
.composer-menu-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #aaa);
  list-style: none;
  user-select: none;
}
.composer-menu-advanced-toggle::-webkit-details-marker { display: none; }
.composer-menu-advanced-toggle::after {
  content: "▾";
  margin-left: auto;
  transition: transform .18s;
  font-size: 11px;
  opacity: .6;
}
.composer-menu-advanced[open] .composer-menu-advanced-toggle::after {
  transform: rotate(-180deg);
}
.composer-menu-advanced-toggle:hover { color: var(--text, #fff); }
.composer-menu-advanced-body { padding-bottom: 4px; }

/* ── Activity timeline: synthetic steps (V43) ───────────────────────── */
.activity-timeline-synthetic {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-timeline-synthetic .at-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text-muted, #aaa);
}
.activity-timeline-synthetic .at-item.running { color: var(--accent, #7c3aed); }
.activity-timeline-synthetic .at-item.completed { color: var(--success, #22c55e); }
.activity-timeline-synthetic .at-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.activity-timeline-synthetic .at-item.running .at-dot {
  animation: atl-pulse 1s ease-in-out infinite;
}
@keyframes atl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.75); }
}

/* ── V44: tool menu item — check mark, desc line, icon alignment ────── */
.composer-menu-item-adv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  min-height: 48px;
}
.composer-menu-item-adv .composer-menu-icon {
  flex-shrink: 0;
  font-size: 18px;
  width: 24px;
  text-align: center;
  line-height: 1;
}
.composer-menu-item-adv .composer-menu-text { flex: 1; min-width: 0; }
.composer-menu-item-adv .composer-menu-name { font-size: 13.5px; font-weight: 500; }
.composer-menu-item-adv .composer-menu-desc { font-size: 11.5px; line-height: 1.35; white-space: normal; }
.composer-menu-check {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--accent, #7c3aed);
  margin-left: auto;
}

/* ── AI mode selector: 3-mode compact style (V44) ────────────────────── */
.titi-menu-core .composer-menu-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 14px 4px;
  user-select: none;
}
.titi-core-item { border-radius: 6px; }
.titi-core-item.is-active {
  background: var(--bg-hover, rgba(124,58,237,.12));
}
.titi-core-item.is-active .composer-menu-name { color: var(--accent, #7c3aed); }

/* ── Activity timeline: expandable detail (V44) ─────────────────────── */
.activity-detail-wrap { margin-top: 2px; }
.activity-detail-toggle {
  cursor: pointer;
  font-size: 11px;
  list-style: none;
  user-select: none;
}
.activity-detail-toggle::-webkit-details-marker { display: none; }
.activity-timeline-live .activity-time { font-size: 10.5px; margin-left: 4px; }
.activity-timeline-live .activity-summary { font-size: 12.5px; font-weight: 500; }

/* ── Pending dot for synthetic steps ─────────────────────────────────── */
.activity-timeline-synthetic .at-item.pending { color: var(--text-muted, #777); }
.activity-timeline-synthetic .at-item { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12px; }
.activity-timeline-synthetic .at-label { flex: 1; }

/* ── V46: Prevent any side-column in assistant message row ──────────── */
.msg.assistant { flex-direction: column !important; }
/* Hide any legacy titi-meta side boxes */
.msg-titi-meta { display: none !important; }

/* ── V45: Compact TiTi badge on answer card ──────────────────────────── */
.msg-bubble-assistant { position: relative; }
.msg-titi-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent, #7c3aed);
  background: var(--bg-hover, rgba(124,58,237,.08));
  border: 1px solid var(--border, rgba(124,58,237,.18));
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
  line-height: 1.5;
  pointer-events: none;
  user-select: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge is absolute-positioned top-right; answer text uses full width */
.msg-bubble-assistant .msg-answer { padding-right: 0; }

/* ── V45: msg-ai-meta details (technical, hidden by default) ─────────── */
.msg-ai-meta-details { margin-top: 4px; font-size: 11px; }
.msg-ai-meta-toggle { cursor: pointer; color: var(--muted); font-size: 11px; list-style: none; }
.msg-ai-meta-toggle::-webkit-details-marker { display: none; }

/* ── V45: + menu restructure ─────────────────────────────────────────── */
.composer-menu-main { display: flex; flex-direction: column; }
.composer-menu-more-wrap { border-top: 1px solid var(--border, #e5e7eb); margin-top: 4px; padding-top: 4px; }
.composer-menu-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  gap: 6px;
}
.composer-menu-more-toggle:hover { background: var(--bg-hover, rgba(0,0,0,.04)); color: var(--text); }
.composer-menu-more { display: flex; flex-direction: column; }
.composer-menu-more.hidden { display: none; }

/* ── V45: Timeout error card ─────────────────────────────────────────── */
.msg-bubble-timeout {
  border-left: 3px solid var(--warn-color, #f59e0b);
  background: var(--warn-bg, rgba(245,158,11,.06));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
}
.msg-timeout-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.msg-timeout-main { flex: 1; min-width: 0; }
.msg-timeout-title { font-weight: 600; margin: 0 0 10px; font-size: 14px; }
.msg-timeout-details { margin-top: 8px; }
.msg-timeout-details summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.msg-timeout-details pre { margin: 6px 0 0; padding: 8px; background: var(--bg-code, #f4f4f5); border-radius: 4px; }

/* ── V45: Action buttons consolidated ───────────────────────────────── */
.msg-act-more { display: inline-block; }
.msg-act-more summary { list-style: none; cursor: pointer; }
.msg-act-more summary::-webkit-details-marker { display: none; }
.msg-act-more-btn { font-weight: 700; letter-spacing: .05em; }
.msg-act-more-panel { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; padding: 6px 8px; background: var(--bg-hover, rgba(0,0,0,.04)); border-radius: 6px; }

/* ── V45: Account menu ───────────────────────────────────────────────── */
.user-avatar-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  transition: background .15s;
}
.user-avatar-btn:hover { background: var(--bg-hover, rgba(0,0,0,.06)); }
.user-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}
.user-menu-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.user-menu-avatar { font-size: 28px; flex-shrink: 0; }
.user-menu-info { display: flex; flex-direction: column; min-width: 0; }
.user-menu-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-email { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-sep { border: none; border-top: 1px solid var(--border, #e5e7eb); margin: 4px 0; }
.user-menu-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.user-menu-item:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
.user-menu-logout { color: var(--error, #dc2626); }
.user-menu-logout:hover { background: rgba(220,38,38,.06); }

/* ── V47 ChatGPT/Gemini-style chat layout ──────────────────────────── */

/* Chat area: takes remaining height, scrolls */
.page-workspace .main,
.main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#chat,
.chat-thread,
.messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
}

/* Composer always fixed at the bottom of .main */
.composer-v19,
.composer-research,
.composer-v42 {
  flex-shrink: 0;
}

/* ── Compact assistant action bar ────────────────────────────────────── */
.msg-action-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity .15s;
}
.msg:hover .msg-action-bar,
.msg.assistant:focus-within .msg-action-bar {
  opacity: 1;
}
.msg-icon-btn {
  background: none;
  border: none;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted, #8a8a8a);
  line-height: 1;
  transition: background .12s, color .12s;
}
.msg-icon-btn:hover {
  background: var(--bg-hover, rgba(0,0,0,.06));
  color: var(--text, #1a1a1a);
}

/* More panel */
.msg-more-wrap {
  position: relative;
  display: inline-block;
}
.msg-more-wrap summary { list-style: none; }
.msg-more-wrap summary::-webkit-details-marker { display: none; }
.msg-more-toggle { font-weight: 700; letter-spacing: .05em; }
.msg-more-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 4px;
  min-width: 200px;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.msg-more-item {
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text, #1a1a1a);
  white-space: nowrap;
}
.msg-more-item:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }

/* ── Activity toggle ─────────────────────────────────────────────────── */
.msg-activity-wrap {
  margin-top: 6px;
  font-size: 12px;
}
.msg-activity-toggle {
  list-style: none;
  cursor: pointer;
  color: var(--muted, #8a8a8a);
  font-size: 11.5px;
  padding: 3px 0;
  user-select: none;
}
.msg-activity-toggle::-webkit-details-marker { display: none; }
.msg-activity-body {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-hover, rgba(0,0,0,.03));
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
}

/* ── Sources pill ────────────────────────────────────────────────────── */
.msg-sources-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--accent, #7c3aed);
  cursor: pointer;
  transition: background .12s;
}
.msg-sources-pill:hover { background: var(--bg-hover, rgba(124,58,237,.06)); }

/* ── Sources drawer ──────────────────────────────────────────────────── */
.titi-sources-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg-card, #fff);
  border-left: 1px solid var(--border, #e5e7eb);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right .25s ease;
  overflow: hidden;
}
.titi-sources-drawer.open { right: 0; }
.titi-sources-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.titi-sources-title { font-weight: 600; font-size: 14px; }
.titi-sources-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted, #8a8a8a);
  padding: 4px;
  border-radius: 4px;
}
.titi-sources-close:hover { background: var(--bg-hover, rgba(0,0,0,.06)); }
.titi-sources-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.titi-sources-empty { padding: 20px 0; text-align: center; font-size: 13px; }
.titi-source-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.titi-src-title { font-weight: 600; font-size: 13px; }
.titi-src-meta { font-size: 11px; color: var(--muted, #8a8a8a); }
.titi-src-reliability { margin-left: 8px; font-size: 11px; color: var(--accent, #7c3aed); }
.titi-src-url {
  font-size: 11px;
  color: var(--accent, #7c3aed);
  text-decoration: none;
  word-break: break-all;
}
.titi-src-url:hover { text-decoration: underline; }
.titi-src-snippet { font-size: 12px; margin: 0; }

/* ── User message action bar ─────────────────────────────────────────── */
.msg-user-action-bar {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .15s;
}
.msg.user:hover .msg-user-action-bar { opacity: 1; }

/* ── Remove old verbose action rows from assistant cards ─────────────── */
.msg-assistant-actions { display: none !important; }
/* Hide old save evidence button (moved to More menu) */
.msg-evidence-actions { display: none !important; }

/* ── Answer card max-width comfortable ──────────────────────────────── */
.msg.assistant .msg-bubble-assistant {
  max-width: 100%;
}

/* ── Mobile: sources drawer full width ──────────────────────────────── */
@media (max-width: 600px) {
  .titi-sources-drawer {
    width: 100vw;
    max-width: 100vw;
    right: -100vw;
  }
  .titi-sources-drawer.open { right: 0; }
}

/* ── V48 Auto/TiTi/Expert selector + user bubble fix ────────────────── */

/* Fix double-bubble: remove outer .msg.user card styling — keep only inner .msg-bubble-user */
.msg.user,
.page-workspace .msg.user {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* User bubble — single clean bubble, ChatGPT style */
.msg-bubble-user {
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-bottom-right-radius: 6px !important;
  color: var(--text, #f1f5f9);
  max-width: min(85%, 520px);
  align-self: flex-end;
}

/* User message row: flex end */
.msg.user {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* ── AI mode selector — 3-tier menu ─────────────────────────────────── */
.titi-menu-auto { border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 4px; margin-bottom: 4px; }
.titi-menu-core { border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 4px; margin-bottom: 4px; }
.titi-menu-expert { }

.titi-expert-wrap { }
.titi-expert-toggle {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #8a8a8a);
  padding: 6px 12px;
  user-select: none;
}
.titi-expert-toggle::-webkit-details-marker { display: none; }
.titi-expert-body { padding: 4px 0; }
.titi-expert-note {
  font-size: 11px;
  padding: 4px 12px 8px;
  margin: 0;
  line-height: 1.4;
}

/* ── Artifacts panel ─────────────────────────────────────────────────── */
.msg-artifacts-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--accent, #7c3aed);
  cursor: pointer;
  transition: background .12s;
}
.msg-artifacts-pill:hover { background: var(--bg-hover, rgba(124,58,237,.06)); }

.msg-data-quality {
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--bg-hover, rgba(0,0,0,.03));
  border-radius: 6px;
  border-left: 3px solid var(--warn-color, #f59e0b);
}
.msg-data-quality-title { font-weight: 600; margin-bottom: 4px; }
.msg-data-quality-item { color: var(--muted, #8a8a8a); }

/* Artifact table */
.artifact-table-wrap { overflow-x: auto; margin-top: 8px; }
.artifact-table {
  border-collapse: collapse;
  font-size: 12.5px;
  width: 100%;
  min-width: 300px;
}
.artifact-table th, .artifact-table td {
  padding: 5px 10px;
  border: 1px solid var(--border, #e5e7eb);
  text-align: left;
  white-space: nowrap;
}
.artifact-table th { background: var(--bg-hover, rgba(0,0,0,.05)); font-weight: 600; }

/* ── Badge: Auto → mode_used ─────────────────────────────────────────── */
.msg-titi-badge {
  max-width: 160px; /* wider for "Auto → TiTi - Smart" */
}

/* ── Account menu improvements ────────────────────────────────────────── */
.user-menu-panel {
  z-index: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   V49 — UI Polish: menu gọn, hover-only buttons, search, new-chat
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Ẩn mô tả nhỏ trong AI mode menu (chỉ hiện tên mode) ────────── */
#aiModeMenu .composer-menu-desc,
#aiModeMenu .titi-expert-note {
  display: none !important;
}
#aiModeMenu .composer-menu-item {
  padding: 9px 14px;
}
#aiModeMenu .composer-menu-name {
  font-size: 13.5px;
  font-weight: 500;
}

/* ── 2. Ẩn mô tả nhỏ trong + menu khi user không cần ────────────────── */
#composerPlusMenu .composer-menu-desc {
  font-size: 10.5px;
  color: var(--muted, #8a8a8a);
  opacity: 0.7;
}

/* ── 3. Ẩn provider chip (deepseek) trong context strip ─────────────── */
.ctx-chip-provider { display: none !important; }

/* ── 4. Composer: + và send chỉ hiện khi hover hoặc focus trong ──────── */
/* R38E: scoped away from .composer-r22e — this opacity-fade rule (3-class
   specificity) was outranking titi-ux-flow.css's .composer-r22e .send /
   .composer-plus-btn rules (2-class specificity) since body.page-workspace
   is present from load, silently hiding Plus/Send by default and fighting
   the deliberate has-text show/hide logic added in titi-ux-flow.css. Left
   in place, unscoped, for any non-r22e composer instance. */
.page-workspace .composer-v42:not(.composer-r22e) .composer-plus-btn,
.page-workspace .composer-v42:not(.composer-r22e) .send {
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.page-workspace .composer-v42:not(.composer-r22e):hover .composer-plus-btn,
.page-workspace .composer-v42:not(.composer-r22e):focus-within .composer-plus-btn,
.page-workspace .composer-v42:not(.composer-r22e):hover .send,
.page-workspace .composer-v42:not(.composer-r22e):focus-within .send {
  opacity: 1;
  pointer-events: auto;
}
/* Always show when prompt has text */
.page-workspace .composer-v42:not(.composer-r22e) .composer-plus-btn.has-content,
.page-workspace .composer-v42:not(.composer-r22e) .send.has-content {
  opacity: 1;
  pointer-events: auto;
}

/* ── 5. Sidebar — New Chat button gọn đẹp ───────────────────────────── */
.nav-new-chat {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: calc(100% - 16px);
  margin: 8px 8px 4px;
  padding: 8px 14px;
  background: var(--accent, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.nav-new-chat::before { content: "✏"; font-size: 15px; }
.nav-new-chat:hover { background: var(--accent-hover, #6d28d9); }

/* ── 6. Sidebar search button ────────────────────────────────────────── */
.sidebar-search-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 16px);
  margin: 2px 8px 8px;
  padding: 7px 14px;
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted, #9ca3af);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
}
.sidebar-search-btn::before { content: "🔍"; font-size: 13px; }
.sidebar-search-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
  border-color: var(--accent, #7c3aed);
  color: var(--text, #f1f5f9);
}

/* ── 7. AI mode btn cleaner — giống Qwen/Gemini ─────────────────────── */
.ai-mode-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border, rgba(255,255,255,.15)) !important;
  background: none !important;
  color: var(--text, #f1f5f9) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ai-mode-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.07)) !important;
}

/* ── 8. Login page — cleaner loading state ───────────────────────────── */
.gate-card {
  max-width: 380px !important;
  margin: 0 auto;
  padding: 36px 32px !important;
  border-radius: 16px !important;
}
.gate-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.gate-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #d1d5db);
  font-size: 14px;
  background: var(--bg-input, rgba(255,255,255,.06));
  color: var(--text, #f1f5f9);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.gate-form input:focus {
  outline: none;
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
#gateLoginBtn {
  width: 100% !important;
  padding: 10px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 4px;
}
#gateMessage {
  font-size: 13px;
  text-align: center;
  min-height: 20px;
}
/* Loading spinner for auth check */
.gate-checking #gateMessage::after {
  content: " ●";
  animation: gate-blink 1s infinite;
}
@keyframes gate-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* ── Auth gate tabs ─────────────────────────────── */
.gate-tabs { display: flex; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 18px; gap: 0; }
.gate-tab {
  flex: 1; padding: 8px 0; font-size: 13px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted, #6b7280); cursor: pointer; transition: color .15s, border-color .15s;
}
.gate-tab:hover { color: var(--text-main, #111); }
.gate-tab-active { color: var(--accent, #2563eb) !important; border-bottom-color: var(--accent, #2563eb) !important; }
/* ── Google button ──────────────────────────────── */
.gate-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 16px; border: 1px solid var(--border, #d1d5db);
  border-radius: 8px; background: var(--bg-card, #fff); color: var(--text-main, #111);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s;
  margin-top: 0;
}
.gate-google-btn:hover { background: var(--bg-hover, #f3f4f6); }
/* ── Divider ─────────────────────────────────────── */
.gate-divider {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px;
  color: var(--text-muted, #9ca3af); font-size: 12px;
}
.gate-divider::before, .gate-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border, #e5e7eb);
}
/* ── Register success ────────────────────────────── */
.gate-success {
  padding: 8px 12px; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3);
  border-radius: 6px; font-size: 13px; color: #059669; margin-bottom: 8px;
}
.gate-success.hidden { display: none; }

/* ── 9. Hide collapsed sidebar new-chat properly ─────────────────────── */
.workspace-sidebar.sidebar-collapsed .nav-new-chat {
  width: 36px !important;
  padding: 8px !important;
  overflow: hidden;
  font-size: 0 !important;
  margin: 8px auto 4px !important;
}
.workspace-sidebar.sidebar-collapsed .nav-new-chat::before {
  font-size: 16px !important;
}

/* ── 10. Chat-Project phân luồng rõ ─────────────────────────────────── */
.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  padding: 12px 14px 4px;
  display: block;
}
.session-history-list .session-item {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-history-list .session-item:hover,
.session-history-list .session-item.active {
  background: var(--bg-hover, rgba(255,255,255,.07));
}

/* ── 11. Round 4 — Sidebar project icons + chat ⋯ menu ──────────────── */

/* Project icon colors */
.project-icon.color-yellow { color: #f59e0b; }
.project-icon.color-orange { color: #f97316; }
.project-icon.color-red    { color: #ef4444; }
.project-icon.color-blue   { color: #3b82f6; }
.project-icon.color-purple { color: #8b5cf6; }
.project-icon.color-pink   { color: #ec4899; }
.project-icon.color-cyan   { color: #06b6d4; }
.project-icon.color-green  { color: #10b981; }
.project-icon.color-teal   { color: #14b8a6; }
.project-icon.color-gray   { color: var(--muted, #6b7280); }

/* Hover-only project actions — no layout jump */
.project-item .project-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  flex-shrink: 0;
  display: flex;
  gap: 2px;
}
.project-item:hover .project-actions,
.project-item.is-active .project-actions,
.project-item:focus-within .project-actions {
  opacity: 1;
  pointer-events: auto;
}
.project-item {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 8px;
  padding: 0;
}
.project-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 8px 7px 10px;
  text-align: left;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
}
.project-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
}
.project-meta {
  display: none;
}
.project-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

/* Hover-only chat ⋯ button */
.session-history-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  position: relative;
}
.session-history-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px 6px 10px;
  text-align: left;
  color: inherit;
  border-radius: 8px;
}
.session-history-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  flex: 1 1 0;
}
.session-history-date {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.session-hover-action {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted, #6b7280);
}
.session-history-item:hover .session-hover-action,
.session-history-item.active .session-hover-action,
.session-history-item:focus-within .session-hover-action {
  opacity: 1;
  pointer-events: auto;
}
.session-hover-action:hover {
  background: var(--bg-hover, rgba(255,255,255,.1));
  color: var(--text, #f1f5f9);
}

/* Chat context menu */
.session-ctx-menu {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  min-width: 200px;
  padding: 4px;
  z-index: 9000;
}
.session-ctx-menu.hidden { display: none; }
.session-ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text, #f1f5f9);
}
.session-ctx-menu button:hover { background: var(--bg-hover, rgba(255,255,255,.08)); }
.session-ctx-menu .session-ctx-danger { color: #f87171; }
.session-ctx-menu .session-ctx-danger:hover { background: rgba(239,68,68,.12); }
.session-ctx-sep { border: none; border-top: 1px solid var(--border, #334155); margin: 4px 0; }

/* ── 12. Markdown rich rendering — code blocks, math, tables, mermaid ── */

/* Code blocks */
.md-code-block {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #334155);
  background: var(--bg-code, #0d1117);
  font-size: 13px;
}
.md-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--border, #334155);
}
.md-code-lang {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #7c3aed);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.md-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--muted, #6b7280);
}
.md-copy-btn:hover { background: rgba(255,255,255,.1); color: var(--text, #f1f5f9); }
.md-code-pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  color: #e2e8f0;
}
.md-latex-block .md-code-pre { color: #86efac; }

/* Mermaid diagrams */
.md-mermaid-wrap {
  margin: 10px 0;
  padding: 12px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  overflow-x: auto;
  text-align: center;
}
.md-mermaid-wrap .mermaid { display: inline-block; }

/* Math */
.md-math-block {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--bg-card, #1e293b);
  border-left: 3px solid var(--accent, #7c3aed);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 15px;
}
.math-inline {
  font-style: italic;
  color: var(--accent, #7c3aed);
}

/* Markdown tables */
.md-table-wrap { overflow-x: auto; margin: 8px 0; }
.md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.md-table th {
  background: rgba(124,58,237,.15);
  color: var(--text, #f1f5f9);
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--border, #334155);
  text-align: left;
}
.md-table td {
  padding: 5px 10px;
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  vertical-align: top;
}
.md-table tr:nth-child(even) td { background: rgba(255,255,255,.03); }

/* Lists */
.md-ul, .md-ol { margin: 6px 0 6px 20px; padding: 0; }
.md-ul li, .md-ol li { margin-bottom: 3px; line-height: 1.5; }

/* ── 13. Data Lab chart render area ──────────────────────────────────── */
.rh-chart-container {
  margin: 12px 0;
  padding: 10px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  overflow-x: auto;
}
.rh-chart-svg { max-width: 100%; height: auto; }
.rh-chart-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text, #f1f5f9);
}
.rh-chart-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ── 14. Manuscript AI draft panel improvements ───────────────────────── */
.manuscript-draft-panel {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-card, #1e293b);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 8px;
}
.manuscript-draft-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent, #7c3aed);
}
#manuscriptTrackChanges {
  font-size: 13px;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(0,0,0,.2);
  border-radius: 6px;
  white-space: pre-wrap;
}
.manuscript-draft-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* === Section 15: TiTi Activity UI v1 === */

/* ── Thinking timer ──────────────────────────────────────────────────── */
.titi-thinking-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 6px 0;
  border-radius: 999px;
  background: var(--panel, rgba(124,58,237,.06));
  border: 1px solid var(--line, rgba(124,58,237,.2));
  font-size: 13px;
  color: var(--accent, #7c3aed);
  width: fit-content;
  max-width: 200px;
  animation: titi-timer-fadein .2s ease;
}
@keyframes titi-timer-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.titi-thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #7c3aed);
  animation: titi-dot-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes titi-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}
.titi-thinking-label {
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── Activity inspector panel ────────────────────────────────────────── */
.activity-inspector-content {
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.titi-act-empty {
  font-size: 12.5px;
  text-align: center;
  padding: 20px 0;
}
.act-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.act-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.act-mode-thinking { background: rgba(124,58,237,.12); color: #7c3aed; border-color: rgba(124,58,237,.25); }
.act-mode-pro      { background: rgba(6,182,212,.12);  color: #0891b2; border-color: rgba(6,182,212,.25); }
.act-mode-smart    { background: rgba(16,185,129,.1);  color: #059669; border-color: rgba(16,185,129,.2); }
.act-mode-auto     { background: rgba(100,100,100,.1); color: var(--muted); border-color: rgba(100,100,100,.2); }
.act-model-name    { font-size: 11px; }

.act-section {
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
  padding-top: 8px;
}
.act-section:first-child { border-top: none; padding-top: 0; }
.act-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #888);
  margin-bottom: 6px;
}

/* Activity timeline */
.act-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.act-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  align-items: flex-start;
  font-size: 12.5px;
  padding: 2px 0;
}
.act-icon {
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  flex-shrink: 0;
}
.act-body { min-width: 0; }
.act-title { display: block; font-weight: 500; }
.act-detail {
  display: block;
  font-size: 11.5px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-dur { font-size: 11px; }
.act-status-completed .act-icon,
.act-status-success .act-icon,
.act-status-done .act-icon    { color: #2e9b4f; }
.act-status-error .act-icon,
.act-status-failed .act-icon  { color: #dc2626; }
.act-status-warning .act-icon { color: #d97706; }
.act-status-running .act-icon,
.act-status-queued .act-icon  { color: var(--accent, #7c3aed); }

/* Source cards */
.act-src-card {
  border: 1px solid var(--line, rgba(0,0,0,.09));
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.act-src-title { font-weight: 600; font-size: 12.5px; }
.act-src-meta  { font-size: 11px; color: var(--muted, #888); }
.act-src-rel   { margin-left: 6px; color: var(--accent, #7c3aed); }
.act-src-url   { font-size: 11px; color: var(--accent, #7c3aed); text-decoration: none; word-break: break-all; }
.act-src-url:hover { text-decoration: underline; }
.act-src-snippet { font-size: 11.5px; }

/* Citation list */
.act-cite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.act-cite-item { font-size: 12px; }
.act-cite-link  { color: var(--accent, #7c3aed); text-decoration: none; }
.act-cite-link:hover { text-decoration: underline; }
.act-cite-plain { color: var(--text, inherit); }

/* Warnings */
.act-section-warn { background: rgba(239,68,68,.06); border-radius: 6px; padding: 8px 10px !important; border: 1px solid rgba(239,68,68,.15); border-top: none; }
.act-warn { font-size: 12.5px; color: #dc2626; line-height: 1.5; }

/* ── Citation chips inline in messages ───────────────────────────────── */
.msg-citations-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.msg-citation-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid var(--line, rgba(124,58,237,.2));
  background: rgba(124,58,237,.05);
  color: var(--accent, #7c3aed);
  text-decoration: none;
  transition: background .12s;
  cursor: pointer;
}
.msg-citation-chip:hover { background: rgba(124,58,237,.12); }
a.msg-citation-chip { text-decoration: none; }

/* ── Data quality warning inline ─────────────────────────────────────── */
.msg-data-quality {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(217,119,6,.08);
  border: 1px solid rgba(217,119,6,.2);
  font-size: 12px;
  color: #92400e;
}
.msg-dq-icon { flex-shrink: 0; }

/* ── Mobile/tablet: Activity in bottom drawer ────────────────────────── */
@media (max-width: 900px) {
  .titi-thinking-timer {
    font-size: 12px;
    padding: 6px 12px;
  }
  .activity-inspector-content {
    padding: 8px;
    font-size: 12px;
  }
  .act-src-card { padding: 6px 8px; }
}
@media (max-width: 600px) {
  .msg-citations-row { gap: 3px; }
  .msg-citation-chip { font-size: 10.5px; padding: 2px 6px; }
  .titi-thinking-timer { max-width: 160px; font-size: 11.5px; }
}

/* ── Message action bar ─────────────────────────────────────────────── */
.msg-action-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity .15s;
}
.msg-bubble:hover .msg-action-bar,
.msg-bubble:focus-within .msg-action-bar { opacity: 1; }
.msg-act-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.4;
  transition: background .12s, color .12s;
}
.msg-act-btn:hover { background: var(--bg-surface); color: var(--text); }
.msg-act-save { color: var(--accent); border-color: var(--accent); }

/* ── Account settings form ──────────────────────────────────────────── */
.prem-account-form { margin-top: 12px; }
.prem-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.prem-form-label {
  min-width: 130px;
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.prem-form-input {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.prem-form-input:focus { border-color: var(--accent); }
.prem-btn-primary {
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.prem-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.prem-btn-secondary {
  padding: 7px 16px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}
.prem-btn-danger {
  padding: 7px 16px;
  background: rgba(229,57,53,.1);
  color: #e55;
  border: 1px solid rgba(229,57,53,.3);
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}

/* ── Admin users table ──────────────────────────────────────────────── */
.prem-admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 8px;
}
.prem-admin-users-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
}
.prem-admin-users-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  vertical-align: middle;
}
.prem-admin-role-select {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}

.gate-tab-disabled{opacity:.55;cursor:not-allowed}.gate-google-disabled{opacity:.6;cursor:not-allowed}.gate-muted{font-size:.9rem;color:var(--muted,#8b949e);margin:0 0 .75rem}.account-center-grid{display:grid;gap:1rem}.admin-users-table{width:100%;font-size:.85rem}

/* === UX Flow layout (Hostinger workbench → workspace) === */
.shell.ux-flow-shell {
  grid-template-columns: 264px minmax(0, 1fr) 340px;
}
.shell.ux-flow-shell.ux-workbench-mode .research-inspector,
.shell.ux-flow-shell.ux-workbench-mode .inspector {
  display: none;
}
.shell.ux-flow-shell .workspace-main,
.shell.ux-flow-shell .workspace-center-pane {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}
/* R34C: chat landing/composer area only — scoped to .ux-chat-shell-mode so
   other workspace views (Research Lab tables, Code Studio panels, etc.)
   that legitimately need the full 1200px keep it. Matches the Gemini/
   ChatGPT-style narrower reading column (860-960px) requested for the
   main chat canvas specifically. */
.shell.ux-flow-shell.ux-chat-shell-mode .workspace-center-pane {
  max-width: 920px;
}
.research-inspector.ux-collapsed,
.inspector.ux-collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  opacity: 0;
  pointer-events: none;
}
body.ux-context-open .research-inspector,
body.ux-context-open .inspector {
  opacity: 1;
  pointer-events: auto;
}
.titi-workspace-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 17, 23, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.ux-schema-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 0 8px;
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  font-size: 13px;
}
.ux-activity-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 0;
}
.ux-activity-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(82, 183, 136, 0.12);
  border: 1px solid rgba(82, 183, 136, 0.25);
  font-size: 12px;
  max-width: 100%;
}
.ux-activity-step {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.ux-activity-progress {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.ux-activity-err {
  color: #f87171;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ux-panel-state {
  padding: 20px 16px;
  border-radius: 12px;
  border: 1px dashed var(--line, rgba(255, 255, 255, 0.12));
}
.ux-skeleton {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  background-size: 200% 100%;
  animation: ux-shimmer 1.2s ease-in-out infinite;
  margin-bottom: 10px;
}
.ux-skeleton-title { height: 18px; width: 55%; }
.ux-skeleton-line { width: 92%; }
.ux-skeleton-line.short { width: 64%; }
@keyframes ux-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* .composer-mode-ux / .composer-mode-ux-btn: canonical styling now lives in
   titi-ux-flow.css (.composer-r22e-scoped rules, higher specificity, always
   applies since .composer-r22e is always present on the composer). This
   legacy lower-specificity block used a different color scheme and was
   permanently overridden — removed R38E to avoid a future collision if the
   .composer-r22e class selector ever changes. */
.titi-wb-home-head {
  margin-bottom: 16px;
}
.titi-wb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
@media (max-width: 960px) {
  .shell.ux-flow-shell {
    grid-template-columns: 1fr;
  }
  .sidebar.workspace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(264px, 88vw);
    z-index: 40;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }
  body.ux-mobile.sidebar-open .sidebar.workspace-sidebar {
    transform: translateX(0);
  }
  .shell.ux-flow-shell .research-inspector,
  .shell.ux-flow-shell .inspector {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-height: 52vh;
    z-index: 35;
    transform: translateY(105%);
    transition: transform 0.2s ease;
  }
  body.ux-context-open .research-inspector,
  body.ux-context-open .inspector {
    transform: translateY(0);
  }
}


.ux-workbench-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  margin-right: 8px;
}
.ux-crumb {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.ux-crumb.is-current { opacity: 1; font-weight: 600; cursor: default; }
.ux-crumb-sep { opacity: 0.45; }

/* R24 Hostinger home dashboard (V16-inspired, real status only) */
.titi-wb-home-status-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.titi-status-pill { display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); }
.titi-status-pill.is-ok { color:#6ee7b7; border-color:rgba(110,231,183,.45); background:rgba(16,185,129,.12); }
.titi-status-pill.is-warn { color:#fcd34d; border-color:rgba(252,211,77,.45); background:rgba(245,158,11,.12); }
.titi-status-pill.is-fail { color:#fca5a5; border-color:rgba(252,165,165,.45); background:rgba(239,68,68,.12); }
.titi-status-pill.is-loading { opacity:.7; }
.titi-wb-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:14px 0 18px; }
.titi-wb-metric { border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.03); }
.titi-wb-metric-val { display:block; font-size:22px; font-weight:700; line-height:1.1; }
.titi-wb-metric-label { display:block; font-size:12px; opacity:.75; margin-top:4px; }
.titi-wb-metric--muted .titi-wb-metric-val { opacity:.55; }
.titi-wb-quick-labs { margin:8px 0 18px; }
.titi-wb-quick-head { font-size:13px; font-weight:600; margin-bottom:8px; opacity:.9; }
.titi-wb-quick-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.titi-wb-quick-lab { display:flex; align-items:center; gap:8px; border:1px solid var(--line,rgba(255,255,255,.12)); background:transparent; color:inherit; border-radius:10px; padding:10px 12px; cursor:pointer; text-align:left; }
.titi-wb-quick-lab:hover { background:rgba(255,255,255,.05); }
.titi-wb-quick-icon { font-size:16px; width:22px; text-align:center; }
.titi-wb-system-activity { margin-top:20px; border-top:1px solid var(--line,rgba(255,255,255,.1)); padding-top:16px; }
.titi-wb-activity-title { font-size:15px; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.titi-wb-activity-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.titi-wb-activity-item { display:flex; gap:10px; align-items:flex-start; }
.titi-wb-activity-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex:0 0 10px; background:#60a5fa; }
.titi-wb-activity-item--agent .titi-wb-activity-dot { background:#fbbf24; }
.titi-wb-activity-item--system .titi-wb-activity-dot { background:#a78bfa; }
.titi-wb-activity-msg { font-size:13px; line-height:1.35; }
.titi-wb-activity-meta { display:flex; gap:8px; margin-top:4px; font-size:11px; opacity:.75; }
.titi-wb-activity-tag { font-weight:700; letter-spacing:.03em; }
.ux-gateway-welcome-note { margin-top:16px; }
.ux-gw-bubble { display:flex; gap:10px; align-items:flex-start; max-width:640px; padding:12px 14px; border-radius:14px; border:1px solid rgba(96,165,250,.35); background:rgba(59,130,246,.08); }
.ux-gw-avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(59,130,246,.25); flex:0 0 28px; }
.ux-gw-bubble p { margin:0; font-size:14px; line-height:1.45; }
@media (max-width:720px) {
  .titi-wb-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .titi-wb-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* V16 Enterprise Home — 2-column IA (Hostinger, real data) */
.titi-v16-home { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 4px 24px; }
.titi-v16-hero { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line,rgba(255,255,255,.1)); }
.titi-v16-hero-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; }
.titi-v16-title { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin: 8px 0 6px; line-height:1.15; }
.titi-v16-sub { margin: 0; max-width: 52ch; font-size: 14px; }
.titi-v16-hero-actions { display:flex; gap:8px; align-items:center; }
.titi-v16-grid { display:grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1080px) { .titi-v16-grid { grid-template-columns: 2fr 1fr; } }
.titi-v16-section { margin-bottom: 18px; }
.titi-v16-section-head, .titi-v16-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.titi-v16-section-head h2, .titi-v16-panel-head h3 { margin:0; font-size:14px; font-weight:700; }
.titi-v16-link { background:none; border:none; color:#60a5fa; font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.titi-v16-tools { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.titi-v16-tool { display:flex; align-items:center; gap:8px; border:1px solid var(--line,rgba(255,255,255,.12)); background:rgba(255,255,255,.02); color:inherit; border-radius:12px; padding:10px 12px; cursor:pointer; text-align:left; }
.titi-v16-tool:hover { background:rgba(255,255,255,.06); border-color:rgba(96,165,250,.35); }
.titi-v16-tool-icon { width:24px; text-align:center; }
.titi-v16-beta { font-size:10px; opacity:.7; margin-left:4px; }
.titi-v16-projects-wrap { border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); }
.titi-v16-projects { display:flex; flex-direction:column; }
.titi-v16-project { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding:12px 14px; border-top:1px solid var(--line,rgba(255,255,255,.08)); cursor:pointer; }
.titi-v16-project:first-child { border-top:none; }
.titi-v16-project:hover { background:rgba(255,255,255,.04); }
.titi-v16-project h4 { margin:0 0 4px; font-size:14px; }
.titi-v16-project-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:11px; opacity:.75; }
.titi-v16-meta-wf { color:#c4b5fd; }
.titi-v16-project-bar { min-width:140px; font-size:10px; opacity:.85; }
.titi-v16-progress { height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:4px; }
.titi-v16-progress i { display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#6366f1); border-radius:999px; }
.titi-v16-panel { border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:14px; background:rgba(255,255,255,.02); margin-bottom:14px; overflow:hidden; }
.titi-v16-panel-head { padding:10px 12px 0; }
.titi-v16-icon-btn { background:none; border:1px solid var(--line,rgba(255,255,255,.15)); border-radius:8px; color:inherit; cursor:pointer; padding:2px 8px; }
.titi-v16-library, .titi-v16-activity { padding: 8px 10px 12px; max-height: 280px; overflow:auto; }
.titi-v16-file { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.titi-v16-file:hover { background:rgba(255,255,255,.05); }
.titi-v16-file-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.titi-v16-file-main strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px; }
.titi-v16-file-badge { font-size:9px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:999px; border:1px solid transparent; }
.titi-v16-file-badge.is-ok { color:#6ee7b7; border-color:rgba(110,231,183,.4); }
.titi-v16-file-badge.is-warn { color:#fcd34d; border-color:rgba(252,211,77,.4); }
.titi-v16-file-badge.is-fail { color:#fca5a5; border-color:rgba(252,165,165,.4); }
.titi-v16-activity-list { list-style:none; margin:0; padding:0 0 0 10px; border-left:2px solid rgba(255,255,255,.1); }
.titi-v16-activity-item { position:relative; padding:0 0 14px 14px; }
.titi-v16-activity-item::before { content:""; position:absolute; left:-16px; top:6px; width:10px; height:10px; border-radius:50%; background:#60a5fa; border:2px solid var(--bg,#111); }
.titi-v16-activity--success::before { background:#34d399; }
.titi-v16-activity--warning::before { background:#fbbf24; }
.titi-v16-activity-card { background:rgba(255,255,255,.04); border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:10px; padding:8px 10px; }
.titi-v16-activity-card p { margin:0; font-size:13px; line-height:1.35; }
.titi-v16-activity-meta { display:flex; gap:8px; margin-top:6px; font-size:10px; opacity:.7; font-weight:700; text-transform:uppercase; }
.titi-v16-activity-pulse { padding-left:14px; font-size:12px; font-style:italic; }
.titi-v16-empty { padding: 8px 12px; font-size:13px; }
.titi-wb-metric-note { display:block; font-size:10px; opacity:.65; margin-top:2px; }

/* V20 Hub Sidebar + Trace Log */
.titi-hub-nav-v20 { margin: 10px 0 14px; padding: 8px 6px; border-radius: 12px; background: #171717; border: 1px solid #2f2f2f; }
.titi-hub-sec { margin-bottom: 10px; }
.titi-hub-sec-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; padding: 4px 8px 6px; }
.titi-hub-item { width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: #d1d5db; font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; margin-bottom: 2px; }
.titi-hub-item:hover { background: rgba(33,33,33,.85); color: #fff; }
.titi-hub-item.is-active { background: #212121; color: #fff; font-weight: 600; }
.titi-hub-item--locked { opacity: .55; cursor: not-allowed; }
.titi-hub-ico { width: 18px; text-align: center; flex: 0 0 18px; }
.titi-hub-lock { margin-left: auto; font-size: 11px; }
.titi-hub-beta { font-size: 9px; opacity: .7; }
.titi-v20-cc { color: #60a5fa; font-weight: 800; }
.titi-v20-gw-pill { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 3px 8px; border-radius: 6px; margin-right: 6px; }
.titi-v20-command-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 960px) { .titi-v20-command-row { grid-template-columns: 2fr 1fr; } }
.titi-trace-panel { background: #121214 !important; border-color: #2f2f2f !important; }
.titi-trace-panel--inline { min-height: 280px; }
.titi-trace-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); animation: titi-pulse 1.5s infinite; }
@keyframes titi-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.titi-trace-log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.55; color: #9ca3af; padding: 10px 12px 14px; max-height: 280px; overflow: auto; }
.titi-trace-line { margin-bottom: 8px; }
.titi-trace-tag { font-weight: 700; margin-right: 4px; }
.titi-trace--ok .titi-trace-tag { color: #34d399; }
.titi-trace--err .titi-trace-tag { color: #f87171; }
.titi-trace--warn .titi-trace-tag { color: #fbbf24; }
.titi-trace--info .titi-trace-tag { color: #a78bfa; }
.titi-trace-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #2f2f2f; color: #6b7280; font-style: italic; }
.titi-trace-pulse { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; animation: titi-pulse 1.2s infinite; }
.titi-v16-panel.hidden { display: none !important; }

/* R25 ToolHub + shell normalization guards */
.composer-menu-search-wrap { padding: 8px 0 10px; }
#composerToolSearch { width: 100%; }
.composer-menu-group-list { display: grid; gap: 6px; margin-bottom: 8px; }
.composer-menu-item.hidden { display: none !important; }
@media (min-width: 961px) {
  .ux-sidebar-scrim { display: none !important; opacity: 0 !important; pointer-events: none !important; }
}
@media (max-width: 960px) {
  .ux-sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.46); z-index: 34; }
}

/* R29: TiTi Hub Core enterprise sidebar nav — grouped nav tree replacing the
   old flat workspace-switcher + library/apps mini-lists (see
   renderTitiEnterpriseNav in app.js). Uses the same --rh-sidebar-w /
   sidebar-collapsed conventions already established by the RH-FIX rules. */
.titi-enterprise-nav {
  padding: 4px 8px 6px;
  /* R96-CLAUDE-POLISH: R96-FIX's own max-height/overflow-y:auto gave this
     nav its own scrollbar nested inside .sidebar-scroll-body's single outer
     one — confirmed live via getBoundingClientRect (a visibly separate
     scrollbar segment right where Search/Library/Workflows/Domain Labs
     sits, distinct from the rest of the sidebar). Same fix already applied
     to .sidebar-section.projects-section and .session-history-list: let it
     flow as a normal block in the one shared scroll region instead of
     capping+nesting a scrollbar — matches ChatGPT/Gemini's single
     continuous sidebar list. */
  flex-shrink: 0;
}

.titi-nav-group {
  margin-bottom: 14px;
}

.titi-nav-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 0 8px 6px;
}

.titi-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 2px;
}

.titi-nav-item:hover {
  background: rgba(255, 255, 255, .06);
}

.titi-nav-item.is-active {
  background: rgba(82, 132, 255, .16);
  color: #fff;
  font-weight: 700;
}

.titi-nav-item .titi-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
}

.titi-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon-rail (900-1199px) and mobile-open: reuse the same hide/center pattern
   already applied to .nav-v19-* / .titi-sidebar-ws elsewhere in this file. */
@media (min-width: 900px) and (max-width: 1199px) {
  .page-workspace .titi-nav-label,
  #appShell.shell-v19 .titi-nav-label,
  .page-workspace .titi-nav-group-label,
  #appShell.shell-v19 .titi-nav-group-label {
    display: none !important;
  }
  .page-workspace .titi-nav-item,
  #appShell.shell-v19 .titi-nav-item {
    justify-content: center !important;
    padding: 8px 0 !important;
  }
  .page-workspace .workspace-sidebar.mobile-open .titi-nav-label,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .titi-nav-label,
  .page-workspace .workspace-sidebar.mobile-open .titi-nav-group-label,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .titi-nav-group-label {
    display: revert !important;
  }
  .page-workspace .workspace-sidebar.mobile-open .titi-nav-item,
  #appShell.shell-v19 .workspace-sidebar.mobile-open .titi-nav-item {
    justify-content: flex-start !important;
    padding: 7px 9px !important;
  }
}

.workspace-sidebar.sidebar-collapsed .titi-nav-label,
.workspace-sidebar.sidebar-collapsed .titi-nav-group-label {
  display: none;
}

.workspace-sidebar.sidebar-collapsed .titi-nav-item {
  justify-content: center;
}

/* R53 thinking view blocks */
.thinking-view-blocks{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}
.thinking-view-block{padding:.5rem .65rem;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.thinking-view-block-title{margin:0 0 .35rem;font-size:.85rem;font-weight:600}
.thinking-view-steps{margin:.25rem 0 0 1rem;padding:0}
.session-history-title{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.3}
.composer-menu-item.is-disabled,.composer-menu-item[disabled]{pointer-events:auto;opacity:.55;cursor:not-allowed}

/* R54 composer stacked row */
.composer-row.composer-row-stacked{align-items:flex-end}
.session-history-title{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.35;color:inherit;opacity:1}
.session-history-main{min-width:0;flex:1;text-align:left}