.panel--conversation {
  display: grid;
  gap: var(--space-md);
}

.stream-page .panel {
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  inline-size: min(100%, var(--content-max-inline));
  padding: var(--block-space-xl) var(--block-space-lg);
}

.stream-page .panel--wide {
  inline-size: min(100%, var(--content-max-inline-wide));
}

.stream-page .panel__header {
  margin-block-end: var(--block-space-lg);
}

.stream-page .panel__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  margin: 0;
}

.stream-page .panel__lead {
  color: var(--color-muted-ink);
  margin-block: var(--block-space);
  max-inline-size: 60ch;
}

.stream-page .panel__meta {
  color: var(--color-muted-ink);
  margin-block-start: var(--block-space-lg);
}

.eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-muted);
  font-weight: 700;
}

.stream-lineage {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--theme-text-subtle);
}

.stream-lineage__link {
  color: var(--color-primary);
  text-decoration: none;
}

.mode-journey {
  display: grid;
  gap: var(--space-sm);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--theme-surface-subtle);
}

.mode-journey__title {
  margin: 0;
  font-size: var(--text-base);
}

.mode-journey__description,
.mode-journey__friction {
  margin: 0;
  color: var(--theme-text-subtle);
  font-size: var(--text-sm);
}

.mode-journey__steps {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: 1rem;
}

.mode-journey__step {
  color: var(--theme-text-subtle);

  &.mode-journey__step--active {
    color: var(--theme-text);
    font-weight: 600;
  }

  &.mode-journey__step--complete {
    color: var(--color-primary);
  }
}

.mode-journey__step-label {
  display: inline-block;
  min-inline-size: 4.5rem;
}

.mode-journey__step-detail {
  color: var(--theme-muted);
}

.mode-journey__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tutor-workspace,
.research-workspace {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 64rem) {
  .tutor-workspace {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }

  .research-workspace {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}

.conversation-composer {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--theme-surface);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.conversation-composer:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.conversation-composer__form {
  display: grid;
  gap: var(--space-sm);
}

.conversation-composer__switches {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.conversation-composer__input-row {
  display: grid;
  gap: var(--space-sm);
}

.conversation-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 0;
  min-block-size: 0;
}

.conversation-stream__alert {
  justify-self: center;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  cursor: pointer;
}

.message-list {
  display: grid;
  gap: var(--space-sm);
  flex: 1 1 0;
  min-block-size: 0;
  overflow-y: auto;
  padding-inline-end: var(--space-xs);
  padding-block: var(--space-xs);
}

.conversation-stream__thinking {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--theme-text-subtle);
}

.message {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  max-inline-size: min(100%, 72ch);
  padding: var(--space-sm);
  background: var(--theme-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.message:hover {
  box-shadow: var(--shadow-card);
}

.message--user {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--theme-surface));
}

.message--pending {
  opacity: 0.72;
}

.message__contradiction {
  display: inline-flex;
  gap: var(--space-xs);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.45rem;
  font-size: var(--text-xs);
  margin-block-end: var(--space-xs);
}

.message-action-pills {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-block-start: var(--space-sm);
}

.message-action-pills__form {
  margin: 0;
}

.message-action-pill {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
  padding: 0.25rem 0.6rem;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.message-action-pill:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--theme-border));
  transform: translateY(-1px);
}

.message-action-pill:active {
  transform: scale(0.97);
}

.message-action-pills__form.is-submitting .message-action-pill,
.message-action-pill[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--theme-border));
  opacity: 0.8;
}

.stream-page .field__control {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  inline-size: 100%;
  padding: calc(var(--block-space) * 0.75);
}

.stream-page .field__control--textarea {
  min-block-size: 6.5rem;
  resize: vertical;
}

.composer-form.is-submitting .composer-toolbar__send {
  opacity: 0.72;
}

.stream-mode-surface .composer {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--theme-border) 85%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.stream-mode-surface .composer:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--theme-border));
  box-shadow: var(--shadow-card-hover), 0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.stream-mode-surface .composer__input-row {
  align-items: flex-end;
  display: flex;
  gap: 0.35rem;
}

.stream-mode-surface .composer__textarea {
  background: transparent;
  border: none;
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.45;
  margin: 0;
  max-block-size: 2.5rem;
  min-block-size: 2.5rem;
  overflow-y: hidden;
  padding: 0.4rem 0.5rem;
  resize: none;
}

.stream-mode-surface .composer--expanded .composer__textarea {
  max-block-size: 14rem;
  min-block-size: 6.4rem;
  overflow-y: auto;
}

.stream-mode-surface .composer__textarea:focus-visible {
  outline: none;
}

.stream-mode-surface .composer-toolbar__icon-btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted-ink);
  cursor: pointer;
  display: inline-flex;
  block-size: 1.8rem;
  inline-size: 1.8rem;
  justify-content: center;
  padding: 0;
}

.stream-mode-surface .composer-toolbar__icon-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--theme-text);
}

.stream-mode-surface .composer-toolbar__icon-btn svg {
  block-size: 0.9rem;
  fill: none;
  inline-size: 0.9rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stream-mode-surface .composer-toolbar__send {
  min-inline-size: 4.8rem;
  padding-block: 0.4rem;
}

.stream-page .soft-failure-notice {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--theme-border));
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0.52rem 0.62rem;
}

.stream-page .soft-failure-notice__title {
  color: color-mix(in srgb, var(--color-warning-ink) 80%, var(--theme-text));
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}

.stream-page .soft-failure-notice__body {
  color: var(--theme-text);
  font-size: 0.86rem;
  line-height: 1.35;
  margin: 0;
}

