/* The conversation: airy, a page rather than a chat window. Column 720 px, messages 26 px apart. */

.view.is-conversation {
  position: relative;
}
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 32px;
  scroll-padding-bottom: 24px;
}
.column {
  width: 100%;
  max-width: var(--w-conversation);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--s-message);
  padding: 24px 0 22px;
  font-size: var(--t-conversation);
  line-height: 1.55;
}
.feed-empty {
  color: var(--ink-quiet);
  font-size: var(--t-meta);
  text-align: center;
}

/* ------------------------------------------------------------------------------------------ */
/* You: a bubble, right-aligned, no avatar. */

.msg {
  position: relative;
  animation: mx-rise var(--d-message) var(--ease-spring) both;
}
.msg.you {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.bubble {
  /* Focusable for the keyboard; the ring keeps the bubble's own shape. */
  --focus-radius: var(--r-bubble);
  max-width: 78%;
  background: var(--surface-you);
  border-radius: var(--r-bubble);
  padding: 14px 20px;
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.bubble-text {
  white-space: pre-wrap;
}
.bubble-quote {
  border-left: 2px solid var(--accent);
  padding: 0 0 0 10px;
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: var(--t-meta);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg.you.is-sending .bubble,
.msg.you.is-queued .bubble {
  opacity: 0.55;
}
.msg-status {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-placeholder);
  margin-top: -2px;
}
.msg-status.is-failed {
  color: var(--danger);
}
.msg-status .link.is-danger {
  text-decoration: underline;
  font-weight: 400;
}
.msg-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  max-width: 86%;
}

/* The floating pill on your message: Copy · Edit · Quote · Delete. */
.msg-pill {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 24px -10px rgba(30, 26, 22, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition:
    opacity var(--d-micro) var(--ease-enter),
    transform var(--d-micro) var(--ease-enter),
    visibility 0s linear var(--d-micro);
}
.msg.you:hover .msg-pill,
.msg.you:focus-within .msg-pill,
.msg.you.show-actions .msg-pill {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.msg-pill .msg-action {
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.msg-pill .msg-action:hover {
  background: var(--ground-sunken);
}

/* Motrix: no bubble; its words sit on the page. */
.msg.them {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: -2px;
  opacity: 0;
  transition: opacity var(--d-micro) var(--ease-enter);
}
.msg.them:hover .msg-actions,
.msg.them:focus-within .msg-actions,
.msg.them.is-last .msg-actions {
  opacity: 1;
}
@media (hover: none) {
  .msg-actions {
    opacity: 1;
  }
}
.msg-action {
  --focus-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-small);
  color: var(--ink-quiet);
  min-height: 28px;
  transition: color var(--d-micro) var(--ease-enter);
}
.msg-action:hover {
  color: var(--ink);
}
.msg-action.is-danger {
  color: var(--danger);
}

/* Words arriving: blocks rise and fade, 40 ms apart — an entrance, not a pretend stream. */
.prose > .arrive {
  animation: mx-rise var(--d-message) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* ------------------------------------------------------------------------------------------ */
/* Markdown in a reply */

.prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.prose p {
  margin: 0;
}
.prose strong {
  font-weight: 600;
}
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose .md-h {
  margin: 6px 0 -4px;
}
.prose .md-h1,
.prose .md-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.prose .md-h3,
.prose .md-h4 {
  font-size: var(--t-conversation);
  font-weight: 600;
}
.prose .md-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prose .md-list.is-loose {
  gap: 12px;
}
.prose .md-list li::marker {
  color: var(--ink-quiet);
}
.prose .md-li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose .md-list .md-list {
  margin-top: 6px;
}
.prose li.md-task {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-left: -22px;
}
.prose li.md-task .check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  margin-top: 3px;
}
.prose .md-quote {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 4px 0;
  width: 100%;
}
.md-code-inline {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--ground-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-chip);
  padding: 1px 6px;
}
:root[data-theme='dark'] .md-code-inline {
  background: var(--surface-raised);
}
.md-image-link::before {
  content: '▣ ';
  font-size: 0.9em;
}

/* Code is the only monospace in the product, and it is labelled by what it is for. */
.md-code {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  overflow: hidden;
}
.md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-small);
  color: var(--ink-quiet);
}
.md-code-head .md-copy {
  font-size: var(--t-small);
}
.md-pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--t-code);
  line-height: 1.6;
  color: var(--ink);
  tab-size: 2;
}

