/* Base styles (accessibility.md §3): 18 px+ text in rem, contrast ≥ 7:1 for text, targets ≥ 48 px,
   a visible 3 px+ focus ring, reflow down to 320 px. Colour pairs and their contrast on white:
   --text #1a1a1a 17.4:1 · --primary #0b4f8a 8.4:1 · --error #a10000 8.4:1 · --muted #3d3d3d 11:1 */

:root {
  --text: #1a1a1a;
  --background: #ffffff;
  --primary: #0b4f8a;
  --error: #a10000;
  --muted: #3d3d3d;
  --border: #595959; /* 7:1 on white, well above 3:1 for UI parts */
  --focus: #1a1a1a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100rem;
  padding: 0.75rem 1rem;
  background: var(--background);
  color: var(--text);
}

.skip-link:focus {
  top: 1rem;
}

.site-header,
.site-footer,
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.brand {
  margin: 0;
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2.5rem;
}

a {
  color: var(--primary);
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 0.25rem solid var(--focus);
  outline-offset: 0.2rem;
}

main:focus {
  outline: none;
}

.field {
  margin: 1.5rem 0;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.hint {
  margin: 0 0 0.5rem;
  color: var(--muted);
}

input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  max-width: 30rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.25rem;
}

.input-code {
  max-width: 12rem;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
}

input[aria-invalid="true"] {
  border: 3px solid var(--error);
}

.field-error {
  margin: 0 0 0.5rem;
  color: var(--error);
  font-weight: 700;
}

.actions {
  margin: 1.5rem 0;
}

.button {
  display: inline-block;
  text-decoration: none;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 700;
  border-radius: 0.25rem;
  cursor: pointer;
}

.button-primary {
  color: #ffffff;
  background: var(--primary);
  border: 2px solid var(--primary);
}

