:root{--bg-color:#0f172a;--surface-color:#1e293b;--primary-color:#3b82f6;--primary-hover:#2563eb;--text-primary:#f8fafc;--text-secondary:#94a3b8;--border-color:#334155;--user-msg-bg:#3b82f6;--bot-msg-bg:#334155;--accent:#10b981;--sidebar-width:320px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);flex-direction:column;height:100vh;font-family:Inter,sans-serif;display:flex}.top-global-banner{color:#fff;text-align:center;letter-spacing:.5px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);flex-shrink:0;width:100%;padding:10px 0;font-size:.95rem;font-weight:600;text-decoration:none;transition:opacity .2s;display:block}.top-global-banner:hover{opacity:.9}.layout-wrapper{flex:1;gap:20px;width:100%;max-width:1200px;min-height:0;margin:0 auto;padding:20px;display:flex}.sidebar{width:var(--sidebar-width);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.sidebar-header{border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);padding:20px}.sidebar-header h2{color:var(--text-primary);font-size:1.1rem;font-weight:600}.sidebar-content{flex-direction:column;gap:24px;padding:20px;display:flex;overflow-y:auto}.setting-group{flex-direction:column;gap:8px;display:flex}.setting-group .label-row{justify-content:space-between;align-items:center;display:flex}.setting-group label{color:var(--text-primary);font-size:.9rem;font-weight:500}.setting-group span{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.85rem}.setting-group small{color:var(--text-secondary);font-size:.75rem}.template-select{background-color:var(--bg-color);border:1px solid var(--border-color);width:100%;color:var(--text-primary);appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill=\"white\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>");background-position:98%;background-repeat:no-repeat;border-radius:8px;outline:none;padding:8px;font-family:inherit;font-size:.85rem;transition:border-color .2s}.template-select:focus{border-color:var(--primary-color)}.template-actions{gap:8px;margin-top:4px;display:flex}.action-btn{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px 10px;font-size:.9rem;transition:all .2s;display:flex}.action-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.action-btn.delete-btn{background-color:#ef4444}.action-btn.delete-btn:hover{background-color:#dc2626}textarea{background-color:var(--bg-color);border:1px solid var(--border-color);width:100%;color:var(--text-primary);resize:vertical;border-radius:8px;outline:none;padding:10px;font-family:inherit;font-size:.85rem;transition:border-color .2s}textarea:focus{border-color:var(--primary-color)}input[type=range]{width:100%;accent-color:var(--primary-color)}.modal{-webkit-backdrop-filter:blur(4px);z-index:2000;background-color:#0f172abf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;width:400px;max-width:90%;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000000a}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h3{font-size:1.1rem;font-weight:600}.close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;line-height:1}.close-btn:hover{color:var(--text-primary)}.modal-body{padding:20px}.modal-input{background-color:var(--bg-color);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:8px;outline:none;margin-top:6px;padding:10px;font-family:inherit;font-size:.9rem;transition:border-color .2s}.modal-input:focus{border-color:var(--primary-color)}.modal-footer{border-top:1px solid var(--border-color);justify-content:flex-end;gap:12px;padding:16px 20px;display:flex}.secondary-btn{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background-color:#0000;border-radius:8px;padding:8px 16px;font-size:.9rem;transition:all .2s}.secondary-btn:hover{background-color:#ffffff0d}.primary-btn{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:.9rem;transition:all .2s}.primary-btn:hover{background-color:var(--primary-hover)}.app-container{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}header{border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);justify-content:space-between;align-items:center;padding:20px;display:flex}header h1{letter-spacing:.5px;background:-webkit-linear-gradient(#60a5fa,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.25rem;font-weight:600}.status-badge{color:#fbbf24;background-color:#f59e0b33;border:1px solid #f59e0b4d;border-radius:9999px;padding:6px 12px;font-size:.85rem;transition:all .3s}.status-badge.ready{color:var(--accent);background-color:#10b98133;border-color:#10b9814d}.status-badge.loading{color:#60a5fa;background-color:#3b82f633;border-color:#3b82f64d;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.chat-container{scroll-behavior:smooth;flex-direction:column;flex:1;gap:20px;padding:24px;display:flex;overflow-y:auto}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:10px}.message{opacity:0;gap:12px;max-width:85%;animation:.3s ease-out forwards slideIn;display:flex;transform:translateY(10px)}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.message.user-message{flex-direction:row-reverse;align-self:flex-end}.message.bot-message{align-self:flex-start}.message.system-message{align-self:center;max-width:90%}.avatar{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;display:flex}.user-message .avatar{background-color:var(--primary-color);border-color:var(--primary-hover)}.content{word-wrap:break-word;border-radius:18px;padding:14px 18px;font-size:.95rem;line-height:1.5}.user-message .content{background-color:var(--user-msg-bg);color:#fff;border-top-right-radius:4px}.bot-message .content{background-color:var(--bot-msg-bg);color:var(--text-primary);border-top-left-radius:4px}.system-message .content{color:var(--text-secondary);border:1px dashed var(--border-color);background-color:#0000;font-size:.85rem;font-style:italic}.thinking{color:var(--text-secondary);border-left:2px solid var(--accent);background-color:#ffffff05;border-radius:4px;margin-bottom:10px;padding:10px;font-size:.85rem;font-style:italic}.input-area{border-top:1px solid var(--border-color);background-color:var(--surface-color);flex-direction:column;gap:10px;padding:16px;display:flex}#image-preview-container{border:2px solid var(--border-color);border-radius:8px;width:80px;height:80px;position:relative;overflow:hidden}#image-preview-container.hidden{display:none}#image-preview{object-fit:cover;width:100%;height:100%}#remove-image-btn{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;display:flex;position:absolute;top:4px;right:4px}#remove-image-btn:hover{background:#ef4444cc}.hidden{display:none!important}form{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:12px;padding:8px;transition:border-color .3s;display:flex}form:focus-within{border-color:var(--primary-color)}.upload-btn{color:var(--text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.upload-btn:hover{color:var(--primary-color);background-color:#3b82f61a}input[type=file]{display:none}input[type=text]{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;padding:8px 4px;font-family:inherit;font-size:1rem}input[type=text]::placeholder{color:var(--text-secondary)}input[type=text]:disabled,.upload-btn[disabled]{opacity:.5;cursor:not-allowed}button[type=submit]{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}button[type=submit]:hover:not(:disabled){background-color:var(--primary-hover);transform:scale(1.05)}button[type=submit]:disabled{background-color:var(--border-color);color:var(--text-secondary);cursor:not-allowed}.chat-image{border-radius:8px;max-width:100%;margin-bottom:8px;display:block}.markdown-body{color:inherit;background:0 0}.markdown-body pre{background-color:#0d1117;border-radius:6px;margin:12px 0;padding:16px;overflow:auto}.markdown-body code{background-color:#6e768166;border-radius:4px;padding:2px 6px;font-family:Courier New,Courier,monospace;font-size:85%}.markdown-body pre code{background-color:#0000;padding:0}.switch{width:36px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--border-color);transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;width:14px;height:14px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.recording{animation:1.5s infinite pulse-red;color:#ef4444!important}@keyframes pulse-red{0%{transform:scale(1);box-shadow:0 0 #ef444466}50%{transform:scale(1.1);box-shadow:0 0 0 8px #ef444400}to{transform:scale(1);box-shadow:0 0 #ef444400}}@media (width<=768px){.layout-wrapper{flex-direction:column;height:100vh;padding:10px}.sidebar{width:100%;height:auto;max-height:250px}}#preview-container{border:1px solid var(--border-color);background-color:#0f172a99;border-radius:12px;margin-bottom:4px;padding:12px;transition:all .3s}#preview-list{scroll-behavior:smooth;gap:12px;padding-bottom:4px;display:flex;overflow-x:auto}#preview-list::-webkit-scrollbar{height:4px}#preview-list::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}.preview-card{border:2px solid var(--border-color);background-color:#0b0f19;border-radius:10px;flex-shrink:0;width:90px;height:90px;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000004d}.preview-card:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 8px 12px -2px #0006}.preview-card img,.preview-card video{object-fit:cover;width:100%;height:100%}.preview-card .remove-btn{width:20px;height:20px;color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;z-index:10;background:#0f172ad9;border-radius:50%;justify-content:center;align-items:center;font-size:10px;transition:all .2s;display:flex;position:absolute;top:4px;right:4px}.preview-card .remove-btn:hover{color:#fff;background:#ef4444;border-color:#ef4444;transform:scale(1.1)}.preview-card .type-badge{border:1px solid var(--border-color);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;z-index:9;background:#0f172ad9;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:600;position:absolute;bottom:4px;left:4px}.preview-card.type-image .type-badge{color:#60a5fa}.preview-card.type-video .type-badge{color:#f59e0b}.preview-card .extract-overlay{z-index:8;background:#0f172ae6;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0}.preview-card .extract-spinner{border:2px solid #3b82f633;border-top:2px solid var(--primary-color);border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}.preview-card .extract-text{color:var(--text-secondary);text-align:center;padding:0 4px;font-size:.65rem;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-container{position:relative}.drag-overlay{-webkit-backdrop-filter:blur(12px);z-index:1000;pointer-events:none;background:#0f172ad9;border-radius:16px;justify-content:center;align-items:center;animation:.25s ease-out forwards fadeIn;display:flex;position:absolute;inset:0}.drag-overlay-content{color:var(--text-primary);text-align:center;background:#1e293b66;border:2px dashed #3b82f680;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:40px;animation:.3s cubic-bezier(.34,1.56,.64,1) forwards scaleUp;display:flex;transform:scale(.95)}.drag-icon{color:var(--primary-color);animation:2s infinite bounce}.drag-overlay h3{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:600}.drag-overlay p{color:var(--text-secondary);font-size:.95rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.chat-video{border:1px solid var(--border-color);background-color:#000;border-radius:10px;max-width:100%;max-height:240px;margin-bottom:8px;display:block;box-shadow:0 4px 6px -1px #0003}.chat-media-container{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.chat-media-container .chat-image{object-fit:contain;border:1px solid var(--border-color);cursor:pointer;border-radius:8px;width:auto;max-height:180px;transition:transform .2s;box-shadow:0 4px 6px -1px #0003}.chat-media-container .chat-image:hover{transform:scale(1.02)}.benchmark-stats{font-variant-numeric:tabular-nums;color:var(--text-secondary);letter-spacing:.2px;background:#10b98114;border:1px solid #10b9812e;border-radius:8px;margin-top:10px;padding:6px 12px;font-family:Inter,sans-serif;font-size:.78rem}.response-timer{font-variant-numeric:tabular-nums;border-radius:6px;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;font-family:SF Mono,Fira Code,Courier New,monospace;font-size:.78rem;transition:all .3s;display:inline-flex}.response-timer.running{color:#fbbf24;background:#f59e0b14;border:1px solid #f59e0b26}.response-timer.done{color:var(--accent);background:#10b98114;border:1px solid #10b98126}.timer-dot{background-color:#fbbf24;border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite timer-pulse;display:inline-block}@keyframes timer-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}.response-timer.done .timer-dot{display:none}.timer-value{letter-spacing:.5px}.debug-panel{background:#f59e0b0f;border:1px solid #f59e0b40;border-radius:8px;margin-top:10px;font-size:.8rem;overflow:hidden}.debug-panel summary{cursor:pointer;color:#fbbf24;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:8px 12px;font-weight:600;list-style:none;display:flex}.debug-panel summary::-webkit-details-marker{display:none}.debug-panel summary:before{content:"▶";font-size:.65rem;transition:transform .2s}.debug-panel[open] summary:before{transform:rotate(90deg)}.debug-panel .debug-section{color:var(--text-secondary);border-top:1px solid #f59e0b1f;padding:8px 12px}.debug-panel .debug-section strong{color:var(--text-primary);margin-bottom:4px;font-size:.75rem;display:block}.debug-panel .debug-section pre{white-space:pre-wrap;word-break:break-all;max-height:300px;color:var(--text-primary);background:#0000004d;border-radius:6px;margin:0;padding:8px;font-family:Courier New,Courier,monospace;font-size:.72rem;overflow-y:auto}.debug-panel .debug-section pre::-webkit-scrollbar{width:4px}.debug-panel .debug-section pre::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}