@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root{--french-pass:#B9F2FF;--mercury:#E5E5E5;--ocean-green:#44998e;--lotus:#82393C;--white:#FFFFFF;--black:#040404;--bg-primary:#0a0a0a;--bg-secondary:#111111;--bg-tertiary:#1a1a1a;--bg-input:#1e1e1e;--border:#2a2a2a;--border-light:#333;--text-primary:#f0f0f0;--text-secondary:#999;--text-muted:#666;--ai-bubble:#2C2C2E;--ai-text:#E7EAED;--user-bubble:#007AFF;--user-text:#FFF;--danger:#ff4444;--success:#44998e;--sidebar-width:300px;--header-height:56px;--transition:.2s ease}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}
body.allow-scroll{overflow:auto;overflow-x:hidden}
a{color:var(--french-pass);text-decoration:none}a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;outline:none;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);padding:12px 16px;border-radius:10px;font-size:14px;transition:border-color var(--transition);width:100%}
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;border:none;background:none;border-radius:0;accent-color:var(--ocean-green)}
input:focus,textarea:focus,select:focus{border-color:var(--ocean-green)}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
::selection{background:var(--ocean-green);color:var(--white)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}
.btn{padding:13px 32px;border-radius:10px;font-size:15px;font-weight:600;transition:all var(--transition);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary{background:var(--ocean-green);color:var(--white)}.btn-primary:hover{background:#3d8a80;transform:translateY(-1px);text-decoration:none}
.btn-secondary{background:rgba(255,255,255,.08);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#444;text-decoration:none}
.btn-danger{background:var(--lotus);color:var(--white)}.btn-danger:hover{background:#6e2f32}
.btn-small{padding:8px 16px;font-size:13px;border-radius:8px}
.btn-full{width:100%;justify-content:center}
.welcome-page{display:flex;flex-direction:column;min-height:100vh;background-image:url('https://pliant.bot/img/background.png');background-size:cover;background-position:center;background-attachment:fixed;overflow:auto}
.welcome-overlay{flex:1;display:flex;align-items:center;justify-content:center;background:rgba(4,4,4,.85);backdrop-filter:blur(20px)}
.welcome-content{text-align:center;padding:60px 30px;max-width:520px}
.welcome-logo{width:100px;height:100px;border-radius:22px;margin-bottom:28px;box-shadow:0 8px 32px rgba(185,242,255,.15)}
.welcome-content h1{font-size:38px;font-weight:700;color:var(--french-pass);margin-bottom:12px;letter-spacing:-.5px}
.welcome-content p{color:var(--text-secondary);font-size:16px;margin-bottom:36px;line-height:1.6}
.welcome-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.app-container{display:flex;height:100vh;height:calc(var(--vh,1vh) * 100);width:100%;overflow:hidden}
.sidebar{width:var(--sidebar-width);height:100vh;height:calc(var(--vh,1vh) * 100);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform .25s ease,opacity .25s ease;position:fixed;left:0;top:0;z-index:100}
.sidebar.collapsed{transform:translateX(-100%);opacity:0;pointer-events:none}
.sidebar-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar-header .sidebar-logo{width:32px;height:32px;border-radius:8px}
.sidebar-header span{font-weight:600;font-size:16px;color:var(--french-pass);flex:1}
.sidebar-close{padding:6px;border-radius:6px;color:var(--text-secondary);transition:background var(--transition)}.sidebar-close:hover{background:var(--bg-tertiary)}
.sidebar-actions{padding:12px 12px 4px}
.sidebar-btn{width:100%;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--text-primary);display:flex;align-items:center;gap:10px;transition:background var(--transition);margin-bottom:4px}.sidebar-btn:hover{background:var(--bg-tertiary)}.sidebar-btn svg{width:18px;height:18px;opacity:.7}
.sidebar-search{padding:8px 12px;display:none}.sidebar-search.visible{display:block}
.sidebar-search input{padding:10px 14px;border-radius:8px;font-size:13px;background:var(--bg-tertiary)}
.chat-history-label{padding:10px 16px 6px;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.8px}
.chat-list{flex:1;overflow-y:auto;padding:4px 8px}
.chat-item{display:flex;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background var(--transition);margin-bottom:2px;gap:8px}.chat-item:hover,.chat-item.active{background:var(--bg-tertiary)}
.chat-item-title{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.chat-item-actions{display:none;gap:2px}.chat-item:hover .chat-item-actions{display:flex}
.chat-item-actions button{padding:4px;border-radius:4px;color:var(--text-secondary);transition:all var(--transition)}.chat-item-actions button:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}
.sidebar-profile{padding:14px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background var(--transition);position:relative;flex-shrink:0;min-height:56px;margin-top:auto}.sidebar-profile:hover{background:var(--bg-tertiary)}
.profile-avatar{width:34px;height:34px;border-radius:50%;background:var(--ocean-green);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--white);flex-shrink:0}
.profile-info{flex:1;min-width:0}.profile-info .profile-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-info .profile-email{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-popup{position:absolute;bottom:100%;left:10px;right:10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;padding:8px;display:none;box-shadow:0 -8px 30px rgba(0,0,0,.4);z-index:200}.profile-popup.visible{display:block}
.profile-popup-item{width:100%;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--text-primary);display:flex;align-items:center;gap:10px;transition:background var(--transition)}.profile-popup-item:hover{background:rgba(255,255,255,.06)}.profile-popup-item svg{width:16px;height:16px;opacity:.6}
.profile-popup-divider{height:1px;background:var(--border);margin:4px 0}
.main-content{flex:1;display:flex;flex-direction:column;height:100vh;height:calc(var(--vh,1vh) * 100);margin-left:var(--sidebar-width);transition:margin-left .25s ease;overflow:hidden;min-width:0}.sidebar.collapsed~.main-content,.main-content.full{margin-left:0}
.main-header{height:var(--header-height);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;background:var(--bg-primary);flex-shrink:0;z-index:50}
.header-btn{padding:8px;border-radius:8px;color:var(--text-secondary);transition:all var(--transition);position:relative}.header-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.header-btn svg{width:20px;height:20px}
.header-btn .tooltip{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);background:var(--bg-tertiary);border:1px solid var(--border);padding:4px 10px;border-radius:6px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition)}.header-btn:hover .tooltip{opacity:1}
.model-selector{flex:1;display:flex;justify-content:center}
.model-dropdown{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:8px;position:relative;transition:border-color var(--transition);min-width:180px;justify-content:center}.model-dropdown:hover{border-color:#444}
.model-dropdown .model-indicator{width:8px;height:8px;border-radius:50%;background:var(--ocean-green)}
.model-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;padding:6px;display:none;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:200;min-width:220px}.model-menu.visible{display:block}
.model-option{padding:10px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:background var(--transition);display:flex;align-items:center;gap:8px}.model-option:hover{background:rgba(255,255,255,.06)}.model-option.active{background:rgba(68,153,142,.15);color:var(--ocean-green)}.model-option .premium-badge{font-size:10px;background:var(--lotus);color:var(--white);padding:2px 6px;border-radius:4px;margin-left:auto}
.chat-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 16px;display:flex;flex-direction:column}
.example-questions{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;padding:40px 20px}
.example-questions .eq-logo{width:64px;height:64px;border-radius:16px;margin-bottom:8px}
.example-questions h2{font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:20px}
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:600px;width:100%}
.eq-item{padding:14px 18px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);line-height:1.4}.eq-item:hover{border-color:var(--ocean-green);color:var(--text-primary);background:rgba(68,153,142,.06)}
.messages-container{max-width:800px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-bottom:20px}
.message{display:flex;gap:12px;animation:msgIn .3s ease}.message.user{justify-content:flex-end}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.message.assistant .msg-avatar{background:var(--ocean-green);color:var(--white)}
.message.user .msg-avatar{display:none}
.msg-bubble{max-width:75%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.55;word-break:break-word;position:relative;min-width:0;overflow:hidden}
.message.assistant .msg-bubble{background:var(--ai-bubble);color:var(--ai-text);border-bottom-left-radius:4px}
.message.user .msg-bubble{background:var(--user-bubble);color:var(--user-text);border-bottom-right-radius:4px}
.msg-bubble .code-container{background:#0d0d0d;border-radius:10px;margin:8px 0;overflow:hidden;border:1px solid #2a2a2a}
.msg-bubble .code-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#1a1a1a;border-bottom:1px solid #2a2a2a}
.msg-bubble .code-lang{font-family:'JetBrains Mono',monospace;font-size:12px;color:#999}
.msg-bubble .code-actions{display:flex;gap:4px}
.msg-bubble .code-action-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:#999;cursor:pointer;padding:4px;border-radius:4px;transition:color .2s,background .2s}
.msg-bubble .code-action-btn:hover{color:#e7eaed;background:rgba(255,255,255,.08)}
.msg-bubble .code-streaming{font-family:'JetBrains Mono',monospace;font-size:12px;color:#666;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.msg-bubble pre{background:transparent;padding:12px;border-radius:0;overflow-x:auto;margin:0;font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre;word-break:normal;-webkit-overflow-scrolling:touch}
.msg-bubble code{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(0,0,0,.2);padding:2px 5px;border-radius:4px}
.msg-bubble pre code{background:none;padding:0;white-space:pre;word-break:normal}
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3,.msg-bubble h4,.msg-bubble h5,.msg-bubble h6{margin:12px 0 6px;line-height:1.3}
.msg-bubble h1{font-size:1.5em}.msg-bubble h2{font-size:1.3em}.msg-bubble h3{font-size:1.15em}.msg-bubble h4{font-size:1.05em}.msg-bubble h5{font-size:1em}.msg-bubble h6{font-size:.9em;color:var(--text-muted)}
.msg-bubble blockquote{border-left:3px solid var(--french-pass);margin:8px 0;padding:4px 12px;opacity:.85}
.msg-bubble hr{border:none;border-top:1px solid rgba(255,255,255,.15);margin:10px 0}
.msg-bubble ul,.msg-bubble ol{margin:6px 0;padding-left:22px}
.msg-bubble li{margin:3px 0}
.msg-bubble del{opacity:.6}
.msg-bubble img{margin:6px 0;display:block}
.msg-bubble table{border-collapse:collapse;margin:8px 0;width:100%;font-size:13px}
.msg-bubble th,.msg-bubble td{border:1px solid rgba(255,255,255,.15);padding:6px 10px;text-align:left}
.msg-bubble th{background:rgba(0,0,0,.15);font-weight:600}
.msg-actions{display:flex;gap:4px;margin-top:6px;padding-left:42px}
.msg-actions.user-msg-actions{padding-left:0;justify-content:flex-end}
.msg-actions button{padding:5px 8px;border-radius:6px;color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:4px;transition:all var(--transition)}.msg-actions button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.msg-actions button svg{width:14px;height:14px}
.msg-actions button.active-up{color:var(--ocean-green)}.msg-actions button.active-down{color:var(--danger)}
.typing-indicator{display:none;padding:0 16px;max-width:800px;margin:0 auto;width:100%}.typing-indicator.visible{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.typing-dots{display:flex;gap:4px}.typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--text-muted);animation:typingBounce .6s infinite alternate}
.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{to{opacity:.3;transform:translateY(-4px)}}
.typing-text{font-size:12px;color:var(--text-muted)}
.chat-input-area{padding:12px 16px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom,16px));border-top:1px solid var(--border);background:var(--bg-primary);flex-shrink:0}
.chat-input-wrapper{max-width:800px;margin:0 auto}
.chat-input-box{display:flex;align-items:flex-end;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:16px;padding:8px 12px;gap:8px;transition:border-color var(--transition)}.chat-input-box:focus-within{border-color:var(--ocean-green)}
.attach-btn,.dictation-btn,.send-btn{padding:8px;border-radius:8px;color:var(--text-secondary);transition:all var(--transition);flex-shrink:0}.attach-btn:hover,.dictation-btn:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.attach-btn svg,.dictation-btn svg{width:20px;height:20px}
#chatInput{border:none;background:none;padding:6px 4px;min-height:24px;max-height:150px;resize:none;flex:1;font-size:14px;line-height:1.5;color:var(--text-primary)}#chatInput::placeholder{color:var(--text-muted)}
.send-btn{background:var(--ocean-green);color:var(--white);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.send-btn:hover{background:#3d8a80}.send-btn:disabled{opacity:.4;cursor:default}.send-btn svg{width:18px;height:18px}
.chat-disclaimer{text-align:center;padding:6px 0 0;font-size:11px;color:var(--text-muted)}
.attachment-preview{display:none;padding:8px 12px;gap:8px;flex-wrap:wrap;margin-bottom:4px}.attachment-preview.visible{display:flex}
.att-item{display:flex;align-items:center;gap:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text-secondary)}
.att-image-item{padding:0;background:none;border:none}
.att-thumb-wrap{position:relative;display:inline-block}
.att-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block}
.att-thumb-wrap .att-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:#000;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--text-secondary);cursor:pointer;padding:0}
.att-thumb-wrap .att-remove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:500;padding:20px;overflow-y:auto}.modal-overlay.visible{display:flex}
.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:18px;font-weight:600}
.modal-close{padding:6px;border-radius:6px;color:var(--text-secondary);transition:background var(--transition)}.modal-close:hover{background:var(--bg-tertiary)}
.modal-body{padding:24px}
.modal-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px}
.modal-tab{padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition)}.modal-tab:hover{color:var(--text-primary)}.modal-tab.active{color:var(--french-pass);border-bottom-color:var(--french-pass)}
.form-group{margin-bottom:18px}.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}.form-group .form-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
textarea{min-height:80px;resize:vertical}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-label{font-size:14px;flex:1;padding-right:16px}.toggle-label .toggle-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.toggle{width:44px;height:24px;border-radius:12px;background:#444;position:relative;cursor:pointer;transition:background var(--transition);flex-shrink:0}.toggle.active{background:var(--ocean-green)}
.toggle::after{content:'';width:20px;height:20px;border-radius:50%;background:var(--white);position:absolute;top:2px;left:2px;transition:transform var(--transition)}.toggle.active::after{transform:translateX(20px)}
.collapsible{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.collapsible-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background var(--transition);font-size:14px;font-weight:500}.collapsible-header:hover{background:var(--bg-tertiary)}
.collapsible-header svg{width:16px;height:16px;transition:transform var(--transition);color:var(--text-muted)}
.collapsible.open .collapsible-header svg{transform:rotate(180deg)}
.collapsible-body{display:none;padding:0 16px 16px}.collapsible.open .collapsible-body{display:block}
.color-picker-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.color-picker-row label{font-size:13px;flex:1;color:var(--text-secondary)}
.color-picker-row input[type="color"]{width:40px;height:34px;border:1px solid var(--border);border-radius:6px;padding:2px;cursor:pointer;background:var(--bg-input)}
.color-picker-row input[type="text"]{width:90px;font-size:13px;padding:8px 10px}
.style-options{display:flex;flex-direction:column;gap:6px}
.style-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all var(--transition)}.style-option:hover{border-color:#444}.style-option.active{border-color:var(--ocean-green);background:rgba(68,153,142,.08)}
.style-option input[type="radio"]{accent-color:var(--ocean-green)}
.style-option .style-name{font-size:13px;font-weight:500}.style-option .style-desc{font-size:11px;color:var(--text-muted)}
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;display:none}.alert.visible{display:block}
.alert-success{background:rgba(68,153,142,.15);color:var(--ocean-green);border:1px solid rgba(68,153,142,.3)}
.alert-error{background:rgba(130,57,60,.15);color:#ff6b6b;border:1px solid rgba(130,57,60,.3)}
.auth-page{min-height:100vh;display:flex;flex-direction:column;background-image:url('https://pliant.bot/img/background.png');background-size:cover;background-position:center;overflow:auto}
.auth-overlay{flex:1;display:flex;align-items:center;justify-content:center;background:rgba(4,4,4,.88);backdrop-filter:blur(20px);padding:40px 20px}
.auth-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:440px}
.auth-card .auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:30px;justify-content:center}
.auth-card .auth-logo img{width:44px;height:44px;border-radius:10px}
.auth-card .auth-logo span{font-size:22px;font-weight:700;color:var(--french-pass)}
.auth-card h2{font-size:22px;font-weight:600;margin-bottom:24px;text-align:center}
.auth-links{text-align:center;margin-top:20px;font-size:13px;color:var(--text-secondary)}
.auth-links a{color:var(--french-pass);font-weight:500}
.premium-page{min-height:100vh;height:100dvh;background:var(--bg-primary);overflow:auto}
.premium-header{text-align:center;padding:60px 20px 30px}
.premium-header h1{font-size:34px;font-weight:700;color:var(--french-pass);margin-bottom:10px}
.premium-header p{color:var(--text-secondary);font-size:16px}
.billing-tabs{display:flex;justify-content:center;gap:4px;margin:20px auto 40px;background:var(--bg-tertiary);border-radius:10px;padding:4px;width:fit-content}
.billing-tab{padding:10px 28px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.billing-tab.active{background:var(--ocean-green);color:var(--white)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto;padding:0 20px 60px}
.plan-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;transition:all var(--transition);position:relative}.plan-card:hover{border-color:var(--ocean-green);transform:translateY(-4px)}
.plan-card.popular{border-color:var(--ocean-green)}
.plan-card.popular::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ocean-green);color:var(--white);padding:4px 16px;border-radius:20px;font-size:12px;font-weight:600}
.plan-name{font-size:20px;font-weight:700;margin-bottom:8px}
.plan-price{font-size:36px;font-weight:700;color:var(--french-pass);margin-bottom:4px}.plan-price span{font-size:14px;color:var(--text-muted);font-weight:400}
.plan-period{font-size:13px;color:var(--text-muted);margin-bottom:24px}
.plan-features{list-style:none;margin-bottom:28px}
.plan-features li{padding:8px 0;font-size:13px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.plan-features li::before{content:'✓';color:var(--ocean-green);font-weight:700;flex-shrink:0}
.sub-overview{max-width:600px;margin:0 auto;padding:0 20px 60px}
.sub-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px}
.sub-card h3{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--french-pass)}
.sub-detail{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}.sub-detail:last-of-type{border-bottom:none}
.sub-detail .label{color:var(--text-secondary)}.sub-detail .value{font-weight:500}
.sub-cancelled-notice{background:rgba(130,57,60,.12);border:1px solid rgba(130,57,60,.3);border-radius:10px;padding:14px 18px;margin-top:20px;font-size:13px;color:#ff8a8a}
.site-header{padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(10,10,10,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.site-header .logo-group{display:flex;align-items:center;gap:10px}
.site-header .logo-group img{width:34px;height:34px;border-radius:8px}
.site-header .logo-group span{font-size:18px;font-weight:700;color:var(--french-pass)}
.site-header nav{display:flex;align-items:center;gap:20px}
.site-header nav a{color:var(--text-secondary);font-size:14px;font-weight:500;transition:color var(--transition)}.site-header nav a:hover{color:var(--text-primary);text-decoration:none}
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:40px 32px 24px}
.footer-content{max-width:800px;margin:0 auto;text-align:center}
.footer-desc{color:var(--text-secondary);font-size:14px;line-height:1.6;margin-bottom:12px}
.footer-credits{color:var(--text-muted);font-size:12px;margin-bottom:16px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:16px}
.footer-links a{color:var(--text-secondary);font-size:13px;transition:color var(--transition)}.footer-links a:hover{color:var(--french-pass)}
.footer-legal{display:flex;justify-content:center;gap:20px;margin-bottom:16px}
.footer-legal a{color:var(--text-muted);font-size:12px}
.footer-copyright{color:var(--text-muted);font-size:12px}
.legal-page{min-height:100vh;height:100dvh;background:var(--bg-primary);overflow:auto}
.legal-content{max-width:800px;margin:0 auto;padding:40px 20px 60px}
.legal-content h1{font-size:28px;font-weight:700;color:var(--french-pass);margin-bottom:8px}
.legal-content .legal-date{color:var(--text-muted);font-size:13px;margin-bottom:32px}
.legal-content h2{font-size:18px;font-weight:600;margin:28px 0 12px;color:var(--text-primary)}
.legal-content h3{font-size:15px;font-weight:600;margin:20px 0 8px;color:var(--text-primary)}
.legal-content p{color:var(--text-secondary);font-size:14px;line-height:1.7;margin-bottom:14px}
.legal-content ul{color:var(--text-secondary);font-size:14px;line-height:1.7;margin:0 0 14px 20px}
.legal-content li{margin-bottom:6px}
.recording-indicator{display:none;align-items:center;gap:8px;padding:4px 12px;border-radius:20px;background:rgba(255,68,68,.15);margin-right:8px}.recording-indicator.visible{display:flex}
.recording-indicator .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:recPulse 1s infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.3}}
.recording-indicator span{font-size:12px;color:var(--danger)}
@media(max-width:768px){
.sidebar{width:280px}
.main-content{margin-left:0!important}
.sidebar:not(.collapsed){box-shadow:8px 0 30px rgba(0,0,0,.5)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
.sidebar-backdrop.visible{display:block}
.eq-grid{grid-template-columns:1fr}
.plans-grid{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.msg-bubble{max-width:88%}
.welcome-content h1{font-size:28px}
.premium-header h1{font-size:26px}
.site-header{padding:12px 16px}
.site-header nav{gap:12px}
}

.auth-page body,.premium-page body,.legal-page body{overflow:auto!important}
.auth-card .auth-logo img{width:44px!important;height:44px!important;max-width:44px!important;object-fit:contain}
.welcome-logo{width:100px!important;height:100px!important;max-width:100px!important;object-fit:contain}
.sidebar-header .sidebar-logo{width:32px!important;height:32px!important;max-width:32px!important;object-fit:contain}
.site-header .logo-group img{width:34px!important;height:34px!important;max-width:34px!important;object-fit:contain}
.example-questions .eq-logo{width:64px!important;height:64px!important;max-width:64px!important;object-fit:contain}

.auth-page{overflow:auto!important}
.auth-page body{overflow:auto!important;height:auto!important}
.premium-page{overflow:auto!important}
.legal-page{overflow:auto!important}

.gc-member{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;transition:background var(--transition);margin-bottom:4px}
.gc-member:hover{background:var(--bg-tertiary)}
.gc-member-avatar{width:32px;height:32px;border-radius:50%;background:var(--ocean-green);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--white);flex-shrink:0}
.gc-member-info{flex:1;min-width:0}
.gc-member-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-member-role{font-size:11px;color:var(--text-muted)}
.gc-member-kick{padding:6px 12px;border-radius:6px;font-size:12px;color:var(--danger);border:1px solid rgba(255,68,68,.2);background:none;cursor:pointer;transition:all var(--transition);flex-shrink:0}
.gc-member-kick:hover{background:rgba(255,68,68,.1);border-color:var(--danger)}
.premium-gate{position:relative}
.premium-gate.locked>*:not(.premium-gate-overlay){opacity:.4;pointer-events:none;filter:grayscale(.3)}
.premium-gate.locked .premium-gate-overlay{display:block}
.premium-gate-overlay{display:none}

#imageViewerModal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
#imageViewerModal.visible{opacity:1}
.img-viewer-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);cursor:pointer}
.img-viewer-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;z-index:1}
.img-viewer-content img{max-width:90vw;max-height:75vh;border-radius:12px;object-fit:contain}
.img-viewer-close{position:absolute;top:-40px;right:-8px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.img-viewer-close:hover{background:rgba(255,255,255,.1)}
.img-viewer-actions{display:flex;gap:12px;margin-top:16px}
.img-viewer-actions button{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;transition:background .2s}
.img-viewer-actions button:hover{background:rgba(255,255,255,.2)}

.model-menu-divider{padding:10px 14px;border-top:1px solid #1a1a1a;margin-top:4px}
.model-toggle-label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);cursor:pointer;user-select:none}
.model-toggle-label input{display:none}
.model-toggle-slider{width:36px;height:20px;background:#333;border-radius:10px;position:relative;transition:background .2s;flex-shrink:0}
.model-toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#888;border-radius:50%;transition:all .2s}
.model-toggle-label input:checked+.model-toggle-slider{background:#E040FB}
.model-toggle-label input:checked+.model-toggle-slider::after{left:18px;background:#fff}

.sub-overview{max-width:500px;margin:0 auto;padding:20px}
.sub-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:16px;padding:32px;text-align:center}
.sub-plan-badge{display:inline-block;background:linear-gradient(135deg,var(--ocean-green),#44998e);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 14px;border-radius:20px;margin-bottom:12px}
.sub-card h2{font-size:22px;margin-bottom:24px;color:#e7eaed}
.sub-details{text-align:left}
.sub-detail{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #1a1a1a}
.sub-detail:last-child{border-bottom:none}
.sub-label{color:#666;font-size:14px}
.sub-value{color:#e7eaed;font-size:14px;font-weight:500}
.sub-cancelled-notice{background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.2);border-radius:12px;padding:16px;margin-bottom:20px;color:#ff6b6b;font-size:14px;display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.sub-cancelled-notice strong{color:#fff}

.voice-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.voice-overlay.visible{opacity:1}
.voice-overlay-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#0a1a2a 0%,#000 70%)}
.voice-status{position:relative;z-index:2;text-align:center;color:#e7eaed}
.voice-status-text{font-size:16px;color:var(--text-muted);margin-bottom:40px;min-height:24px}
.voice-orb-container{position:relative;width:200px;height:200px;margin:0 auto 50px}
.voice-orb{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#44998e,#1a5c54,#0a2e2a);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(68,153,142,.3),0 0 120px rgba(68,153,142,.1)}
.voice-orb.listening{animation:orbPulse 2s ease-in-out infinite}
.voice-orb.speaking{animation:orbSpeak .8s ease-in-out infinite}
.voice-orb.thinking{animation:orbThink 1.5s ease-in-out infinite}
@keyframes orbPulse{0%,100%{transform:scale(1);box-shadow:0 0 60px rgba(68,153,142,.3)}50%{transform:scale(1.08);box-shadow:0 0 80px rgba(68,153,142,.5),0 0 160px rgba(68,153,142,.2)}}
@keyframes orbSpeak{0%,100%{transform:scale(1);box-shadow:0 0 60px rgba(68,153,142,.4)}25%{transform:scale(1.05);box-shadow:0 0 90px rgba(68,153,142,.6)}75%{transform:scale(1.03);box-shadow:0 0 70px rgba(68,153,142,.5)}}
@keyframes orbThink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.95);opacity:.7}}
.voice-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;pointer-events:none}
.voice-ring{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:1px solid rgba(68,153,142,.15);animation:ringExpand 3s ease-out infinite}
.voice-ring:nth-child(2){animation-delay:.5s}
.voice-ring:nth-child(3){animation-delay:1s}
.voice-ring:nth-child(4){animation-delay:1.5s}
@keyframes ringExpand{0%{transform:scale(1);opacity:.4}100%{transform:scale(2.2);opacity:0}}
.voice-orb.listening~.voice-rings .voice-ring{animation-duration:2s}
.voice-orb.speaking~.voice-rings .voice-ring{animation-duration:1.2s;border-color:rgba(68,153,142,.25)}
.voice-controls{position:relative;z-index:2;display:flex;gap:24px;align-items:center}
.voice-ctrl-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.voice-ctrl-btn svg{width:24px;height:24px}
.voice-ctrl-mute{background:rgba(255,255,255,.1);color:#e7eaed}
.voice-ctrl-mute:hover{background:rgba(255,255,255,.2)}
.voice-ctrl-mute.muted{background:rgba(255,80,80,.2);color:#ff6b6b}
.voice-ctrl-stop{background:rgba(255,255,255,.1);color:#e7eaed}
.voice-ctrl-stop:hover{background:rgba(255,255,255,.2)}
.voice-ctrl-hangup{width:64px;height:64px;background:#e74c3c;color:#fff}
.voice-ctrl-hangup:hover{background:#c0392b}
.voice-transcript{position:relative;z-index:2;max-width:80%;text-align:center;margin-top:30px;font-size:14px;color:rgba(255,255,255,.5);min-height:20px;max-height:60px;overflow:hidden}

.voice-lang-selector{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3}
.voice-lang-selector select{background:rgba(255,255,255,.1);color:#e7eaed;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:8px 16px;font-size:13px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.voice-lang-selector select:hover{background:rgba(255,255,255,.15)}
.voice-lang-selector select option{background:#1a1a1a;color:#e7eaed}

.voice-options{display:flex;flex-direction:column;gap:6px}
.voice-option{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer;transition:background .2s,opacity .2s;border:1px solid transparent}
.voice-option:hover{background:rgba(255,255,255,.08)}
.voice-option.active{background:rgba(0,122,255,.12);border-color:rgba(0,122,255,.3)}
.voice-option.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.voice-option .voice-radio{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:50%;flex-shrink:0;position:relative}
.voice-option.active .voice-radio{border-color:#007AFF}
.voice-option.active .voice-radio::after{content:'';position:absolute;top:3px;left:3px;width:8px;height:8px;border-radius:50%;background:#007AFF}
.voice-info{flex:1;min-width:0}
.voice-name{font-size:14px;font-weight:500;color:var(--text-primary)}
.voice-accent{font-size:12px;color:var(--text-muted);margin-top:1px}
.voice-preview-btn{background:rgba(255,255,255,.08);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background .2s,color .2s;flex-shrink:0}
.voice-preview-btn:hover{background:rgba(255,255,255,.15);color:var(--text-primary)}
.voice-preview-btn svg{fill:currentColor;stroke:none}

.voice-orb.listening.active{animation:orbPulseSpeaking .6s ease-in-out infinite;box-shadow:0 0 80px rgba(0,210,180,.5),0 0 160px rgba(0,210,180,.2)}