.button-secondary {
  color: var(--primary);
  background: var(--background);
  border: 2px solid var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Patient check-in (WP9). Extra colour pairs on white: --urgent #8a0000 10.4:1; white on
   --urgent 10.4:1; --selected-bg #e8f0f8 with --text 15.6:1. */

:root {
  --urgent: #8a0000;
  --selected-bg: #e8f0f8;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.progress {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}

fieldset.question {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.question legend {
  padding: 0;
}

.options {
  display: grid;
  gap: 0.75rem; /* ≥ 8 px between targets */
}

.option {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  font-weight: 400;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
}

.option input {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  accent-color: var(--primary);
}

/* The selected card: thicker border and a tint, besides the radio's own dot (not colour alone). */
.option:has(input:checked) {
  border: 4px solid var(--primary);
  background: var(--selected-bg);
  font-weight: 700;
}

.option:has(input:focus-visible) {
  outline: 0.25rem solid var(--focus);
  outline-offset: 0.2rem;
}

.option input:focus-visible {
  outline: none; /* the card's ring above replaces it: one ring, not two */
}

textarea {
  display: block;
  width: 100%;
  min-height: 10rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.25rem;
}

textarea[aria-invalid="true"] {
  border: 3px solid var(--error);
}

.number-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}

.input-number {
  max-width: 10rem;
  font-size: 1.5rem;
}

.unit {
  font-size: 1.5rem;
  font-weight: 700;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0;
}

.button-row form {
  margin: 0;
}

.choices {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: block;
  padding: 1rem 1.25rem;
  color: var(--text);
  text-decoration: none;
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
}

.choice-title {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.choice-hint {
  display: block;
  margin-top: 0.25rem;
}

.answer-echo {
  font-size: 1.375rem;
}

.answers .answer {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.answers dt {
  font-weight: 700;
}

.answers dd {
  margin: 0.25rem 0 0;
}

.answers dd a {
  display: inline-block;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0.6rem 0.5rem;
}

/* D58: the chat's closing "Rozuměl jsem správně?" lists the answers inside the bubble. */
.summary-list {
  margin: 0.5rem 0 0;
}

.summary-list .answer {
  padding: 0.35rem 0;
}

.summary-list .answer:last-child {
  border-bottom: 0;
}

.written {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--border);
  white-space: pre-wrap;
}

/* WP25: exactly what a model was sent and returned; long JSON wraps instead of scrolling */
.model-text {
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.urgent {
  padding: 1rem 1.25rem;
  border: 4px solid var(--urgent);
  border-radius: 0.5rem;
}

.urgent h1 {
  color: var(--urgent);
  margin-top: 0;
}

.button-urgent {
  color: #ffffff;
  background: var(--urgent);
  border: 2px solid var(--urgent);
  font-size: 1.375rem;
}

.card {
  padding: 0 1.25rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
}

.demo-note {
  color: var(--muted);
  font-style: italic;
}

/* Clinician screens (WP13): wider pages for tables; statuses always icon + word + colour. */

.wide .site-header,
.wide .site-footer,
.wide main {
  max-width: 72rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  min-height: 3rem;
  padding: 0.6rem 0.5rem;
  font-weight: 700;
}

.nav a[aria-current="page"] {
  text-decoration-thickness: 0.2em;
  border-bottom: 0.25rem solid var(--primary); /* a second cue besides the underline */
}

.flash {
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid var(--primary);
  font-weight: 700;
}

.grade-provisional {
  color: var(--muted);
}

.grade-confirmed,
.grade-corrected {
  color: var(--primary);
}

/* A wide table scrolls inside its own focusable region; the page never scrolls sideways. */
.table-wrap {
  position: relative; /* keeps visually hidden text inside the scroll region */
  max-width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
}

table.data {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

table.data caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.5rem;
}

table.data th,
table.data td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.priority {
  font-weight: 700;
}

.priority-urgent,
.overdue {
  color: var(--urgent);
}

.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding: 0.25rem 0;
}

.facts dt {
  font-weight: 700;
}

.facts dt::after {
  content: ":";
}

.facts dd {
  margin: 0;
}

.grade {
  margin: 1.5rem 0;
  padding: 0 1.25rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
}

.grade-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.option-compact {
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
}

/* Notifications (WP16): read or unread is said in words with an icon; the unread ones also get a
   thicker --primary border (8.4:1 on white), never colour alone. */

.notices {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.notice {
  padding: 0 1.25rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
}

.notice-unread {
  border: 4px solid var(--primary);
}

.notice-state {
  font-weight: 700;
}

.notice-unread .notice-text {
  font-weight: 700;
}

.notice form {
  margin: 0 0 1rem;
}

/* Voice input (WP17). The state is in the button's text ("Namluvit" / "Ukončit nahrávání") and in
   the status line, never only in the dot's colour. --urgent #8a0000 on white 10.4:1. */
.voice {
  margin: 0.75rem 0 1rem;
}

.button-voice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  color: var(--primary);
  background: var(--background);
  border: 2px solid var(--primary);
}

.voice-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.voice[data-state="recording"] .button-voice {
  color: #8a0000;
  border: 4px solid #8a0000;
}

.voice[data-state="recording"] .voice-dot {
  background: #8a0000;
}

.voice[data-state="working"] .button-voice {
  cursor: progress;
}

.voice-status {
  margin: 0.5rem 0 0;
  font-weight: 700;
}

/* The patient app (D53, redesigned around the mascot). After ChatGPT: a quiet white canvas, one
   centred column, Zdravko's words as plain text beside his face, the patient's own words in soft
   grey bubbles on the right, a rounded composer, pill buttons. The colour comes from the mascot:
   the flag blue for links, selection and focus; ink for the main actions; the red stays reserved
   for the urgent screen. Nothing is sticky, so no bar ever covers the focused control (2.4.11);
   the speaker is read before every message.
   Colour pairs (text ≥ 7:1, UI parts ≥ 3:1):
   --text #1a1a1a on white 17.4:1, on --surface 15.8:1 · --muted #4a4f57 8.2:1 / 7.5:1 ·
   --primary #11457e 9.7:1 / 8.8:1, on --tint 8.3:1 · white on --ink 18.5:1 ·
   --line #7a8089 4.0:1 (control borders) · --hairline only decorates (separators). */

body.patient,
body.auth {
  --primary: #11457e;
  --ink: #111418;
  --muted: #4a4f57;
  --surface: #f3f4f6;
  --tint: #e8eef7;
  --selected-bg: #e8eef7;
  --line: #7a8089;
  --hairline: #e4e6ea;
  --urgent-bg: #fff4f4;
  --focus: #11457e;
  background: #ffffff;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.logo-lg {
  width: 2.75rem;
  height: 2.75rem;
}

.patient :focus-visible,
.auth :focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
}

.patient h1,
.patient h2,
.auth h1,
.auth h2 {
  letter-spacing: -0.01em;
}

/* --- The frame: a thin top bar and one centred column -------------------------------------- */
.patient .chat-header,
.patient main,
.chat-footer {
  width: min(46rem, 100% - 1.5rem);
  max-width: none;
  margin-inline: auto;
}

/* The chat window: the top bar and the conversation in one frame (--primary border, 9.7:1),
   the doodle wallpaper (static/chat-bg.svg, drawn lighter than --chat-bg, so text over it only
   gains contrast; a fixed tile, nothing moves) only inside it. Inside, cards are white.
   chat background #f4f5f7: --text 15.9:1, --muted 7.5:1, --primary 8.8:1, --line 3.6:1. */
body.patient {
  background: #ebedf0;
}

.patient .chat-header,
.patient main {
  width: min(46rem, 100% - 1rem);
}

.patient .chat-header {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 2px solid var(--primary);
  border-bottom: 1px solid var(--hairline);
  border-radius: 1.5rem 1.5rem 0 0;
}

.patient main {
  --surface: #ffffff;
  min-height: 70vh;
  padding: 1.25rem 0.6rem 1.5rem;
  background: #f4f5f7 url("/static/chat-bg.svg") repeat;
  background-size: 200px 200px;
  border: 2px solid var(--primary);
  border-top: 0;
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(17, 20, 24, 0.08);
}

@media (forced-colors: active) {
  .patient main {
    background-image: none;
  }
}

/* On the tinted wallpaper the white cards and bubbles get a soft lift. */
.patient main :is(.msg-me .bubble, .msg-bot .bubble-card, .summary-list, .hero-card, .audio-mode, .chat-other[open]) {
  box-shadow: 0 1px 2px rgba(17, 20, 24, 0.1);
}

/* Header: who you talk to (Zdravko), the patient and the treatment day. */
.chat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.chat-title {
  flex: 1 1 0; /* shrinks first, so the header stays one line on a phone */
  min-width: 4.5rem;
}

.chat-title p {
  margin: 0;
  line-height: 1.3;
}

.chat-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}


.chat-sub {
  font-size: 1rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.header-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0.9rem;
  cursor: pointer;
}

.header-link:hover {
  background: var(--surface);
}

.header-link .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.header-form {
  margin: 0;
}

/* "Domů": icon and word side by side, so it sits on the same line as Zdravko's face and name. */
.header-back {
  flex-direction: row;
  gap: 0.15rem;
  padding: 0.25rem 0.6rem 0.25rem 0.2rem;
  font-size: 1rem;
  border-radius: 999px;
}

/* Avatars: Zdravko's face (decorative; the name is in the text). The patient has none: their
   words sit on the right in a grey bubble, and "Vy:" is read before each. */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.avatar-bot {
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #e6edf6 100%);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* The whole mascot, a little smaller than the circle, so he isn't cropped. */
.avatar-bot img {
  display: block;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.avatar-header {
  width: 2.75rem;
  height: 2.75rem;
}

/* --- Messages ----------------------------------------------------------------------------- */
.chat,
.msg-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat {
  margin-bottom: 0.6rem;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

.msg-first {
  margin-top: 1.25rem;
}

.chat > .msg-first:first-child,
.msg-group > .msg-first:first-child {
  margin-top: 0;
}

.msg-me {
  justify-content: flex-end;
}

.msg-avatar {
  flex: none;
  width: 2.25rem;
  min-height: 1px;
}

.bubble {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bubble p {
  margin: 0.5rem 0 0;
}

.bubble > :is(p, h1, h2, dl):first-of-type {
  margin-top: 0;
}

/* Zdravko speaks in plain text, like ChatGPT: no box, full line length. */
.msg-bot .bubble {
  flex: 1;
  max-width: 38rem;
  padding: 0.3rem 0 0;
  line-height: 1.6;
}

/* The patient's own words: a soft grey bubble on the right. */
.msg-me .bubble {
  max-width: min(30rem, 85%);
  padding: 0.6rem 1.1rem;
  color: var(--text);
  background: var(--surface);
  border-radius: 1.5rem;
}

.msg-me .bubble p {
  white-space: pre-wrap;
}

.bubble-heading {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.35;
}

.bubble-heading label {
  margin: 0;
  font-weight: inherit;
}

.bubble-meta {
  font-size: 1rem;
  color: var(--muted);
}

/* A card in Zdravko's turn (the advice): a soft grey panel. */
.msg-bot .bubble-card {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-radius: 1.25rem;
}

.card-title {
  margin: 0;
  font-size: 1.125rem;
}

.quote {
  font-style: italic;
}

.msg-note {
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 1rem;
}

.badge .icon {
  width: 1rem;
  height: 1rem;
}

.badge-draft {
  align-self: flex-start;
  color: var(--primary);
}

/* chat.js focuses the new question after each reply: the turn shows a ring, not the heading. */
.msg-current h1:focus {
  outline: none;
}

.msg-current:focus-within {
  outline: 0.2rem solid var(--primary);
  outline-offset: 0.4rem;
  border-radius: 0.5rem;
}

/* The current turn rises in (no fade: full contrast at every moment; none with reduced motion). */
.turn {
  scroll-margin-top: 0.5rem;
}

.turn.msg-group,
.turn .msg-group {
  animation: appear 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes appear {
  from {
    transform: translateY(0.5rem);
  }
}

/* The closing summary (D58) and its answers: a grey card inside Zdravko's turn. */
.summary-list {
  margin: 0.75rem 0 0;
  padding: 0.25rem 1.1rem;
  background: var(--surface);
  border-radius: 1.25rem;
}

.summary-list .answer {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.summary-list .answer:last-child {
  border-bottom: 0;
}

.summary-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

.summary-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.summary-row dt {
  font-size: 1rem;
  color: var(--muted);
}

.summary-row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  margin: 0;
}

.summary-answer {
  font-weight: 700;
}

.summary-quote {
  flex-basis: 100%;
  color: var(--muted);
}

.summary-change {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  min-width: 3rem;
  font-weight: 700;
}

/* --- The reply area: quick replies, voice mode and the composer --------------------------- */
.reply-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.reply-area form {
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

.chips form {
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1.15rem;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
  background: var(--surface);
  border-color: var(--text);
}

.chip-primary,
.chip-primary:hover {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.chip-chosen {
  border: 3px solid var(--primary);
  background: var(--tint);
}

.chip-quiet {
  border-color: transparent;
  background: transparent;
}

fieldset.question {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* The composer: one rounded box; the text area inside it has no border of its own, the box is
   the control's outline (4.0:1) and shows the focus ring. */
.composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.75rem 0.75rem 1.15rem;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 1.75rem;
  box-shadow: 0 0.25rem 1.25rem rgba(17, 20, 24, 0.07);
}

.composer:has(textarea:focus-visible, input:focus-visible) {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
}

.composer textarea {
  min-height: 3.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border: 0;
  border-radius: 0;
  resize: none;
  field-sizing: content;
  max-height: 16rem;
  background: transparent;
}

.composer textarea:focus-visible {
  outline: none; /* the composer's ring above replaces it */
}

.composer textarea[aria-invalid="true"] {
  border: 0;
}

.composer:has([aria-invalid="true"]) {
  border: 3px solid var(--error);
}

.composer-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.composer-actions .pill {
  width: auto;
  min-height: 3rem;
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
}

.composer-actions .pill-send {
  margin-left: auto;
}

.composer .voice {
  margin: 0;
}

.composer-note,
.chat-note {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.chat-note {
  margin-top: 1.5rem;
  text-align: center;
}

.composer .voice-status {
  margin: 0;
  font-size: 1rem;
}

.voice-status:empty {
  display: none;
}

.composer .number-row {
  gap: 0.5rem;
}

.composer .input-number {
  min-height: 3.5rem;
  border-radius: 1.1rem;
}

/* Pills: the main actions (send, voice, call). */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.6rem 1.35rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.pill:active {
  transform: scale(0.98);
}

.pill-send {
  color: #ffffff;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.pill-send:hover {
  background: #2b3036;
}

.pill-voice {
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--line);
}

.pill-voice:hover {
  background: var(--surface);
}

.pill-wide {
  width: 100%;
}

.wave {
  display: none;
  align-items: center;
  gap: 0.2rem;
  height: 1.5rem;
}

.wave i {
  display: block;
  width: 0.25rem;
  height: 100%;
  border-radius: 0.15rem;
  background: currentColor;
  transform: scaleY(0.3);
  transition: transform 0.08s linear;
}

.voice[data-state="recording"] .pill-voice {
  color: #ffffff;
  background: var(--urgent);
  border-color: var(--urgent);
}

.voice[data-state="recording"] .wave,
.voice[data-state="working"] .wave {
  display: inline-flex;
}

.voice[data-state="recording"] .pill-voice > .icon,
.voice[data-state="working"] .pill-voice > .icon {
  display: none;
}

.voice[data-state="working"] .pill-voice {
  cursor: progress;
}

.voice[data-state="working"] .wave i {
  animation: pulse 0.9s ease-in-out infinite;
}

.voice[data-state="working"] .wave i:nth-child(2n) {
  animation-delay: 0.15s;
}

.voice[data-state="working"] .wave i:nth-child(3n) {
  animation-delay: 0.3s;
}

@keyframes pulse {
  50% {
    transform: scaleY(0.9);
  }
}

.chat-other {
  margin: 0.25rem 0 0;
}

.chat-other summary {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.75rem;
  font-weight: 700;
  color: var(--primary);
  border-radius: 999px;
  cursor: pointer;
}

.chat-other summary:hover {
  background: var(--surface);
}

.chat-other[open] {
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--surface);
  border-radius: 1.25rem;
}

.chat-other .chips {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

/* Audio mode (D59): an invitation to talk to Zdravko, with his face. The state is always in words
   too: the button's label, the status line and the "Hotovo" button while listening; the bars
   only add the live level (none with reduced motion). */
.audio-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border-radius: 1.75rem;
}

.audio-mascot {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}

.audio-mascot .avatar {
  position: relative;
  z-index: 1; /* above the halo */
  width: 100%;
  height: 100%;
  background: #ffffff;
}

/* A slow halo in the mascot's colours: he's there to talk. */
.audio-mascot::before {
  content: "";
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(17, 69, 126, 0.45), rgba(215, 20, 26, 0.35), rgba(17, 69, 126, 0.05), rgba(17, 69, 126, 0.45));
  filter: blur(4px);
  animation: aura-turn 6s linear infinite;
}

.audio-mode > :not(.audio-mascot) {
  grid-column: 1 / -1;
}

.audio-mode #audio-toggle {
  grid-column: 2;
  justify-self: start;
  width: auto;
  max-width: 100%;
  min-width: min(100%, 15rem);
}

.audio-mode .voice-status {
  margin: 0;
  font-size: 1rem;
}

.audio-mode .composer-note {
  padding: 0 0.25rem;
}

.audio-mode:not([data-state="off"]) #audio-toggle {
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
}

.audio-mode[data-state="listening"] #audio-toggle,
.audio-mode[data-state="working"] #audio-toggle {
  background: var(--urgent);
  border-color: var(--urgent);
}

.audio-mode[data-state="listening"] .wave,
.audio-mode[data-state="working"] .wave {
  display: inline-flex;
}

.audio-mode[data-state="listening"] #audio-toggle > .icon,
.audio-mode[data-state="working"] #audio-toggle > .icon {
  display: none;
}

.audio-mode[data-state="working"] .wave i {
  animation: pulse 0.9s ease-in-out infinite;
}

.audio-mode[data-state="working"] .wave i:nth-child(2n) {
  animation-delay: 0.15s;
}

/* While audio mode runs, the composer's own "Namluvit" would record over it: hidden. */
.audio-on .composer .voice {
  display: none;
}

/* --- Home and sign-in: Zdravko greets you ---------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}

.hero .mascot-hero {
  --size: clamp(8rem, 38vw, 11rem);
  margin-bottom: -0.5rem;
}

.hero-title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.15;
}

.hero-sub {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

/* Zdravko introduces himself: a speech bubble pointing up at him. */
.hero-intro {
  position: relative;
  max-width: 26rem;
  margin: 0.9rem 0 0.25rem;
  padding: 0.7rem 1.15rem;
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(17, 20, 24, 0.1);
}

.hero-intro::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  translate: -50% 0;
  rotate: 45deg;
  background: inherit;
  border-radius: 0.15rem;
}

.hero-card {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border-radius: 1.5rem;
}

.hero-card p {
  margin: 0.4rem 0 0;
}

.hero + .reply-area,
.hero-card + .reply-area {
  margin-top: 1.25rem;
}

.home-actions {
  align-items: center;
}

.home-actions > form,
.home-actions > .pill {
  width: 100%;
  max-width: 26rem;
}

.home-actions .chips {
  justify-content: center;
}

/* --- Pages other than the chat (one question per screen, notifications) -------------------- */
.panel {
  padding: 0.25rem 0 1rem;
}

.patient .panel h1 {
  font-size: 1.75rem;
}

.patient .progress {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.patient .button,
.auth .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}

.patient .button-primary,
.auth .button-primary {
  color: #ffffff;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.patient .button-primary:hover,
.auth .button-primary:hover {
  background: #2b3036;
}

.patient .button-secondary,
.auth .button-secondary {
  color: var(--text);
  background: #ffffff;
  border: 1.5px solid var(--line);
}

.patient .button-secondary:hover,
.auth .button-secondary:hover {
  background: var(--surface);
}

.patient .option {
  min-height: 3.5rem;
  padding: 0.8rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 1.1rem;
  transition: background-color 0.15s ease;
}

.patient .option:hover {
  background: var(--surface);
}

.patient .option:has(input:checked) {
  border: 3px solid var(--primary);
  background: var(--tint);
}

.patient input[type="email"],
.patient input[type="text"],
.patient .panel textarea,
.auth input[type="email"],
.auth input[type="text"] {
  min-height: 3.25rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 1rem;
}

.patient [aria-invalid="true"],
.auth [aria-invalid="true"] {
  border: 3px solid var(--error);
}

.patient .written {
  padding: 0.75rem 1.1rem;
  background: var(--surface);
  border: 0;
  border-radius: 1.1rem;
}

.patient .answers .answer {
  border-bottom: 1px solid var(--hairline);
}

.patient .notice {
  padding: 0 1.25rem;
  border: 1.5px solid var(--line);
  border-radius: 1.25rem;
}

.patient .notice-unread {
  border: 3px solid var(--primary);
  background: var(--tint);
}

/* --- Urgent: the word, the icon and the red together; it replaces the reply area ------------ */
.patient .urgent {
  margin-top: 0.75rem;
  padding: 1.1rem 1.25rem;
  color: var(--text);
  background: var(--urgent-bg);
  border: 4px solid var(--urgent);
  border-radius: 1.5rem;
}

.urgent-flag {
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.75rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--urgent);
  border-radius: 1rem;
}

.patient .urgent h1 {
  margin: 0.5rem 0;
  font-size: 1.75rem;
}

.patient .urgent p {
  margin: 0.5rem 0;
}

.urgent-calls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}

