.chat-page {
  height: calc(100vh - var(--keyboard-inset, 0px));
  height: calc(100dvh - var(--keyboard-inset, 0px));
  padding-bottom: 0;
  animation: fade-in 320ms var(--ease-out) both;
}

#rename-conversation .icon-mx,
#delete-conversation .icon-mx { width: 1.125rem; height: 1.125rem; }

.rail-new-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-glyph);
  height: var(--rail-glyph);
  flex: none;
}
.chat-mark {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
}
.conversation-item:hover .row-action,
.row-action:focus-visible { opacity: 1; }
.row-action:hover { color: var(--icon-delete); background: var(--danger-soft); }
.chat-delete:hover { background: var(--danger-soft); }
.chat-bar-project:hover { color: var(--ink); }
.chat-bar-project:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.chat-bar-project:not([hidden]) + .chat-bar-title { flex: 0 1 auto; }
#chat[data-empty='true'] .chat-bar-project:not([hidden]) + .chat-bar-title { flex: 1; }
.project-pick-row:hover { background: var(--surface-2); }
.project-pick-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.project-pick-row[aria-current='true'] { font-weight: 610; }

.chat-more { position: relative; flex: none; }
.chat-more[data-conversation='false'] { display: none; }
.chat-more-toggle[aria-expanded='true'] { background: var(--surface-3); }
.chat-more-menu .account-menu-item[hidden] { display: none; }
.chat-more-danger:hover { background: var(--danger-soft); }
.chat[data-empty='true'] .chat-scroll {
  flex: 0 0 auto;
  overflow: visible;
  padding-block: clamp(var(--s-10), 6vh, 3.75rem) 0;
  margin-block: 0 auto;
}
.message-user { align-items: flex-end; }
.chat-scroll > .message:not(:nth-last-child(-n + 6)):not(:focus-within) {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.message-stamp + .message { animation-delay: 40ms; }

.message-user .message-body,
.message-body.message-streaming { white-space: pre-wrap; }

.message-user .message-body {
  max-width: 68%;
  background: var(--bubble-mine);
  border: none;
  border-radius: var(--r-chat);
  border-bottom-right-radius: var(--s-2);
  padding: var(--s-3) var(--s-5);
  line-height: 1.55;
  color: var(--bubble-mine-ink);
}
.message-body .md-sort {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.message-body .md-sort:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; border-radius: 4px; }
.message-body .md-table th[aria-sort='ascending'] .md-sort::after { content: '\2191'; color: var(--ink); }
.message-body .md-table th[aria-sort='descending'] .md-sort::after { content: '\2193'; color: var(--ink); }
@media (hover: hover) {
  .message-body .md-sort:hover { color: var(--ink); }
}
.message-body .md-table-copy {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.message-body .md-table-copy:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
@media (hover: hover) {
  .message-body .md-table-copy:hover { color: var(--ink); background: var(--surface-2); }
}

.md-math .katex { font-size: 1.08em; }
.message-body .grid-table { width: 100%; table-layout: auto; }
.message-body .grid-table thead th {
  min-width: 11rem;
  max-width: 18rem;
  white-space: normal;
  letter-spacing: 0;
}
.message-body .grid-table thead th:first-child { min-width: 7rem; }
.message-body .grid-table tbody th.grid-file {
  max-width: 11rem;
  padding-left: 0;
  font-size: 0.8125rem;
  font-weight: 610;
  color: var(--ink);
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line-fill);
}
.message-body .grid-table tbody tr:last-child th { border-bottom: none; }
.grid-view { display: block; }
.grid-view .grid-answer { display: inline; }
.grid-view .grid-quote { display: block; }
.timeline-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 22%) 1fr;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line-fill);
}
.timeline-row:first-child { border-top: none; }
.timeline-text { display: grid; gap: 2px; border-left: 1px solid var(--line); padding-left: var(--s-4); }
.chart-row {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) 1fr;
  gap: var(--s-3);
  align-items: center;
  font-size: 0.875rem;
}
.chart-bars { display: grid; gap: 3px; }
.chart-bar { display: grid; grid-template-columns: 1fr 4.5rem; gap: var(--s-2); align-items: center; }
.chart-fill { display: block; height: 100%; border-radius: 3px; background: var(--chart-ink); }
.chart-bar.is-negative .chart-fill { opacity: 0.55; }
.chart-grid { stroke: var(--line-fill); stroke-width: 1; }
.chart-axis { fill: var(--ink-faint); font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--chart-ink); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--chart-ink); stroke: var(--bg); stroke-width: 1.5; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-ink); }
.diagram-stage { display: flex; justify-content: center; min-height: 2.5rem; align-items: center; }
.diagram-failed .diagram-stage { display: block; }
@media (max-width: 560px) {
  .chart-row { grid-template-columns: 1fr; gap: 4px; }
}
.message:hover .message-actions,
.message-actions:focus-within { opacity: 1; }
.message-action:hover { background: var(--surface-2); }
.message-action { transition: background var(--dur-fast) var(--ease), transform 120ms var(--ease); }
.message-action:active { transform: scale(0.94); transition-duration: 40ms; }
@media (prefers-reduced-motion: reduce) {
  .message-action:active { transform: none; }
}
:root[data-theme='light'] .message-action { color: #000000; }
:root[data-theme='dark'] .message-action { color: #ffffff; }

@media (hover: none) {
  .message-actions { opacity: 1; }
  .row-action { opacity: 1; }
}
.fact-report[open] .fact-summary-chevron { transform: rotate(180deg); }
.fact-item { padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.5; }
.fact-item-status { font-size: 0.75rem; font-weight: 610; }
.fact-item-quote { margin-top: 0.125rem !important; color: var(--ink-strong); }
.fact-item-note { margin-top: 0.125rem !important; color: var(--ink-muted); }
.opinion:empty { display: none; }
.opinion-offer:disabled { opacity: 0.6; cursor: default; }
.opinion-offer:hover { background: var(--surface-2); border-color: var(--line-strong); }
.opinion-offer:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.opinion-offer-label { font-weight: 570; }

.message-actions:has(.branch-switch) { opacity: 1; }
.branch-step:hover:not(:disabled) { background: var(--surface-2); }
.branch-step:disabled { cursor: default; opacity: 0.35; }
.branch-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.chat-empty.newchat {
  align-items: center;
  text-align: center;
}
#chat.is-launching .newchat-greeting {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
  filter: blur(4px);
}
#chat .is-launch {
  animation: send-launch 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: bottom right;
}

