.companion-widget { position:fixed; z-index:18; right:max(20px,calc((100vw - 450px)/2 + 20px)); bottom:calc(max(14px,env(safe-area-inset-bottom)) + 90px); transition:bottom .35s var(--motion-ease); }
.companion-widget[hidden],.companion-panel[hidden] { display:none; }
.companion-widget.is-open { z-index:25; }
.companion-backdrop { display:none; }
.companion-launcher { position:relative; display:block; width:62px; height:62px; padding:3px; border:1px solid #ffffff40; border-radius:50%; background:var(--surface); box-shadow:0 8px 28px #00000038,0 0 0 5px #ffffff08; transition:transform .25s,box-shadow .25s; }
.companion-launcher > img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.companion-launcher:hover { transform:translateY(-3px); box-shadow:0 12px 32px #00000040,0 0 0 5px #ffffff10; }
.companion-launcher:active { transform:scale(.96); }
.companion-ai-label { position:absolute; bottom:-2px; right:-2px; display:grid; place-items:center; min-width:24px; height:22px; padding:0 5px; border:2px solid var(--bg); border-radius:10px; background:var(--text); color:var(--bg); font-size:9px; font-weight:700; letter-spacing:.2px; }
.companion-unread { display:none; position:absolute; top:2px; right:2px; width:11px; height:11px; border:2px solid var(--bg); border-radius:50%; background:var(--gold); }
.has-unread .companion-unread { display:block; }
.companion-panel { position:absolute; display:flex; flex-direction:column; bottom:76px; right:0; width:min(354px,calc(100vw - 36px)); height:min(530px,calc(100dvh - 294px)); max-height:650px; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:0 24px 80px #00000050; overflow:hidden; transform-origin:calc(100% - 30px) calc(100% + 45px); animation:companion-expand .3s cubic-bezier(.16,1,.3,1) both; }
.companion-panel.is-closing { animation:companion-collapse .18s ease-in both; pointer-events:none; }
.companion-header { display:flex; align-items:center; gap:11px; flex:none; padding:16px 18px; border-bottom:1px solid var(--line); background:linear-gradient(130deg,var(--raised),var(--surface)); }
.companion-header > img,.companion-page-header > img { border-radius:50%; object-fit:cover; flex:none; }
.companion-header h2 { display:flex; align-items:center; gap:7px; font-size:16px; line-height:1.3; letter-spacing:-.3px; }
.companion-header h2 > span { font-size:8px; color:var(--gold); padding:2px 5px; border:1px solid var(--line); border-radius:5px; letter-spacing:.4px; }
.companion-header p { font-size:10px; color:var(--muted); margin-top:4px; }
.companion-minimize { display:grid; place-items:center; width:36px; height:36px; margin-left:auto; flex:none; border:0; border-radius:50%; background:var(--surface); color:var(--muted); }
.companion-minimize svg { width:16px; height:16px; }
.companion-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:20px 18px; }
.companion-welcome { text-align:center; padding:8px 10px 14px; }
.companion-welcome > img { display:block; margin:0 auto 16px; width:72px; height:72px; border-radius:50%; box-shadow:0 4px 20px #00000012; }
.companion-welcome .companion-eyebrow { color:var(--gold); font-size:8px; text-transform:uppercase; letter-spacing:1.1px; margin-bottom:8px; }
.companion-welcome h3 { font-size:23px; font-weight:600; letter-spacing:-.6px; line-height:1.3; }
.companion-welcome > p:last-child { font-size:12px; line-height:1.6; color:var(--muted); max-width:235px; margin:9px auto 0; }
.companion-prompts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 0 4px; }
.companion-prompts button { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; padding:9px 12px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:transparent; font-size:11px; transition:background .2s,transform .2s; }
.companion-prompts button span { color:var(--gold); }
.companion-prompts button:hover { background:var(--raised); transform:translateY(-1px); }
.companion-message { width:92%; margin:0 0 18px; animation:companion-message-in .25s ease-out both; }
.companion-message.is-user { margin-left:auto; }
.companion-message-author { font-size:9px; font-weight:500; color:var(--muted); margin:0 2px 7px; }
.companion-message-copy { font-size:12px; line-height:1.7; padding:12px 14px; border-radius:4px 17px 17px 17px; background:var(--raised); color:var(--text); overflow-wrap:anywhere; white-space:pre-wrap; }
.is-user .companion-message-copy { background:var(--gold-dark); border-radius:17px 4px 17px 17px; }
.is-user .companion-message-author,.is-user time { text-align:right; }
.companion-message time { display:block; color:var(--muted); font-size:8px; margin:6px 3px 0; }
.companion-destination { display:flex; justify-content:space-between; gap:18px; width:100%; margin-top:12px; padding:9px 0 0; min-height:34px; background:none; color:var(--gold); font-size:11px; font-weight:600; border:0; border-top:1px solid var(--line); text-align:left; }
.companion-compose-area { flex:none; padding:14px 14px 10px; border-top:1px solid var(--line); background:var(--surface); }
.companion-composer { display:flex; align-items:center; gap:8px; padding:5px; border:1px solid var(--line); border-radius:17px; background:var(--bg); }
.companion-input-label { display:block; flex:1; min-width:0; }
.companion-composer input { display:block; width:100%; min-height:36px; border:0; border-radius:12px; background:transparent; color:var(--text); padding:8px 10px; font-size:13px; outline-offset:-2px; }
.companion-composer input::placeholder { color:var(--muted); }
.companion-composer > button { display:grid; place-items:center; width:38px; height:38px; flex:none; border:0; border-radius:12px; background:var(--gold); color:var(--bg); transition:transform .2s,opacity .2s; }
.companion-composer > button:disabled { opacity:.45; cursor:wait; }
.companion-composer > button svg { width:18px; height:18px; }
.companion-disclosure { text-align:center; font-size:8px; color:var(--muted); margin-top:8px; line-height:1.5; }
.companion-typing { display:flex; gap:4px; align-items:center; width:max-content; padding:12px 15px; border-radius:4px 14px 14px 14px; background:var(--raised); }
.companion-typing span { width:4px; height:4px; border-radius:50%; background:var(--muted); animation:companion-typing .75s ease-in-out infinite alternate; }
.companion-typing span:nth-child(2) { animation-delay:.12s; }
.companion-typing span:nth-child(3) { animation-delay:.24s; }
.companion-page { display:flex; flex-direction:column; min-height:300px; height:calc(100dvh - 234px); border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--surface); }
.companion-page-header { display:flex; gap:12px; align-items:center; flex:none; padding:18px; border-bottom:1px solid var(--line); }
.companion-page-header h2 { display:flex; align-items:center; gap:7px; font-size:18px; line-height:1.3; letter-spacing:-.3px; }
.companion-page-header h2 > span { font-size:8px; color:var(--gold); padding:2px 5px; border:1px solid var(--line); border-radius:5px; letter-spacing:.4px; }
.companion-page-header p { margin-top:4px; color:var(--muted); font-size:10px; }
.companion-page > .companion-composer { margin:0 14px; flex:none; }
.companion-page > .companion-disclosure { padding-bottom:12px; }
.companion-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.has-game-tray .companion-widget { bottom:calc(max(14px,env(safe-area-inset-bottom)) + 164px); }
.has-game-tray .companion-panel { height:min(500px,calc(100dvh - 366px)); }
.has-game-tray .companion-page { height:calc(100dvh - 308px); }
.appearance-light .companion-launcher { border-color:#ffffffc7; box-shadow:0 8px 28px #20466330,0 0 0 5px #ffffff38; }
.appearance-light .companion-panel { background:#f7fbfe; border-color:#ffffffad; box-shadow:0 24px 70px #264d6c35; }
.appearance-light .companion-page { background:#f7fbfe; }
.appearance-light .companion-composer > button { color:#fff; }
@keyframes companion-expand { from { opacity:0; transform:translateY(12px) scale(.85); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes companion-collapse { to { opacity:0; transform:translateY(12px) scale(.85); } }
@keyframes companion-message-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes companion-typing { to { opacity:.4; transform:translateY(-3px); } }
@media(min-width:1100px) {
    .companion-page { height:calc(100dvh - 286px); }
    .has-game-tray .companion-page { height:calc(100dvh - 360px); }
    .companion-widget { right:calc(50% - 204px); bottom:150px; }
    .companion-panel { width:382px; height:min(530px,calc(100dvh - 376px)); }
    .has-game-tray .companion-widget { bottom:224px; }
    .has-game-tray .companion-panel { height:min(500px,calc(100dvh - 450px)); }
}
@media(max-width:360px) {
    .companion-widget { right:18px; }
    .companion-launcher { width:56px; height:56px; }
    .companion-panel { bottom:70px; right:-1px; border-radius:23px; }
    .companion-header { padding:13px 15px; }
    .companion-thread { padding:16px 14px; }
    .companion-welcome { padding-top:0; }
    .companion-welcome > img { width:60px; height:60px; margin-bottom:12px; }
}
@media(max-height:600px) {
    .companion-panel,.has-game-tray .companion-panel { position:fixed; inset:12px 12px auto auto; width:min(360px,calc(100vw - 24px)); height:calc(100dvh - 24px); max-height:none; }
    .companion-welcome > img { display:none; }
}
/* A roomy mobile conversation floats over a quiet, frosted page. */
@media(max-width:699px) {
    body.companion-modal-open { overflow:hidden; }
    .companion-backdrop { display:block; position:fixed; inset:0; z-index:60; background:#07111bb8; -webkit-backdrop-filter:blur(18px) saturate(.75); backdrop-filter:blur(18px) saturate(.75); animation:companion-backdrop-in .2s ease-out both; }
    .companion-backdrop[hidden] { display:none; }
    .companion-backdrop.is-closing { animation:companion-backdrop-out .18s ease-in both; }
    .appearance-light .companion-backdrop { background:#d4e5f1b8; }
    .companion-modal-open .companion-widget { z-index:61; }
    .companion-modal-open .companion-launcher { visibility:hidden; pointer-events:none; }
    .companion-panel,.has-game-tray .companion-panel { position:fixed; inset:auto 12px auto 12px; top:calc(var(--companion-viewport-top,0px) + max(20px,env(safe-area-inset-top))); width:auto; height:calc(100vh - 40px); height:calc(var(--companion-viewport-height,100dvh) - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))); max-height:none; border-radius:28px; box-shadow:0 24px 80px #0006,0 2px 12px #0003; transform-origin:bottom right; }
    .companion-panel:focus { outline:none; }
    .companion-panel .companion-header { padding:14px 16px; }
    .companion-panel .companion-minimize { width:44px; height:44px; }
    .companion-panel .companion-compose-area { padding-bottom:12px; }
    .companion-panel .companion-composer input { min-height:40px; font-size:16px; }
    .appearance-light .companion-panel { box-shadow:0 24px 80px #173a5440,0 2px 12px #173a5420; }
}
@keyframes companion-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes companion-backdrop-out { to { opacity:0; } }
@media(max-width:699px) and (prefers-reduced-transparency:reduce) {
    .companion-backdrop { background:#111a24f5; -webkit-backdrop-filter:none; backdrop-filter:none; }
    .appearance-light .companion-backdrop { background:#dceffaf5; }
}
@media(prefers-reduced-motion:reduce) {
    .companion-widget,.companion-launcher,.companion-prompts button,.companion-composer > button { transition:none; }
    .companion-panel,.companion-panel.is-closing,.companion-message,.companion-typing span { animation:none; }
    .companion-backdrop,.companion-backdrop.is-closing { animation:none; }
}