/* Zencia OPD — kiosk / phone shell. Large targets, generous space, no density.
   Responsive rules key off .kiosk-shell's own width (container query), so the
   same layout works whether it fills a phone viewport or a lobby tablet. */
.kiosk-shell {
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-ink);
  container-type: inline-size;
  container-name: kiosk;
}
.kiosk-top {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface);
}
.kiosk-logo { font-weight: 700; letter-spacing: .04em; color: var(--c-brand); }
.kiosk-top .btn { padding: 8px 14px; }
.kiosk-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 860px; width: 100%; margin: 0 auto; padding: var(--s-7) var(--s-5);
}
.kiosk-body.top { justify-content: flex-start; }
.k-h1 { font-size: var(--t-2xl); margin-bottom: var(--s-4); }
.k-lead { font-size: var(--t-md); color: var(--c-ink-2); }

.k-btn {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: var(--s-5); font-size: var(--t-lg); font-weight: 600;
  border: 2px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface); cursor: pointer; color: var(--c-ink);
}
.k-btn:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.k-btn-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; text-align: center; }
.k-btn-primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }
.k-btn:disabled { opacity: .55; cursor: not-allowed; }
.k-btn .sub { display: block; font-size: var(--t-sm); font-weight: 450; opacity: .75; margin-top: 4px; }
.k-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.k-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.k-chip {
  padding: var(--s-3) var(--s-5); font-size: var(--t-md); font-weight: 550;
  border: 2px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface); cursor: pointer;
}
.k-chip:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.k-chip[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); max-width: 340px; }
.keypad button {
  padding: var(--s-4); font-size: var(--t-xl); font-weight: 600;
  border: 2px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer;
}
.keypad button:hover { background: var(--c-brand-soft); border-color: var(--c-brand); }
.k-display {
  font-family: var(--font-mono); font-size: var(--t-2xl); letter-spacing: .28em;
  padding: var(--s-4); border: 2px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); text-align: center; margin-bottom: var(--s-4);
}

.chat { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-5); }
.bubble { max-width: 78%; padding: var(--s-4); border-radius: var(--r-lg); font-size: var(--t-md); white-space: pre-wrap; word-wrap: break-word; }
.bubble-bot  { background: var(--c-surface); border: 1px solid var(--c-line-soft); border-bottom-left-radius: var(--s-1); align-self: flex-start; }
.bubble-you  { background: var(--c-brand); color: #fff; align-self: flex-end; border-bottom-right-radius: var(--s-1); }
.section-marker {
  align-self: center; font-size: var(--t-sm); color: var(--c-ink-3);
  background: var(--c-surface-2); border-radius: var(--r-pill); padding: 4px 14px;
}
.k-progress { height: 6px; border-radius: 3px; background: var(--c-line-soft); overflow: hidden; }
.k-progress i { display: block; height: 100%; background: var(--c-brand); transition: width .35s ease; }
.k-inputbar {
  border-top: 1px solid var(--c-line-soft); background: var(--c-surface);
  padding: var(--s-4) var(--s-5);
}
.k-textinput {
  width: 100%; padding: var(--s-4); font-size: var(--t-md);
  border: 2px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); font: inherit; color: inherit;
}
.k-textinput:focus { outline: 2px solid var(--c-brand); outline-offset: -1px; border-color: transparent; }