.pill-urgent {
  color: #ffffff;
  background: var(--urgent);
  border: 2px solid var(--urgent);
  font-size: 1.375rem;
}

.pill-urgent-outline {
  color: var(--urgent);
  background: #ffffff;
  border: 2px solid var(--urgent);
}

.status-list {
  display: grid;
  gap: 0.25rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.patient .urgent .demo-note {
  color: var(--text);
  font-size: 1rem;
}

.chat-footer {
  margin-top: 0.5rem;
  padding: 1rem 0 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

.chat-footer p {
  margin: 0;
}

/* --- Sign-in pages: the same canvas, a narrow column, Zdravko on top ------------------------- */
.auth .site-header,
.auth main,
.auth .site-footer {
  max-width: 30rem;
}

.auth .site-header {
  border-bottom: 1px solid var(--hairline);
}

.auth .site-footer {
  border-top: 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

.auth .hero {
  align-items: flex-start;
  text-align: left;
}

.auth .hero .mascot-hero {
  --size: clamp(7rem, 30vw, 9rem);
  align-self: center;
  margin-bottom: 0;
}

.auth h1 {
  font-size: 2rem;
  margin: 0.5rem 0 0.75rem;
}

.auth h2 {
  font-size: 1.25rem;
}

/* The voice screen (D59): a full-screen dialog over the chat, like a phone's voice assistant in
   our design. The mascot is decoration only; the state is always in words under it and in the
   caption. Text: --text on white 17.4:1, --muted 11:1. Motion stops with reduced motion. */
.voice-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(10rem, 1fr) auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(ellipse 80% 55% at 50% 38%, #f4f8fc 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #eef4fb 100%);
  --level: 0;
}

.voice-open {
  overflow: hidden; /* the chat behind doesn't scroll under the dialog */
}

.voice-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.voice-top h2 {
  margin: 0;
  font-size: 1.25rem;
}

.voice-top h2:focus {
  outline: none;
}

.voice-top h2:focus-visible {
  outline: 0.25rem solid var(--focus);
  outline-offset: 0.2rem;
}

.voice-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

/* The mascot (voice screen): Zdravko himself instead of an abstract orb. Decoration only
   (aria-hidden); the state is always in words under him and in the caption. Built in layers so
   each motion has one owner:
   .mascot-aura   soft flag-coloured light behind him; swells with the voice level
   .mascot-ring   two ripples that leave him while he listens
   .mascot-float  the slow hover (always, except reduced motion)
   .mascot-pose   the state's pose: leans in to listen, tilts while thinking (springy)
   .mascot-body   the live squash and stretch: --level (microphone) or --talk (his own speech)
   .mascot-eye    drawn eyes on the eyeless image, so they can blink, glance and look up
   .mascot-dots   four dots under him, after OpenAI's voice dots: calm dots while idle, bars that
                  follow the voice while listening or speaking, a travelling wave while thinking.
   --level, --talk and --d0…--d3 are set by mascot.js / audio.js; all are 0..1. */
.mascot {
  --size: min(64vw, 20rem, 40vh);
  --level: 0;
  --talk: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--size) * 1.25);
  aspect-ratio: 1;
  animation: mascot-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mascot-in {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(1.5rem);
  }
}

.mascot-aura,
.mascot-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
}

