:root{--bg-page: #0f172a;--bg-panel: #1e293b;--bg-bubble-user: #0ea5e9;--bg-bubble-assistant: #1e3a5f;--border: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--input-bg: #0f172a;--accent: #38bdf8;--accent-hover: #7dd3fc;--shadow: rgba(0, 0, 0, .25);--radius: 12px;--font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font);background:var(--bg-page);color:var(--text);min-height:100vh;line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}button{font-family:var(--font);cursor:pointer;border:none;background:none}input,textarea{font-family:var(--font)}.app-header{padding:1rem 1.5rem;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.app-header h1{margin:0;font-size:1.25rem;font-weight:600;color:var(--text)}.app-header p{margin:.25rem 0 0;font-size:.875rem;color:var(--text-muted)}.tabs{display:flex;gap:.25rem;margin-top:1rem}.tab{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-muted);background:transparent;border-radius:var(--radius);transition:color .2s,background .2s}.tab:hover{color:var(--text);background:var(--border)}.tab.active{color:var(--bg-page);background:var(--accent)}.chat-area{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.message{max-width:85%;width:fit-content;padding:.875rem 1.125rem;border-radius:var(--radius);font-size:.9375rem;line-height:1.55;box-shadow:0 2px 8px var(--shadow)}.message.user{align-self:flex-end;background:var(--bg-bubble-user);color:#fff;border-bottom-right-radius:4px}.message.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);border:1px solid var(--border);border-bottom-left-radius:4px}.message .role-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;opacity:.85;margin-bottom:.35rem}.message .content{white-space:pre-wrap;word-break:break-word}.input-area{padding:1rem 1.5rem 1.5rem;background:var(--bg-panel);border-top:1px solid var(--border);flex-shrink:0}.input-row{display:flex;gap:.75rem;align-items:flex-end}.input-row textarea{flex:1;min-height:48px;max-height:160px;padding:.75rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-size:.9375rem;resize:none;transition:border-color .2s}.input-row textarea::placeholder{color:var(--text-muted)}.input-row textarea:focus{outline:none;border-color:var(--accent)}.send-btn{flex-shrink:0;width:48px;height:48px;border-radius:var(--radius);background:var(--accent);color:var(--bg-page);display:flex;align-items:center;justify-content:center;transition:background .2s}.send-btn:hover:not(:disabled){background:var(--accent-hover)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn svg{width:22px;height:22px}.welcome{text-align:center;padding:2rem 1rem;color:var(--text-muted);font-size:.9375rem}.welcome strong{color:var(--text)}.loading-dots{display:inline-flex;gap:4px;padding:.25rem 0}.loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:bounce .6s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.6}40%{transform:scale(1.2);opacity:1}}.error-msg{font-size:.875rem;color:#f87171;margin-top:.5rem}
