*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.container{max-width:800px;margin:0 auto;padding:20px}.nav-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #eee}.nav-brand{display:flex;align-items:center;gap:12px}.brand-logo{height:32px;width:auto}.nav-brand h1{margin:0;font-size:24px;color:#2c3e50;font-weight:400}.nav-controls{display:flex;gap:15px;align-items:center}.api-status-compact{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.api-checkmark{font-size:16px;font-weight:700}.api-checkmark.connected{color:#27ae60}.api-checkmark.disconnected{color:#e74c3c}.api-label{color:#666}.settings-btn{padding:8px 16px;border:1px solid #ddd;background-color:#f8f9fa;color:#666;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s ease}.settings-btn:hover{background-color:#e9ecef;border-color:#3498db}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;animation:fadeIn .2s ease-out}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;animation:slideIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 0;border-bottom:1px solid #eee;margin-bottom:20px}.modal-header h2{margin:0;color:#2c3e50;font-size:24px}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.modal-close:hover{background-color:#f5f5f5;color:#333}.modal-body{padding:0 20px 20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.main-view{display:block}h1{text-align:center;color:#2c3e50;margin-bottom:10px}.nav-brand h1{text-align:left;margin-bottom:0}p{text-align:center;color:#7f8c8d;margin-bottom:30px}.api-key-section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.api-key-section label{display:block;margin-bottom:8px;font-weight:500}.api-key-hint{font-size:.9em;color:#666;margin-bottom:12px;font-style:italic}.api-key-controls{display:flex;gap:10px;align-items:center}.api-key-controls input{flex:1;padding:10px;border:1px solid #ddd;border-radius:4px}.api-key-controls button{padding:10px 20px;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-weight:500;background-color:#fff;color:#333}.api-key-controls button:hover{border-color:#3498db;background-color:#f8f9fa}.system-message-section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.system-message-section label{display:block;margin-bottom:8px;font-weight:500}.system-message-section textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-family:inherit;font-size:14px;resize:vertical;min-height:80px}.settings-content{max-width:600px;margin:0 auto}.setting-group{margin-bottom:30px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.setting-group h3{margin-bottom:15px;color:#2c3e50;font-size:18px}.save-system-btn{margin-top:10px;padding:8px 16px;background-color:#fff;color:#333;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-weight:500}.save-system-btn:hover{border-color:#3498db;background-color:#f8f9fa}.grounding-section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.grounding-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.grounding-section label{font-weight:500}.view-toggle{display:flex;align-items:center;gap:8px}.toggle-switch{position:relative;display:inline-block;width:40px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.3s;border-radius:20px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.toggle-slider{background-color:#3498db}input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-label{font-size:12px;color:#666;font-weight:500}.grounding-hint{font-size:.9em;color:#666;margin-bottom:12px;font-style:italic}.grounding-section textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-family:inherit;font-size:14px;resize:vertical;min-height:120px}.markdown-preview{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;background-color:#f9f9f9;font-size:14px;min-height:120px;max-height:300px;overflow-y:auto;line-height:1.5}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{margin:1em 0 .5em;color:#2c3e50}.markdown-preview h1{font-size:1.5em}.markdown-preview h2{font-size:1.3em}.markdown-preview h3{font-size:1.1em}.markdown-preview table{width:100%;border-collapse:collapse;margin:1em 0;font-size:13px}.markdown-preview th,.markdown-preview td{border:1px solid #ddd;padding:8px 12px;text-align:left}.markdown-preview th{background-color:#f5f5f5;font-weight:600}.markdown-preview ul,.markdown-preview ol{margin:.5em 0 .5em 1.5em}.markdown-preview li{margin:.2em 0}.markdown-preview p{margin:.5em 0}.markdown-preview strong{font-weight:600}.markdown-preview em{font-style:italic}.save-grounding-btn{margin-top:10px;padding:8px 16px;background-color:#fff;color:#333;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-weight:500}.save-grounding-btn:hover{border-color:#3498db;background-color:#f8f9fa}.controls-row{background:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.left-controls{display:flex;align-items:center;gap:30px}.model-dropdown label{display:block;margin-bottom:8px;font-weight:500}.model-dropdown select{width:200px;padding:8px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px}.gpt5-controls{display:flex;gap:20px;align-items:center}.gpt5-control{display:flex;flex-direction:column;gap:4px}.gpt5-control label{font-weight:500;font-size:12px;color:#666}.gpt5-control select{padding:6px 8px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:12px;min-width:80px}.clear-btn{padding:8px 16px;background-color:#fff;color:#e74c3c;border:1px solid #e74c3c;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}.clear-btn:hover{background-color:#fdf2f2;border-color:#c0392b;color:#c0392b}.chat-section{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.messages{height:400px;overflow-y:auto;padding:20px;border-bottom:1px solid #eee}.message{margin-bottom:15px;padding:10px;border-radius:8px;position:relative;display:flex;align-items:flex-start;gap:8px}.message-content{flex:1}.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6{margin:.5em 0 .3em;font-weight:600}.message-content h1{font-size:1.4em}.message-content h2{font-size:1.3em}.message-content h3{font-size:1.2em}.message-content h4{font-size:1.1em}.message-content h5{font-size:1.05em}.message-content h6{font-size:1em}.message-content p{margin:.5em 0;line-height:1.4}.message-content ul,.message-content ol{margin:.5em 0 .5em 1.2em;padding-left:0}.message-content li{margin:.2em 0;line-height:1.4}.message-content code{background-color:#0000001a;padding:.1em .3em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}.message.user .message-content code{background-color:#fff3}.message-content pre{background-color:#0000000d;padding:.8em;border-radius:4px;overflow-x:auto;margin:.5em 0}.message.user .message-content pre{background-color:#ffffff1a}.message-content pre code{background-color:transparent;padding:0}.message-content blockquote{border-left:3px solid rgba(0,0,0,.2);margin:.5em 0;padding-left:1em;font-style:italic}.message.user .message-content blockquote{border-left-color:#fff6}.message-content table{border-collapse:collapse;margin:.5em 0;width:100%;font-size:.9em}.message-content th,.message-content td{border:1px solid rgba(0,0,0,.2);padding:.4em .6em;text-align:left}.message.user .message-content th,.message.user .message-content td{border-color:#ffffff4d}.message-content th{background-color:#0000000d;font-weight:600}.message.user .message-content th{background-color:#ffffff1a}.message-content strong{font-weight:600}.message-content em{font-style:italic}.message-content a{color:inherit;text-decoration:underline}.message-content a:hover{text-decoration:none}.copy-button{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:4px;opacity:0;transition:opacity .2s ease;flex-shrink:0}.message:hover .copy-button{opacity:.7}.copy-button:hover{opacity:1!important;background-color:#0000001a}.message.user{background-color:#3498db;color:#fff;margin-left:20%}.message.assistant{background-color:#ecf0f1;color:#2c3e50;margin-right:20%}.message.system{background-color:#f8f9fa;color:#6c757d;font-size:.9em;text-align:center;margin:0 10%}.input-section{padding:20px;display:flex;gap:10px}.input-section input{flex:1;padding:10px;border:1px solid #ddd;border-radius:4px}.input-section button{padding:10px 20px;background-color:#27ae60;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.input-section button:hover:not(:disabled){background-color:#229954}.input-section button:disabled{background-color:#bdc3c7;cursor:not-allowed}.loading{text-align:center;color:#7f8c8d;font-style:italic}.loading-message{display:flex;align-items:center;gap:10px}.spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-info{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}.loading-model{font-weight:500;color:#2c3e50}.loading-tokens{color:#7f8c8d}.copy-notification{position:fixed;top:20px;right:20px;background-color:#27ae60;color:#fff;padding:12px 16px;border-radius:4px;font-size:14px;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}