/* Two rooms on purpose: the chat is what a customer sees, the black side is what the team sees. */
:root {
  --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --paper: #ffffff;
  --wash: #eef2f0;
  --line: #d6dfda;
  --ink: #14201c;
  --muted: #52625c;
  --brand: #8338ec;
  --brand-dark: #c9b8ff; /* Brand-coloured text: light, because the page is black. */
  --brand-tint: #2a2145;

  --night: #000000;
  --night-card: #131218;
  --night-line: #2c2a33;
  --night-ink: #f3f2f6;
  --night-muted: #aeaab8;
  --violet: #a98bff;
  --warn: #ffb86b;
  --glass: rgb(23 21 29 / 0.78); /* Cards over the moving layers, always with the blur below. */

  /* Usnadnění: larger text scales every font size on the customer's side by this. Buttons are 44 px
     anyway, a size a shaky hand can hit. */
  --text: 1;
}

:root[data-text="big"] { --text: 1.25; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
}

h1, h2, h3, p, dl, dd { margin: 0; }

button, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

button:disabled, textarea:disabled { cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat :focus-visible, .trail :focus-visible { outline-color: var(--brand-dark); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Simulation notice, with the choice of business and language */
.bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 5px 16px;
  background: var(--night);
  color: var(--night-ink);
}

.sim { flex: 1 1 320px; min-width: 0; font-size: calc(14px * var(--text)); line-height: 1.35; }
/* The word that must not be missed: the one filled shape in the bar. */
.sim strong { padding: 1px 7px; border-radius: 6px; background: var(--brand-dark); color: #000; }
/* Only the public demo shows it (chat.js). */
.privacy-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.switches { flex: none; display: flex; gap: 8px; }

.switch { display: inline-flex; border: 1px solid var(--night-line); border-radius: 8px; overflow: hidden; }

.switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--night-ink);
  font-size: 14px;
  font-weight: 600;
}

.switch button[aria-pressed="true"] { background: var(--brand-dark); color: #000; }
.switch button:hover:not([aria-pressed="true"]) { background: rgb(255 255 255 / 0.1); }
.switch button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -3px; }
.switch button[aria-pressed="true"]:focus-visible { outline-color: #000; }

.voice-hint { flex: 1 0 100%; font-size: calc(13px * var(--text)); line-height: 1.3; text-align: right; }

/* Usnadnění: a button in the bar opens a row of choices under it. */
.ease-toggle {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--night-line);
  border-radius: 8px;
  background: transparent;
  color: var(--night-ink);
  font-size: calc(14px * var(--text));
  font-weight: 600;
}

.ease-toggle:hover { background: rgb(255 255 255 / 0.1); }
.ease-toggle[aria-expanded="true"] { border-color: var(--brand-dark); }
.ease-toggle:focus-visible { outline-color: var(--brand-dark); }

.ease { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 6px 0 8px; }
.ease-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ease-label { font-size: calc(14px * var(--text)); color: var(--night-muted); }
.ease .switch button { font-size: calc(14px * var(--text)); font-weight: 550; }

/* Phone tabs */
.tabs { display: none; flex: none; background: var(--night); padding: 8px 16px; gap: 8px; }

.tab {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--night-line);
  border-radius: 10px;
  background: transparent;
  color: var(--night-muted);
  font-size: calc(15px * var(--text));
  font-weight: 600;
}

.tab[aria-pressed="true"] { background: var(--night-ink); border-color: var(--night-ink); color: #000; }
.tab:focus-visible { outline-color: var(--brand-dark); }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--brand-dark);
  vertical-align: 1px;
}

/* Layout */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 34%);
  /* A still of the background: all a phone or a slow PC shows, and what waits while the live one loads. */
  background: var(--night) url("/sky.webp") center / cover no-repeat;
}

/* The customer's side is black (the owner's ask, 2026-11-06). The colours change only inside this
   column: the bar, the tabs and the black side keep theirs. The accent is each business's `brand`, violet
   in both, which is also a colour of the orb. The greys lean the same way. The column itself is
   see-through: the page's black, or the filaments, show behind it. */
