/* ============================================================================
   TheThs Assistant — standalone application
   ----------------------------------------------------------------------------
   A full-page chat surface with a persistent sidebar, meant to run on its own
   domain or wrapped as a mobile app.

   THE PALETTE CONSTRAINT
   #fcaa2a on white measures 1.92:1 and fails every WCAG threshold. So:

       #fcaa2a is a FILL and a GLOW, never small text on a light surface.
       On light grounds, amber text is #b45309   (5.02:1 — passes AA).
       On amber fills, ink is #1a1206            (9.64:1).
       On dark grounds, #fcaa2a is excellent      (9.86:1).

   The app is dark-first because that is where this brand colour is genuinely
   usable rather than decorative. A light theme follows the system setting.
   ========================================================================= */

:root {
  --amber-300: #ffd75e;
  --amber-400: #fcbf55;
  --amber-500: #fcaa2a;
  --amber-600: #f0930f;
  --amber-700: #b45309;

  --grad-brand: linear-gradient(135deg, #ffd75e 0%, #fcaa2a 45%, #f0930f 100%);

  /* The "AI" gradient. Amber-anchored so it reads as TheThs rather than as a
     generic assistant, with violet and teal carrying the motion. */
  --grad-aurora: linear-gradient(115deg,
      #fcaa2a 0%, #ff8a3d 18%, #d94fd0 38%,
      #6f7bf7 58%, #3fd0c9 78%, #fcaa2a 100%);

  --bg-0: #0a0806;
  --bg-1: #100d09;
  --bg-2: #17130d;
  --bg-3: #1f1a13;

  --text-1: #f7f3ec;
  --text-2: #c3baac;
  --text-3: #8b8375;

  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  --glass: rgba(23, 19, 13, .72);
  --glass-strong: rgba(16, 13, 9, .96);
  --blur: saturate(180%) blur(22px);

  --bubble-user: linear-gradient(135deg, #fcaa2a, #f0930f);
  --bubble-user-ink: #1a1206;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 150ms;
  --t-mid: 260ms;
  --t-slow: 440ms;

  --sidebar-w: 268px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "DM Sans", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-0: #fffdf9;
  --bg-1: #fff8ee;
  --bg-2: #ffffff;
  --bg-3: #fdf3e4;
  --text-1: #1a1206;
  --text-2: #5c5344;
  --text-3: #8a8172;
  --line: rgba(26, 18, 6, .10);
  --line-strong: rgba(26, 18, 6, .18);
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .98);
  color-scheme: light;
}

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

html, body {
  margin: 0;
  height: 100%;
  /* dvh, never vh: on mobile Safari and Chrome 100vh sits under the browser
     chrome and the composer ends up below the fold. */
  min-height: 100dvh;
  overflow: hidden;
}

body {
  font: 15px/1.6 var(--font);
  color: var(--text-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, textarea { font-family: inherit; }

/* ============================================================================
   Shell
   ========================================================================= */

.mq-shell { display: flex; height: 100dvh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.mq-side {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  transition: margin-left var(--t-mid) var(--e-out);
}

.mq-side__head {
  padding: 14px 12px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* No background plate. The mark is already an amber triangle on transparency,
   so a gradient square behind it would put amber on amber and lose the shape. */
.mq-logo {
  width: 34px;
  height: 31px;
  flex: none;
  object-fit: contain;
  display: block;
}

.mq-wordmark { font-size: 15px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }

/* MedQbit. "Med" takes the theme's ink - black on light, near-white on dark;
   literal #000 would vanish against the dark ground. "Qbit" is exact brand
   amber in both themes: a logotype is exempt from text-contrast rules, and
   the brand colour must not shift between screens. */
.mq-wordmark__name { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.mq-wordmark__med  { color: var(--text-1); }
.mq-wordmark__qbit { color: #fcaa2a; }

.mq-wordmark small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--text-2); letter-spacing: .01em; }

.mq-side__body { flex: 1; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.mq-side__body::-webkit-scrollbar { width: 7px; }
.mq-side__body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.mq-newchat {
  width: calc(100% - 8px);
  margin: 0 4px 12px;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(252, 170, 42, .34);
  background: rgba(252, 170, 42, .09);
  color: var(--amber-400);
  font: 600 13.5px/1 var(--font);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mq-newchat:hover  { background: rgba(252, 170, 42, .18); }
.mq-newchat:active { transform: scale(.985); }
.mq-newchat svg { width: 15px; height: 15px; }

.mq-side__label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 8px 6px;
}

/* ── Sidebar items ────────────────────────────────────────────────────────── */

.mq-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: 500 13.5px/1.35 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mq-item:hover { background: rgba(255, 255, 255, .06); color: var(--text-1); }
.mq-item[aria-current="true"] { background: rgba(252, 170, 42, .12); color: var(--amber-400); }
.mq-item:focus-visible { outline: 2px solid var(--amber-500); outline-offset: -2px; }

.mq-item__icon { width: 17px; height: 17px; flex: none; opacity: .85; }
.mq-item__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Soon" is on the item itself, not hidden behind a click. Someone scanning
   the sidebar should be able to tell what exists before they invest a tap. */
.mq-soon {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2.5px 6px;
  border-radius: var(--r-pill);
  background: rgba(111, 123, 247, .18);
  border: 1px solid rgba(111, 123, 247, .34);
  color: #a9b2ff;
  flex: none;
}
:root[data-theme="light"] .mq-soon { color: #4d55c9; background: rgba(111, 123, 247, .12); }

/* ── History rows ─────────────────────────────────────────────────────────── */

.mq-thread { position: relative; }
.mq-thread .mq-item { padding-right: 32px; }

.mq-thread__menu {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: none;
  place-items: center;
}
.mq-thread:hover .mq-thread__menu,
.mq-thread__menu:focus-visible { display: grid; }
.mq-thread__menu:hover { background: rgba(255, 255, 255, .1); color: var(--text-1); }
.mq-thread__menu svg { width: 14px; height: 14px; }

.mq-empty {
  padding: 14px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ── Account ──────────────────────────────────────────────────────────────── */

.mq-side__foot { padding: 8px; border-top: 1px solid var(--line); position: relative; }


.mq-account {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 0; border-radius: var(--r-md);
  background: transparent;
  color: var(--text-1);
  font: 500 13px/1.3 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out);
}
.mq-account:hover { background: rgba(255, 255, 255, .06); }
.mq-account:focus-visible { outline: 2px solid var(--amber-500); outline-offset: -2px; }

.mq-avatar {
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: var(--bubble-user-ink);
  display: grid; place-items: center;
  font: 700 11.5px/1 var(--font);
  flex: none;
}
.mq-avatar--guest { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line-strong); }

.mq-account__meta { flex: 1; min-width: 0; }
.mq-account__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-account__sub  { font-size: 11px; color: var(--text-3); }

.mq-menu {
  position: absolute;
  left: 8px; right: 8px; bottom: calc(100% + 6px);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  padding: 6px;
  z-index: 30;
  animation: mq-pop var(--t-fast) var(--e-out) both;
}
.mq-menu[hidden] { display: none; }

/* The menu now carries sections, so it can outgrow a short phone. Capping it
   against the viewport keeps the last item — "Delete my account" — reachable
   instead of clipped off the top edge. */
.mq-menu { max-height: min(74dvh, 560px); overflow-y: auto; overscroll-behavior: contain; }

.mq-menu__label {
  padding: 9px 10px 4px;
  font: 700 10px/1 var(--font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* No heading above the very first group: the account row it springs from is
   already the title. */
.mq-menu__label:first-child { padding-top: 4px; }

@keyframes mq-pop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.mq-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--text-1);
  font: 500 13px/1.3 var(--font);
  text-align: left;
  cursor: pointer;
}
.mq-menu__item:hover { background: rgba(255, 255, 255, .07); }
.mq-menu__item:focus-visible { outline: 2px solid var(--amber-500); outline-offset: -2px; }
.mq-menu__item--danger { color: #ff8f7a; }
.mq-menu__item svg { width: 15px; height: 15px; opacity: .8; }
.mq-menu__sep { height: 1px; background: var(--line); margin: 5px 2px; }

/* ============================================================================
   Main column
   ========================================================================= */

.mq-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--bg-0); }

.mq-top {
  height: 52px;
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  position: relative;
  z-index: 5;
}

.mq-top__title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mq-iconbtn {
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mq-iconbtn:hover { background: rgba(255, 255, 255, .07); color: var(--text-1); }
.mq-iconbtn:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.mq-iconbtn svg { width: 17px; height: 17px; }

.mq-burger { display: none; }

/* ── Beta ─────────────────────────────────────────────────────────────────── */

.mq-beta-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(252, 170, 42, .14);
  border: 1px solid rgba(252, 170, 42, .34);
  color: var(--amber-400);
  flex: none;
}
:root[data-theme="light"] .mq-beta-chip {
  /* Amber text fails contrast on a light ground; 700 passes AA. */
  color: var(--amber-700);
  background: rgba(252, 170, 42, .12);
}

.mq-beta {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg,
      rgba(252, 170, 42, .13) 0%,
      rgba(217, 79, 208, .07) 45%,
      rgba(111, 123, 247, .07) 100%);
  animation: mq-beta-in var(--t-slow) var(--e-out) both;
}
.mq-beta[hidden] { display: none; }

@keyframes mq-beta-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.mq-beta__dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  flex: none;
  background: var(--grad-aurora);
  background-size: 300% 300%;
  animation: mq-drift 4s ease-in-out infinite;
}

.mq-beta__text {
  margin: 0;
  flex: 1;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--text-2);
}
.mq-beta__text strong { color: var(--text-1); font-weight: 650; }

/* The brand line sits on its own row on narrow screens so the welcome
   sentence stays readable rather than wrapping around it. */
.mq-beta__brand {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
}

.mq-beta__close {
  width: 26px; height: 26px;
  flex: none;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.mq-beta__close:hover { background: rgba(255, 255, 255, .08); color: var(--text-1); }
.mq-beta__close:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.mq-beta__close svg { width: 14px; height: 14px; }

/* ── Scroll region ────────────────────────────────────────────────────────── */

.mq-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mq-scroll::-webkit-scrollbar { width: 9px; }
.mq-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }

.mq-log {
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Welcome ──────────────────────────────────────────────────────────────── */

.mq-welcome { padding: 8vh 4px 0; text-align: center; }

/* The logo sits in front; the aurora is a soft halo behind it, so the brand
   mark reads first and the gradient stays atmosphere rather than decoration. */
.mq-welcome__orb {
  position: relative;
  width: 92px;
  height: 84px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
}

.mq-welcome__orb img {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.mq-welcome__orb::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: var(--r-pill);
  background: var(--grad-aurora);
  background-size: 300% 300%;
  filter: blur(20px);
  opacity: .42;
  animation: mq-drift 9s ease-in-out infinite;
}

@keyframes mq-drift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

.mq-welcome h1 {
  font-size: clamp(23px, 4.4vw, 31px);
  line-height: 1.2;
  letter-spacing: -.022em;
  margin: 0 0 9px;
  font-weight: 680;
}

.mq-welcome p { color: var(--text-2); margin: 0 auto 26px; max-width: 46ch; font-size: 14.5px; }

.mq-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 9px; text-align: left; }

.mq-starter {
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-1);
  font: 500 13.5px/1.4 var(--font);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
.mq-starter:hover { border-color: rgba(252, 170, 42, .42); background: var(--bg-2); transform: translateY(-1px); }
.mq-starter:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.mq-starter small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 4px; font-weight: 400; }

/* ── Messages ─────────────────────────────────────────────────────────────── */

.mq-turn { display: flex; gap: 12px; animation: mq-rise var(--t-mid) var(--e-out) both; }
.mq-turn--user { flex-direction: row-reverse; }

@keyframes mq-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.mq-turn__avatar {
  width: 28px; height: 28px;
  border-radius: 9px;
  flex: none;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font);
}
/* The bot's mark is the logo itself — again with no plate behind it. */
.mq-turn--bot  .mq-turn__avatar { background: transparent; }
.mq-turn--user .mq-turn__avatar { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); }
.mq-turn__avatar svg { width: 15px; height: 15px; }
.mq-turn__avatar img { width: 28px; height: 26px; object-fit: contain; display: block; }

