/* Workspace adapters + resets. Use design tokens only; never hard-code brand indigo. */

/* Full-width grid so 1fr is the leftover canvas, not a shrink-wrapped sliver. */
html.th-workspace, html.th-workspace body, html.th-workspace #app {
  height: 100%;
  width: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}
html.th-workspace #app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}
html.th-workspace .app {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}
html.th-workspace .app.panel-open {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
}

/* P0: neutralize leftover app.css sidebar/main rules if they flash on. */
html.th-workspace .sidebar {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  color: var(--fg);
  border-right: 1px solid var(--border);
}
html.th-workspace .main {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
html.th-workspace .panel {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: none;
}
@media (min-width: 1101px) {
  html.th-workspace .app.panel-open .panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    box-shadow: none;
  }
}

/* Desktop collapse vs mobile close */
html.th-workspace .sidebar-close-mobile { display: none; }
html.th-workspace .sidebar-collapse-desktop { display: inline-grid; }
html.th-workspace .app.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}
html.th-workspace .app.sidebar-collapsed.panel-open {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr) var(--panel-w);
}
html.th-workspace .app.sidebar-collapsed .sidebar .logo span,
html.th-workspace .app.sidebar-collapsed .sidebar .new-chat,
html.th-workspace .app.sidebar-collapsed .sidebar .search,
html.th-workspace .app.sidebar-collapsed .sidebar .conv-list,
html.th-workspace .app.sidebar-collapsed .sidebar .account span:not(.avatar) {
  display: none;
}
html.th-workspace .app.sidebar-collapsed .sidebar-head { justify-content: center; padding: 0; }
html.th-workspace .app.sidebar-collapsed .sidebar .logo img { margin: 0 auto; }

html.th-workspace .main > #page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}
html.th-workspace .main > #page > .thread { flex: 1; min-height: 0; }
html.th-workspace .empty[hidden],
html.th-workspace .thread[hidden],
html.th-workspace .composer-wrap[hidden] { display: none !important; }

/* P1: empty state must not inherit app.css .empty */
html.th-workspace .empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  gap: var(--space-6);
  text-align: initial;
  color: var(--fg);
  font-size: inherit;
  width: 100%;
  min-height: 0;
}
html.th-workspace .empty h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

/* P1/P2: search field stays inside the 264px sidebar, no white leftover in dark mode */
html.th-workspace .sidebar .search {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 var(--space-3) var(--space-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  outline: none;
}
html.th-workspace .sidebar .search input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3) 0 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-muted);
  color: var(--fg);
  font-size: var(--text-sm);
}
html.th-workspace .sidebar .search input::placeholder { color: var(--fg-subtle); }
html.th-workspace .sidebar .search input:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--surface);
}

/* P0: avatar menu opens upward from the sidebar footer */
html.th-workspace .sidebar-foot {
  position: relative;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
}
html.th-workspace .menu.avatar-menu {
  display: block;
  left: var(--space-3);
  right: var(--space-3);
  top: auto;
  bottom: calc(100% - 4px);
  min-width: 0;
}

/* P1: routing cards — left-aligned, surface background; selection is border + dot only */
html.th-workspace .radio-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: var(--space-3);
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
html.th-workspace .radio-card:hover { background: var(--bg-subtle); }
html.th-workspace .radio-card.on {
  background: var(--surface);
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}
html.th-workspace .radio-card b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 18px;
  text-align: left;
}
html.th-workspace .radio-card small {
  display: block;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 16px;
  margin-top: 2px;
  text-align: left;
  font-weight: var(--weight-regular);
}

/* Mobile: sidebar is a drawer; show ×, hide collapse */
.sidebar-toggle { display: none; }
@media (max-width: 760px) {
  html.th-workspace .sidebar-close-mobile,
  html.th-workspace .sidebar-toggle { display: inline-grid; }
  html.th-workspace .sidebar-collapse-desktop { display: none; }
  html.th-workspace .app,
  html.th-workspace .app.panel-open,
  html.th-workspace .app.sidebar-collapsed,
  html.th-workspace .app.sidebar-collapsed.panel-open {
    grid-template-columns: minmax(0, 1fr);
  }
  html.th-workspace .app.sidebar-open .sidebar {
    display: flex;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-lg);
  }
  .ws-scrim {
    position: fixed; inset: 0;
    background: var(--scrim);
    z-index: calc(var(--z-sidebar) - 1);
  }
}

@media (max-width: 1100px) {
  .ws-scrim.panel {
    position: fixed; inset: 0;
    background: var(--scrim);
    z-index: calc(var(--z-panel) - 1);
  }
}