/* A table, as the design's summary card: raised, lined, figures that line up. */
.md-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  overflow-x: auto;
  background: var(--surface-raised);
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.md-table th {
  text-align: left;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-placeholder);
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.md-table td {
  padding: 9px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.md-table tr:last-child td {
  border-bottom: 0;
}
.md-table td.is-num {
  white-space: nowrap;
}
.md-table tr.is-total td {
  font-weight: 600;
  background: var(--ground);
  padding-top: 10px;
  padding-bottom: 10px;
}
.md-table tr.is-total td:not(:first-child):not(.is-num) {
  font-weight: 400;
  color: var(--ink-quiet);
}

/* An address on its own line: a link card. */
.md-linkcard {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface-raised);
  text-decoration: none !important;
  color: var(--ink);
  max-width: 560px;
}
.md-linkcard:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.md-linkcard-thumb {
  width: 96px;
  flex: none;
  background: linear-gradient(135deg, var(--avatar-you), var(--surface-selected));
}
.md-linkcard-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  min-width: 0;
}
.md-linkcard-host {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-quiet);
}
.md-linkcard-title {
  font-size: var(--t-body);
  font-weight: 500;
}
.md-linkcard-url {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------ */
/* Files */

.file-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--r-control);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none !important;
  max-width: 100%;
}
a.file-card:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.file-glyph {
  width: 34px;
  height: 42px;
  flex: none;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 5px;
}
:root[data-theme='dark'] .file-glyph {
  background: var(--line-soft);
}
.file-glyph span {
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}
.file-glyph span:nth-child(2) {
  width: 70%;
}
.file-glyph span:nth-child(4) {
  width: 55%;
}
.file-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.file-name {
  font-size: calc(14.5px * var(--ts));
  font-weight: 500;
}
.file-meta {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-quiet);
}
.attach-image {
  position: relative;
  display: block;
  width: 220px;
  height: 150px;
  border-radius: var(--r-control);
  overflow: hidden;
  background: linear-gradient(135deg, var(--avatar-you), var(--surface-selected));
}
.attach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attach-image-name {
  position: absolute;
  left: 8px;
  bottom: 7px;
  font-size: calc(11.5px * var(--ts));
  color: #fff;
  background: rgba(30, 26, 22, 0.45);
  padding: 2px 7px;
  border-radius: 999px;
}

/* ------------------------------------------------------------------------------------------ */
/* Notes, errors, earlier answers */

