:root{--bg: #f8f9fa;--panel: #ffffff;--border: #d7dce0;--text: #1d1e21;--accent: #1465ff;--chat-line-hover-bg: #eae9e9}[data-theme=dark],html.dark{--bg: #1e1e1e;--panel: #272727;--border: #3b3b3b;--text: #d3d7de;--accent: #b3d0f6;--chat-line-hover-bg: #4b5563}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;box-sizing:border-box}html .app-shell,body .app-shell{height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}html .app-shell .topbar,body .app-shell .topbar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10}html .app-shell .topbar .topbar__title,body .app-shell .topbar .topbar__title{font-size:1.4rem;font-weight:600}html .app-shell .topbar .topbar__actions,body .app-shell .topbar .topbar__actions{display:flex;gap:.75rem;align-items:center}html .app-shell .topbar .topbar__actions #themeToggle,body .app-shell .topbar .topbar__actions #themeToggle{border-radius:1rem;padding:.5rem .75rem;color:var(--accent);background-color:#1465ff2e;border:none;cursor:pointer}html .app-shell .app-content,body .app-shell .app-content{overflow:hidden;display:grid;grid-template-columns:16rem 30rem minmax(0,1fr);gap:5px;padding:5px;flex:1}html .app-shell .app-content .panel,body .app-shell .app-content .panel{border-color:var(--border);min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:4px}html .app-shell .app-content .panel .panel__header,body .app-shell .app-content .panel .panel__header{padding:.75rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}html .app-shell .app-content .panel .panel__header .panel__title,body .app-shell .app-content .panel .panel__header .panel__title{margin:0;font-size:1.1rem;font-weight:600}html .app-shell .app-content .panel .panel__content,body .app-shell .app-content .panel .panel__content{flex:1;display:flex;padding:.75rem;flex-direction:column;min-height:0}html .app-shell .app-content .panel #user-rail .user-item,body .app-shell .app-content .panel #user-rail .user-item{padding:6px;background:transparent;text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border:none;color:var(--text);margin-bottom:4px}html .app-shell .app-content .panel #user-rail .user-item:hover,body .app-shell .app-content .panel #user-rail .user-item:hover{background:var(--chat-line-hover-bg)}html .app-shell .app-content .panel #user-rail .user-item[active=true],body .app-shell .app-content .panel #user-rail .user-item[active=true]{background-color:#1465ff2e;border-color:#1465ff66;color:var(--accent)}html .app-shell .app-content .panel #user-rail .user-item .chat-count,body .app-shell .app-content .panel #user-rail .user-item .chat-count{font-size:.85rem}html .app-shell .app-content .panel #chat-rail .tabs,body .app-shell .app-content .panel #chat-rail .tabs{display:flex;gap:1.25rem}html .app-shell .app-content .panel #chat-rail .tabs .tab,body .app-shell .app-content .panel #chat-rail .tabs .tab{margin-bottom:.5rem;padding-bottom:3px;cursor:pointer;border-bottom:3px solid transparent;transition:border-color .2s}html .app-shell .app-content .panel #chat-rail .tabs .tab.active,body .app-shell .app-content .panel #chat-rail .tabs .tab.active{font-weight:600;border-bottom-color:var(--accent)}html .app-shell .app-content .panel #chat-rail .chats,body .app-shell .app-content .panel #chat-rail .chats{overflow:auto}html .app-shell .app-content .panel #chat-rail .chats .chat-group,body .app-shell .app-content .panel #chat-rail .chats .chat-group{border:1px solid var(--border);border-radius:4px;margin-bottom:6px;background-color:var(--panel)}html .app-shell .app-content .panel #chat-rail .chats .chat-group .title,body .app-shell .app-content .panel #chat-rail .chats .chat-group .title{display:flex;padding:6px;font-weight:600;align-items:center;justify-content:space-between}html .app-shell .app-content .panel #chat-rail .chats .chat-group .title:hover,body .app-shell .app-content .panel #chat-rail .chats .chat-group .title:hover{background-color:var(--chat-line-hover-bg)}html .app-shell .app-content .panel #chat-rail .chats .chat-group .title .chat-count,body .app-shell .app-content .panel #chat-rail .chats .chat-group .title .chat-count{font-size:.85rem;font-weight:400}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats{padding:6px}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat{cursor:pointer;display:grid;grid-template-columns:55% 35% 10%;justify-content:space-between;align-items:center;padding:6px}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat:hover,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat:hover{background-color:var(--chat-line-hover-bg)}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat[active=true],body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat[active=true]{background-color:#1465ff2e;border-color:#1465ff66;color:var(--accent)}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-question,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-question{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-updated-at,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-updated-at{color:var(--muted-text);font-size:.8rem;display:flex;align-items:center}html .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-badges,body .app-shell .app-content .panel #chat-rail .chats .chat-group .chats .chat .chat-badges{text-align:right}html .app-shell .app-content .panel #chat-rail .chats .empty-state,body .app-shell .app-content .panel #chat-rail .chats .empty-state{padding:2.5rem 1rem;text-align:center;color:var(--muted-text);font-size:.95rem;line-height:1.5}html .app-shell .app-content .panel #messages,body .app-shell .app-content .panel #messages{overflow:auto}html .app-shell .app-content .panel #messages .message,body .app-shell .app-content .panel #messages .message{display:flex;flex-direction:column;margin-bottom:24px}html .app-shell .app-content .panel #messages .message .time,body .app-shell .app-content .panel #messages .message .time{font-size:.75rem;color:var(--muted-text);margin-bottom:4px}html .app-shell .app-content .panel #messages .message .system-message,body .app-shell .app-content .panel #messages .message .system-message{padding:8px;border-radius:6px;background-color:#202020;max-width:60%;color:#fff}html .app-shell .app-content .panel #messages .message .system-message .header,body .app-shell .app-content .panel #messages .message .system-message .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.8rem}html .app-shell .app-content .panel #messages .message .system-message .header .label,body .app-shell .app-content .panel #messages .message .system-message .header .label{font-style:italic}html .app-shell .app-content .panel #messages .message .system-message .header .copy-button,body .app-shell .app-content .panel #messages .message .system-message .header .copy-button{padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px}html .app-shell .app-content .panel #messages .message .system-message .header .copy-button:hover,body .app-shell .app-content .panel #messages .message .system-message .header .copy-button:hover{background-color:#ffffff1a}html .app-shell .app-content .panel #messages .message .system-message .content,body .app-shell .app-content .panel #messages .message .system-message .content{overflow:auto;text-wrap:auto;max-height:12rem;margin:0;font-family:inherit}html .app-shell .app-content .panel #messages .message .user-message,body .app-shell .app-content .panel #messages .message .user-message{padding:8px;border-radius:6px;background-color:#202020;max-width:60%;color:#fff}html .app-shell .app-content .panel #messages .message .assistant-message,body .app-shell .app-content .panel #messages .message .assistant-message{padding:0;width:100%}html .app-shell .app-content .panel #messages .message .assistant-message .text-content,body .app-shell .app-content .panel #messages .message .assistant-message .text-content{margin-bottom:8px;color:var(--text)}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content{background-color:#202020;padding:8px;border-radius:6px}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#fff}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .label,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .label{font-style:italic}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .copy-button,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .copy-button{padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .copy-button:hover,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content .header .copy-button:hover{background-color:#ffffff1a}html .app-shell .app-content .panel #messages .message .assistant-message .sql-content .language-sql,body .app-shell .app-content .panel #messages .message .assistant-message .sql-content .language-sql{border-radius:6px;scrollbar-color:var(--accent)}html .app-shell .app-content .panel #messages .message .user-feedback,body .app-shell .app-content .panel #messages .message .user-feedback{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:4px;color:var(--text)}html .app-shell .app-content .panel #messages .message .user-feedback .status,body .app-shell .app-content .panel #messages .message .user-feedback .status{display:flex;align-items:center;gap:4px}html .app-shell .app-content .panel #messages .message .user-feedback .status--liked,body .app-shell .app-content .panel #messages .message .user-feedback .status--liked{color:#82bd04}html .app-shell .app-content .panel #messages .message .user-feedback .status--disliked,body .app-shell .app-content .panel #messages .message .user-feedback .status--disliked{color:#e02424}html .app-shell .app-content .panel #messages .message .user-feedback .comment,body .app-shell .app-content .panel #messages .message .user-feedback .comment{font-style:italic;font-size:.9rem}html .app-shell .app-content .panel #messages .message .user-feedback .categories,body .app-shell .app-content .panel #messages .message .user-feedback .categories{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}html .app-shell .app-content .panel #messages .message .user-feedback .categories__category,body .app-shell .app-content .panel #messages .message .user-feedback .categories__category{background-color:#1465ff1f;color:var(--accent);padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600}html .app-shell .app-content .panel #messages .message.role-system,body .app-shell .app-content .panel #messages .message.role-system,html .app-shell .app-content .panel #messages .message.role-user,body .app-shell .app-content .panel #messages .message.role-user{align-items:flex-end}html .app-shell .app-content .panel #messages .message.role-assistant,body .app-shell .app-content .panel #messages .message.role-assistant{align-items:flex-start}@media (max-width: 1200px){.app-content{grid-template-columns:14rem 20rem minmax(0,1fr)}}@media (max-width: 980px){.app-content{grid-template-columns:minmax(0,1fr)}.panel{min-height:18rem}}.hidden{display:none!important}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;z-index:1000;padding:2rem}.login-overlay__form{background:var(--panel);color:var(--text);width:min(22rem,100%);display:flex;flex-direction:column;gap:1rem;padding:2rem;border-radius:.75rem;border:1px solid var(--border);box-shadow:0 12px 32px #00000040}.login-overlay__field{display:flex;flex-direction:column;gap:.5rem}.login-overlay__field input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:.375rem;background:var(--panel);color:var(--text);font:inherit}.login-overlay__error{color:#d14343;margin:0;min-height:1.25rem}.refresh-button{cursor:pointer;-webkit-user-select:none;user-select:none}.refresh-button:hover{color:var(--accent)}.refresh-button.loading{cursor:default;opacity:.5;pointer-events:none;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:.4rem}::-webkit-scrollbar-thumb{background-color:#b1b0b0;border-radius:4px}::-webkit-scrollbar-track{background-color:var(--panel-bg)}