.mq-turn__body { min-width: 0; flex: 1; }
.mq-turn--user .mq-turn__body { display: flex; justify-content: flex-end; }

.mq-bubble {
  padding: 11px 15px;
  border-radius: var(--r-md);
  font-size: 14.8px;
  line-height: 1.62;
  /* Model output is not always tidy — this stops a long URL forcing the whole
     column to scroll sideways. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.mq-bubble--user {
  background: var(--bubble-user);
  color: var(--bubble-user-ink);
  border-bottom-right-radius: 5px;
  font-weight: 500;
  max-width: 82%;
}
.mq-bubble--bot   { background: transparent; padding-left: 0; padding-right: 0; }
.mq-bubble--error { background: rgba(220, 80, 60, .13); border: 1px solid rgba(220, 80, 60, .32); border-radius: var(--r-md); padding: 11px 15px; }

.mq-caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -.16em;
  border-radius: 1px;
  background: var(--amber-500);
  box-shadow: 0 0 8px rgba(252, 170, 42, .9);
  animation: mq-blink 1.05s steps(2, start) infinite;
}
@keyframes mq-blink { 50% { opacity: 0; } }

/* ── Thinking ─────────────────────────────────────────────────────────────── */

.mq-thinking { display: flex; flex-direction: column; gap: 9px; padding: 3px 0; }

.mq-thinking__label {
  font-size: 13px;
  color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}

/* The moving gradient. Naming the work ("searching doctors in Saket") is what
   makes a two-second wait feel responsive rather than broken — the motion
   alone is decoration. */
.mq-thinking__dot {
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  background: var(--grad-aurora);
  background-size: 300% 300%;
  animation: mq-drift 2.6s ease-in-out infinite;
  flex: none;
}

.mq-shimmer {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .045) 0%,
    rgba(252, 170, 42, .34) 30%,
    rgba(217, 79, 208, .34) 45%,
    rgba(111, 123, 247, .34) 58%,
    rgba(63, 208, 201, .3) 70%,
    rgba(255, 255, 255, .045) 100%);
  background-size: 220% 100%;
  animation: mq-sweep 1.6s linear infinite;
}
.mq-shimmer:nth-of-type(2) { width: 82%; animation-delay: .12s; }
.mq-shimmer:nth-of-type(3) { width: 56%; animation-delay: .24s; }

