:root{
  /* Layout: one fixed screen. Desktop: robot left, answer right, input docked at the bottom.
     Phone: robot on top, shrinking when an answer has cards or the keyboard is open; answer below; input above the keyboard. */
  --night:#0a1024;        /* Samarkand night sky */
  --night-2:#131c3d;      /* raised surfaces */
  --majolica:#35d6c9;     /* Registan tile turquoise, the accent */
  --gold:#e3b866;         /* zardozi embroidery gold */
  --wine:#7a1736;         /* Bagizagan winery burgundy, the robe */
  --cream:#f3ecdd;        /* text */
  --muted:#9aa3c2;        /* secondary text */
  --line:rgba(227,184,102,.22);
  --font-display:"Unbounded","Trebuchet MS",sans-serif;
  --font-body:"Onest","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(16px,3vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--night);color:var(--cream);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.app{position:fixed;left:0;right:0;top:0;height:100%;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;
  padding:max(16px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand b{font-family:var(--font-display);font-weight:600;letter-spacing:.22em;font-size:15px;color:var(--gold)}
.brand span{font-size:12px;color:var(--muted);letter-spacing:.04em}
.top-right{display:flex;align-items:center;gap:10px;min-width:0}
.demo{font-size:12px;color:var(--night);background:var(--gold);padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap}
.s{display:none}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.langs button{background:none;border:0;color:var(--muted);font:500 13px var(--font-body);padding:7px 13px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--majolica);color:var(--night)}
.stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(8px,3vw,48px);min-height:0;min-width:0}
.robot{position:relative;min-height:0;min-width:0;cursor:pointer}
.robot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.robot .fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:var(--font-display);color:var(--gold);font-size:22px;letter-spacing:.2em}
.talk{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0;min-width:0;max-width:620px}
.you{font-size:13px;color:var(--muted);min-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you b{color:var(--gold);font-weight:500}
.speech{overflow-y:auto;min-height:0;min-width:0;display:flex;flex-direction:column;gap:14px;padding-right:4px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#say{font-size:clamp(18px,2.1vw,25px);line-height:1.4;font-weight:500;text-wrap:pretty;white-space:pre-line;overflow-wrap:anywhere}
#say::after{content:"";display:inline-block;width:.5em;height:1em;vertical-align:-.15em;margin-left:3px;background:var(--majolica);opacity:0}
#say.typing::after{opacity:1;animation:blink .7s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#extra{display:flex;flex-direction:column;gap:12px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.card{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:8px;min-width:0}
.c-main,.c-side{display:flex;flex-direction:column;gap:5px;min-width:0}
.c-side{margin-top:auto}
.card h3{font:600 13px/1.3 var(--font-display);color:var(--cream);text-wrap:balance}
.card p{font-size:13px;color:var(--muted);line-height:1.4}
.price{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);white-space:nowrap}
.price b{font-size:19px;color:var(--gold);font-weight:600}
.price s{margin-right:5px}
.total{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{font-size:11.5px;color:var(--majolica);letter-spacing:.02em}
.btn{font:600 14px var(--font-body);border-radius:10px;padding:10px 14px;cursor:pointer;border:1px solid var(--majolica);background:var(--majolica);color:var(--night);text-decoration:none;text-align:center;display:inline-block}
.btn.ghost{background:transparent;color:var(--majolica)}
.btn:hover{filter:brightness(1.1)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.note{font-size:12.5px;color:var(--muted);line-height:1.45}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.act{display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:12px;background:var(--night-2);border:1px solid var(--line);text-decoration:none;color:var(--cream);min-width:0}
.act:hover{border-color:var(--majolica)}
.act b{font-size:12px;color:var(--muted);font-weight:500}
.act span{font-size:14.5px;color:var(--majolica);overflow-wrap:anywhere}
.addr{font-size:14px;color:var(--muted)}
/* Dates: one range calendar (two months side by side, one on a phone) */
.datef{display:flex;flex-direction:column;gap:10px;max-width:600px}
.cal-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cal-f{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:10px;background:var(--night-2);border:1px solid var(--line);min-width:0}
.cal-f b{font-size:12px;font-weight:500;color:var(--muted)}
.cal-f span{font:500 16px var(--font-body);color:var(--cream)}
.cal-f.on{border-color:var(--majolica)}
.cal{position:relative}
.cal-prev,.cal-next{position:absolute;top:0;width:36px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--night-2);color:var(--cream);font-size:18px;line-height:1;cursor:pointer}
.cal-prev{left:0}.cal-next{right:0}
.cal-prev:disabled{opacity:.3;cursor:default}
.cal-grids{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.cal-t{text-align:center;font:600 14px/32px var(--font-body);color:var(--cream);text-transform:capitalize}
.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px}
.cal-days i{font-style:normal;text-align:center;font-size:11.5px;color:var(--muted);padding:6px 0 4px}
.cal-d{height:34px;border:0;padding:0;background:none;color:var(--cream);font:500 14px var(--font-body);border-radius:10px;cursor:pointer}
.cal-d:disabled{opacity:.3;cursor:default}
.cal-d.now{box-shadow:inset 0 0 0 1px var(--line)}
.cal-d:hover:not(:disabled){background:rgba(53,214,201,.2)}
.cal-d.mid{background:rgba(53,214,201,.14);border-radius:0}
.cal-d.in,.cal-d.out,.cal-d.in:hover,.cal-d.out:hover{background:var(--majolica);color:var(--night);font-weight:700}
.cal-d.in.has{border-radius:10px 0 0 10px}
.cal-d.out{border-radius:0 10px 10px 0}
.cal-foot{display:flex;gap:8px;align-items:end}
.cal-foot .btn{flex:1}
.datef .btn:disabled{opacity:.45;cursor:default;filter:none}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.form input,.form select{font:500 16px var(--font-body);background:var(--night-2);color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:44px;width:100%;color-scheme:dark}
.datef .btn{min-height:44px}
ul.plain{list-style:none;padding:0;display:grid;gap:6px;font-size:14.5px}
ul.plain b{color:var(--gold);font-weight:500}
.dock{display:flex;flex-direction:column;gap:9px;max-width:980px;width:100%;margin:0 auto;min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font:500 13.5px var(--font-body);color:var(--cream);background:rgba(53,214,201,.08);border:1px solid rgba(53,214,201,.4);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.chip:hover{background:rgba(53,214,201,.2)}
.ask{position:relative;display:flex;align-items:center;gap:6px;background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:6px 6px 6px 16px;box-shadow:0 0 40px rgba(53,214,201,.12);min-width:0}
.ask input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--cream);font:400 17px var(--font-body);padding:8px 0}
.ask input::placeholder{color:var(--muted);text-overflow:ellipsis}
.ask:focus-within{border-color:var(--majolica)}
#sendBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center}
.icon[hidden]{display:none}
.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon:hover{border-color:var(--majolica);color:var(--majolica)}
.icon[aria-pressed="true"]{background:var(--majolica);border-color:var(--majolica);color:var(--night)}
.icon.listening{background:#e0566f;border-color:#e0566f;color:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(224,86,111,.18)}}
.mic-hint{font-size:14px;color:var(--gold);line-height:1.35;display:flex;align-items:center;justify-content:center;gap:8px}
.mic-hint svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(3px,4px)}}