.chat {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  --paper: #000000;
  --wash: #17151d;
  --line: #2a2733;
  --ink: #f3f2f6;
  --muted: #b9b4c7;
  --over-light: rgb(0 0 0 / 0.6); /* Behind small text that lies straight on the filaments. */
  color: var(--ink);
  font-size: calc(16px * var(--text));
}

/* The layers share one ground, with no lines between them. */
.chat .ghost { border-color: #55506a; }
.chat .chat-head, .chat .dock { border-color: transparent; }

/* Chat header */
.chat-head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 10px 9px 12px;
  border-radius: 5px 5px 5px 1px;
  background: #fff;
}

.chat-head h1 { font-size: calc(16px * var(--text)); line-height: 1.25; font-weight: 650; }
.brand-sub { font-size: calc(13px * var(--text)); line-height: 1.3; color: var(--muted); }

.ghost {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: calc(14px * var(--text));
  font-weight: 550;
}

.ghost:hover:not(:disabled) { background: var(--wash); }

/* Form progress: a card like the bubbles, because a band across the column would cut the background. */
.progress {
  flex: none;
  margin: 0 20px 4px;
  padding: 8px 14px 10px;
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.progress-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: calc(13.5px * var(--text));
  font-weight: 550;
  color: var(--brand-dark);
}

.progress-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 18%, transparent); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 2px; background: var(--brand); transition: width 0.25s ease; }

/* Messages */
.log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.log:focus-visible { outline-offset: -2px; }

.msg {
  position: relative; /* Keeps each hidden .sr-only label in the log, or it grows the whole page. */
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg.user { align-items: flex-end; }
.msg.bot { align-items: flex-start; }
.msg.note { align-items: center; }

.bubble {
  max-width: min(100%, 620px);
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg.user .bubble {
  background: color-mix(in srgb, var(--brand) 90%, transparent);
  color: #fff;
  border-bottom-right-radius: 5px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.msg.bot .bubble {
  background: var(--glass);
  border-bottom-left-radius: 5px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.msg.note .bubble {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: calc(14px * var(--text));
  text-align: center;
}

/* Sources under an answer */
.sources { max-width: min(100%, 620px); font-size: calc(14px * var(--text)); color: var(--muted); }

.sources summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--over-light);
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sources summary::-webkit-details-marker { display: none; }

.sources summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.sources[open] summary::before { transform: rotate(90deg); }

.source { margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--brand); background: var(--paper); }
.source-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.source-id { font-family: var(--mono); font-size: calc(12.5px * var(--text)); }
.source-quote { margin-top: 2px; overflow-wrap: anywhere; }
.source-link { display: inline-block; margin-top: 4px; color: var(--brand-dark); text-underline-offset: 3px; overflow-wrap: anywhere; }
.source-date { font-size: calc(13px * var(--text)); }

/* Care places from a provider register, under an answer */
.places { max-width: min(100%, 620px); margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--brand);
  background: var(--paper); font-size: calc(14px * var(--text)); color: var(--muted); }
.places-title { font-size: inherit; font-weight: 600; color: var(--ink); }
.places-list { margin: 6px 0 0; padding-left: 22px; }
.place { margin-top: 6px; overflow-wrap: anywhere; }
.place-name { font-weight: 600; color: var(--ink); }
.place-line a { color: var(--brand-dark); text-underline-offset: 3px; }
.places-note { margin-top: 8px; font-size: calc(13px * var(--text)); }

/* How to get it done: numbered steps with links to the original pages and forms */
.steps { max-width: min(100%, 620px); margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--brand);
  background: var(--paper); font-size: calc(14px * var(--text)); color: var(--ink); }
.steps-title { font-size: inherit; font-weight: 600; }
.steps-list { margin: 6px 0 0; padding-left: 22px; }
.step { margin-top: 6px; overflow-wrap: anywhere; }
.step-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.step-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 3px 12px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--brand-dark); text-decoration: none;
  overflow-wrap: anywhere; }
.step-link:hover, .step-link:focus-visible { border-color: var(--brand-dark); text-decoration: underline;
  text-underline-offset: 3px; }
