.assistant-button { --assistant-button-fill:var(--studio-button-color,var(--studio-base-color,var(--pad-panel,#e4dccb))); --assistant-button-ink:var(--studio-button-ink,var(--studio-base-ink,var(--pad-ink,#344235))); display: grid; place-items: center; width: 50px; min-width: 44px; height: 44px; padding: 0; border-radius: 14px; border: 1px solid color-mix(in srgb,var(--assistant-button-fill),#000 20%); background: linear-gradient(color-mix(in srgb,var(--assistant-button-fill),#fff 10%),var(--assistant-button-fill)); color: var(--assistant-button-ink); font-family: var(--pad-font,"Space Grotesk",sans-serif); font-weight: 700; font-size: 13px; letter-spacing: .4px; box-shadow: inset 0 1px #ffffff38,0 3px 0 color-mix(in srgb,var(--assistant-button-fill),#000 24%),0 5px 9px #00000018; touch-action: none; }
.assistant-button.is-pressed { background: color-mix(in srgb,var(--assistant-button-fill),#000 8%); box-shadow: inset 0 2px 4px #00000024,0 1px 0 color-mix(in srgb,var(--assistant-button-fill),#000 24%); }
.game-assistant { --ai-bg:#f5f1e8; --ai-ink:#344235; --ai-muted:#7b8775; --ai-line:#d7dece; --ai-accent:#b97053; position: fixed; inset: var(--assistant-top,0px) 0 auto; margin:0; padding:0; width:100%; max-width:none; height:var(--assistant-height,100dvh); max-height:none; border:0; border-radius:0; background:var(--ai-bg); color:var(--ai-ink); box-shadow:none; overflow:hidden; }
.game-assistant::backdrop { background:#f5f1e8; backdrop-filter:none; }
.game-assistant *, .assistant-lightbox * { box-sizing:border-box; }
.game-assistant button { font:inherit; cursor:pointer; -webkit-user-select:none; user-select:none; }
.game-assistant button:disabled { opacity:.42; cursor:default; }
.assistant-frame { display:flex; flex-direction:column; width:100%; height:100%; max-width:1040px; margin:0 auto; min-height:0; }
.assistant-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(17px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left)); border-bottom:1px solid var(--ai-line); }
.assistant-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.assistant-brand>span { display:grid; place-items:center; flex:none; width:40px; height:43px; border:1px solid #c4cdb5; border-radius:13px 13px 18px 13px; background:#e2e8d7; color:#87996d; font-size:27px; box-shadow:0 3px 0 #c2cdb3; }
.assistant-brand h2 { font-family:"Space Grotesk",sans-serif; font-size:20px; line-height:1.2; letter-spacing:-.8px; margin:0; font-weight:600; }
.assistant-brand h2 b { color:var(--ai-accent); font-size:14px; letter-spacing:0; margin-left:3px; font-weight:500; }
.assistant-brand p { margin:5px 0 0; color:var(--ai-muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }
.assistant-header-actions { display:flex; align-items:center; gap:14px; }
.assistant-header-actions>button { background:none; border:0; color:var(--ai-muted); font-size:10px; white-space:nowrap; }
.assistant-header-actions .assistant-close { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid #d1d8c9; border-radius:50%; color:#63725b; background:#eceee3; font-size:25px; }
.assistant-context { display:flex; flex:none; align-items:center; gap:7px; padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); overflow:auto; scrollbar-width:none; }
.assistant-context-caption { color:#8b9582; font-size:10px; margin-right:3px; }
.assistant-context>button { flex:none; border:1px solid #d5ddcb; border-radius:20px; background:transparent; color:#849077; padding:7px 11px; font-size:10px; }
.assistant-context>button[aria-pressed="true"] { color:#506443; background:#e2e9d7; border-color:#b8c8a7; }
.assistant-context>button[aria-pressed="true"]::before { content:"✓ "; font-size:9px; }
.assistant-connection { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:#99917d; font-size:9px; flex:none; white-space:nowrap; padding-left:8px; }
.assistant-connection::before { content:""; width:5px; height:5px; border-radius:50%; background:#b8ab91; }
.assistant-connection.is-connected { color:#7e9465; }.assistant-connection.is-connected::before { background:#8eab72; }
.assistant-notice { flex:none; padding:10px 14px; margin:0 20px 8px; border:1px solid #dacdb8; border-radius:9px; background:#f0e8d8; color:#867358; font-size:11px; line-height:1.6; }
.assistant-notice[data-issue="quota_exhausted"],.assistant-notice[data-issue="setup_required"] { background:#f3e3d3; border-color:#d3ad91; color:#93674a; }.assistant-notice>strong { display:block; margin-bottom:3px; font-size:12px; font-weight:600; }.assistant-notice>span { display:block; }
.assistant-messages { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left)); scroll-behavior:auto; -webkit-overflow-scrolling:touch; }
.assistant-messages, .assistant-message, .assistant-message * { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; touch-action:auto; }
.assistant-welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; padding:24px 4px 38px; text-align:center; max-width:600px; margin:auto; }
.assistant-welcome-mark { display:grid; place-items:center; width:67px; height:72px; background:#e3e8d8; border:1px solid #c9d2bb; border-radius:21px 21px 29px 21px; color:#8d9f73; font-size:44px; margin-bottom:24px; box-shadow:0 5px 0 #c9d2bb; }
.assistant-eyebrow { font-size:8px!important; letter-spacing:1.5px; color:#97a183!important; font-weight:600; margin:0 0 10px!important; }
.assistant-welcome h3 { font-family:"Space Grotesk",sans-serif; font-size:29px; font-weight:500; letter-spacing:-1.1px; line-height:1.14; max-width:340px; margin:0 0 15px; }
.assistant-welcome>p { max-width:310px; margin:0; font-size:12px; line-height:1.75; color:#849078; }
.assistant-suggestions { display:grid; grid-template-columns:1fr 1fr; gap:9px; max-width:480px; width:100%; margin-top:25px; }
.assistant-suggestions button { text-align:left; border:1px solid #d4dcca; background:#fbf9f1; color:#718263; border-radius:10px; padding:13px 12px; font-size:10px; line-height:1.4; min-height:52px; }
.assistant-message { max-width:760px; margin:8px auto 24px; }
.assistant-message.is-user { max-width:620px; margin-left:auto; margin-right:max(0px,calc((100% - 760px)/2)); background:#e1e8d6; border:1px solid #ced9c1; padding:13px 16px; border-radius:14px 14px 4px 14px; }
.assistant-message.is-assistant { background:#fffdf7; border:1px solid #e0e3d5; padding:17px 18px; border-radius:4px 15px 15px 15px; box-shadow:0 3px 10px #53644304; }
.assistant-message-heading { color:#87977a; font-size:9px; font-weight:600; margin-bottom:9px; }
.is-assistant>.assistant-message-heading { color:#b27a5e; }
.assistant-message-text { font-size:13px; line-height:1.8; overflow-wrap:anywhere; color:#455440; }
.assistant-message-text p { margin:0 0 13px; white-space:pre-wrap; }.assistant-message-text p:last-child { margin-bottom:0; }
.assistant-message-text h3 { margin:22px 0 9px; font-size:16px; font-weight:600; line-height:1.4; }.assistant-message-text h4 { margin:16px 0 7px; font-size:14px; }.assistant-message-text h3:first-child { margin-top:2px; }
.assistant-message-text ul,.assistant-message-text ol { padding-left:21px; margin:10px 0 15px; }.assistant-message-text li { padding-left:3px; margin:5px 0; }
.assistant-message-text code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; padding:2px 4px; border-radius:4px; background:#e9eddf; color:#68785a; }.assistant-message-text pre { overflow:auto; padding:13px; border:1px solid #d8dfcf; border-radius:8px; background:#edf0e5; }.assistant-message-text pre code { padding:0; background:none; }
.assistant-message-text blockquote { border-left:3px solid #becbad; color:#829173; margin:12px 0; padding:3px 12px; }
.assistant-message a { color:#ad6c50; text-underline-offset:3px; }.assistant-message-note { display:block; margin-top:10px; color:#9b8c73; font-size:10px; }
.assistant-typing { display:inline-block; color:#91a17f; font-size:12px; animation:assistant-pulse 1.4s ease-in-out infinite; }
.assistant-sources { display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid #e4e7dd; padding-top:12px; margin-top:17px; }.assistant-sources p { width:100%; margin:0 0 3px; color:#94a086; font-size:9px; }.assistant-sources a { border:1px solid #d7dfcb; background:#f1f4e8; padding:6px 9px; border-radius:6px; max-width:100%; color:#788b61; font-size:9px; line-height:1.4; text-decoration:none; }
.assistant-image-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }.assistant-image-gallery:has(>:only-child) { grid-template-columns:minmax(0,360px); }
.assistant-image-card { display:flex; flex-direction:column; align-items:center; overflow:hidden; min-height:130px; border:1px solid #d4deca; border-radius:11px; padding:0; background:#eaf0df; color:#7f926b; }.assistant-image-card img { width:100%; height:auto; display:block; object-fit:contain; }.assistant-image-card>span:last-child { display:block; width:100%; padding:9px 10px; text-align:left; font-size:9px; }.assistant-image-pending { margin:auto; font-size:11px; }
.assistant-diagram { margin:16px 0 0; padding:12px; background:#f7f5ed; border:1px solid #d8dfce; border-radius:11px; }.assistant-diagram figcaption { margin-bottom:9px; font-size:12px; font-weight:600; }.assistant-diagram svg { display:block; width:100%; max-height:560px; height:auto; }.assistant-diagram p { margin:8px 0; color:#839276; font-size:10px; line-height:1.6; }.assistant-diagram-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }.assistant-diagram-download,.assistant-diagram-expand { border:0; background:none; padding:6px 0 0; color:#a46c50; font-size:10px!important; }
.assistant-turn-status { flex:none; display:flex; align-items:center; gap:10px; max-width:820px; width:100%; margin:0 auto; padding:8px 20px; font-size:10px; line-height:1.5; color:#9a8062; }.assistant-turn-status>span { flex:1; }.assistant-turn-status button { flex:none; font-size:10px; border:1px solid #d5c6ad; border-radius:7px; background:#f2e8d8; color:#9b7452; padding:6px 10px; }
.assistant-composer-wrap { flex:none; width:100%; max-width:840px; padding:8px max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); margin:0 auto; background:var(--ai-bg); }
.assistant-composer { background:#fffdf7; border:1px solid #cbd5bf; border-radius:15px; padding:12px 12px 10px; box-shadow:0 5px 20px #5d6d4c08; }.assistant-composer:focus-within { border-color:#aaba95; box-shadow:0 0 0 3px #b2c69a14; }
.assistant-composer textarea { display:block; width:100%; min-height:48px; max-height:150px; resize:none; border:0; border-radius:0; padding:0 3px; outline:0; color:#40513a; background:transparent; font-family:inherit; font-size:16px; line-height:1.5; }.assistant-composer textarea::placeholder { color:#a0aa91; }
.assistant-composer-bottom { display:flex; align-items:flex-end; gap:8px; justify-content:space-between; }.assistant-compose-tools { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }.assistant-compose-tools button { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; padding:7px 6px; color:#90a17e; font-size:9px; white-space:nowrap; }.assistant-compose-tools button>span { font-size:15px; }.assistant-compose-tools button[aria-pressed="true"] { color:#b16d4e; background:#f1e7d9; border-radius:6px; }
.assistant-send { display:grid; place-items:center; flex:none; border:1px solid #a4b58e; border-radius:10px; width:38px; height:38px; background:#8da372; color:#fffdf4; font-size:23px!important; line-height:1; padding:0; }.assistant-send:disabled { background:#e1e5d7; border-color:#d6ddc9; color:#b0bca0; opacity:1!important; }
.assistant-footnote { text-align:center; font-size:8px; margin:8px 0 0; color:#a2aa96; line-height:1.5; }.assistant-keyboard .assistant-footnote { display:none; }.assistant-keyboard .assistant-composer-wrap { padding-bottom:8px; }
.assistant-attachment { display:flex; align-items:center; gap:10px; padding:8px 10px; margin:0 0 8px; border:1px solid #d2ddc6; border-radius:10px; background:#e8eedf; }.assistant-attachment img { width:66px; height:44px; object-fit:contain; background:#151a16; border-radius:5px; image-rendering:pixelated; }.assistant-attachment>div { flex:1; display:flex; flex-direction:column; gap:4px; }.assistant-attachment strong { font-size:10px; font-weight:500; color:#738763; }.assistant-attachment span { font-size:8px; color:#92a184; }.assistant-attachment button { border:0; background:none; width:30px; height:30px; color:#8d9d7d; font-size:20px; }
.assistant-lightbox { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); color:#e8ecdf; border:0; border-radius:0; background:#172019; overflow:auto; }.assistant-lightbox::backdrop { background:#172019; }.assistant-lightbox-header { display:flex; align-items:center; gap:12px; justify-content:space-between; max-width:1000px; margin:0 auto 18px; }.assistant-lightbox-header p { font-size:12px; color:#a9b79b; line-height:1.6; }.assistant-lightbox-header button { flex:none; width:42px; height:42px; background:#29362a; border:1px solid #45573e; border-radius:50%; color:#bbc7af; font-size:24px; }.assistant-lightbox>img { display:block; width:auto; max-width:100%; max-height:calc(100dvh - 160px); margin:0 auto; object-fit:contain; border-radius:8px; }.assistant-image-download { display:block; margin:18px auto 0; padding:11px 18px; color:#cdd9bf; background:#34472f; border:1px solid #5b7450; border-radius:8px; font-size:12px; }
.assistant-lightbox.is-diagram[open] { display:flex; flex-direction:column; gap:0; }.assistant-lightbox.is-diagram .assistant-lightbox-header { flex:none; width:100%; }.assistant-lightbox-diagram { flex:1; min-height:0; width:100%; overflow:auto; overscroll-behavior:contain; border-radius:12px; background:#f7f5ed; touch-action:pan-x pan-y; }.assistant-lightbox-diagram svg { display:block; width:640px; min-width:640px; max-width:none; height:auto; margin:auto; }.assistant-diagram-help { flex:none; margin:10px 0 0; text-align:center; color:#91a582; font-size:10px; }.assistant-lightbox.is-diagram .assistant-image-download { flex:none; margin-top:12px; }
.assistant-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; }
.game-assistant button:focus-visible,.assistant-lightbox button:focus-visible { outline:2px solid #bc7b58; outline-offset:3px; }
body.assistant-open { overflow:hidden; }
@keyframes assistant-pulse { 50% { opacity:.45; } }
@media(min-width:800px) { .assistant-messages { padding-top:28px; }.assistant-welcome { padding-bottom:60px; }.assistant-welcome h3 { font-size:36px; max-width:420px; }.assistant-brand h2 { font-size:22px; } }
@media(max-width:380px) { .assistant-header { padding-left:15px; padding-right:15px; }.assistant-brand { gap:9px; }.assistant-brand h2 { font-size:18px; }.assistant-header-actions { gap:5px; }.assistant-header-actions>button:first-child { font-size:9px; }.assistant-context { padding-left:15px; padding-right:15px; gap:5px; }.assistant-context-caption { display:none; }.assistant-context>button { padding:6px 10px; }.assistant-messages { padding-left:15px; padding-right:15px; }.assistant-welcome h3 { font-size:25px; }.assistant-composer-wrap { padding-left:12px; padding-right:12px; }.assistant-compose-tools button { font-size:8px; }.assistant-notice { margin-left:15px; margin-right:15px; } }
@media(max-height:500px) { .assistant-header { padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:8px; }.assistant-brand>span { width:30px; height:32px; font-size:20px; border-radius:9px; }.assistant-brand h2 { font-size:17px; }.assistant-brand p { margin-top:2px; font-size:9px; }.assistant-header-actions .assistant-close { width:34px; height:34px; }.assistant-context { padding-top:7px; padding-bottom:7px; }.assistant-composer-wrap { padding-top:3px; padding-bottom:6px; }.assistant-composer { padding:8px; }.assistant-composer textarea { min-height:26px; max-height:70px; }.assistant-footnote { display:none; }.assistant-welcome { padding:14px 0; }.assistant-welcome-mark,.assistant-welcome>.assistant-eyebrow { display:none; }.assistant-welcome h3 { font-size:22px; margin-bottom:9px; }.assistant-suggestions { margin-top:14px; }.assistant-suggestions button { min-height:35px; padding:8px; } }
@media(prefers-reduced-motion:reduce) { .game-assistant * { animation:none!important; scroll-behavior:auto!important; } }