/* What a reply used, above it: a raised pill with the accent tick, as the design draws it. */
.tool-line {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 8px 14px 8px 12px;
  border-radius: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-size: calc(14px * var(--ts));
  color: var(--ink-soft);
}
.tool-tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.system-note {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(13.5px * var(--ts));
  color: var(--ink-quiet);
  text-align: center;
}
.system-note::before,
.system-note::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.stopped-note {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  margin-top: -10px;
}
.error-card {
  padding: 16px 20px;
  border-radius: var(--r-control);
  border: 1px solid var(--accent-line);
  background: var(--surface-raised);
  font-size: var(--t-body);
}
.earlier-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: -10px;
}
.earlier-toggle {
  --focus-radius: 999px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-quiet);
}
.earlier-toggle svg {
  transition: transform var(--d-micro) var(--ease-enter);
}
.earlier-toggle.is-open svg {
  transform: rotate(180deg);
}
.earlier {
  opacity: 0.66;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.earlier .msg-actions {
  display: none;
}

/* Editing in place */
.msg.you.is-editing {
  width: 100%;
}
.edit-box {
  width: 100%;
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  background: var(--surface-raised);
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edit-input {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  font-size: var(--t-conversation);
  line-height: 1.55;
  color: var(--ink);
  caret-color: var(--accent);
  outline: none;
  box-shadow: none !important;
}
.edit-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grow {
  flex: 1;
  min-width: 0;
}

/* ------------------------------------------------------------------------------------------ */
/* The thinking indicator */

.thinking {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: calc(16px * var(--ts));
  color: var(--ink-soft);
  animation: mx-fade var(--d-fade) var(--ease-enter) both;
}
.thinking .mark {
  --mark: 26px;
}
.thinking-clock {
  font-size: var(--t-meta);
  color: var(--ink-placeholder);
}
.thinking.is-fading {
  animation: mx-fade-out var(--d-fade) var(--ease-exit) both;
}

/* ------------------------------------------------------------------------------------------ */
/* The composer */

.dock {
  flex: none;
  padding: 0 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dock > * {
  width: 100%;
  max-width: var(--w-conversation);
  margin: 0 auto;
}
.dock.is-start {
  padding: 0;
}
.dock-slot:empty {
  display: none;
}
.composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 10px 10px 10px 12px;
  box-shadow: var(--e-lifted);
  transition: border-color var(--d-micro) var(--ease-enter);
}
.composer.is-tall {
  border-radius: 22px;
}
.composer:focus-within {
  border-color: var(--line-strong);
}
.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.composer-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  resize: none;
  padding: 7px 4px;
  font-size: calc(17px * var(--ts));
  line-height: 1.45;
  color: var(--ink);
  caret-color: var(--accent);
  max-height: calc(17px * var(--ts) * 1.45 * 8 + 14px);
  overflow-y: hidden;
  box-shadow: none !important;
}
.composer-input::placeholder {
  color: var(--ink-placeholder);
}
.composer-input:disabled {
  cursor: default;
}
.composer.is-start {
  border-radius: 26px;
  padding: 18px 18px 12px;
  gap: 12px;
  box-shadow: var(--e-lifted-strong);
}
.composer.is-start .composer-input {
  padding: 0 6px;
  min-height: calc(17px * var(--ts) * 1.45);
}
.composer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.composer-tools-left {
  display: flex;
  gap: 4px;
}
#mic.is-listening {
  background: var(--accent-wash);
  color: var(--accent-text);
}
#mic.is-listening::after {
  content: '';
  position: absolute;
}
.send-btn.is-stop {
  background: var(--accent);
  color: var(--on-accent);
}
.composer.is-paused {
  background: var(--ground-sunken);
  box-shadow: none;
}
.composer-note {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-quiet);
  padding: 0 6px;
}

/* Something dragged over: "Drop to attach". */
.drop-hint {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px dashed var(--accent);
  background: var(--accent-wash);
  color: var(--accent-text);
  font-size: var(--t-control);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.composer.is-dragging .drop-hint {
  display: flex;
}

/* Attachment chips above the text. */
.attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 0;
}
.attach-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  background: var(--ground);
  border: 1px solid var(--line);
  overflow: hidden;
  max-width: 260px;
}
.attach-chip.is-error {
  border-color: var(--accent-line);
}
.attach-thumb {
  width: 28px;
  height: 34px;
  flex: none;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 4px;
}
:root[data-theme='dark'] .attach-thumb {
  background: var(--line-soft);
}
.attach-thumb span {
  height: 2px;
  background: var(--line-strong);
}
.attach-thumb.is-image {
  background-size: cover;
  background-position: center;
  padding: 0;
  border-color: transparent;
}
.attach-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.attach-name {
  font-size: var(--t-button);
  font-weight: 500;
}
.attach-meta {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-quiet);
}
.attach-chip.is-ready .attach-meta {
  color: var(--success);
}
.attach-chip.is-error .attach-meta {
  color: var(--danger);
}
.attach-x {
  --focus-radius: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-quiet);
  flex: none;
}
.attach-x:hover {
  background: var(--surface-selected);
  color: var(--ink);
}
.attach-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  width: 0;
  transition: width var(--d-fade) linear;
}
.attach-chip:not(.is-uploading) .attach-progress {
  display: none;
}