@keyframes mq-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.mq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 13px;
}

.mq-card {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mq-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }

.mq-card__head { display: flex; gap: 10px; align-items: flex-start; }

.mq-card__avatar,
.mq-card__initials {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex: none;
  background: var(--bg-3);
}

/* ── Photos vs logos ──────────────────────────────────────────────────────
   These need opposite treatment, and using one rule for both is what cut the
   hospital logos off.

   A doctor's PHOTO is a portrait: cover fills the square and crops the edges,
   which is what you want — letterboxing a face inside a 48px box wastes most
   of it and looks worse.

   A hospital LOGO is artwork with a wordmark: cover crops whatever does not
   fit the square, which lopped the ends off wide logos. contain fits the whole
   thing inside, and the padding keeps it off the rounded corners. */
.mq-card__avatar {
  object-fit: cover;                 /* default: doctor photos */
}

.mq-card__avatar--logo {
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
  /* Most hospital logos are drawn for a white background and many are
     transparent PNGs in dark ink — on the dark card surface those would be
     nearly invisible. A light tile is what makes third-party artwork legible
     in a dark theme, and it is neutral enough not to fight the logo's own
     colours. */
  background: #ffffff;
  border: 1px solid var(--line);
}

/* Only 27% of doctors and 48% of providers carry a photo, so this renders on
   most cards. It is designed, not a grey rectangle. */