/* ---------------------------------------------------------------------
   Token slip - illustrated printer + feed-out animation. Worked out in
   mockup/slip-printer.html before being carried in here; see that file's
   comments for why each technique was chosen (clip-path reveal instead
   of animating height, gloss+noise texture on the printer body, the
   negative-margin overlap that threads the paper through the slot, etc).
--------------------------------------------------------------------- */
.printer {
  width: 100%; max-width: 300px; margin: 0 auto; position: relative; z-index: 2;
}
.printer-body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  background-blend-mode: overlay;
  border-radius: var(--r-lg) var(--r-lg) 10px 10px;
  padding: var(--s-3) var(--s-5) 10px;
  position: relative;
  box-shadow:
    0 16px 32px rgba(20,24,29,.14),
    inset 0 2px 2px rgba(255,255,255,.3),
    inset 0 -10px 14px rgba(0,0,0,.16);
}
.printer-body::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
  border-radius: var(--r-lg) var(--r-lg) 50% 50% / var(--r-lg) var(--r-lg) 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events: none;
}
.printer-grip { position: absolute; top: var(--s-4); bottom: 10px; width: 6px; border-radius: 3px; background: rgba(0,0,0,.15); }
.printer-grip.left { left: 8px; }
.printer-grip.right { right: 8px; }
.printer-vent { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.printer-led {
  width: 9px; height: 9px; border-radius: 50%; background: #6cffb0;
  box-shadow: 0 0 0 3px rgba(108,255,176,.25); animation: printer-blink 1.8s ease-in-out infinite;
}
@keyframes printer-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.printer-icons { display: flex; gap: 10px; opacity: .85; }
.printer-icons svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 1.8; }
.printer-screen {
  background: #0c1f1f; border-radius: 5px; padding: 6px var(--s-3); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.printer-brand { color: #dff7ef; font-weight: 700; letter-spacing: .06em; font-size: var(--t-xs); opacity: .95; }
.printer-status {
  position: relative; display: inline-block; height: 11px; min-width: 64px;
  font-size: 9px; letter-spacing: .1em; font-family: var(--font-mono);
}
.status-printing, .status-ready { position: absolute; top: 0; right: 0; white-space: nowrap; }
.status-printing { color: #6cffb0; animation: hide-status .25s ease forwards; animation-delay: 3s; }
.status-printing .letter { display: inline-block; opacity: 0; animation: show-letter .25s ease forwards; }
.status-printing .letter:nth-child(1)  { animation-delay: .05s; }
.status-printing .letter:nth-child(2)  { animation-delay: .1s; }
.status-printing .letter:nth-child(3)  { animation-delay: .15s; }
.status-printing .letter:nth-child(4)  { animation-delay: .2s; }
.status-printing .letter:nth-child(5)  { animation-delay: .25s; }
.status-printing .letter:nth-child(6)  { animation-delay: .3s; }
.status-printing .letter:nth-child(7)  { animation-delay: .35s; }
.status-printing .letter:nth-child(8)  { animation-delay: .4s; }
.status-printing .letter:nth-child(9)  { animation-delay: .45s; }
.status-printing .letter:nth-child(10) { animation-delay: .5s; }
.status-printing .letter:nth-child(11) { animation-delay: .55s; }
.status-ready { color: #6cffb0; opacity: 0; animation: show-status .3s ease forwards; animation-delay: 3.1s; }
@keyframes show-letter { to { opacity: 1; } }
@keyframes hide-status { to { opacity: 0; } }
@keyframes show-status { to { opacity: 1; } }
.printer-slot-housing {
  background: #0f2626; border-radius: 6px; height: 18px; position: relative; z-index: 3;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 3px 4px rgba(0,0,0,.25);
}
.printer-slot-housing::after { content: ""; position: absolute; inset: 6px 8%; background: #000; border-radius: 3px; opacity: .6; }
.printer-slot-housing::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -3px; height: 6px; background: #fff; border-radius: 1px; }
.printer-foot { height: 8px; width: 94%; margin: 0 auto; background: var(--c-brand-dark); border-radius: 0 0 8px 8px; filter: brightness(.8); position: relative; z-index: 1; }

.paper-track { width: 100%; max-width: 268px; margin: -16px auto 0; position: relative; z-index: 0; }
.paper {
  width: 100%; background: #fff; border-radius: 0 0 2px 2px;
  box-shadow: 0 14px 28px rgba(20,24,29,.2); font-family: var(--font);
  position: relative; transform-origin: top center;
  clip-path: inset(-6px -6px 100% -6px);
  /* A real thermal printer's stepper motor advances paper in small,
     discrete line-feed increments, not a smooth digital glide - steps()
     gives that faint mechanical judder instead of an eased slide. The
     lift-and-present flourish (adapted from the Uiverse reference this
     was benchmarked against) plays once the feed actually stops, as if
     the finished slip is being held up rather than just halting dead. */
  animation:
    paper-feed-reveal 3s steps(32, end) both,
    paper-present .6s cubic-bezier(.2,.7,.3,1.15) 3s both;
}
@keyframes paper-feed-reveal { to { clip-path: inset(-6px -6px -1% -6px); } }
@keyframes paper-present {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  55%  { transform: translateY(-4%) rotate(-1.2deg) scale(1.035); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
.paper-curl {
  position: absolute; top: 16px; right: 22px; z-index: 2; width: 0; height: 0;
  border-style: solid; border-width: 0 13px 13px 0; border-color: transparent #f1f1f1 transparent transparent;
  filter: drop-shadow(-2px 2px 2px rgba(20,24,29,.28));
}
.paper::before {
  content: ""; display: block; height: 10px;
  background:
    linear-gradient(45deg, #fff 50%, transparent 50%) 0 0 / 10px 10px repeat-x,
    linear-gradient(-45deg, #fff 50%, transparent 50%) 0 0 / 10px 10px repeat-x;
  background-color: var(--c-bg);
}
.paper::after {
  content: ""; display: block; height: 10px;
  background:
    linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 10px 10px repeat-x,
    linear-gradient(-135deg, #fff 50%, transparent 50%) 0 0 / 10px 10px repeat-x;
  background-color: var(--c-bg);
}
.paper-head { padding: var(--s-4) var(--s-4) var(--s-3); text-align: center; border-bottom: 3px solid var(--c-brand); }
.paper-logo-img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto var(--s-2); object-fit: contain; }
.paper-hospital { font-weight: 700; font-size: var(--t-md); color: var(--c-ink); }
.paper-address { font-size: 10.5px; color: var(--c-ink-3); margin-top: 3px; }
.paper-body { padding: var(--s-4) var(--s-4) 0; }
.paper-token-block { text-align: center; margin-bottom: var(--s-3); }
.paper-token-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-brand); font-weight: 700; margin-bottom: 2px; }
.paper-token { font-family: var(--font-mono); font-size: var(--t-3xl); font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }
.paper-hr { border: 0; border-top: 1px dashed var(--c-line); margin: 0 0 var(--s-3); }
.paper-section-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 700; margin-bottom: var(--s-2); }
.paper-rows { margin-bottom: var(--s-3); }
.paper-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--c-line-soft); }
.paper-row:last-child { border-bottom: none; }
.paper-row span:first-child { flex-shrink: 0; color: var(--c-ink-3); }
.paper-row span:last-child { text-align: right; font-weight: 650; color: var(--c-ink); }
.paper-note { text-align: center; font-size: 10.5px; color: var(--c-ink-2); background: var(--c-brand-soft); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.paper-thanks { text-align: center; color: #fff; background: var(--c-brand); font-size: 11px; font-weight: 650; letter-spacing: .03em; padding: 7px var(--s-3); margin-bottom: var(--s-3); }
/* Sits inside paper-body, between the note and the "thank you" footer -
   the middle of the slip, not trailing off the very bottom edge. Bar
   widths are generated from the HSID itself (patient-flow.js) - the
   pattern represents that patient's own HSID, not a fixed decorative
   stripe every slip would share. Not a real scannable symbology. */
.paper-barcode { height: 34px; margin: 0 0 4px; display: flex; align-items: stretch; justify-content: center; gap: 1.5px; }
.paper-barcode span { display: block; background: var(--c-ink); }
.paper-barcode-label { text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; color: var(--c-ink-3); margin: 0 0 var(--s-3); }

/* ---------- Phone ---------- */
@container kiosk (max-width: 559px) {
  .kiosk-shell { --t-2xl: 1.65rem; --t-xl: 1.4rem; --t-lg: 1.2rem; --t-md: 1.05rem; }
  .kiosk-top { padding: var(--s-2) var(--s-3); gap: var(--s-2); flex-wrap: wrap; }
  .kiosk-top .dim { display: none; }
  .kiosk-top .btn { padding: 6px 10px; font-size: var(--t-sm); }
  .kiosk-body { padding: var(--s-5) var(--s-4); }
  .k-h1 { font-size: var(--t-xl); }
  .k-btn { padding: var(--s-4); font-size: var(--t-md); }
  .k-btn-row { grid-template-columns: 1fr; }
  /* Short single-word labels (Print / Done) don't need the full-width stack
     other .k-btn-row buttons get on a phone - two of them side by side still
     reads comfortably even on a narrow screen. */
  .k-btn-row.k-btn-row-compact { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .k-chip { padding: var(--s-3) var(--s-4); font-size: var(--t-base); }
  .keypad { max-width: none; gap: var(--s-2); }
  .keypad button { padding: var(--s-3); font-size: var(--t-lg); }
  .k-display { font-size: var(--t-xl); letter-spacing: .16em; padding: var(--s-3); }
  .bubble { max-width: 92%; padding: var(--s-3); font-size: var(--t-base); }
  .k-inputbar { padding: var(--s-3) var(--s-4); }
  .k-textinput { padding: var(--s-3); font-size: var(--t-base); }
  .printer { max-width: 260px; }
  .paper-track { max-width: 232px; }
  .paper-token { font-size: var(--t-2xl); }
  .kv { grid-template-columns: 1fr; gap: var(--s-1); }
  .kv dt { margin-top: var(--s-2); }
  .summary-line { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------- Tablet / kiosk device ---------- */
@container kiosk (min-width: 560px) and (max-width: 899px) {
  .kiosk-body { padding: var(--s-6) var(--s-5); max-width: 680px; }
  .keypad { max-width: 400px; margin: 0 auto; }
  .bubble { max-width: 84%; }
}
@container kiosk (min-width: 900px) {
  .kiosk-shell {
    --t-4xl: 4.5rem; --t-3xl: 3.25rem; --t-2xl: 2.6rem;
    --t-xl: 2rem; --t-lg: 1.55rem; --t-md: 1.25rem;
  }
  .kiosk-body { max-width: 940px; padding: var(--s-8) var(--s-6); }
  .k-btn { padding: var(--s-6); }
  .k-chip { padding: var(--s-4) var(--s-6); }
  .keypad { max-width: 420px; }
  .keypad button { padding: var(--s-5); }
}