.stream-page .soft-failure-notice__hint {
  color: var(--color-muted-ink);
  font-size: 0.76rem;
  margin: 0;
}

.stream-page .tool-card-list {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.stream-page .tool-card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.65rem 0.9rem;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.stream-page .tool-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--theme-border);
  transform: translateY(-1px);
}

.stream-page .tool-card__header {
  margin-block-end: 0.35rem;
}

.stream-page .tool-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

.stream-page .tool-card__type-icon {
  font-size: 0.85rem;
  margin-inline-end: 0.3rem;
  opacity: 0.8;
}

.stream-page .tool-card__body {
  color: var(--theme-text-subtle);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0.18rem 0 0;
}

.stream-page .tool-card__list {
  margin: 0.2rem 0 0 1rem;
  padding: 0;
}

.stream-page .tool-card__results {
  display: grid;
  gap: 0.4rem;
}

.stream-page .tool-card__result {
  border-block-start: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
  padding-block-start: 0.35rem;
}

.stream-page .tool-card__result-title,
.stream-page .tool-card__result-snippet,
.stream-page .tool-card__result-meta {
  margin: 0;
}

.stream-page .tool-card__result-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.stream-page .tool-card__result-snippet {
  color: var(--color-muted-ink);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.stream-page .tool-card__result-meta {
  color: var(--color-muted-ink);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.stream-page .tool-card .field__control {
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stream-page .tool-card .field__control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
}
.message-action-pill__icon {
  margin-inline-end: 0.25rem;
}

.stream-suggestions-slot {
  margin-block: 0 0.55rem;
  view-transition-name: stream-suggestions;
}

.stream-suggestions {
  background: linear-gradient(
    130deg,
    color-mix(in srgb, var(--color-primary) 8%, transparent),
    color-mix(in srgb, var(--theme-border) 24%, transparent)
  ), var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--theme-border));
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
}

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

.stream-suggestions__title {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0;
}

.stream-suggestions__lead {
  color: var(--theme-text-subtle);
  font-size: var(--text-md);
  margin: 0;
}

.stream-suggestions__context,
.stream-suggestions__resume,
.stream-suggestions__memory {
  color: var(--theme-text-subtle);
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
}

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

.stream-suggestions__section-title {
  color: var(--theme-text-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.stream-suggestions__actions {
  margin: 0;
}

.learning-session-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-surface-subtle);
  padding: var(--space-sm);
}

.learning-session-card__hero {
  display: flex;
  gap: var(--space-sm);
}

.learning-session-card__title {
  margin: 0;
  font-size: var(--text-base);
}

.learning-session-card__meta {
  margin: var(--space-xs) 0 0;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--theme-text-subtle);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.5rem;
  font-size: var(--text-xs);
}

.status-pill--active {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--theme-border));
}

.research-thread-panel__list {
  margin: 0;
  padding-inline-start: 1rem;
  display: grid;
  gap: var(--space-xs);
}

.research-thread-panel__item,
.research-findings-panel__item {
  font-size: var(--text-sm);
  color: var(--theme-text-subtle);
}


.history-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.history-sidebar {
  display: grid;
  gap: var(--space-md);
  position: sticky;
  inset-block-start: calc(3.5rem + var(--space-lg));
}

.history-sidebar__section {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-surface-subtle);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.history-sidebar__label {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-muted);
  font-weight: 700;
}

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

.history-project-nav__link {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 0.45rem 0.55rem;

  &:hover,
  &.is-active {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 36%, var(--theme-border));
  }
}

.history-project-nav__link small {
  color: var(--theme-muted);
  font-size: var(--text-xs);
}

.history-project-form {
  display: grid;
  gap: var(--space-sm);
}

.history-panel {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  min-inline-size: 0;
}

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

.history-panel__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: var(--leading-tight);
}

.history-panel__lead,
.history-panel__meta {
  margin: 0;
  color: var(--theme-text-subtle);
  font-size: var(--text-sm);
}

.conversation-list {
  display: grid;
  gap: var(--space-sm);
}

.conversation-list__item {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.conversation-list__item:hover {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--theme-border));
}

.conversation-list__item-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-base);
}

.conversation-list__item-link {
  color: var(--theme-text);
  text-decoration: none;
  transition: color var(--transition-fast);

  &:hover {
    color: var(--color-primary);
  }

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

.conversation-list__meta {
  margin: 0;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.conversation-list__star-badge {
  margin-inline-start: var(--space-xs);
}

.streams-pagination {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.streams-pagination__status {
  margin-inline: var(--space-sm);
}

.socratic-challenge__feedback {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
}

.socratic-challenge__feedback--accepted {
  background: color-mix(in srgb, var(--color-success) 10%, var(--theme-surface));
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--theme-border));
  color: color-mix(in srgb, var(--color-success) 84%, var(--theme-text));
}

.socratic-challenge__feedback--retry {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--theme-surface));
  border-color: color-mix(in srgb, var(--color-warning) 28%, var(--theme-border));
  color: color-mix(in srgb, var(--color-warning-ink) 84%, var(--theme-text));
}

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

.socratic-challenge__feedback-body {
  font-size: var(--text-sm);
  margin: 0;
}

.socratic-challenge__feedback-nudge {
  font-size: var(--text-xs);
  margin: 0;
  opacity: 0.92;
}

@media (max-inline-size: 60rem) {
  .history-layout {
    grid-template-columns: 1fr;
  }

  .history-sidebar {
    position: static;
  }
}

@media (max-inline-size: 48rem) {
  .conversation-list__meta {
    display: grid;
    gap: var(--space-xs);
  }
}