:root { color-scheme: light; --ink:#16231e; --muted:#66736d; --line:#dfe7e2; --surface:#fff; --canvas:#f3f6f4; --brand:#176b4d; --brand-dark:#0e5139; --user:#176b4d; }
* { box-sizing:border-box; }
html, body, form { height:100%; margin:0; }
body { background:radial-gradient(circle at 50% 0,#e4efe9 0,transparent 38%),var(--canvas); color:var(--ink); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
button, textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
.app-shell { width:min(920px,100%); height:100%; min-height:520px; margin:auto; display:grid; grid-template-rows:auto 1fr auto auto auto; background:rgba(255,255,255,.74); border-inline:1px solid rgba(22,35,30,.07); backdrop-filter:blur(12px); }
.topbar { min-height:76px; padding:14px clamp(18px,4vw,32px); display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--brand); color:white; font-weight:800; box-shadow:0 7px 20px rgba(23,107,77,.22); }
.topbar h1 { margin:0; font-size:1.08rem; letter-spacing:-.02em; }.topbar p { margin:2px 0 0; color:var(--muted); font-size:.82rem; }
.secondary-button { margin-left:auto; padding:9px 14px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); font-weight:650; }
.secondary-button:hover { border-color:#b7c8bf; background:#f9fbfa; }
.conversation { overflow-y:auto; padding:clamp(24px,5vw,48px) clamp(18px,5vw,48px) 18px; scroll-behavior:smooth; }
.welcome { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; transform:translateY(-5%); }
.welcome-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:18px; color:var(--brand); background:#dff0e7; font-size:1.35rem; }.welcome h2 { margin:18px 0 7px; font-size:clamp(1.45rem,4vw,2rem); letter-spacing:-.035em; }.welcome p { margin:0; color:var(--muted); }
.message-row { display:flex; margin:0 0 20px; animation:arrive .2s ease-out; }.message-row.user { justify-content:flex-end; }.message-row.assistant { justify-content:flex-start; }
.message-bubble { max-width:min(76%,650px); padding:13px 16px; border-radius:18px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 2px 8px rgba(20,43,32,.05); }
.user .message-bubble { background:var(--user); color:white; border-bottom-right-radius:5px; }.assistant .message-bubble { background:white; border:1px solid var(--line); border-bottom-left-radius:5px; }.message-bubble.error { color:#9b2c2c; background:#fff4f3; border-color:#f2c8c5; }
.status { padding:4px clamp(24px,5vw,48px) 10px; color:var(--muted); font-size:.86rem; }.typing-dots { display:inline-flex; gap:3px; margin-right:7px; }.typing-dots i { width:5px; height:5px; border-radius:50%; background:var(--brand); animation:pulse 1.1s infinite; }.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
.composer-row { padding:0 clamp(14px,4vw,34px); display:flex; align-items:flex-end; gap:10px; }.composer { flex:1; padding:8px 8px 8px 18px; display:flex; align-items:flex-end; gap:8px; border:1px solid #cad8d0; border-radius:22px; background:white; box-shadow:0 8px 28px rgba(19,51,37,.09); }.composer:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(23,107,77,.1),0 8px 28px rgba(19,51,37,.09); }
#message-input { width:100%; max-height:140px; padding:9px 0; resize:none; border:0; outline:0; background:transparent; color:var(--ink); line-height:1.45; }.send-button { flex:0 0 42px; height:42px; border:0; border-radius:15px; background:var(--brand); color:white; font-size:1.35rem; font-weight:700; }.send-button:hover { background:var(--brand-dark); }
.mode-toggle { flex:0 0 58px; height:58px; border:0; border-radius:20px; display:grid; place-items:center; background:var(--ink); color:white; box-shadow:0 8px 24px rgba(22,35,30,.2); }.mode-toggle:hover { background:var(--brand); transform:translateY(-1px); }.mode-toggle svg { width:25px; height:25px; fill:currentColor; }.mode-toggle .chat-icon { display:none; }
.voice-panel { grid-row:2 / 4; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 24px; }.voice-panel[hidden] { display:none; }.voice-panel h2 { margin:26px 0 8px; font-size:clamp(1.4rem,4vw,2rem); }.voice-panel p { min-height:48px; max-width:580px; margin:0 0 28px; color:var(--muted); line-height:1.5; }.voice-orb { width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:5px; background:radial-gradient(circle at 35% 25%,#45b184,var(--brand) 58%,#0b4531); box-shadow:0 18px 50px rgba(23,107,77,.3); }.voice-orb i { width:5px; height:28px; border-radius:5px; background:white; opacity:.88; }.voice-orb i:nth-child(2){height:48px}.voice-orb i:nth-child(3){height:38px}.voice-orb.speaking i,.voice-orb.listening i { animation:voiceWave .7s ease-in-out infinite alternate; }.voice-orb i:nth-child(2){animation-delay:.12s}.voice-orb i:nth-child(3){animation-delay:.24s}.voice-orb i:nth-child(4){animation-delay:.36s}
.voice-mic { width:66px; height:66px; border:0; border-radius:50%; display:grid; place-items:center; background:#e7efeb; color:var(--brand); }.voice-mic:hover { background:#d8e9e0; }.voice-mic svg { width:29px; height:29px; fill:currentColor; }.voice-mic.listening { background:#c43d3d; color:white; animation:micPulse 1.2s infinite; }.replay-button { margin-top:15px; padding:10px 16px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); }
.voice-mode .conversation,.voice-mode>.status,.voice-mode .composer,.voice-mode .disclaimer { display:none!important; }.voice-mode .voice-panel { display:flex; }.voice-mode .composer-row { justify-content:flex-end; padding-bottom:18px; }.voice-mode .mode-toggle .voice-icon { display:none; }.voice-mode .mode-toggle .chat-icon { display:block; }
.disclaimer { margin:10px 16px 14px; color:#7d8983; text-align:center; font-size:.72rem; }.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; }
@keyframes pulse { 0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)} } @keyframes arrive { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 rgba(196,61,61,.28)}50%{box-shadow:0 0 0 7px rgba(196,61,61,0)} }
@keyframes voiceWave { from{transform:scaleY(.45)}to{transform:scaleY(1.2)} }
@media (max-width:600px) { .app-shell{border:0}.topbar{min-height:68px}.secondary-button{font-size:.84rem;padding:8px 10px}.message-bubble{max-width:88%}.conversation{padding-top:22px}.disclaimer{margin-bottom:8px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation:none!important} }