@media (prefers-reduced-motion: reduce) {
  .split-settle-mark { transition: none; }
}
.jump-latest:hover { border-color: var(--line-strong); background: var(--surface-3); }

.composer-dock {
  position: relative;
  flex: none;
  padding: var(--s-2) var(--gap) var(--s-5);
}
.chat[data-empty='true'] .composer-dock { padding-top: var(--s-2); }

.chat:not([data-empty='true']) .composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  pointer-events: none;
}
.chat:not([data-empty='true']) .composer-dock::before {
  content: '';
  position: absolute;
  inset: -3.5rem 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 34%,
    var(--bg) 62%
  );
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .chat:not([data-empty='true']) .composer-dock::before {
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 58%);
  }
}
.chat:not([data-empty='true']) .composer-dock > * { pointer-events: auto; }

.chat:not([data-empty='true']) .chat-scroll {
  padding-bottom: var(--s-3);
}

.chat-scroll > .message-user { scroll-margin-top: var(--s-6); }
.chat-outline-item:hover { color: var(--ink-faint); }
.chat-outline-item[aria-current='true'] { color: var(--ink); }
.chat-outline[data-open='true'] .chat-outline-list {
  gap: 1px;
  width: min(17rem, 40vw);
  padding: 0.375rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
  transform-origin: right center;
}
.chat-outline[data-open='true'] .chat-outline-item {
  justify-content: flex-start;
  height: 2rem;
  padding: 0 0.625rem;
  color: var(--ink-faint);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-outline[data-open='true'] .chat-outline-label { display: block; }
.chat-outline[data-open='true'] .chat-outline-item[aria-current='true'] {
  color: var(--ink);
  font-weight: 600;
}
.chat-outline[data-open='true'] .chat-outline-item:hover,
.chat-outline[data-open='true'] .chat-outline-item:focus-visible {
  outline: none;
  background: var(--surface-2);
  color: var(--ink);
}
:root[data-theme='dark'] .chat-outline[data-open='true'] .chat-outline-list {
  background: #171717;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 16px 40px -8px rgba(0, 0, 0, 0.9);
}
:root[data-theme='dark'] .chat-outline[data-open='true'] .chat-outline-item:hover,
:root[data-theme='dark'] .chat-outline[data-open='true'] .chat-outline-item:focus-visible { background: #262626; }
@media (prefers-reduced-motion: no-preference) {
  .chat-outline[data-open='true'] .chat-outline-list { animation: outline-in 180ms var(--ease-out) both; }
}

.chat:not([data-empty='true']) .jump-latest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--dock-h, 7.5rem) + var(--s-2));
  z-index: 13;
  margin: 0 auto;
}

.composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.composer-row[data-tall] { align-items: flex-end; }
.composer-go {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.composer textarea::placeholder { color: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  .composer-hint-line { animation: hint-in 320ms var(--ease-out) both; }
  .composer-hint-line.is-settled { animation: none; }
  .composer-hint-line.is-leaving { animation: hint-out 320ms var(--ease-out) both; }
}
.composer-attach:hover:not(:disabled) { opacity: 1; background: var(--surface-2); }
.composer-attach:disabled { opacity: 0.3; cursor: default; }

.composer-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0.25rem 0.375rem 0.125rem;
}

.composer-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  max-width: min(18rem, 100%);
  padding: 0.3125rem 0.3125rem 0.3125rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 0.8125rem;
  animation: message-in 200ms var(--ease-out) both;
}
.composer-file-drop:hover { opacity: 1; background: var(--surface-3); color: var(--ink); }

.composer-files { align-items: center; }
.composer-thumb-drop:hover { background: rgba(0, 0, 0, 0.8); }

.chat[data-dropping='true'] .composer-inner {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.drop-veil {
  position: absolute;
  inset: 3.25rem 0 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 140ms var(--ease-out), visibility 140ms var(--ease-out);
}
.chat[data-dropping='true'] .drop-veil { opacity: 1; visibility: visible; z-index: 45; inset: 3.25rem 0 0; }

.drop-veil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  width: min(var(--chat-measure), 100%);
  padding: var(--s-7) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-chat);
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 40px -24px rgb(0 0 0 / 0.18);
  transform: translateY(4px);
  transition: transform 160ms var(--ease-out);
}
.chat[data-dropping='true'] .drop-veil-card { transform: none; }

