:root{--bg-base: #181818;--bg-surface: #222222;--bg-surface-hover: #2a2a2a;--bg-surface-active: #333333;--border-color: #333333;--border-focus: #444444;--text-main: #ffffff;--text-muted: #a0a0a0;--text-dim: #666666;--accent-color: #ea580c;--accent-hover: #c2410c;--accent-text: #ffffff;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace;--header-height: 56px;--footer-height: 58px;--sidebar-width: 280px;--footer-padding: 12px 16px 16px;--control-height: 44px}[data-theme=light]{--bg-base: #f4f4f4;--bg-surface: #ffffff;--bg-surface-hover: #eaeaea;--bg-surface-active: #e0e0e0;--border-color: #e0e0e0;--border-focus: #cccccc;--text-main: #111111;--text-muted: #555555;--text-dim: #888888;--accent-color: #8b5cf6;--accent-hover: #7c3aed;--accent-text: #ffffff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-base);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh;width:100vw}#root{display:flex;height:100vh;width:100vw;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit;border-radius:var(--radius-md);box-sizing:border-box}button{cursor:pointer;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.01em;border-radius:var(--radius-lg);box-sizing:border-box;user-select:none;-webkit-font-smoothing:antialiased;position:relative;overflow:hidden;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease}button:active:not(:disabled){transform:scale(.985)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-color),white 18%) 0%,var(--accent-color) 100%);color:var(--accent-text, #ffffff);border:1px solid color-mix(in srgb,var(--accent-color),black 15%);box-shadow:inset 0 1px color-mix(in srgb,var(--accent-color),white 35%),0 1px 2px #00000026;padding:0 14px}.btn-primary:hover:not(:disabled),.btn-primary[data-active]{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-color),white 25%) 0%,var(--accent-hover) 100%);border-color:color-mix(in srgb,var(--accent-hover),black 22%);box-shadow:inset 0 1px color-mix(in srgb,var(--accent-color),white 45%),0 2px 4px #00000038}.btn-secondary{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-surface-hover),white 6%) 0%,var(--bg-surface-active) 100%);color:var(--text-main);border:1px solid var(--border-color);box-shadow:inset 0 1px #ffffff1f,0 1px 2px #00000014;padding:0 14px}[data-theme=light] .btn-secondary{box-shadow:inset 0 1px #ffffffb3,0 1px 2px #0000000d}.btn-secondary:hover:not(:disabled),.btn-secondary[data-active]{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-surface-hover),white 12%) 0%,var(--bg-surface-hover) 100%);border-color:var(--border-focus);box-shadow:inset 0 1px #ffffff2e,0 2px 4px #0000001f}[data-theme=light] .btn-secondary:hover:not(:disabled),[data-theme=light] .btn-secondary[data-active]{box-shadow:inset 0 1px #ffffffd9,0 2px 4px #00000014}.btn-icon{height:36px;min-width:36px;padding:0 8px;border-radius:var(--radius-lg);border:1px solid transparent;background-color:transparent;color:var(--text-muted)}.btn-icon:hover:not(:disabled),.btn-icon[data-active]{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-surface-hover),white 6%) 0%,var(--bg-surface-hover) 100%);color:var(--text-main);border-color:var(--border-color);box-shadow:inset 0 1px #ffffff1a}.btn-danger{background:linear-gradient(180deg,color-mix(in srgb,#e81403,white 20%),#e81403);color:#fff;border:1px solid color-mix(in srgb,#e81403,black 15%);box-shadow:inset 0 1px color-mix(in srgb,#e81403,white 40%),0 1px 2px #00000026;padding:0 14px}.btn-danger:hover:not(:disabled),.btn-danger[data-active]{background:linear-gradient(180deg,color-mix(in srgb,#e81403,white 30%),#c01102);border-color:color-mix(in srgb,#c01102,black 20%);box-shadow:inset 0 1px color-mix(in srgb,#e81403,white 50%),0 2px 4px #00000040}button[data-focus-visible],.btn-primary[data-focus-visible],.btn-secondary[data-focus-visible],.btn-icon[data-focus-visible]{outline:2px solid var(--accent-color);outline-offset:2px}@keyframes text-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.reasoning-shimmer{background:linear-gradient(90deg,var(--text-muted) 0%,var(--accent-color) 50%,var(--text-muted) 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer 2s infinite linear;font-weight:500}.modal-overlay{position:fixed;inset:0;background-color:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;backdrop-filter:blur(2px)}.modal-content{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 10px 25px #0006}.settings-modal-content{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:860px;height:600px;max-height:85vh;display:grid;grid-template-columns:220px 1fr;box-shadow:0 16px 36px #00000080;overflow:hidden}.settings-sidebar{background-color:var(--bg-base);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:16px 12px;gap:16px;user-select:none;overflow-y:auto}.settings-sidebar-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);padding:4px 8px}.settings-nav-list{display:flex;flex-direction:column;gap:2px}.settings-nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-muted);border-radius:var(--radius-md);background:transparent;border:none;width:100%;justify-content:flex-start;transition:background-color .12s ease,color .12s ease}.settings-nav-item:hover{background-color:var(--bg-surface-hover);color:var(--text-main)}.settings-nav-item.active{background-color:var(--bg-surface-active);color:var(--text-main);font-weight:600}.settings-main{display:flex;flex-direction:column;height:100%;min-width:0;background-color:var(--bg-surface);overflow:hidden}.settings-header{padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.settings-header-title{font-size:16px;font-weight:600;color:var(--text-main);display:flex;align-items:center;gap:8px}.settings-body{padding:24px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:20px}.settings-footer{padding:14px 24px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-base);flex-shrink:0}.custom-color-picker{display:flex;align-items:center;gap:10px;margin-top:8px}.color-swatch-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:38px;height:38px;border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;padding:0;background:none}.color-swatch-input::-webkit-color-swatch-wrapper{padding:2px}.color-swatch-input::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-swatch-input::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.modal-header{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.modal-footer{padding:14px 20px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:10px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:500;color:var(--text-muted)}.form-input,.form-select,.form-textarea{background-color:var(--bg-base);border:1px solid var(--border-color);color:var(--text-main);padding:8px 12px;outline:none;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-color)}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.form-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:11px;font-family:var(--font-mono);border-radius:var(--radius-sm);background-color:var(--bg-surface-active);border:1px solid var(--border-color);color:var(--text-muted)}.badge-accent{background-color:#f9731626;border-color:var(--accent-color);color:var(--accent-color)}.app-container{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:100vh;width:100vw;height:100vh;overflow:hidden;position:relative;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.app-container.app-loaded{opacity:1;pointer-events:auto}body.app-fading-out,.app-container.app-fading-out{opacity:0!important;pointer-events:none!important;transition:opacity .25s cubic-bezier(.4,0,.2,1)!important}.app-container.sidebar-closed{grid-template-columns:0px 1fr}.sidebar-container{display:grid;grid-template-rows:var(--header-height) auto 1fr var(--footer-height);width:var(--sidebar-width);height:100%;background-color:var(--bg-surface);border-right:1px solid var(--border-color);flex-shrink:0;z-index:90;box-sizing:border-box;overflow:hidden}.sidebar-header{height:var(--header-height);padding:0 12px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:8px;box-sizing:border-box}.sidebar-search{padding:10px 12px;border-bottom:1px solid var(--border-color);box-sizing:border-box}.sidebar-chat-list{overflow-y:auto;padding:8px;min-height:0;box-sizing:border-box}.sidebar-footer{height:var(--footer-height);min-height:var(--footer-height);padding:9px 14px 10px;border-top:1px solid var(--border-color);background-color:var(--bg-base);display:flex;align-items:center;gap:8px;box-sizing:border-box}.main-layout{display:grid;grid-template-rows:var(--header-height) 1fr;height:100%;min-width:0;overflow:hidden;box-sizing:border-box}.main-header{height:var(--header-height);border-bottom:1px solid var(--border-color);background-color:var(--bg-surface);display:flex;align-items:center;justify-content:space-between;padding:0;box-sizing:border-box;z-index:40}.chat-area-container{display:grid;grid-template-rows:1fr auto;height:100%;min-height:0;min-width:0;position:relative;overflow:hidden;box-sizing:border-box}.chat-messages-scroll{overflow-y:auto;min-height:0}.chat-footer{height:auto;min-height:var(--footer-height);border-top:1px solid var(--border-color);background-color:var(--bg-base);padding:9px 14px 10px;display:flex;align-items:center;gap:10px;position:relative;box-sizing:border-box}.chat-textarea{flex:1;border:none;outline:none;background-color:transparent;padding:8px 0;margin:0;resize:none;height:38px;min-height:38px;max-height:180px;line-height:22px;font-size:14px;font-family:inherit;color:var(--text-main);overflow-x:hidden;overflow-y:auto;box-sizing:border-box;appearance:none;-webkit-appearance:none}@media(max-width:768px){.app-container{grid-template-columns:1fr!important}.sidebar-mobile-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:100!important;border-right:none!important}.header-model-text{max-width:100px!important;font-size:11px!important}.header-options-btn-text{display:none!important}.modal-content{max-height:95vh;border-radius:0}.settings-modal-content{grid-template-columns:1fr;grid-template-rows:auto 1fr;max-height:95vh;height:95vh;border-radius:0}.settings-sidebar{border-right:none;border-bottom:1px solid var(--border-color);padding:10px 12px;flex-direction:row;align-items:center;overflow-x:auto;gap:8px}.settings-sidebar-header{display:none}.settings-nav-list{flex-direction:row}}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-surface-active);border-radius:var(--radius-sm);outline:none;margin:6px 0;cursor:pointer;transition:background .15s ease}input[type=range]:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);border:2px solid var(--bg-surface);box-shadow:0 1px 3px #0000004d;cursor:pointer;transition:transform .12s ease,background-color .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-webkit-slider-thumb:active{transform:scale(.95)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color);border:2px solid var(--bg-surface);box-shadow:0 1px 3px #0000004d;cursor:pointer;transition:transform .12s ease,background-color .15s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.15)}.toggle-switch-group{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--radius-md);background-color:var(--bg-base);border:1px solid var(--border-color);transition:border-color .15s ease,background-color .15s ease}.toggle-switch-group:hover{border-color:var(--border-focus)}.toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background-color:var(--bg-surface-active);border:1px solid var(--border-color);border-radius:12px;transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s ease}.toggle-slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;bottom:3px;background-color:var(--text-muted);border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1),background-color .2s ease}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent-color);border-color:var(--accent-hover)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(16px);background-color:#fff}.toggle-switch input:focus-visible+.toggle-slider{outline:2px solid var(--accent-color);outline-offset:2px}.api-options-popover{width:440px;max-width:92vw;max-height:540px;background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 16px 36px #00000073;z-index:100;display:flex;flex-direction:column;overflow:hidden}.api-options-header{padding:12px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-base)}.api-options-body{padding:16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px}.api-options-footer{padding:10px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-base);display:flex;align-items:center;justify-content:space-between}.param-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-color);margin-bottom:8px;display:flex;align-items:center;gap:6px}.model-select-item{position:relative}.model-select-item .model-fav-btn{opacity:0;transition:opacity .15s ease,transform .12s ease}.model-select-item:hover .model-fav-btn,.model-select-item .model-fav-btn.is-favorite{opacity:1}.model-fav-btn:hover{transform:scale(1.15)}.esc-close-notice{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 14px;background-color:var(--bg-surface-active);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-main);font-size:13px;font-weight:500;box-shadow:0 4px 12px #00000040;pointer-events:none;animation:escNoticeFadeIn .15s ease-out}@keyframes escNoticeFadeIn{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.esc-key-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:1;background-color:var(--bg-base);border:1px solid var(--border-focus);border-radius:var(--radius-sm);color:var(--accent-color)}