/* De gouden draad: the homepage, check-in and the client lounge share one
   world (shared/sky.js) and these pieces. Ana Coding's own colours: the
   logo's forest and cream, its orange dot, and gold for the thread. One
   theme on purpose: the sky behind it runs from night to dusk. */
:root{
  color-scheme:dark;
  --forest:#1e2e28; --deep:#0f1b16; --moss:#2f4a3e; --sage:#a8bbae;
  --cream:#f7f3ec; --ivory:#fbf8f2; --orange:#e06c3c; --gold:#e2b56a; --gold-ink:#a87a33; --muted:#7d8a82;
  --ok:#8fd6a8; --bad:#ff9b8a;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --g:max(16px,min(52px,4vw));
  --ink:var(--cream);
  --top-h:calc(env(safe-area-inset-top,0px) + 84px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ul,ol{margin:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--cream);font:16px/1.5 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
::selection{background:rgba(226,181,106,.35)}
body[data-tone="light"]{--ink:var(--forest)}

/* the sky */
#w{position:fixed;inset:0;background:var(--deep)}
#w canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#w .w-near{filter:blur(16px)}
#w.fallback{background:linear-gradient(180deg,#040c09 0%,#173a2e 42%,#f2b878 63%,#f6dcb4 100%);transition:background .6s ease}
body[data-tone="light"] #w.fallback{background:linear-gradient(180deg,#bfd2c4 0%,#e3ebdf 45%,#fbf0dc 70%,#fbf6ec 100%)}

/* the bar across the top */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:28px;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--g) 0;color:var(--ink);transition:color .6s ease,opacity .6s ease;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;padding:0}
.brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(226,181,106,.35)}
.brand small{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-left:12px;border-left:1px solid rgba(226,181,106,.4)}
/* on the iPad and the phone the mark stands alone (Ali, 28 Oct) */
@media (pointer:coarse){.brand .brand-name{display:none}}
.right{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500}
.lang{white-space:nowrap;background:none;border:0;color:inherit;font:600 13.5px var(--sans);cursor:pointer;padding:6px 4px;display:flex;gap:5px;align-items:center}
.lang b{font-weight:600;opacity:.45}.lang b.on{opacity:1}
.bars{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.bars i{width:2.5px;background:var(--gold);border-radius:2px;display:block;animation:eq 1.2s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:-.3s}.bars i:nth-child(3){animation-delay:-.6s}.bars i:nth-child(4){animation-delay:-.9s}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}
body:not([data-sound="on"]) .bars i{animation:none;height:5px}
.music-btn{background:none;border:0;color:inherit;cursor:pointer;padding:6px;display:flex;align-items:center}
.chip{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(226,181,106,.45);font-size:13px;font-weight:500;color:inherit;background:rgba(15,27,22,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}

/* buttons: the cream pill with the orange dot, and its quiet sibling */
.pill{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 26px;border-radius:999px;background:var(--cream);color:var(--forest);font:600 15px var(--sans);border:0;cursor:pointer;white-space:nowrap;box-shadow:0 20px 44px -22px rgba(0,0,0,.6);text-decoration:none}
.pill .dot{width:36px;height:36px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 6px rgba(224,108,60,.18);transition:transform .3s ease;flex:none}
.pill:hover .dot{transform:translateX(3px)}
.pill:disabled{opacity:.55;cursor:default}
.pill.small{height:44px;font-size:14px;padding:0 6px 0 20px}.pill.small .dot{width:32px;height:32px}
.pill.dark{background:var(--forest);color:var(--cream)}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;border:1px solid rgba(226,181,106,.55);color:inherit;font:600 15px var(--sans);background:rgba(15,27,22,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;text-decoration:none;white-space:nowrap}
.ghost.small{height:42px;padding:0 18px;font-size:14px}
.link{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(226,181,106,.4);background:none;border-top:0;border-left:0;border-right:0;padding:0;cursor:pointer;font:inherit}
.link:hover{border-bottom-color:var(--gold)}
button:focus-visible,a:focus-visible,.pill:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* type */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:.95;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold)}
.lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}

/* scenes fade in after the camera has started moving */
.scene{position:fixed;inset:0;z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility 0s linear .55s}
.scene.on{opacity:1;visibility:visible;pointer-events:none;transition:opacity .9s ease .45s,visibility 0s}
.scene.on>*{pointer-events:auto}
.scene .swap{transition:opacity .35s ease,transform .35s ease}
.scene.swapping .swap{opacity:0;transform:translateY(10px)}

