/* ============================================================
   Stream Workspace — Two-column layout (sidebar + main)
   ============================================================ */

.spoke--stream-workspace {
  margin-inline: 0;
  max-inline-size: none;
  overflow: hidden;
  padding: 0;
}

.stream-page {
  --stream-workspace-block: calc(100dvh - var(--layout-app-topnav-height));
  min-block-size: var(--stream-workspace-block);
  view-transition-name: stream-page;
}

/* --- Grid: sidebar + main (two columns) --- */

.stream-workspace {
  background: var(--theme-surface);
  display: grid;
  grid-template-columns: var(--stream-layout-sidebar-inline) minmax(0, 1fr);
  min-block-size: var(--stream-workspace-block);
}

.stream-workspace--agentic {
  grid-template-columns: var(--stream-layout-sidebar-inline) minmax(0, 1fr);
}

.stream-workspace--creator {
  grid-template-columns: clamp(18rem, 24vw, 21rem) minmax(0, 1fr);
}

.stream-workspace.writer-stream-workspace--focused {
  grid-template-columns: minmax(0, 1fr);
}

.stream-workspace--creator .stream-workspace__sidebar {
  padding: var(--space-md);
}

.stream-workspace--creator .stream-sidebar__inner {
  gap: var(--space-lg);
}

/* ============================================================
   Chat Workbench — Three-column layout (modes + stage + insights)
   Mirrors canvas-workbench F-pattern from Learning Canvas.
   ============================================================ */

.chat-workbench {
  --chat-modes-inline: 5rem;
  --chat-insights-inline: 18rem;
  --chat-mode-size: 2.75rem;

  background: var(--theme-surface);
  display: grid;
  grid-template-columns: var(--chat-modes-inline) 1fr var(--chat-insights-inline);
  grid-template-rows: 1fr;
  grid-template-areas: "modes stage insights";
  min-block-size: var(--stream-workspace-block);
}

/* 1. Left Sidebar — Narrow icon-only mode switcher (mirrors canvas-modes) */

.chat-modes {
  grid-area: modes;
  background: var(--theme-surface);
  border-inline-end: 1px solid var(--theme-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-xl);
  gap: var(--space-lg);
  position: relative;
  z-index: 10;
}

.chat-mode-link {
  inline-size: var(--chat-mode-size);
  block-size: var(--chat-mode-size);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.chat-mode-link:hover,
.chat-mode-link:focus-visible {
  color: var(--theme-text);
  background: var(--canvas-mode-hover-bg, color-mix(in srgb, var(--color-primary) 8%, transparent));
  border-color: var(--theme-border);
  outline: 2px solid transparent;
}

.chat-mode-link:focus-visible {
  outline-color: var(--color-focus-ring);
  outline-offset: 2px;
}

.chat-mode-link[data-state="active"] {
  color: var(--color-primary);
  background: var(--canvas-mode-active-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--theme-border));
}

.chat-mode-link__tooltip {
  background: color-mix(in srgb, var(--theme-text) 94%, black);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--theme-surface);
  display: grid;
  gap: 0.18rem;
  inline-size: max-content;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--space-sm));
  line-height: 1.35;
  max-inline-size: min(18rem, 60vw);
  opacity: 0;
  padding: 0.5rem 0.625rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  white-space: normal;
  z-index: 20;
}

.chat-mode-link__tooltip strong {
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
}

.chat-mode-link__tooltip span {
  color: inherit;
  font-size: var(--text-xs);
}

.chat-mode-link__tooltip::before {
  background: color-mix(in srgb, var(--theme-text) 94%, black);
  block-size: 0.55rem;
  content: "";
  inline-size: 0.55rem;
  inset-block-start: 50%;
  inset-inline-end: calc(100% - 0.2rem);
  position: absolute;
  transform: translateY(-50%) rotate(45deg);
}

.chat-mode-link:hover .chat-mode-link__tooltip,
.chat-mode-link:focus-visible .chat-mode-link__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  visibility: visible;
}

/* 2. Center Stage */

.chat-stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-sm) var(--space-md) 0;
  block-size: var(--stream-workspace-block);
}

.chat-stage--index {
  align-items: center;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-2xl, var(--space-xl));
  gap: var(--space-2xl, var(--space-xl));
}

/* 3. Right Panel — Tips & Insights */

.chat-insights {
  grid-area: insights;
  background: var(--theme-surface);
  border-inline-start: 1px solid var(--theme-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
}

.chat-insights__header {
  display: grid;
  gap: var(--space-xs);
}

.chat-insights__heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.chat-insights__lead {
  color: var(--theme-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

.chat-insights__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chat-insight-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--theme-card) 92%, transparent);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.chat-insight-card__icon {
  font-size: 1.25rem;
}

.chat-insight-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
}

