/* demo-hotel.css - the landing page's hero demo (server.mjs landingDemo, static/demo-hotel.js): a room's printed card
   on the nightstand, the guest's phone and the front desk's screen, drawn after Hotel QR's real screens in the kit's
   tokens only. Linked on the landing page alone, after hotel.css.

   The kit's demo frame (.lp-demo > .lp-demo__fit > .lp-demo__stage, landing.css and demo.js) is used as it is: nothing
   here touches it. It draws no box, and the stage paints no ground: the room, the phone and the desk stand on the page
   itself, casting the kit's --lp-demo-shadow. Everything is scoped under .hqd, the demo's own class.

   Inside the stage the sizes are px, on purpose. The stage is a picture at a fixed design size - 1280 x 760, or 400 x 760
   on a phone (.hqd--narrow, one thing at a time) - which demo.js scales to the column. Sizes in rem would grow with the
   interface-size setting and spill out of that fixed frame.

   The story starts as a guest walks in (Chris, 2026-10-20): the nightstand with the printed card, by the front desk's
   screen. Then the guest's phone comes up in front of the nightstand, its camera finds the code, and the room's page
   opens; the phone stays there, in front of the nightstand, for the rest of it. The phone and the cursor are the kit's
   (.lp-phone, .lp-cursor - landing.css).

   The printed card is paper and the camera's view is a camera's, the same in both themes: the kit's always-dark
   --c-scrim and always-light --c-scrim-ink. The guest's page and the desk wear the page's own theme, and the open chat
   sheet the kit's own sheet colours (--mx-sheet-*, app.css).

   What the tour changes is state on the stage, read here:
     data-beat    room | guest | desk          what a phone shows, one at a time
     data-screen  camera | page                the guest's phone: the camera finding the code, or the room's page
     data-view    inbox | thread               the front desk
     is-up (the phone raised to the card), is-aim (the camera's corners), is-found (the address it found),
     is-copied (the password's copy button), is-sheet (the chat open), is-filled (a quick request in the box),
     is-sent, is-arrived (the room in the desk's list, which keeps itself current), is-typing, is-replied (the
     desk sent its answer), is-answered (the answer on the guest's phone) */

@media (min-width: 576px) {
  .hqd { max-width: 1280px; margin-inline: auto; }
  .hqd.hqd--narrow { max-width: 400px; }
}

.hqd-stage {
  width: 1280px;
  height: 760px;
  overflow: hidden;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Never eased: demo.js reads its width once, right after demo-hotel.js narrows it, and under reduced motion the kit
     gives every element a 0.01ms transition of all properties (tokens.css) - long enough for that read to see 1280. */
  transition: none;
}
.hqd--narrow .hqd-stage { width: 400px; }
/* Zero specificity, so every class below sets its own margins and sizes over it. */
:where(.hqd-stage) :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; }
:where(.hqd-stage) svg { width: 16px; height: 16px; flex: none; }

