:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--bg-quaternary: #f1f3f4;--bg-title: #2f66df;--text-primary: #212529;--text-secondary: #6c757d;--text-tertiary: #868e96;--text-inverse: #ffffff;--border-color: #dee2e6;--border-light: #f1f3f4;--border-dark: #adb5bd;--button-bg: #007bff;--button-hover: #0056b3;--button-active: #004085;--button-text: #ffffff;--button-secondary-bg: #6c757d;--button-secondary-hover: #545b62;--message-user-bg: #e3f2fd;--message-user-border: #bbdefb;--message-system-bg: #f3e5f5;--message-system-border: #e1bee7;--input-bg: #ffffff;--input-border: #ced4da;--input-focus: #80bdff;--input-placeholder: #6c757d;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--success-bg: #d4edda;--success-text: #155724;--success-border: #c3e6cb;--warning-bg: #fff3cd;--warning-text: #856404;--warning-border: #ffeaa7;--error-bg: #f8d7da;--error-text: #721c24;--error-border: #f5c6cb;--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--bg-quaternary: #333333;--bg-title: #000000;--text-primary: #ffffff;--text-secondary: #b0b0b0;--text-tertiary: #8a8a8a;--text-inverse: #000000;--border-color: #555555;--border-light: #666666;--border-dark: #444444;--button-bg: #0d6efd;--button-hover: #0b5ed7;--button-active: #0a58ca;--button-text: #ffffff;--button-secondary-bg: #6c757d;--button-secondary-hover: #5c636a;--message-user-bg: #1e3a5f;--message-user-border: #2c5282;--message-system-bg: #781a1f;--message-system-border: #553c9a;--input-bg: #2d2d2d;--input-border: #555555;--input-focus: #4dabf7;--input-placeholder: #8a8a8a;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);--shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5);--success-bg: #1e4d2b;--success-text: #75dd88;--success-border: #2d5a3d;--warning-bg: #664d03;--warning-text: #ffda6a;--warning-border: #7a5c0f;--error-bg: #58151c;--error-text: #f1aeb5;--error-border: #6f2232}*,*:before,*:after{transition:background-color var(--transition-normal),color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}button,.button{transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}input,textarea,select{transition:background-color var(--transition-normal),color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-fast)}.card,.container,.panel{transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-contrast: high){:root{--border-color: #000000;--text-secondary: #000000}[data-theme=dark]{--border-color: #ffffff;--text-secondary: #ffffff}}@media (prefers-color-scheme: dark){:root:not([data-theme]){--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--bg-quaternary: #333333;--text-primary: #ffffff;--text-secondary: #b0b0b0;--text-tertiary: #8a8a8a;--text-inverse: #000000;--border-color: #555555;--border-light: #666666;--border-dark: #444444;--button-bg: #0d6efd;--button-hover: #0b5ed7;--button-active: #0a58ca;--button-text: #ffffff;--button-secondary-bg: #6c757d;--button-secondary-hover: #5c636a;--message-user-bg: #1e3a5f;--message-user-border: #2c5282;--message-system-bg: #3d1a78;--message-system-border: #553c9a;--input-bg: #2d2d2d;--input-border: #555555;--input-focus: #4dabf7;--input-placeholder: #8a8a8a;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);--shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5);--success-bg: #1e4d2b;--success-text: #75dd88;--success-border: #2d5a3d;--warning-bg: #664d03;--warning-text: #ffda6a;--warning-border: #7a5c0f;--error-bg: #58151c;--error-text: #f1aeb5;--error-border: #6f2232}}html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary)}#root{height:100%;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.api-key-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:2px solid;border-radius:.5rem;background:transparent;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative}.api-key-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.api-key-button:active{transform:translateY(0)}.api-key-button__icon{font-size:1rem}.api-key-button__text{font-family:inherit}.api-key-button__indicator{font-size:.75rem;margin-left:.25rem}.api-key-button--unset{border-color:#ef4444;color:#ef4444}.api-key-button--unset:hover{background-color:#ef4444;color:#fff}.api-key-button--set{border-color:#10b981;color:#10b981}.api-key-button--set:hover{background-color:#10b981;color:#fff}.api-key-button--set .api-key-button__indicator{color:#10b981}.api-key-button--set:hover .api-key-button__indicator{color:#fff}@media (prefers-color-scheme: dark){.api-key-button:hover{box-shadow:0 4px 8px #ffffff1a}}@media (max-width: 768px){.api-key-button{padding:.375rem .75rem;font-size:.75rem}.api-key-button__text{display:none}.api-key-button__icon{font-size:1.125rem}}.api-key-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.api-key-modal{background-color:#fff;border-radius:12px;box-shadow:0 10px 25px #0003;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideIn .3s ease-out}.api-key-modal-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb}.api-key-modal-title{margin:0;font-size:1.5rem;font-weight:600;color:#1f2937}.api-key-modal-body{padding:24px}.api-key-modal-description{margin:0 0 20px;color:#6b7280;line-height:1.5}.api-key-form-group{margin-bottom:20px}.api-key-form-label{display:block;margin-bottom:8px;font-weight:500;color:#374151}.api-key-input{width:100%;padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s ease;box-sizing:border-box}.api-key-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.api-key-input.error{border-color:#ef4444}.api-key-input.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.api-key-error-message{margin-top:8px;color:#ef4444;font-size:14px}.api-key-security-notice{background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;padding:16px;margin-bottom:20px}.api-key-security-notice-title{font-weight:600;color:#374151;margin:0 0 8px;font-size:14px}.api-key-security-notice-text{color:#6b7280;font-size:14px;margin:0;line-height:1.4}.api-key-modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end}.api-key-button{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.api-key-button:disabled{opacity:.6;cursor:not-allowed}.api-key-button-secondary{background-color:#f9fafb;color:#374151;border:1px solid #d1d5db}.api-key-button-secondary:hover:not(:disabled){background-color:#f3f4f6}.api-key-button-danger{background-color:#ef4444;color:#fff}.api-key-button-danger:hover:not(:disabled){background-color:#dc2626}.api-key-button-primary{background-color:#3b82f6;color:#fff}.api-key-button-primary:hover:not(:disabled){background-color:#2563eb}.api-key-current-key{background-color:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:12px;margin-bottom:16px}.api-key-current-key-label{font-size:14px;font-weight:500;color:#0369a1;margin:0 0 4px}.api-key-current-key-value{font-family:Courier New,monospace;font-size:14px;color:#0c4a6e;word-break:break-all;margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 640px){.api-key-modal{margin:16px;width:calc(100% - 32px)}.api-key-modal-header,.api-key-modal-body,.api-key-modal-footer{padding-left:16px;padding-right:16px}.api-key-modal-footer{flex-direction:column}.api-key-button{width:100%}}.chat-area{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--bg-secondary)}.messages-container{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}.messages-container::-webkit-scrollbar-thumb{background-color:var(--border-dark);border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background-color:var(--text-secondary)}.empty-chat{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-style:italic}.message{max-width:70%;padding:.75rem 1rem;border-radius:1.25rem;position:relative;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000001a;margin-bottom:.25rem}.message:hover{transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.message.user{align-self:flex-end;background:linear-gradient(135deg,var(--message-user-bg) 0%,var(--message-user-border) 100%);border-bottom-right-radius:.25rem;color:var(--text-primary)}.message.system{align-self:flex-start;background:linear-gradient(135deg,var(--message-system-bg) 0%,var(--message-system-border) 100%);border-bottom-left-radius:.25rem;color:var(--text-primary)}.message.gemini{align-self:flex-start;background:linear-gradient(135deg,var(--message-system-bg) 0%,var(--message-system-border) 100%);border-bottom-left-radius:.25rem;color:var(--text-primary);border-left:3px solid #28a745}.message.error{background:linear-gradient(135deg,#f8d7da,#f5c6cb)!important;border-left:3px solid #dc3545!important;color:#721c24!important}.message-content{margin-bottom:.5rem;word-wrap:break-word;line-height:1.4}.message-timestamp{font-size:.7rem;opacity:.7;text-align:right;font-weight:500;letter-spacing:.02em}.message.user .message-timestamp{color:var(--text-secondary);text-align:right}.message.system .message-timestamp,.message.gemini .message-timestamp{color:var(--text-secondary);text-align:left}.message.error .message-timestamp{color:#721c24;text-align:left}.input-area{display:flex;flex-direction:column;padding:1rem;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.input-container{display:flex;gap:.5rem;align-items:flex-end}.message-input{flex:1;padding:.75rem;border:1px solid var(--input-border);border-radius:.5rem;resize:none;font-family:inherit;font-size:1rem;line-height:1.4;min-height:2.5rem;max-height:8rem;transition:border-color .2s ease;background-color:var(--input-bg);color:var(--text-primary)}.message-input:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 2px #2196f31a}.message-input:disabled{background-color:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed}.send-button{padding:.75rem 1.5rem;background-color:var(--button-bg);color:var(--button-text);border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;font-weight:500;transition:background-color .2s ease;white-space:nowrap}.send-button:hover:not(:disabled){background-color:var(--button-hover)}.send-button:disabled{background-color:var(--button-secondary-bg);cursor:not-allowed}.main-content{display:grid;grid-template-columns:calc(var(--split-ratio) * 100%) 8px calc((1 - var(--split-ratio)) * 100%);height:100%;width:100%;overflow:hidden;position:relative}@media (min-width: 1024px){.main-content{grid-template-columns:calc(var(--split-ratio) * 100%) 8px calc((1 - var(--split-ratio)) * 100%)}}@media (max-width: 1023px) and (min-width: 768px){.main-content{grid-template-columns:calc(var(--split-ratio) * 100%) 8px calc((1 - var(--split-ratio)) * 100%)}}@media (max-width: 767px){.main-content{display:flex;flex-direction:column;grid-template-columns:none}}.main-content>:first-child{grid-column:1;overflow:hidden;border-right:1px solid var(--border-color);display:flex;flex-direction:column}.main-content>:nth-child(2){grid-column:2;background-color:var(--border-color);cursor:col-resize;position:relative;z-index:10}.main-content>:nth-child(3){grid-column:3;overflow:hidden;background-color:var(--bg-primary)}@media (max-width: 767px){.main-content>:first-child{flex:1;border-right:none;border-bottom:1px solid var(--border-color)}.main-content>:nth-child(2){display:none}.main-content>:nth-child(3){flex:0 0 auto;min-height:120px}}.main-content>*{min-width:0;min-height:0}.main-content>:nth-child(2):hover{background-color:var(--border-dark)}.main-content.dragging>:nth-child(2){background-color:var(--button-bg)}.resizable-handle{width:8px;background-color:var(--border-light);cursor:col-resize;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}.resizable-handle:hover,.resizable-handle:focus{background-color:var(--border-color);outline:none}.resizable-handle.dragging{background-color:var(--button-bg);box-shadow:0 0 8px #2196f380}.handle-indicator{display:flex;flex-direction:column;gap:2px;opacity:.6;transition:opacity .2s ease}.resizable-handle:hover .handle-indicator,.resizable-handle:focus .handle-indicator,.resizable-handle.dragging .handle-indicator{opacity:1}.handle-line{width:2px;height:12px;background-color:var(--text-secondary);border-radius:1px}.resizable-handle.dragging .handle-line{background-color:var(--text-inverse)}.resizable-handle:focus{box-shadow:inset 0 0 0 2px var(--button-bg)}body.dragging-resize{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.main-content.dragging{-webkit-user-select:none;user-select:none}.main-content.dragging *{pointer-events:none}.main-content.dragging .resizable-handle{pointer-events:auto}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0000004d;z-index:1001;opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.4,0,.2,1),visibility .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.settings-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.settings-panel{position:absolute;top:0;right:0;width:60%;height:100%;background-color:var(--bg-primary);box-shadow:var(--shadow-lg);transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--border-color)}.settings-overlay.visible .settings-panel{transform:translate(0)}.settings-content{flex:1;padding:2rem;display:flex;align-items:center;justify-content:center}.settings-content h2{margin:0;color:var(--text-primary);font-size:2rem;text-align:center}@media (max-width: 768px){.settings-panel{width:80%}}@media (max-width: 480px){.settings-panel{width:100%}}.settings-trigger{position:fixed;right:0;top:50%;transform:translateY(-50%);width:32px;height:64px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-right:none;border-radius:8px 0 0 8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1002;box-shadow:var(--shadow-sm);color:var(--text-primary)}.settings-trigger:hover{background-color:var(--message-user-bg);border-color:var(--button-bg);transform:translateY(-50%) translate(-2px);box-shadow:var(--shadow)}.settings-trigger.active{background-color:var(--button-bg);border-color:var(--button-hover);color:var(--button-text)}.settings-trigger.active:hover{background-color:var(--button-hover)}.arrow-icon{display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.settings-trigger:hover .arrow-icon{transform:translate(-1px)}.settings-trigger.active .arrow-icon{color:var(--button-text)}@media (max-width: 768px){.settings-trigger{width:28px;height:56px;right:0}.arrow-icon svg{width:14px;height:14px}}.settings-trigger:focus{outline:2px solid var(--button-bg);outline-offset:2px}.settings-trigger:focus:not(:focus-visible){outline:none}.settings-trigger:focus-visible{outline:2px solid var(--button-bg);outline-offset:2px}.theme-toggle{background-color:var(--button-bg);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;min-height:36px;min-width:60px;display:inline-flex;align-items:center;justify-content:center;gap:4px;outline:none;text-decoration:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.theme-toggle:hover{background-color:var(--button-hover);transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.theme-toggle:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a;transition-duration:.1s}.theme-toggle:focus{outline:2px solid var(--button-bg);outline-offset:2px}@media (prefers-contrast: high){.theme-toggle{border-width:2px}.theme-toggle:focus{outline-width:3px}}@media (prefers-reduced-motion: reduce){.theme-toggle{transition:none}.theme-toggle:hover,.theme-toggle:active{transform:none}}.theme-toggle__text{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1}[data-theme=dark] .theme-toggle{box-shadow:0 1px 3px #ffffff1a}[data-theme=dark] .theme-toggle:hover{box-shadow:0 2px 8px #fff3}[data-theme=light] .theme-toggle{box-shadow:0 1px 3px #0000001a}[data-theme=light] .theme-toggle:hover{box-shadow:0 2px 8px #00000026}@media (max-width: 768px){.theme-toggle{padding:6px 12px;font-size:13px;min-height:32px;min-width:50px}}@media (hover: none) and (pointer: coarse){.theme-toggle{min-height:44px;min-width:70px;padding:10px 18px}.theme-toggle:hover{transform:none;background-color:var(--button-bg)}}.App{text-align:center;height:100vh;display:flex;flex-direction:column;overflow:hidden}.App-header{background-color:var(--bg-title);padding:20px;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center;position:relative}.App-header h1{margin:0;font-size:2rem;flex:1}.header-controls{display:flex;align-items:center;gap:10px}.App-main{flex:1;display:flex;flex-direction:column;padding:0;width:100%;overflow:hidden;box-sizing:border-box}.input-section{padding:20px;height:100%;display:flex;flex-direction:column;background-color:var(--bg-primary)}.input-section h2{margin-top:0;color:var(--text-primary)}.input-container{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.text-input{padding:12px 16px;font-size:16px;border:2px solid var(--input-border);border-radius:4px;min-width:300px;flex:1;max-width:500px;background-color:var(--input-bg);color:var(--text-primary)}.text-input:focus{outline:none;border-color:var(--button-bg);box-shadow:0 0 0 2px #007bff40}.submit-button{padding:12px 24px;font-size:16px;background-color:var(--button-bg);color:var(--button-text);border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.submit-button:hover{background-color:var(--button-hover)}.submit-button:active{background-color:var(--button-active)}.message{max-width:80%;padding:8px 12px;border-radius:8px;margin:4px 0;word-wrap:break-word}.message.user{margin-left:auto;margin-right:0;background-color:var(--message-user-bg);text-align:right}.message.system{margin-left:0;margin-right:auto;background-color:var(--message-system-bg);text-align:left}.message-content{margin:0 0 4px;font-size:14px;line-height:1.4}.message-timestamp{font-size:11px;color:var(--text-secondary);opacity:.8}.divider-placeholder{background-color:var(--border-color);cursor:col-resize;position:relative}.divider-placeholder:hover{background-color:var(--border-dark)}.empty-state{color:var(--text-secondary);font-style:italic}.settings-area{position:fixed;top:0;right:0;width:auto;height:100vh;pointer-events:none;z-index:999}.settings-area>*{pointer-events:auto}@media (max-width: 768px){.App-main{padding:20px 10px}.input-container{flex-direction:column;align-items:stretch}.text-input{min-width:auto;width:100%}.submit-button{width:100%}}