.ws-page {
  flex: 1;
  overflow: auto;
  padding: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.chat-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--thread-max);
  margin: 0 auto var(--space-2);
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.chat-progress[hidden] { display: none !important; }
.chat-progress .progress-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: ws-pulse 1s var(--ease) infinite;
}
.chat-progress.error { color: var(--danger); }
.chat-progress.error .progress-dot { animation: none; background: var(--danger); }
@keyframes ws-pulse { 50% { opacity: .35; } }

.team-fields { display: flex; flex-direction: column; gap: var(--space-2); }
.agent-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.agent-row .input, .synth-label select, .model-lock-select {
  width: 100%;
  height: var(--hit);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--text-sm);
}
.agent-row .role { grid-column: 1 / -1; }
.team-block {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.team-block h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
}
.team-block.team-final { border-color: var(--border-strong); background: var(--bg-subtle); }
.team-block-body {
  white-space: pre-wrap;
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg);
}
.skill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.skill-list .skill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: var(--surface);
}

.msg-user .bubble-text, .msg-ai .bubble-text, .msg-ai .prose {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  white-space: pre-wrap;
}
.msg-files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.msg-ai .who { display: none; }

.route-pill.locked .dot { background: var(--fg-subtle); }
.conv-foot { padding: var(--space-3); font-size: var(--text-xs); color: var(--fg-subtle); line-height: var(--lh-sm); }

html.th-workspace .btn.primary,
html.th-workspace .send,
html.th-workspace #pg-send {
  background: var(--primary-btn-bg);
  color: var(--primary-btn-fg);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .chat-progress .progress-dot { animation: none; }
}

html.th-workspace .route-decision {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  line-height: var(--lh-sm);
}
html.th-workspace .main > .dropzone {
  position: absolute;
  inset: var(--space-3);
  z-index: var(--z-dropzone);
}
html.th-workspace .dropzone.show { opacity: 1; }

html.th-workspace .th-wordmark { color: var(--fg) !important; }
html.th-workspace .app.sidebar-collapsed .th-wordmark { font-size: 0; gap: 0; }
html.th-workspace .app.sidebar-collapsed .th-wordmark i { width: 12px; height: 12px; }

/* ---- P1: empty-state composer uses the full composer width (800px) ----
   The composer sits in [data-composer-slot], a flex child of .empty
   (align-items:center), so the slot must stretch too. */
html.th-workspace .empty [data-composer-slot] {
  width: 100%;
  max-width: var(--composer-max);
}
html.th-workspace .empty .composer {
  width: 100%;
  max-width: var(--composer-max);
}

/* ---- P1: no inner focus ring on the textarea; only the outer border changes ---- */
html.th-workspace .composer textarea,
html.th-workspace .composer textarea:focus,
html.th-workspace .composer textarea:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
  border-radius: 0;
}
html.th-workspace .composer:focus-within { border-color: var(--border-strong); }

/* ---- P2: one sidebar-collapse control at a time ----
   expanded: only the sidebar-header button; collapsed: only the topbar button. */
html.th-workspace .app.sidebar-collapsed .sidebar-collapse-desktop { display: none; }
@media (min-width: 761px) {
  html.th-workspace .topbar .sidebar-toggle { display: none; }
  html.th-workspace .app.sidebar-collapsed .topbar .sidebar-toggle { display: inline-grid; }
}

/* ---- P2: titles truncate with CSS, full text in the title tooltip ---- */
html.th-workspace .topbar h1 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.th-workspace .conv .conv-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- P2: avatar menu links are menu items, not underlined links ---- */
html.th-workspace .avatar-menu a,
html.th-workspace .avatar-menu a:hover,
html.th-workspace .avatar-menu a:focus,
html.th-workspace .avatar-menu a:visited {
  text-decoration: none;
  color: var(--fg);
}
/* ---- P2: balance shows the amount only ---- */
html.th-workspace .avatar-menu .meter { display: none; }

/* ---- P2: conversation "..." menu ---- */
html.th-workspace .conv .more[aria-expanded="true"] { opacity: 1; }
html.th-workspace .menu.conv-menu {
  position: fixed;
  min-width: 184px;
  width: max-content;
  max-width: 260px;
}
html.th-workspace .menu.conv-menu[hidden] { display: none; }
html.th-workspace .conv-menu .menu-item.danger,
html.th-workspace .conv-menu .menu-item.danger svg { color: var(--danger); }
html.th-workspace .conv-confirm { padding: var(--space-2) var(--space-2) var(--space-1); }
html.th-workspace .conv-confirm p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg);
  white-space: normal;
}
html.th-workspace .conv-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
html.th-workspace .conv-confirm .btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--bg);
}
html.th-workspace .conv .conv-rename {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--text-sm);
  outline: none;
}