/* The product's styles: the Aletheon design system (docs/design/aletheon-design.md),
 * written against the semantic tokens in tokens.css only.
 *
 * What makes it look like Aletheon:
 *   - one palette used sparingly: purple for the brand, blue for confirmed, amber for
 *     "a person needs to look", everything else white, mist, lavender and ink
 *   - light pages, dark moments: the deep ink console belongs to calls, nothing else
 *   - light type at large sizes (300), medium type at small sizes (500)
 *   - soft, rounded, quiet surfaces: 1px rings instead of shadows; one purple lift for the
 *     selected item
 *   - motion answers the user: things move when something changes, not on scroll
 */

/* ---- Base ------------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--purple); color: #fff; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: var(--weight-medium); line-height: var(--leading-snug); }

a { color: var(--accent-text); text-decoration: none; }

button { font: inherit; color: inherit; }

svg { flex-shrink: 0; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }
.on-dark :focus-visible { outline-color: #fff; }

[x-cloak] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -80px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-medium);
}
.skip-link:focus { top: var(--space-4); }

.muted { color: var(--text-muted); }
.meta { font-size: var(--text-sm); color: var(--text-muted); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---- Header ------------------------------------------------------------------------
 * The website's header, scrolled state: white/85 with a blur, the logo left, the places as
 * text links with the logo's dot under the active one, the account on the right. */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--divider);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 1480px;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
}
.wordmark img {
  display: block;
  height: 26px;
  width: auto;
  margin-left: -0.5rem;     /* the PNG carries its own left padding */
  filter: var(--logo-filter);
}
.wordmark__product {
  padding-left: var(--space-3);
  box-shadow: inset 1px 0 0 var(--outline);
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.safe-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--neutral-soft);
  color: var(--neutral-text);
  box-shadow: 0 0 0 1px var(--outline);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}
.nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-btn);
  transition: color var(--duration-color) ease;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent-text); }
/* The active place gets the dot from the logo's "A". */
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--duration-color) ease, color var(--duration-color) ease;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent-text); }
.icon-btn[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }

/* The colour-mode switch shows the mode it leads to: the moon on light, the sun on dark.
 * Which one is visible comes from tokens, so the right icon is there before first paint. */
.theme-switch__moon { display: var(--show-on-light); }
.theme-switch__sun { display: var(--show-on-dark); }

.account { position: relative; }
.avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--outline);
  color: var(--text);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-transform: uppercase;
  cursor: pointer;
}
.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: var(--z-modal);
  min-width: 232px;
  padding: var(--space-2);
  border-radius: var(--radius-2xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  animation: pop 0.3s var(--ease-pop) both;
}
.account__who { padding: var(--space-2) var(--space-3) var(--space-3); }
.account__who strong { display: block; font-weight: var(--weight-medium); }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--accent-soft); color: var(--accent-text); }

/* ---- Page ------------------------------------------------------------------------- *
 * Every page shares one frame: the same width as the header, the same top spacing, and the
 * same header — a small line (the date, or the page's name) above one headline. Switching
 * places never moves the headline. Reading pages keep their content to a comfortable width. */

.page, .page--desk {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-7) 176px;
}
.page--desk { padding-bottom: var(--space-8); }
.page:not(.page--desk) > div { max-width: 1200px; margin-inline: auto; }   /* Settings: a centred column */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}
.page-kicker {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-btn);
}
.page-title {
  max-width: 40ch;
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Something is live: the console's ring, in the page's colours. */

.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral);
  flex-shrink: 0;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--neutral);
  animation: voice-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.on-dark .live-dot, .nowbar .live-dot { background: var(--agent); }
.on-dark .live-dot::after, .nowbar .live-dot::after { color: var(--agent); }

/* ---- Cards ------------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border-radius: var(--radius-3xl);
  box-shadow: var(--ring);
  padding: var(--space-7);
}
.card + .card, .stack > * + * { margin-top: var(--space-6); }
.card.is-selected { box-shadow: var(--ring-selected), var(--shadow-selected); }

/* A section panel: mist, the largest radius, white cards inside. */

.card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card__title { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.375; }
.card__lede { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); max-width: 44rem; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  box-shadow: inset 0 1px 0 var(--divider);
}

/* ---- Pills: status in a word, from the four families -------------------------------- */

.pill, .count, .test-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--neutral-soft);
  color: var(--neutral-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.33;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill--ok    { background: var(--ok-soft);   color: var(--ok-text); }
.pill--attn  { background: var(--attn-soft); color: var(--attn-text); }
.pill--err   { background: var(--err-soft);  color: var(--err-text); }
.pill--neutral { background: var(--neutral-soft); color: var(--neutral-text); }

.count { margin-left: auto; min-width: 28px; justify-content: center; }
.count--attention { background: var(--attn-soft); color: var(--attn-text); }
.test-tag { margin-left: var(--space-2); vertical-align: 1px; }

/* The product tag: once per page, above the page title. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--outline);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Items: one sentence a person can act on ------------------------------------- */

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

.item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  box-shadow: inset 0 1px 0 var(--divider);
}
.items > .item:first-of-type { box-shadow: none; padding-top: var(--space-1); }
.items > .item:last-of-type { padding-bottom: 0; }
.item__text { min-width: 0; }
.item__sentence { overflow-wrap: anywhere; line-height: var(--leading-normal); }
.item__meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* The icon tile carries the outcome: shape and colour, never colour alone (guide §6). */
.tone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2xl);
  background: var(--neutral-soft);
  color: var(--neutral-text);
}
.tone--success { background: var(--ok-soft);   color: var(--ok-text); }
.tone--warning { background: var(--attn-soft); color: var(--attn-text); }
.tone--danger  { background: var(--err-soft);  color: var(--err-text); }
.tone--info, .tone--neutral { background: var(--neutral-soft); color: var(--neutral-text); }