/* ── The nightstand: the printed card on it, by the lamp - standing on the page, no room drawn round it ── */
.hqd-room {
  position: absolute;
  left: 64px;
  top: 40px;
  width: 340px;
  height: 680px;
  transition: opacity 0.45s ease;
}
.hqd-room__lamp { position: absolute; z-index: 1; left: 20px; top: 280px; width: 92px; height: 200px; }
/* The lamp's light, warm round its shade. */
.hqd-room__lamp::before {
  content: "";
  position: absolute;
  left: -84px;
  top: -94px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-warn) 22%, transparent), transparent);
}
.hqd-room__shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 66px;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: color-mix(in srgb, var(--c-warn) 38%, var(--c-surface));
  z-index: 1;
}
.hqd-room__stem {
  position: absolute;
  left: 44px;
  top: 66px;
  width: 4px;
  height: 120px;
  background: color-mix(in srgb, var(--c-ink) 30%, var(--c-surface-2));
}
.hqd-room__lamp::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 2px;
  width: 48px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-ink) 30%, var(--c-surface-2));
}
.hqd-room__stand {
  position: absolute;
  left: 0;
  width: 340px;
  top: 470px;
  height: 192px;
  border-radius: 8px 8px 4px 4px;
  background: color-mix(in srgb, var(--c-ink) 12%, var(--c-surface-2));
  box-shadow: inset 0 14px 0 color-mix(in srgb, var(--c-ink) 18%, var(--c-surface-2)), var(--lp-demo-shadow);
}
/* Fresh flowers in a small vase, between the lamp and the card: shorter than the lamp, standing on the same top. */
.hqd-room__vase { position: absolute; left: 116px; top: 368px; width: 66px; height: 110px; z-index: 1; }
.hqd-vase__stem,
.hqd-vase__twig { fill: none; stroke: color-mix(in srgb, var(--c-ok) 62%, var(--c-warn)); stroke-width: 1.6; stroke-linecap: round; }
.hqd-vase__twig { stroke-width: 1.1; }
/* Flowers in flower colours, from the kit's own hues: a red tulip, a pink blossom, a yellow daisy, orange berries. Their
   lightness is set, not the theme's - light-theme hues are dark for text, and a flower is as bright in either - with a
   mix first for a browser without relative colours. */
.hqd-vase__leaf { fill: color-mix(in srgb, var(--c-ok) 68%, var(--c-warn)); }
.hqd-vase__leaf--dark { fill: color-mix(in srgb, var(--c-ok) 70%, var(--c-scrim)); }
.hqd-vase__vein { fill: none; stroke: color-mix(in srgb, var(--c-ok) 30%, var(--c-scrim-ink)); stroke-width: 0.9; stroke-linecap: round; opacity: 0.85; }
.hqd-vase__berry { fill: color-mix(in srgb, var(--c-review) 85%, var(--c-warn)); fill: oklch(from var(--c-review) 0.72 c h); }
.hqd-vase__tulip { fill: color-mix(in srgb, var(--c-rec) 88%, var(--c-scrim-ink)); fill: oklch(from var(--c-rec) 0.67 c h); }
.hqd-vase__tulip-in { fill: color-mix(in srgb, var(--c-rec) 82%, var(--c-scrim)); fill: oklch(from var(--c-rec) 0.58 c h); }
.hqd-vase__daisy { fill: color-mix(in srgb, var(--c-warn) 62%, var(--c-scrim-ink)); fill: oklch(from var(--c-warn) 0.83 calc(c * 1.1) h); }
.hqd-vase__daisy-heart { fill: color-mix(in srgb, var(--c-review) 80%, var(--c-rec)); fill: oklch(from var(--c-review) 0.66 c h); }
.hqd-vase__blossom { fill: color-mix(in srgb, var(--c-rec) 42%, var(--c-scrim-ink)); fill: oklch(from var(--c-rec) 0.8 calc(c * 0.55) h); }
.hqd-vase__blossom-heart { fill: color-mix(in srgb, var(--c-warn) 80%, var(--c-scrim-ink)); fill: oklch(from var(--c-warn) 0.8 c h); }
.hqd-vase__pot { fill: color-mix(in srgb, var(--c-plan) 42%, var(--c-surface)); }
.hqd-vase__shine { fill: none; stroke: color-mix(in srgb, var(--c-surface) 70%, var(--c-scrim-ink)); stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
/* Its two feet. */
.hqd-room__stand::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  height: 14px;
  background:
    linear-gradient(color-mix(in srgb, var(--c-ink) 22%, var(--c-surface-2)), color-mix(in srgb, var(--c-ink) 22%, var(--c-surface-2))) left / 16px 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--c-ink) 22%, var(--c-surface-2)), color-mix(in srgb, var(--c-ink) 22%, var(--c-surface-2))) right / 16px 100% no-repeat;
}
.hqd-room__stand i {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 28px;
  height: 70px;
  border: 1.5px solid color-mix(in srgb, var(--c-ink) 20%, var(--c-surface-2));
  border-radius: 8px;
}
.hqd-room__stand i + i { top: 108px; }
.hqd-room__stand i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 5px;
  margin: -2.5px 0 0 -13px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-ink) 26%, var(--c-surface-2));
}