.mq-card__initials {
  display: grid; place-items: center;
  font: 650 16px/1 var(--font);
  color: var(--bubble-user-ink);
  background: var(--grad-brand);
}

.mq-card__name { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.mq-card__meta { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

.mq-card__stats { display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 11.5px; color: var(--text-2); }
.mq-card__star  { color: var(--amber-500); }

.mq-card__price { font-size: 13px; font-weight: 650; color: var(--amber-500); }
/* Nine procedures in ten have no price. This is the common state and gets a
   designed treatment, not an empty label. */
.mq-card__price--none { color: var(--text-3); font-weight: 500; font-size: 12px; }

.mq-card__where { font-size: 11.5px; color: var(--text-2); display: flex; gap: 5px; align-items: baseline; }

.mq-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mq-tag {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
/* Meaning never rides on colour alone — every badge carries its text label. */
.mq-tag--badge { background: rgba(252, 170, 42, .13); border-color: rgba(252, 170, 42, .32); color: var(--amber-400); }
.mq-tag--match { background: rgba(120, 220, 150, .11); border-color: rgba(120, 220, 150, .28); color: #8fe3ab; }

.mq-card__foot { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.mq-card__link {
  font-size: 12px; font-weight: 600;
  color: var(--amber-500);
  text-decoration: none;
  min-height: 30px;
  display: inline-flex; align-items: center;
}
.mq-card__link:hover { text-decoration: underline; }
.mq-card__link:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; border-radius: 4px; }

.mq-historic { font-size: 11px; color: var(--text-3); margin-top: 7px; font-style: italic; }

/* ── Chips & feedback ─────────────────────────────────────────────────────── */

.mq-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.mq-chip {
  font: 500 12.5px/1 var(--font);
  padding: 8px 13px;
  min-height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(252, 170, 42, .34);
  background: rgba(252, 170, 42, .06);
  color: var(--amber-400);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mq-chip:hover { background: rgba(252, 170, 42, .16); transform: translateY(-1px); }
.mq-chip:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }

/* The handoff action after a zero result — the one thing worth doing next, so
   it reads as an action rather than another suggestion. */
.mq-chip--primary {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--bubble-user-ink);
  font-weight: 650;
}
.mq-chip--primary:hover { filter: brightness(1.06); background: var(--grad-brand); }

.mq-feedback { display: flex; gap: 3px; margin-top: 8px; }
.mq-feedback button {
  width: 28px; height: 28px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.mq-feedback button:hover { background: rgba(255, 255, 255, .07); color: var(--text-1); }
.mq-feedback button[aria-pressed="true"] { color: var(--amber-500); }
.mq-feedback button:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 1px; }
.mq-feedback svg { width: 14px; height: 14px; }

/* ── Composer ─────────────────────────────────────────────────────────────── */

.mq-composer-wrap {
  flex: none;
  padding: 0 18px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg-0) 62%, transparent);
}

.mq-composer {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.mq-composer:focus-within {
  border-color: rgba(252, 170, 42, .5);
  box-shadow: 0 0 0 3px rgba(252, 170, 42, .12);
}

.mq-input {
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--text-1);
  /* 16px minimum — anything smaller makes iOS Safari zoom the page on focus
     and the layout never recovers. */
  font: 400 16px/1.5 var(--font);
  padding: 7px 0;
  max-height: 168px;
  min-height: 30px;
  outline: none;
}
.mq-input::placeholder { color: var(--text-3); }

.mq-send {
  width: 36px; height: 36px;
  flex: none;
  border: 0; border-radius: var(--r-md);
  background: var(--grad-brand);
  color: var(--bubble-user-ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--e-spring), opacity var(--t-fast) var(--e-out);
}
.mq-send:hover:not(:disabled) { transform: scale(1.07); }
.mq-send:disabled { opacity: .35; cursor: default; }
.mq-send:focus-visible { outline: 2px solid var(--amber-300); outline-offset: 2px; }
.mq-send svg { width: 17px; height: 17px; }

.mq-composer-note {
  max-width: 780px;
  margin: 7px auto 0;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.mq-composer-note b { color: var(--text-2); font-weight: 600; }

/* The attribution link to theths.com. Underlined rather than coloured: at 11px
   on a muted line, amber on amber-tinted dark reads as decoration, and a link
   nobody recognises as a link is not a link. */
/* The pre-sign-in disclosure. Deliberately quieter than the "not medical
   advice" line above it — that one is a safety notice and must not be
   out-shouted by a legal one. */
.mq-legal {
  max-width: 780px;
  margin: 5px auto 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
}
.mq-legal[hidden] { display: none; }
.mq-legal b { color: var(--text-2); font-weight: 600; }
.mq-legal a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-strong);
}
.mq-legal a:hover { color: var(--amber-500); text-decoration-color: var(--amber-500); }

