/* ============================================================================
   kiosk-voice.css: VOICE ORDERING add-on (2026-11-09, VOICE_ORDER_SPEC.md), RTT.Kiosk.UI Controls/UcKioskVoice.
   Token-only (--kd-* of the active design, fallbacks in kiosk-design.css .kd): swaps with every theme.
   Layers: .kv-ask (speak or touch?), .kv-sheet (listening, full), .kv-mini (listening, folded), .kv-fab (voice off).
   z-index: above the menu / ticket (<= 8), below the option popups (9999) and the message box (15000).
   ============================================================================ */

/* the scope wrapper only carries the tokens: it takes no space */
.kd.kv-scope { position: static; inset: auto; display: contents; background: transparent; }

/* ---------------- 1. speak or touch? ---------------- */
.kv-ask {
    position: fixed; inset: 0; top: var(--kd-demo-bar-h, 0px); z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--kd-gap) * 1.6); padding: var(--kd-pad); background: var(--kd-veil); backdrop-filter: blur(10px);
    color: var(--kd-text); font-family: var(--kd-font-body); animation: kd-fade .25s var(--kd-ease-out) both;
}
.kv-ask-title { font-size: calc(var(--kd-u) * 3); text-align: center; margin: 0; }
.kv-ask-cards { display: flex; flex-wrap: wrap; gap: calc(var(--kd-gap) * 1.4); justify-content: center; width: 100%; }
.kv-ask-card {
    flex: 1 1 calc(var(--kd-u) * 20); max-width: calc(var(--kd-u) * 30); min-height: calc(var(--kd-u) * 22);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kd-gap);
    padding: calc(var(--kd-pad) * 1.4); border-radius: var(--kd-card-r); border: calc(var(--kd-border) * 2) solid var(--kd-line);
    background: var(--kd-surface); color: var(--kd-text); font: inherit; cursor: pointer;
    box-shadow: 0 18px 40px -18px rgba(var(--kd-shadow-rgb), .6); animation: kd-rise .45s var(--kd-ease-out) both;
    transition: transform .2s var(--kd-ease-out);
}
.kv-ask-card:active { transform: scale(.97); }
.kv-ask-voice { background: var(--kd-accent); color: var(--kd-on-accent); border-color: var(--kd-accent); }
.kv-ask-touch { animation-delay: .08s; }
.kv-ask-icon { width: calc(var(--kd-u) * 6.5); height: calc(var(--kd-u) * 6.5); display: grid; place-items: center; border-radius: 50%; background: var(--kd-surface-2); }
.kv-ask-voice .kv-ask-icon { background: var(--kd-on-accent); color: var(--kd-accent); }
.kv-ask-icon svg { width: 58%; height: 58%; fill: currentColor; }
.kv-ask-voice .kv-ask-icon { animation: kv-ring 2.2s var(--kd-ease) infinite; }
.kv-ask-lbl { font-size: calc(var(--kd-u) * 2.2); text-align: center; }
.kv-ask-sub { font-size: calc(var(--kd-u) * 1.05); text-align: center; opacity: .85; max-width: 22em; }
.kv-privacy { margin: 0; font-size: calc(var(--kd-u) * .9); color: var(--kd-dim); text-align: center; }

/* ---------------- the mic orb (level meter: --kv-lvl 0..1 set by rtt-kiosk-voice.js) ---------------- */
.kv-orb {
    --kv-lvl: 0; position: relative; flex: none; width: calc(var(--kd-u) * 5); height: calc(var(--kd-u) * 5); border-radius: 50%;
    display: grid; place-items: center; background: var(--kd-accent); color: var(--kd-on-accent);
    box-shadow: 0 0 0 calc(var(--kd-u) * 1.4 * var(--kv-lvl)) var(--kd-accent-soft); transition: box-shadow .08s linear;
}
.kv-orb svg { width: 52%; height: 52%; fill: currentColor; }
.kv-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--kd-accent); opacity: 0; }
.kv-orb.kv-st-listening::after { animation: kd-wave 2.4s var(--kd-ease-out) infinite; }
.kv-orb.kv-st-thinking { background: var(--kd-primary); color: var(--kd-on-primary); }
.kv-orb.kv-st-thinking::after { opacity: 1; border-color: var(--kd-on-primary); border-right-color: transparent; border-bottom-color: transparent; animation: kd-tk-spin .9s linear infinite; }
.kv-orb.kv-st-error { background: var(--kd-surface-2); color: var(--kd-text); }
.kv-orb-sm { width: calc(var(--kd-u) * 3); height: calc(var(--kd-u) * 3); }