/* ── The printed card (hotelCardHtml): paper, in both themes ───────────── */
.hqd-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  background: var(--c-scrim-ink);
  color: var(--c-scrim);
  text-align: center;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c-scrim) 30%, transparent);
}
.hqd-card__logo { display: block; overflow: hidden; border-radius: 5px; }
.hqd-card__logo .hqd-logo { width: 100%; height: 100%; }
.hqd-card__qr { position: relative; display: block; }
.hqd-qr { display: block; width: 100%; height: 100%; }
.hqd-qr path { fill: var(--c-scrim); }
.hqd-card__room { display: block; font-weight: 700; line-height: 1.2; }
.hqd-card__short { display: block; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hqd-card--room { left: 186px; top: 292px; width: 136px; padding: 10px 9px 9px; }
.hqd-card--room .hqd-card__logo { width: 22px; height: 22px; }
.hqd-card--room .hqd-card__qr { width: 98px; height: 98px; margin-top: 8px; }
.hqd-card--room .hqd-card__room { margin-top: 8px; font-size: 12px; }
.hqd-card--room .hqd-card__short { margin-top: 3px; font-size: 7.5px; }
/* Its little acrylic stand. */
.hqd-card--room::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -6px;
  height: 8px;
  border-radius: 0 0 4px 4px;
  background: color-mix(in srgb, var(--c-scrim-ink) 55%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-scrim) 18%, transparent);
}

/* ── The guest's phone (the kit's .lp-phone): in front of the nightstand, over the card it scans ── */
.hqd-phone {
  left: 214px;
  top: 40px;
  width: 340px;
  height: 680px;
  z-index: 2;
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out-soft, ease-out);
}
/* Down below the stage until the guest raises it. */
.hqd-stage:not(.is-up) .hqd-phone { transform: translateY(112%); }

/* The camera, finding the code: the card up close, its four corners, the address it read. */
.hqd-camera,
.hqd-guest { position: absolute; inset: 0; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
.hqd-camera {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--c-warn) 20%, transparent), transparent 60%),
    var(--c-scrim);
}
.hqd-camera__stand {
  position: absolute;
  left: -20px;
  right: -20px;
  top: 470px;
  bottom: 0;
  background: color-mix(in srgb, var(--c-scrim-ink) 14%, var(--c-scrim));
}
.hqd-card--cam { left: 50%; top: 196px; width: 230px; margin-left: -115px; padding: 14px 14px 13px; }
.hqd-card--cam .hqd-card__logo { width: 34px; height: 34px; border-radius: 7px; }
.hqd-card--cam .hqd-card__qr { width: 164px; height: 164px; margin-top: 12px; }
.hqd-card--cam .hqd-card__room { margin-top: 12px; font-size: 18px; }
.hqd-card--cam .hqd-card__short { margin-top: 4px; font-size: 11.5px; }
.hqd-aim { position: absolute; inset: -20px; opacity: 0; transition: inset 0.35s var(--ease-out-soft, ease-out), opacity 0.3s ease; }
.hqd-aim i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--c-warn); }
.hqd-aim i:nth-child(1) { left: 0; top: 0; border-width: 3.5px 0 0 3.5px; border-top-left-radius: 9px; }
.hqd-aim i:nth-child(2) { right: 0; top: 0; border-width: 3.5px 3.5px 0 0; border-top-right-radius: 9px; }
.hqd-aim i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3.5px 3.5px; border-bottom-left-radius: 9px; }
.hqd-aim i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3.5px 3.5px 0; border-bottom-right-radius: 9px; }
.hqd-stage.is-aim .hqd-aim { opacity: 1; inset: -14px; }
.hqd-stage.is-found .hqd-aim { inset: -8px; }
.hqd-found {
  position: absolute;
  left: 50%;
  top: 498px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--c-warn);
  color: var(--c-scrim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out-soft, ease-out);
}
.hqd-found svg { width: 15px; height: 15px; }
.hqd-stage.is-found .hqd-found { opacity: 1; transform: translate(-50%, 0); }
.hqd-shutter {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border: 4px solid var(--c-scrim-ink);
  border-radius: 50%;
}
.hqd-shutter::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--c-scrim-ink);
}
.hqd-stage[data-screen='page'] .hqd-camera { opacity: 0; visibility: hidden; }
.hqd-stage[data-screen='camera'] .hqd-guest { opacity: 0; transform: translateY(16px); visibility: hidden; }