.mq-note-link {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-strong);
}
.mq-note-link:hover { color: var(--amber-500); text-decoration-color: var(--amber-500); }

/* ============================================================================
   Modal
   ========================================================================= */

.mq-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: grid; place-items: center;
  padding: 18px;
  animation: mq-fade var(--t-fast) var(--e-out) both;
}
.mq-scrim[hidden] { display: none; }

@keyframes mq-fade { from { opacity: 0; } to { opacity: 1; } }

.mq-modal {
  width: min(460px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  padding: 22px;
  animation: mq-pop var(--t-mid) var(--e-spring) both;
}

.mq-modal__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--grad-aurora);
  background-size: 300% 300%;
  animation: mq-drift 9s ease-in-out infinite;
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 14px;
}
.mq-modal__icon svg { width: 22px; height: 22px; }

.mq-modal h2 { font-size: 19px; margin: 0 0 6px; letter-spacing: -.015em; font-weight: 680; }
.mq-modal p  { color: var(--text-2); font-size: 13.8px; margin: 0 0 14px; line-height: 1.6; }

.mq-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(252, 170, 42, .08);
  border: 1px solid rgba(252, 170, 42, .24);
  margin-bottom: 15px;
}
/* Urgent notes look different because an ambulance caveat is not the same
   thing as a coverage footnote. */
.mq-note--urgent {
  background: rgba(220, 80, 60, .12);
  border-color: rgba(220, 80, 60, .34);
  color: #ffb3a3;
  font-weight: 500;
}

.mq-field { margin-bottom: 11px; }
.mq-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.mq-field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 16px/1.4 var(--font);
  padding: 10px 12px;
  outline: none;
}
.mq-field input:focus { border-color: rgba(252, 170, 42, .55); }
.mq-field small { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* "More about you" is the one multi-line field. Same skin as the inputs, so a
   form with both does not look assembled from two kits. */
.mq-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 15px/1.5 var(--font);
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  min-height: 74px;
}
.mq-field textarea:focus { border-color: rgba(252, 170, 42, .55); }

/* ============================================================================
   Settings panel
   ========================================================================= */

.mq-modal--wide { width: min(520px, 100%); text-align: left; }