.chat-insight-card__body {
  color: var(--theme-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Chat Workbench — Responsive */

@media (max-width: 1024px) {
  .chat-workbench {
    grid-template-columns: var(--chat-modes-inline) 1fr;
    grid-template-areas: "modes stage";
  }

  .chat-insights {
    display: none;
  }
}

@media (max-width: 768px) {
  .chat-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "modes"
      "stage";
  }

  .chat-modes {
    flex-direction: row;
    justify-content: center;
    border-inline-end: none;
    border-block-end: 1px solid var(--theme-border);
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .chat-stage {
    block-size: auto;
    flex: 1;
    min-block-size: 0;
  }
}

/* --- Chats index: home-style launch surface --- */

.chat-home {
  gap: var(--space-2xl, var(--space-xl));
}

.chat-home__hero {
  max-inline-size: 56rem;
}

.chat-index-hero {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  text-align: center;
  padding-block: var(--space-xl);
}

.chat-index-hero__avatar-wrap {
  margin-block-end: var(--space-sm);
}

.chat-index-hero__avatar {
  block-size: 5rem;
  border-radius: var(--radius-full);
  inline-size: 5rem;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.chat-index-hero__avatar-fallback {
  align-items: center;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  block-size: 5rem;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  display: flex;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  inline-size: 5rem;
  justify-content: center;
}

.chat-index-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0;
}

.chat-index-hero__subtitle {
  color: var(--theme-muted);
  font-size: var(--text-md, 1rem);
  line-height: var(--leading-normal);
  margin: 0;
  max-inline-size: 55ch;
}

.chat-modes__divider {
  background: var(--theme-border);
  block-size: 1px;
  inline-size: 1.5rem;
  margin-block: var(--space-xs);
}

.chat-launch-form__submit-row {
  display: flex;
  justify-content: flex-end;
}

.chat-launch-card {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, transparent), color-mix(in srgb, var(--theme-surface) 96%, transparent));
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-lg);
  inline-size: 100%;
  max-inline-size: var(--content-max-inline-wide);
  padding: var(--space-xl);
  position: relative;
}

.chat-launch-form {
  display: grid;
  gap: var(--space-lg);
}

.chat-launch-form__input-wrap {
  display: grid;
}

.chat-launch-form__input {
  background: color-mix(in srgb, var(--theme-card) 92%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  color: var(--theme-text);
  font-size: var(--text-lg);
  min-block-size: 8rem;
  padding: var(--space-lg);
  resize: vertical;
  width: 100%;
}

.chat-launch-form__input::placeholder {
  color: var(--theme-muted);
}

.chat-launch-form__input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
  outline: none;
}

.chat-launch-form__actions {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chat-launch-form__mode {
  align-items: flex-start;
  background: color-mix(in srgb, var(--theme-card) 84%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: var(--space-xs);
  min-block-size: 8.5rem;
  padding: var(--space-lg);
  text-align: left;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.chat-launch-form__mode:hover,
.chat-launch-form__mode:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--theme-border));
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  outline: none;
}

.chat-launch-form__mode--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 12%, var(--theme-card)), color-mix(in srgb, var(--theme-card) 94%, transparent));
}

.chat-launch-form__mode-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chat-launch-form__mode-meta {
  color: var(--theme-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.chat-launch-card__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chat-launch-chip-form {
  margin: 0;
}

.chat-launch-chip {
  background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  color: var(--theme-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-xs) var(--space-md);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.chat-launch-chip:hover,
.chat-launch-chip:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--theme-border));
  outline: none;
  transform: translateY(-1px);
}

.chat-home__resume {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-success, #10b981) 10%, var(--theme-card)), color-mix(in srgb, var(--theme-card) 96%, transparent));
}

.chat-home__modes {
  max-inline-size: var(--content-max-inline-wide);
}

.chat-mode-tile-form {
  margin: 0;
}

.chat-mode-tile {
  inline-size: 100%;
  text-align: left;
}

.chat-mode-tile__cta {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-top: auto;
}

.chat-history-section {
  display: grid;
  gap: var(--space-md);
  margin-inline: auto;
  max-inline-size: var(--content-max-inline-wide);
  width: 100%;
}

.chat-history-section__header {
  align-items: end;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
}

.chat-history-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.chat-history-card {
  background: color-mix(in srgb, var(--theme-card) 94%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-md);
  grid-template-rows: 1fr auto;
  min-block-size: 14rem;
  padding: var(--space-lg);
}

.chat-history-card__content {
  display: grid;
  gap: var(--space-xs);
}

.chat-history-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin: 0;
}

.chat-history-card__title a {
  color: inherit;
  text-decoration: none;
}

.chat-history-card__title a:hover,
.chat-history-card__title a:focus-visible {
  text-decoration: underline;
}

.chat-history-card__meta {
  color: var(--theme-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

.chat-history-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chat-history-card--empty {
  min-block-size: 0;
}

/* --- Insights panel: suggestion chips --- */

.chat-insights__suggestions {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--theme-border);
  margin-block-end: var(--space-md);
}

.chat-insights__subheading {
  color: var(--theme-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.chat-insights__suggestion-list {
  display: grid;
  gap: var(--space-xs);
}

.chat-insights__suggestion-form {
  margin: 0;
}

.chat-insights__suggestion {
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  color: var(--theme-text);
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  padding: var(--space-xs) var(--space-sm);
  text-align: start;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  inline-size: 100%;
}

.chat-insights__suggestion:hover,
.chat-insights__suggestion:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--theme-border));
  outline: none;
}