.more {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) 0 0;
  border: 0;
  box-shadow: inset 0 1px 0 var(--divider);
  background: none;
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
}
.more:hover { text-decoration: underline; text-underline-offset: 6px; }

/* The empty state people should see most of the time: the tick pops in. */
.all-clear {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.all-clear__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-text);
  animation: pop 0.45s var(--ease-pop) both 0.18s;
}

/* ---- Buttons (guide §7.1): pills, one primary per view ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-btn);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-color) ease, border-color var(--duration-color) ease,
              color var(--duration-color) ease;
}
.btn:disabled { opacity: 0.65; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary { border-color: var(--outline); background: transparent; color: var(--accent-text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }

/* On dark (the console, the purple band). */
.btn-light { background: #fff; color: var(--purple); }
.btn-light:hover:not(:disabled) { background: var(--lavender); }
.btn-ghost-dark { border-color: rgb(255 255 255 / 0.3); background: transparent; color: #fff; }
.btn-ghost-dark:hover:not(:disabled) { border-color: #fff; background: rgb(255 255 255 / 0.08); }

/* Ends something that can't be taken back (End call, a destructive confirm). */
.btn-danger { border-color: var(--err); background: transparent; color: var(--err-text); }
.btn-danger:hover:not(:disabled) { background: var(--err-soft); }
.on-dark .btn-danger, .nowbar .btn-danger, .console .btn-danger {
  border-color: rgb(242 163 157 / 0.55);
  color: var(--error-text-on-dark);
}
.on-dark .btn-danger:hover:not(:disabled), .nowbar .btn-danger:hover:not(:disabled), .console .btn-danger:hover:not(:disabled) {
  border-color: var(--error-text-on-dark);
  background: rgb(228 106 97 / 0.14);
}

.btn-sm { height: 40px; padding: 0 var(--space-5); font-size: var(--text-sm); }
.btn-console { height: 44px; padding: 0 var(--space-5); font-size: var(--text-sm); }
.btn-lg { height: 56px; padding: 0 var(--space-7); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* Text actions inside cards (guide §7.1 "text link style"). */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-color) ease, text-decoration-color var(--duration-color) ease;
}
.link-btn:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.link-btn--quiet { color: var(--text-muted); text-decoration-color: transparent; }
.link-btn--quiet:hover { color: var(--text); text-decoration-color: currentColor; }
.link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sep { color: var(--text-faint); }

/* ---- Forms (guide §7.2) ------------------------------------------------------------- */

.field { display: grid; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.field label, .label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__optional { color: var(--text-muted); font-weight: var(--weight-normal); }

.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: 0.8125rem 1rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-xl);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-color) ease, box-shadow var(--duration-color) ease;
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--field-focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err); }
.field__error { color: var(--err); font-size: var(--text-sm); }

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search svg { position: absolute; left: 16px; color: var(--text-muted); pointer-events: none; }
.search .input { padding-left: 44px; border-radius: var(--radius-full); }

/* A switch, for the one setting that changes what a button does. */
.switch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  align-items: start;
}
.switch__control {
  position: relative;
  width: 44px;
  height: 26px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-full);
  background: var(--outline);
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease);
}
.switch__control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(27 16 48 / 0.3);
  transition: transform var(--duration-state) var(--ease);
}
.switch__control:checked { background: var(--accent); }
.switch__control:checked::after { transform: translateX(18px); }
.switch__control:disabled { cursor: not-allowed; opacity: 0.8; }
.switch__label { font-weight: var(--weight-medium); }
.switch__hint { color: var(--text-muted); font-size: var(--text-sm); }

/* Choice chips (guide §7.3): pills; the chosen one fills purple with a tick. */
.segmented, .chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.segmented button, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--outline);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease), color var(--duration-state) var(--ease),
              box-shadow var(--duration-state) var(--ease);
}
.segmented button:hover, .chip:hover { box-shadow: 0 0 0 1px var(--accent); }
.segmented button[aria-pressed="true"], .chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.segmented button[aria-pressed="true"]::before, .chip[aria-pressed="true"]::before {
  content: "";
  width: 9px;
  height: 5px;
  margin: -3px 1px 0 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---- Notices --------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.notice svg { margin-top: 2px; }
.notice--warning { background: var(--attn-soft); color: var(--attn-text); }
.notice--danger  { background: var(--err-soft);  color: var(--err-text); }
.notice--info    { background: var(--neutral-soft); color: var(--neutral-text); box-shadow: inset 0 0 0 1px var(--divider); }
.notice--success { background: var(--ok-soft);   color: var(--ok-text); }

.skeleton {
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--divider) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton--line { height: 18px; margin: var(--space-4) 0; }
.skeleton--hero { height: 36px; max-width: 480px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Overlays: scrim, drawer, sheet, dialog ------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade var(--duration-state) ease both;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 24px));
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  animation: slide-left 0.5s var(--ease) both;
}
@keyframes slide-left { from { transform: translateX(32px); opacity: 0; } }
/* A call opened over Activity or Tickets: the console itself, nearly full width. */
.drawer--console { width: min(1180px, calc(100vw - 24px)); background: none; box-shadow: none; border-radius: var(--radius-console); }
.drawer--console .console { height: 100%; }
/* A ticket is usually short: the window fits it, up to the full height. */
.drawer--ticket { bottom: auto; max-height: calc(100vh - 24px); }
.drawer--ticket .c-body { min-height: 360px; }