.mq-settings__section {
  margin: 20px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font: 700 11px/1 var(--font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mq-settings__section:first-of-type { margin-top: 14px; }

.mq-settings__note { font-size: 12px; color: var(--text-3); margin: 0 0 12px; }

.mq-settings__row {
  display: flex; align-items: center; gap: 12px;
  justify-content: space-between;
  margin-bottom: 11px;
}
.mq-settings__label { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* Full width, and the last thing in the panel. Nothing sits under it to click
   by accident. */
.mq-settings__danger { width: 100%; margin-top: 4px; }

/* A radio group that reads as a switch: one visible selection, no dot to hunt
   for, and a tap target that survives a thumb. */
.mq-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}
.mq-seg__btn {
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  font: 600 12.5px/1 var(--font);
  padding: 8px 13px;
  min-height: 34px;
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mq-seg__btn:hover { color: var(--text-1); }
.mq-seg__btn[aria-checked="true"] { background: var(--grad-brand); color: #1a1206; }

@media (max-width: 420px) {
  .mq-settings__row { flex-direction: column; align-items: flex-start; gap: 7px; }
}

.mq-modal__actions { display: flex; gap: 9px; margin-top: 17px; }

.mq-btn {
  flex: 1;
  font: 600 13.5px/1 var(--font);
  padding: 12px 16px;
  min-height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out);
}
.mq-btn:hover { background: rgba(255, 255, 255, .06); }
.mq-btn--primary { background: var(--grad-brand); color: var(--bubble-user-ink); border-color: transparent; }
.mq-btn--primary:hover { filter: brightness(1.06); }
.mq-btn--danger { color: #ff8f7a; border-color: rgba(255, 143, 122, .35); }
.mq-btn:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }

.mq-formerror { font-size: 12.5px; color: #ff8f7a; margin-top: 9px; }

/* ============================================================================
   Responsive
   ========================================================================= */

@media (max-width: 860px) {
  .mq-burger { display: grid; }

  .mq-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    margin-left: calc(var(--sidebar-w) * -1);
    box-shadow: 0 0 44px rgba(0, 0, 0, .5);
  }
  .mq-shell[data-side="open"] .mq-side { margin-left: 0; }

  .mq-sidescrim {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 55;
    animation: mq-fade var(--t-fast) var(--e-out) both;
  }
  .mq-sidescrim[hidden] { display: none; }

  .mq-log { padding: 18px 14px 24px; }
  .mq-composer-wrap { padding-left: 12px; padding-right: 12px; }
  .mq-cards { grid-template-columns: 1fr; }
  .mq-welcome { padding-top: 5vh; }
}

@media (min-width: 1500px) {
  /* Chat gains nothing from more width — a long measure hurts readability. */
  .mq-log, .mq-composer, .mq-composer-note { max-width: 840px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

/* Vestibular disorders make looping animation genuinely unpleasant. The
   gradients settle rather than vanish, so the loading state still reads. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mq-shimmer { background: rgba(252, 170, 42, .2); }
  .mq-welcome__orb,
  .mq-thinking__dot,
  .mq-modal__icon { background: var(--grad-brand); }
  .mq-caret { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,.3); --line-strong: rgba(255,255,255,.45); --text-2: #e4ded4; --text-3: #bdb5aa; }
}

/* The same lift, chosen in Settings rather than inherited from the OS. Two
   routes to one result: someone whose device setting is off, or who wants it
   here and nowhere else, gets the identical palette.

   Attribute selectors do not raise specificity against the media query above,
   so whichever applies last wins — and they apply the same values. */
:root[data-contrast="more"] {
  --line: rgba(255,255,255,.3); --line-strong: rgba(255,255,255,.45);
  --text-2: #e4ded4; --text-3: #bdb5aa;
}
:root[data-contrast="more"][data-theme="light"] {
  --line: rgba(20,16,10,.32); --line-strong: rgba(20,16,10,.5);
  --text-2: #2f2a22; --text-3: #4a4238;
}

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

/* ============================================================================
   Sign-in gate
   ----------------------------------------------------------------------------
   Shown instead of the chat when CHAT_REQUIRE_LOGIN is on and the caller has no
   session. It replaces the composer rather than overlaying it — a disabled
   input someone can still type into is a worse experience than an honest
   explanation of why they cannot.
   ========================================================================= */

.mq-gate {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px 20px;
  text-align: center;
}

.mq-gate__inner { max-width: 42ch; }

.mq-gate__mark {
  width: 84px; height: 78px;
  margin: 0 auto 22px;
  position: relative;
  display: grid; place-items: center;
}
.mq-gate__mark img { position: relative; z-index: 1; width: 72px; height: 66px; object-fit: contain; }
.mq-gate__mark::before {
  content: "";
  position: absolute; inset: -14px;
  border-radius: var(--r-pill);
  background: var(--grad-aurora);
  background-size: 300% 300%;
  filter: blur(20px);
  opacity: .38;
  animation: mq-drift 9s ease-in-out infinite;
}

.mq-gate h2 {
  font-size: clamp(20px, 4vw, 25px);
  margin: 0 0 10px;
  letter-spacing: -.02em;
  font-weight: 680;
}

.mq-gate p { color: var(--text-2); font-size: 14.5px; margin: 0 0 22px; line-height: 1.6; }

.mq-gate__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 650 14px/1 var(--font);
  padding: 14px 22px;
  min-height: 46px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--grad-brand);
  color: var(--bubble-user-ink);
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring);
}
.mq-gate__btn:hover  { filter: brightness(1.06); transform: translateY(-1px); }
.mq-gate__btn:focus-visible { outline: 2px solid var(--amber-300); outline-offset: 3px; }
.mq-gate__btn svg { width: 16px; height: 16px; }

.mq-gate__note { font-size: 12px; color: var(--text-3); margin-top: 18px; line-height: 1.6; }

/* ==========================================================================
   Share
   Chats are not saved, so this is how a user keeps one. Nothing here talks to
   the server: the transcript is built in the browser from what is on screen.
   ========================================================================== */

.mq-composer-note__sep { opacity: .45; margin: 0 6px; }

/* A control that reads as part of the sentence around it, rather than a button
   bolted onto the disclaimer line. */
.mq-inlinebtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--amber-500);
  text-decoration: underline; text-underline-offset: 2px;
}
.mq-inlinebtn:hover { opacity: .85; }

.mq-share {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(8, 6, 4, .62);
  backdrop-filter: blur(3px);
}
.mq-share[hidden] { display: none; }

