.arc-oled { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; isolation: isolate; }
.arc-oled canvas { display: block; width: 100%; max-width: 760px; aspect-ratio: 2; object-fit: contain; pointer-events: none; }
.oled-caption { min-height: 18px; margin: 0; color: #a2a5ad; font-size: 11px; line-height: 1.6; letter-spacing: .01em; text-align: center; }
.arc-oled[data-oled-state="responding"] .oled-caption { color: #a6cfb7; }
.arc-oled[data-oled-state="waiting"] .oled-caption, .arc-oled[data-oled-state="error"] .oled-caption { color: #f0f1f3; }
.chat-main { grid-template-rows: auto auto minmax(0,1fr) auto; }
.chat-face-stage { height: clamp(145px,23vh,210px); padding: 0 18px 12px; background: #080809; transition: height 450ms cubic-bezier(.2,.8,.2,1); }
.chat-face-stage canvas { width: min(380px,100%); height: calc(100% - 25px); }
.chat-main:has(.welcome-state:not([hidden])) .chat-face-stage { height: clamp(220px,39vh,400px); padding-top: 14px; }
.chat-main:has(.welcome-state:not([hidden])) .chat-face-stage canvas { width: min(680px,100%); }
.chat-main:has(.welcome-state:not([hidden])) .chat-face-stage .oled-caption { visibility: hidden; }
.welcome-state { margin: 0 auto 26px; width: min(580px,calc(100% - 40px)); }
.welcome-state h1 { font-size: clamp(25px,3vw,32px); font-weight: 550; }
.welcome-state > p { margin-bottom: 22px; color: #999ca4; }
.message-thread { margin-top: 18px; min-height: 0; }
@container chat (max-width: 580px) { .chat-face-stage { height: clamp(112px,19vh,160px); } .chat-face-stage canvas { width: 280px; } .chat-main:has(.welcome-state:not([hidden])) .chat-face-stage { height: clamp(190px,32vh,300px); } }
@media(max-height:650px) { .chat-face-stage { height: 112px; } .chat-main:has(.welcome-state:not([hidden])) .chat-face-stage { height: 190px; } .welcome-state > p { margin-bottom: 12px; } }
@media(prefers-reduced-motion:reduce) { .chat-face-stage { transition: none; } }
.reduce-motion .chat-face-stage { transition: none; }