body.space-consolidation-artifact-mode .topbar {
  border-bottom-color: color-mix(in srgb, #f59e0b 78%, var(--border));
  box-shadow: inset 0 -5px 0 #f59e0b, 0 10px 32px color-mix(in srgb, #f59e0b 20%, transparent);
}
body.space-consolidation-artifact-mode .chat-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 5px solid color-mix(in srgb, #f59e0b 72%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #f59e0b 38%, transparent), inset 0 0 120px color-mix(in srgb, #f59e0b 10%, transparent);
}
body.space-consolidation-artifact-mode .chat-shell::after {
  content: attr(data-preview-banner);
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  z-index: 8;
  transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 80%, #ffffff 20%);
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #111827;
  box-shadow: 0 12px 34px color-mix(in srgb, #000 22%, transparent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  pointer-events: none;
}
body.space-consolidation-artifact-mode .composer {
  border-top-color: color-mix(in srgb, #f59e0b 70%, var(--border));
  box-shadow: 0 -10px 30px color-mix(in srgb, #f59e0b 12%, transparent);
}
.messages {
  grid-row: 2;
  min-height: 0;
  --message-zoom: 1;
  overflow-y: auto;
  padding: 28px max(18px, calc((100% - 900px) / 2)) 22px;
  display: flex; flex-direction: column; gap: calc(18px * var(--message-zoom));
  font-size: calc(15px * var(--message-zoom));
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.jump-to-bottom {
  grid-row: 1; grid-column: 1;
  position: fixed;
  right: max(18px, calc((100% - 900px) / 2));
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 3;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--panel-solid) 76%, transparent);
  color: var(--accent); font-size: 21px; font-weight: 800;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  opacity: .68; backdrop-filter: blur(14px);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.jump-to-bottom:hover, .jump-to-bottom:focus-visible { opacity: 1; transform: translateY(-1px); }
.jump-to-bottom.solid { opacity: 1; background: var(--accent); color: white; border-color: transparent; }
.empty {
  margin: auto; max-width: 620px; text-align: center; color: var(--muted);
}
.empty h1 { color: var(--text); font-size: clamp(28px, 7vw, 48px); letter-spacing: -0.05em; margin: 0 0 10px; }

.message { display: flex; gap: 12px; align-items: flex-start; }
.timeline-event { display: flex; justify-content: center; margin: 2px 0; }
.assistant-thought { display: flex; justify-content: flex-start; padding-left: calc(42px * var(--message-zoom)); margin: calc(-8px * var(--message-zoom)) 0; }
.assistant-thought-details { max-width: min(720px, 82%); color: color-mix(in srgb, var(--muted) 78%, transparent); font-size: calc(13px * var(--message-zoom)); font-style: italic; }
.bubble-wrap > .assistant-thought-details { max-width: 100%; margin: 0 0 calc(5px * var(--message-zoom)); }
.assistant-thought-details summary { cursor: pointer; user-select: none; list-style-position: inside; opacity: .72; }
.assistant-thought-details summary:hover { opacity: .95; }
.assistant-thought-details[open] summary { margin-bottom: 4px; }
.assistant-thought-content { white-space: normal; overflow-wrap: anywhere; padding: 6px 10px; border-left: 2px solid color-mix(in srgb, var(--muted) 28%, transparent); background: color-mix(in srgb, var(--panel-solid) 34%, transparent); border-radius: 10px; display: grid; gap: 4px; }
.assistant-thought-details.bridge-tool { color: color-mix(in srgb, var(--accent) 82%, var(--text)); }
.assistant-thought-details.bridge-tool summary { opacity: .9; font-weight: 800; }
.assistant-thought-details.bridge-tool .assistant-thought-content { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel-solid)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.assistant-thought-line { white-space: pre-wrap; }
.assistant-thought-previous { justify-self: start; padding: 0; border: 0; background: transparent; color: color-mix(in srgb, var(--accent) 78%, var(--muted)); font: inherit; font-weight: 800; font-style: normal; cursor: pointer; opacity: .86; }
.assistant-thought-previous:hover,
.assistant-thought-previous:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 2px; outline: none; }
.assistant-thought-line.bridge-tool,
.assistant-thought-details.bridge-tool .assistant-thought-line { font-weight: 700; }
.bubble-wrap > .assistant-thought-details .assistant-thought-content { background: transparent; padding-top: 2px; padding-bottom: 2px; }
.bubble-wrap > .assistant-thought-details.bridge-tool .assistant-thought-content { background: color-mix(in srgb, var(--accent) 11%, var(--panel-solid)); padding: 6px 10px; }
.assistant-thought.live .assistant-thought-details { opacity: .92; }
.assistant-thought-details.live { opacity: .92; }
.assistant-thought.live .assistant-thought-content { background: transparent; }
.assistant-thought-details.live .assistant-thought-content { background: transparent; }
.assistant-thought.live .assistant-thought-details.bridge-tool .assistant-thought-content,
.assistant-thought-details.live.bridge-tool .assistant-thought-content { background: color-mix(in srgb, var(--accent) 11%, var(--panel-solid)); }
.timeline-event-pill {
  display: inline-flex; align-items: center; gap: 10px; max-width: min(720px, 88%);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--panel-solid) 80%, transparent);
  color: var(--muted); font-size: calc(12px * var(--message-zoom)); font-weight: 700;
}
.timeline-event-pill::before { content: "↳"; color: var(--accent); font-weight: 900; }
.timeline-event.unsupported .timeline-event-pill::before { content: "⋯"; }
.timeline-event-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-event-time { color: color-mix(in srgb, var(--muted) 78%, transparent); font-size: .9em; }
.message.user { flex-direction: row-reverse; }
.avatar {
  flex: 0 0 auto; width: calc(30px * var(--message-zoom)); height: calc(30px * var(--message-zoom)); border-radius: calc(11px * var(--message-zoom));
  display: grid; place-items: center; font-weight: 800; font-size: calc(12px * var(--message-zoom));
  background: var(--panel-solid); border: 1px solid var(--border); color: var(--muted);
}
.message.user .avatar { background: var(--user); color: white; border-color: transparent; }

.message.target-message .bubble {
  position: relative;
}
.message.target-message:not(:has(.target-search-hit)) .bubble {
  outline: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent);
}
.target-search-hit {
  position: relative;
  z-index: 0;
  display: inline;
  padding: .03em .18em .05em;
  margin: 0 -.03em;
  border-radius: .38em;
  color: inherit;
  background: color-mix(in srgb, var(--accent) 30%, rgba(255, 236, 153, .92));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: targetSearchHitPulse 1.45s ease-in-out 0s 3;
}
@keyframes targetSearchHitPulse {
  0%, 100% {
    background: color-mix(in srgb, var(--accent) 28%, rgba(255, 236, 153, .9));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
      0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  48% {
    background: color-mix(in srgb, var(--accent) 42%, rgba(255, 236, 153, .98));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent),
      0 0 30px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .target-search-hit { animation: none; }
}
body.space-active.space-member .message.user .avatar,
body.space-active.space-member .message.user .bubble,
body.space-active .send { background: var(--space-accent); }
body.space-active.space-member .message.user .avatar,
body.space-active.space-member .message.user .bubble,
body.space-active .send { color: var(--space-accent-text, var(--user-text)); }
body.space-active .session-item.active,
body.space-active .space-artifact-row.active { border-color: color-mix(in srgb, var(--space-accent) 54%, var(--border)); box-shadow: inset 4px 0 0 var(--space-accent); }
.space-ring-tunnel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  color: var(--space-accent);
  opacity: .165;
  filter: drop-shadow(0 0 21px color-mix(in srgb, var(--space-accent) 11%, transparent));
}
body.space-active .space-ring-tunnel { display: block; }
.space-ring-tunnel svg { display: block; width: 100%; height: 100%; }
.space-ring-tunnel path { fill: currentColor; }
body.space-active .app {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--space-accent) 8%, transparent), transparent 42%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--space-accent) 7%, transparent), transparent 44%);
}
.bubble-wrap { max-width: min(760px, 82%); min-width: 0; }
.bubble {
  padding: calc(12px * var(--message-zoom)) calc(14px * var(--message-zoom)); border-radius: calc(18px * var(--message-zoom));
  background: var(--assistant); border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.02);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
}
.message.user .bubble-wrap { max-width: min(760px, 82%); }
.messages.document-layout { padding-inline: max(18px, 10%); }
.messages.document-layout .message.assistant .bubble-wrap { max-width: 100%; width: 100%; }
.messages.document-layout .message.assistant .bubble { padding-inline: 0; background: transparent; border-color: transparent; box-shadow: none; border-radius: 0; }
.messages.document-layout .message.assistant .avatar { display: none; }
.message.user .bubble { background: var(--user); color: var(--user-text); border-color: transparent; }
.bubble.pending.activity,
.stream-inline-activity {
  display: inline-flex;
  align-items: baseline;
  color: var(--muted);
  font-family: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: normal;
  line-height: inherit;
  vertical-align: baseline;
}
.bubble.pending.activity { gap: .42em; }
.stream-inline-activity { gap: .42em; margin-left: .4em; }
.activity-indicator { width: .5em; height: .5em; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--accent) 16%, transparent); flex: 0 0 auto; transform: translateY(-.06em); }
.activity-label { font: inherit; line-height: inherit; }
.wait-caret { display: inline-block; width: .12em; height: 1em; margin-left: .04em; border-radius: 999px; background: currentColor; opacity: .72; transform: translateY(.16em); animation: caret-blink 1s steps(1, end) infinite; }
@keyframes caret-blink { 0%, 48% { opacity: .72; } 49%, 100% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .wait-caret { animation: none; } }
.activity-dots { display: none; }
.activity-dots::after { content: ""; animation: dots 1.4s steps(1, end) infinite; color: var(--accent); }
.reconnect-progress { display: block; height: calc(2px * var(--message-zoom)); margin-top: calc(8px * var(--message-zoom)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 45%, transparent); transform-origin: left center; animation: reconnect-countdown linear forwards; }
@keyframes reconnect-countdown { from { transform: scaleX(1); opacity: .85; } to { transform: scaleX(0); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .reconnect-progress { animation-timing-function: steps(1, end); } }
.stream-meta { color: var(--muted); font-size: calc(11px * var(--message-zoom)); margin: calc(5px * var(--message-zoom)) 2px 0; }
.context-usage-toggle { border: 0; background: transparent; color: color-mix(in srgb, var(--accent) 76%, var(--muted)); font: inherit; font-weight: 750; padding: 0 2px; cursor: pointer; }
.context-usage-toggle:hover, .context-usage-toggle:focus-visible { color: var(--accent); text-decoration: underline; }
.context-usage-panel { display: grid; gap: 3px; max-width: min(520px, 92vw); margin-top: 6px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--panel-solid) 86%, transparent); color: var(--muted); }
.context-usage-panel.hidden { display: none; }
.context-usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.context-usage-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.context-usage-value, .context-usage-status { color: var(--muted); white-space: nowrap; }
.context-usage-diagnostic { margin-top: -2px; padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); color: color-mix(in srgb, var(--text) 74%, var(--muted)); font-size: 0.92em; white-space: normal; }
.conversation-diagnostic { justify-content: flex-start; }
.conversation-diagnostic .avatar.diagnostic { background: color-mix(in srgb, var(--danger, #ef4444) 13%, var(--panel-solid)); border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border)); color: var(--danger, #ef4444); }
.conversation-diagnostic-wrap { max-width: min(760px, 82%); }
.conversation-diagnostic-inline { display: inline; }
.conversation-diagnostic-toggle { justify-self: start; border: 0; background: transparent; color: var(--danger, #ef4444); font: inherit; font-size: calc(12px * var(--message-zoom)); font-weight: 850; padding: 0 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.conversation-diagnostic-toggle:hover, .conversation-diagnostic-toggle:focus-visible { color: color-mix(in srgb, var(--danger, #ef4444) 82%, var(--text)); outline: none; }
.conversation-diagnostic-toggle.inconclusive, .conversation-diagnostic-toggle.pending, .conversation-diagnostic-toggle.unavailable { color: var(--muted); font-weight: 750; }
.conversation-diagnostic-toggle.inconclusive:hover, .conversation-diagnostic-toggle.inconclusive:focus-visible, .conversation-diagnostic-toggle.pending:hover, .conversation-diagnostic-toggle.pending:focus-visible, .conversation-diagnostic-toggle.unavailable:hover, .conversation-diagnostic-toggle.unavailable:focus-visible { color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.conversation-diagnostic-panel { display: grid; gap: 5px; max-width: min(620px, 92vw); margin-top: 7px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 38%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--panel-solid)); color: var(--text); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger, #ef4444) 78%, transparent); }
.conversation-diagnostic-panel.inconclusive, .conversation-diagnostic-panel.pending, .conversation-diagnostic-panel.unavailable { border-color: color-mix(in srgb, var(--muted) 38%, var(--border)); background: color-mix(in srgb, var(--muted) 7%, var(--panel-solid)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--muted) 62%, transparent); }
.conversation-diagnostic-panel.hidden { display: none; }
.conversation-diagnostic-title { color: var(--danger, #ef4444); font-weight: 850; }
.conversation-diagnostic-panel.inconclusive .conversation-diagnostic-title, .conversation-diagnostic-panel.pending .conversation-diagnostic-title, .conversation-diagnostic-panel.unavailable .conversation-diagnostic-title { color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.conversation-diagnostic-summary { color: color-mix(in srgb, var(--text) 92%, var(--muted)); overflow-wrap: anywhere; line-height: 1.4; }
.conversation-diagnostic-meta, .conversation-diagnostic-details { color: var(--muted); font-size: calc(11px * var(--message-zoom)); overflow-wrap: anywhere; }
.parallel-task-rows { display: grid; gap: 2px; margin-top: 3px; padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.parallel-task-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.35; }
.parallel-task-title { color: color-mix(in srgb, var(--accent) 78%, var(--muted)); font-weight: 760; }
.parallel-task-label { color: var(--muted); }
.parallel-task-status { color: var(--muted); opacity: .78; }
.parallel-task-status::before { content: "· "; }
.message-meta { display: inline-flex; align-items: center; gap: 5px; }
.message-input-source-badge { display: inline-flex; align-items: center; justify-content: center; line-height: 1; opacity: .74; }
.message-input-source-badge.voice { font-size: calc(12px * var(--message-zoom)); }
.message-actions { display: flex; align-items: center; gap: 4px; margin: calc(6px * var(--message-zoom)) 2px 0; }
.message-copy, .message-speech, .message-copy-all { padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--panel-solid) 78%, transparent); color: var(--muted); font-size: calc(11px * var(--message-zoom)); font-weight: 650; opacity: .72; }
.message-speech { min-width: calc(26px * var(--message-zoom)); line-height: 1.2; }
.message-copy:hover, .message-copy:focus-visible, .message-speech:hover, .message-speech:focus-visible, .message-copy-all:hover, .message-copy-all:focus-visible { opacity: 1; color: var(--text); }
.message-copy.copied, .message-copy-all.copied, .message-speech.playing { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.message.user .message-actions { justify-content: flex-end; }
.sse-freshness { font-weight: 650; transition: color .25s linear; }
.tool-progress-gauge {
  --tool-progress-pct: 0%;
  display: inline-block;
  position: relative;
  padding: 1px 5px;
  margin: -1px -3px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 22%, transparent) 0%,
      color-mix(in srgb, var(--accent) 22%, transparent) var(--tool-progress-pct),
      color-mix(in srgb, var(--accent) 7%, transparent) var(--tool-progress-pct),
      color-mix(in srgb, var(--accent) 7%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  transition: background .22s ease-out;
}
.markdown p { margin: 0 0 .65em; }
.markdown p:last-child { margin-bottom: 0; }
.markdown ul, .markdown ol { margin: .35em 0 .65em; padding-left: 1.35em; }
.markdown li { margin: .15em 0; }
.markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: rgba(148,163,184,.18); border-radius: 6px; padding: .08em .28em; }
.markdown .math-inline, .markdown .math-display {
  line-height: 1;
  overflow-wrap: normal;
}
.markdown .math-inline {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  padding: 0 .04em;
  vertical-align: -0.04em;
}
.markdown .math-display {
  display: block;
  margin: .55em 0;
  text-align: center;
  white-space: normal;
}
.markdown .math-inline .katex { font-size: 1.04em; }
.markdown .math-display .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; }
.markdown .math-fallback { font-family: "Times New Roman", Cambria, Georgia, serif; letter-spacing: .01em; }
.markdown .function-plot { margin: .65em 0; max-width: min(100%, 360px); }
.markdown .function-plot svg { display: block; width: 100%; height: auto; }
.markdown .inline-svg-artifact { margin: .65em 0; max-width: min(100%, 420px); }
.markdown .inline-svg-artifact svg { display: block; width: 100%; height: auto; }
.markdown .inline-quiz {
  display: grid;
  gap: 12px;
  margin: .85em 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--space-accent, var(--accent)) 26%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--space-accent, var(--accent)) 7%, var(--panel-solid));
  white-space: normal;
}
.markdown .inline-quiz header { display: grid; gap: 3px; padding-bottom: 2px; }
.markdown .inline-quiz header strong { font-size: 1.05em; line-height: 1.25; }
.markdown .inline-quiz form { display: grid; gap: 12px; margin: 0; }
.markdown .inline-quiz header small,
.markdown .inline-quiz footer,
.markdown .quiz-justification { color: var(--muted); font-size: .88em; }
.markdown .inline-quiz footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 2px; line-height: 1.35; }
.markdown .inline-quiz-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.markdown .quiz-question {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--space-accent, var(--accent)) 14%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-solid) 82%, transparent);
}
.markdown .quiz-question-title { display: flex; gap: 8px; align-items: flex-start; font-weight: 760; line-height: 1.35; }
.markdown .quiz-question-title > span:first-child { color: var(--space-accent, var(--accent)); font-variant-numeric: tabular-nums; }
.markdown .quiz-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; }
.markdown .quiz-choice {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--space-accent, var(--accent)) 13%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent);
  line-height: 1.35;
  cursor: pointer;
}
.markdown .quiz-choice:has(input:checked) { background: color-mix(in srgb, var(--space-accent, var(--accent)) 14%, transparent); border-color: color-mix(in srgb, var(--space-accent, var(--accent)) 54%, var(--border)); }
.markdown .quiz-choice input { margin-top: .25em; accent-color: var(--space-accent, var(--accent)); }
.markdown .quiz-choice-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65em;
  height: 1.65em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--space-accent, var(--accent)) 16%, transparent);
  color: var(--space-accent, var(--accent));
  font-size: .82em;
  font-weight: 850;
}
.markdown .plot-bg { fill: color-mix(in srgb, var(--panel-solid) 92%, var(--accent)); stroke: color-mix(in srgb, var(--border) 80%, var(--accent)); stroke-width: 1; }
.markdown .plot-grid { stroke: color-mix(in srgb, var(--muted) 14%, transparent); stroke-width: .7; }
.markdown .plot-axis { stroke: color-mix(in srgb, var(--muted) 68%, transparent); stroke-width: 1.1; }
.markdown .plot-axis-arrow { fill: color-mix(in srgb, var(--muted) 68%, transparent); }
.markdown .plot-tick-line { stroke: color-mix(in srgb, var(--muted) 52%, transparent); stroke-width: 1; }
.markdown .plot-curve { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.markdown .plot-label { fill: var(--text); font: 650 13px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.markdown .plot-axis-label { fill: var(--text); font: 700 12px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.markdown .plot-tick { fill: var(--muted); font: 10px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.markdown pre { margin: .5em 0; padding: 10px 12px; border-radius: 12px; background: rgba(15,23,42,.08); overflow-x: auto; white-space: pre; }
@media (prefers-color-scheme: dark) { .markdown pre { background: rgba(255,255,255,.08); } }
.markdown pre code { background: transparent; padding: 0; border-radius: 0; }
.markdown a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spacePulse { 50% { transform: scale(.82); opacity: .55; } }
@keyframes dots {
  0%, 24% { content: "."; }
  25%, 49% { content: ".."; }
  50%, 74% { content: "..."; }
  75%, 100% { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .space-ring-tunnel { filter: none; }
}

.composer {
  grid-row: 3;
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px max(14px, 5%) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
  touch-action: pan-y;
}
.attachment-tray { order: 1; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
#attachBtn,
#voiceBtn,
#voiceTranscriptionStatus,
#messageInput,
#sendBtn { order: 2; }
.attachment-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -9999px; }
.attachment-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-solid); color: var(--text); padding: 8px 10px; max-width: min(100%, 520px); box-sizing: border-box; overflow: hidden; }
.attachment-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); color: var(--accent); font-size: 11px; font-weight: 800; }
.attachment-card.uploading { opacity: 0.86; }
.attachment-card-icon.spinner::before { content: ''; width: 16px; height: 16px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-top-color: var(--accent); animation: attachment-spin 0.8s linear infinite; }
.attachment-card-remove:disabled { opacity: 0.35; cursor: default; }
@keyframes attachment-spin { to { transform: rotate(360deg); } }
.attachment-card-body { display: flex; flex-direction: column; min-width: 0; }
.attachment-card strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.attachment-card p { max-width: 100%; margin: 4px 0 0; color: var(--muted); font-size: calc(12px * var(--message-zoom)); line-height: 1.35; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.attachment-card-remove { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.message-attachments { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 100%; }
.attachment-card.message { width: 100%; align-items: flex-start; flex-direction: column; }
textarea {
  flex: 1; resize: none; max-height: 180px; min-height: 46px;
  border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px;
  background: var(--panel-solid); color: var(--text); outline: none;
}
.send,
.attachment-btn,
.voice-btn {
  width: 46px; height: 46px; border-radius: 16px; border: 0;
  color: white; font-size: 22px; line-height: 1; font-weight: 800;
}
.send { background: var(--accent); }
.send.stopping { background: #ef4444; font-size: 18px; }
.attachment-btn,
.voice-btn { background: var(--panel-solid); color: var(--muted); border: 1px solid var(--border); font-size: 19px; flex: 0 0 auto; }
.attachment-btn { font-size: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.voice-btn.recording { background: #ef4444; color: white; border-color: #ef4444; animation: voicePulse 1.1s ease-in-out infinite; }
.voice-btn.transcribing { background: color-mix(in srgb, var(--accent) 28%, var(--panel-solid)); color: var(--text); }
.voice-btn:disabled { opacity: .55; }
.composer-action-sheet-backdrop {
  position: fixed; inset: 0; z-index: 19;
  background: color-mix(in srgb, #000 20%, transparent);
}
.composer-action-sheet {
  position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--keyboard-inset, 0px) + max(12px, env(safe-area-inset-bottom)));
  z-index: 20; display: grid; gap: 8px; padding: 14px;
  border: 1px solid var(--border); border-radius: 24px;
  background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
  box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.composer-action-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 4px; }
.composer-action-sheet header div { display: grid; gap: 2px; min-width: 0; }
.composer-action-sheet header small { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.composer-action-sheet header strong { font-size: 17px; letter-spacing: -.02em; }
#closeComposerActionSheetBtn { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--muted); font-size: 26px; line-height: 1; }
.composer-action-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; }
.composer-action-row:hover, .composer-action-row:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.composer-action-row > span:last-child { display: grid; gap: 2px; min-width: 0; }
.composer-action-row strong { font-size: 15px; }
.composer-action-row small { color: var(--muted); font-size: 12px; }
.composer-action-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid)); color: var(--accent); font-weight: 900; }
.voice-transcription-status { align-self: center; color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.voice-transcription-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: currentColor; animation: voicePulse 1.1s ease-in-out infinite; vertical-align: 1px; }
@keyframes voicePulse { 50% { transform: scale(.94); opacity: .82; } }
.attachment-card.image,
.attachment-card.audio,
.attachment-card.video { align-items: flex-start; }
.attachment-card-thumb { display: block; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); flex: 0 0 auto; }
.attachment-card-thumb.pending { width: 56px; height: 42px; }
.attachment-card-thumb.message { width: 100%; max-height: 260px; object-fit: contain; }
.attachment-image-link { display: block; width: 100%; }
.attachment-card-actions { display: flex; gap: 12px; flex-wrap: wrap; font-size: calc(12px * var(--message-zoom)); }
.attachment-image-link { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.attachment-card-actions a,
.attachment-card-actions button { color: var(--accent); text-decoration: none; font: inherit; font-weight: 700; border: 0; background: transparent; padding: 0; cursor: pointer; }
.attachment-card-actions a:hover,
.attachment-card-actions button:hover { text-decoration: underline; }
.attachment-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(2, 6, 23, .88); }
.attachment-lightbox[hidden] { display: none; }
.attachment-lightbox img { max-width: min(100%, 96vw); max-height: min(100%, 92vh); object-fit: contain; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.attachment-lightbox-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(15, 23, 42, .72); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.attachment-lightbox-close:hover,
.attachment-lightbox-close:focus-visible { background: rgba(30, 41, 59, .95); outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
.attachment-card-audio,
.attachment-card-video { display: block; max-width: 100%; min-width: 0; }
.attachment-card-audio.pending { width: 220px; height: 32px; }
.attachment-card-audio.message { width: 100%; }
.attachment-card-video.pending { width: min(260px, 100%); max-height: 180px; border-radius: 12px; background: #050816; }
.attachment-card-video.message { width: 100%; max-height: 360px; border-radius: 12px; background: #050816; }