.step-kind { font-size: calc(12px * var(--text)); color: var(--muted); white-space: nowrap; }
.steps-note { margin-top: 8px; font-size: calc(13px * var(--text)); color: var(--muted); }

/* Hand-over notice */
.handover {
  max-width: min(100%, 620px);
  padding: 8px 12px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: calc(14px * var(--text));
  overflow-wrap: anywhere;
}

/* Typing */
.typing { display: inline-flex; gap: 5px; align-items: center; height: 24px; }

.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}

.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }

@keyframes blink {
  0%, 70%, 100% { opacity: 0.3; }
  35% { opacity: 1; }
}

/* Waiting for an answer: what the turn is doing, a bar, the seconds so far and about how long is left. */
.bubble.wait { width: min(100%, 380px); white-space: normal; }
.wait-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.wait-head .typing { flex: none; }
.wait-stage { font-size: calc(14.5px * var(--text)); font-weight: 550; color: var(--ink); overflow-wrap: anywhere; }
.wait-track {
  height: 6px;
  margin: 8px 0 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  overflow: hidden;
}
.wait-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
.wait-times {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: calc(13px * var(--text));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wait-hint { margin-top: 6px; font-size: calc(13px * var(--text)); color: var(--muted); }

/* The orb of a spoken conversation, on the chat's own ground, where it can glow. */
.orb {
  flex: none;
  display: grid;
  justify-items: center;
  padding: 6px 20px 10px;
}

/* The ball fills about two thirds of its canvas, so the margins take back the empty rim. It leans in
   while someone is talking. */
.orb-ring {
  position: relative;
  width: 190px;
  height: 190px;
  margin: -22px 0 -18px;
  pointer-events: none;
  user-select: none;
  transition: transform 0.35s ease;
}

.orb[data-state="speaking"] .orb-ring, .orb[data-state="listening"] .orb-ring { transform: scale(1.22); }
.orb-ring canvas { display: block; width: 100%; height: 100%; }
/* The compiled effects bring Tailwind's class names but no stylesheet, so these stand in. */
.orb-ring > div { position: relative; }
.orb-ring > div > div { position: absolute; inset: 0; }
.orb p { min-height: 20px; padding: 0 8px; border-radius: 6px; background: var(--over-light); font-size: calc(13.5px * var(--text)); line-height: 1.5; color: var(--night-muted); }

/* Quick answers and message box */
.dock {
  flex: none;
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.chips, .composer { width: 100%; max-width: 760px; margin: 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:not(:empty) { margin-bottom: 10px; }

.chip {
  min-height: 44px;
  max-width: 100%;
  padding: 6px 14px;
  border: 1px solid var(--brand);
  border-radius: 22px;
  background: var(--paper);
  color: var(--brand-dark);
  font-size: calc(14.5px * var(--text));
  font-weight: 550;
  line-height: 1.25;
  text-align: left;
}

.chip:hover:not(:disabled) { background: var(--brand-tint); }
.chip.quiet { border-color: var(--line); color: var(--muted); }
.chip:disabled { opacity: 0.5; }

.composer { display: flex; align-items: flex-end; gap: 8px; }

textarea {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  max-height: min(140px, 30dvh);
  padding: 10px 13px;
  border: 1px solid #6f6a80;
  border-radius: 12px;
  background: var(--paper);
  font-size: calc(16px * var(--text));
  line-height: 1.5;
  resize: none;
}

textarea::placeholder { color: var(--muted); opacity: 1; }
textarea:disabled { background: var(--wash); }

.send {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 650;
}

.send:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 80%, #000); }
.send:disabled { background: #4a4558; }

.mic {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #6f6a80;
  border-radius: 12px;
  background: var(--paper);
  color: var(--brand-dark);
}

.mic svg, .play svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.mic:hover:not(:disabled) { background: var(--brand-tint); }
.mic:disabled { opacity: 0.5; }

.mic[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  animation: listening 1.4s ease-in-out infinite;
}

@keyframes listening { 50% { box-shadow: 0 0 0 5px var(--brand-tint); } }

/* Under each answer, like the play button in a chat app. */
.play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border: 0;
  border-radius: 8px;
  background: var(--over-light);
  color: var(--muted);
}

.play:hover { background: var(--wash); color: var(--ink); }
.play .if-on, .play[aria-pressed="true"] .if-off { display: none; }
.play[aria-pressed="true"] .if-on { display: block; }
.play[aria-pressed="true"] { color: var(--brand-dark); }
body[data-speak="off"] .play { display: none; }

/* Thumbs up or down under an answer, as under a video: an outline until pressed, then filled. */
.rate { display: flex; align-items: center; gap: 2px; margin-top: 2px; }

.rate button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--over-light);
  color: var(--muted);
  cursor: pointer;
}

.rate button:hover { background: var(--wash); color: var(--ink); }
.rate svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rate .rate-down svg { transform: rotate(180deg); }
.rate button[aria-pressed="true"] { color: var(--brand-dark); }
.rate button[aria-pressed="true"] svg { fill: currentColor; }
.rate-note { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--over-light); font-size: calc(13px * var(--text)); color: var(--muted); }
.rate-note:empty { display: none; }

