/* Additions to the handoff stylesheet (style.css) for the live site. */

/* hero: brand line + the plain searchable line in one h1 */
#headline .h1-brand{display:block}
#headline .h1-plain{display:block;font:500 clamp(17px,2.1vw,24px)/1.25 var(--sans);letter-spacing:-.01em;color:var(--text);margin-top:.55em;max-width:26ch}
.face-instruction span{color:var(--muted);margin-left:.4em}
.cast-sub{margin:.5em 0 0;color:inherit;opacity:.7}
.foot-note{color:var(--muted);font-size:13px}

/* the other six, one tap away on the first screen */
.face-more{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.mini-face{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0}
.mini-face img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid transparent;outline:1px solid var(--outline);transition:transform .2s,border-color .2s}
.mini-face:hover img,.mini-face:focus-visible img{transform:scale(1.08);border-color:var(--agent-color,var(--orange))}
.mini-face:hover,.mini-face:focus-visible{color:var(--text)}

/* portraits breathe a little, so the wall feels alive before anyone clicks */
@media (prefers-reduced-motion:no-preference){
  .hero-face img{animation:breathe 7s ease-in-out infinite}
  .hero-face:nth-child(2) img{animation-delay:-2.3s}.hero-face:nth-child(3) img{animation-delay:-4.6s}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035) translateY(-.6%)}}
}

/* talk window */
.talk-tools{display:flex;gap:6px;align-items:center}
.talk-tools .icon-btn[aria-pressed="false"]{opacity:.55}
.talk-portrait video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;opacity:0;transition:opacity .5s}
.talk-portrait.live video{opacity:1}
.live-dot{position:absolute;top:14px;left:14px;font:600 10px/1 var(--mono);letter-spacing:.12em;color:#fff;background:#d9342b;border-radius:99px;padding:5px 8px 5px 18px;opacity:0;transition:opacity .4s}
.live-dot:before{content:'';position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.talk-portrait.live .live-dot{opacity:1}
.talk-portrait.speaking{box-shadow:inset 0 0 0 3px var(--agent-color,var(--orange))}
@keyframes pulse{50%{opacity:.25}}
.message.thinking p{display:flex;gap:5px;align-items:center;min-height:1.4em}
.message.thinking i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:pulse 1s infinite}
.message.thinking i:nth-child(2){animation-delay:.2s}.message.thinking i:nth-child(3){animation-delay:.4s}
.mic-button[aria-pressed="true"]{background:#d9342b;color:#fff;border-color:#d9342b}
.starters{flex-wrap:wrap}
.talk-hire{flex-wrap:wrap}

/* checkout */
.checkout-faces{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.checkout-faces span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px}
.checkout-faces .stage-thumb{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.terms{margin:10px 0 0;padding-left:1.1em;color:var(--muted);font-size:14px;line-height:1.5}
.terms li{margin:.25em 0}
.notice{border:1px solid var(--orange);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45;margin:0}
.form-error{color:#ff9c8a;margin:0;font-size:14px}
.row-who{display:flex;gap:12px;align-items:center}
.row-who .stage-thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%}

/* setup */
.setup .setup-step{border-top:1px solid var(--outline);padding:18px 0 6px;margin-top:14px}
.setup-step h3{display:flex;align-items:center;gap:10px;font:600 17px/1.2 var(--sans);margin:0 0 12px}
.setup-step h3 span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--outline);font:600 12px/1 var(--mono);flex:none}
.setup-step.done h3 span{background:var(--mint);color:#141312;border-color:var(--mint)}
.setup-step.done h3 span .ico{width:14px;height:14px}
.studioform.inline{margin:0 0 10px}
.rowfield{display:flex;gap:8px;align-items:stretch}
.rowfield input{flex:1;min-width:0}
.rowfield .btn{white-space:nowrap;flex:none}
#test-form{margin-top:10px}
#test-form input{background:transparent;border:1px solid var(--outline);border-radius:10px;padding:11px 12px;color:inherit;font:inherit}
.dropzone{display:flex;flex-direction:column;gap:4px;border:1.5px dashed var(--outline);border-radius:14px;padding:16px;text-align:center;cursor:pointer;margin:0 0 12px;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.over{border-color:var(--orange);background:#ffffff08}
.dropzone span{color:var(--muted);font-size:13px}
.soon{display:flex;flex-direction:column;gap:2px;border:1px solid var(--outline);border-radius:12px;padding:11px 14px;opacity:.6;margin:10px 0;font-size:14px}
.soon span{color:var(--muted);font-size:13px}
.sources{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.sources li{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--outline);border-radius:10px;padding:9px 12px;font-size:14px}
.sources li span{display:flex;flex-direction:column;min-width:0}
.sources li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sources small{color:var(--muted)}
.sources li.ready small{color:var(--mint)}
.sources li.failed small{color:#ff9c8a}
.test-log{display:grid;gap:10px}
.test-log .message{max-width:100%}
.grounding{margin-top:6px;font-size:13px;color:var(--muted)}
.grounding summary{cursor:pointer;color:var(--mint)}
.grounding p{margin:.5em 0;white-space:pre-wrap}
.code{background:#0c0c0b;border:1px solid var(--outline);border-radius:10px;padding:12px;font:13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;margin:10px 0 6px;color:#f3f0e6}
.code.brief{word-break:normal;max-height:240px;overflow:auto}
.selectline{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;font-size:14px}
.selectline select{background:transparent;border:1px solid var(--outline);border-radius:10px;padding:10px;color:inherit;font:inherit}
.selectline option{color:#111}
.small{font-size:13px}
.install-state{border:1px solid var(--outline);border-radius:12px;padding:12px 14px}
.install-state p{margin:.35em 0 0;color:var(--muted);font-size:14px}
.install-state.live{border-color:var(--mint)}.install-state.live b{color:var(--mint)}
.install-state.domain_mismatch{border-color:#ff9c8a}
.install-state .btn{margin-top:10px}
.setup-options{margin-top:18px}

@media (max-width:640px){
  #headline .h1-plain{max-width:none}
  .mini-face img{width:46px;height:46px}
  .face-more{gap:8px}
  .rowfield{flex-wrap:wrap}.rowfield .btn{flex:1}
}

/* phones: the agent's face (live when connected) sits on top of the conversation */
@media (max-width:700px){
  .talk-shell{grid-template-columns:1fr!important}
  .talk-portrait{display:block!important;height:30dvh;min-height:170px}
  .talk-portrait>div{bottom:12px;left:14px}
  .talk-portrait strong{font-size:34px}
  .talk-head{padding-left:0!important;min-height:0!important}
  .talk-head:before{display:none!important}
  .talk-head h2{font-size:22px}
  .conversation-dialog .chat-history{min-height:120px;max-height:32dvh}
}

/* The brand line is always two lines beside the faces: "Give your site" / "a soul."
   It is sized from its own column, not the screen, so it fits at every width and with
   whatever fonts the visitor has. (Sized from the screen it overflowed by about a pixel
   on wide monitors and by more on tablets, which pushed "site" onto a line of its own.) */
@media (min-width:701px){
  .opening{container-type:inline-size}
  .opening h1{font-size:clamp(40px,16.5cqw,109px)}
  #headline .h1-brand{white-space:nowrap}
}