/* ── The room's own page (guestPage): the hotel's logo and name, the room, its facts, its guide ── */
.hqd-guest { background: var(--c-canvas); font-size: 14px; }
.hqd-guest__cog { position: absolute; z-index: 5; top: 46px; inset-inline-end: 14px; display: inline-flex; color: var(--c-ink-muted); }
.hqd-guest__cog svg { width: 17px; height: 17px; }
.hqd-scroll {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 10px 16px 100px;
}
.hqd-scroll::-webkit-scrollbar { display: none; }
.hqd-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; padding-inline-end: 34px; }
.hqd-head__logo { flex: none; width: 50px; height: 50px; overflow: hidden; border-radius: 11px; }
.hqd-head__logo .hqd-logo { width: 100%; height: 100%; }
.hqd-head__text { display: grid; min-width: 0; }
.hqd-head__hotel { color: var(--c-ink-muted); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.hqd-head__greet { margin-top: 2px; font-family: var(--mx-font-display, inherit); font-size: 25px; font-weight: 700; line-height: 1.05; }
.hqd-head__room { color: var(--c-ink-muted); font-size: 13px; line-height: 1.25; }

/* One line each: the label on one side, the value on the other (.hotel-facts). */
.hqd-facts { margin-top: 12px; }
.hqd-facts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 39px;
  border-bottom: 1px solid var(--c-line);
  font-size: 13.5px;
}
.hqd-facts li > span:first-child { flex: none; color: var(--c-ink-muted); }
.hqd-facts__value { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hqd-facts strong { min-width: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
/* The password's copy button: a small faint icon, a check for a moment after the tap (copy.js). */
.hqd-copy { position: relative; display: inline-flex; color: var(--c-ink-muted); opacity: 0.65; transition: color 0.2s ease, opacity 0.2s ease; }
.hqd-copy svg { width: 14px; height: 14px; }
.hqd-copy__check { display: none; }
.hqd-stage.is-copied .hqd-copy { color: var(--c-accent); opacity: 1; }
.hqd-stage.is-copied .hqd-copy__icon { display: none; }
.hqd-stage.is-copied .hqd-copy__check { display: inline-flex; animation: hqd-pop 0.3s var(--ease-spring, ease-out) both; }

/* The guide (guideSection): its title, a category, the places in it. */
.hqd-guide { display: block; margin-top: 24px; }
.hqd-guide__title { display: block; margin-bottom: 4px; font-family: var(--mx-font-display, inherit); font-size: 17px; font-weight: 700; text-align: center; }
.hqd-guide__category {
  display: block;
  margin: 12px 0 3px;
  color: var(--c-accent);
  font-family: var(--mx-font-display, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hqd-place { display: grid; gap: 1px; padding: 9px 0 10px; border-top: 1px solid var(--c-line); }
.hqd-place__name { font-size: 13.5px; font-weight: 600; }
.hqd-place__address { color: var(--c-ink-muted); font-size: 12px; }
.hqd-place__link { justify-self: start; margin-top: 3px; color: var(--c-accent); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }

/* The chat (chatSection): the kit's bottom sheet - a pill over the page, open with a tap - in the sheet's own colours. */
.hqd-sheet {
  position: absolute;
  z-index: 10;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--mx-sheet-line, var(--c-line));
  border-radius: 999px;
  background: var(--mx-sheet-bg, var(--c-surface));
  color: var(--mx-sheet-ink, var(--c-ink));
  box-shadow: var(--mx-sheet-glow, var(--shadow-lift));
  --c-ink: var(--mx-sheet-ink);
  --c-ink-muted: var(--mx-sheet-muted);
  --c-ink-subtle: var(--mx-sheet-subtle);
  --c-surface: var(--mx-sheet-surface);
  --c-surface-2: var(--mx-sheet-surface-2);
  --c-line: var(--mx-sheet-in-line);
  --c-line-strong: var(--mx-sheet-in-line-strong);
}
.hqd-sheet > :not(.hqd-sheet__bar) { display: none; }
.hqd-sheet__bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hqd-avatar { flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; }
.hqd-avatar .hqd-logo { width: 100%; height: 100%; }
.hqd-sheet__text { display: grid; flex: 1; min-width: 0; }
.hqd-sheet__name,
.hqd-sheet__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hqd-sheet__name { font-family: var(--mx-font-display, inherit); font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.hqd-sheet__sub { color: var(--c-ink-muted); font-size: 10.5px; line-height: 1.3; }
.hqd-sheet__open {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--mx-sheet-ink, var(--c-ink));
  color: var(--mx-sheet-bg, var(--c-canvas));
  font-size: 12.5px;
  font-weight: 700;
}
.hqd-stage.is-sheet .hqd-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  height: 334px;
  padding: 0 12px 12px;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: hqd-rise 0.35s var(--ease-out-soft, ease-out) both;
}
.hqd-stage.is-sheet .hqd-sheet > * { display: flex; flex: none; }
.hqd-stage.is-sheet .hqd-sheet__open { display: none; }
.hqd-stage.is-sheet .hqd-sheet__name,
.hqd-stage.is-sheet .hqd-sheet__sub { white-space: normal; }
.hqd-sheet__handle { justify-content: center; align-items: center; height: 24px; }
.hqd-sheet__handle::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--c-ink) 32%, transparent); }
.hqd-stage.is-sheet .hqd-sheet__bar { margin-bottom: 8px; }

