:root{
  color-scheme:light;
  --bg:#f7f7f8;--text:#111;--muted:#777;--subtle:#aaa;--border:#e6e6e6;--panel:#f7f7f7;--hover:#f1f1f1;
  --composer:rgba(255,255,255,.97);--shadow:rgba(0,0,0,.09);--user:#111;--userText:#fff;
  --focus:color-mix(in srgb,var(--text) 42%,transparent);
}
@media(prefers-color-scheme:dark){:root{
  color-scheme:dark;--bg:#0b0b0b;--text:#f5f5f5;--muted:#999;--subtle:#666;--border:#292929;--panel:#151515;--hover:#1d1d1d;
  --composer:rgba(11,11,11,.97);--shadow:rgba(0,0,0,.4);--user:#f4f4f4;--userText:#0b0b0b;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overscroll-behavior-y:none}
button,textarea,input{font:inherit}button{color:inherit}button:focus{outline:none}
button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}textarea:focus,textarea:focus-visible{outline:0!important;outline-offset:0;box-shadow:none!important}
button{touch-action:manipulation}
.app{min-height:100svh;padding:0 18px}
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:148px;display:flex;flex-direction:column;align-items:center;padding-top:31px;pointer-events:none;isolation:isolate}
.header-fade{position:absolute;z-index:-1;inset:0;background:linear-gradient(to bottom,rgba(247,247,248,1) 0%,rgba(247,247,248,.995) 12%,rgba(247,247,248,.95) 28%,rgba(247,247,248,.78) 48%,rgba(247,247,248,.5) 67%,rgba(247,247,248,.22) 84%,rgba(247,247,248,0) 100%);}
.topbar-controls{position:absolute;top:18px;display:flex;align-items:center;gap:8px;pointer-events:auto}
.topbar-left{left:18px}.topbar-right{right:18px}
.topbar-btn{width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;box-shadow:0 5px 22px rgba(0,0,0,.08);cursor:pointer;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),background .35s;will-change:transform}
.topbar-btn:hover{box-shadow:0 8px 28px rgba(0,0,0,.12);transform:translateY(-1px)}
.topbar-btn:active{transform:scale(.91)}
.topbar-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.brand-title{font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.2}
.about-popover{position:fixed;z-index:70;top:76px;left:18px;width:min(300px,calc(100vw - 36px));padding:15px;border:1px solid rgba(0,0,0,.07);border-radius:18px;background:#fff;color:#111;box-shadow:0 18px 55px rgba(0,0,0,.14);opacity:0;transform:translateY(-7px) scale(.97);transform-origin:top left;pointer-events:none;transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.about-popover:not([hidden]){opacity:1;transform:none;pointer-events:auto}
.about-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#111;color:#fff;font-weight:800;font-size:14px;margin-bottom:9px}
.about-title{font-size:15px;font-weight:800;letter-spacing:-.02em}.about-text{margin-top:5px;color:#666;font-size:12px;line-height:1.5}.about-dev{margin-top:10px;padding-top:9px;border-top:1px solid #ededed;color:#777;font-size:11px}.about-dev strong{color:#111}
@media(prefers-color-scheme:dark){.about-popover{background:#fff;color:#111;border-color:rgba(0,0,0,.06);box-shadow:0 18px 55px rgba(0,0,0,.45)}.about-text{color:#666}.about-dev{border-color:#e9e9e9;color:#777}.about-dev strong{color:#111}}
.brand-meta{display:flex;align-items:center;gap:7px;margin-top:5px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.65}
@media(prefers-color-scheme:dark){.header-fade{background:linear-gradient(to bottom,rgba(11,11,11,1) 0%,rgba(11,11,11,.995) 12%,rgba(11,11,11,.95) 28%,rgba(11,11,11,.78) 48%,rgba(11,11,11,.5) 67%,rgba(11,11,11,.22) 84%,rgba(11,11,11,0) 100%)}.topbar-btn{background:#fff;color:#111;box-shadow:0 6px 24px rgba(0,0,0,.35)}}
.chat{width:min(900px,100%);margin:0 auto;padding:160px 0 235px;min-height:100svh}
.welcome{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);animation:fadeUp .4s ease both}
.welcome-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--text);color:var(--bg);font-weight:800;margin-bottom:18px}
.welcome h1{margin:0;color:var(--text);font-size:26px;letter-spacing:-.03em}.welcome p{margin:8px 0 18px;font-size:14px}
.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.suggestions button{border:1px solid var(--border);background:var(--bg);border-radius:999px;padding:9px 12px;font-size:12px;cursor:pointer;transition:transform .18s,background .18s}.suggestions button:active{transform:scale(.97)}.suggestions button:hover{background:var(--hover)}
.message{width:100%;margin:0 auto 24px}.message.user{display:flex;justify-content:flex-end}.bubble{max-width:min(78%,680px);padding:11px 15px;border-radius:18px 18px 5px 18px;background:var(--user);color:var(--userText);font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.message-image{display:block;width:min(300px,100%);max-height:360px;object-fit:cover;border-radius:13px;margin-bottom:8px}
.answer{max-width:100%;font-size:15px;line-height:1.68;overflow-wrap:anywhere}.answer-meta{margin:0 0 8px;color:var(--muted);font-size:10px;letter-spacing:.015em}.markdown h1,.markdown h2,.markdown h3,.markdown h4{letter-spacing:-.025em;line-height:1.25;margin:22px 0 9px}.markdown h1{font-size:1.55em}.markdown h2{font-size:1.3em}.markdown h3{font-size:1.12em}.markdown p{margin:0 0 13px}.markdown ul,.markdown ol{margin:7px 0 14px;padding-left:24px}.markdown li{margin:4px 0}.markdown blockquote{margin:13px 0;padding:9px 14px;border-left:3px solid var(--border);color:var(--muted)}.markdown hr{border:0;border-top:1px solid var(--border);margin:20px 0}.markdown a{color:inherit;text-decoration:underline;text-underline-offset:2px}.inline-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:2px 5px}.code-wrap{position:relative;margin:12px 0 16px}.code-block{margin:0;overflow:auto;padding:14px 70px 14px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;max-width:100%}.code-copy{position:absolute;right:8px;top:8px;border:1px solid var(--border);background:var(--bg);border-radius:7px;padding:5px 8px;color:var(--muted);font-size:10px;cursor:pointer}.table-wrap{width:100%;max-width:100%;margin:12px 0 16px;overflow-x:auto;overflow-y:hidden;border:1px solid var(--border);border-radius:12px;-webkit-overflow-scrolling:touch;touch-action:pan-x}.markdown table{border-collapse:collapse;width:max-content;min-width:760px;table-layout:auto}.markdown th,.markdown td{padding:10px 13px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left;white-space:normal}.markdown th{font-weight:800;background:var(--panel);white-space:nowrap}.markdown tr:last-child td{border-bottom:0}.markdown th:first-child,.markdown td:first-child{min-width:62px}.markdown th:nth-child(2),.markdown td:nth-child(2){min-width:150px}.markdown th:nth-child(n+3),.markdown td:nth-child(n+3){min-width:360px}
.typing{display:flex;gap:5px;padding:4px 0}.typing span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dot 1.1s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.13s}.typing span:nth-child(3){animation-delay:.26s}
.assistant-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-top:9px}
.answer-disclaimer{margin-top:7px;color:var(--subtle);font-size:9px;line-height:1.35}.action-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;border-radius:8px;padding:6px 7px;color:var(--muted);cursor:pointer;transition:background .16s,color .16s,transform .16s}.action-btn:hover{background:var(--hover);color:var(--text)}.action-btn:active{transform:scale(.93)}.action-btn.selected{background:var(--hover);color:var(--text)}.action-btn.disabled{opacity:.35;cursor:default}.action-icon{display:grid;place-items:center;width:15px;height:15px}.action-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.action-label{font-size:11px}.sources-popover{width:min(560px,calc(100vw - 36px));margin-top:7px;padding:11px;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:0 14px 40px var(--shadow);opacity:0;transform:translateY(-3px);transition:.15s ease}.sources-popover.open{opacity:1;transform:none}.sources-title{font-size:11px;font-weight:800;margin-bottom:6px}.sources-popover a{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 0}
.composer-wrap{position:fixed;z-index:40;left:50%;bottom:max(9px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(864px,calc(100% - 28px))}
.image-preview{position:relative;width:max-content;max-width:100%;margin:0 0 7px 2px;padding:4px;border:1px solid var(--border);background:var(--bg);border-radius:12px;box-shadow:0 5px 20px var(--shadow);animation:previewIn .18s ease both}.image-preview img{display:block;width:58px;height:58px;object-fit:cover;border-radius:8px}.image-preview button{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border:1px solid var(--border);border-radius:50%;background:var(--bg);cursor:pointer;line-height:1}
.composer-shell{border:1px solid var(--border);background:var(--composer);border-radius:30px;box-shadow:0 8px 30px var(--shadow);backdrop-filter:saturate(1.2);-webkit-backdrop-filter:saturate(1.2);transition:border-color .2s,box-shadow .2s}.composer-shell:focus-within{border-color:color-mix(in srgb,var(--text) 20%,var(--border));box-shadow:0 10px 34px var(--shadow)}
.composer{display:flex;align-items:flex-end;gap:4px;min-height:58px;padding:7px 8px}.icon-btn,.send-btn,.think-toggle{flex:0 0 auto;border:0;cursor:pointer}.icon-btn{width:42px;height:42px;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--muted);font-size:31px;font-weight:300;line-height:1;transition:background .16s,color .16s,transform .16s}.icon-btn:hover{background:var(--hover);color:var(--text)}.icon-btn:active,.send-btn:active,.think-toggle:active{transform:scale(.92)}.icon-btn:disabled{opacity:.35;cursor:default}
textarea{flex:1;min-width:0;resize:none;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;color:var(--text);font-size:15px;line-height:1.45;padding:9px 4px;max-height:180px;overflow-y:auto;-webkit-appearance:none;appearance:none}.composer textarea::placeholder{color:var(--muted)}
.think-area{position:relative;display:flex;align-items:center}.think-toggle{width:42px;height:42px;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--muted);transition:background .22s,color .22s,transform .18s}.think-toggle:hover{background:var(--hover);color:var(--text)}.think-toggle.active{background:var(--text);color:var(--bg)}.think-toggle.pulse{animation:thinkPulse .32s ease}.think-icon{display:grid;place-items:center;width:22px;height:22px}.think-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}.think-toggle.active .think-icon svg{transform:scale(1.08)}
.think-popover{position:absolute;right:0;bottom:calc(100% + 9px);width:178px;padding:9px 10px;border:1px solid var(--border);border-radius:14px;background:var(--bg);box-shadow:0 14px 42px var(--shadow);opacity:0;transform:translateY(5px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:opacity .16s ease,transform .16s ease}.think-popover:not([hidden]){opacity:1;transform:none;pointer-events:auto}.think-popover-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.think-popover-title{font-size:12px;font-weight:800;color:var(--text);white-space:nowrap}.think-switch{position:relative;width:40px;height:24px;padding:2px;border:0;border-radius:999px;background:var(--border);cursor:pointer;transition:background .2s}.think-switch span{display:block;width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:0 1px 3px var(--shadow);transition:transform .2s}.think-switch[aria-checked="true"]{background:var(--text)}.think-switch[aria-checked="true"] span{transform:translateX(16px);background:var(--bg)}
.send-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:16px;line-height:1;transition:transform .16s,opacity .16s,background .2s,color .2s}.send-btn:disabled{opacity:.32;cursor:default}.send-icon{display:block;transform:translateY(-1px);font-size:16px;font-weight:500}
.toast{position:fixed;left:50%;bottom:calc(max(80px,env(safe-area-inset-bottom) + 70px));transform:translate(-50%,8px);padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:11px;box-shadow:0 12px 30px var(--shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}
.error .answer{color:var(--muted);padding:2px 0}.error .answer strong{color:var(--text)}
.message-enter{animation:messageIn .8s cubic-bezier(.16,1,.3,1) both}.assistant-enter{animation:assistantIn .95s cubic-bezier(.16,1,.3,1) both}
@media(max-width:560px){.app{padding:0 12px}.chat{padding-left:0;padding-right:0;padding-bottom:250px}.topbar{height:142px;padding-top:27px}.brand-title{font-size:21px}.bubble{max-width:86%;font-size:15px}.answer{font-size:15px}.composer-wrap{width:calc(100% - 18px)}.composer{padding-left:7px;padding-right:7px}.think-popover{width:178px}.markdown table{min-width:700px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes previewIn{0%{opacity:0;transform:translateY(7px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes thinkPulse{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes messageIn{0%{opacity:0;transform:translateY(14px) scale(.985)}55%{opacity:1;transform:translateY(1px) scale(1.002)}100%{opacity:1;transform:none}}
@keyframes assistantIn{0%{opacity:0;transform:translateY(16px)}58%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}

@media(max-width:560px){.topbar-left{left:12px}.topbar-btn{width:46px;height:46px}.about-popover{left:12px;top:70px}}
