/* Hanoi Heart Hospital — TâmAI
   Minimalist blue + white theme */

:root {
  --brand: #1f5fe0;          /* primary blue (buttons, links) */
  --brand-strong: #1746b0;
  --brand-ink: #14235a;      /* deep navy for headings */
  --brand-soft: #eaf1ff;     /* tinted panels */
  --brand-soft-2: #f5f8ff;   /* page section wash */
  --ink: #1b2436;
  --muted: #5c6b8a;
  --line: #e3e9f5;
  --white: #ffffff;
  --ok: #16a34a;
  --danger: #dc2626;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -22px rgba(23, 70, 176, 0.35);
  --shadow-sm: 0 8px 20px -14px rgba(23, 70, 176, 0.4);
  --maxw: 1160px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Brand / logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-size: 22px; letter-spacing: -0.02em; color: var(--brand); }
.brand__name span { color: var(--brand-ink); }
/* Hospital-name lockup (two-line brand) */
.brand__lockup { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand__lockup .brand__name { font-size: 18px; color: var(--brand-ink); }
.brand__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.site-footer .brand__sub { color: #93a6d4; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 20px;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--brand-ink);
  font-weight: 500;
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; }

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: 13px;
  color: var(--brand-ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.lang-toggle:hover { border-color: var(--brand); color: var(--brand); }
.lang-toggle svg { flex: none; }
.lang-toggle__code { letter-spacing: 0.03em; }
.lang-toggle--float {
  position: fixed; top: 20px; right: 20px; z-index: 30;
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-strong); color: #fff; }
.btn--ghost { background: #fff; color: var(--brand-ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 24px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--brand-soft-2) 0%, #fff 78%);
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  margin: 0 0 18px;
}
.hero h1 .accent { color: var(--brand); }
.hero p.lede { font-size: 18px; color: var(--muted); max-width: 30rem; margin: 0 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 18px; }
.trust__t { white-space: nowrap; }
.trust { display: flex; align-items: center; gap: 12px; }
.trust__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}
.trust__t { font-weight: 700; font-size: 14px; color: var(--brand-ink); }
.trust__s { font-size: 13px; color: var(--muted); }

/* ---------- Chat preview card ---------- */
.chat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chat-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.chat-card__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-soft); display: grid; place-items: center; color: var(--brand);
}
.chat-card__title { font-weight: 700; color: var(--brand-ink); font-size: 15px; }
.chat-card__status { font-size: 12px; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.chat-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-card__body { padding: 18px; background: var(--brand-soft-2); display: grid; gap: 12px; }
.bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.bubble--bot { background: #fff; border: 1px solid var(--line); color: var(--ink); border-top-left-radius: 4px; }
.bubble--me { background: var(--brand); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.quick-replies { display: grid; gap: 8px; }
.quick-replies button {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--brand-ink);
  cursor: pointer;
}
/* .quick-replies button:hover { border-color: var(--brand); color: var(--brand); } */
.chat-card__input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--line); background: #fff;
}
.chat-card__input input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.chat-card__input .send {
  width: 40px; height: 40px; border: none; border-radius: 10px;
  background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center;
}