/* The list of messages, bubbled like a phone's own (.chat__list, .chat__item). */
.hqd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-surface);
}
.hqd-stage.is-sheet .hqd-sheet > .hqd-list { flex: 1 1 auto; min-height: 0; }
.hqd-msg { max-width: 80%; padding: 7px 10px 5px; border-radius: 15px; box-shadow: 0 1px 1px color-mix(in srgb, var(--c-ink) 6%, transparent); font-size: 13px; line-height: 1.35; }
.hqd-msg__text { display: block; overflow-wrap: anywhere; }
.hqd-msg time { display: block; margin-top: 2px; font-size: 9.5px; opacity: 0.7; text-align: right; }
.hqd-msg--mine { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--c-accent); color: var(--c-accent-ink); }
.hqd-msg--theirs { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--c-surface-2); color: var(--c-ink); }
.hqd-msg--theirs time { text-align: left; }
.hqd-empty { display: flex; flex: 1; align-items: center; justify-content: center; padding: 6px; color: var(--c-ink-muted); font-size: 12px; text-align: center; }
.hqd-stage.is-sent .hqd-empty,
.hqd-stage:not(.is-sent) [data-hqd-sent],
.hqd-stage:not(.is-answered) [data-hqd-answer],
.hqd-stage:not(.is-replied) [data-hqd-replied] { display: none; }
.hqd-stage.is-sent [data-hqd-sent],
.hqd-stage.is-answered [data-hqd-answer],
.hqd-stage.is-replied [data-hqd-replied] { animation: hqd-pop 0.35s var(--ease-out-soft, ease-out) both; }