.mq-share__panel {
  width: 100%; max-width: 420px;
  background: var(--bg-1, #16120d);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.mq-share__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text-1); }
.mq-share__note  { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--text-2, #b9b1a4); }

.mq-share__actions { display: grid; gap: 9px; }

.mq-share__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  font: 600 14px inherit; text-align: left;
  color: var(--text-1); cursor: pointer;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  transition: background .15s ease, border-color .15s ease;
}
.mq-share__btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); }
.mq-share__btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* WhatsApp keeps its own colour — people scan for it rather than read it. */
.mq-share__btn--wa { color: #fff; background: #25d366; border-color: #25d366; }
.mq-share__btn--wa:hover { background: #21bd5c; border-color: #21bd5c; }

.mq-share__close {
  width: 100%; margin-top: 16px; padding: 9px;
  font: 600 13px inherit; color: var(--text-2, #b9b1a4);
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.mq-share__close:hover { color: var(--text-1); background: rgba(255, 255, 255, .05); }

@media (prefers-reduced-motion: reduce) {
  .mq-share__btn { transition: none; }
}

/* ==========================================================================
   Procedure cards

   A procedure answer is denser than a hospital answer — it carries where it is
   offered, a price range, and the doctors who perform it — and three of those
   side by side in a 240px column is unreadable. Procedure results get the full
   width, one per row, and the page scrolls.

   The grid is set from JS with .mq-cards--wide rather than by card type in CSS,
   because the grid is the parent and does not know what it contains.
   ========================================================================== */

.mq-cards--wide {
  grid-template-columns: 1fr;
  gap: 12px;
}

.mq-cards--wide .mq-card {
  padding: 16px 18px;
}

/* The name carries more weight on a full-width card; at 240px it had to stay
   small to avoid wrapping three times. */
.mq-cards--wide .mq-card__name {
  font-size: 16px;
  line-height: 1.35;
}

/* ── The detail block ── */
.mq-card__detail {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mq-card__detailrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.mq-card__detailicon {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
  opacity: .6;
  display: inline-block;
}

.mq-card__detailicon svg { width: 100%; height: 100%; display: block; }

/* On a narrow screen every card is full width already, so the wide modifier
   only needs to relax its padding back. */
@media (max-width: 640px) {
  .mq-cards--wide .mq-card { padding: 14px; }
  .mq-cards--wide .mq-card__name { font-size: 15px; }
}

/* ── Card head: rating and endorsement ────────────────────────────────────
   Sits to the right of the identity column so the name keeps the full width.
   Both children render only when the data exists — an empty star or a blank
   chip reads as missing information rather than absent information. */
.mq-card__aside {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.mq-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--amber-500);
  line-height: 1;
}
.mq-card__rating svg { width: 13px; height: 13px; flex: none; }

/* Amber at 500 measures 1.92:1 on a light ground — a fill colour, not a text
   colour. 700 passes AA, and the same substitution is used for the wordmark. */
:root[data-theme="light"] .mq-card__rating { color: var(--amber-700); }

.mq-card__endorse {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2.5px 6px;
  border-radius: var(--r-pill);
  background: rgba(63, 208, 201, .14);
  border: 1px solid rgba(63, 208, 201, .3);
  color: #6fded8;
}
:root[data-theme="light"] .mq-card__endorse { color: #0f766e; background: rgba(63, 208, 201, .12); }

/* The procedure's own gallery photo — below the identity line, never in the
   avatar slot, which belongs to the offering hospital's logo.

   A small square, not a full-width band. Stretched across the card it competed
   with the name for attention and pushed the useful rows (where it is offered,
   the price, the doctors) below the fold. It is a supporting detail, so it gets
   a thumbnail and opens full size on click for anyone who wants it. */
.mq-card__shot {
  width: 76px;
  height: 76px;
  margin-top: 11px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  display: block;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.mq-card__shot:hover { border-color: var(--line-strong); transform: scale(1.03); }
.mq-card__shot:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }

.mq-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Lightbox ──
   Its own layer above everything. Click anywhere, press Escape, or use the
   close button — three ways out, because a full-screen overlay with one exit is
   a trap on a phone where the button may sit under the notch. */
.mq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 5, 4, .88);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.mq-lightbox[hidden] { display: none; }

.mq-lightbox img {
  max-width: 100%;
  /* Not 100vh: the browser chrome on mobile overlaps it and the caption below
     ends up off screen. */
  max-height: 80dvh;
  border-radius: var(--r-md);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  display: block;
}

.mq-lightbox__cap {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  padding: 0 24px;
}

.mq-lightbox__close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--text-1);
  cursor: pointer;
}
.mq-lightbox__close:hover { background: rgba(255, 255, 255, .16); }
.mq-lightbox__close svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .mq-card__shot { transition: none; }
  .mq-card__shot:hover { transform: none; }
}

/* ── Wider logo tile on procedure cards ───────────────────────────────────
   Hospital logos are wide — a mark plus a wordmark. In a 48px square,
   object-fit:contain scales them down until the WIDTH fits, so the logo ends
   up small with empty space either side and the name is unreadable.

   Procedure cards have the full row (.mq-cards--wide), so the tile can take
   the horizontal space the artwork actually needs. Scoped to that grid, so
   hospital and doctor results keep their square avatars.

   The initials fallback matches the width, not the shape: if the two differed,
   the identity column would start at a different x on cards with and without a
   logo, and a list of results would look ragged. */
.mq-cards--wide .mq-card__avatar--logo,
.mq-cards--wide .mq-card__initials {
  width: 104px;
  height: 52px;
  border-radius: 10px;
}

.mq-cards--wide .mq-card__avatar--logo {
  padding: 6px 9px;
  object-fit: contain;
}

/* The fallback stays a centred monogram rather than being stretched. */
.mq-cards--wide .mq-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  /* On a narrow phone 104px is a third of the row — enough to squeeze the
     name into two or three lines. */
  .mq-cards--wide .mq-card__avatar--logo,
  .mq-cards--wide .mq-card__initials { width: 78px; height: 46px; }
}

