: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%)}
#chat-header{display:flex;align-items:center;padding:0 .5rem;height:52px;flex-shrink:0;position:relative;z-index: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;margin-top:0.5rem;}
#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;white-space:pre-wrap;word-wrap:break-word}
#msg-input:disabled{background-color:#f3f4f6;cursor:not-allowed}
#send-btn,#attach-btn,#camera-btn,#enhance-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%}
#send-btn:disabled{background-color:#93c5fd;cursor:not-allowed}
#attach-btn,#camera-btn,#enhance-btn{color:#4b5563}
#attach-btn:disabled,#camera-btn:disabled,#enhance-btn:disabled{color:#9ca3af;cursor:not-allowed}
.attachment-preview-container{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;padding:0 .5rem}
.attachment-item{position:relative}
.attachment-item img{height:50px;width:50px;border-radius:.5rem;object-fit:cover;display:block}
.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;font-weight:bold;line-height:1}
.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.user .user-uploads{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.message.user .user-uploads img{max-width:120px;border-radius:.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)}
#search-container{padding:0 1rem; border-bottom:1px solid var(--border-color)}
#chat-search-input{width:100%;padding:.6rem .75rem;border-radius:.5rem;border:1px solid var(--border-color);margin:.5rem 0;font-size:.9rem}
#chat-search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(59,130,246,0.3)}
#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{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);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{font-size:.8rem;color:#4b5563;background:rgba(255,255,255,.6);padding:.4rem .8rem;border-radius:1rem;backdrop-filter:blur(4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;text-align:right}
#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#deep-thinking-btn.active{background-color:#4f46e5;color:#fff;border-color:#4f46e5}
button.search-web-active, #search-web-btn-main.active, #pre-input-controls button#search-web-btn-main.active{background-color:#10b981;color:#fff;border-color:#10b981;box-shadow:0 0 15px rgba(16, 185, 129, 0.8), 0 0 30px rgba(16, 185, 129, 0.4);font-weight:600}
#pre-input-controls button#search-web-btn-main:hover{border-color:#10b981;background-color:#ecfdf5}
#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;}
.settings-section h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.face-selector-container { display: flex; gap: 1rem; flex-wrap: wrap; }
.face-card { cursor: pointer; border: 2px solid var(--border-color); border-radius: 8px; padding: 1rem; text-align: center; transition: all 0.2s ease; }
.face-card:hover { border-color: var(--accent-color); }
.face-card.selected { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
.face-card .face-preview { width: 80px; height: 60px; margin: 0 auto 0.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}
.suggestions-container{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.08)}
.suggestions-container h4{font-weight:600;font-size:.9rem;margin-bottom:.25rem}
.suggestion-btn{background-color:#f0f2f5;border:1px solid #e5e7eb;color:#374151;padding:.5rem 1rem;border-radius:1rem;font-size:.85rem;cursor:pointer;transition:all .2s;text-align:left;}
.suggestion-btn:hover{background-color:#e5e7eb;border-color:#d1d5db}
.ai-face-container{transition:all .3s ease-in-out;opacity:1}
#ai-face-container-large{width:140px;height:100px}
#ai-face-container-small{width:40px;height:32px;margin:0 .5rem 0 0}
#content-wrapper.chat-active #ai-face-container-small{opacity:1}
#content-wrapper:not(.chat-active) #ai-face-container-small{opacity:0;width:0}
.ai-face-svg{width:100%;height:100%;}
.ai-face-svg .orb-emotion-layer, .ai-face-svg .orb-thinking-particles, .ai-face-svg .orb-speaking-rings { opacity: 0; transition: opacity .3s ease; }
.ai-face-container.idle .orb-emotion-layer { opacity: 1; }
.ai-face-container.idle .ai-face-svg .orb-main { animation: orb-breathing 4s infinite ease-in-out; }
.ai-face-container.idle .ai-face-svg .eye-left { animation: orb-blink 4s infinite ease-in-out 0.2s; }
.ai-face-container.idle .ai-face-svg .eye-right { animation: orb-blink 4s infinite ease-in-out; }
.ai-face-container.thinking .orb-thinking-particles { opacity: 1; }
.ai-face-container.thinking .ai-face-svg .orb-main { animation: orb-breathing 2s infinite ease-in-out, orb-pulse 2s infinite ease-in-out; }
.ai-face-container.thinking .p1 { animation: orb-thinking-p1 2s infinite ease-in-out; }
.ai-face-container.thinking .p2 { animation: orb-thinking-p2 2s infinite ease-in-out .5s; }
.ai-face-container.thinking .p3 { animation: orb-thinking-p3 2s infinite ease-in-out 1s; }
.ai-face-container.speaking .orb-speaking-rings { opacity: 1; }
.ai-face-container.speaking .r1 { animation: orb-speaking-r1 2s infinite ease-out; }
.ai-face-container.speaking .r2 { animation: orb-speaking-r1 1.5s infinite ease-out 0.5s; }
.ai-face-container.speaking .ai-face-svg .orb-main { animation: orb-pulse 1.5s infinite ease-in-out; }
.ai-face-container.happy .orb-emotion-layer { opacity: 1; }
.ai-face-container.happy .mouth { animation: orb-happy-mouth .5s forwards ease-out; }
.ai-face-container.wink .orb-emotion-layer { opacity: 1; }
.ai-face-container.wink .eye-right { animation: orb-wink-eye .5s forwards ease-in-out; }
#book-list-container { display: flex; flex-direction: column; gap: 1rem; max-height: 50vh; overflow-y: auto; padding-right: 0.5rem; }
.book-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; }
.book-item-info { flex-grow: 1; cursor: pointer; }
.book-item-title { font-weight: 600; font-size: 1.1rem; }
.book-item-progress { font-size: 0.9rem; color: #6b7280; }
.book-item-actions button { margin-left: 0.5rem; padding: 0.4rem 0.8rem; }
#book-outline-container { margin-top: 1.5rem; padding: 1rem; background-color: #f9fafb; border: 1px solid var(--border-color); border-radius: 8px; max-height: 50vh; overflow-y: auto; }
#book-outline-container h3 { margin-top: 0; }
#book-outline-container h4 { margin-top: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
#book-reader-content { font-family: 'Georgia', serif; line-height: 1.8; color: #333; }
.chapter-container { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px dashed #ccc; }
.chapter-container:last-child { border-bottom: none; }
.chapter-container h2 { font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 1.5rem; }
.chapter-container img { max-width: 60%; display: block; margin: 1.5rem auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.chapter-container p { white-space: pre-wrap; margin-bottom: 1.5rem; }
#generate-chapter-controls { text-align: center; padding: 1.5rem; }
.spinner { border: 4px solid rgba(0,0,0,.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--accent-color); animation: spin 1s ease infinite; margin: 1rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orb-breathing{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes orb-blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes orb-thinking-p1{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1} 33%{transform:translate(25px, -30px) scale(1.8) rotate(120deg);opacity:.7} 66%{transform:translate(-15px, 25px) scale(.6) rotate(240deg);opacity:.4} 100%{transform:translate(0,0) scale(1) rotate(360deg);opacity:1}}
@keyframes orb-thinking-p2{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1} 33%{transform:translate(-30px, 25px) scale(.9) rotate(-120deg);opacity:.7} 66%{transform:translate(20px, -20px) scale(1.5) rotate(-240deg);opacity:.4} 100%{transform:translate(0,0) scale(1) rotate(-360deg);opacity:1}}
@keyframes orb-thinking-p3{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1} 33%{transform:translate(35px, 20px) scale(1.3) rotate(90deg);opacity:.7} 66%{transform:translate(-25px, -15px) scale(.7) rotate(180deg);opacity:.4} 100%{transform:translate(0,0) scale(1) rotate(270deg);opacity:1}}
@keyframes orb-speaking-r1{from{r:50;opacity:1;stroke-width:3}to{r:75;opacity:0;stroke-width:0}}
@keyframes orb-happy-mouth{to{d: path("M 65 100 Q 80 115 95 100")}}
@keyframes orb-wink-eye{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes orb-pulse{0%,100%{filter:brightness(1) drop-shadow(0 0 5px rgba(59,130,246,0.3))}50%{filter:brightness(1.2) drop-shadow(0 0 15px rgba(59,130,246,0.6))}}
@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;margin:0 .5rem}
  #chat-header{border-bottom:1px solid var(--border-color);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);}
  #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{font-size:0.7rem;padding:.3rem .6rem}
  #chat-list li .chat-actions{opacity:1}
  #ai-face-container-large{width:120px;height:80px}
}
#chat-list-wrapper::-webkit-scrollbar,#content-wrapper::-webkit-scrollbar{width:6px}
#chat-list-wrapper::-webkit-scrollbar-track,#content-wrapper::-webkit-scrollbar-track{background:0 0}
#chat-list-wrapper::-webkit-scrollbar-thumb,#content-wrapper::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
#chat-list-wrapper::-webkit-scrollbar-thumb:hover,#content-wrapper::-webkit-scrollbar-thumb:hover{background:#9ca3af}