/* Z6 CHATUI1 (az.com chat screens /quick /c /best /spin /bots /create): chat-app layout, Stop + Regenerate, no load jumps. Only with body.z6 (CHATUI1=on). */
/* the display font never swaps in late (that reflowed the hero by 0.03-0.11 on phones); preloaded in the page head, so it is normally there for the first paint */
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantGaramond.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:optional}
body.z6 .hero-home .h-display{width:auto}   /* was fit-content: its width followed the font, so the late font moved the whole hero */
/* --- 1. a calm chat column (single answers read like a chat, multi-engine cards keep their grid) --- */
body.z6.chatting .app{min-height:calc(100dvh - 64px);display:flex;flex-direction:column}
body.z6.chatting .thread{width:100%;max-width:820px;margin:0 auto;padding-left:16px;padding-right:16px}
body.z6.chatting .thread:has(.cards.n2,.cards.n3,.cards.n4,.cards.n5,.cards.many){max-width:1160px}
body.z6.chatting .composer .wrap{max-width:820px}
body.z6.chatting bro-net,body.z6.z6-chatted bro-net,body.z6.chatting bro-net-strip,body.z6.z6-chatted bro-net-strip{display:none!important}   /* the network strip waits below the chat (it is back on New chat) */
body.z6 .turn>.q{background:var(--panel2,#16213a);border-radius:20px 20px 6px 20px;padding:10px 16px;max-width:min(640px,86%)}
body.z6 .cards.n1>.card.ans{background:transparent;border:0;box-shadow:none;padding:4px 0 0}
body.z6 .cards.n1>.card.ans>.ch{border-bottom:0;padding-bottom:4px;margin-bottom:2px;font-size:.86rem;opacity:.9}
body.z6 .cards.n1>.card.ans>.cf{border-top:0;padding-top:4px;margin-top:4px}
body.z6 .cards.n1>.card.ans .md{font-size:1rem;line-height:1.65}
body.z6 .turn .md pre,body.z6 .turn .md table{max-width:100%;overflow-x:auto}
body.z6 .turn .md img{max-width:100%;height:auto}
body.z6 .turn [data-pane=answers]:not([hidden]){display:flex;flex-direction:column}
body.z6 .turn [data-pane=answers]>.why{order:-1;margin:0 0 8px}   /* the engine note sits above the answer: nothing under a streaming answer moves */
/* --- 2. answer actions: Copy / Regenerate / Share in one quiet row --- */
body.z6 .z6-act{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:2px 0 0}
body.z6 .z6-act .cp-btn{min-height:36px}
body.z6 .z6-act .cp-btn svg{width:16px;height:16px}
/* --- 3. Stop: the send button turns into Stop while an answer streams (same size, no jump) --- */
body.z6 .comp-row [data-stop],body.z6 .ha-row [data-stop]{display:none}
body.z6.z6-busy .comp-row [data-send],body.z6.z6-busy .ha-row [data-hero-send]{display:none}
body.z6.z6-busy .comp-row [data-stop]{display:flex}
body.z6.z6-busy:not(.chatting) .ha-row [data-stop]{display:inline-flex}
body.z6 [data-stop]{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2,rgba(255,255,255,.2));background:var(--white,#fff);color:#0b1222;cursor:pointer;align-items:center;justify-content:center}
body.z6 .ha-row [data-stop]{width:auto;padding:0 18px;border-radius:999px;gap:8px;font-weight:600}
body.z6 [data-stop] i{display:block;width:12px;height:12px;border-radius:2px;background:currentColor}
body.z6 [data-stop]:focus-visible{outline:2px solid var(--gold,#e8c36a);outline-offset:2px}
/* --- 4. no load jumps: space kept for parts that fill in after load --- */
body.z6 .hero-ask{position:relative}
body.z6 .hero-ask .lang-hint:not([hidden]){position:absolute;left:0;right:0;margin:6px auto 0;width:max-content;max-width:calc(100% - 16px);z-index:6;background:rgba(6,14,32,.94);border:1px solid var(--line2,rgba(255,255,255,.14));border-radius:14px;padding:0 10px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
body.z6:not(.z6-me) .hero-ask .ask-choice[hidden]{display:flex;visibility:hidden;min-height:56px}
body.z6 .hero-ask .ha-meta{min-height:31px}
body.z6 .best-pick:not([hidden]) .best-list{min-height:52px}
body.z6 .cmp-list{min-height:268px}
body.z6 .hero-ask .jobpills:not([hidden]){min-height:76px}
body.z6 [data-mode-start=best] .ha-smartline .ha-auto{flex:1 1 100%;justify-content:center}   /* Best: the engine line is its own row from the start (it shortened and pulled the row up when Best filled in) */
body.z6 .create-host:empty{min-height:511px}
@media (min-width:641px) and (max-width:1023px){body.z6 .cmp-list{min-height:300px}body.z6 .best-pick:not([hidden]) .best-list{min-height:112px}}
@media (max-width:640px){
  body.z6 .hero-home h1.h-display{min-height:2.95em}   /* 3 lines in the display font: the fallback font's 2 lines no longer jump when the real font lands */
  body.z6 .best-pick:not([hidden]) .best-list{min-height:172px}
  body.z6 .cmp-list{min-height:480px}
  body.z6 .create-host:empty{min-height:552px}
  body.z6 .hero-ask .ha-meta{min-height:34px}
  body.z6 [data-mode-start=quick] .hero-ask .ha-meta{min-height:87px}
  body.z6 [data-mode-start=best] .hero-ask .ha-meta{min-height:109px}
  body.z6 .hero-ask .jobpills:not([hidden]){min-height:137px}
  body.z6 .turn>.q{max-width:92%}
  body.z6.chatting .thread{padding-left:12px;padding-right:12px}
}
/* the network bug tab (az.ai bugtap.js) tries several spots while the page draws; on chat screens it has one fixed spot (no jumps) */
body.z6.is-app #azbn-btn{top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;left:12px!important;right:auto!important;visibility:visible!important;transition:none!important}
@media (max-width:560px){body.z6.is-app #azbn-btn{top:62%!important;bottom:auto!important;left:0!important}}
body.z6.is-app.chatting #azbn-btn{opacity:.7}
@media (prefers-reduced-motion:reduce){body.z6 .turn{scroll-behavior:auto}}