/* ---------------- 2. the voice sheet ---------------- */
.kv-sheet {
    position: fixed; inset: 0; top: var(--kd-demo-bar-h, 0px); z-index: 900; display: flex; flex-direction: column; gap: var(--kd-gap);
    padding: var(--kd-pad); padding-bottom: calc(var(--kd-pad) + 70px); /* room for the accessibility dock */
    overflow-y: auto; overscroll-behavior: contain;   /* review 10: a too small screen scrolls the sheet, nothing is cut */
    background: var(--kd-bg); color: var(--kd-text); font-family: var(--kd-font-body); animation: kd-fade .2s var(--kd-ease-out) both;
}
/* 2026-11-10 (Marc, screenshot review): header = microphone switch + ONE small feedback line + big buttons; the question card
   only when there is one (hidden while the customer speaks); the ticket takes ALL the remaining height, full width, one
   compact row per line (- + x on the same row), so the whole order is readable without scrolling. No chat. */
.kv-head { flex: none; display: flex; align-items: center; gap: var(--kd-gap); flex-wrap: wrap; }
.kv-head-txt { flex: 1 1 calc(var(--kd-u) * 12); min-width: 0; }
.kv-status { font-size: calc(var(--kd-u) * 1.6); line-height: 1.1; }
.kv-live { font-size: calc(var(--kd-u) * 1.05); font-style: italic; color: var(--kd-dim); margin-top: .2em; overflow-wrap: anywhere; }
/* review 8 (Marc: "the text above should not be cut"): up to 3 lines, then "..." */
.kv-reply { font-size: calc(var(--kd-u) * .95); color: var(--kd-dim); margin-top: .25em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; line-height: 1.25; }
.kv-hint { font-size: calc(var(--kd-u) * .95); color: var(--kd-dim); margin-top: .2em; }
.kv-head-btns { display: flex; gap: calc(var(--kd-gap) * .6); flex-wrap: wrap; }
.kd .kv-head-btn { min-height: var(--kd-touch); }
.kd .kv-head-btn svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.kd .kv-stop-btn { font-weight: 800; }
button.kv-orb { border: 0; padding: 0; cursor: pointer; font: inherit; }
.kv-orb.kv-st-paused { background: var(--kd-surface-2); color: var(--kd-dim); box-shadow: none; }

/* the question: compact so the ticket keeps most of the height */
/* review 5 (Marc: "I cannot scroll down"): the card takes at most ~55 % of the sheet, its pictures scroll inside it, and
   the ticket keeps at least ~4 rows + its pay button */
.kv-q {
    /* review 10 (Marc: "the card with the product name is cut"): no % cap; at least one full row of cards (see .kv-cands) */
    flex: none; display: flex; flex-direction: column; overflow: hidden;
    padding: calc(var(--kd-pad) * .7) var(--kd-pad); border-radius: var(--kd-card-r); background: var(--kd-surface);
    border: calc(var(--kd-border) * 2) solid var(--kd-accent); animation: kd-rise .3s var(--kd-ease-out) both;
}
.kv-q-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kd-gap); flex-wrap: wrap; }
.kv-q-title { font-size: calc(var(--kd-u) * 1.5); }
.kv-q-hint { font-size: calc(var(--kd-u) * .85); color: var(--kd-dim); display: flex; gap: 1em; flex-wrap: wrap; }
.kv-q-more { color: var(--kd-accent); font-weight: 700; }
/* review 8: rows = their content (max-content): in a scrolling grid a picture sized in % counts as 0 high, the rows were squeezed
   and the names / prices of some cards disappeared under the pictures */