/* A phone menu or a voicemail (call 809050): on the hotel's side, but plainly not a person. */

.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 48px));
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  transform: translate(-50%, -50%);
  animation: sheet-in 0.5s var(--ease) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.98); } }

.sheet__head { padding: var(--space-7) var(--space-7) var(--space-4); }
.sheet__title { font-size: var(--text-lg); font-weight: var(--weight-normal); letter-spacing: -0.02em; }
.sheet__lede { color: var(--text-muted); margin-top: var(--space-1); }
.sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--space-7); }
.sheet__foot {
  display: flex;
  flex-wrap: wrap;   /* a phone: the main button drops under Cancel instead of running off the sheet */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-7);
  box-shadow: inset 0 1px 0 var(--divider);
}
.sheet__foot .btn-primary { margin-left: auto; }
.sheet .notice { margin-bottom: var(--space-4); }

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

/* The request panel (plan 2026-10-20 evening F5): a row of To check → Pending, shown where the call console shows. */
.c-request { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-6); }
/* On the dark console: the quiet lines in the console's own muted white, the said words' rule in white too. */
.c-request .pending__context, .c-request .pending__who, .c-request .pending__said-en,
.c-request .pending__note { color: rgb(255 255 255 / 0.6); }
.c-request .pending__said { box-shadow: inset 2px 0 0 rgb(255 255 255 / 0.35); }
.c-request .pending__reason { color: var(--warn-text); }
.pending__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pending__action { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.pending__top .pill { flex: none; }
.pending__context, .pending__who { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.pending__said { margin: var(--space-3) 0 0; padding-left: var(--space-3); box-shadow: inset 2px 0 0 var(--outline);
  overflow-wrap: anywhere; }
.pending__said-en { color: var(--text-muted); font-size: var(--text-sm); }
.pending__reason { margin-top: var(--space-1); color: var(--attn-text); font-size: var(--text-sm); }
.pending__note { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.pending__edit, .pending__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); }
.pending__field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pending__field .c-input { width: auto; min-width: 0; max-width: 220px; }
.pending__field input[type="number"] { width: 90px; }
@media (max-width: 560px) {
  .c-request { padding: var(--space-4); }
  .pending__top { flex-direction: column; }
}
.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 52px;
  padding: var(--space-3) 0;
  box-shadow: inset 0 1px 0 var(--divider);
  cursor: pointer;
}
.pick-list > li:first-of-type .pick { box-shadow: none; }
.pick input { width: 18px; height: 18px; accent-color: var(--accent); }
.pick__hotel { font-weight: var(--weight-medium); }
.pick__guest { color: var(--text-muted); font-size: var(--text-sm); }
.pick__number { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pick--off { cursor: default; }
.pick--off .pick__hotel, .pick--off .pick__guest { color: var(--text-faint); }
.pick--off .pick__number { color: var(--attn-text); }

.test-mode {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-2xl);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.test-mode__fields { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.test-mode__fields .input:first-child { width: 104px; flex: none; }
.test-mode__fields .input:last-child { flex: 1 1 140px; min-width: 0; }   /* a phone: the number gets its own line */
/* The language a test call starts in (plan 2026-10-10 C3). */
.test-mode__language { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); }
.test-mode__language .input { flex: 1 1 180px; min-width: 0; }
/* Any reservation, by its IRIX number, for a test call (2026-10-01). */
.test-mode__add { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.test-mode__add .input { flex: 1 1 160px; min-width: 0; }
.test-mode__add .btn { flex: none; }
.test-mode__error { margin: var(--space-2) 0 0; color: var(--err); font-size: var(--text-sm); }

.dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--z-modal);
  width: min(460px, calc(100vw - 32px));
  padding: var(--space-7);
  border-radius: var(--radius-3xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  transform: translate(-50%, -50%);
  animation: sheet-in 0.4s var(--ease) both;
}
.dialog__title { font-size: var(--text-lg); font-weight: var(--weight-normal); letter-spacing: -0.02em; }
.dialog__body { color: var(--text-muted); margin-top: var(--space-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.scrim.is-open { z-index: calc(var(--z-modal) - 1); }

/* ---- The call console (guide §8) -------------------------------------------------------
 * Deep ink, the same in light and dark mode. Calls are the product's one dark moment. */

.console {
  border-radius: var(--radius-console);
  overflow: hidden;
  background: var(--console-bg);
  box-shadow: var(--console-shadow), var(--console-edge);
  color: #fff;
}

/* The agent's mark: a purple circle with the logo's dot; a ring pings while a call is live. */
.agent-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--purple);
}
.agent-avatar::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.agent-avatar.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--agent);
  animation: voice-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* The waveform: 36 bars; they move only while someone is speaking. */
.wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.wave span {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.2);
  transform: scaleY(0.12);
  transition: transform var(--duration-state) ease, background-color var(--duration-state) ease;
}
.wave.is-agent span, .wave.is-them span { animation: voice-bar 0.7s ease-in-out infinite alternate; }
.wave.is-agent span { background: var(--agent); }
/* The waveform means "someone is speaking": it is shown only while a call is live. */
.console:not(.is-live) .wave { display: none; }
.wave.is-them span { background: var(--them); }

