:root{color-scheme:dark;--bg:#000;--sidebar:#080808;--panel:#111;--panel-hover:#1a1a1a;--border:#282828;--muted:#919191;--text:#f2f2f2;--accent:#d9d9d9;--blue:#234f89;--radius:18px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{overflow:hidden;font-size:14px}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #8ab4f8;outline-offset:2px}
button:disabled{opacity:.48;cursor:not-allowed}
[hidden]{display:none!important}
.app-shell{height:100dvh;min-height:520px;width:100%;display:flex;direction:ltr;background:var(--bg);overflow:hidden}
.sidebar{direction:rtl;flex:0 0 clamp(270px,23.5vw,360px);width:clamp(270px,23.5vw,360px);min-width:0;background:var(--sidebar);border-right:1px solid #202020;display:flex;flex-direction:column;gap:15px;padding:14px 12px 10px;overflow:hidden;transition:width .2s ease,flex-basis .2s ease,padding .2s ease}
.sidebar-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:0 5px 2px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.4px}
.brand-mark{display:grid;place-items:center;width:27px;height:27px;color:#eee}
.brand-mark svg{width:25px;height:25px}
.icon-button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#a1a1a1;cursor:pointer}
.icon-button:hover,.composer-icon-button:hover{background:#252525;color:#fff}
.icon-button svg,.side-action svg,.model-picker svg,.account-link svg,.prompt-icon svg,.composer-icon-button svg,.send-button svg,.project-placeholder svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar-actions{display:grid;gap:5px}
.side-action{display:flex;align-items:center;gap:12px;width:100%;min-height:41px;padding:9px 10px;border:0;border-radius:10px;background:transparent;text-align:right;color:#d2d2d2;cursor:pointer;white-space:nowrap}
.side-action:hover,.project-placeholder:hover,.recent-item:hover{background:#1a1a1a}
.side-action span{flex:1;overflow:hidden;text-overflow:ellipsis}
.side-action svg{flex:0 0 20px;color:#a9a9a9}
.primary-action{border:1px solid #272727;background:#141414}
.primary-action:hover{background:#202020}
.primary-action kbd{font-size:11px;color:#747474;border:1px solid #343434;border-radius:5px;padding:2px 5px;direction:ltr}
.search-row{display:flex;align-items:center;gap:10px;padding:0 11px;height:40px;background:#191919;border:1px solid #2a2a2a;border-radius:10px}
.search-row svg{width:18px;height:18px;fill:none;stroke:#aaa;stroke-width:1.7;flex-shrink:0}
.search-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#eee}
.search-row input::placeholder{color:#777}
.side-nav{display:grid;gap:2px}
.sidebar-section,.recents-section{display:grid;gap:7px;padding:2px 3px 0;min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 7px;color:#929292;font-size:12px;font-weight:600}
.section-heading>a{font-size:19px;line-height:1;color:#9a9a9a;border-radius:6px;padding:2px 5px}
.section-heading>a:hover{background:#222;color:#fff}
.project-placeholder{display:flex;align-items:center;gap:10px;min-height:35px;padding:7px 9px;border-radius:8px;color:#828282;font-size:12px}
.project-placeholder>span:nth-child(2){flex:1}
.project-dot{width:8px;height:8px;border:1px solid #5f5f5f;border-radius:3px}
.project-placeholder svg{width:15px;height:15px;color:#666}
.recents-section{flex:1;min-height:70px;overflow:hidden}
.recent-count{font-size:11px;color:#6e6e6e}
.conversation-list{display:grid;align-content:start;gap:2px;overflow-y:auto;min-height:0}
.recent-item{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#b8b8b8;text-align:right;cursor:pointer}
.recent-item.active{background:#202020;color:#f3f3f3}
.recent-item svg{width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none;stroke-width:1.6}
.recent-item .recent-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px}
.recent-item .recent-time{font-size:10px;color:#777}
.empty-recents{margin:0;padding:7px 10px;color:#626262;font-size:12px;line-height:1.8}
.sidebar-footer{border-top:1px solid #202020;padding-top:9px;display:grid;gap:3px}
.account-link{display:flex;align-items:center;gap:10px;padding:8px 7px;border-radius:10px}
.account-link:hover,.footer-link:hover{background:#181818}
.user-avatar{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#a64e13;color:#fff;font-size:13px;font-weight:700}
.account-copy{display:grid;gap:3px;min-width:0;flex:1}
.account-copy strong{font-size:12px;font-weight:600}
.account-copy small{font-size:11px;color:#777}
.account-chevron{width:16px!important;height:16px!important;color:#888}
.footer-link{padding:7px 12px;border-radius:8px;color:#858585;font-size:12px}
.main-area{position:relative;direction:rtl;display:flex;flex-direction:column;flex:1;min-width:0;height:100%;background:#000}
.topbar{height:62px;flex:0 0 62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;direction:rtl;background:rgba(0,0,0,.82);z-index:5}
.topbar-leading,.topbar-actions{display:flex;align-items:center;gap:11px;min-width:0}
.mobile-menu{display:none}
.model-picker{display:inline-flex;align-items:center;gap:8px;padding:8px 9px;border:0;border-radius:9px;background:transparent;cursor:pointer;color:#ededed}
.model-picker:hover{background:#161616}
.model-name{font-weight:600;font-size:15px}
.model-divider{color:#666}
.model-subtitle{font-size:13px;color:#a6a6a6}
.model-picker>svg{width:15px;height:15px;color:#888}
.topbar-leading{position:relative}
.model-menu{position:absolute;top:46px;right:0;z-index:10;width:235px;padding:15px;background:#1b1b1b;border:1px solid #303030;border-radius:14px;box-shadow:0 12px 40px #0009}
.model-menu label{display:block;margin-bottom:8px;color:#aaa;font-size:12px}
.model-menu select{width:100%;border:1px solid #393939;border-radius:9px;background:#101010;color:#eee;padding:10px}
.model-menu p{color:#888;font-size:11px;line-height:1.7;margin:10px 0 0}
.engine-status{display:inline-flex;align-items:center;gap:7px;color:#929292;font-size:11px;white-space:nowrap}
.status-dot{width:7px;height:7px;background:#9d8a5e;border-radius:50%;box-shadow:0 0 0 3px #9d8a5e18}
.engine-status.ready .status-dot{background:#4eaf79;box-shadow:0 0 0 3px #4eaf7918}
.engine-status.offline .status-dot{background:#d46b6b;box-shadow:0 0 0 3px #d46b6b18}
.upgrade-link{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;background:#153b69;color:#f1f6ff;font-size:12px;font-weight:600;white-space:nowrap}
.upgrade-link:hover{background:#1c4a80}
.upgrade-link span{font-size:15px}
.chat-stage{position:relative;display:flex;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#333 transparent;padding:0 24px 20px}
.welcome{width:min(100%,790px);margin:auto;align-self:center;padding:24px 0 30px;text-align:center;direction:rtl}
.welcome-symbol{display:grid;place-items:center;margin:0 auto 21px;width:50px;height:50px;border:1px solid #242424;border-radius:17px;background:#0e0e0e;color:#eee}
.welcome-symbol svg{width:32px;height:32px}
.eyebrow{margin:0 0 11px;color:#999;font-size:12px;letter-spacing:.1px}
.welcome h1{margin:0 0 12px;font-size:clamp(24px,2.8vw,34px);line-height:1.45;letter-spacing:-.5px;font-weight:600;color:#f3f3f3}
.welcome-subtitle{margin:0 auto;color:#8c8c8c;font-size:13px;line-height:1.9;max-width:510px}
.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:32px auto 0;text-align:right;max-width:680px}
.prompt-card{display:flex;align-items:center;gap:12px;min-height:72px;padding:13px 14px;border:1px solid #242424;border-radius:15px;background:#080808;text-align:right;cursor:pointer;transition:background .15s,border-color .15s;min-width:0}
.prompt-card:hover{background:#151515;border-color:#3a3a3a}
.prompt-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:#191919}
.prompt-icon svg{width:20px;height:20px}
.prompt-icon.violet{color:#c2a1ff;background:#281e37}
.prompt-icon.blue{color:#8dbbff;background:#182637}
.prompt-icon.green{color:#96d4aa;background:#1b2c23}
.prompt-icon.amber{color:#e5c080;background:#302719}
.prompt-card>span:last-child{display:grid;gap:5px;min-width:0}
.prompt-card strong{font-size:12px;font-weight:600;line-height:1.5}
.prompt-card small{font-size:11px;font-weight:400;color:#858585;line-height:1.6}
.message-list{width:min(100%,780px);margin:0 auto;padding:34px 0 28px;align-self:stretch;display:flex;flex-direction:column;gap:25px}
.message{display:grid;grid-template-columns:32px minmax(0,1fr);gap:13px;direction:rtl;align-items:start}
.message-avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:12px}
.message.user .message-avatar{background:#244e84;color:#fff}
.message.assistant .message-avatar{background:#171717;border:1px solid #2a2a2a;color:#f2f2f2}
.message-content{min-width:0;padding-top:3px}
.message-label{display:flex;align-items:baseline;gap:10px;margin:0 0 9px}
.message-label strong{font-size:13px;font-weight:650}
.message-label span{font-size:10px;color:#777}
.message-text{font-size:14px;line-height:2;color:#e3e3e3;white-space:pre-wrap;overflow-wrap:anywhere}
.message.user .message-text{color:#f3f3f3;background:#1b1b1b;border:1px solid #272727;border-radius:18px;padding:11px 15px;display:inline-block;max-width:100%}
.message.assistant .message-text{padding:0 1px}
.message.error .message-text{color:#f1b7b7}
.message-pending .message-text{color:#929292}
.typing-dots{display:flex;align-items:center;gap:5px;padding:6px 0}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:#9c9c9c;animation:pulse 1.1s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.16s}.typing-dots span:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.composer-region{position:relative;width:min(100%,900px);margin:0 auto;padding:10px 24px 13px;flex:0 0 auto;direction:rtl}
.composer{display:flex;align-items:flex-end;gap:9px;min-height:59px;padding:8px 10px 8px 9px;border:1px solid #2a2a2a;border-radius:28px;background:#1b1b1b;box-shadow:0 8px 34px #0005;transition:border-color .15s}
.composer:focus-within{border-color:#444}
.composer textarea{flex:1;min-width:0;min-height:40px;max-height:200px;resize:none;outline:0;border:0;background:transparent;color:#f4f4f4;font-size:14px;line-height:1.65;padding:10px 2px 6px;overflow-y:auto}
.composer textarea::placeholder{color:#909090}
.composer-icon-button{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border:0;border-radius:50%;background:transparent;color:#b9b9b9;cursor:pointer}
.composer-icon-button svg{width:21px;height:21px}
.plus-button{order:0}
.voice-button{order:3}
.send-button{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border:0;border-radius:50%;background:#e7e7e7;color:#101010;cursor:pointer;order:4}
.send-button:hover{background:#fff}
.send-button svg{width:20px;height:20px;stroke-width:2.1}
.send-button:disabled{background:#393939;color:#777}
.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 9px 0;color:#666;font-size:10px;line-height:1.7}
.tools-popover{position:absolute;bottom:81px;right:31px;z-index:15;width:205px;display:grid;gap:3px;padding:7px;background:#1c1c1c;border:1px solid #303030;border-radius:13px;box-shadow:0 10px 30px #0009}
.tools-popover button{border:0;border-radius:8px;background:transparent;text-align:right;padding:10px 11px;color:#d5d5d5;font-size:12px;cursor:pointer}
.tools-popover button:hover{background:#2a2a2a}
.toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);max-width:min(92%,520px);padding:11px 16px;border:1px solid #3b3b3b;border-radius:12px;background:#222;color:#eee;box-shadow:0 10px 32px #000a;font-size:12px;line-height:1.8;z-index:30;text-align:center}
.sidebar-backdrop{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:1200px){.welcome{transform:translateY(-2vh)}}
@media (max-width:900px){.sidebar{flex-basis:280px;width:280px}.topbar{padding:0 16px}.engine-status{display:none}.prompt-grid{gap:8px}.prompt-card{padding:11px}.composer-region{padding-inline:18px}}
@media (max-width:700px){body{font-size:13px}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(84vw,320px);max-width:320px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:none;flex-basis:auto}.sidebar.mobile-open{transform:translateX(0);box-shadow:16px 0 50px #0008}.sidebar-backdrop{position:fixed;inset:0;z-index:35;background:#000a}.sidebar-backdrop:not([hidden]){display:block}.sidebar-collapse{display:none}.mobile-menu{display:grid}.topbar{height:56px;flex-basis:56px;padding:0 11px;gap:5px}.topbar-leading{gap:4px}.model-picker{padding:7px;gap:5px}.model-name{font-size:14px}.model-subtitle{font-size:11px}.upgrade-link{padding:8px 9px;font-size:10px}.upgrade-link span{display:none}.chat-stage{padding:0 15px 14px}.welcome{padding:16px 0 22px}.welcome-symbol{margin-bottom:16px}.welcome h1{font-size:25px}.welcome-subtitle{font-size:12px}.prompt-grid{grid-template-columns:minmax(0,1fr);margin-top:23px;gap:8px}.prompt-card{min-height:61px}.message-list{padding-top:22px;gap:22px}.message{grid-template-columns:29px minmax(0,1fr);gap:9px}.message-avatar{width:28px;height:28px}.message-text{font-size:13px}.composer-region{padding:8px 10px max(10px,env(safe-area-inset-bottom))}.composer{min-height:55px;padding:6px;gap:4px}.composer textarea{font-size:13px;min-height:40px;padding-top:9px}.composer-icon-button,.send-button{flex-basis:36px;width:36px;height:36px}.composer-meta{font-size:9px;padding-inline:5px}.composer-meta span:last-child{max-width:70%;text-align:left}.model-menu{right:0;width:220px}.tools-popover{right:16px;bottom:75px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media (min-width:701px){.sidebar-collapsed .sidebar{flex-basis:0;width:0;padding-left:0;padding-right:0;border-right:0}.sidebar-collapsed .mobile-menu{display:grid}}

/* Public, visible SEO context inside the scrollable welcome stage. */
.seo-content{max-width:680px;margin:28px auto 18px;padding:20px 0 12px;border-top:1px solid #252525;color:#a8a8a8;text-align:right;direction:rtl;font-size:12px;line-height:1.95}
.seo-content h2{margin:0 0 10px;color:#e8e8e8;font-size:17px;font-weight:600;line-height:1.7}
.seo-content h3{margin:15px 0 6px;color:#d0d0d0;font-size:13px;font-weight:600;line-height:1.7}
.seo-content p{margin:0}
.seo-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0}
.seo-links a{color:#d3c6ff;text-decoration:none;border-bottom:1px solid #45405c}
.seo-links a:hover{text-decoration:underline}
@media(max-width:700px){.seo-content{margin-top:24px;padding-top:16px}.seo-content h2{font-size:15px}}


.message-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.speech-button{border:1px solid #333;border-radius:16px;background:#171717;color:#bdbdbd;padding:6px 11px;font-size:11px;cursor:pointer}
.speech-button:hover,.speech-button.speaking{border-color:#666;color:#f2f2f2;background:#222}
.voice-button.listening{background:#402020;color:#ffb1b1;box-shadow:0 0 0 3px #40202055}
.composer-icon-button:focus-visible,.speech-button:focus-visible{outline:2px solid #aaa;outline-offset:2px}

.message-actions{flex-wrap:wrap}
.speech-audio-wrap{flex:1 1 100%;width:100%;max-width:360px;margin-top:4px}
.speech-audio{display:block;width:100%;max-width:360px;height:38px}