.mascot-aura {
  background:
    radial-gradient(circle at 30% 35%, rgba(17, 69, 126, 0.32), transparent 55%),
    radial-gradient(circle at 72% 62%, rgba(215, 20, 26, 0.24), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(140, 190, 240, 0.35), transparent 70%);
  filter: blur(18px);
  opacity: 0.55;
  transform: scale(calc(0.9 + var(--level) * 0.35 + var(--talk) * 0.12));
  transition: transform 0.12s linear, opacity 0.4s ease;
  animation: aura-turn 16s linear infinite;
}

@keyframes aura-turn {
  to {
    rotate: 360deg;
  }
}

.mascot-ring {
  inset: 18%;
  border: 2px solid rgba(11, 79, 138, 0.35);
  opacity: 0;
}

.mascot-float {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  animation: mascot-float 3.6s ease-in-out infinite alternate;
}

@keyframes mascot-float {
  from {
    translate: 0 2%;
  }
  to {
    translate: 0 -3%;
  }
}

.mascot-pose {
  position: absolute;
  inset: 0;
  transform-origin: 50% 85%;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 88%;
  transform: scale(
    calc(1 + var(--level) * 0.05 + var(--talk) * 0.035),
    calc(1 + var(--level) * 0.07 - var(--talk) * 0.03)
  );
  transition: transform 0.09s linear;
}

