:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #101c18; color: #f3f8f5; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #1d4437, #101c18 48%); }
main { width: min(100%, 680px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px 28px; }
header { display: flex; align-items: center; gap: 12px; } .mark { display:grid; place-items:center; width:44px;height:44px;border-radius:14px;background:#66d6a1;color:#092116;font-size:24px;font-weight:800; }
h1 { margin:0; font-size:21px; } header p { margin:4px 0 0; color:#b5c8be; font-size:14px; } .controls { display:grid; grid-template-columns:1fr; gap:10px; margin:32px 0 16px; }
button { min-height:52px;border:0;border-radius:14px;padding:0 18px;background:#263831;color:#ecf5ef;font:inherit;font-weight:700;cursor:pointer; } button.primary { background:#66d6a1;color:#082016; } button:disabled { opacity:.45; cursor:not-allowed; }
.notice { color:#b5c8be; font-size:13px; line-height:1.4; padding:13px 14px; border:1px solid #294338; border-radius:12px; } .transcript { margin-top:24px; } h2 { font-size:15px; margin:0 0 10px; color:#b5c8be; }
#messages { display:flex; flex-direction:column; gap:10px; } .message { max-width:88%; padding:11px 13px; border-radius:14px; line-height:1.38; white-space:pre-wrap; } .user { align-self:flex-end; background:#224e3e; } .assistant { align-self:flex-start; background:#263831; } .empty { color:#91aa9d; line-height:1.5; }