/* Round 20 — platform band, self-sizing desk, tighter stages, anchored language panel.
   Loaded last, so it wins against hero-desk.css / hero-desk-r15.css / hero-desk-r19.css. */

/* ── 一、one continuous dark platform: hero + desk, no white seam ───────────── */
.platform{
  background:linear-gradient(180deg,#0B1B3A 0%,#081226 55%,#060D1F 100%);
  padding-block:0 96px;
  position:relative;
}
.platform > .container{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  padding-top:56px;
}
.platform .hero-card{width:100%}
.platform .hero-card{margin-top:0}
.platform .hero-desk{display:none}      /* legacy wrapper, no longer emitted */
.platform .desk-band{display:none}

/* ── 二、desk panel: height follows content, decision card matches the chat ─── */
.desk-panel{
  height:auto;
  min-height:0;
  max-height:none;
  padding:28px 32px 27px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
}
.desk-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  align-items:stretch;
  height:auto;
}
.desk-panel .chat{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:auto;
  max-height:none;
  padding:0;
  justify-content:flex-start;
}
.desk-panel .chat > .bubble{flex:0 0 auto}
/* the assistant bubbles sit on a dark plate: keep the type white, not inherited slate */
.desk-panel .bubble--us,
.desk-panel .bubble--us p,
.desk-panel .bubble--us .live,
.desk-panel .bubble--us .ghost{color:#fff}
.desk-panel .bubble--them,
.desk-panel .bubble--them p{color:#0e1116}

.desk-panel .decision{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:0;
  border:0;
  margin:0;
  height:auto;
  min-height:0;
}
.desk-panel .decision .desk-label{margin:0 0 10px}
.desk-panel .decision .dcard{padding:16px 18px;flex:0 0 auto}
.desk-panel .decision .dcard dl{
  display:grid;
  gap:10px;
  margin:0;
}
.desk-panel .decision .dcard dl > div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:baseline;
  padding:0;
}
.desk-panel .decision .dcard dd{text-align:right;white-space:normal}
.desk-panel .decision .out-foot{margin:12px 0 0}

/* ── 三、three stages: top-aligned, tighter, shorter ────────────────────────── */
.section--stages{padding-block:72px}
.section--stages .sec-head{margin:0 0 12px;display:block}
.section--stages .sec-head .kicker{display:block;margin-bottom:4px;line-height:1}
.section--stages .sec-head h2{margin:0;line-height:1.08}
.section--stages .sec-head p{margin:6px 0 0;line-height:1.4;font-size:14px;max-width:62ch}
.stage-grid{
  align-items:start;
  gap:20px;
  margin-top:12px;
  grid-template-columns:1fr;
}
.stage-col{gap:12px;padding-bottom:0;align-self:start}
.stage-mid{
  align-self:start;
  border-radius:18px;
  height:min(480px,38vw);
  display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 100%);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 100%);
}
.stage-mid img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
}
@media (min-width:1024px){
  .stage-grid{grid-template-columns:1fr 1.05fr 1fr}
}

/* ── 四、language: anchored panel at every width, no sheet ──────────────────── */
.lang.lang-wrap{position:relative;display:inline-flex}
.lang-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:238px;
  max-height:60vh;
  overflow-y:auto;
  z-index:70;
}
.lang-btn{
  display:inline-flex;
  align-items:center;
  width:auto;
  gap:6px;
  height:30px;
  padding:0 8px;
  background:transparent;
  border:0;
  border-radius:8px;
  color:#16235C;
  cursor:pointer;
}
.lang-btn:hover{background:rgba(22,35,92,.06)}
.lang-btn .globe{display:none}
.lang-btn .flag{width:18px;height:12px;flex:0 0 18px;border-radius:2px;overflow:hidden}
.lang-btn .lang-code{font:600 13px/1 var(--font);letter-spacing:.02em}
.lang-btn .caret{font-size:9px;line-height:1;opacity:.6}

@media (max-width:767.98px){
  .platform{padding-block:0 64px}
  .platform > .container{gap:16px;padding-top:36px}
  .desk-panel{padding:20px 16px;border-radius:18px}
  .desk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .desk-panel .decision{justify-content:flex-start}
  .desk-panel .decision .dcard dl{gap:8px}
  .desk-panel .decision .dcard dt,
  .desk-panel .decision .dcard dd{font-size:12.5px;line-height:1.4}

  /* language panel under the button, right edge aligned, never the full screen */
  .lang-panel{
    width:min(280px,calc(100vw - 32px));
    max-height:60vh;
    right:0;
  }
  .lang-btn .flag{display:inline-block}
  .lang-btn .lang-code{display:inline-block}
  .lang-btn .caret{display:inline-block}
  .lang-btn{width:auto;height:32px;padding:0 6px;gap:5px;max-width:64px;flex:0 0 auto}
  .lang-btn .lang-code{font-size:13px}
}