:root{--body-bg: #f0f4f8;--app-bg: #ffffff;--app-border: #d1d9dd;--text-color: #333;--text-muted: #6c757d;--link-color: #0056b3;--header-bg: rgb(255, 255, 255);--header-text: #212121;--header-border: #ffffff;--settings-label-text: #495057;--input-bg: #ffffff;--input-border: #ced4da;--input-text: #495057;--input-focus-border: #80bdff;--input-focus-shadow: rgba(0, 123, 255, .25);--button-primary-bg: #007bff;--button-primary-text: #ffffff;--button-primary-hover-bg: #0056b3;--button-secondary-bg: #6c757d;--button-secondary-text: #ffffff;--button-secondary-hover-bg: #5a6268;--button-success-bg: #28a745;--button-success-hover-bg: #218838;--tabs-container-bg: #ffffff;--tabs-container-border: #ffffff;--tab-bg: #f0f0f0;--tab-border: #d1d9dd;--tab-text: #495057;--tab-hover-bg: #e2e6ea;--tab-active-bg: var(--app-bg);--tab-active-border: var(--app-bg);--tab-active-text: #0056b3;--tab-close-text: #adb5bd;--tab-close-hover-text: #495057;--tab-close-hover-bg: #dee2e6;--messages-bg: var(--app-bg);--message-user-bg: #007bff;--message-user-text: #ffffff;--message-assistant-bg: #e9ecef;--message-assistant-text: #212529;--message-error-bg: #f8d7da;--message-error-text: #721c24;--message-error-border: #f5c6cb;--message-loading-bg: var(--message-assistant-bg);--message-loading-text: var(--text-muted);--code-bg: #f8f9fa;--code-text: #c7254e;--pre-bg: #2b2b2b;--pre-text: #f8f8f2;--code-copy-button-bg: #555;--code-copy-button-text: #eee;--code-copy-button-hover-bg: #777;--form-bg: #f8f9fa;--form-border: #d1d9dd;--textarea-bg: var(--input-bg);--textarea-border: var(--input-border);--send-button-bg: var(--button-primary-bg);--send-button-text: var(--button-primary-text);--send-button-hover-bg: var(--button-primary-hover-bg);--send-button-disabled-bg: #a0c3e8}body.dark-mode{--body-bg: #1a1a1a;--app-bg: #2a2a2a;--app-border: #444;--text-color: #e0e0e0;--text-muted: #999;--link-color: #58a6ff;--header-bg: #171717;--header-text: #e0e0e0;--header-border: #1b1b1b;--settings-label-text: #ccc;--input-bg: #3a3a3a;--input-border: #555;--input-text: #e0e0e0;--input-focus-border: #58a6ff;--input-focus-shadow: rgba(88, 166, 255, .25);--button-primary-bg: #0d6efd;--button-primary-hover-bg: #0b5ed7;--button-success-bg: #198754;--button-success-hover-bg: #157347;--tabs-container-bg: #212121;--tabs-container-border: #444;--tab-bg: #3a3a3a;--tab-border: #555;--tab-text: #ccc;--tab-hover-bg: #4a4a4a;--tab-active-bg: var(--app-bg);--tab-active-border: var(--app-bg);--tab-active-text: #58a6ff;--tab-close-text: #888;--tab-close-hover-text: #eee;--tab-close-hover-bg: #555;--messages-bg: var(--app-bg);--message-user-bg: #0d6efd;--message-user-text: #ffffff;--message-assistant-bg: #3a3a3a;--message-assistant-text: #e0e0e0;--message-error-bg: #58151c;--message-error-text: #f8d7da;--message-error-border: #842029;--message-loading-bg: var(--message-assistant-bg);--message-loading-text: var(--text-muted);--code-bg: rgba(255, 255, 255, .1);--code-text: #ff7b72;--code-copy-button-bg: #444;--code-copy-button-text: #ccc;--code-copy-button-hover-bg: #666;--form-bg: #212121;--form-border: #444;--textarea-bg: var(--input-bg);--textarea-border: var(--input-border);--send-button-bg: var(--button-primary-bg);--send-button-hover-bg: var(--button-primary-hover-bg);--send-button-disabled-bg: #0a4a99}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;background-color:var(--body-bg);color:var(--text-color);display:flex;justify-content:center;align-items:center;transition:background-color .3s ease,color .3s ease}#app{overflow:hidden;width:100%;height:100vh;display:flex;flex-direction:column;transition:background-color .3s ease,border-color .3s ease}header{background-color:var(--header-bg);color:var(--header-text);padding:10px 15px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;flex-shrink:0;border-bottom:1px solid var(--header-border);transition:background-color .3s ease,border-color .3s ease}.header-left{display:flex;align-items:center;gap:15px}header h1{font-size:1.2em;margin:0;white-space:nowrap}#dark-mode-toggle{background:none;border:1px solid var(--header-text);color:var(--header-text);border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:1.2em;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:background-color .2s,transform .2s}#dark-mode-toggle:hover{background-color:#fff3;transform:scale(1.1)}.settings-container{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.setting-item{display:flex;align-items:center;gap:5px}.settings-container label{font-size:.85em;white-space:nowrap;color:var(--settings-label-text)}.settings-container input[type=password],.settings-container input[type=text],.settings-container select{padding:6px 10px;border:1px solid var(--input-border);border-radius:5px;font-size:.85em;background-color:var(--input-bg);color:var(--input-text);transition:border-color .2s ease,background-color .3s ease,color .3s ease}.settings-container input:focus,.settings-container select:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 .2rem var(--input-focus-shadow)}.settings-container input[type=password],.settings-container input[type=text]{width:120px}.settings-container select{max-width:150px}#save-settings{padding:7px 14px;background-color:var(--button-success-bg);color:var(--button-primary-text);border:none;border-radius:5px;cursor:pointer;font-size:.85em;font-weight:500;transition:background-color .2s ease}#save-settings:hover{background-color:var(--button-success-hover-bg)}#tabs-container{display:flex;background-color:var(--tabs-container-bg);border-bottom:1px solid var(--tabs-container-border);padding:6px 10px;flex-shrink:0;overflow-x:auto;transition:background-color .3s ease,border-color .3s ease}#tabs{display:flex;gap:6px;flex-grow:1}.tab{background-color:var(--tab-bg);border:none;border-bottom:none;padding:10px 16px;border-radius:8px;cursor:pointer;white-space:nowrap;font-size:.9em;color:var(--tab-text);transition:background-color .2s ease,color .2s ease,border-color .2s ease;position:relative;display:flex;align-items:center}.tab:hover{background-color:var(--tab-hover-bg)}.tab.active{background-color:var(--tab-active-bg);border-bottom:1px solid var(--tab-active-border);font-weight:600;color:var(--tab-active-text);position:relative;top:1px}.tab .close-tab{margin-left:8px;font-weight:700;color:var(--tab-close-text);cursor:pointer;font-size:.9em;padding:1px 4px;border-radius:50%;line-height:1;transition:color .2s ease,background-color .2s ease}.tab .close-tab:hover{color:var(--tab-close-hover-text);background-color:var(--tab-close-hover-bg)}#new-tab-button{background-color:var(--button-primary-bg);color:var(--button-primary-text);border:none;border-radius:5px;padding:5px 12px;font-size:1.1em;font-weight:700;cursor:pointer;margin-left:10px;flex-shrink:0;transition:background-color .2s ease}#new-tab-button:hover{background-color:var(--button-primary-hover-bg)}#chat-area{flex-grow:1;display:flex;flex-direction:column;overflow:hidden}#messages{flex-grow:1;overflow-y:auto;padding:20px;background-color:var(--messages-bg);display:flex;flex-direction:column;gap:12px;transition:background-color .3s ease}.message{padding:15px;border-radius:10px;max-width:80%;line-height:1.9;word-wrap:break-word;transition:background-color .3s ease,color .3s ease}.message.user{background-color:var(--message-user-bg);color:var(--message-user-text);align-self:flex-end;border-bottom-right-radius:5px}.message.assistant{background-color:var(--message-assistant-bg);color:var(--message-assistant-text);align-self:flex-start;border-bottom-left-radius:5px}.message.assistant p:last-child{margin-bottom:0}.message.assistant pre{padding:12px 15px;border-radius:6px;overflow-x:auto;margin:10px 0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9em;position:relative}.message.assistant code:not(pre code){background-color:var(--code-bg);color:var(--code-text);padding:.2em .4em;border-radius:4px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9em}.message.assistant strong{font-weight:600}.message.assistant em{font-style:italic}.message.assistant ul,.message.assistant ol{margin:5px 0 5px 20px}.message.assistant blockquote{border-left:4px solid var(--input-border);padding-left:10px;margin-left:0;color:var(--text-muted)}.message.loading{background-color:var(--message-loading-bg);color:var(--message-loading-text);align-self:flex-start;font-style:italic}.loading-cursor:after{content:"▍";animation:blink 1s step-end infinite;margin-left:2px;font-style:normal}@keyframes blink{50%{opacity:0}}.message.error{background-color:var(--message-error-bg);color:var(--message-error-text);border:1px solid var(--message-error-border);align-self:flex-start;font-weight:500}.system-message{text-align:center;color:var(--text-muted);font-style:italic;font-size:.9em;padding:10px}#message-form{display:flex;padding:10px 15px;border-top:1px solid var(--form-border);background-color:var(--form-bg);flex-shrink:0;gap:10px;transition:background-color .3s ease,border-color .3s ease}#message-input{flex-grow:1;padding:10px 12px;border:1px solid var(--textarea-border);border-radius:18px;resize:none;font-size:1em;line-height:1.4;max-height:150px;overflow-y:auto;background-color:var(--textarea-bg);color:var(--text-color);transition:border-color .2s ease,background-color .3s ease,color .3s ease}#message-input:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 .2rem var(--input-focus-shadow)}#send-button{padding:0 18px;background-color:var(--send-button-bg);color:var(--send-button-text);border:none;border-radius:18px;cursor:pointer;font-size:1em;font-weight:500;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}#send-button:hover:not(:disabled){background-color:var(--send-button-hover-bg)}#send-button:disabled{background-color:var(--send-button-disabled-bg);cursor:not-allowed}@media (max-width: 768px){header{flex-direction:column;align-items:stretch;gap:10px}.header-left{justify-content:space-between}.settings-container{gap:8px}.settings-container input[type=password],.settings-container input[type=text]{width:100px}.settings-container select{max-width:120px}#app{height:95vh;width:100%;border-radius:0;border:none}#messages{padding:15px}.message{max-width:85%}#message-form{padding:8px 10px}}