/* ── Coverage chip ────────────────────────────────────────────────────────
   Sits beside the Beta chip and, like it, survives the banner being
   dismissed. Deliberately quieter than the amber Beta chip — it is a standing
   fact rather than a status, and two amber chips side by side would compete.

   The coverage line ALSO appears in the dismissible banner, matching the
   website. This is the copy that stays. */
.mq-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--text-2);
  flex: none;
  white-space: nowrap;
}
.mq-area-chip svg { width: 11px; height: 11px; flex: none; opacity: .75; }

/* The coverage line inside the banner. Its own row above the welcome text, so
   it reads as a statement rather than as part of the greeting. */
.mq-beta__coverage {
  display: block;
  font-weight: 650;
  color: var(--text-1);
  margin-bottom: 2px;
}

@media (max-width: 560px) {
  /* The title is what a narrow header needs most. The chip's information
     survives in the banner and in the composer note, so dropping it here
     loses nothing. */
  .mq-area-chip { display: none; }
}

/* ── MedQbit LLM status light ──────────────────────────────────────────────
   Green and breathing while the model is connected; red and still when it is
   off. The words say it too, so the state never depends on seeing colour. */
.mq-model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .05);
  color: var(--text-2);
}
.mq-model__dot {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}
.mq-model__state { font-weight: 800; }

.mq-model[data-state="on"] {
  color: #4ade80;
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .10);
}
.mq-model[data-state="on"] .mq-model__dot {
  background: #22c55e;
  animation: mq-model-pulse 2.2s ease-out infinite;
}

.mq-model[data-state="off"] {
  color: #f87171;
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .10);
}
.mq-model[data-state="off"] .mq-model__dot {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, .75);
}

:root[data-theme="light"] .mq-model[data-state="on"]  { color: #15803d; }
:root[data-theme="light"] .mq-model[data-state="off"] { color: #b91c1c; }

@keyframes mq-model-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* A phone's top bar is already full: keep the light and the state, drop the
   brand word. */
@media (max-width: 560px) {
  .mq-model__brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mq-model[data-state="on"] .mq-model__dot { animation: none; box-shadow: 0 0 6px rgba(34, 197, 94, .7); }
}

/* ============================================================================
   Analytics consent bar (analytics.js)

   Floats above the composer rather than covering it: someone can keep typing
   and decide later, and the bar never hides the "not medical advice" line.
   "No thanks" and "Allow" are the same size: refusing must not look like the
   wrong answer.
   ========================================================================= */

.mq-consent {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(620px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  z-index: 40;
}
.mq-consent__text { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mq-consent__text a { color: var(--text-1); text-underline-offset: 2px; }
.mq-consent__actions { display: flex; gap: 8px; flex: none; }
.mq-consent__btn {
  min-width: 92px; min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-1);
  font: 600 12.5px/1 var(--font);
  cursor: pointer;
}
.mq-consent__btn--yes { background: var(--grad-brand); border-color: transparent; color: #1a1206; }

@media (max-width: 560px) {
  .mq-consent { flex-direction: column; align-items: stretch; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  .mq-consent__btn { flex: 1; }
}

/* ── "Your area or pincode" — under a reply that asked where to look ───────
   Same skin as the modal fields, so it reads as part of the app rather than a
   form pasted into the conversation. */
.mq-locask {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-2);
  max-width: 420px;
}
.mq-locask__label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.mq-locask__row { display: flex; gap: 8px; }
.mq-locask__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--text-1);
  font: 400 16px/1.4 var(--font);
  padding: 9px 12px;
  outline: none;
}
.mq-locask__input:focus { border-color: rgba(252, 170, 42, .55); }
.mq-locask__go { flex: 0 0 auto; white-space: nowrap; }
.mq-locask__note { display: block; font-size: 11px; color: var(--text-3); margin-top: 7px; }