/* Bubbles on the console. */
.c-conversation {
  margin: 0;
  padding: var(--space-6) var(--space-7);
  list-style: none;
  overflow-y: auto;
}
.c-conversation > li + li { margin-top: var(--space-3); }
.c-bubble {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: var(--radius-2xl);
  line-height: var(--leading-relaxed);
  overflow-wrap: anywhere;
}
.c-bubble--agent { background: rgb(91 33 146 / 0.45); box-shadow: 0 0 0 1px rgb(180 140 242 / 0.3); }
.c-bubble--them { margin-left: auto; background: rgb(255 255 255 / 0.07); }
.c-bubble--machine { margin-left: auto; background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); color: rgb(255 255 255 / 0.75); }
.c-bubble__who { display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.33; }
.c-bubble--agent .c-bubble__who { color: var(--agent-label); }
.c-bubble--them .c-bubble__who { color: var(--them-label); }
.c-bubble--machine .c-bubble__who { color: rgb(255 255 255 / 0.6); }
.c-bubble__cut { display: block; margin-top: 4px; font-size: var(--text-xs); font-style: italic; opacity: 0.75; }
.c-bubble mark { background: rgb(242 179 71 / 0.35); color: inherit; border-radius: 3px; }
.c-bubble__text { display: block; }
/* The line's English, under a line said in another language (src/transcript_translation.py). */
.c-bubble__en { display: block; margin-top: var(--space-2); color: rgb(255 255 255 / 0.55); }
.c-bubble--agent .c-bubble__en { color: rgb(226 210 252 / 0.62); }
.c-event {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 4px 0;
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.55);
}
.c-event::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: rgb(255 255 255 / 0.4); }
.c-empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  color: rgb(255 255 255 / 0.5);
  text-align: center;
}

/* The checklist on the console. */
.c-section-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgb(255 255 255 / 0.7); }
.c-checks { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.c-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 0;
  font-size: var(--text-sm);
  box-shadow: inset 0 -1px 0 var(--console-divider);
}
.c-check:last-child { box-shadow: none; }
.c-check__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--duration-state) ease, box-shadow var(--duration-state) ease;
}
.c-check__mark svg { width: 12px; height: 12px; stroke-width: 3; }
.c-check--confirmed .c-check__mark { background: var(--them); box-shadow: none; }
.c-check--mismatch .c-check__mark { background: var(--warn); box-shadow: none; }
.c-check--answered .c-check__mark { box-shadow: inset 0 0 0 1px var(--agent); }
.c-check--answered .c-check__mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--agent); }
.c-check__body { flex: 1; min-width: 0; }
.c-check__row { display: flex; justify-content: space-between; gap: var(--space-3); }
.c-check__label { color: rgb(255 255 255 / 0.6); }
.c-check__value { font-weight: var(--weight-medium); text-align: right; overflow-wrap: anywhere; }

.c-review {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.06);
  font-size: var(--text-sm);
}
.c-review__title { font-weight: var(--weight-medium); color: rgb(255 255 255 / 0.7); }
.c-review p + p, .c-review__title + p { margin-top: 4px; }
.c-review p:not(.c-review__title) { color: rgb(255 255 255 / 0.85); }

