/* Five Faces patient hub — styles.
 *
 * The page is the Five Faces navy with the phone sat in it. Inside the phone,
 * the hub is white and pale blue-grey, with navy for the primary surfaces and
 * the brand blue reserved for the one thing that matters on each screen.
 */

:root {
  --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: Poppins, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fivefaces.com.au */
  --navy: #001a42;
  --navy-deep: #00112b;
  --blue: #00a8ff;
  --blue-deep: #0080c4;
  --blue-tint: #e6f5ff;

  --page: var(--navy);
  --brand: var(--navy);
  --ink: #12203a;
  --muted: #5b6b85;
  --white-soft: rgba(255, 255, 255, 0.78);

  --bg: #f3f6fa;
  --card: #ffffff;
  --hairline: #e1e7f0;
  --ok: #17a56f;
  --ok-tint: #e6f7f0;
  --warn: #d98c00;
  --warn-tint: #fff5e0;
  --error: #d64550;
  --error-tint: #fdecee;

  /* Back arrow, send and call all render at this size. */
  --icon: 22px;
}

* { box-sizing: border-box; }

/* Screens set display, so `hidden` needs to outrank it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Phone sits dead centre of the page, both axes. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
  background-image: radial-gradient(60% 50% at 80% 10%, rgba(0, 168, 255, 0.18), transparent 70%);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================ stage === */

/* Two columns: the copy on the left, the phone on the right. Both are
   centred against each other on the cross axis, and the pair is centred in
   the page by the flex rules on body. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1180px;
}

.intro {
  flex: 1 1 0;
  max-width: 560px;
  /* The logo is pushed to the bottom of the column, so the block needs a
     height to push against — matched to the phone's own height. */
  min-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.intro h1 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.intro p {
  margin: 0 0 12px;
  color: var(--white-soft);
  font-size: 16px;
}
.intro-sub { margin-top: 4px; }

.intro ol,
.intro ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--white-soft);
  font-size: 15px;
}