.mic-hint[hidden]{display:none}
button:focus-visible,a:focus-visible,.form input:focus-visible,.form select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Phone ----------
   The input lives on a "reception desk" plate at the bottom, like a messenger.
   Robot has two poses: standing (greeting, short answers) and peeking over the desk
   (long answers, or while the guest types): same size, only his head shows above the plate. */
@media (max-width:760px){
  :root{--gutter:14px}
  .app{gap:6px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:0;--peek:140px;--dock-h:120px}
  .brand span,.l{display:none}
  .s{display:inline}
  .brand b{font-size:13px;letter-spacing:.18em}
  .top-right{gap:6px}
  .demo{font-size:11px;padding:3px 8px}
  .langs button{padding:8px 10px;font-size:12.5px}
  .top .icon{width:36px;height:36px;border-radius:10px}
  .top .icon svg{width:18px;height:18px}
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,50%) minmax(0,1fr);gap:2px}
  .talk{justify-content:flex-start;max-width:none;gap:6px;min-height:0}
  #say{font-size:19px;line-height:1.38}
  .speech{gap:12px;padding-right:0;padding-bottom:6px}

  /* the desk */
  .dock{position:relative;z-index:2;margin:0 calc(-1*var(--gutter));width:auto;max-width:none;
    padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));gap:8px;
    background:linear-gradient(180deg,#18234f 0%,#0f1738 55%,#0b1129 100%);
    border-top:1px solid rgba(227,184,102,.45);border-radius:22px 22px 0 0;box-shadow:0 -14px 30px rgba(4,8,22,.55)}
  .dock::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}

  /* peeking pose */
  .app.rich .stage,.app.kb .stage{grid-template-rows:minmax(0,1fr);padding-bottom:var(--peek)}
  .app.rich .robot,.app.kb .robot{position:absolute;z-index:3;pointer-events:none;left:50%;width:min(340px,92vw);height:320px;
    bottom:calc(var(--dock-h) - var(--robot-below,186px));transform:translateX(-50%)}
  .app.kb .chips{display:none}
  .app.kb .talk{justify-content:flex-end}
  .app.kb .speech{flex:0 1 auto}

  .cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .card{flex-direction:row;gap:12px;padding:12px}
  .c-main{flex:1}
  .card h3{font-size:12.5px}
  .card p{font-size:12.5px}
  .c-side{margin-top:0;flex:none;align-items:flex-end;justify-content:space-between;text-align:right;gap:4px}
  .c-side .btn{padding:8px 18px;margin-top:4px}
  .c-side .note{font-size:11px}
  /* dates on a phone: the calendar needs the whole height, so the robot steps away and the button stays in view */
  .app:has(.datef) .robot{display:none}
  .app:has(.datef) .stage{padding-bottom:0}
  .datef{gap:6px}
  .cal-f{flex-direction:row;align-items:baseline;gap:5px;padding:6px 8px;white-space:nowrap;overflow:hidden}
  .cal-f b{font-size:11.5px}
  .cal-f span{font-size:14px}
  .cal-grids{grid-template-columns:minmax(0,1fr);touch-action:pan-y}
  .cal-m+.cal-m{display:none}
  .cal-d{height:36px}
  .cal-days i{padding:2px 0}
  .cal-foot{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--night) 40%);padding:8px 0 2px;align-items:center}
  .cal-foot label{flex-direction:row;align-items:center;gap:8px}
  .actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .act.wide{grid-column:1/-1}
  .act span{overflow-wrap:normal}
  .row .btn{flex:1 1 auto}
  .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter));padding:2px var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - 28px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{padding:9px 14px}
  .ask{padding:4px 4px 4px 14px;border-radius:14px;gap:4px}
  .ask input{font-size:16px}
  #sendBtn{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:11px;flex:none}
}
@media (max-width:760px) and (max-height:620px){
  .stage{grid-template-rows:minmax(0,38%) minmax(0,1fr)}
  /* a short phone: the whole month has to fit above the pinned button */
  .cal-d{height:30px}
  .app:has(.datef) .chips,.app:has(.datef) .you{display:none}

}
@media (max-width:340px){.demo{display:none}}
@media (prefers-reduced-motion:reduce){#say.typing::after,.icon.listening,.mic-hint svg,.robot{animation:none!important}}

/* ---------- Content bank overlay ---------- */
.demo[hidden]{display:none}
.gallery{position:fixed;inset:0;z-index:10;background:var(--night);display:flex;flex-direction:column;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
.gallery[hidden]{display:none}
.gal-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gal-top .chips{justify-content:flex-start;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
.gal-top .chip[aria-pressed="true"]{background:var(--majolica);color:var(--night)}
.gal-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-content:start}
.gal-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block;background:var(--night-2)}
.gal-grid .note{grid-column:1/-1;font-size:15px}
.gal-grid .btn{justify-self:start}
@media (max-width:760px){.gal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}