.stream-header__context-group {
  display: grid;
  gap: 0.15rem;
}

/* --- Sidebar toggle (hamburger) — hidden on desktop --- */

.stream-header__sidebar-toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--theme-text);
  cursor: pointer;
  display: none;
  justify-content: center;
  padding: 0;
}

.stream-header__sidebar-toggle svg {
  block-size: 1.25rem;
  fill: none;
  inline-size: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* --- Sidebar --- */

.stream-workspace__sidebar {
  background: color-mix(in srgb, var(--theme-surface-subtle) 78%, var(--theme-surface));
  border-inline-end: 1px solid var(--theme-border);
  overflow-y: auto;
  padding: var(--space-sm);
}

.stream-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stream-sidebar__section {
  display: grid;
  gap: var(--space-xs);
}

.stream-sidebar__label {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  padding: var(--space-xs) var(--space-xs) 0.3rem;
  text-transform: uppercase;
}

.stream-project-nav {
  display: grid;
  gap: var(--space-xs);
}

.stream-project-nav__link {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-sm);
  justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.stream-project-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.stream-project-nav__link:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.stream-project-nav__link.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-weight: 600;
}

.stream-project-nav__count {
  color: var(--color-muted-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.stream-sidebar__streams {
  display: grid;
  gap: var(--space-xs);
}

.stream-sidebar__stream {
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.stream-sidebar__stream:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  box-shadow: var(--shadow-sm);
}

.stream-sidebar__stream:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.stream-sidebar__stream.is-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.stream-sidebar__stream-title {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-sidebar__stream-meta {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
}

.stream-sidebar__action-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-surface-subtle));
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.stream-sidebar__action-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--theme-border));
  transform: translateY(-1px);
}

.stream-sidebar__action-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.stream-sidebar__action-meta {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
}

.stream-sidebar__chips {
  margin-block-start: var(--space-sm);
}

.stream-sidebar__open-link {
  display: inline-block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
}

.stream-sidebar__open-link:hover {
  text-decoration: underline;
}

.stream-sidebar__threads {
  display: grid;
  gap: var(--space-xs);
}

.stream-sidebar__thread {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.stream-sidebar__thread:hover {
  box-shadow: var(--shadow-sm);
}

.stream-sidebar__thread.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.stream-sidebar__thread--child {
  margin-inline-start: var(--space-sm);
}

.stream-sidebar__thread-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.stream-sidebar__thread-meta {
  margin: 0.1rem 0 0;
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
}

/* --- Sidebar contextual tips --- */

.stream-sidebar__tips {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.stream-sidebar__tip {
  align-items: baseline;
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-xs);
  padding: 0.25rem var(--space-xs);
}

.stream-sidebar__tip-icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  inline-size: 1rem;
  text-align: center;
}

.stream-workspace__sidebar .research-findings-panel {
  inset-block-start: auto;
  position: static;
  padding: var(--space-sm);
}

.stream-workspace__synthesis {
  background: rgb(0 0 0 / 0);
  border-inline-start: none;
  inset: var(--layout-app-topnav-height) 0 0 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity var(--transition-base), background var(--transition-base);
  view-transition-name: stream-drawer;
  z-index: 30;
}

.stream-workspace__synthesis.is-synthesis-open {
  background: rgb(0 0 0 / 0.3);
  opacity: 1;
  pointer-events: auto;
}