:root[data-theme='dark'] .drop-veil-card {
  background: #171717;
  border-color: #2a2a2a;
  box-shadow: 0 16px 40px -24px rgb(0 0 0 / 0.6);
}
:root[data-theme='dark'] .drop-veil-mark {
  background: #ffffff;
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .drop-veil { transition: none; }
  .drop-veil-card { transform: none; transition: none; }
}
.message-user .message-files { justify-content: flex-end; }
button.message-file-saved:hover { color: var(--ink); border-color: var(--line-strong, var(--line)); }
@media (max-width: 620px) {
  .composer-model .composer-chip-label { max-width: 7.5rem; }
}

.model-picker { position: relative; flex: none; }
.composer-model:hover { background: var(--surface-2); opacity: 1; }
.composer-model[aria-expanded='true'] { opacity: 1; background: var(--surface-2); }

.composer-model[data-inert] { cursor: default; }
.composer-model[data-inert]:hover,
.composer-model[data-inert]:active {
  background: none;
  opacity: 0.7;
  transform: none;
}
:root[data-theme='dark'] .composer-send { background: #ffffff; color: #000000; }
.composer-send:hover:not(:disabled) { background: #262626; }
:root[data-theme='dark'] .composer-send:hover:not(:disabled) { background: #e5e5e5; }
.composer-send:disabled,
:root[data-theme='dark'] .composer-send:disabled {
  background: var(--surface-3);
  color: var(--ink-faint);
  cursor: default;
  box-shadow: none;
}
.composer-stop:hover { background: var(--line-strong); }

@media (max-width: 940px) {
  .chat-scroll { padding-inline: var(--gutter); }
}

.chat-scroll .container { max-width: var(--app-measure); }
.thinking-ball {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: 1.8s linear infinite;
}
.thinking-ball-a { animation-name: thinking-split-a; }
.thinking-ball-b { animation-name: thinking-split-b; }

@media (prefers-reduced-motion: reduce) {
  .thinking-ball { animation: none; }
}

.message-image { cursor: zoom-in; }
.slash-row:hover { background: var(--surface-2); }
.slash-row[aria-selected='true'] { background: var(--surface-3); }
.selection-capture:hover { background: var(--surface-3); }

.composer-quote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  margin: 0.125rem 0.125rem 0;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  background: var(--surface-2);
  border-radius: calc(var(--r-composer) - 0.4375rem);
}
.composer-quote[hidden] { display: none; }
.composer-quote-clear:hover { background: var(--surface-3); color: var(--ink); }

.composer-queue {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.125rem 0.125rem 0;
}
.composer-queue[hidden] { display: none; }
.composer-queued {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  background: var(--surface-2);
  border-radius: calc(var(--r-composer) - 0.4375rem);
}
.message-quote > .icon-mx { margin-top: 0.125rem; }

.message-actions:has(.message-action[aria-pressed='true']) { opacity: 1; }
.message-action[aria-pressed='true'] { background: var(--surface-2); }

.memory-import {
  width: min(var(--chat-measure), 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}
.memory-import .memory-offer { margin-top: 0; }

.save-picker { position: relative; display: inline-flex; }
.save-menu-row:hover,
.save-menu-row:focus-visible { background: var(--surface-3); }
.save-menu-row:focus-visible { outline: none; }
.composer-dock { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }

@media (max-width: 700px) {
  .chat-scroll,
  .composer-dock { padding-inline: var(--s-4); }

  .message-user .message-body,
  .message-quote { max-width: 88%; }

  .composer-go { gap: 0; }
}

@media (hover: none) and (pointer: coarse) {
  .composer-attach,
  .composer-model,
  .composer-send { width: 2.375rem; height: 2.375rem; }

  .row-action { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; }

  .chip { min-height: 2.25rem; }
}

@media (max-width: 480px) {
  .composer-file { max-width: 100%; }
  .composer-files { gap: var(--s-1); }
}

.composer-attach,
.composer-model,
.composer-send {
  transition-property: background, color, border-color, opacity;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}

:root[data-theme='dark'] .composer-attach,
:root[data-theme='dark'] .composer-model {
  color: #ffffff;
  opacity: 1;
}
:root[data-theme='dark'] .composer-attach .icon,
:root[data-theme='dark'] .composer-model .icon,
:root[data-theme='dark'] .composer-model .composer-chip-label {
  color: #ffffff;
  opacity: 1;
}
:root[data-theme='dark'] .composer-attach:disabled { opacity: 0.35; }

:root[data-theme='light'] .composer-attach,
:root[data-theme='light'] .composer-model {
  color: #000000;
  opacity: 1;
}
:root[data-theme='light'] .composer-attach .icon,
:root[data-theme='light'] .composer-model .icon,
:root[data-theme='light'] .composer-model .composer-chip-label {
  color: #000000;
  opacity: 1;
}
:root[data-theme='light'] .composer-attach:disabled { opacity: 0.35; }

.code-block {
  margin: var(--s-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 0.75rem);
  background: var(--surface-2);
  overflow: hidden;
}

.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}

.code-actions { display: flex; align-items: center; gap: 0.125rem; }
.code-action:hover { background: var(--surface); color: var(--ink); }
.code-action[data-done='true'] { color: var(--ink); }
.code-action .icon { font-size: 0.75rem; }

.code-block .md-pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  tab-size: 4;
  overscroll-behavior-x: contain;
}

.code-block .md-pre {
  scrollbar-width: thin;
  scrollbar-color: var(--line-fill) transparent;
}
.code-block .md-pre::-webkit-scrollbar { height: 0.5rem; }
.code-block .md-pre:hover::-webkit-scrollbar-thumb { background: var(--line); }
.hl-italic { font-style: italic; }
.chat > .drop-veil { position: absolute; }
#chat > .chat-scroll {
  position: absolute !important;
  top: 3.25rem;
  left: 0;
  right: 0;
  bottom: 0 !important;
  min-height: 0;
  scroll-padding-bottom: var(--dock-h, 7.5rem);
}

