:root{--text-color:#1f2228;--bg-color:#f9fafb;--sidebar-bg:#fff;--border-color:#e5e7eb;--user-bubble-bg:#dbeafe;--assistant-bubble-bg:#fff;--accent-color:#3b82f6;--sidebar-width:260px}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;height:100%;overflow:hidden;color:var(--text-color);background-color:var(--bg-color)}
#app-container{display:flex;height:100%;width:100%;position:relative;}
#sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s ease;z-index:100}
#chat-wrapper{flex:1;display:flex;flex-direction:column;height:100%;min-width:0;background:radial-gradient(ellipse at top, #e0e7ff 0%, transparent 50%),radial-gradient(ellipse at bottom, #fde68a 0%, transparent 50%)}
#content-wrapper{flex:1;overflow-y:auto;display:flex;flex-direction:column}
#messages{max-width:820px;margin:0 auto;width:100%;padding:2rem 1rem}
#welcome-screen{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:1rem}
#content-wrapper.chat-active #welcome-screen{display:none}
#content-wrapper.chat-active #messages{display:block}
#welcome-screen h1{font-size:2.5rem;font-weight:600;color:#111827}
#welcome-screen p{font-size:1.1rem;color:#4b5563;margin-top:.5rem;max-width:500px}
#suggestion-bubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem;max-width:600px}
.suggestion-bubble{background:rgba(255,255,255,.6);border:1px solid var(--border-color);padding:.75rem 1.25rem;border-radius:1.5rem;cursor:pointer;font-size:.9rem;transition:background .2s}
.suggestion-bubble:hover{background:#fff}
#feature-showcase{margin-top:2rem;background:rgba(255,255,255,.6);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;max-width:600px;text-align:left;box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}
#feature-showcase h3{font-size:1.1rem;font-weight:600;margin-bottom:1rem;text-align:center;color:#374151}
#feature-showcase ul{list-style:none;padding:0}
#feature-showcase li{margin-bottom:.75rem;display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem}
#feature-showcase li .feature-icon{font-size:1.2rem}
#feature-showcase li div{display:flex;flex-direction:column}
#feature-showcase li b{font-weight:600}
#feature-showcase li span{color:#4b5563;font-size:.9rem}
#input-container{border-top:1px solid var(--border-color);background-color:rgba(249,250,251,.8);backdrop-filter:blur(8px)}
#input-area-wrapper{max-width:820px;margin:0 auto;padding:.5rem 1rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom))}
#input-area{display:flex;align-items:flex-end;background:#fff;border:1px solid #ccc;border-radius:1.5rem;padding:0 .25rem 0 .75rem}
#msg-input{flex:1;background:0;border:none;outline:none;font-size:1rem;padding:.6rem .5rem;resize:none;line-height:1.4;max-height:150px;min-width:0}
#send-btn,#attach-btn,#camera-btn{background:transparent;border:none;font-size:1.5rem;cursor:pointer;border-radius:.75rem;min-width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:.1rem}
#send-btn{background:var(--accent-color);color:#fff;font-size:1rem;border-radius:50%}
#attach-btn,#camera-btn{color:#4b5563}
#attach-btn:disabled,#camera-btn:disabled{color:#9ca3af;cursor:not-allowed}
#attachment-preview{margin-bottom:.5rem;padding:0 .5rem;position:relative;width:fit-content}
#attachment-preview img{height:50px;width:50px;border-radius:.5rem;object-fit:cover}
#remove-attachment-btn{position:absolute;top:-5px;right:-5px;background:#000;color:#fff;border-radius:50%;width:20px;height:20px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.message{display:flex;flex-direction:column;margin-bottom:1.5rem;animation:fadeIn .5s ease-out forwards}
.message-content{max-width:90%;padding:.75rem 1.25rem;border-radius:1.25rem;line-height:1.7;box-shadow:0 1px 2px rgba(0,0,0,.07);word-wrap:break-word}
.message-content img{max-width:100%;border-radius:.75rem;display:block;margin-top:.5rem}
.message.user{align-items:flex-end}
.message.assistant{align-items:flex-start}
.message.user .message-content{background:var(--user-bubble-bg);border-bottom-right-radius:.5rem;color:#1e40af}
.message.user .message-content p { margin-bottom: 0.5rem; }
.message.assistant .message-content{background:var(--assistant-bubble-bg);border-bottom-left-radius:.5rem}
.image-container{position:relative}
.download-link{position:absolute;bottom:.5rem;right:.5rem;background-color:rgba(0,0,0,.6);color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.8rem;text-decoration:none;opacity:1}
.youtube-video-container{position:relative;overflow:hidden;width:100%;padding-top:56.25%;border-radius:.75rem;margin-top:.5rem}
.youtube-video-container iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}
pre{position:relative;margin:1em 0;border-radius:.5rem;background-color:#282c34;color:#abb2bf;padding:1em;font-family:monospace;overflow-x:auto}
.copy-btn{position:absolute;top:.5rem;right:.5rem;background-color:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:.25rem;padding:.25rem .5rem;cursor:pointer;font-size:.8rem;opacity:.8}
pre:hover .copy-btn{opacity:1}
.message-content h1,.message-content h2,.message-content h3{font-weight:700;line-height:1.3;margin-top:1.25rem;margin-bottom:.5rem}
.message-content h1{font-size:1.5rem}
.message-content h2{font-size:1.25rem}
.message-content h3{font-size:1.1rem}
.message-content p{margin-bottom:1rem}
.message-content ul,.message-content ol{margin-bottom:1rem;padding-left:1.5rem}
.message-content li{margin-bottom:.5rem}
.message-content ul{list-style-type:disc}
.message-content ol{list-style-type:decimal}
.message-content li::marker{color:var(--accent-color)}
#auth-view,#premium-view{display:none;height:100%;flex-direction:column}
#auth-view{padding:1rem}
#auth-view p{font-size:.9rem;color:#6b7280;margin-bottom:1rem}
#premium-view-content{flex:1;display:flex;flex-direction:column;min-height:0}
#new-chat-container{padding:1rem;border-bottom:1px solid var(--border-color)}
#chat-list-wrapper{flex:1;overflow-y:auto;padding:.5rem}
#chat-list{list-style:none;padding:0}
#logout-container{padding:1rem;border-top:1px solid var(--border-color)}
#chat-list li{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;margin-bottom:.5rem;border:1px solid var(--border-color);background-color:#fff}
#chat-list li .chat-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}
#chat-list li .chat-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .2s}
#chat-list li:hover .chat-actions{opacity:1}
#chat-list li .chat-actions button{background:transparent;border:none;cursor:pointer;font-size:1rem;padding:.25rem;border-radius:4px}
#chat-list li .chat-actions button:hover{background-color:#f0f0f0}
#chat-list li:hover{background-color:#f9fafb}
#chat-list li.active{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}
.sidebar-btn{width:100%;padding:.75rem;border-radius:.5rem;border:1px solid var(--accent-color);background-color:var(--accent-color);color:#fff;font-weight:500;cursor:pointer;margin-bottom:.5rem; text-align:center;}
.sidebar-btn-secondary{background-color:#fff;color:#374151;border-color:#e5e7eb}
#menu-btn{display:none}
#auth-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center;z-index:200}
.auth-form-container{background:#fff;padding:2rem;border-radius:.75rem;width:90%;max-width:400px;position:relative}
.auth-form-container h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;text-align:center;}
.auth-form-container input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:.375rem;margin-bottom:1rem}
.auth-form-container #close-auth-btn{position:absolute;top:.5rem;right:1rem;background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:#9ca3af}
.auth-links { display: flex; justify-content: space-between; margin-top: 1rem; }
.auth-links a, #switch-to-login, #switch-to-register, #switch-to-recover { font-size: 0.875rem; color: var(--accent-color); text-decoration: none; }
.auth-links a:hover, #switch-to-login:hover, #switch-to-register:hover, #switch-to-recover:hover { text-decoration: underline; }
.error-banner { color:#b91c1c; background-color: #fee2e2; border: 1px solid #fca5a5; padding: .75rem; border-radius: .375rem; margin-bottom: 1rem; font-size: .9rem; text-align: center; }
.success-banner { color:#15803d; background-color: #dcfce7; border: 1px solid #86efac; padding: .75rem; border-radius: .375rem; margin-bottom: 1rem; font-size: .9rem; text-align: center; }
.auth-subtext { font-size: 0.9rem; color: #4b5563; margin-bottom: 1rem; text-align: center; }
.hint-box { padding: 0.75rem; background-color: #eef2ff; border: 1px solid #c7d2fe; border-radius: 0.375rem; margin-bottom: 1rem; text-align: center; color: #4338ca; }
#top-bar-info{position:absolute;top:.75rem;left:60px;right:1rem;text-align:right;font-size:.8rem;color:#4b5563;background:rgba(255,255,255,.6);padding:.4rem .8rem;border-radius:1rem;backdrop-filter:blur(4px);z-index:50;max-width:450px;margin-left:auto;white-space:nowrap}
#pre-input-controls{display:flex;justify-content:center;gap:.75rem;padding:.5rem 1rem 0;max-width:820px;margin:0 auto}
#pre-input-controls button{background-color:#fff;border:1px solid var(--border-color);border-radius:1.5rem;padding:.5rem 1.25rem;font-size:.9rem;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease-in-out}
#pre-input-controls button:hover{border-color:#a5b4fc;background-color:#f5f3ff}
#pre-input-controls button#help-btn:hover{background-color:#fef9c3;border-color:#facc15}
#pre-input-controls button#deep-thinking-btn.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}
#pre-input-controls button#live-voice-btn.live{background-color:#dc2626;color:#fff;border-color:#dc2626;animation:pulsing-text 1.5s infinite ease-in-out}
#pre-input-controls button:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed;border-color:var(--border-color)}
#pre-input-controls button:disabled:hover{background-color:#f3f4f6}
.admin-table{width:100%;border-collapse:collapse;margin-top:1rem}
.admin-table th,.admin-table td{border:1px solid #e5e7eb;padding:.5rem .75rem;text-align:left;font-size:.9rem;vertical-align:middle;}
.admin-table th{background:#f3f4f6;font-weight:600;}
.admin-table td:last-child {text-align: center;}
.admin-table select, .admin-table button {padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid #ccc;}
.admin-table button {background-color: #2563eb; color: white; cursor: pointer;}
.table-container {overflow-x: auto;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:300;overflow-y:auto;padding:1rem}
.modal-inner{background:#fff;border-radius:16px;padding:1.5rem 2rem;max-width:980px;width:95%;position:relative;box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);margin:auto 0;}
.modal-close{position:absolute;right:.75rem;top:.5rem;background:transparent;border:1px solid #e5e7eb;border-radius:999px;width:32px;height:32px;cursor:pointer}
.modal h2 {font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem;}
.modal p {color: #4b5563; margin-bottom: 1.5rem;}
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1rem 0}
.card{padding:1.5rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px; display: flex; flex-direction: column; position:relative;}
.card.highlight{border-color:var(--accent-color);border-width:2px}
.card-badge{position:absolute;top:-.75rem;right:1rem;background:var(--accent-color);color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.8rem;font-weight:600}
.card h3 {font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem;}
.card .price {font-size: 2rem; font-weight: bold; margin-bottom: 1rem;}
.card .price span {font-size: 1rem; font-weight: normal; color: #6b7280;}
.card ul {list-style: none; margin-bottom: 1.5rem; padding: 0; flex-grow: 1; text-align:left;}
.card ul li {margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem; justify-content: space-between;}
.card ul li.disabled {color: #9ca3af;}
.card ul li .icon { font-size: 1.1rem; line-height: 1.5; }
.card ul .feature-name { flex-grow: 1; }
.card ul .limit { font-weight: 500; color: #4b5563; }
.card .paypal-button-container {margin-top: auto;}
.support-section {display:flex;flex-wrap:wrap;gap:2rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}
.support-section > div {flex: 1 1 300px;}
.contact-info ul { list-style: none; padding: 0;}
.contact-info li { margin-bottom: 0.5rem;}
.contact-info a { color: var(--accent-color); text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }
.context-banner{margin-bottom:.5rem;background:#e0f2fe;border:1px solid #7dd3fc;color:#075985;padding:.5rem .75rem;border-radius:.5rem; font-size: 0.8rem; text-align: center; font-weight: 500;}
.instructions-container{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1rem;text-align:left}@media (min-width:640px){.instructions-container{grid-template-columns:1fr 1fr}}
.instruction-card{background-color:#f9fafb;padding:1.5rem;border-radius:12px;border:1px solid var(--border-color)}
.instruction-card h3{font-size:1.25rem;font-weight:600;margin-top:0;margin-bottom:1rem;color:var(--text-color)}
.instruction-step{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:1rem;color:#374151}
.instruction-icon{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#eef2ff;color:var(--accent-color)}
.instruction-icon svg{width:1.5rem;height:1.5rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulsing-text{0%{box-shadow:0 0 0 0 rgba(220,38,38,.7)}70%{box-shadow:0 0 0 10px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
@media (max-width:768px){
  #sidebar{position:absolute;height:100%;transform:translateX(-100%)}
  body.sidebar-open #sidebar{transform:translateX(0)}
  #menu-btn{display:block!important;position:fixed;top:1rem;left:1rem;background:#fff;border:1px solid var(--border-color);border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer;z-index:101;box-shadow:0 2px 5px rgba(0,0,0,.1)}
  #sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:99}
  body.sidebar-open #sidebar-overlay{display:block}
  #top-bar-info{left:60px;right:.5rem}
  #chat-list li .chat-actions{opacity:1}
}