.kv-cands { flex: none; min-height: calc(var(--kd-u) * 10.2); max-height: calc(var(--kd-u) * 21); overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--kd-u) * 7.5), 1fr)); grid-auto-rows: max-content; align-content: start; gap: calc(var(--kd-gap) * .7); margin-top: calc(var(--kd-gap) * .7); padding-bottom: .2em; }
.kv-q-top, .kv-q-actions, .kv-ask-btns { flex: none; }
.kv-q-busy { opacity: .6; transition: opacity .2s; }   /* a phrase is being processed: still visible and pressable */
.kv-cand {
    display: flex; flex-direction: column; align-items: center; gap: .25em; padding: calc(var(--kd-gap) * .45);
    border-radius: var(--kd-card-r); border: calc(var(--kd-border) * 2) solid var(--kd-line); background: var(--kd-surface-2);
    color: var(--kd-text); font: inherit; cursor: pointer; min-height: var(--kd-touch); animation: kd-rise .3s var(--kd-ease-out) both;
    transition: transform .15s var(--kd-ease-out), border-color .15s;
}
.kv-cand:active { transform: scale(.96); }
.kv-cand.on { border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kv-cand img { width: 100%; height: calc(var(--kd-u) * 6); flex: none; object-fit: cover; border-radius: calc(var(--kd-card-r) * .7); }
.kv-cand-noimg { width: 100%; height: calc(var(--kd-u) * 6); flex: none; display: grid; place-items: center; border-radius: calc(var(--kd-card-r) * .7); background: var(--kd-primary-soft); font-size: calc(var(--kd-u) * 2.4); font-weight: 800; color: var(--kd-primary); }
.kv-cand-name { font-weight: 700; font-size: calc(var(--kd-u) * .95); text-align: center; line-height: 1.15; }
.kv-cand-price { font-size: calc(var(--kd-u) * .85); color: var(--kd-price); }
.kv-q-actions { display: flex; gap: var(--kd-gap); justify-content: flex-end; margin-top: calc(var(--kd-gap) * .7); flex-wrap: wrap; }

/* 2026-11-10: declared allergies / diet (always visible while voice is on) + answer buttons of the AI's questions */
.kv-allergy { flex: none; display: flex; align-items: center; gap: .6em; padding: .5em .9em; border-radius: var(--kd-btn-r);
    background: var(--kd-accent-soft); color: var(--kd-text); border: var(--kd-border) solid var(--kd-accent); font-size: calc(var(--kd-u) * .95); font-weight: 600; }
.kv-allergy-ico { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: var(--kd-accent); color: var(--kd-on-accent); font-weight: 900; }
.kv-ask-btns { display: flex; flex-wrap: wrap; gap: calc(var(--kd-gap) * .7); margin-top: calc(var(--kd-gap) * .8); }
.kd .kv-ask-btn { min-height: var(--kd-touch); min-width: calc(var(--kd-u) * 7); font-size: calc(var(--kd-u) * 1.15); flex: 1 1 auto; }

/* the live ticket: the rest of the screen, every line visible */
.kv-ticket {
    flex: 1 1 auto; min-height: calc(var(--kd-touch) * 4.2); width: 100%; display: flex; flex-direction: column; gap: calc(var(--kd-gap) * .6);
    padding: calc(var(--kd-pad) * .8) var(--kd-pad); border-radius: var(--kd-card-r); background: var(--kd-paper); color: var(--kd-ink);
    box-shadow: 0 18px 30px -12px rgba(var(--kd-shadow-rgb), .45);
}
.kv-ticket-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--kd-gap); border-bottom: 2px solid var(--kd-ink); padding-bottom: .3em; }
.kv-ticket-title { font-size: calc(var(--kd-u) * 1.3); }
.kv-ticket-total { font-size: calc(var(--kd-u) * 1.15); }
.kv-ticket-total strong { font-size: 1.25em; margin-left: .3em; }
/* a long order gets tighter rows (rules at the end of this block) instead of a scroll bar; scrolling only beyond ~20 lines */
.kv-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; }
.kv-empty { color: var(--kd-ink-dim); font-size: calc(var(--kd-u) * 1); padding: .6em 0; }
.kv-line {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .7em;
    padding: .25em 0; border-bottom: 1px dashed var(--kd-ink-line); font-size: calc(var(--kd-u) * 1.05);
    min-height: calc(var(--kd-touch) * .78);
}
.kv-line-child { padding-left: 1.6em; font-size: calc(var(--kd-u) * .92); color: var(--kd-ink-dim); min-height: calc(var(--kd-touch) * .6); }
.kv-line-qty { font-weight: 800; }
.kv-line-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.2; }
.kv-line-sub { font-size: .85em; color: var(--kd-ink-dim); }
.kv-line-price { font-weight: 700; white-space: nowrap; text-align: right; min-width: 4.2em; }
.kv-line-btns { display: flex; gap: .35em; }
.kv-ibtn { width: calc(var(--kd-touch) * .72); height: calc(var(--kd-touch) * .62); border-radius: var(--kd-btn-r); border: 1px solid var(--kd-ink-line); background: transparent; color: var(--kd-ink); font: inherit; font-size: calc(var(--kd-u) * 1.15); font-weight: 800; cursor: pointer; line-height: 1; }
.kv-ibtn-del { color: var(--kd-ink-dim); }
.kv-flash { animation: kd-print .5s var(--kd-ease-out) both; background: var(--kd-accent-soft); border-radius: .4em; }
.kd .kv-pay { flex: none; width: 100%; }

/* many lines: tighter rows so up to ~20 lines stay visible without scrolling */
.kv-lines:has(> .kv-line:nth-child(9)) .kv-line { min-height: calc(var(--kd-touch) * .62); padding: .15em 0; font-size: calc(var(--kd-u) * .95); }
.kv-lines:has(> .kv-line:nth-child(14)) .kv-line { min-height: calc(var(--kd-touch) * .5); padding: .05em 0; font-size: calc(var(--kd-u) * .85); }
.kv-lines:has(> .kv-line:nth-child(14)) .kv-ibtn { height: calc(var(--kd-touch) * .48); }