/* The quick requests (CHAT_QUICK_REQUESTS): a row of pills between the list and the box. */
.hqd-chips { gap: 6px; margin: 8px 0 6px; overflow: hidden; white-space: nowrap; }
.hqd-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 11.5px;
  transition: background-color 0.2s ease;
}
/* The composer: one pill-shaped row, the box and the round send button (.chat__form). */
.hqd-compose { display: flex; align-items: center; gap: 8px; }
.hqd-input {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: 19px;
  background: var(--c-surface);
  font-size: 13px;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hqd-input__hint { overflow: hidden; color: var(--c-ink-muted); text-overflow: ellipsis; }
.hqd-input__text { display: none; overflow: hidden; text-overflow: ellipsis; }
.hqd-stage.is-filled .hqd-sheet .hqd-input,
.hqd-stage.is-typing .hqd-desk .hqd-input { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.hqd-stage.is-filled .hqd-sheet .hqd-input__hint,
.hqd-stage.is-typing .hqd-desk .hqd-input__hint { display: none; }
.hqd-stage.is-filled .hqd-sheet .hqd-input__text,
.hqd-stage.is-typing .hqd-desk .hqd-input__text { display: block; }
.hqd-stage.is-typing .hqd-desk .hqd-input::after {
  content: "";
  flex: none;
  width: 1.5px;
  height: 16px;
  margin-inline-start: 1px;
  background: var(--c-accent);
  animation: hqd-caret 1s steps(1) infinite;
}
.hqd-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.hqd-send svg { width: 17px; height: 17px; }

/* ── The front desk (deskLayout): the reception's screen, its inbox and a room's thread ── */
.hqd-desk {
  position: absolute;
  left: 594px;
  top: 40px;
  display: flex;
  flex-direction: column;
  width: 662px;
  height: 680px;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  background: var(--c-canvas);
  box-shadow: var(--lp-demo-shadow);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
/* The browser's own bar reads left to right in every language. */
.hqd-desk__chrome {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
  direction: ltr;
}
.hqd-dots { display: flex; gap: 6px; }
.hqd-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-strong); }
.hqd-reload { display: inline-flex; padding: 3px; border-radius: 6px; color: var(--c-ink-muted); }
.hqd-reload svg { width: 14px; height: 14px; }
.hqd-url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-canvas);
  color: var(--c-ink-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  white-space: nowrap;
}
.hqd-url svg { width: 11px; height: 11px; color: var(--c-ok); }
.hqd-desk__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--c-line);
}
.hqd-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mx-font-logo, inherit); font-size: 15.5px; font-weight: 700; }
.hqd-mark svg { width: 22px; height: 22px; color: var(--c-accent); }
.hqd-desk__cog { display: inline-flex; color: var(--c-ink-muted); }
.hqd-desk__cog svg { width: 17px; height: 17px; }
.hqd-desk__views { position: relative; flex: 1; min-height: 0; transition: opacity 0.2s ease; }
.hqd-view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 20px; animation: hqd-in 0.35s ease both; }
.hqd-stage:not([data-view='inbox']) .hqd-view--inbox,
.hqd-stage:not([data-view='thread']) .hqd-view--thread { display: none; }