/* ---------- Section scaffolding ---------- */
.section { padding: 64px 0; }
.section--tint { background: var(--brand-soft-2); }
.section__head { text-align: center; max-width: 40rem; margin: 0 auto 40px; }
.section__head h2 { font-size: clamp(26px, 3vw, 34px); color: var(--brand-ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.section__head p { color: var(--muted); font-size: 17px; margin: 0; }

/* ---------- Feature cards ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.feature:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feature__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 16px;
}
.feature h3 { font-size: 17px; color: var(--brand-ink); margin: 0 0 8px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  position: relative;
}
.step__num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  display: grid; place-items: center; margin-bottom: 14px; font-size: 15px;
}
.step h4 { margin: 0 0 6px; color: var(--brand-ink); font-size: 15.5px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand-ink);
  color: #cdd8f2;
  padding: 36px 0;
}
.site-footer .container { display: block; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name span { color: #a9c0f2; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.footer-col { min-width: 0; }
.footer-h {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.footer-note { margin: 12px 0 0; font-size: 13px; color: #93a6d4; }
.footer-list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; font-style: normal; line-height: 1.5; }
.footer-list span { display: flex; align-items: flex-start; gap: 8px; }
.footer-list svg { flex: none; margin-top: 3px; color: #a9c0f2; }
.footer-list strong { color: #fff; font-weight: 600; white-space: nowrap; }
.footer-list a { color: #cdd8f2; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-dim { color: #8fa2cd; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #cdd8f2;
  transition: background .15s ease, color .15s ease;
}
.footer-social a:hover { background: rgba(255,255,255,.2); color: #fff; }
.footer-legal {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Auth page ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--white);
}
.auth-aside {
  background: linear-gradient(160deg, var(--brand-strong), var(--brand) 60%, #2f74f0);
  color: #fff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; right: -80px; bottom: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.auth-aside .brand__name, .auth-aside .brand__name span { color: #fff; }
.auth-aside h2 { font-size: 30px; line-height: 1.2; margin: 28px 0 14px; max-width: 20rem; }
.auth-aside p { color: rgba(255,255,255,0.85); max-width: 24rem; }
.auth-aside ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.auth-aside li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.auth-aside li svg { flex: none; }

.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { display: none; }
.auth-card h1 { font-size: 26px; color: var(--brand-ink); margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 26px; }

.tabs { display: flex; background: var(--brand-soft); border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.tabs button {
  flex: 1; border: none; background: transparent; font: inherit; font-weight: 600;
  padding: 9px; border-radius: 9px; cursor: pointer; color: var(--muted);
}
.tabs button.is-active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,95,224,0.15); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

.form-msg { font-size: 14px; padding: 10px 12px; border-radius: 10px; margin-bottom: 16px; display: none; }
.form-msg.show { display: block; }
.form-msg--error { background: #fdecec; color: var(--danger); border: 1px solid #f6c9c9; }
.form-msg--ok { background: #ecf9f0; color: var(--ok); border: 1px solid #bce6c9; }

.auth-alt { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 24px; }

.hidden { display: none !important; }

/* ================= Chat page ================= */
/* Lock the page to the viewport so only the message thread scrolls. */
body.chat-page { height: 100vh; display: flex; flex-direction: column; background: var(--brand-soft-2); overflow: hidden; }
body.chat-page .site-header { flex: none; }

.chat-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 20px 16px;
}
.chat-window {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ----- Conversation head ----- */
.chat-window__head {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.chat-window__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-soft); display: grid; place-items: center; flex: none;
}
.chat-window__meta { display: flex; flex-direction: column; line-height: 1.25; }
.chat-window__title { font-weight: 700; color: var(--brand-ink); font-size: 15px; }
.chat-window__status { font-size: 12px; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.chat-window__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-window__status.is-typing { color: var(--muted); }
.chat-window__status.is-typing::before { background: var(--muted); }

/* ----- Message thread ----- */
.chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--brand-soft-2);
}

/* One message = optional avatar + a bubble/time group */
.msg { display: flex; align-items: flex-end; gap: 9px; max-width: 86%; }
.msg--me { align-self: flex-end; flex-direction: row-reverse; }
.msg--bot { align-self: flex-start; }
.msg__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--brand-soft); display: grid; place-items: center;
}
.msg__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg--me .msg__group { align-items: flex-end; }
.msg__time { font-size: 11px; color: var(--muted); padding: 0 4px; }

/* Reuse .bubble base; widen for the full-page thread and preserve newlines. */
.chat-thread .bubble { max-width: 100%; white-space: pre-wrap; word-wrap: break-word; }
.msg--bot .bubble { background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.msg--me .bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }

/* ----- Typing indicator ----- */
.bubble.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.bubble.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  opacity: .5; animation: chat-dot 1.2s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: .18s; }
.bubble.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ----- Quick-reply starter chips ----- */
.chat-quick {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px 0;
}
.chat-quick button {
  background: var(--brand-soft); border: 1px solid transparent; border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--brand-strong); cursor: pointer; transition: border-color .15s, background .15s;
}
.chat-quick button:hover { border-color: var(--brand); background: #fff; }

/* ----- Composer ----- */
.chat-composer {
  flex: none;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 20px 6px;
}
.chat-composer__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 14px; font: inherit; font-size: 14px; line-height: 1.5;
  max-height: 140px; overflow-y: auto;
}
.chat-composer__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.chat-composer__input:disabled { background: var(--brand-soft-2); }
.chat-composer__send {
  width: 44px; height: 44px; flex: none; border: none; border-radius: 12px;
  background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.chat-composer__send:hover:not(:disabled) { background: var(--brand-strong); }
.chat-composer__send:disabled { opacity: .55; cursor: not-allowed; }
.chat-composer__mic {
  width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.chat-composer__mic:hover { border-color: var(--brand); color: var(--brand); }
.chat-composer__mic.is-listening { background: var(--brand); border-color: var(--brand); color: #fff; animation: voice-pulse 1.4s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--brand-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
.chat-voice-status {
  flex: none; text-align: center;
  font-size: 12.5px; color: var(--muted); margin: 0; padding: 0 20px 6px;
}
.chat-disclaimer { flex: none; text-align: center; font-size: 11.5px; color: var(--muted); margin: 0; padding: 4px 20px 12px; }

/* ================= Chat side panels ================= */
/* The panels are anchored to the left/right edges. The shell reserves a fixed
   gutter on each side for them, so the chat window fills the middle and never
   moves or resizes when a panel collapses to its rail — only the gutter's
   content changes. */
.chat-shell {
  position: relative;
  align-items: stretch;
  overflow: hidden;
  padding-left: 304px;
  padding-right: 304px;
}
.chat-window { flex: 1 1 auto; max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }

.chat-sidebar {
  position: absolute;
  top: 20px;
  bottom: 20px;
  z-index: 5;
  width: 288px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: width 0.22s ease;
}
.chat-sidebar--left { left: 16px; }
.chat-sidebar--right { right: 16px; }

/* Collapsed = a thin, anchored tab rail with just an expand handle. */
.chat-sidebar.is-collapsed { width: 48px; }
.chat-sidebar.is-collapsed > :not(.chat-sidebar__expand) { display: none; }
.chat-sidebar.is-collapsed .chat-sidebar__expand { display: flex; }

.chat-sidebar__expand {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  border: none;
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-sidebar__expand:hover { background: var(--brand-soft-2); color: var(--brand); }
.chat-sidebar__expand svg { flex: none; color: var(--brand); }
.chat-sidebar__expand-label {
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chat-sidebar__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.chat-sidebar__title { font-weight: 700; color: var(--brand-ink); font-size: 14px; white-space: nowrap; }
.chat-sidebar__collapse {
  width: 30px; height: 30px; flex: none;
  border: none; border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.chat-sidebar__collapse:hover { background: var(--brand-soft); color: var(--brand); }

/* Toggle buttons living in the conversation head */
.chat-window__head { justify-content: flex-start; }
.chat-window__meta { flex: 1; }
.chat-window__toggle {
  width: 38px; height: 38px; flex: none;
  border: none; border-radius: 10px; background: transparent;
  color: var(--brand-ink); cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-window__toggle:hover { background: var(--brand-soft); color: var(--brand); }

/* ----- New chat button ----- */
.new-chat-btn {
  flex: none;
  margin: 14px 16px 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--brand); border-radius: 12px;
  background: var(--brand); color: #fff;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.15s ease;
}
.new-chat-btn:hover { background: var(--brand-strong); }

/* ----- History list ----- */
.chat-history {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.chat-history__empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 8px; margin: 0; }

.hist-item {
  display: flex; align-items: center; gap: 4px;
  border-radius: 10px;
  padding: 2px 4px 2px 2px;
}
.hist-item:hover { background: var(--brand-soft-2); }
.hist-item.is-active { background: var(--brand-soft); }
.hist-item__main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--brand-ink);
  padding: 9px 8px; text-align: left; border-radius: 8px;
}
.hist-item__main svg { flex: none; color: var(--muted); }
.hist-item.is-active .hist-item__main { font-weight: 600; }
.hist-item.is-active .hist-item__main svg { color: var(--brand); }
.hist-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item__actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s ease; }
.hist-item:hover .hist-item__actions, .hist-item.is-active .hist-item__actions { opacity: 1; }
.hist-icon {
  width: 26px; height: 26px; flex: none;
  border: none; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.hist-icon:hover { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.hist-item__edit {
  flex: 1; min-width: 0;
  font: inherit; font-size: 13.5px; color: var(--brand-ink);
  border: 1px solid var(--brand); border-radius: 8px;
  padding: 8px 8px; margin: 1px;
}
.hist-item__edit:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }

/* ================= Calendar ================= */
.calendar { flex: none; padding: 14px 16px 6px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 700; color: var(--brand-ink); font-size: 14px; }
.cal-nav {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--brand-ink); cursor: pointer; display: grid; place-items: center;
}
.cal-nav:hover { border-color: var(--brand); color: var(--brand); }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-weekdays span { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.cal-weekdays { margin-bottom: 4px; }
.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: none; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
  transition: background 0.12s ease;
}
.cal-day:hover { background: var(--brand-soft); }
.cal-day.is-outside { color: var(--muted); opacity: 0.4; }
/* Past dates. Faded, and on the patient calendar also disabled — nothing there
   can be booked. The capacity dot fades with it so a red past day doesn't read
   as an urgent "full". */
.cal-day.is-past { color: var(--muted); opacity: 0.45; }
.cal-day.is-past:disabled { cursor: default; }
.cal-day.is-past:disabled:hover { background: none; }
.cal-day.is-past .dot { opacity: 0.5; }
.cal-day.is-today { font-weight: 700; color: var(--brand); }
.cal-day.is-selected { background: var(--brand); color: #fff; }
.cal-day.is-selected.is-today { color: #fff; }
/* Booked-appointment marker */
.cal-day.has-appt::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--ok);
}
.cal-day.is-selected.has-appt::after { background: #fff; }

.cal-detail { flex: none; padding: 12px 16px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.cal-detail__date { display: block; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); margin-bottom: 8px; }
.cal-appts { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.cal-appt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 9px;
  background: var(--brand-soft-2);
}
.cal-appt__time { font-weight: 700; color: var(--brand-ink); font-size: 13px; flex: none; }
.cal-appt__label { color: var(--muted); font-size: 13px; }
.cal-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 8px; margin: 0; }
.cal-hint { flex: none; margin: auto 16px 14px; padding-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
/* Documents panel pinned to the bottom of the right sidebar. */
.cal-detail--docs { margin-top: auto; padding-bottom: 14px; }
.cal-detail--docs .cal-appts { max-height: 120px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 760px) {
  .nav { display: none; }
}
@media (max-width: 560px) {
  .feature-grid, .steps { grid-template-columns: 1fr; }
}
/* Backdrop behind an open drawer on narrow screens. Tapping it closes the
   drawer, which is the gesture people expect and the only way out on a phone
   where the collapse button can sit off to one side. */
.chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(20, 35, 90, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border: 0;
  padding: 0;
}
.chat-backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* Below the docked width the gutters would squeeze the chat too far, so the
   panels become flush overlay drawers instead. The chat window stays centered
   underneath and still doesn't move when a drawer opens or closes.
   Only one drawer opens at a time down here — chat.js enforces that, because
   two 288px overlays on a phone would cover the screen and each other. */
@media (max-width: 1080px) {
  .chat-shell { padding-left: 16px; padding-right: 16px; }
  .chat-window { max-width: 760px; }
  .chat-sidebar {
    top: 0;
    bottom: 0;
    z-index: 15;
    max-width: 86%;
    border-radius: 0;
    box-shadow: 0 0 40px rgba(20, 35, 90, 0.28);
  }
  .chat-sidebar--left { left: 0; }
  .chat-sidebar--right { right: 0; }
  /* Collapsed rails stay pinned to the edges and must not dim the page. */
  .chat-sidebar.is-collapsed { box-shadow: var(--shadow-sm); }
}

/* Phone. Kept AFTER the 1080px block on purpose: both match at this width, and
   whichever comes last wins — previously the 1080px padding silently overrode
   the full-bleed layout intended here. */
@media (max-width: 760px) {
  /* Padding must clear the collapsed rails: they're absolutely positioned
     overlays, so without a gutter they sit ON TOP of the chat and clip the
     quick-reply chips and the send button. Keep this in step with the
     .is-collapsed width below. */
  .chat-shell { padding-left: 40px; padding-right: 40px; }
  .chat-window { max-width: none; border: none; border-radius: 0; box-shadow: none; }
  .msg { max-width: 92%; }
  /* Wide enough to read a conversation title, narrow enough to still show the
     chat behind it, so it reads as a drawer rather than a page change. */
  .chat-sidebar { width: 300px; max-width: 82%; }
  /* Rails shrink so two of them don't eat the composer's width. */
  .chat-sidebar.is-collapsed { width: 40px; }
  .chat-sidebar__expand { padding: 12px 0; gap: 10px; }
  .chat-sidebar__expand-label { font-size: 12px; }

  /* The two-line hospital lockup wraps to three lines at this width and
     collides with its own subtitle. Drop to a single compact line. */
  .chat-page .site-header .container { height: auto; padding: 10px 14px; gap: 10px; }
  .chat-page .brand__mark { width: 26px; height: 26px; }
  .chat-page .brand { gap: 8px; min-width: 0; }
  .chat-page .brand__lockup .brand__name {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-page .brand__sub { display: none; }
  .chat-page .header-right { gap: 8px; flex: none; }
}

@media (max-width: 380px) {
  .chat-shell { padding-left: 34px; padding-right: 34px; }
  .chat-sidebar { max-width: 90%; }
  .chat-sidebar.is-collapsed { width: 34px; }
  /* Below this the vertical rail label competes with the message area. */
  .chat-sidebar__expand-label { display: none; }
  .chat-page .brand__lockup .brand__name { font-size: 13px; }
}



/* ================= Clinician calendar ================= */
.doctor-shell { padding: 28px 0 48px; background: var(--brand-soft-2); min-height: calc(100vh - 72px); }
.doctor-who { font-size: 13.5px; font-weight: 600; color: var(--brand-ink); }

.doctor-gate {
  max-width: 460px; margin: 60px auto; padding: 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center; box-shadow: var(--shadow-sm);
}
.doctor-gate p { margin: 0 0 14px; color: var(--muted); }
.doctor-gate .hidden { display: none; }

.doctor-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: start; }
.doctor-grid.hidden { display: none; }

.doctor-cal, .doctor-day {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.doctor-cal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doctor-cal__head h2 { margin: 0; font-size: 19px; color: var(--brand-ink); }
.doctor-cal__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.doctor-cal__nav { display: flex; gap: 8px; }

.doctor-area { display: flex; flex-direction: column; gap: 5px; margin: 16px 0 12px; font-size: 12.5px; color: var(--muted); }
.doctor-area select {
  font: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}

.cal-grid--doctor { gap: 4px; }
.cal-grid--doctor .cal-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px;
  background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.cal-grid--doctor .cal-day:hover { background: var(--brand-soft-2); border-color: var(--line); }
.cal-grid--doctor .cal-day.is-outside { color: #c2ceda; }
/* Staff can still open a past day to see who attended, so it keeps its hover
   state — greyed means "behind us", not "unavailable". */
.cal-grid--doctor .cal-day.is-past { color: var(--muted); opacity: 0.5; }
.cal-grid--doctor .cal-day.is-past:hover { opacity: 0.8; }
.cal-grid--doctor .cal-day.is-past.is-selected { opacity: 1; color: #fff; }
.cal-grid--doctor .cal-day.is-today .cal-day__num { font-weight: 800; color: var(--brand); }
.cal-grid--doctor .cal-day.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.cal-grid--doctor .cal-day.is-selected .cal-day__num { color: #fff; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 16px 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.cal-legend li { display: flex; align-items: center; gap: 6px; }

.doctor-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.doctor-day__head h3 { margin: 0; font-size: 16px; color: var(--brand-ink); }
.doctor-day__count { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.doctor-day__list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.doctor-day__empty { margin: 0; padding: 22px 6px; text-align: center; font-size: 13px; color: var(--muted); }

.doctor-appt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--brand-soft-2); border-left: 3px solid var(--brand);
}
.doctor-appt__time { font-weight: 700; font-size: 14px; color: var(--brand-ink); flex: none; min-width: 46px; }
.doctor-appt__who { display: flex; flex-direction: column; min-width: 0; }
.doctor-appt__name { font-size: 13.5px; color: var(--ink); }
.doctor-appt__phone { font-size: 12.5px; color: var(--brand); text-decoration: none; }
.doctor-appt__phone:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .doctor-grid { grid-template-columns: 1fr; }
  .doctor-day__list { max-height: none; }
}

/* Legend swatches, now squares to match the cells. */
.dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: none;
}
.dot--green  { background: #dcfce7; box-shadow: inset 0 0 0 1px #86efac; }
.dot--orange { background: #fef3c7; box-shadow: inset 0 0 0 1px #fcd34d; }
.dot--red    { background: #fee2e2; box-shadow: inset 0 0 0 1px #fca5a5; }

/* ================= Capacity fills ================= */
/* The whole day cell carries the capacity colour. Shared by the clinician and
   patient calendars so a date can never read green in one view and red in
   another; bands are decided server-side (/api/v1/appointments/capacity).

   Tinted backgrounds with darker text rather than saturated blocks: the date
   number has to stay legible, and three saturated colours across a month grid
   is unreadable. Each pairing clears WCAG AA for normal text. */
.cal-day.cal-day--green  { background: #dcfce7; color: #14532d; }
.cal-day.cal-day--orange { background: #fef3c7; color: #78350f; }
.cal-day.cal-day--red    { background: #fee2e2; color: #7f1d1d; }
.cal-day.cal-day--green:hover  { background: #bbf7d0; }
.cal-day.cal-day--orange:hover { background: #fde68a; }
.cal-day.cal-day--red:hover    { background: #fecaca; }

/* Selection and today must survive the fill: without these the blue selected
   state loses to the capacity background and the day looks unselected. */
.cal-day.is-selected,
.cal-day.is-selected.cal-day--green,
.cal-day.is-selected.cal-day--orange,
.cal-day.is-selected.cal-day--red {
  background: var(--brand);
  color: #fff;
}
.cal-day.is-today.cal-day--green,
.cal-day.is-today.cal-day--orange,
.cal-day.is-today.cal-day--red { box-shadow: inset 0 0 0 2px var(--brand); }