/* The black side */
.trail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: var(--night);
  color: var(--night-ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trail-head h2 { font-size: 18px; line-height: 1.3; font-weight: 650; }
.trail-head p { margin-top: 6px; font-size: 14.5px; color: var(--night-muted); }

.meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  font-size: 13.5px;
}

.meta dt { color: var(--night-muted); }
.meta dd { overflow-wrap: anywhere; }
.meta .on { color: var(--brand-dark); }

.turns { display: flex; flex-direction: column; gap: 10px; }
.turns-empty { font-size: 14.5px; color: var(--night-muted); }

.turn {
  padding: 12px 14px;
  border: 1px solid var(--night-line);
  border-radius: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.turn-head { display: flex; align-items: baseline; gap: 8px; }
.turn-no { flex: none; font-family: var(--mono); font-size: 12.5px; color: var(--night-muted); }
.turn-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

.turn.latest { border-color: var(--brand-dark); }

.rows {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 4px 10px;
  font-size: 13.5px;
  line-height: 1.4;
}

.rows dt { color: var(--night-muted); }
.rows dd { overflow-wrap: anywhere; }
.rows code { font-family: var(--mono); font-size: 12.5px; color: var(--violet); }
.rows .bad { color: var(--warn); }
.rows .good { color: var(--brand-dark); }

.hits { margin: 0; padding: 0; list-style: none; }

.packet { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--night-line); }
.packet h3 { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--brand-dark); }

.packet details { margin-top: 8px; font-size: 13.5px; }
.packet summary { cursor: pointer; color: var(--night-muted); }

.transcript { margin: 6px 0 0; padding: 0; list-style: none; color: var(--night-muted); }
.transcript li { margin-top: 3px; overflow-wrap: anywhere; }
.transcript b { font-weight: 600; color: var(--night-ink); }

.trail-foot { margin-top: auto; font-size: 12.5px; line-height: 1.4; color: var(--night-muted); }

/* Two layers of light lie under the columns. The filaments span both, so no edge can show between them.
   The fire burns behind the black side, sharing its grid cell. Its own ground is black, so it is screened
   onto the filaments, where black adds nothing, and its left side fades out into them. The veil keeps the
   copy on it easy to read, as on the portfolio. Narrow screens show one room at a time and neither layer. */
.sky, .fire { display: none; }