.stream-synthesis-stack {
  background: color-mix(in srgb, var(--theme-surface-subtle) 95%, var(--theme-surface));
  block-size: 100%;
  border-inline-start: 1px solid var(--theme-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  inline-size: min(28rem, 85vw);
  margin-inline-start: auto;
  overflow-y: auto;
  padding: var(--space-sm);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.stream-workspace__synthesis.is-synthesis-open .stream-synthesis-stack {
  transform: translateX(0);
}

.stream-synthesis-stack__close {
  align-items: center;
  align-self: flex-end;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.25rem;
  justify-content: center;
  line-height: 1;
  padding: var(--space-xxs) var(--space-xs);
}

.stream-synthesis-stack__close:hover {
  background: color-mix(in srgb, var(--theme-text) 8%, transparent);
  color: var(--theme-text);
}

.stream-canvas {
  gap: var(--space-sm);
}

.stream-loading-note {
  margin: 0;
  padding: var(--space-md);
}

.stream-canvas-board__header .panel__lead {
  margin-block-end: var(--space-sm);
}

.stream-canvas-board__apps {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stream-canvas-app-card {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  color: inherit;
  display: block;
  padding: var(--space-sm);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stream-canvas-app-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--theme-border));
}

.stream-canvas-app-card.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--theme-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.stream-canvas-app-card__title-row {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
}

.stream-canvas-app-card__title {
  align-items: center;
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  gap: var(--space-xxs);
  margin: 0;
}

.stream-canvas-app-card__icon {
  color: var(--color-muted-ink);
  display: inline-flex;
  inline-size: 1.1rem;
  justify-content: center;
}

.stream-canvas-app-card__status {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
}

.stream-canvas-app-card__status--live {
  background: color-mix(in srgb, var(--color-success, #10b981) 18%, transparent);
  color: color-mix(in srgb, var(--color-success, #10b981) 70%, var(--theme-text));
}

.stream-canvas-app-card__status--soon {
  background: color-mix(in srgb, var(--color-muted-ink) 16%, transparent);
  color: var(--color-muted-ink);
}

.stream-canvas-app-card__description {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin: var(--space-xs) 0 0;
}

.stream-workspace__synthesis .panel {
  inline-size: 100%;
  max-inline-size: none;
}

/* --- Main content area --- */

.stream-workspace__main {
  min-inline-size: 0;
}

.stream-workspace__main-inner {
  block-size: var(--stream-workspace-block);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-sm) var(--space-md) 0;
}

.stream-workspace__main .panel--wide {
  inline-size: 100%;
  max-inline-size: none;
}

/* --- Slim stream header bar --- */

.stream-header {
  align-items: center;
  border-block-end: 1px solid var(--theme-border);
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-sm);
}

.stream-header__identity {
  align-items: center;
  display: flex;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.stream-header__avatar {
  block-size: 1.75rem;
  border-radius: var(--radius-full);
  inline-size: 1.75rem;
  object-fit: cover;
}

.stream-header__avatar-fallback {
  align-items: center;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  block-size: 1.75rem;
  border-radius: var(--radius-full);
  color: var(--theme-text);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  inline-size: 1.75rem;
  justify-content: center;
  min-inline-size: 1.75rem;
}

.stream-header__title-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.stream-header__title {
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-header__title:hover {
  color: var(--color-primary);
}

.stream-header__title-form {
  margin: 0;
  min-inline-size: 0;
}

.stream-header__title-input {
  background: transparent;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
  padding: 0.1rem 0.3rem;
  inline-size: 100%;
}

.stream-header__title-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.stream-header__meta {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  margin: 0;
  white-space: nowrap;
}

.stream-header__actions {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
}

/* --- Chat mode pill --- */

.chat-mode-pill {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

.chat-mode-pill--fast {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  color: var(--color-warning);
}

.chat-mode-pill--tutor {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-primary);
}

.chat-mode-pill--research {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  color: var(--color-success);
}

.stream-header__dropdown {
  position: relative;
}

.stream-header__icon-btn,
.stream-header__icon-link {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  display: inline-flex;
  block-size: 1.95rem;
  inline-size: 1.95rem;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.stream-header__icon-btn {
  cursor: pointer;
  list-style: none;
}

.stream-header__icon-btn::-webkit-details-marker {
  display: none;
}

.stream-header__icon-btn:hover,
.stream-header__icon-link:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.stream-header__icon-btn:active,
.stream-header__icon-link:active {
  transform: scale(0.95);
}

.stream-header__icon-btn svg,
.stream-header__icon-link svg {
  block-size: 1rem;
  fill: none;
  inline-size: 1rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.stream-header__icon-btn:focus-visible,
.stream-header__icon-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.stream-header__icon-link--danger {
  color: color-mix(in srgb, var(--color-danger, #b91c1c) 84%, var(--theme-text));
}

.stream-header__btn {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  list-style: none;
  padding: var(--space-xs) var(--space-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.stream-header__btn::-webkit-details-marker {
  display: none;
}

.stream-header__btn:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.stream-header__dropdown-menu {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-xs);
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  min-inline-size: 10rem;
  padding: var(--space-xs);
  position: absolute;
  z-index: 20;
}

.stream-header__dropdown-link {
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  display: block;
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
}

.stream-header__dropdown-link:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.stream-header__detail-list {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-xs);
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  margin: 0;
  min-inline-size: 14rem;
  padding: var(--space-sm);
  position: absolute;
  z-index: 20;
}

.stream-header__detail-list div {
  align-items: baseline;
  display: flex;
  gap: var(--space-sm);
  justify-content: space-between;
}

.stream-header__detail-list dt {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  margin: 0;
  text-transform: uppercase;
}

.stream-header__detail-list dd {
  font-size: var(--text-sm);
  margin: 0;
}

.stream-header__detail-actions {
  border-block-start: 1px solid var(--theme-border);
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
}

.stream-header__detail-action {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  text-decoration: none;
}

.stream-header__detail-action:hover {
  color: var(--theme-text);
  text-decoration: underline;
}

.stream-header__detail-action--danger {
  color: color-mix(in srgb, var(--color-danger, #b91c1c) 84%, var(--theme-text));
}

.stream-header__detail-action--danger:hover {
  color: var(--color-danger, #b91c1c);
}

.chat-response-card__meta,
.chat-response-card--user .chat-response-card__meta,
.research-response-card__meta,
.message__meta {
  align-items: center;
  justify-content: space-between;
}

.chat-response-card__meta-left,
.research-response-card__meta-left,
.message__meta-left {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  min-inline-size: 0;
}

.tutor-turn-card__footer {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
  margin-block-start: var(--space-xs);
}

.stream-message-actions {
  align-items: center;
  display: inline-flex;
  gap: var(--space-xs);
  margin-inline-start: auto;
}

.stream-message-actions__score {
  margin: 0;
}

.stream-message-actions__score .message-feedback__summary {
  min-inline-size: 2rem;
}

.stream-message-actions__score-value {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.stream-message-actions__score-panel {
  inline-size: auto;
  min-inline-size: 12rem;
}

.stream-message-actions__score-label {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted-ink);
}

.stream-message-actions__score-helper {
  margin: calc(var(--space-xs) * -0.4) 0 var(--space-xs);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-muted-ink) 92%, transparent);
}

.stream-message-actions__score-grid {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stream-message-actions__score-grid form {
  margin: 0;
}

.stream-message-actions__score-btn {
  align-items: center;
  background: color-mix(in srgb, var(--theme-border) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-border) 68%, transparent);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  justify-content: center;
  min-block-size: 1.65rem;
  padding: 0;
  inline-size: 100%;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.stream-message-actions__score-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.stream-message-actions__score-btn:active {
  transform: scale(0.96);
}

.stream-message-actions__score-btn.is-active {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--theme-border));
}

.stream-message-actions__delete {
  align-items: center;
  background: color-mix(in srgb, var(--theme-border) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-border) 68%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-muted-ink);
  display: inline-flex;
  block-size: 1.5rem;
  inline-size: 1.5rem;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.stream-message-actions__delete:hover {
  background: color-mix(in srgb, var(--color-danger, #b91c1c) 12%, transparent);
  color: color-mix(in srgb, var(--color-danger, #b91c1c) 85%, var(--theme-text));
}

.stream-message-actions__delete:active {
  transform: scale(0.92);
}

.stream-message-actions__delete svg {
  block-size: 0.82rem;
  fill: none;
  inline-size: 0.82rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* --- Stream mode surface (conversation area) --- */

.stream-mode-surface {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
  padding: 0;
  view-transition-name: stream-surface;
}

@supports (view-transition-name: stream-surface) {
  ::view-transition-group(stream-page),
  ::view-transition-group(stream-surface),
  ::view-transition-group(stream-drawer),
  ::view-transition-group(stream-suggestions) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
}

.stream-mode-surface .composer-form {
  margin-block-start: var(--space-sm);
}

.stream-mode-surface .conversation-page-dock {
  background: linear-gradient(to top, color-mix(in srgb, var(--theme-surface) 92%, transparent), transparent);
  inset: auto;
  padding: var(--space-xs) 0 max(var(--space-xs), env(safe-area-inset-bottom));
  position: sticky;
  z-index: 8;
}

.stream-mode-surface .conversation-page-dock__inner {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 72rem;
}

.stream-mode-surface .message-list {
  block-size: auto;
  flex: 1 1 0;
  gap: var(--space-xs);
  justify-items: stretch;
  min-block-size: 0;
  overflow-y: auto;
}

/* Research — propagate flex chain so message-list scrolls and dock pins to bottom. */
.stream-mode-surface .research-workspace {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-block-size: 0;
}

.stream-mode-surface .research-workspace__conversation-panel {
  background: transparent;
  border: none;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 0;
  overflow: hidden;
  padding: 0;
}

/* --- Mode toggles (Phlex: SteepUI::Components::StreamModeToggles) --- */

.stream-mode-toggles {
  align-items: center;
  background: color-mix(in srgb, var(--theme-surface-subtle) 60%, var(--theme-surface));
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
}

.stream-mode-toggles__form {
  display: flex;
  flex: 1;
  margin: 0;
  position: relative;
}

.stream-mode-toggles__btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--theme-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  inline-size: 100%;
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}

.stream-mode-toggles__btn:hover {
  background: color-mix(in srgb, var(--theme-muted) 10%, transparent);
}

.stream-mode-toggles__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.stream-mode-toggles__btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.stream-mode-toggles__btn--active {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--theme-text);
}

.stream-mode-toggles__tooltip {
  background: color-mix(in srgb, var(--theme-text) 94%, black);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--theme-surface);
  font-size: var(--text-xs);
  inline-size: max-content;
  inset-block-end: calc(100% + var(--space-xs));
  inset-inline-start: 50%;
  line-height: 1.3;
  max-inline-size: min(22rem, 70vw);
  opacity: 0;
  padding: 0.42rem 0.5rem;
  pointer-events: none;
  position: absolute;
  text-wrap: pretty;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  z-index: 20;
}

.stream-mode-toggles__tooltip::after {
  background: color-mix(in srgb, var(--theme-text) 94%, black);
  block-size: 0.52rem;
  content: "";
  inline-size: 0.52rem;
  inset-block-start: calc(100% - 0.26rem);
  inset-inline-start: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
}

.stream-mode-toggles__form:hover .stream-mode-toggles__tooltip,
.stream-mode-toggles__form:focus-within .stream-mode-toggles__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.composer__action-bar {
  align-items: center;
  border-block-start: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  padding-block-start: var(--space-xs);
}

.composer__action-icons {
  align-items: center;
  display: inline-flex;
  gap: var(--space-xs);
}

.composer-toolbar__icon-btn--label {
  block-size: auto;
  gap: 0.4rem;
  inline-size: auto;
  padding-inline: 0.7rem;
}

.composer-toolbar__icon-btn--label span {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}

.composer__mode-menu {
  position: relative;
}

.composer__mode-menu > summary {
  list-style: none;
}

.composer__mode-menu > summary::-webkit-details-marker {
  display: none;
}

.composer__mode-menu-content {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  inset-block-end: calc(100% + 0.4rem);
  inset-inline-start: 0;
  padding: 0.4rem;
  position: absolute;
  z-index: 30;
}

.composer__mode-menu:not([open]) .composer__mode-menu-content {
  display: none;
}

.composer__mode-menu .stream-mode-toggles {
  inline-size: min(20rem, calc(100vw - 4rem));
  max-inline-size: 100%;
}

.composer__mode-menu .stream-mode-toggles__tooltip {
  max-inline-size: min(18rem, 62vw);
}

/* --- Collapsible <details> in tutor/research panels --- */

.tutor-action-panel__details,
.research-artifact-panel__details {
  border: none;
  margin: 0;
  padding: 0;
}

.tutor-action-panel__details > summary,
.research-artifact-panel__details > summary {
  cursor: pointer;
  transition: color 150ms ease;
}

.tutor-action-panel__details > summary:hover,
.research-artifact-panel__details > summary:hover {
  color: var(--theme-text);
}

.tutor-action-panel__details > .tutor-action-panel__stats,
.research-artifact-panel__details > .research-artifact-panel__stats {
  margin-block-start: var(--space-sm);
}

/* --- Synthesis panel details --- */

.tutor-action-panel__stats,
.research-artifact-panel__stats {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tutor-action-panel__stats li,
.research-artifact-panel__stats li {
  align-items: baseline;
  display: flex;
  gap: var(--space-xs);
}

.tutor-action-panel__list,
.research-artifact-panel__questions {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tutor-action-panel__list li,
.research-artifact-panel__questions li {
  background: color-mix(in srgb, var(--theme-surface) 86%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

.tutor-action-panel__list-title {
  font-size: var(--text-xs);
  font-weight: 600;
  margin: 0;
}

.tutor-action-panel__list-detail {
  color: var(--color-muted-ink);
  font-size: var(--text-xs);
  margin: 0.2rem 0 0;
}

.research-artifact-panel__header {
  display: grid;
  gap: 0.2rem;
}

.research-artifact-panel__title {
  margin: 0;
}

.research-artifact-panel__meta {
  align-items: center;
  color: var(--color-muted-ink);
  display: flex;
  gap: var(--space-xs);
  margin: 0;
}

.research-artifact-panel__section + .research-artifact-panel__section {
  border-block-start: 1px solid var(--theme-border);
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
}

.research-artifact-panel__section-title {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-xs);
}

.research-artifact-panel__body {
  font-size: var(--text-sm);
}

.research-artifact-panel__body p {
  margin: 0 0 var(--space-xs);
}

.research-artifact-panel__body p:last-child {
  margin-bottom: 0;
}

/* --- Tool cards --- */

.stream-workspace .tool-card__code {
  background: color-mix(in srgb, var(--theme-border) 24%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin: var(--space-sm) 0 0;
  max-block-size: 12rem;
  overflow: auto;
  padding: var(--space-sm);
  white-space: pre-wrap;
}

/* --- Quiz cards --- */

.quiz-question {
  border: none;
  margin: 0;
  margin-block-end: var(--space-md);
  padding: 0;
}

.quiz-question__text {
  font-weight: var(--weight-medium);
  margin-block-end: var(--space-sm);
}

.quiz-question__number {
  color: var(--color-muted);
}

.quiz-question__option {
  align-items: flex-start;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
}

.quiz-question__option:hover {
  background: color-mix(in srgb, var(--theme-border) 24%, transparent);
}

.quiz-question__radio {
  margin-block-start: 0.2em;
}

.quiz-question__textarea {
  inline-size: 100%;
}

.quiz-question__option-text {
  flex: 1;
}

.tool-card__questions {
  padding: var(--space-sm) var(--space-md);
}

.quiz-results__verdict--pass { color: var(--color-success, #22c55e); }
.quiz-results__verdict--fail { color: var(--color-danger, #ef4444); }

.quiz-result-item {
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-sm);
  padding: var(--space-sm);
}

.quiz-result-item--correct {
  background: color-mix(in srgb, var(--color-success, #22c55e) 8%, transparent);
  border-inline-start: 3px solid var(--color-success, #22c55e);
}

.quiz-result-item--incorrect {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 8%, transparent);
  border-inline-start: 3px solid var(--color-danger, #ef4444);
}

.quiz-result-item__question {
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-xs);
}

.quiz-result-item__number {
  color: var(--color-muted);
}

.quiz-result-item__answer {
  font-size: var(--text-sm);
  margin: 0;
}

/* --- Synthesis toggle — hidden on wide screens --- */

.stream-header__synthesis-toggle {
  display: inline-flex;
}

/* ============================================================
   Responsive — collapsible sidebar on small screens
   ============================================================ */

@media (max-width: 53.75rem) {
  /* Show hamburger toggle */
  .stream-header__sidebar-toggle {
    display: inline-flex;
  }

  /* Single-column grid — sidebar removed from flow */
  .stream-workspace {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes a full-screen overlay (backdrop).
     The <aside> fills the viewport; .stream-sidebar__inner
     is the actual drawer panel. Clicking the aside outside
     the inner panel triggers closeOnBackdrop. */
  .stream-workspace__sidebar {
    background: rgb(0 0 0 / 0);
    border-inline-end: none;
    inset: var(--layout-app-topnav-height) 0 0 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity var(--transition-base), background var(--transition-base);
    z-index: 30;
  }

  .stream-workspace__sidebar.is-sidebar-open {
    background: rgb(0 0 0 / 0.3);
    opacity: 1;
    pointer-events: auto;
  }

  /* Inner panel — the actual sliding drawer */
  .stream-sidebar__inner {
    background: color-mix(in srgb, var(--theme-surface-subtle) 95%, var(--theme-surface));
    block-size: 100%;
    border-inline-end: 1px solid var(--theme-border);
    inline-size: min(18rem, 80vw);
    overflow-y: auto;
    padding: var(--space-sm);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .stream-workspace__sidebar.is-sidebar-open .stream-sidebar__inner {
    transform: translateX(0);
  }

  /* Tighter main area on small screens */
  .stream-workspace__main-inner {
    padding: var(--space-sm) var(--space-sm) 0;
  }

  .stream-header__title-group {
    flex-direction: column;
    gap: 0;
  }

  .stream-mode-surface .message-list {
    block-size: auto;
    flex: 1 1 0;
    min-block-size: 0;
    overflow-y: auto;
  }

  .chat-launch-form__actions {
    grid-template-columns: 1fr;
  }

  .chat-history-section__header {
    align-items: start;
    flex-direction: column;
  }

  .chat-history-grid {
    grid-template-columns: 1fr;
  }

  .stream-workspace--creator {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }

  .stream-workspace--creator .stream-workspace__main {
    grid-area: main;
  }

  .stream-workspace--creator .stream-workspace__sidebar {
    background: color-mix(in srgb, var(--theme-surface-subtle) 78%, var(--theme-surface));
    border-block-start: 1px solid var(--theme-border);
    border-inline-end: none;
    grid-area: sidebar;
    inset: auto;
    opacity: 1;
    overflow: visible;
    padding: var(--space-sm);
    pointer-events: auto;
    position: static;
    transition: none;
    z-index: auto;
  }

  .stream-workspace--creator .stream-workspace__sidebar.is-sidebar-open {
    background: color-mix(in srgb, var(--theme-surface-subtle) 78%, var(--theme-surface));
  }

  .stream-workspace--creator .stream-sidebar__inner {
    background: none;
    block-size: auto;
    border-inline-end: none;
    inline-size: 100%;
    overflow: visible;
    padding: 0;
    transform: none;
    transition: none;
  }
}

/* --- Stream message cards — borderless --- */

.stream-mode-surface .message {
  border: none;
}

.stream-mode-surface .tutor-turn-card {
  border: none;
}

/* chat-response-card__body wrapper removed in Phase 2 HTML cleanup */

.stream-mode-surface .research-response-card {
  border: none;
}

/* --- Stream content — centered + wider --- */

.stream-mode-surface .stream-suggestions-slot {
  margin-inline: auto;
  max-inline-size: 72rem;
}

.stream-mode-surface .conversation-stream {
  align-items: stretch;
}

.stream-mode-surface .message {
  inline-size: fit-content;
  max-inline-size: min(96%, 96ch);
  justify-self: start;
}

.stream-mode-surface .message__content {
  background: var(--message-background, color-mix(in srgb, var(--theme-border) 40%, transparent));
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.08rem;
  inline-size: fit-content;
  max-inline-size: min(100%, 72ch);
  padding-block: 0.55rem 0.34rem;
  padding-inline: 0.78rem;
  word-break: break-word;
}

.stream-mode-surface .message--pending .message__content {
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--theme-border));
  opacity: 0.88;
}

.stream-mode-surface .message--failed .message__content {
  border: 1px solid color-mix(in srgb, var(--color-danger) 45%, var(--theme-border));
}

.stream-mode-surface .message--soft-failed .message__content {
  background: color-mix(in srgb, var(--color-warning) 8%, var(--message-background, transparent));
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--theme-border));
}

.stream-mode-surface .tutor-turn-card {
  inline-size: min(100%, 72rem);
}

.stream-mode-surface .chat-response-card {
  inline-size: fit-content;
  max-inline-size: min(96%, 96ch);
  background: color-mix(in srgb, var(--theme-border) 18%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--theme-border) 40%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--space-xs);
  justify-self: start;
  padding: 0.75rem 1rem;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.stream-mode-surface .research-response-card {
  inline-size: 100%;
  max-inline-size: 72rem;
  justify-self: start;
}

.stream-mode-surface .chat-response-card--user {
  justify-self: end;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.stream-mode-surface .message--user {
  --message-background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  justify-self: end;
}

.stream-mode-surface .message--user .message__content {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  justify-items: end;
}

.stream-mode-surface .research-response-card--user {
  justify-self: end;
}

.stream-mode-surface .message--assistant {
  --message-background: color-mix(in srgb, var(--theme-border) 40%, transparent);
}

.stream-mode-surface .tutor-response-card.message--assistant .message__content {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 58%),
    color-mix(in srgb, var(--color-surface) 86%, var(--theme-surface) 14%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--theme-border));
}

.stream-mode-surface .chat-response-card--assistant {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 50%),
    color-mix(in srgb, var(--theme-border) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--theme-border) 40%, transparent);
}

.stream-mode-surface .chat-response-card--assistant:hover {
  box-shadow: var(--shadow-card-hover);
}

.stream-mode-surface .chat-response-card--pending {
  border-style: dashed;
  opacity: 0.88;
}

.stream-mode-surface .chat-response-card--failed {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--theme-border));
}

.stream-mode-surface .chat-response-card--soft-failed {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--theme-border));
}

.stream-mode-surface .chat-response-card__content {
  font-size: 0.93rem;
  display: grid;
  gap: 0.55rem;
  line-height: 1.48;
  word-break: break-word;
}

.stream-mode-surface .chat-response-card__content p {
  margin: 0;
}

.stream-mode-surface .chat-response-card__annotation {
  color: var(--color-muted-ink);
  font-size: 0.75rem;
  margin: 0;
}

.stream-mode-surface .message__text,
.stream-mode-surface .research-response-card__content {
  display: grid;
  gap: 0.55rem;
  font-size: 0.94rem;
  line-height: 1.55;
}

.stream-mode-surface .message__text > *,
.stream-mode-surface .chat-response-card__content > *,
.stream-mode-surface .research-response-card__content > * {
  margin: 0;
}

.stream-mode-surface .message__text h1,
.stream-mode-surface .chat-response-card__content h1,
.stream-mode-surface .research-response-card__content h1 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

.stream-mode-surface .message__text h2,
.stream-mode-surface .chat-response-card__content h2,
.stream-mode-surface .research-response-card__content h2 {
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
}

.stream-mode-surface .message__text h3,
.stream-mode-surface .chat-response-card__content h3,
.stream-mode-surface .research-response-card__content h3 {
  font-size: 0.94rem;
}

.stream-mode-surface .message__text a,
.stream-mode-surface .chat-response-card__content a,
.stream-mode-surface .research-response-card__content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.stream-mode-surface .message__text ul,
.stream-mode-surface .message__text ol,
.stream-mode-surface .chat-response-card__content ul,
.stream-mode-surface .chat-response-card__content ol,
.stream-mode-surface .research-response-card__content ul,
.stream-mode-surface .research-response-card__content ol {
  display: grid;
  gap: 0.3rem;
  padding-inline-start: 1.2rem;
}

.stream-mode-surface .message__text li,
.stream-mode-surface .chat-response-card__content li,
.stream-mode-surface .research-response-card__content li {
  padding-inline-start: 0.1rem;
}

.stream-mode-surface .message__text blockquote,
.stream-mode-surface .chat-response-card__content blockquote,
.stream-mode-surface .research-response-card__content blockquote {
  border-inline-start: 3px solid color-mix(in srgb, var(--color-primary) 35%, var(--theme-border));
  color: var(--color-muted-ink);
  padding-inline-start: 0.75rem;
}

.stream-mode-surface .message__text code,
.stream-mode-surface .chat-response-card__content code,
.stream-mode-surface .research-response-card__content code {
  background: color-mix(in srgb, var(--theme-border) 24%, transparent);
  border-radius: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.12rem 0.32rem;
}

.stream-mode-surface .message__text pre,
.stream-mode-surface .chat-response-card__content pre,
.stream-mode-surface .research-response-card__content pre {
  background: color-mix(in srgb, var(--theme-border) 24%, transparent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  overflow-x: auto;
  padding: 0.7rem 0.85rem;
}

.stream-mode-surface .message__text pre code,
.stream-mode-surface .chat-response-card__content pre code,
.stream-mode-surface .research-response-card__content pre code {
  background: transparent;
  padding: 0;
}

.stream-mode-surface .panel__meta {
  text-align: center;
}

.stream-mode-surface .conversation-stream__thinking {
  text-align: center;
}

.stream-message-actions .message-feedback__menu {
  inline-size: auto;
  position: relative;
}

.stream-message-actions .message-feedback__summary {
  align-items: center;
  background: color-mix(in srgb, var(--theme-border) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-border) 68%, transparent);
  border-radius: 999px;
  color: var(--color-muted-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 500;
  gap: 0.2rem;
  inline-size: auto;
  justify-content: center;
  line-height: 1.1;
  list-style: none;
  padding: 0.14rem 0.42rem;
  user-select: none;
}

.stream-message-actions .message-feedback__summary::-webkit-details-marker {
  display: none;
}

.stream-message-actions .message-feedback__summary:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--theme-text);
}

.stream-message-actions .message-feedback__summary-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.stream-message-actions .message-feedback__summary-icon svg {
  block-size: 0.7rem;
  fill: none;
  inline-size: 0.7rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stream-message-actions .message-feedback__panel {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  inset-inline-end: 0;
  inline-size: min(30rem, 85vw);
  margin-block-start: 0.35rem;
  min-inline-size: min(22rem, 85vw);
  padding: var(--block-space-half);
  position: absolute;
  z-index: 5;
}