.mascot-body img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.4rem 0.6rem rgba(11, 40, 80, 0.12));
}

/* The eyes, placed on the sockets of the image (measured on mascot-body.webp). */
.mascot-eyes {
  position: absolute;
  inset: 0;
  transition: translate 0.35s ease;
}

.mascot-eye {
  position: absolute;
  top: 36.6%;
  width: 6%;
  height: 6%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6b6b6b 0 9%, #1d1d1d 34%, #070707 100%);
  transform-origin: 50% 60%;
  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.3s ease;
}

.mascot-eye:first-child {
  left: 41.4%;
}

.mascot-eye:last-child {
  left: 61%;
}

.mascot-eyes.is-blinking .mascot-eye {
  animation: blink 0.16s ease-in-out;
}

@keyframes blink {
  50% {
    transform: scaleY(0.1);
  }
}

/* Under him: a soft floor shadow that shrinks as he rises. */
.mascot-shadow {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 46%;
  height: 6%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 40, 80, 0.22), transparent);
  animation: shadow-breathe 3.6s ease-in-out infinite alternate;
}

@keyframes shadow-breathe {
  to {
    scale: 0.82;
    opacity: 0.7;
  }
}

.mascot-dots {
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.75rem;
  translate: -50% 0;
}

.mascot-dots i {
  --d: 0;
  display: block;
  width: 0.8rem;
  height: calc(0.8rem + var(--d) * 1.9rem);
  border-radius: 0.4rem;
  background: var(--primary);
  opacity: 0.85;
  transition: height 0.1s linear, opacity 0.3s ease;
}