.intro li { margin-bottom: 8px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: #fff; }

/* The demo identities, so a presenter can read one out. */
.demo-patients {
  list-style: none;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 14px !important;
}
.demo-patients li { margin: 0 !important; line-height: 1.35; }
.demo-patients strong { color: var(--blue); font-weight: 600; }
.demo-note { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }

/* Sits under the copy, and travels with it as the block centres. Opens the
   Spaceman site in a new tab. */
.intro-logo-link {
  display: block;
  padding-top: 36px;
  width: min(340px, 80%);
}

.intro-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Below this the columns can't both breathe, so stack them and let the
   page scroll instead of squeezing the phone. */
@media (max-width: 900px) {
  body { align-items: flex-start; }

  .stage {
    flex-direction: column;
    gap: 40px;
  }

  .intro {
    min-height: 0;
    max-width: min(430px, 100%);
    align-items: flex-start;
  }
  .demo-patients { grid-template-columns: 1fr; }

  .intro-logo-link { padding-top: 24px; }
}

/* ================================================================ phone === */

.phone {
  flex: none;
  width: min(430px, 100%);
  height: min(900px, calc(100vh - 40px));
  padding: 12px;
  border-radius: 52px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 40px 80px rgba(0, 0, 0, 0.6);
}

.app {
  position: relative;
  height: 100%;
  display: grid;
  /* statusbar / header / screen / footer (tabbar or composer) */
  grid-template-rows: auto auto 1fr auto;
  border-radius: 42px;
  overflow: hidden;
  background: #fff;
}

/* Every screen fills the middle row and scrolls independently. */
.screen {
  overflow-y: auto;
  padding: 0 16px 24px;
  background: var(--bg);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ statusbar --- */

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  color: var(--ink);
}
.time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.island {
  width: 106px;
  height: 30px;
  border-radius: 16px;
  background: #000;
}

.indicators {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.indicators svg { fill: currentColor; stroke: none; height: 12px; }
.indicators .signal { width: 18px; }
.indicators .wifi { width: 16px; }
.indicators .battery { width: 26px; }

/* --------------------------------------------------------------- header --- */

header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 4px 18px 10px;
}
#detail-header { grid-template-columns: 40px 1fr auto; }

.brand {
  display: grid;
  place-items: center;
  /* Tapping the logo returns to home from anywhere. */
  cursor: pointer;
}
/* 548x119 artwork. 30px tall keeps it inside the 36px icon-button row. */
.brand-logo { height: 30px; width: auto; display: block; }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.icon-btn svg { width: var(--icon); height: var(--icon); }

/* Who the session is, in the detail header. Empty until verified. */
.who { min-width: 40px; display: grid; justify-items: end; }
.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.who-chip svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* ================================================================= hub === */

.section-title {
  margin: 20px 0 10px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.empty { margin: 24px 4px; color: var(--muted); font-size: 14px; text-align: center; }
.sub { color: var(--muted); font-size: 13.5px; line-height: 1.3; }
.fineprint { margin: 18px 6px 0; font-size: 12px; color: var(--muted); text-align: center; }

.chev { flex: none; width: 18px; height: 18px; color: #b7c1d1; }

/* Document kinds, coloured by what they are. */
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.tag.results { background: var(--ok-tint); color: var(--ok); }
.tag.instructions, .tag.plan { background: var(--warn-tint); color: var(--warn); }
.tag.summary { background: #efe9ff; color: #6a4bd6; }
.tag.info { background: #eef1f6; color: var(--muted); }

/* Buttons. Primary is navy; the blue is kept for the assistant's hero. */
.btn-primary,
.btn-secondary,
.btn-checkin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-secondary { background: var(--card); color: var(--navy); border: 1px solid var(--hairline); }
.btn-primary.wide, .btn-secondary.wide { width: 100%; margin-top: 10px; }
.btn-primary svg, .btn-secondary svg, .btn-checkin svg { width: 16px; height: 16px; stroke-width: 2.4; }
.btn-primary.done { background: var(--ok); }

/* ----------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 168px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(0, 168, 255, 0.55), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(0, 168, 255, 0.25), transparent 60%),
    linear-gradient(135deg, #062a66 0%, var(--navy) 60%, var(--navy-deep) 100%);
  box-shadow: 0 10px 30px rgba(0, 26, 66, 0.25);
}
.hero-copy { padding: 22px 22px 20px; }
.hero-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbe9ff;
}
.hero-copy h2 { margin: 0 0 6px; font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.hero-copy p { margin: 0; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.85); max-width: 30ch; }

.greeting {
  margin: 18px 0 10px;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* --------------------------------------------------------------- locked --- */

.locked-card {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: var(--card);
  border: 1px dashed #c4cfdf;
  border-radius: 18px;
}
.locked-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue-deep);
}
.locked-icon svg { width: 22px; height: 22px; }
.locked-card strong { display: block; font-size: 15.5px; color: var(--navy); }
.locked-card p { margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------------------ next card --- */

.next-card {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 26, 66, 0.22);
}
.next-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.next-card h3 { margin: 6px 0 4px; font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.2; }
.next-what { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.92); }
.next-where { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.75); }
.next-where svg { width: 15px; height: 15px; flex: none; }
.next-prep {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}
.btn-checkin { margin-top: 14px; height: 40px; background: var(--blue); color: #fff; }
.btn-checkin.done { background: var(--ok); }

/* ------------------------------------------------------------------ rows --- */

.rows { display: flex; flex-direction: column; gap: 10px; }

.row-appt,
.row-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 26, 66, 0.06);
}
.row-appt.past { opacity: 0.7; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-body strong { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.row-body .place { display: flex; align-items: center; gap: 5px; }
.row-body .place svg { width: 13px; height: 13px; flex: none; }

.appt-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 58px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--navy);
  line-height: 1;
}
.appt-dow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-deep); }
.appt-day { margin: 2px 0; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.appt-mon { font-size: 11px; color: var(--muted); }
.row-appt.past .appt-date { background: #eef1f6; }
.row-appt.past .appt-dow { color: var(--muted); }

.doc-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eef1f6;
  color: var(--muted);
}
.doc-icon.personal { background: var(--blue-tint); color: var(--blue-deep); }
.doc-icon svg { width: 20px; height: 20px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 10px 0 0;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-deep);
  cursor: pointer;
}
.link-more .chev { color: currentColor; width: 16px; height: 16px; }

.chips { display: flex; gap: 8px; margin: 0 0 14px; }
.chip {
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------- team & cards --- */

.team-card,
.detail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 26, 66, 0.06);
}
.team-card strong { display: block; font-size: 15px; font-weight: 600; }
.team-card > div + div { padding-top: 12px; border-top: 1px solid var(--hairline); }