@media (min-width: 861px) and (min-height: 481px) {
  .sky { display: block; position: relative; grid-area: 1 / 1 / 2 / 3; min-width: 0; min-height: 0; overflow: hidden; pointer-events: none; }
  .sky > div { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #000; }
  .sky > div > div { position: absolute; inset: 0; }
  .sky canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  /* Darkens behind the copy that has no card of its own, with no edge: the chat's header and the black side. */
  .sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgb(0 0 0 / 0.6), transparent 130px),
      linear-gradient(to right, transparent 52%, rgb(0 0 0 / 0.78) 70%);
  }
  .chat { grid-area: 1 / 1; position: relative; z-index: 1; }
  .fire {
    display: block;
    position: relative;
    grid-area: 1 / 2;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    mask-image: linear-gradient(to right, transparent, #000 45%);
  }
  .fire > div { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
  .fire::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.12); }
  .trail { grid-area: 1 / 2; position: relative; z-index: 1; background: transparent; }
  .trail-foot {
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Phones and narrow windows: one room at a time */
@media (max-width: 860px) {
  .tabs { display: flex; padding: 4px 16px; }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.35) 160px), url("/sky.webp");
  }
  body[data-view="chat"] .trail { display: none; }
  body[data-view="trail"] .chat { display: none; }
  .bar { padding: 4px 16px; }
  .sim { font-size: calc(13px * var(--text)); line-height: 1.3; }
  /* One row: a long name wraps beside the button instead of pushing the button onto a row of its own. */
  .chat-head { flex-wrap: nowrap; padding: 6px 16px; }
  .brand { flex: 1 1 auto; }
  .chat-head .ghost { padding: 0 10px; font-size: calc(13px * var(--text)); }
  .brand-sub { display: none; }
  .orb-ring { width: 150px; height: 150px; margin: -18px 0 -14px; }
  .progress { margin-inline: 16px; }
  .log { padding: 16px; }
  .dock { padding-left: 16px; padding-right: 16px; }
  .trail { padding: 16px; }

  /* One row that slides sideways: on a phone the conversation needs the height. */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0; margin-inline: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; max-width: none; }
  .chip:focus-visible { outline-offset: -4px; }
}

@media (max-width: 860px) and (pointer: fine) {
  .chips { scrollbar-width: thin; }
}

/* The first offers on a tall phone are read, not scrolled past. */
@media (max-width: 860px) and (min-height: 840px) {
  .chips.starters { flex-wrap: wrap; overflow: visible; }
  .chips.starters .chip { flex: 0 1 auto; white-space: normal; }
}

@media (max-width: 480px) {
  .brand-mark { display: none; }
  .chat-head h1 { font-size: calc(15px * var(--text)); }
}

/* A phone on its side has little height left. */
@media (max-height: 480px) {
  .bar { padding: 2px 16px; }
  .sim { font-size: calc(13px * var(--text)); }
  .tabs { padding: 4px 16px; }
  /* A phone on its side keeps the old, smaller tabs: still above the 24 px minimum, and the height is needed. */
  .tab { min-height: 36px; }
  .chat-head { padding: 4px 16px; }
  .brand-sub { display: none; }
  .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
  .brand-mark::after { inset: 8px 7px 9px; }
  .log { padding: 10px 16px; }
  .orb { padding: 2px 16px 4px; }
  .orb-ring { width: 96px; height: 96px; margin: 0; }
  .dock { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .chips:not(:empty) { margin-bottom: 6px; }
}

/* Too little room for two scrolling panes, on a small screen or at a high zoom: the page scrolls as
   one and the message box stays at the bottom edge. */
@media (max-height: 480px), (max-width: 320px) {
  html { height: auto; }
  body { height: auto; min-height: 100dvh; overflow: visible; }
  .layout { flex: 1 0 auto; }
  .log { flex: 1 0 auto; overflow: visible; }
  .orb { display: none; }
  .trail { overflow: visible; }
  .dock { position: sticky; bottom: 0; z-index: 1; background: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; opacity: 0.7; }
  .progress-fill, .wait-fill, .orb-ring { transition: none; }
  .mic[aria-pressed="true"] { animation: none; }
}

@media (forced-colors: active) {
  .bubble, .chip, .turn, .tab, .send, .ease-toggle { border: 1px solid; }
  .tab[aria-pressed="true"], .switch button[aria-pressed="true"], .mic[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .typing i { forced-color-adjust: none; background: CanvasText; }
  .progress-fill, .wait-fill { forced-color-adjust: none; background: Highlight; }
  .wait-track { border: 1px solid CanvasText; }
  .dot { forced-color-adjust: none; background: Highlight; }
}