/* The report: a white card inside the dark console — the final result. */
.c-report {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink);
  font-size: var(--text-sm);
}
.c-report__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-report__title { font-weight: var(--weight-medium); }
.c-report__lines { margin: var(--space-3) 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
.c-report__lines li + li { margin-top: 6px; }
.c-report .pill--ok { background: #e8effb; color: #2b63c9; }
.c-report .pill--attn { background: #fdf0d8; color: #7a4b00; }
.c-report .pill--neutral { background: #f8f5ff; color: #5b2192; }
.c-report .pill--err { background: #fbe9e7; color: #8c1d18; }

/* Space reserved from the start, faded in when filled: nothing below the console moves. */
.reserved { visibility: hidden; opacity: 0; transition: opacity var(--duration-panel) ease, visibility 0s linear var(--duration-panel); }
.reserved.is-shown { visibility: visible; opacity: 1; transition: opacity var(--duration-panel) ease; }

.c-progress { flex: 1; height: 4px; border-radius: var(--radius-full); background: rgb(255 255 255 / 0.1); overflow: hidden; }
.c-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--agent); transition: width var(--duration-panel) var(--ease); }
.c-fine { color: rgb(255 255 255 / 0.45); font-size: var(--text-xs); }

/* Console layout: header, transcript beside the checklist, actions along the bottom. */
.console { display: flex; flex-direction: column; min-height: 0; }
.c-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  box-shadow: inset 0 -1px 0 var(--console-divider);
}
.c-head__who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.c-head__text { min-width: 0; }
.c-head__name { font-size: var(--text-base); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-head__sub { color: rgb(255 255 255 / 0.6); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-head__end { display: flex; align-items: center; gap: var(--space-4); }
.c-state { min-width: 80px; text-align: right; color: rgb(255 255 255 / 0.7); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-back { display: none; }

.c-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); min-height: 0; }
.c-body--single { grid-template-columns: 1fr; }
.c-body .c-conversation { min-height: 0; }
.c-side { overflow-y: auto; padding: var(--space-6) var(--space-7); box-shadow: inset 1px 0 0 var(--console-divider); }
.c-loading { flex: 1; padding: var(--space-7); }
.skeleton--dark { height: 16px; margin: var(--space-4) 0; background: linear-gradient(90deg, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0.12) 50%, rgb(255 255 255 / 0.05) 100%); background-size: 200% 100%; }

.c-check__note { margin-top: 4px; text-align: right; }
.c-checks__note { margin-top: var(--space-3); color: rgb(255 255 255 / 0.55); font-size: var(--text-sm); }
.c-check__note--attn { color: var(--warn-text); }
.c-check__note--muted { color: rgb(255 255 255 / 0.5); }
.c-review__ticket { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.c-error { margin-top: var(--space-4); color: var(--error-text-on-dark); font-size: var(--text-sm); }

/* What we'll write in IRIX, inside the white report card. */
.c-comment { margin-top: var(--space-4); padding-top: var(--space-3); box-shadow: inset 0 1px 0 #ecebf1; }
.c-comment__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.c-comment__label { color: var(--ink-soft); font-weight: var(--weight-medium); }
.c-comment__text { margin-top: 6px; color: var(--ink); line-height: var(--leading-normal); }
.c-comment textarea {
  width: 100%;
  min-height: 120px;
  margin-top: var(--space-2);
  padding: 10px 12px;
  border: 1px solid #dddbe6;
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: var(--leading-normal);
  resize: vertical;
}
.c-comment textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgb(91 33 146 / 0.16); }
.c-report .link-btn { min-height: 28px; padding: 0; color: var(--purple); }

.c-foot { padding: var(--space-4) var(--space-7); box-shadow: inset 0 1px 0 var(--console-divider); }
.c-foot__row, .c-ticket { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 44px; }
.c-foot .c-fine { margin-left: auto; text-align: right; }
.c-foot .c-fine--start { margin-left: 0; text-align: left; }
.c-foot__done { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgb(255 255 255 / 0.85); }
.c-foot__done .c-check__mark { background: var(--them); box-shadow: none; }
.c-input {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
}
/* A text box that grows with what is written (the ticket's description): a field, not a pill. */
.c-input--text {
  display: block;
  padding: 11px var(--space-4);
  border-radius: var(--radius-xl);
  line-height: 20px;
  resize: none;
  overflow-y: auto;
  max-height: 40vh;
}
.c-ticket:has(.c-input--text) { align-items: flex-end; }
.c-input::placeholder { color: rgb(255 255 255 / 0.45); }
.c-input:focus { outline: none; border-color: var(--agent); box-shadow: 0 0 0 3px rgb(180 140 242 / 0.25); }

/* ---- Today: the desk -------------------------------------------------------------------------
 * Everything about the day in a column on the left — the headline, the one action, where each
 * reservation is, the chosen stage's list — and the call itself, the console, at full height on
 * the right (owner, 2026-10-02: "pack the cards to the left and enlarge the conversation"). */

/* A workspace page (Today, Activity, Tickets): a quiet line over two columns — on the left the
   page's filters and list, on the right the thing chosen, at full height. Every workspace page has
   the same width and the same columns, so switching places moves nothing. */
.workspace { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.workspace__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 36px; }   /* one height on every page: switching moves nothing */
.workspace__head .page-kicker { margin: 0; }
.workspace__title { margin: 0; color: var(--text-muted); font-size: var(--text-btn); font-weight: var(--weight-normal); }
.desk-side__action { width: 100%; }

.desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.desk-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; min-height: 0; }
.desk-side .page-head { flex-direction: column; align-items: stretch; gap: var(--space-4); margin: 0; }
.desk-side .page-head .btn { width: 100%; }
.desk-side .page-title { max-width: none; }

.stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.stages.stages--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* Tickets: three groups */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--space-2);
  padding: 10px var(--space-4);
  border: 0;
  border-radius: var(--radius-2xl);
  background: transparent;
  box-shadow: 0 0 0 1px var(--outline);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--duration-state) var(--ease), background-color var(--duration-state) var(--ease);
}
.stage:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--outline)); }
.stage[aria-selected="true"], .stage[aria-pressed="true"] { background: var(--surface); box-shadow: var(--ring-selected), var(--shadow-selected); }
.stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-panel) var(--ease);
}
.stage[aria-selected="true"]::before, .stage[aria-pressed="true"]::before { transform: scaleX(1); }
/* A compact card (owner, 2026-10-02): the name and the number on one row, a few words under them. */
.stage__name { grid-column: 1; grid-row: 1; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.stage__sub { grid-column: 1 / -1; grid-row: 2; color: var(--text-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__count {
  grid-column: 3;
  grid-row: 1;
  font-size: var(--text-stat);
  font-weight: var(--weight-thin);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* Live, or "Needs you": a small mark beside the name; its words stay for screen readers. */
.stage__flag { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; }
.stage__flag.mark { width: 14px; height: 14px; }
.stage__flag.mark::before { width: 4px; height: 4px; }
.stage__flag.pill { width: 8px; height: 8px; padding: 0; overflow: hidden; color: transparent; background: var(--attn); }

.desk-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-3xl);
  background: var(--surface);
  box-shadow: var(--ring);
}
.desk-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-6) var(--space-6) var(--space-1); }
.desk-list__filters { gap: var(--space-1); }
.desk-list__filters .chip { min-height: 32px; padding: 4px 12px; }
.desk-list__title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.desk-list__hint { color: var(--text-muted); font-size: var(--text-sm); padding: 0 var(--space-6) var(--space-3); }
.desk-list__empty { color: var(--text-muted); padding: var(--space-5) var(--space-6); }
.desk-list__loading { padding: 0 var(--space-6); }
.desk-list__list { flex: 1; overflow-y: auto; margin: 0; padding: 0 var(--space-3) var(--space-3); list-style: none; }
.desk-list__rows { margin: 0; padding: 0; list-style: none; }
.desk-list__group { padding: var(--space-4) var(--space-3) var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.desk-list .more { margin: var(--space-1) var(--space-3) var(--space-2); width: auto; padding-top: var(--space-2); box-shadow: none; }

.row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  align-items: start;
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-2xl);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-color) ease, box-shadow var(--duration-color) ease;
}
.row:hover { background: var(--surface-hover); }
.row[aria-current="true"] { background: var(--surface-sunken); box-shadow: inset 0 0 0 2px var(--accent); }
.row__mark { grid-row: 1 / span 2; margin-top: 2px; }
.row__hotel { font-weight: var(--weight-medium); overflow-wrap: anywhere; }   /* a hotel name wraps; it is never cut */
.row__when { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__what { grid-column: 2 / -1; color: var(--text-muted); font-size: var(--text-sm); }
.row__what--attn { color: var(--attn-text); }

/* Status marks on a light list: the console's circles, in light-surface colours. */
.mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--outline);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}
.mark svg { width: 12px; height: 12px; stroke-width: 3; }
.mark--ok { background: var(--ok); color: #fff; box-shadow: none; }
.mark--attn { background: var(--attn); color: var(--ink); box-shadow: none; }
.mark--err { background: var(--err-soft); color: var(--err-text); box-shadow: inset 0 0 0 1px var(--err); }
.mark--live { position: relative; background: var(--accent); box-shadow: none; }
.mark--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.mark--live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: voice-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.desk__console { min-width: 0; min-height: 0; }
.desk__call { height: 100%; }
.desk-list__search { margin: 0 var(--space-6) var(--space-3); }
.desk-list__notice { margin: 0 var(--space-6) var(--space-3); }

.desk__console .console { height: 100%; }

/* ---- Now calling: a slim console docked at the bottom of every page ------------------------ */

.nowbar {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: var(--z-bar);
  width: min(1000px, calc(100vw - 32px));
  border-radius: var(--radius-3xl);
  background: var(--console-bg);
  color: #fff;
  box-shadow: var(--console-shadow), 0 0 0 1px rgb(255 255 255 / 0.06);
  transform: translateX(-50%);
  animation: bar-in 0.5s var(--ease) both;
}
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 24px); } }