/* Banners that dock above the shell, one at a time. */
.dock-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-control);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-size: calc(14.5px * var(--ts));
  line-height: 1.45;
  animation: mx-rise var(--d-fade) var(--ease-enter) both;
}
.dock-banner.is-warning {
  border-color: var(--accent-line);
  box-shadow: var(--e-lifted);
}
.dock-banner.is-quote {
  background: var(--ground-sunken);
  border-color: transparent;
  color: var(--ink-soft);
  padding: 10px 10px 10px 14px;
}
.quote-bar {
  width: 2px;
  align-self: stretch;
  background: var(--accent);
  border-radius: 1px;
}
.quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-actions {
  display: flex;
  gap: 16px;
  flex: none;
}

/* ------------------------------------------------------------------------------------------ */
/* Cards in the conversation: permission, build, pause */

.card-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-placeholder);
}
.card-label.is-accent {
  color: var(--accent-text);
}
.card-label .dot-state {
  width: 7px;
  height: 7px;
}
.pulse-once {
  animation: mx-pulse 900ms var(--ease-enter) 280ms 1 both;
}

.permission-card {
  background: var(--surface-raised);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
  padding: 26px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 18px 48px -24px color-mix(in oklch, var(--accent) 45%, transparent);
  animation: mx-rise-12 var(--d-permission) var(--ease-spring) both;
}
.permission-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 32px;
  margin: 0;
  font-size: var(--t-body);
}
.permission-details dt {
  color: var(--ink-quiet);
}
.permission-details dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.risk-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--accent-wash);
  font-size: var(--t-body);
}
.risk-line .alert-dot {
  margin-top: 1px;
}
.permission-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.permission-quiet {
  flex: 1;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--t-meta);
}
.permission-actions.is-stacked {
  flex-direction: column;
  align-items: stretch;
}
.permission-actions.is-stacked .btn {
  width: 100%;
  min-height: 48px;
}
.permission-actions.is-stacked .permission-quiet {
  justify-content: center;
}
.permission-answered {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-meta);
  color: var(--ink-quiet);
  animation: mx-fade var(--d-fade) var(--ease-enter) both;
}
.permission-answered .dot-state[data-decision='deny'] {
  background: var(--ink-disabled);
}
.permission-answered .dot-state:not([data-decision='deny']) {
  background: var(--success);
}
.sheet-slot:empty {
  display: none;
}
.permission-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  padding: 60px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, color-mix(in oklch, var(--accent) 16%, var(--ground)) 20%, transparent);
  animation: mx-sheet-in var(--d-permission) var(--ease-enter) both;
}
.permission-sheet .permission-card {
  border-radius: 24px;
  padding: 22px 20px 18px;
}

.build-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--t-body);
}
.build-card.is-working {
  border-color: var(--accent-line);
}
.build-label-mark {
  display: inline-flex;
}
.build-label-mark .mark {
  --mark: 18px;
}
.build-brief {
  color: var(--ink-soft);
}
.build-from {
  margin-top: -6px;
  color: var(--ink-quiet);
  overflow-wrap: anywhere;
}
.build-brief[hidden] + .build-from {
  margin-top: 0;
}
.step-name {
  color: var(--ink);
}
.step-sub {
  color: var(--ink-quiet);
}
.build-step.is-waiting .step-name {
  color: var(--ink-quiet);
}
.build-asks:empty,
.build-decided:empty {
  display: none;
}
.build-decided {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.build-decisions {
  margin: 0;
  padding: 12px 14px 12px 32px;
  border-radius: 12px;
  background: var(--ground);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-soft);
}
.build-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.build-step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.build-step .mark {
  --mark: 18px;
}
.build-step.is-waiting {
  color: var(--ink-quiet);
}
.step-wait {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  flex: none;
}
.build-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.build-foot:empty {
  display: none;
}
.build-foot .btn[aria-pressed='true'] {
  background: var(--surface-selected);
}
.build-reason {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-soft);
}
.build-problem {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger);
}
.build-panel:empty {
  display: none;
}
.artifact {
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.artifact-title {
  font-size: var(--t-body);
  font-weight: 600;
}
.req {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ground);
}
.req-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.req-criteria {
  margin: 2px 0 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: var(--t-meta);
}

