/* Demo "chat" for /hanh-trinh/ (dark only): the situation panel is a conversation on the ship's comms channel, and the planet sits inside one even orbit ring.
   Loaded after the live journey.css; every rule is scoped to [data-demo=chat] and, for the panel, to the side/sheet layouts (phones keep their own sheet). */
@keyframes chat-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes chat-led{50%{opacity:.45}}
@keyframes chat-dot{30%{transform:translateY(-4px);opacity:1}60%,100%{transform:none;opacity:.45}}

.jr-cabin[data-demo=chat][data-layout=phone] :is(.jr-say,.jr-typing){display:none}
.jr-cabin[data-demo=chat].is-live{
  /* ---------- the planet: one orbit ring, bigger chips, no reticle brackets ---------- */
  .jr-lock i{display:none}
  .jr-ring{position:absolute;left:0;top:0;width:calc(var(--orx,0px)*2);height:calc(var(--ory,0px)*2);border:1.5px dashed #e8f4ffb8;border-radius:50%;opacity:var(--ro,0);pointer-events:none;transform:translate(calc(var(--ocx,0px) - var(--orx,0px)),calc(var(--ocy,0px) - var(--ory,0px))) rotate(var(--otilt,0rad));transition:opacity .4s}
  .jr-ring.is-back{opacity:calc(var(--ro,0)*.4);clip-path:inset(0 0 50% 0);-webkit-mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--orad,0px) - 2px),#000 calc(var(--orad,0px) + 2px));mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--orad,0px) - 2px),#000 calc(var(--orad,0px) + 2px))}
  .jr-ring.is-front{clip-path:inset(50% 0 0 0);filter:drop-shadow(0 1px 3px #000a) drop-shadow(0 0 8px color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000))}
}
.jr-cabin[data-demo=chat].is-live:not([data-layout=phone]){
  .jr-moon{gap:8px;padding:7px 15px 7px 11px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);background:#060f1cec;font-size:13px;font-weight:550;box-shadow:0 10px 24px -10px #000d}
  .jr-moon::before{width:8px;height:8px}
}

.jr-cabin[data-demo=chat].is-live:not([data-layout=phone]){
  --ind:38px;
  --ft:80px;
  --ai-bg:#0b1829;
  --ai-edge:#ffffff17;
  --me-bg:linear-gradient(160deg,color-mix(in srgb,var(--planet,var(--accent)) 38%,#0a1528),color-mix(in srgb,var(--planet,var(--accent)) 20%,#0a1528));
  --me-edge:color-mix(in srgb,var(--planet,var(--accent)) 58%,#0000);

  [hidden]{display:none!important}

  /* ---------- the console: an instrument panel with rivets, a comms header and a status light ---------- */
  .jr-console{border-radius:20px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 32%,#ffffff12);background:linear-gradient(180deg,color-mix(in srgb,var(--planet,var(--accent)) 10%,#0000),#0000 20%),linear-gradient(180deg,#081321f6,#040a14f8);box-shadow:0 34px 80px -20px #000e,0 0 0 1px #0007,inset 0 0 0 1px #ffffff0a,inset 0 1px 0 #ffffff1c,0 0 70px -24px color-mix(in srgb,var(--planet,var(--accent)) 50%,#0000)}
  .jr-console::before{-webkit-mask-image:linear-gradient(#000,#0000 28%);mask-image:linear-gradient(#000,#0000 28%)}
  .jr-corner{width:7px;height:7px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4d4ea,#566b88 60%,#26364d);box-shadow:0 0 0 1px #0008;opacity:.9}
  .jr-corner.is-tl{left:8px;top:8px}
  .jr-corner.is-tr{left:auto;right:8px;top:8px}
  .jr-corner.is-bl{left:8px;top:auto;bottom:8px}
  .jr-corner.is-br{left:auto;right:8px;top:auto;bottom:8px}
  .jr-bar{height:70px;gap:14px;padding:0 22px 0 20px}
  .jr-bar::before{content:'';position:absolute;z-index:2;left:52px;top:46px;width:11px;height:11px;border:2px solid #0a1626;border-radius:50%;background:#3ddc97;box-shadow:0 0 9px #3ddc97;animation:chat-led 2.4s ease-in-out infinite}
  .jr-bar-badge{width:46px;height:46px;border:1.5px solid color-mix(in srgb,var(--planet,var(--accent)) 70%,#0000);background:radial-gradient(circle,#0b1a2e 52%,color-mix(in srgb,var(--planet,var(--accent)) 26%,#0000))}
  .jr-bar-badge .ico{display:none}
  .jr-bar-badge::after{content:'';position:absolute;inset:8px;background:url(/onmate-favicon.svg) center/contain no-repeat}
  .jr-bar-txt b{font-size:15px}
  [data-panel=open] .jr-head::after{left:20px;right:20px}

  /* ---------- the thread ---------- */
  .jr-back{padding:8px 16px 0}
  .jr-stage article{padding:4px 16px 0;gap:8px}
  .jr-stage-num{display:flex;flex-wrap:nowrap;order:1;align-self:flex-end;align-items:center;gap:7px;margin:8px 2px 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--text-4);animation:chat-in .45s var(--ease) .05s both}
  .jr-stage-num .jr-badge{display:none}
  .jr-stage-k{flex-direction:row;gap:0;font-size:10.5px}
  .jr-stage-k span{margin-left:.5em}
  .jr-stage-k b{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--text-2)}
  .jr-stage-num em{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.14em;color:var(--planet,var(--accent))}
  .jr-stage-num em::before{content:'·';margin-right:7px;color:var(--text-4)}
  .jr-stage h2{order:2;align-self:flex-end;max-width:92%;margin:0;padding:12px 17px 13px;border:1px solid var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-size:16px;font-weight:650;line-height:1.42;letter-spacing:-.005em;color:#fff;box-shadow:0 12px 28px -14px color-mix(in srgb,var(--planet,var(--accent)) 80%,#0000);transform-origin:100% 100%;animation:chat-in .5s var(--ease) .12s both}

  /* ONMATE's side: an avatar on the first bubble of each turn, everything indented under it */
  .jr-lede,.jr-rel .jr-svcs,.jr-ask[open]>p:first-of-type,.jr-typing{position:relative}
  .jr-lede::before,.jr-rel .jr-svcs::before,.jr-ask[open]>p:first-of-type::before,.jr-typing::before{content:'';position:absolute;left:calc(var(--ind)*-1);top:0;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000);border-radius:50%;background:#0a1626 url(/onmate-favicon.svg) center/18px no-repeat}
  .jr-lede{order:3;max-width:calc(100% - var(--ind));margin:6px 0 0 var(--ind);padding:11px 15px 12px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);font-size:14px;line-height:1.62;color:var(--text-2);transform-origin:0 100%;animation:chat-in .5s var(--ease) .6s both}

  .jr-part{display:none;margin:0}
  .jr-part:not(.is-said){display:none}
  .jr-part.is-said{display:grid;gap:7px;justify-items:start;animation:chat-in .45s var(--ease) both;transform-origin:0 0}
  .jr-look{order:5}
  .jr-look.is-said{animation-delay:1.1s}
  .jr-also.is-said{animation-delay:.2s}
  .jr-part>:not(h3,.jr-ask){justify-self:stretch;margin-left:var(--ind)}
  .jr-look>h3,.jr-also>h3{position:static;width:auto;height:auto;margin:4px 0 0 var(--ind);overflow:visible;clip-path:none;white-space:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}
  .jr-part .jr-pn{display:none}

  .jr-checks{padding:5px 15px;border:1px solid var(--ai-edge);border-radius:17px;background:var(--ai-bg)}
  .jr-prep{margin-top:0;padding:11px 15px 12px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 38%,#0000);border-radius:17px;background:color-mix(in srgb,var(--planet,var(--accent)) 10%,#0a1424);font-size:13.5px;line-height:1.6}
  .jr-promise{margin-top:0;padding:0 6px;font-size:12.5px;line-height:1.6;color:var(--muted)}

  /* the services: chips inside one bubble, then the way to the whole group */
  .jr-svcs{display:flex;flex-wrap:wrap;gap:7px;padding:11px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg)}
  .jr-svcs li,.jr-svcs li:first-child{border:0}
  .jr-svcs a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 48%,#0000);border-radius:99px;background:color-mix(in srgb,var(--planet,var(--accent)) 10%,#0000);font-size:13px;font-weight:550;transition:background .2s,color .2s,border-color .2s}
  .jr-svcs a::after{content:'↗';margin-left:0;font-size:12px;color:var(--planet,var(--accent));opacity:.85}
  .jr-svcs a:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 22%,#0000);color:var(--text)}
  .jr-svcs a:hover::after{transform:none}
  .jr-all{min-height:44px;margin-top:0;padding:0 16px;border-color:var(--ai-edge);border-radius:99px;background:none;font-size:13.5px}

  /* the questions: quick replies on your side; the one you pick turns into your message and ONMATE answers under it */
  .jr-qa{justify-items:stretch}
  .jr-qa>.jr-ask{justify-self:stretch;margin:0}
  .jr-ask,.jr-ask:last-of-type,.jr-ask[open]{margin:0 0 4px;border:0;background:none}
  .jr-ask summary{width:fit-content;max-width:92%;min-height:0;margin-left:auto;padding:9px 15px 10px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 50%,#0000);border-radius:19px;background:color-mix(in srgb,var(--planet,var(--accent)) 8%,#0000);font-size:13.5px;font-weight:550;line-height:1.4;transition:background .2s,border-color .2s}
  .jr-ask summary::after{display:none}
  .jr-ask summary:hover{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#0000)}
  .jr-ask[open]>summary{border-color:var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-weight:650;color:#fff;animation:chat-in .35s var(--ease) both;transform-origin:100% 100%}
  .jr-ask>p{margin:8px 0 0 var(--ind);padding:0;font-size:13.5px;line-height:1.62}
  .jr-ask>p:not(.jr-ask-links){max-width:calc(100% - var(--ind));padding:11px 15px 12px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);animation:chat-in .4s var(--ease) both;transform-origin:0 0}
  .jr-ask>.jr-ask-links{margin-top:6px;padding:0}
  .jr-also{margin-top:2px}
  .jr-also-chip{min-height:36px;padding:4px 14px 4px 5px;border-color:var(--ai-edge);background:var(--ai-bg)}

  /* ONMATE types, then answers */
  .jr-say{align-self:flex-end;max-width:92%;margin:8px 0 0;padding:9px 16px 10px;border:1px solid var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-size:14px;font-weight:650;line-height:1.4;color:#fff;scroll-margin-top:12px;transform-origin:100% 100%;animation:chat-in .35s var(--ease) both}
  .jr-typing{align-self:flex-start;display:flex;gap:5px;margin:0 0 0 var(--ind);padding:14px 16px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);animation:chat-in .3s var(--ease) both}
  .jr-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-2);opacity:.45;animation:chat-dot 1s ease-in-out infinite}
  .jr-typing i:nth-child(2){animation-delay:.15s}
  .jr-typing i:nth-child(3){animation-delay:.3s}

  /* quick replies (the old tabs) ride above the composer; the one you use leaves the row */
  .jr-tabs{order:900;position:sticky;top:auto;bottom:var(--ft);z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin:auto -16px 0;padding:26px 16px 9px;background:linear-gradient(180deg,#0000,#050c18 26px)}
  .jr-tabs::before{display:none}
  .jr-tab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px 0 16px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 58%,#0000);border-radius:99px;background:#07111f;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--text);transition:background .2s,border-color .2s,transform .2s}
  .jr-tab::after{content:'›';font-size:16px;line-height:1;color:var(--planet,var(--accent))}
  .jr-tab:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#07111f)}
  .jr-tab[aria-selected=true]{background:#07111f;box-shadow:none;color:var(--text)}
  .jr-tab:hover[aria-selected=true]{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#07111f)}
  .jr-tab.is-used,.jr-tab[data-tab=look],.jr-tabs.is-done{display:none}

  /* the composer: the one way to write to ONMATE */
  .jr-ft{order:1000;margin:0 -16px;padding:12px 16px 14px;border-top:1px solid var(--ai-edge);background:#050c18}
  .jr-tabs.is-done~.jr-ft{margin-top:auto}
  .jr-ft .jr-cta{min-height:52px;padding:0 8px 0 22px;border-radius:99px}
  .jr-ft .jr-cta span{width:36px;height:36px;border-radius:50%}
}

@media (prefers-reduced-motion:reduce){
  .jr-cabin[data-demo=chat] :is(.jr-stage-num,.jr-stage h2,.jr-lede,.jr-part,.jr-ask summary,.jr-ask>p,.jr-say,.jr-typing,.jr-typing i,.jr-bar::before){animation:none!important}
}

/* ---------- a wider panel, and a clear gap between its foot and the window sill ---------- */
@media (min-width:1000px) and (min-height:520px){
  .jr-cabin[data-demo=chat].is-live:not([data-layout=phone]){
    --jr-ph:max(200px,calc(var(--jr-wh) - 98px - 24px));
    .jr-console{width:min(calc(100% - 2*var(--jr-m) - 28px),clamp(440px,35vw,510px))}
  }
}

/* ---------- a click on a chip around the planet opens the basic explanation of that service ---------- */
.jr-cabin[data-demo=chat].is-live:not([data-layout=phone]){
  .jr-moon{cursor:pointer}
  .jr-moons:has(.is-pick) .jr-moon:not(.is-pick){opacity:calc(var(--mo,0)*.45)}
  .jr-moon.is-pick{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 26%,#060f1c);box-shadow:0 0 0 3px color-mix(in srgb,var(--planet,var(--accent)) 28%,#0000),0 10px 24px -10px #000d}
  .jr-moon-card{position:absolute;left:0;top:0;z-index:6;box-sizing:border-box;width:var(--cw,300px);padding:15px 46px 16px 17px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--planet,var(--accent)) 14%,#0000),#0000 55%),#071322f7;box-shadow:0 24px 54px -18px #000f,0 0 44px -16px color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000);translate:var(--cx,0px) var(--cy,0px);pointer-events:auto;animation:chat-in .28s var(--ease) both}
  .jr-moon-card b{display:block;font-size:15px;font-weight:650;line-height:1.3;color:var(--text)}
  .jr-moon-card p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
  .jr-moon-go{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin-top:12px;padding:0 15px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);border-radius:99px;background:color-mix(in srgb,var(--planet,var(--accent)) 16%,#07111f);font-size:13px;font-weight:600;color:var(--text);text-decoration:none;transition:background .2s,border-color .2s}
  .jr-moon-go:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 30%,#07111f)}
  .jr-moon-x{position:absolute;right:10px;top:10px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#ffffff12;font-size:18px;line-height:1;color:var(--text-2);cursor:pointer}
  .jr-moon-x:hover{background:#ffffff26;color:var(--text)}
}
@media (prefers-reduced-motion:reduce){
  .jr-moon-card{animation:none!important}
}

/* tablet: the sheet also stands clear of the window sill */
@media (min-width:600px) and (max-width:999px) and (min-height:520px){
  .jr-cabin[data-demo=chat].is-live:not([data-layout=phone]) .jr-console{bottom:calc(var(--jr-desk) + 26px)}
}