.nowbar__test {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-6);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  background: rgb(242 179 71 / 0.16);
  color: var(--warn-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.nowbar__main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto;   /* who, the latest line, the actions */
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}
.nowbar__who { min-width: 0; }
.nowbar__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
}
.nowbar__title span:first-child { overflow: hidden; text-overflow: ellipsis; }
.nowbar__elapsed { flex-shrink: 0; color: rgb(255 255 255 / 0.7); font-weight: var(--weight-normal); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.nowbar__sub { font-size: var(--text-sm); color: rgb(255 255 255 / 0.6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowbar__quote {
  min-width: 0;
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowbar__end { display: flex; align-items: center; gap: var(--space-3); }

.dots { display: flex; gap: 5px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  transition: background-color var(--duration-state) ease, box-shadow var(--duration-state) ease;
}
.dot--confirmed { background: var(--them); box-shadow: none; }
.dot--mismatch  { background: var(--warn); box-shadow: none; }
.dot--answered  { box-shadow: inset 0 0 0 1.5px var(--agent); }

.end-call { gap: 6px; }
.nowbar .link-btn, .console .link-btn { color: rgb(255 255 255 / 0.85); text-decoration-color: rgb(255 255 255 / 0.35); }
.nowbar .link-btn:hover, .console .link-btn:hover { color: #fff; text-decoration-color: #fff; }
.nowbar .icon-btn, .console .icon-btn { color: rgb(255 255 255 / 0.75); }
.nowbar .icon-btn:hover, .console .icon-btn:hover { background: rgb(255 255 255 / 0.08); color: #fff; }

/* Expanded: the full console, rising from the bar. */
.nowpanel {
  position: fixed;
  left: 50%;
  top: calc(var(--header-h) + 16px);
  bottom: 16px;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(1200px, calc(100vw - 32px));
  transform: translateX(-50%);
  animation: panel-up 0.5s var(--ease) both;
}
@keyframes panel-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.nowpanel .console { height: 100%; }
.nowpanel .nowbar__test { border-radius: 0; }

/* The ticket window: the console's frame, a flag where the agent's mark would be. */
.ticket-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(242 179 71 / 0.16);
  color: var(--warn-text);
}
.c-head__pill { display: none; }
.c-side__line { margin-top: var(--space-2); color: rgb(255 255 255 / 0.6); font-size: var(--text-sm); }
.c-side__action { margin-top: var(--space-5); }
.c-foot--stack { display: grid; gap: var(--space-3); }


.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-9) 0 var(--space-2);
  flex-wrap: wrap;
}
.toolbar .search { margin-left: auto; width: 280px; }

.day { margin-top: var(--space-7); }
.day__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); margin: 0 0 var(--space-3) var(--space-2); }
.day .card { padding: var(--space-2); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2xl);
  transition: background-color var(--duration-color) ease;
}
/* The sentence is the button that opens the call; the actions sit beside it, not inside. */
.entry__open {
  display: grid;
  grid-template-columns: 52px 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.entry__open .item__sentence, .entry__open .entry__detail { display: block; }
.entry + .entry { box-shadow: inset 0 1px 0 var(--divider); }
.entry:hover { background: var(--surface-hover); }
.entry__time { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.entry__detail { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }
.entry__done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* ---- Settings --------------------------------------------------------------------------- */

.settings-section { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); }
.people { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  box-shadow: inset 0 1px 0 var(--divider);
}
.person .avatar { cursor: default; }
.person--off { opacity: 0.55; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr 220px auto; gap: var(--space-3); align-items: end; margin-top: var(--space-6); }
/* Settings → Clients (plan 2026-10-22 N13): a row like a person's, the edit form in place, the add form in a grid. */
.client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  box-shadow: inset 0 1px 0 var(--divider);
}
.client-row__name { font-weight: var(--weight-medium); }
.client-row__key { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.client-row .item__actions { align-items: center; gap: var(--space-4); }
.client-row__switch { grid-template-columns: auto auto; align-items: center; gap: var(--space-2); }
.client-row__switch .switch__control { margin: 0; }
.client-row__switch .switch__label { font-size: var(--text-sm); min-width: 2em; }
.client-edit, .client-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: end; }
.client-edit { margin-top: var(--space-3); }
.client-form { margin-top: var(--space-6); }
.client-edit .field + .field, .client-form .field + .field { margin-top: 0; }
.client-form__title { grid-column: 1 / -1; margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); }
.client-edit__wide, .client-edit__actions, .client-form__actions { grid-column: 1 / -1; }
.client-edit__actions, .client-form__actions { display: flex; gap: var(--space-3); align-items: center; }