/* the window seat's window (shared/cabin.js) */
.cabin svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the boarding pass, in cream and gold foil */
.foil{background:linear-gradient(90deg,#b8863f,#e8c47f 40%,#c99a4e 70%,#e2b56a);-webkit-background-clip:text;background-clip:text;color:transparent}
.pass{border-radius:22px;color:var(--forest);background:var(--ivory) radial-gradient(120% 90% at 100% 0%,rgba(226,181,106,.2),rgba(226,181,106,0) 60%);box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(226,181,106,.5) inset;overflow:hidden}
.pass .head{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-bottom:1px solid rgba(201,154,78,.4);font-size:11px;font-weight:700;letter-spacing:.22em;gap:10px}
.pass .head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.city{font-family:var(--serif);font-size:46px;font-weight:600;line-height:.9}
.route{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:14px;padding:18px 22px 6px}
.line{position:relative;height:30px;margin-bottom:10px;min-width:40px}
.line i{position:absolute;left:0;right:0;top:15px;border-top:1.5px dashed #c9b48c}
.line b{position:absolute;left:0;width:0;top:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,#c99a4e,#f0c27a);transition:width 1.2s ease}
.line span{position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--orange);transform:translateX(-50%);box-shadow:0 0 0 5px rgba(224,108,60,.18);transition:left 1.2s ease}
.pass .lbl{color:#8b8676}
.tear{border-top:1.5px dashed rgba(201,154,78,.55);margin:0 18px}
.barcode{display:flex;gap:2px;height:30px}.barcode i{display:block;background:var(--forest);border-radius:1px}

/* conversations: Ana AI, the check-in desk, messages */
.aihead{display:flex;align-items:center;gap:12px}
.aidot{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6a77a,#e06c3c 55%,#b9502a);box-shadow:0 0 0 5px rgba(224,108,60,.16),0 0 22px rgba(224,108,60,.45);flex:none}
.aihead b{display:block;font-size:15px}.aihead small{display:block;font-size:12px;opacity:.72;line-height:1.35}
.chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(226,181,106,.35) transparent;-webkit-overflow-scrolling:touch}
.b-ai,.b-them{align-self:flex-start;max-width:86%;background:rgba(247,243,236,.08);border:1px solid rgba(226,181,106,.22);padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.b-me{align-self:flex-end;max-width:80%;background:var(--cream);color:var(--forest);padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.b-note{align-self:center;font-size:12px;opacity:.7;padding:2px 10px;text-align:center}
.b-act{align-self:center;padding:4px 0 2px}
.b-ai>small,.b-them>small,.b-me>small{display:block;font-size:11px;font-weight:600;margin-bottom:2px;white-space:normal}
.b-ai>small,.b-them>small{color:var(--gold)}.b-me>small{opacity:.6}
.b-err{align-self:flex-start;max-width:86%;font-size:13.5px;color:var(--bad);padding:2px 4px}
.typing{display:inline-flex;gap:4px;padding:4px 0}.typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.suggest{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.suggest:empty{display:none}
.suggest button{min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid rgba(226,181,106,.55);background:rgba(226,181,106,.1);color:var(--cream);font:500 13.5px var(--sans);cursor:pointer;text-align:left}
.suggest button:hover{background:rgba(226,181,106,.2)}
.suggest button.quiet{border-color:rgba(247,243,236,.25);background:none}
.say{display:flex;gap:8px;align-items:flex-end;padding-top:10px;border-top:1px solid rgba(226,181,106,.15)}
.say input,.say textarea{flex:1;min-width:0;min-height:46px;max-height:140px;border-radius:23px;border:1px solid rgba(226,181,106,.35);background:rgba(247,243,236,.06);color:var(--cream);padding:11px 16px;font:16px/1.35 var(--sans);outline:none;resize:none}
.say input::placeholder,.say textarea::placeholder{color:rgba(247,243,236,.5)}
.say input:focus,.say textarea:focus{border-color:var(--gold)}
.say input:disabled,.say textarea:disabled{opacity:.5}
.send{width:46px;height:46px;border-radius:50%;border:0;background:var(--orange);color:#fff;cursor:pointer;flex:none;display:grid;place-items:center}
.send:disabled{opacity:.4;cursor:default}

/* loading: the orange dot breathing */
.loading{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--deep);transition:opacity .8s ease}
.loading.done{opacity:0;pointer-events:none}
.loading div{display:flex;flex-direction:column;align-items:center;gap:16px;font:500 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.loading b{width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 30px 8px rgba(224,108,60,.45);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.35)}}

/* a short note that slides up from the bottom */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateX(-50%);max-width:min(92vw,440px);padding:12px 18px;border-radius:16px;background:rgba(15,27,22,.92);border:1px solid rgba(226,181,106,.4);color:var(--cream);font-size:14px;z-index:120;box-shadow:0 18px 40px -14px rgba(0,0,0,.8);text-align:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.toast{pointer-events:none}
.toast.tap{cursor:pointer;pointer-events:auto}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(247,243,236,.2);border-top-color:var(--gold);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .scene,.scene.on,.scene .swap{transition:none!important}
  .bars i,.loading b,.typing i,.spinner{animation:none!important}
  .line b,.line span{transition:none!important}
}