/* Buddy app shell, premium pass (layout and visual polish only; behaviour lives in app.js / actions.js / voice.js).
   Full-bleed glass bars with a centred reading column, a segmented mode control that never hides a mode,
   refined welcome, bubbles and composer. Loaded after app.css and actions.css. */
:root{--col:760px;--pad:max(14px,calc((100vw - var(--col)) / 2))}
body{background:radial-gradient(60% 45% at 50% -5%,rgba(139,92,246,.42),transparent 70%),radial-gradient(40% 30% at 100% 20%,rgba(56,189,248,.12),transparent 70%),radial-gradient(140% 50% at 50% 0%,#2E2470 0%,#1A1D58 38%,#0E1338 70%,#070A22 100%) fixed #070A22}
.app{max-width:none}
.head{padding-left:var(--pad);padding-right:var(--pad);gap:10px;border-bottom:1px solid rgba(126,140,255,.16);background:rgba(10,13,44,.62);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px)}
.back{border-radius:999px;transition:background .2s,color .2s}.back:hover{background:rgba(126,140,255,.12);color:#fff}
.who b{letter-spacing:-.005em}
.chip{border-color:rgba(150,160,255,.35);background:rgba(15,20,64,.55);transition:border-color .2s,background .2s,color .2s,transform .16s}
.chip:hover{border-color:var(--lav);background:rgba(42,31,107,.6);color:#fff}
.chip:active{transform:scale(.96)}

/* Mode row: a segmented control (all four modes always visible) + tools */
.modebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px var(--pad);border-bottom:1px solid rgba(126,140,255,.08)}
.modebar .modes{flex:1 1 320px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;margin:0;border-radius:999px;border:1px solid rgba(126,140,255,.24);background:rgba(8,11,36,.6);overflow:visible}
.modes button{min-width:0;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:14px;transition:background .25s,color .25s,box-shadow .25s}
.modes button:hover{color:#fff}
.modes button[aria-pressed=true]{background:linear-gradient(180deg,#3B2FA8,#2A1F6B);color:#fff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.9),0 0 16px rgba(139,92,246,.35)}
.modebar>.chip,.modebar>.personalize{flex:none}
.personalize{min-height:44px;border-radius:999px;transition:background .2s,color .2s}
.personalize:hover{background:rgba(126,140,255,.12);color:#fff}
.status{white-space:nowrap}
@media (max-width:520px){
  .modebar .modes{flex-basis:100%}
  .modebar>.chip,.modebar>.personalize{margin-left:0}
  /* Second row on phones: the tools get their labels back (there is room once the modes have their own row). */
  .modebar .personalize span{position:static;width:auto;height:auto;overflow:visible;clip:auto;text-decoration:none}
  .modebar .personalize{padding:0 14px 0 10px;border:1px solid rgba(150,160,255,.35);background:rgba(15,20,64,.55);color:var(--ink);text-decoration:none}
}

/* Conversation column */
.thread{padding:12px var(--pad) 20px;gap:12px}
.welcome{padding:20px 0}
.halo{top:120px;width:320px;height:320px;background:radial-gradient(closest-side,rgba(56,189,248,.34),rgba(139,92,246,.22) 60%,transparent)}
.welcome h1{margin-top:10px;font-size:clamp(30px,3vw + 18px,40px);letter-spacing:-.01em}
.welcome p{max-width:380px;line-height:1.55}
.starters{max-width:420px;gap:10px;margin-top:20px}
.starters button{position:relative;min-height:52px;padding:12px 44px 12px 16px;border-radius:16px;border-color:rgba(126,140,255,.24);background:linear-gradient(180deg,rgba(30,34,96,.7),rgba(14,18,58,.82));transition:border-color .2s,transform .2s,background .2s}
.starters button::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--lav);transition:transform .25s}
.starters button:not(:disabled):hover{border-color:rgba(150,160,255,.55);transform:translateY(-1px)}
.starters button:not(:disabled):hover::after{transform:translate(3px,-50%)}
.availability{max-width:420px;padding:16px 18px;border-radius:20px;background:radial-gradient(120% 120% at 0% 0%,rgba(230,184,92,.12),transparent 60%),rgba(20,24,72,.9);box-shadow:0 18px 40px rgba(3,5,24,.4)}
.msg{max-width:min(86%,560px);padding:11px 15px;line-height:1.5;box-shadow:0 6px 18px rgba(3,5,24,.25)}
.msg.user{background:linear-gradient(180deg,#6448E0,#4330B0)}
.msg.buddy{background:linear-gradient(180deg,rgba(30,34,96,.92),rgba(20,24,72,.92));border-color:rgba(126,140,255,.28)}

/* Composer */
.composer{padding:10px var(--pad) 6px;gap:10px;border-top:1px solid rgba(126,140,255,.16);background:rgba(10,13,44,.72);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px)}
.composer textarea{min-height:48px;padding:13px 16px;border-radius:24px;border-color:rgba(150,160,255,.34);background:rgba(7,10,34,.75);transition:border-color .2s,box-shadow .2s}
.composer textarea:focus-visible{outline:0;border-color:var(--lav);box-shadow:0 0 0 4px rgba(196,181,253,.2)}
.composer button{width:48px;height:48px;box-shadow:0 8px 22px rgba(230,184,92,.3);transition:transform .16s,box-shadow .25s}
.composer button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(230,184,92,.45)}
.composer button:not(:disabled):active{transform:scale(.94)}
.note{padding-left:var(--pad);padding-right:var(--pad);background:rgba(10,13,44,.72)}
.access-gate{margin-left:var(--pad);margin-right:var(--pad)}
@media (prefers-reduced-motion:reduce){.chip,.starters button,.starters button::after,.composer button,.modes button{transition:none}.starters button:not(:disabled):hover,.composer button:not(:disabled):hover{transform:none}}
/* 44px targets: the Actions icon chip and the back arrow never shrink below 44×44 */
#actionsBtn{min-width:44px}.head .back{flex:none;width:44px}