/* The inbox (deskInboxBody): the hotel, who is signed in, Sign out, and the rooms that wrote (conversationTable). */
.hqd-desk__title { font-family: var(--mx-font-display, inherit); font-size: 22px; font-weight: 700; line-height: 1.15; }
.hqd-desk__hint { margin-top: 4px; color: var(--c-ink-muted); font-size: 12px; }
.hqd-desk__actions { display: flex; margin-top: 12px; }
.hqd-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
}
.hqd-panel { display: block; margin-top: 14px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.hqd-panel__empty { display: block; padding: 22px 16px; color: var(--c-ink-muted); font-size: 12.5px; text-align: center; }
.hqd-table { display: none; }
.hqd-stage.is-arrived .hqd-panel__empty { display: none; }
.hqd-stage.is-arrived .hqd-table { display: block; }
.hqd-table__head,
.hqd-table__row { display: grid; grid-template-columns: 1.45fr 0.8fr 1.6fr 0.8fr; gap: 10px; padding: 9px 14px; }
.hqd-table__head {
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-subtle);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hqd-table__head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hqd-table__row { align-items: start; padding-block: 11px; font-size: 12.5px; line-height: 1.35; }
.hqd-table__row > span { min-width: 0; overflow-wrap: anywhere; }
.hqd-stage.is-arrived .hqd-table__row { animation: hqd-arrive 1.6s ease both; }
.hqd-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); }
.hqd-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
  border-radius: 999px;
  color: var(--c-accent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hqd-stage.is-replied .hqd-badge { display: none; }

/* A room's thread (chatThreadBody): the back arrow and the room, the messages, the reply box under them. */
.hqd-thread__head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-family: var(--mx-font-display, inherit); font-size: 17px; font-weight: 700; }
.hqd-thread__head svg { width: 18px; height: 18px; }
[dir='rtl'] .hqd-thread__head svg { transform: scaleX(-1); }
.hqd-list--desk { flex: 1; min-height: 0; margin-bottom: 12px; }

/* What flies from a send button to where the message lands (demo.js flyTo). */
.hqd-ghost {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--shadow-lift);
}
.hqd-ghost svg { width: 18px; height: 18px; }

/* Hotel Aurora's logo: a sun over the sea, the same on paper and on screen. */
.hqd-logo__sky { fill: color-mix(in srgb, var(--c-review) 16%, var(--c-scrim-ink)); }
.hqd-logo__sun { fill: var(--c-review); }
.hqd-logo__rays { fill: none; stroke: var(--c-review); stroke-width: 2.6; stroke-linecap: round; }
.hqd-logo__sea { fill: color-mix(in srgb, var(--c-plan) 80%, var(--c-scrim)); }
.hqd-logo__wave { fill: none; stroke: color-mix(in srgb, var(--c-scrim-ink) 70%, transparent); stroke-width: 2; stroke-linecap: round; }

/* Spaced-out letters break Arabic's joined script apart, so its small capitals-style labels keep their natural spacing. */
.hqd-stage [dir='rtl'] :is(.hqd-head__hotel, .hqd-guide__category, .hqd-table__head, .hqd-badge) { letter-spacing: 0; }

/* ── On a phone: one thing at a time, at the size of a phone ─────────── */
.hqd--narrow .hqd-room { left: 30px; }
.hqd--narrow .hqd-phone { left: 30px; }
.hqd--narrow .hqd-desk { left: 10px; width: 380px; box-shadow: none; }
.hqd--narrow .hqd-stage:not([data-beat='room']) .hqd-room { opacity: 0; }
.hqd--narrow .hqd-stage[data-beat='desk'] .hqd-phone { opacity: 0; transform: translateX(-28px); }
.hqd--narrow .hqd-stage:not([data-beat='desk']) .hqd-desk { opacity: 0; transform: translateX(28px); }
/* The desk's list keeps the room and its message, as a narrow table would show first. */
.hqd--narrow :is(.hqd-table__head, .hqd-table__row) { grid-template-columns: 1fr 1.4fr; }
.hqd--narrow :is(.hqd-table__head, .hqd-table__row) > :is(:nth-child(2), :nth-child(4)) { display: none; }

@keyframes hqd-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes hqd-rise { from { opacity: 0.6; transform: translateY(40px); } }
@keyframes hqd-pop { from { opacity: 0; transform: scale(0.85); } }
@keyframes hqd-arrive { from { background-color: var(--c-accent-soft); } 60% { background-color: var(--c-accent-soft); } }
@keyframes hqd-caret { 50% { opacity: 0; } }

/* A reader who asks for less motion gets the still frame (demo-hotel.js does not start the tour): nothing in it moves. */
@media (prefers-reduced-motion: reduce) {
  .hqd-stage *,
  .hqd-stage *::before,
  .hqd-stage *::after { animation: none !important; transition: none !important; }
}