/* ---------------- 3. folded bar and mic button (bottom-left, above the accessibility dock) ---------------- */
.kv-mini, .kv-fab {
    position: fixed; left: max(12px, env(safe-area-inset-left, 0px));
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + max(70px, calc(var(--kd-touch) * 1.25 + var(--kd-gap) * 2 + 12px)));
    z-index: 900; font-family: var(--kd-font-body);
}
.kv-mini {
    display: flex; align-items: center; gap: var(--kd-gap); max-width: calc(100vw - 24px); padding: calc(var(--kd-gap) * .6) var(--kd-gap);
    border-radius: 999px; background: var(--kd-surface); color: var(--kd-text); border: var(--kd-border) solid var(--kd-line);
    box-shadow: 0 12px 30px -10px rgba(var(--kd-shadow-rgb), .6); animation: kd-rise .3s var(--kd-ease-out) both;
}
.kv-mini-txt { font-weight: 700; font-size: calc(var(--kd-u) * 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .kv-mini-btn { min-height: calc(var(--kd-touch) * .8); }
.kd .kv-mini-btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }

.kv-fab {
    display: inline-flex; align-items: center; gap: .6em; min-height: var(--kd-touch); padding: 0 1.3em 0 .5em; border: 0;
    border-radius: 999px; background: var(--kd-accent); color: var(--kd-on-accent); font-size: calc(var(--kd-u) * 1.15); font-weight: 800;
    cursor: pointer; box-shadow: 0 12px 30px -8px rgba(var(--kd-shadow-rgb), .6); animation: kd-rise .4s var(--kd-ease-out) both;
}
.kv-fab-ico { width: calc(var(--kd-touch) * .78); height: calc(var(--kd-touch) * .78); border-radius: 50%; display: grid; place-items: center; background: var(--kd-on-accent); color: var(--kd-accent); animation: kv-ring 2.6s var(--kd-ease) infinite; }
.kv-fab-ico svg { width: 58%; height: 58%; fill: currentColor; }

@keyframes kv-ring { 0%, 100% { box-shadow: 0 0 0 0 var(--kd-accent-soft); } 50% { box-shadow: 0 0 0 calc(var(--kd-u) * .9) var(--kd-accent-soft); } }

/* welcome screen chip ("order by voice" available) */
.kv-welcome-chip { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--kd-gap); padding: .45em 1em; border-radius: 999px; background: var(--kd-accent); color: var(--kd-on-accent); font-weight: 800; font-size: calc(var(--kd-u) * 1.05); animation: kd-rise .5s var(--kd-ease-out) .3s both; }
.kv-welcome-chip svg { width: 1.3em; height: 1.3em; fill: currentColor; }

/* review 10: shorter screens (browser windows, small tablets): a compact header leaves the room to the cards and the ticket.
   A Full HD portrait kiosk (1920 high) keeps the full size. */
@media (max-height: 1300px) {
    .kv-sheet { gap: calc(var(--kd-gap) * .6); padding-top: calc(var(--kd-pad) * .6); }
    .kv-orb { width: calc(var(--kd-u) * 3.6); height: calc(var(--kd-u) * 3.6); }
    .kv-status { font-size: calc(var(--kd-u) * 1.3); }
    .kd .kv-head-btn { min-height: calc(var(--kd-touch) * .8); font-size: calc(var(--kd-u) * .95); padding: 0 1em; }
    .kv-q { padding: calc(var(--kd-pad) * .5) calc(var(--kd-pad) * .7); }
    .kv-q-title { font-size: calc(var(--kd-u) * 1.25); }
    .kv-ticket { min-height: calc(var(--kd-touch) * 3.6); }
}

@media (prefers-reduced-motion: reduce) {
    .kv-ask, .kv-ask-card, .kv-sheet, .kv-q, .kv-cand, .kv-msg, .kv-mini, .kv-fab, .kv-flash, .kv-welcome-chip { animation: none; }
    .kv-orb::after, .kv-fab-ico, .kv-ask-voice .kv-ask-icon { animation: none; }
}

/* 2026-11-14: edit button of a ticket line (option screen) + the upsell suggestions inside the "no thanks" card */
.kv-ibtn-edit { display: inline-flex; align-items: center; justify-content: center; color: var(--kd-ink); }
.kv-ibtn-edit svg { width: 1em; height: 1em; }
.kv-q-sub { margin-top: calc(var(--kd-gap) * .8); font-weight: 700; font-size: calc(var(--kd-u) * .95); color: var(--kd-ink); }