.detail-card { gap: 4px; }
.detail-card h4 {
  margin: 12px 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-card h4:first-child { margin-top: 0; }
.detail-card p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.plain { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.plain li + li { margin-top: 3px; }

/* --------------------------------------------------------------- detail --- */

#screen-appointment, .screen-document { padding-top: 6px; }
#appointment-detail h2,
.document h2 {
  margin: 10px 0 4px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.detail-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.detail-grid .label,
.entered .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-grid strong { font-size: 15px; }
.detail-grid span:not(.label) { color: var(--muted); font-size: 13.5px; }

.document { padding-bottom: 8px; }
.doc-meta { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.personal-mark { color: var(--blue-deep); font-weight: 600; }
.doc-body {
  padding: 18px 18px 8px;
  background: var(--card);
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.doc-body p { margin: 0 0 12px; }
.doc-body ul { margin: 0 0 12px; padding-left: 20px; }
.doc-body li + li { margin-top: 4px; }

/* -------------------------------------------------------------- account --- */

.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--card);
  border-radius: 16px;
}
.account-card strong { display: block; font-size: 17px; font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.account-card span { color: var(--muted); font-size: 13.5px; }
.avatar-lg {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
}

/* =============================================================== chat === */

#screen-chat { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#transcript::-webkit-scrollbar { width: 6px; }
#transcript::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.row {
  display: flex;
  align-items: flex-end;
}
.row.user { justify-content: flex-end; }

.bubble {
  max-width: 88%;
  /* Half the leading of the 1.5 default — the gap between lines, not the glyphs. */
  line-height: 1.3;
  padding: 12px 15px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 26, 66, 0.05);
}
.bubble p { margin: 0; }

/* The patient's own turns are the navy ones. */
.row.user .bubble {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.row.system {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 20px;
}

/* ------------------------------------------------------------------ card --- */

.card {
  width: 92%;
  max-width: 92%;
  padding: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 10px rgba(0, 26, 66, 0.08);
  overflow: hidden;
}
.card-head {
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.card-text { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px; }
.card-desc { margin: 0; font-size: 14px; line-height: 1.35; }
.card-query { margin: 0; font-size: 14px; font-style: italic; color: var(--muted); }
.card-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.card-note svg { width: 13px; height: 13px; flex: none; }

.card-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--muted);
}
.card-text .card-loading { padding: 0; }
.spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Identity check */
.entered { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entered > div { display: flex; flex-direction: column; gap: 1px; }
.entered strong { font-size: 15px; }

.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
}
.verdict svg { flex: none; width: 22px; height: 22px; stroke-width: 2.4; }
.verdict strong { display: block; font-size: 15px; }
.verdict span { font-size: 13px; color: var(--muted); }
.verdict.ok { background: var(--ok-tint); color: var(--ok); }
.verdict.ok strong { color: var(--ok); }
.verdict.fail { background: var(--error-tint); color: var(--error); }
.verdict.fail strong { color: var(--error); }
.verdict.warn { background: var(--warn-tint); color: var(--warn); }
.verdict.warn strong { color: var(--warn); }
.verdict.locked { background: #eef1f6; color: var(--muted); }
.verdict.locked strong { color: var(--ink); }

/* Appointments */
.appts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.appt { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.35; }
.appt:first-child { padding-top: 0; }
.appt:last-child { border-bottom: 0; padding-bottom: 0; }
.appt-when { font-weight: 600; color: var(--navy); font-size: 14px; }
.appt-what { margin-top: 1px; }
.appt-where { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.appt-where svg { width: 13px; height: 13px; flex: none; }
.appt-prep { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--blue-tint); color: var(--ink); font-size: 12.5px; }

/* Sources: the retrieved passages */
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.source {
  position: relative;
  padding: 10px 12px 10px;
  border-radius: 12px;
  background: var(--bg);
  border-left: 3px solid #c4cfdf;
  cursor: pointer;
}
.source.personal { border-left-color: var(--blue); }
.source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-right: 72px; }
.source-head svg { width: 14px; height: 14px; color: var(--blue-deep); flex: none; }
.source-head strong { font-size: 13.5px; line-height: 1.25; }
.source-meta { font-size: 11.5px; color: var(--muted); }
.source-text { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.source-score {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}

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

#composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 20px;
  background: var(--bg);
}

.pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 8px 0 18px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 26, 66, 0.05);
}

#text-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
#text-input::placeholder { color: #9aa6b8; }

.send {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.send svg { width: var(--icon); height: var(--icon); stroke-width: 2; }

.call {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 168, 255, 0.35);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.call svg { width: var(--icon); height: var(--icon); }
.call:hover { transform: scale(1.04); }
/* Live call turns the button into a hang-up. */
.call[data-on="true"] { background: var(--error); box-shadow: 0 4px 14px rgba(214, 69, 80, 0.3); }
.call[data-on="true"] svg { transform: rotate(135deg); }

/* ---------------------------------------------------------------- tabbar --- */

#tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 10px 18px;
  background: #fff;
  border-top: 1px solid var(--hairline);
}
#tabbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 78px;
  padding: 6px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
#tabbar svg { width: 23px; height: 23px; }
#tabbar button.active { color: var(--navy); }
#tabbar button.active svg { color: var(--blue-deep); }

/* ---------------------------------------------------------------- drawer --- */

.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 17, 43, 0.5); z-index: 5; }

.drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: 78%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }

.drawer-head { padding: 46px 22px 18px; background: var(--navy); color: #fff; }
.drawer-head strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.drawer-head span { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.drawer-logo { height: 26px; width: auto; display: block; margin-bottom: 14px; }

.drawer-links { flex: 1; display: flex; flex-direction: column; padding: 12px 0; }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.drawer-links svg { flex: none; width: 22px; height: 22px; color: var(--blue-deep); }
.drawer-links button:hover { background: var(--bg); }

.drawer-foot { padding: 16px 22px 26px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 14px; }
.drawer-foot .link { display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.drawer-foot strong { display: block; color: var(--error); font-size: 16px; font-weight: 600; }
.drawer-foot span { font-size: 13px; color: var(--muted); }