#chat .composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  pointer-events: none;
  background: transparent;
  margin-top: 0;
}
#chat .composer-dock > * { pointer-events: auto; }

#chat .composer-dock::before {
  display: none;
  content: '';
  position: absolute;
  inset: -3.5rem 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 34%,
    var(--bg) 62%
  );
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  #chat .composer-dock::before {
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 58%);
  }
}

#chat .chat-scroll { padding-bottom: calc(var(--dock-h, 7.5rem) + var(--s-4)); }

#chat[data-empty='true'] > .chat-scroll {
  position: static !important;
  top: auto;
  bottom: auto !important;
  padding-bottom: 0;
}
#chat[data-empty='true'] .composer-dock {
  position: static;
  margin-top: var(--s-6);
  margin-bottom: 0;
  pointer-events: auto;
}
@media (min-width: 701px) {
  #chat[data-empty='true'] > .chat-scroll { margin-block: auto 0; padding-top: 0; }
  #chat[data-empty='true'] .composer-dock { margin-bottom: auto; padding-bottom: calc(var(--s-5) + 6vh); }
}
.link-card:hover,
.link-card:focus-visible { background: var(--surface-3); border-color: var(--line-strong, var(--line)); }
.message-body .link-card .link-card-title { color: var(--ink); }
.message-body .link-card .link-card-meta { color: var(--ink-muted); }

.link-card-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 610;
  color: var(--ink-muted);
}
.link-card-mark::before { content: attr(data-letter); }

