/* Flakk Guest: Rate my room / Something's wrong / phrases (05.11.2026, build wave 1, agent E). Light/dark follows the phone,
   like the orb's cards. Every tap target ≥ 44 px; round buttons remain square; no endless animation under reduced motion. */

/* ---- the home view: phrase row + the inline slot (ask / status), above the text bar ---- */
.rt-home { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.rt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 400px; } /* 2 + 2 + 1: three compact rows at every width */
.rt-ph { min-height: 44px; max-width: 100%; min-width: 0; padding: 5px 10px; border-radius: 16px; border: 1px solid rgba(243,237,226,.26); background: rgba(255,255,255,.07);
  color: var(--o-ink, #F3EDE2); font: 500 14px/1.2 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.005em; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere; text-align: center; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.rt-ph:hover { border-color: rgba(242,167,65,.7); }
.rt-ph:active { background: rgba(242,167,65,.22); }
.rt-ph:focus-visible, .rt-notnow:focus-visible, .rt-mini:focus-visible { outline: 3px solid var(--o-amber-2, #FFD48A); outline-offset: 2px; }
.rt-disc { margin: 0; max-width: 100%; font: 400 12.5px/1.35 'Geist', system-ui, sans-serif; color: rgba(243,237,226,.72); text-align: center; overflow-wrap: anywhere; } /* B9: the AI line, always (keyboard open too) */
.o-app.has-vis .rt-home, .o-app.kb .rt-home, .o-app.tin .rt-home, .o-app.rt-typing .rt-home { display: none; } /* typing in the text bar too (rt-typing: rate.js) */ /* a card, the keyboard: the screen belongs to it */
.rt-slot:empty { display: none; }
.rt-slot { width: 100%; display: flex; justify-content: center; }

/* the inline ask: a small card in the flow (never a pop-up) */
.rt-ask { width: 100%; max-width: 340px; box-sizing: border-box; padding: 8px 10px 4px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(243,237,226,.18); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rt-ask[hidden] { display: none; }
.rt-askq { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 450; color: var(--o-amber, #F2A741); letter-spacing: -.015em; }
.rt-astars { display: flex; justify-content: center; gap: 0; }
.rt-notnow { min-height: 44px; padding: 0 14px; border: 0; background: none; color: rgba(243,237,226,.75); font: 500 13.5px/1 'Geist', system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* the status pill on the home view */
.rt-mini { display: flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; box-sizing: border-box; padding: 6px 16px 6px 12px; border-radius: 999px; border: 1px solid rgba(242,167,65,.45); background: rgba(242,167,65,.14); color: var(--o-ink, #F3EDE2); font: 500 14px/1.2 'Geist', system-ui, sans-serif; cursor: pointer; text-align: start; }
.rt-mini i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #F2A741; animation: rt-pulse 1.6s ease-in-out infinite; }
.rt-mini-on_the_way i { background: #6FB6FF; }
.rt-mini-fixed { border-color: rgba(111,207,151,.5); background: rgba(111,207,151,.14); }
.rt-mini-fixed i { background: #6FCF97; animation: none; }
.rt-mini span { display: flex; flex-direction: column; min-width: 0; }
.rt-mini small { font-size: 12px; opacity: .75; }
@keyframes rt-pulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---- the sheet ---- */
.rt-scrim { position: fixed; inset: 0; z-index: 1500; background: rgba(5,14,26,.55); }
.rt-scrim[hidden], .rt-sheet[hidden] { display: none; }
.rt-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1501; box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto;
  max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #FBF8F2; color: #14202E;
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 0 -18px 50px -18px rgba(0,0,0,.55); animation: rt-up .32s cubic-bezier(.3,1.1,.4,1); }
@keyframes rt-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.rt-hd { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.rt-t { flex: 1; min-width: 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.rt-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: rgba(15,42,71,.08); color: inherit; display: grid; place-items: center; cursor: pointer; }
.rt-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.rt-x:focus-visible, .rt-sb:focus-visible, .rt-v:focus-visible, .rt-chip:focus-visible, .rt-go:focus-visible { outline: 3px solid #F2A741; outline-offset: 2px; }

.rt-stars { display: flex; justify-content: center; gap: 2px; margin: 4px 0 6px; }
.rt-sb { flex: 0 1 56px; min-width: 44px; height: 52px; padding: 0; border: 0; background: transparent; color: #55657A; display: grid; place-items: center; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.rt-star { width: 38px; height: 38px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .2s; }
.rt-sb.on { color: #D9862A; }
.rt-sb.on .rt-star { fill: #F2A741; }
.rt-sb-s { width: 44px; height: 44px; flex: none; color: rgba(243,237,226,.7); }
.rt-sb-s .rt-star { width: 28px; height: 28px; }
.rt-sb-s:hover, .rt-sb-s:focus-visible { color: #F2A741; }
.rt-two { display: flex; gap: 8px; margin: 2px 0 8px; }
.rt-two > * { flex: 1 1 0; min-width: 0; }
.rt-v { min-height: 46px; padding: 6px 10px; border-radius: 14px; border: 1.5px solid rgba(15,42,71,.18); background: transparent; color: inherit; font: 600 15px/1.2 inherit; font-family: inherit; cursor: pointer; overflow-wrap: anywhere; }
.rt-v.on { border-color: #F2A741; background: rgba(242,167,65,.18); }
.rt-q { margin: 6px 0 6px; font-weight: 600; font-size: 15px; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(15,42,71,.16); background: rgba(15,42,71,.04); color: inherit; font: 500 14.5px/1.2 inherit; font-family: inherit; cursor: pointer; overflow-wrap: anywhere; text-align: start; }
.rt-chip span { font-size: 17px; line-height: 1; }
.rt-chip.on { border-color: #F2A741; background: #F2A741; color: #0A1D33; }
.rt-cm { display: block; width: 100%; box-sizing: border-box; min-height: 64px; max-height: 140px; resize: none; margin: 0 0 10px; padding: 11px 14px; border-radius: 14px; border: 1.5px solid rgba(15,42,71,.24); background: #fff; color: #14202E; font: inherit; font-size: 16px; line-height: 1.4; }
.rt-cm::placeholder { color: #5E6B7A; }
.rt-cm:focus { outline: none; border-color: #F2A741; box-shadow: 0 0 0 3px rgba(242,167,65,.3); }
.rt-go { display: block; width: 100%; min-height: 50px; padding: 8px 14px; border: 0; border-radius: 16px; background: #F2A741; color: #0A1D33; font: 600 16.5px/1.2 inherit; font-family: inherit; cursor: pointer; overflow-wrap: anywhere; }
.rt-go:disabled { opacity: .62; cursor: default; }
.rt-two .rt-go { min-height: 54px; }
.rt-no { background: transparent; color: inherit; border: 1.5px solid rgba(15,42,71,.22); }
.rt-plain { margin-top: 6px; }
.rt-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(217,59,48,.1); color: #A3271E; font-size: 14px; line-height: 1.35; }
.rt-sub { margin: 2px 0 10px; font-size: 15.5px; line-height: 1.45; }
.rt-big { margin: 4px 0 2px; font-size: 40px; line-height: 1; text-align: center; }
.rt-s-thanks .rt-sub, .rt-s-solved .rt-sub { text-align: center; }
.rt-steps { margin: 0 0 12px; padding: 0 0 0 4px; list-style: none; counter-reset: rt; display: grid; gap: 6px; }
.rt-steps li { counter-increment: rt; position: relative; padding: 9px 12px 9px 42px; border-radius: 12px; background: rgba(15,42,71,.05); font-size: 15px; line-height: 1.4; }
.rt-steps li::before { content: counter(rt); position: absolute; left: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #F2A741; color: #0A1D33; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
[dir="rtl"] .rt-steps li { padding: 9px 42px 9px 12px; }
[dir="rtl"] .rt-steps li::before { left: auto; right: 10px; }

/* the status: three steps */
.rt-track { list-style: none; margin: 8px 0 8px; padding: 0; display: flex; gap: 4px; }
.rt-track li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13.5px; font-weight: 500; opacity: .55; overflow-wrap: anywhere; }
.rt-track li i { width: 100%; height: 6px; border-radius: 3px; background: rgba(15,42,71,.14); }
.rt-track li.done, .rt-track li.now { opacity: 1; }
.rt-track li.done i { background: #6FCF97; }
.rt-track li.now i { background: #F2A741; }
.rt-track li.now span { font-weight: 700; }
.rt-live { text-align: center; }

@media (prefers-color-scheme: dark) {
  .rt-sheet { background: #1A2433; color: #EEF2F7; }
  .rt-x { background: rgba(255,255,255,.14); }
  .rt-sb { color: #A7B6C9; } .rt-sb.on { color: #F2A741; }
  .rt-v, .rt-chip, .rt-no { border-color: rgba(255,255,255,.22); }
  .rt-chip { background: rgba(255,255,255,.05); }
  .rt-chip.on { background: #F2A741; color: #0A1D33; border-color: #F2A741; }
  .rt-cm { background: #0F1824; color: #EEF2F7; border-color: rgba(255,255,255,.22); }
  .rt-cm::placeholder { color: #93A3B8; }
  .rt-steps li { background: rgba(255,255,255,.06); }
  .rt-track li i { background: rgba(255,255,255,.16); }
  .rt-err { background: rgba(255,107,94,.14); color: #FFB3AB; }
}
/* small screens: the orb gives the row some room */
@media (max-height: 700px) { .o-app.rt-on .orb { --sz: min(26vw, 104px); } .o-app.rt-on .o-center { gap: 10px; } }
@media (max-height: 600px) { .o-app.rt-on .orb { --sz: min(22vw, 84px); } .rt-ph { padding: 4px 11px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .rt-mini i { animation: none; } .rt-sheet { animation: none; } }

/* 05.11.2026 correction (GUMMI SAID: no black-and-white pop-up and no cycling "Press to speak" languages; instead commands people can
   say, in the brand colours and in their language). Navy + amber like the orb; motion is opacity/transform only. */
.rt-lang:focus-visible, .rt-sw:focus-visible { outline: 3px solid var(--o-amber-2, #FFD48A); outline-offset: 2px; }
.rt-lang { position: absolute; top: calc(env(safe-area-inset-top) + 10px); inset-inline-end: 12px; z-index: 25; width: 44px; height: 44px; aspect-ratio: 1 / 1; flex: none; box-sizing: border-box; padding: 0;
  border-radius: 50%; border: 1px solid rgba(243,237,226,.3); background: rgba(10,29,51,.55); color: var(--o-ink, #F3EDE2); display: grid; place-items: center; cursor: pointer; }
.rt-lang:hover { border-color: var(--o-amber, #F2A741); }
.rt-globe { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.fi-on .rt-lang, .o-app.has-vis .rt-lang { display: none; } /* the intro and an open card own the top corner */
.rt-sw { position: absolute; top: calc(env(safe-area-inset-top) + 62px); left: 50%; z-index: 26; transform: translateX(-50%); box-sizing: border-box; max-width: calc(100% - 32px); min-height: 40px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(242,167,65,.6); background: #0F2A47; color: var(--o-ink, #F3EDE2); font: 500 14px/1.3 'Geist', system-ui, sans-serif; text-align: center; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); animation: rt-sw-in .32s cubic-bezier(.3,1,.4,1); transition: opacity .3s ease; }
.rt-sw u { color: var(--o-amber-2, #FFD48A); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rt-sw.rt-out { opacity: 0; }
@keyframes rt-sw-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .rt-sw { animation: none; } }
/* 05.11.2026 (~15:40): the amber line under the orb shows the example commands; two lines are reserved so a longer command never moves
   the screen; a quick opacity cross-fade (the old label's 1.1 s fade was for "Tap to talk" alone). */
.o-hint.cmd { font-style: italic; font-size: clamp(19px, 5.4vw, 24px); line-height: 1.2; letter-spacing: 0; min-height: 2.4em; max-width: min(92vw, 420px); display: flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance; transition: opacity .42s ease; }