.pause-card {
  background: var(--surface-raised);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: mx-rise-12 var(--d-permission) var(--ease-spring) both;
}
.pause-card .card-label {
  color: var(--accent-text);
}
.pause-card .spend-bar {
  height: 6px;
  border-radius: 3px;
}
.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.pause-card.is-waiting .pause-actions .btn {
  display: none;
}

/* Offline: the same breathing mark, a banner at the top of the conversation. */
.offline-slot:empty {
  display: none;
}
.offline-slot {
  padding: 0 32px;
}
.offline-banner {
  max-width: var(--w-conversation);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-control);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-size: calc(14.5px * var(--ts));
  animation: mx-rise var(--d-fade) var(--ease-enter) both;
}

/* ------------------------------------------------------------------------------------------ */
/* Loading, shaped like what is coming, with one slow shimmer. */

.sk {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-selected);
  border-radius: 8px;
}
:root[data-theme='dark'] .sk {
  background: var(--surface-raised);
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--surface-raised) 70%, transparent), transparent);
  animation: mx-shimmer 1.8s var(--ease-move) infinite;
}
.feed-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
}
.sk-bubble {
  align-self: flex-end;
  width: 58%;
  height: 64px;
  border-radius: var(--r-bubble);
}
.sk-bubble.is-short {
  width: 40%;
  height: 44px;
}
.sk-line {
  height: 12px;
  border-radius: 6px;
}
.sk-block {
  height: 120px;
  border-radius: var(--r-control);
}
.sk-caption {
  text-align: center;
  font-size: var(--t-meta);
  color: var(--ink-quiet);
}

.state-card {
  margin: auto;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 0;
}
.alert-dot.is-soft {
  width: 40px;
  height: 40px;
  font-size: 18px;
  background: var(--accent-wash);
  color: var(--accent-text);
}

/* ------------------------------------------------------------------------------------------ */
/* Start something */

.start {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 48px 60px;
  gap: 34px;
}
.start-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.start-hero .mark-solid {
  margin-bottom: 10px;
}
.start-greeting {
  font-size: calc(42px * var(--ts));
  line-height: 1.1;
}
.start-sub {
  font-size: calc(18px * var(--ts));
  color: var(--ink-quiet);
}
.start .dock {
  width: 100%;
  max-width: var(--w-conversation);
}
.start-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 760px;
}
.topbar.is-start {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  background: transparent;
}

/* Picking a conversation to bring in. */
.pick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -8px;
}
.pick-row {
  --focus-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-row);
  text-align: left;
  min-width: 0;
}
.pick-row:hover {
  background: var(--ground-sunken);
}
.pick-title {
  font-weight: 500;
  max-width: 100%;
}

/* ------------------------------------------------------------------------------------------ */
/* Phone */

@media (max-width: 859px) {
  .scroll {
    padding: 0 16px;
  }
  .dock {
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  }
  .offline-slot {
    padding: 0 10px;
  }
  .bubble {
    max-width: 88%;
    padding: 12px 16px;
  }
  .composer {
    border-radius: 24px;
  }
  .send-btn {
    width: 44px;
    height: 44px;
  }
  .permission-card {
    padding: 20px;
  }
  .permission-details {
    gap: 6px 18px;
  }
  .start {
    padding: 64px 16px calc(12px + env(safe-area-inset-bottom));
    justify-content: flex-end;
    gap: 16px;
  }
  .start-hero {
    margin: auto 0;
  }
  .start-greeting {
    font-size: calc(30px * var(--ts));
  }
  /* The start page's row of starting points, not every row of chips: the first run's names wrap. */
  .start .start-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 2px;
    order: 2;
  }
  .start .dock {
    order: 3;
  }
  .start .start-chips .chip {
    white-space: nowrap;
  }
  .msg-pill {
    right: 0;
  }
  .md-table th,
  .md-table td {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Starting points say less on a phone, as the design's phone does. */
.chip-short {
  display: none;
}
@media (max-width: 859px) {
  .chip-long {
    display: none;
  }
  .chip-short {
    display: inline;
  }
}