/* The Overview's own styles: static/css/overview.css (loaded by that page only). */

.status-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; box-shadow: inset 0 1px 0 var(--divider); }
.status-line:first-child { box-shadow: none; }
.status-line__name { min-width: 160px; font-weight: var(--weight-medium); }
.status-line__text { color: var(--text-muted); font-size: var(--text-sm); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--outline); }
.status-dot--ok { background: var(--ok); box-shadow: none; }
.status-dot--bad { background: var(--err); box-shadow: none; }

code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
code { padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--divider); }

/* ---- Sign in ---------------------------------------------------------------------------- */

.signin {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-6);
}
.signin__card {
  width: min(440px, 100%);
  padding: var(--space-8);
  border-radius: var(--radius-panel);
}
.signin__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.signin__brand img { height: 28px; width: auto; margin-left: -0.5rem; filter: var(--logo-filter); }
.signin__title {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}
.signin__lede { color: var(--text-muted); margin-bottom: var(--space-7); }
.signin form .btn { margin-top: var(--space-7); }
.signin .notice { margin-bottom: var(--space-5); }

/* ---- Toasts (bottom right, like the website) ------------------------------------------------ */

.toast-region {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-2xl);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--console-shadow), 0 0 0 1px rgb(255 255 255 / 0.08);
  animation: pop 0.45s var(--ease-pop) both;
}
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: all 0.2s ease; }
.toast__dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--agent); flex-shrink: 0; }
.toast--success .toast__dot { background: var(--them); }
.toast--danger .toast__dot { background: var(--error-on-dark); }
.toast__body { flex: 1; font-size: var(--text-sm); line-height: var(--leading-normal); padding-top: 1px; }
.toast__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.toast__close:hover { opacity: 1; background: rgb(255 255 255 / 0.1); }

/* ---- Tickets ----------------------------------------------------------------------------- */

.ticket-tools { margin: calc(-1 * var(--space-5)) 0 var(--space-7); }
.ticket-tools .search { max-width: 420px; }

/* A row's sentence opens the ticket: a button, but it reads as the text it is. */
.item__sentence--link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.item__sentence--link:hover { color: var(--accent-text); }



/* ---- Motion (guide §9): each animation answers something --------------------------------- */

