:root{--bg:#0f1724;--card:#0b1220;--muted:#94a3b8;--accent:#7dd3fc;--user:#c7f9ff;--assistant:#111827;--header-height:50px}html,body{height:100%}body{color:#0b1220;background:#fff;min-height:100vh;margin:0;padding:0 24px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:auto}.app{width:100%;max-width:900px;padding-top:calc(var(--header-height) + 15px);min-height:calc(100vh - var(--header-height));flex-direction:column;gap:12px;margin:0 auto;display:flex}.header-inner{width:100%;max-width:900px;height:var(--header-height);box-sizing:border-box;justify-content:space-between;align-items:center;margin:0 auto;padding:0 24px;display:flex}header{width:100%;height:var(--header-height);z-index:1200;background:#fff;border-bottom:1px solid #0f17240f;position:fixed;top:0;left:0;right:0;box-shadow:0 6px 18px #0f17240f}header h1{color:#0b1220;margin:0;font-size:18px}.site-title{color:#0b1220;letter-spacing:.2px;margin:0;font-size:18px;font-weight:700}header .meta{color:#4b5563;font-size:13px}header .brand{align-items:center;gap:12px;display:flex}header .logo{justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.logo-box{background:#fff;border-right:1px solid #0f17240a;justify-content:center;align-items:center;width:56px;height:56px;display:inline-flex}.header-main{background:linear-gradient(90deg,#f0fdfa 0%,#ecfeff 100%);flex:1;min-height:56px}.header-controls,.header-controls,.theme-area{align-items:center;gap:12px;display:flex}.lang-select{color:#0f1724;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;padding:6px 8px;font-size:13px;position:relative}.lang-dropdown{z-index:99999;background:#fff;border:1px solid #eee;border-radius:14px;min-width:320px;padding:0;animation:.18s fadeIn;position:fixed;box-shadow:0 6px 32px #0f172421}.lang-dropdown-arrow{width:20px;height:20px;position:absolute;top:-10px;left:32px;overflow:hidden}.lang-dropdown-arrow:after{content:"";background:#fff;border-top:1px solid #eee;border-left:1px solid #eee;width:16px;height:16px;margin:2px 0 0 2px;display:block;transform:rotate(45deg);box-shadow:-2px -2px 8px #0f17240a}.lang-dropdown-inner{flex-direction:column;gap:12px;padding:20px 18px 18px;display:flex}.lang-dropdown-close{color:#555;cursor:pointer;background:0 0;border:none;font-size:18px;position:absolute;top:8px;right:10px}.lang-dropdown-close:hover{color:#111}.lang-dropdown-title{margin-bottom:6px;font-size:15px;font-weight:600}.lang-dropdown-label{color:#222;margin-top:8px;margin-bottom:2px;font-size:13px}.lang-dropdown-select{color:#222;background:#f9fafb;border:1px solid #d1d5db;border-radius:6px;width:100%;margin-bottom:2px;padding:8px 10px;font-size:15px}.lang-dropdown-save{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:999px;width:100%;margin-top:16px;padding:10px 0;font-size:16px;font-weight:600;transition:background .15s}.lang-dropdown-save:hover{background:#222}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.signin-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:20px;padding:8px 14px}.card{z-index:1;max-height:calc(100vh - var(--header-height) - 80px);background:#fafafa;border:1px solid #0f17240a;border-radius:12px;flex-direction:column;flex:auto;margin-top:5px;padding:0 12px 12px;display:flex;position:relative;overflow:hidden;box-shadow:0 18px 56px #0f17241f}.chat{flex-direction:column;flex:auto;gap:10px;min-height:120px;padding:12px;display:flex;overflow:auto}.message{align-items:flex-end;gap:10px;max-width:100%;animation:.18s both slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message .avatar{border-radius:10px;flex:0 0 40px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:700;display:inline-flex}.message .bubble{white-space:pre-wrap;border-radius:10px;max-width:86%;padding:10px 14px;line-height:1.4}.message.user{justify-content:flex-end}.message.user .bubble{color:#042028;background:linear-gradient(90deg,#eef9ff,#d2f1fb);border-radius:12px 12px 8px}.message.user .avatar{color:#012;background:linear-gradient(90deg,#60a5fa,#7dd3fc)}.message.assistant{justify-content:flex-start}.message.assistant .bubble{color:#0b1220;background:#fff;border:1px solid #0f17240a;border-radius:12px 12px 12px 8px}.message.assistant .avatar{color:var(--accent);background:#22c55e14}.timestamp{color:#6b7280;margin-top:6px;font-size:12px;display:block}.input{gap:8px;padding-top:8px;display:flex}.input textarea{min-height:56px;max-height:160px;color:inherit;resize:vertical;background:#fff;border:1px solid #0f17240f;border-radius:10px;flex:1;padding:12px}.controls{gap:8px;display:flex}button{background:var(--accent);color:#042028;cursor:pointer;border:none;border-radius:10px;padding:10px 14px;font-weight:600}button.secondary{color:var(--muted);background:0 0;border:1px solid #ffffff0a}button:disabled{opacity:.6;cursor:not-allowed}.notice{color:#332c00;background:#fff3cd;border-radius:8px;padding:8px}.footer{color:#6b7280;text-align:center;background:0 0;border-radius:8px;padding:12px 16px;font-size:13px}.typing{color:var(--muted);font-style:italic}.dots{text-align:left;width:40px;display:inline-block}.dots span{opacity:0;background:#ffffff24;border-radius:50%;width:8px;height:8px;margin:0 2px;animation:1s infinite dots;display:inline-block}.dots span:first-child{animation-delay:0s}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}@keyframes dots{0%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}to{opacity:0;transform:translateY(0)}}@media (width<=600px){body{padding:12px}.app{max-width:100%}}@media (width<=720px){:root{--header-height:64px}.header-inner{height:var(--header-height);flex-direction:row;gap:8px;padding:8px 12px}.header-inner .brand{gap:8px}.header-controls{order:2}.theme-area{order:3}.theme-toggle>div:first-child{display:none}.toggle-btn{width:36px;height:22px}.toggle-btn .knob{width:16px;height:16px;top:3px;left:4px}.toggle-btn.on .knob{left:18px}.app{padding-top:var(--header-height);min-height:calc(100vh - var(--header-height))}}body.dark{color:#e6eef8;background:linear-gradient(#071126 0%,#081224 60%)}body.dark header{background:linear-gradient(#ffffff08,#ffffff03);border:1px solid #ffffff08;box-shadow:0 6px 18px #02061799}body.dark .card{background:linear-gradient(#ffffff05,#ffffff03);border:1px solid #ffffff05;box-shadow:0 8px 30px #02061799}body.dark .message.assistant .bubble{color:#e6eef8;background:#ffffff08;border:1px solid #ffffff05}body.dark .message.user .bubble{color:#042028;background:linear-gradient(90deg,#e6fbff,#c7f9ff)}body.dark .input textarea{color:inherit;background:0 0;border:1px solid #ffffff0a}body.dark header h1,body.dark .meta,body.dark .site-title{color:#e6eef8}body.dark .timestamp{color:#94a3b8}body.dark .lang-dropdown{background:#071126;border:1px solid #ffffff0a;box-shadow:0 8px 40px #020617bf}body.dark .lang-dropdown-arrow:after{background:#071126;border-top:1px solid #ffffff0a;border-left:1px solid #ffffff0a;box-shadow:-2px -2px 8px #02061780}body.dark .lang-dropdown-inner,body.dark .lang-dropdown-title,body.dark .lang-dropdown-label{color:#e6eef8}body.dark .lang-dropdown-select{color:#e6eef8;background:#ffffff05;border:1px solid #ffffff0a}body.dark .lang-dropdown-save{color:#042028;background:#e6eef8}body.dark .lang-dropdown-save:hover{background:#f3f7fb}body.dark .lang-dropdown-close{color:#cbd5e1}body.dark .lang-dropdown-close:hover{color:#e6eef8}body.dark .lang-select{color:#e6eef8;background:#ffffff05;border:1px solid #ffffff08;border-radius:6px;padding:6px 8px}.theme-toggle{align-items:center;gap:8px;display:inline-flex}.toggle-btn{cursor:pointer;background:#e6eef8;border:1px solid #0f17240f;border-radius:999px;width:44px;height:28px;position:relative}.toggle-btn .knob{background:#042028;border-radius:50%;width:20px;height:20px;transition:all .18s;position:absolute;top:3px;left:4px}.toggle-btn.on{background:#0f1724;border:1px solid #ffffff0f}.toggle-btn.on .knob{background:#fff;left:20px}