.mascot-dots i:nth-child(1) { --d: var(--d0, 0); }
.mascot-dots i:nth-child(2) { --d: var(--d1, 0); }
.mascot-dots i:nth-child(3) { --d: var(--d2, 0); }
.mascot-dots i:nth-child(4) { --d: var(--d3, 0); }

/* Idle (on): calm, slowly breathing dots; he glances around now and then (mascot.js). */
.voice-screen[data-state="on"] .mascot-dots i {
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.voice-screen[data-state="on"] .mascot-dots i:nth-child(2) { animation-delay: 0.15s; }
.voice-screen[data-state="on"] .mascot-dots i:nth-child(3) { animation-delay: 0.3s; }
.voice-screen[data-state="on"] .mascot-dots i:nth-child(4) { animation-delay: 0.45s; }

@keyframes dot-breathe {
  50% {
    opacity: 0.45;
    scale: 0.85;
  }
}

/* Listening: he leans in with a curious tilt, eyes a little wider, ripples go out. */
.voice-screen[data-state="listening"] .mascot-pose {
  transform: translateY(-3%) rotate(-5deg) scale(1.04);
}

.voice-screen[data-state="listening"] .mascot-eye {
  scale: 1.15;
}

.voice-screen[data-state="listening"] .mascot-aura {
  opacity: 0.9;
}

.voice-screen[data-state="listening"] .mascot-ring {
  animation: ripple 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.voice-screen[data-state="listening"] .mascot-ring + .mascot-ring {
  animation-delay: 1.2s;
}

@keyframes ripple {
  from {
    opacity: 0.8;
    transform: scale(0.85);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* Thinking (transcribing): looks up and aside, a slow sway, the dots run a wave. */
.voice-screen[data-state="working"] .mascot-pose {
  animation: ponder 2.2s ease-in-out infinite alternate;
}

@keyframes ponder {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(-2deg) translateY(-1.5%);
  }
}

.voice-screen[data-state="working"] .mascot-eyes {
  translate: 1.6% -1.8%;
}

.voice-screen[data-state="working"] .mascot-aura {
  opacity: 0.8;
  animation-duration: 4s;
}

.voice-screen[data-state="working"] .mascot-dots i {
  animation: dot-wave 1.1s ease-in-out infinite;
}

.voice-screen[data-state="working"] .mascot-dots i:nth-child(2) { animation-delay: 0.12s; }
.voice-screen[data-state="working"] .mascot-dots i:nth-child(3) { animation-delay: 0.24s; }
.voice-screen[data-state="working"] .mascot-dots i:nth-child(4) { animation-delay: 0.36s; }

@keyframes dot-wave {
  0%,
  60%,
  100% {
    translate: 0 0;
    opacity: 0.5;
  }
  30% {
    translate: 0 -0.7rem;
    opacity: 1;
  }
}

/* Speaking: upright and lively; body and dots follow his voice (--talk, --d0…). */
.voice-screen[data-state="speaking"] .mascot-pose {
  transform: translateY(-2%) scale(1.02);
}

.voice-screen[data-state="speaking"] .mascot-aura {
  opacity: 0.8;
}

/* Happy squint, e.g. right after "Ano": mascot.js adds it for a moment. */
.mascot-eyes.is-happy .mascot-eye {
  scale: 1.1 0.35;
  border-radius: 50% 50% 40% 40% / 100% 100% 20% 20%;
}

@media (forced-colors: active) {
  .mascot-aura,
  .mascot-ring,
  .mascot-shadow {
    display: none;
  }

  .mascot-dots i {
    background: CanvasText;
  }
}

.voice-state {
  margin: 0;
  min-height: 1.5em;
  font-weight: 700;
  color: var(--muted);
}

.voice-caption {
  margin: 0 auto;
  max-width: 34rem;
  min-height: 4.5em;
  font-size: 1.375rem;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.voice-answers {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.voice-answers .chip {
  min-width: 7rem;
  justify-content: center;
  font-size: 1.25rem;
}

.voice-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.voice-slot {
  min-width: 5.5rem;
  display: flex;
  justify-content: center;
}

.round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 5.5rem;
  min-height: 3rem;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}

.round .icon {
  width: 4rem;
  height: 4rem;
  padding: 1.05rem;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink, var(--primary));
}

.round-close .icon {
  color: var(--text);
  background: #e3e8ee; /* 3.4:1 against white: the circle is visible */
  border: 2px solid var(--border);
}

.round:focus-visible {
  outline: none;
}

.round:focus-visible .icon {
  outline: 0.25rem solid var(--focus);
  outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .mascot-aura,
  .mascot-body,
  .mascot-dots i {
    transform: none;
    --d: 0;
  }
}