.rise { animation: rise var(--duration-enter) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

.pop { animation: pop 0.45s var(--ease-pop) both; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

@keyframes voice-bar { from { transform: scaleY(0.15); } to { transform: scaleY(var(--peak, 0.8)); } }
@keyframes voice-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

/* ---- Small screens ---------------------------------------------------------------------- */

/* A desktop: the left column about two fifths of the page (owner, 2026-10-02: it felt packed; the
   console a little smaller), the console beside it. The workspace fills the window: only the list
   and the console scroll, and the console's actions are always in view. */
@media (min-width: 1024px) {
  .page--desk {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h));
    min-height: 640px;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .page--desk > .workspace { flex: 1; min-height: 0; }
  .desk {
    flex: 1;
    min-height: 480px;
    grid-template-columns: minmax(400px, 5fr) minmax(0, 8fr);
  }
  .desk-side { overflow-y: auto; padding: 6px 6px 24px; margin: -6px -6px -24px; }
  .desk-side .desk-list { flex: 1; min-height: 360px; }
}

/* A small desktop: the list a little narrower, and the console stacks its two halves so the
   conversation keeps a readable width (side by side it would be ~240px at 1024px). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .desk { grid-template-columns: 360px minmax(0, 1fr); }
  .desk .c-body { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow-y: auto; }
  .desk .c-conversation { min-height: auto; overflow: visible; }
  .desk .c-conversation > .c-empty { min-height: 0; padding: var(--space-4) 0; }
  .desk .c-side { box-shadow: inset 0 1px 0 var(--console-divider); overflow: visible; }
}

@media (max-width: 1023px) {
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .desk-list__list { overflow: visible; }
  .desk__console {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    padding: 8px;
    background: var(--scrim);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-state) ease, visibility 0s linear var(--duration-state);
  }
  .desk.is-open .desk__console { visibility: visible; opacity: 1; transition: opacity var(--duration-state) ease; }
  .c-back { display: inline-grid; }
  /* Stacked: each part as tall as its content, the body scrolls as one. */
  .c-body { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow-y: auto; }
  .c-body .c-conversation { min-height: auto; overflow: visible; }
  .c-conversation > .c-empty { min-height: 0; padding: var(--space-4) 0; }
  .c-side { box-shadow: inset 0 1px 0 var(--console-divider); overflow: visible; }
  .drawer .c-body { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* The header on a phone: the logo and the account on one row, the three places under them. */
  :root { --header-h: 104px; }
  .topbar__inner { flex-wrap: wrap; height: auto; gap: 0 var(--space-3); padding: var(--space-3) var(--space-4) 0; }
  .wordmark { min-height: 44px; }
  .wordmark__product { display: none; }
  .wordmark img { height: 22px; }
  .topbar__end { margin-left: auto; }
  .safe-pill { padding: 6px; }
  .safe-pill__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav { order: 3; flex-basis: 100%; margin: 0 0 0 calc(-1 * var(--space-3)); }
  .nav a { padding: 12px var(--space-3) 14px; }
  .nav a[aria-current="page"]::after { bottom: 4px; }

  /* Every page: the headline full width, its action under it, full width. */
  .page, .page--desk { padding: var(--space-6) var(--space-4) 200px; }
  .page--desk { padding-bottom: var(--space-7); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-5); margin-bottom: var(--space-6); }
  .page-head .btn { width: 100%; }
  .page-title { max-width: none; }

  .card { padding: var(--space-6) var(--space-5); }
  .item { grid-template-columns: 44px minmax(0, 1fr); }
  .item > .item__actions { grid-column: 2; flex-wrap: wrap; }

  .nowbar { bottom: var(--space-3); width: calc(100vw - 16px); }
  .nowbar__main { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .nowbar__end { gap: var(--space-2); }
  .nowbar__test { padding: 8px var(--space-4); }
  .nowbar__quote, .nowbar .dots { display: none; }
  .nowbar__end .link-btn { display: none; }
  .nowpanel { top: 8px; bottom: 8px; width: calc(100vw - 16px); }

  .c-head { padding: var(--space-4); gap: var(--space-3); }
  .c-head__who { gap: var(--space-3); }
  .c-conversation { padding: var(--space-5) var(--space-4); }
  .c-side, .c-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .c-foot { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .c-foot__row { gap: var(--space-2); }
  .c-foot__row > .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-3); }
  .c-foot .c-fine { margin-left: 0; text-align: left; flex-basis: 100%; }
  .c-foot__row > .link-btn { order: 3; }
  .c-ticket .c-input { flex: 1 1 0; min-width: 0; }
  .c-ticket .btn { flex: none; }
  .c-head__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .c-head__end .pill { display: none; }
  .c-head__pill { display: inline-flex; margin-top: var(--space-2); }
  .c-bubble { max-width: 100%; }
  .wave { display: none; }
  /* The state is said only while the call is live; after it, the report says it. */
  .console:not(.is-live) .c-state { display: none; }
  .c-head__end { gap: var(--space-2); }

  .toolbar { margin-top: var(--space-8); }
  .toolbar .search { width: 100%; margin-left: 0; }
  .entry { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .entry__open { grid-template-columns: 44px minmax(0, 1fr); }
  .entry__time { display: none; }
  .entry > .item__actions { padding-left: 54px; flex-wrap: wrap; }   /* the link text lines up with the sentence */
  .entry > .item__actions:empty { display: none; }

  .inline-form { grid-template-columns: 1fr; }
  .person { grid-template-columns: 36px minmax(0, 1fr); }
  .person .item__actions { grid-column: 2; }
  .client-row { grid-template-columns: minmax(0, 1fr); }
  .settings-section { grid-template-columns: 1fr; }
  .overview-controls { grid-template-columns: 1fr; gap: var(--space-4); }
  .overview-card__head { flex-direction: column; }
  .overview-trend { margin-left: 0; text-align: left; }
  .overview-inputs__row { grid-template-columns: 1fr; }
  .status-line { flex-wrap: wrap; row-gap: 2px; }
  .status-line__text { flex-basis: 100%; padding-left: 22px; }

  .drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .sheet__head { padding: var(--space-6) var(--space-5) var(--space-3); }
  .sheet__body { padding: 0 var(--space-5); }
  .sheet__foot { padding: var(--space-4) var(--space-5); flex-wrap: nowrap; }
  .sheet__foot .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-4); }
  .sheet__foot .btn-primary { margin-left: 0; }
  .pick { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 2px; }
  .pick input { margin-top: 3px; }
  .pick__number { grid-column: 2; }

  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three narrow cards: the name over its number, no line under them. */
  .stages--three .stage { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-3); }
  .stages--three .stage__name { grid-column: 1 / -1; }
  .stages--three .stage__flag { display: none; }
  .stages--three .stage__count { grid-column: 1; grid-row: 2; }
  .stages--three .stage__sub { display: none; }
}

/* ---- Reduced motion: every animation shows its final state -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .live-dot::after, .agent-avatar.is-live::after { display: none; }
  .wave.is-agent span, .wave.is-them span { animation: none; transform: scaleY(var(--peak, 0.6)); }
}