.link-card-text { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.link-card-title {
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-card-meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-body .md-list li.li-card::before,
.message-body ul.md-list li.li-card::before,
.message-body ol.md-list li.li-card::before,
.message-body ul.md-list ul.md-list li.li-card::before { content: none; }
.message-body ul.md-list li.li-card { list-style: none; }

@media (max-width: 620px) {
  .composer-mode .composer-chip-label { max-width: 7.5rem; }
}
.composer-model.composer-mode {
  --chip-fill: color-mix(in srgb, var(--ink) 4%, transparent);
  --chip-edge: color-mix(in srgb, var(--ink) 10%, transparent);
  width: auto;
  height: 2rem;
  gap: 0.375rem;
  padding: 0 0.75rem 0 0.625rem;
  border-radius: var(--r-pill);
  background: var(--chip-fill);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  font-size: 0.875rem;
  font-weight: 570;
  opacity: 1;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.composer-model.composer-mode:hover {
  --chip-fill: color-mix(in srgb, var(--ink) 7%, transparent);
  --chip-edge: color-mix(in srgb, var(--ink) 13%, transparent);
}
.composer-model.composer-mode[aria-expanded='true'] {
  --chip-fill: color-mix(in srgb, var(--ink) 9%, transparent);
  --chip-edge: color-mix(in srgb, var(--ink) 16%, transparent);
}
.composer-model.composer-mode:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mode-menu {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: var(--menu-shadow);
  transform-origin: bottom right;
  animation: menu-in 180ms var(--ease-out) both;
}
.mode-menu[hidden] { display: none; }
.mode-menu[data-side='below'] { bottom: auto; top: calc(100% + 0.375rem); transform-origin: top right; }
#chat .composer-dock:has(.mode-menu:not([hidden])) { z-index: 25; }

.message-role:empty { display: none; }
.message-auto {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: calc(var(--s-2) * -1) 0 var(--s-3);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}
.message-auto-mark { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.15rem; }
.message-role:empty + .message-auto { margin-top: 0; }

.message-dig-line {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}
.message-dig-mark { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.15rem; }
.message-dig-name { flex: none; font-weight: 570; color: var(--ink-muted); }
.message-dig-point { min-width: 0; }

.composer-model.composer-voice {
  position: relative;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: #000000;
  opacity: 1;
}
:root[data-theme='dark'] .composer-model.composer-voice { background: #ffffff; }
.composer-model.composer-voice:hover { background: #262626; }
:root[data-theme='dark'] .composer-model.composer-voice:hover { background: #e5e5e5; }
:root[data-theme='dark'] .composer-model.composer-voice .icon-mx { color: #000000; }
:root .composer-model.composer-voice[data-state],
:root .composer-model.composer-voice[data-state] .icon {
  background: var(--ink-strong);
  color: var(--surface);
  opacity: 1;
}
:root .composer-model.composer-voice[data-state] .icon { background: none; }
:root .composer-model.composer-voice[data-state='connecting'] { opacity: 0.6; }

.composer-mode .composer-chip-label { font-size: 1rem; line-height: 1; padding-top: 1px; }

@media (max-width: 700px) {
  .composer-inner {
    padding: 0.75rem 0.75rem 0.625rem;
    border-width: 1px;
    border-radius: 1.75rem;
  }
  .composer-row,
  .composer-row[data-tall] { align-items: center; }
  .composer-row {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.625rem;
    column-gap: 0.375rem;
  }
  .composer-field { order: 1; flex: 1 0 100%; }
  .composer textarea { min-height: 1.75rem; padding: 0.25rem 0.375rem; }
  .composer-hint-line { top: 0.25rem; left: 0.375rem; right: 0.375rem; }
  .composer-go { display: contents; }
  .composer-attach { order: 2; }
  .model-picker { order: 3; margin-left: auto; }
  .composer-voice { order: 4; }
  .composer-send { order: 5; }
  .composer-attach,
  .composer-model:not(.composer-mode),
  .composer-send { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
  .composer-model.composer-mode { height: 2rem; border-radius: var(--r-pill); }
  #chat[data-empty='true'] > .chat-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.reply-sources { margin-top: 1.25rem !important; }
.reply-sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.875rem 0 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 570;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.reply-sources-toggle:hover,
.reply-sources-toggle[aria-expanded='true'] { background: var(--surface-2); }
.reply-sources-stack { display: inline-flex; }
.reply-sources-stack .source-mark { box-shadow: 0 0 0 2px var(--bg); }
.reply-sources-stack .source-mark + .source-mark {
  margin-left: -0.375rem;
  transition: margin-left 260ms var(--ease-out);
}
.reply-sources-toggle[aria-expanded='true'] .source-mark + .source-mark { margin-left: -0.125rem; }
.reply-sources-toggle:active { transform: scale(0.97); }
.reply-sources-toggle { transition: background var(--dur-fast) var(--ease), transform 120ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reply-sources-stack .source-mark + .source-mark { transition: none; }
  .reply-sources-toggle:active { transform: none; }
}

.source-mark {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-3);
}

.reply-sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.75rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
}
.reply-sources-list[hidden] { display: none; }
.message-body .source-row {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.message-body .source-row:hover,
.message-body .source-row:focus-visible { background: var(--surface-2); }
.source-row-site {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.source-row-site .source-mark { width: 1rem; height: 1rem; }
.source-item { position: relative; }
.message-body .source-item > .source-row { padding-right: 2.75rem; }
.source-cite {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0.5rem;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  translate: 0 -50%;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.source-item:hover .source-cite,
.source-item:focus-within .source-cite,
.source-cite[aria-expanded='true'] { opacity: 1; }
.source-cite:hover,
.source-cite:focus-visible { color: var(--ink); background: var(--surface-3); }
@media (hover: none) {
  .source-cite { opacity: 1; }
}
.cite-menu {
  position: absolute;
  top: calc(50% + 1rem);
  right: 0.5rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 8.5rem;
  padding: 0.3125rem;
  gap: 0.0625rem;
  background: var(--surface);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(11, 23, 48, 0.06), 0 18px 44px -14px rgba(11, 23, 48, 0.22);
  animation: menu-in 210ms var(--ease-out) both;
}
:root[data-theme='dark'] .cite-menu { box-shadow: var(--shadow-lg); }
.cite-menu-item {
  padding: 0.4375rem 0.625rem;
  border: 0;
  background: none;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cite-menu-item:hover,
.cite-menu-item:focus-visible { background: var(--surface-2); }
.source-row-title {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 570;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-time {
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
}

.message-edit {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(100%, 36rem);
}
.message-edit-field {
  width: 100%;
  min-height: 3rem;
  max-height: 40vh;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-chat);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.55;
  resize: none;
}
.message-edit-field:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.message-edit-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

.composer-mode .composer-chip-label { font-size: 0.875rem; line-height: 1; padding-top: 0; }

.composer-fine {
  margin: 0.5rem 0 -0.5rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-faint);
}
@media (min-width: 701px) {
  #chat[data-empty='true'] .composer-fine {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
    margin: 0;
  }
}
#chat[data-empty='true'] .chat-bar-title { visibility: hidden; }

.mode-menu { max-height: min(30rem, calc(100vh - 8rem)); overflow-y: auto; }

.mode-menu:has(.council-block) { width: min(22rem, calc(100vw - 2rem)); }

.mode-menu[data-layout='wide'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  max-width: 36rem;
  padding: 0.375rem;
  transform-origin: bottom center;
}
.mode-menu[data-layout='wide'][data-side='below'] { transform-origin: top center; }
.mode-menu[data-layout='wide'] > .mode-models { margin: 0; }
.mode-menu[data-layout='wide'] .council-block { padding-bottom: 0; }
.mode-menu[data-layout='wide'] .mode-models > .mode-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 0.25rem;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.mode-menu[data-layout='wide'] .mode-models > .mode-section + .mode-section {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: 0;
}
.mode-menu[data-layout='wide'] .mode-head { grid-column: 1 / -1; }
.mode-menu[data-layout='wide'] .mode-option,
.mode-menu[data-layout='wide'] .council-toggle { padding: 0.4375rem 0.5rem; }
.mode-menu[data-layout='wide'] .mode-option-mark { width: 1.375rem; height: 1.375rem; }
.mode-menu[data-layout='wide'] .mode-option-name { font-size: 0.8125rem; }
.mode-menu[data-layout='wide'] .mode-option-note { font-size: 0.75rem; line-height: 1.35; }
.mode-menu[data-layout='wide'] > .mode-own-note,
.mode-menu[data-layout='wide'] > .mode-taste {
  grid-column: 1 / -1;
  margin-top: 0.375rem;
}

.composer { position: relative; }
.composer-mode .composer-chip-label { max-width: 11rem; }

.council-live {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.council-live-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.council-live-mark { width: 1rem; height: 1rem; }
.council-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.council-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.council-chip[data-state='busy'] { color: var(--ink-muted); animation: council-breathe 1.6s ease-in-out infinite; }
.council-chip[data-state='done'] { color: var(--ink); background: var(--surface-2); }
.council-chip[data-state='failed'] { text-decoration: line-through; }
.council-chip-mark { width: 0.75rem; height: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
  .council-chip[data-state='busy'] { animation: none; }
}

.council-discussion {
  margin: 0 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.council-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.625rem var(--s-3);
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink);
}
.council-summary::-webkit-details-marker { display: none; }
.council-summary-mark { width: 1rem; height: 1rem; flex: none; color: var(--ink-muted); }
.council-summary-name { font-weight: 570; flex: none; }
.council-summary-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}
.council-summary-chevron { width: 0.875rem; height: 0.875rem; margin-left: auto; flex: none; color: var(--ink-faint); transition: transform var(--dur-fast) var(--ease); }
.council-discussion[open] .council-summary-chevron { transform: rotate(180deg); }
.council-body { padding: 0 var(--s-3) var(--s-3); border-top: 1px solid var(--line); }
.council-tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding: var(--s-2) 0;
  scrollbar-width: none;
}
.council-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  flex: none;
  padding: 0.3125rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.council-tab[aria-selected='true'] { background: var(--surface-2); color: var(--ink); font-weight: 570; }
.council-tab-note { font-size: 0.6875rem; font-weight: 500; color: var(--ink-faint); }
.council-views {
  display: inline-flex;
  gap: 0.125rem;
  margin-bottom: var(--s-2);
  padding: 0.125rem;
  border-radius: 999px;
  background: var(--surface-2);
}
.council-views[hidden] { display: none; }
.council-view {
  padding: 0.1875rem 0.625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
}
.council-view[aria-pressed='true'] { background: var(--bg); color: var(--ink); }
.council-diff { white-space: pre-wrap; line-height: 1.6; }
.council-failed { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

.composer-target {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  padding: 0.5rem 0.75rem 0;
  font-size: 0.75rem;
}
.composer-target[hidden] { display: none; }
.composer-target-label { color: var(--ink-faint); }
.composer-target-options { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.composer-target-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.5rem;
  padding: 0 0.5625rem 0 0.4375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.composer-target-option:hover { background: var(--surface-2); color: var(--ink); }
.composer-target-option[aria-checked='true'] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.composer-target-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.composer-model-marks {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.composer-model-marks:empty { display: none; }
.composer-model-marks > svg { width: 1rem; height: 1rem; flex: none; }
.composer-model-marks[data-count]:not([data-count='1']) { gap: 0.1875rem; }
:root[data-theme] .composer-model.composer-mode .composer-model-marks > svg { width: 1rem; height: 1rem; }

.agree-map {
  margin: 0 0 var(--s-4);
  padding: 0.75rem var(--s-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.agree-map:not(:has(.council-discussion)) { padding-bottom: 0.75rem; }
.agree-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.agree-head-mark { flex: none; width: 1.125rem; height: 1.125rem; color: var(--ink-strong); }
.agree-head-text {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  line-height: 1.4;
}
.agree-head-name { flex: none; font-size: 0.875rem; font-weight: 610; color: var(--ink-strong); }
.agree-head-who { min-width: 0; overflow: hidden; font-size: 0.8125rem; color: var(--ink-faint); text-overflow: ellipsis; white-space: nowrap; }
.agree-verdict {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3125rem;
  margin: 0;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.375rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 570;
  line-height: 1.3;
  white-space: nowrap;
}
.agree-verdict.is-agreed { background: var(--positive-soft); color: var(--positive); }
.agree-verdict.is-split { background: var(--danger-soft); color: var(--danger); }
.agree-verdict-mark { width: 0.9375rem; height: 0.9375rem; color: inherit; }
.agree-map .council-discussion.is-inside {
  margin: 0.75rem calc(var(--s-4) * -1) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.agree-map .council-discussion.is-inside .council-summary { padding: 0.625rem var(--s-4); color: var(--ink-muted); }
.agree-map .council-discussion.is-inside .council-body { padding: 0 var(--s-4) var(--s-4); }
.agree-part { margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid var(--line); }
.agree-title {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 570;
  color: var(--ink-faint);
}
.agree-list { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.agree-point {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  column-gap: var(--s-2);
  align-items: start;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
}
.agree-mark { width: 1rem; height: 1rem; margin-top: 0.125rem; }
.agree-mark.is-agreed { color: var(--positive); }
.agree-mark.is-split { color: var(--danger); }
.agree-mark.is-moved { color: var(--ink-muted); }
.split-point + .split-point { padding-top: 0.375rem; }
.split-views {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: 0.125rem;
  margin: 0.25rem 0 0 calc(1rem + var(--s-2));
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.split-who { font-weight: 570; color: var(--ink-strong); }
.split-view { margin: 0; color: var(--ink-muted); }
.split-side {
  display: inline;
  margin-left: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink-faint);
  cursor: pointer;
}
.split-side:hover { color: var(--ink-strong); }
.split-side[aria-pressed='true'] { color: var(--ink-strong); font-weight: 570; }
.agree-mark.is-only { color: var(--ink-muted); }
.moved-now strong { font-weight: 570; color: var(--ink-strong); }
.moved-was {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}
.split-settle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.875rem;
  margin: 0.5rem 0 0 calc(1rem + var(--s-2));
  padding: 0 0.75rem 0 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ink);
  cursor: pointer;
}
.split-settle:hover { border-color: var(--line-strong); color: var(--ink-strong); }
.split-settle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.split-settle-mark { flex: none; width: 1rem; height: 1rem; color: inherit; transition: transform var(--dur-fast) var(--ease); }
.split-settle:hover .split-settle-mark { transform: scale(1.1); }
.cite {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.4em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 570;
  line-height: 1.5;
  color: var(--ink-muted);
  vertical-align: 0.1em;
  white-space: nowrap;
}
.cite.is-only { border-style: dashed; color: var(--ink-faint); }
.council-early-note {
  margin: 0 0 var(--s-2);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.council-early { color: var(--ink-muted); }

@media (max-width: 560px) {
  .agree-map { padding-inline: var(--s-3); }
  .agree-map .council-discussion.is-inside { margin-inline: calc(var(--s-3) * -1); }
  .agree-head { flex-wrap: wrap; }
  .agree-head-text { flex-basis: calc(100% - 2rem); }
  .agree-verdict { margin-left: calc(1.125rem + var(--s-2)); }
  .split-views { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .split-view + .split-who { margin-top: var(--s-2); }
  .split-settle { min-height: 2.5rem; }
}

.composer-dock { container-type: inline-size; }
.usage-picker {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0.375rem auto 0;
}
.composer-model.composer-usage { width: auto; height: 2rem; padding: 0 0.75rem; gap: 0.375rem; }
.composer-usage .icon-mx { width: 1.125rem; height: 1.125rem; }
.usage-label { line-height: 1.5; white-space: nowrap; }
:root[data-theme='dark'] .composer-model.composer-usage,
:root[data-theme='dark'] .composer-usage .icon,
:root[data-theme='dark'] .composer-usage .usage-label { color: #ffffff; opacity: 1; }
:root[data-theme='light'] .composer-model.composer-usage,
:root[data-theme='light'] .composer-usage .icon,
:root[data-theme='light'] .composer-usage .usage-label { color: #000000; opacity: 1; }
#chat .composer-dock:has(.usage-pop:not([hidden])) { z-index: 25; }

.usage-pop {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  z-index: 30;
  width: min(21rem, calc(100vw - 2rem));
  margin-left: calc(min(21rem, calc(100vw - 2rem)) / -2);
  padding: 0.75rem 0.875rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: var(--menu-shadow);
  font-family: inherit;
  color: var(--ink);
  transform-origin: bottom center;
  animation: menu-in 180ms var(--ease-out) both;
}
.usage-pop[hidden] { display: none; }

.usage-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.usage-pop-title { font-size: 0.8125rem; color: var(--ink); opacity: 0.7; }
.usage-pop-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 610;
  color: var(--ink-strong);
  cursor: pointer;
}
.usage-pop-all .icon-mx { width: 0.875rem; height: 0.875rem; }

.usage-pop-body { display: flex; flex-direction: column; gap: 0.875rem; }
.usage-pop-row { display: flex; flex-direction: column; gap: 0.4375rem; }
.usage-pop-extra { padding-top: 0.875rem; border-top: 1px solid var(--line); }
.usage-pop-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.usage-pop-name { font-weight: 570; color: var(--ink-strong); white-space: nowrap; }
.usage-pop-side { display: inline-flex; gap: 0.5rem; color: var(--ink); opacity: 0.7; white-space: nowrap; }
.usage-pop-pct { font-variant-numeric: tabular-nums; }

.usage-pop-bar {
  height: 0.25rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.usage-pop-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.usage-pop-note { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--ink); opacity: 0.6; }

#chat:not([data-empty='true']) .composer-dock::before {
  display: block;
  inset: calc(var(--s-2) - 0.25rem) 0 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.5rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.5rem);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rail-new:hover:not(:active) .rail-new-mark { transform: translateY(-1.5px); }
  .composer-attach:hover:not(:disabled) .icon-mx { transform: rotate(90deg); }
  .composer-send:not(.composer-stop):hover:not(:disabled) .icon-mx { transform: translateY(-1.5px); }
  .jump-latest:hover .icon-mx { transform: translateY(1.5px); }
}
:root:not([data-theme='dark']) .composer-inner {
  --surface-2: #e4e4e0;
  border: 1px solid transparent;
  box-shadow: none;
}
:root:not([data-theme='dark']) .chat[data-dropping='true'] .composer-inner { border-color: var(--accent); }

.model-picker { margin-right: 0.5rem; }
:root[data-theme] :is(.composer-model.composer-team, .composer-model.composer-mode) {
  --chip-fill: #000000;
  --chip-line: transparent;
  width: auto;
  height: 2rem;
  gap: 0.4375rem;
  padding: 0 0.875rem 0 0.6875rem;
  border-radius: var(--r-pill);
  background: var(--chip-fill);
  box-shadow: inset 0 0 0 var(--chip-weight, 1px) var(--chip-line);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.005em;
  opacity: 1;
  transition-property: background, box-shadow, color;
}
:root[data-theme='dark'] :is(.composer-model.composer-team, .composer-model.composer-mode) {
  --chip-fill: #1c1c1c;
  --chip-line: rgba(255, 255, 255, 0.13);
}
.composer-model.composer-team,
.composer-model.composer-mode { min-width: 5.5rem; justify-content: center; }
:root[data-theme] .composer-model.composer-team { margin-right: 0.5rem; }
:root[data-theme] :is(.composer-model.composer-team, .composer-model.composer-mode):hover,
:root[data-theme] .composer-model.composer-mode[aria-expanded='true'] { --chip-fill: #262626; }
:root[data-theme='dark'] :is(.composer-model.composer-team, .composer-model.composer-mode):hover,
:root[data-theme='dark'] .composer-model.composer-mode[aria-expanded='true'] { --chip-fill: #262626; --chip-line: rgba(255, 255, 255, 0.22); }
:root[data-theme] :is(.composer-model.composer-team[aria-pressed='true'], .composer-model.composer-mode[data-selected='true']) {
  --chip-fill: #000000;
  --chip-line: rgba(255, 255, 255, 0.45);
  --chip-weight: 1.5px;
}
:root:not([data-theme='dark']) :is(.composer-model.composer-team[aria-pressed='true'], .composer-model.composer-mode[data-selected='true']) {
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3.5px #000000;
}
:root[data-theme='dark'] :is(.composer-model.composer-team[aria-pressed='true'], .composer-model.composer-mode[data-selected='true']) {
  --chip-fill: #2e2e2e;
  --chip-line: #ffffff;
}
:root[data-theme] :is(.composer-team, .composer-mode) :is(.icon, .icon-mx, .composer-chip-label, .composer-chip-cost) { color: #ffffff; opacity: 1; }
:root[data-theme] .composer-model.composer-mode .composer-chip-cost { opacity: 0.7; }
:root[data-theme] .composer-model.composer-mode .composer-model-marks > svg:not(.provider-logo) { filter: brightness(0) invert(1); }
:root[data-theme] .composer-model.composer-mode :is(.provider-logo-openai, .provider-logo-grok) { color: #ffffff; }
:root[data-theme] :is(.composer-model.composer-team, .composer-model.composer-mode):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.composer-team .icon-mx {
  width: 1.0625rem;
  height: 1.0625rem;
}
.composer-team .composer-chip-label { font-size: 0.875rem; line-height: 1; }
.mode-team-note {
  margin: -0.125rem 0 0.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .team-picker { order: 3; margin-left: auto; }
  .team-picker ~ .model-picker { margin-left: 0; }
  .composer-model.composer-team { height: 2rem; }
}
:root[data-theme] .team-picker .composer-model.composer-team { margin-right: 0; }

.mode-menu,
.mode-menu:has(.council-block) {
  gap: 0;
  width: min(17.5rem, calc(100vw - 1.5rem));
  padding: 0.375rem;
  border-radius: 1.125rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
}
:root[data-theme='dark'] .mode-menu {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 16px 40px -8px rgba(0, 0, 0, 0.9);
}
.mode-menu .mode-modes,
.mode-menu .mode-models,
.mode-menu .mode-section,
.mode-menu .council-block { gap: 0; }
.mode-menu .mode-section,
.mode-menu .mode-modes:not(:empty) + .mode-models,
.mode-menu .council-block + .mode-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.mode-menu .council-block { padding-bottom: 0; }
.mode-menu .mode-section + .mode-section { margin-top: 0.25rem; }
.mode-menu .mode-head {
  padding: 0.625rem 0.75rem 0.25rem;
  font-size: 0.8125rem;
  font-weight: 450;
}
.mode-menu .mode-option,
.mode-menu .council-toggle {
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
}
.mode-menu .mode-option[aria-checked='true'] { background: none; }
.mode-menu .mode-option:hover,
.mode-menu .council-toggle:hover,
.mode-menu .mode-option:focus-visible,
.mode-menu .council-toggle:focus-visible { background: var(--surface-2); }
.mode-menu .mode-option:focus-visible,
.mode-menu .council-toggle:focus-visible { outline: none; }
.mode-menu .mode-option-copy { gap: 0.0625rem; }
.mode-menu .mode-option-name {
  font-size: 0.9375rem;
  font-weight: 450;
  line-height: 1.35;
}
.mode-menu .mode-option-note {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-faint);
}
.mode-menu .mode-option-tick { width: 1.125rem; height: 1.125rem; }
.mode-menu .mode-taste,
.mode-menu .mode-own-note {
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem 0.375rem;
  font-size: 0.75rem;
}
.mode-menu,
.mode-menu:has(.council-block) { width: min(21.5rem, calc(100vw - 1.5rem)); }
.mode-menu .mode-modes:not(:empty) + .mode-models,
.mode-menu .mode-models > .mode-section + .mode-section,
.mode-menu .mode-models + .mode-own-note,
.mode-menu .mode-models + .mode-taste {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--line);
}
.mode-menu .mode-models > .mode-section + .mode-section { margin-top: 0.375rem; }
.mode-menu .mode-head { padding-top: 0.375rem; font-size: 0.75rem; }
.mode-menu .mode-option-mark { width: 1.375rem; height: 1.375rem; }
.mode-menu .mode-option-tag {
  flex: none;
  max-width: 48%;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-faint);
}
.mode-menu .mode-option-copy:has(+ .mode-option-tag) { flex: 0 1 auto; }
.mode-menu .mode-option-copy:has(+ .mode-option-tag) .mode-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme='dark'] .mode-menu { background: #171717; }
:root[data-theme='dark'] .mode-menu .mode-option:hover,
:root[data-theme='dark'] .mode-menu .council-toggle:hover,
:root[data-theme='dark'] .mode-menu .mode-option:focus-visible,
:root[data-theme='dark'] .mode-menu .council-toggle:focus-visible { background: #262626; }