/* Round 19 — hero proportions, desk bubble stacking, tablet/phone breakpoints.
   Loaded after hero-desk.css and hero-desk-r15.css, so equal-specificity rules win here. */

/* ── 一、desktop hero: wider card, calmer scrim, text kept off the art ───────── */
.hero-desk > .container{width:min(1240px,92%)}
.hero-card{max-width:1240px;margin-inline:auto;height:clamp(480px,34vw,600px)}
.hero-card > .hd-head{
  max-width:640px;
  padding:56px 0 56px 72px;
  justify-content:center;
  overflow:visible;
}
.hero-bg{
  left:auto;right:0;width:50%;
  object-position:62% 50%;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 14%,#000 32%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 14%,#000 32%);
}
.hero-scrim{
  background:linear-gradient(90deg,
    rgba(6,13,31,.88) 0%,
    rgba(8,16,36,.72) 30%,
    rgba(8,16,36,.38) 55%,
    rgba(6,13,31,.14) 78%,
    rgba(6,13,31,.06) 100%);
}

/* ── 二、conversation bubbles: grid stack, no overlap, no jitter ────────────── */
.desk-stand .chat{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:auto;
  max-height:none;
  min-width:0;
}
.desk-stand .chat > .bubble{flex:0 0 auto}
.desk-stand .bubble{max-width:78%}

/* the typing line reserves its own height with a hidden ghost in the same grid cell */
.type,
.ai-t{display:grid;margin:0;min-width:0}
.type > span,
.ai-t > span{grid-area:1 / 1}
.type .ghost,
.ai-t .ghost{visibility:hidden}
.type .live,
.ai-t .live{position:static;inset:auto;min-width:0;white-space:pre-wrap}
.type .cursor{grid-area:1 / 1;justify-self:start;align-self:end}

/* ── 四、tablet: studio drops to one column, decision card moves under ──────── */
@media (max-width:1100px){
  .desk-stand .desk{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    align-items:stretch;
  }
  .desk-stand .out{
    margin-top:16px;
    width:100%;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
    padding-top:16px;
  }
  .desk-stand .dcard dl > div{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:baseline;
  }
  .desk-stand .dcard dt,
  .desk-stand .dcard dd{white-space:normal}
  .desk-stand .dcard dd{text-align:right}
}

/* ── 二/四、phone: single column, full-width bubbles, tighter card text ─────── */
@media (max-width:767.98px){
  .desk-stand .chat{padding:16px 14px;gap:12px}
  .desk-stand .bubble,
  .desk-stand .bubble--them,
  .desk-stand .bubble--us{
    max-width:92%;
    align-self:flex-start;
    width:auto;
  }
  .desk-stand .bubble--them{align-self:flex-start}
  .desk-stand .dcard dt,
  .desk-stand .dcard dd{font-size:12.5px;line-height:1.4}
  .desk-stand .dcard dl{gap:6px}

  /* 三、header on phones: globe + Apply + burger */
  .hero-desk > .container{width:min(1240px,92%)}
  .hero-card{height:auto}
  .hero-card > .hd-head{padding:32px 24px;max-width:none}
  .hero-bg{left:0;right:0;width:100%;object-position:56% 50%;
    -webkit-mask-image:none;mask-image:none}
}

/* ── 三、mobile language entry: a bare globe that opens the bottom sheet ────── */
@media (max-width:767.98px){
  .header-actions{gap:8px}
  .header-actions > .lang.lang-wrap{display:inline-flex !important;flex:0 0 auto}
  .lang-btn{width:32px;height:32px;padding:0;background:transparent;border:0;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;color:#16235C}
  .lang-btn:hover{background:rgba(22,35,92,.06)}
  .lang-btn .flag,
  .lang-btn .lang-code,
  .lang-btn .caret,
  .lang-btn .lang-mini{display:none}
  .lang-btn .globe{width:20px;height:20px;color:#16235C}
  .header-actions > .header-apply{flex:0 0 68px !important;width:68px !important}
}