*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#f9fbf9;font-family:Segoe UI,Roboto,Arial,sans-serif}#root{min-height:100vh}.app{--accent:#2e7d32;--gold:#b8932f;--arabic-font:"Amiri", serif;--text-scale:1;--bg:#e8e3d4;--bg2:#efe9da;--paper:#faf7ee;--paper2:#f4efe2;--ink:#2a2f24;--ink-dim:#6a6f5f;--ink-faint:#8d917f;--line:#ddd5c0;--line-soft:#e6dfcd;--side:#1d3f24;--side2:#16331b;--side-ink:#dfe9d8;--side-dim:#9db59f;--bubble-user-1:var(--accent);--bubble-user-2:color-mix(in srgb, var(--accent) 70%, #000);--shadow:0 18px 50px -22px #28371e80}.app.mode-sepia{--bg:#e7dcc4;--bg2:#efe5cf;--paper:#fbf4e3;--paper2:#f4ead2;--ink:#3a2f1f;--ink-dim:#766548;--ink-faint:#9b8a6c;--line:#dccfb0;--line-soft:#e6dcc2;--side:#3a2f1c;--side2:#2c2415;--side-ink:#ece1c9;--side-dim:#bfae8d}.app.mode-night{--bg:#101713;--bg2:#0c120e;--paper:#16201a;--paper2:#121b15;--ink:#e7efe5;--ink-dim:#9fb3a3;--ink-faint:#6f8475;--line:#26352b;--line-soft:#1d2a22;--side:#0c150f;--side2:#070d09;--side-ink:#d7e6d9;--side-dim:#7e9583;--shadow:0 18px 50px -20px #0009}.app{background:linear-gradient(165deg, var(--bg), var(--bg2));height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;gap:14px;min-width:1080px;padding:14px;font-family:Plus Jakarta Sans,system-ui,sans-serif;display:flex;position:relative;overflow:hidden}.bg-layer{z-index:0;pointer-events:none;position:absolute;inset:0}.bg-glow{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%);filter:blur(10px);border-radius:50%;width:680px;height:680px;position:absolute;top:-14%;left:62%}.sidebar{width:262px;color:var(--side-ink);z-index:3;background:linear-gradient(#1d3f24,#16331b);border:1px solid #ffffff1a;border-radius:26px;flex-direction:column;flex-shrink:0;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 60px -28px #0f281299,inset 0 1px #ffffff14}.side-brand{flex-shrink:0;align-items:center;gap:11px;padding:20px 20px 16px;display:flex}.brand-moon{color:var(--gold);display:flex}.brand-name{letter-spacing:.01em;font-family:Reem Kufi,sans-serif;font-size:21px;font-weight:700}.new-chat{border:1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);background:color-mix(in srgb, var(--gold) 10%, transparent);color:var(--side-ink);cursor:pointer;border-radius:13px;flex-shrink:0;justify-content:center;align-items:center;gap:9px;margin:2px 16px 14px;padding:12px 16px;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:14px;font-weight:600;transition:all .18s;display:flex}.new-chat:hover{background:color-mix(in srgb, var(--gold) 20%, transparent);border-color:var(--gold);transform:translateY(-1px)}.side-label{letter-spacing:.13em;text-transform:uppercase;color:var(--side-dim);flex-shrink:0;padding:6px 22px 8px;font-size:11px;font-weight:700}.history{flex:1;min-height:0;padding:0 10px;overflow-y:auto}.history::-webkit-scrollbar{width:5px}.history::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:3px}.hist-group{margin-bottom:12px}.hist-time{color:var(--side-dim);letter-spacing:.06em;padding:6px 12px 4px;font-size:10.5px;font-weight:600}.hist-item{width:100%;color:var(--side-ink);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:9px 12px;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:13.4px;transition:all .14s;display:flex}.hist-item:hover{background:#ffffff0f}.hist-item.on{background:color-mix(in srgb, var(--gold) 16%, transparent)}.hist-dot{background:var(--gold);opacity:.7;border-radius:50%;flex-shrink:0;width:6px;height:6px}.hist-item.on .hist-dot{box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);opacity:1}.hist-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.side-user{border-top:1px solid #ffffff14;flex-shrink:0;align-items:center;gap:8px;padding:12px 14px;display:flex}.user-ava{background:linear-gradient(145deg, var(--gold), color-mix(in srgb, var(--gold) 50%, #000));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:flex}.user-meta{flex:1;min-width:0}.user-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.user-plan{color:var(--side-dim);font-size:10.5px}.icon-btn{border:1px solid var(--line);background:var(--paper);width:36px;height:36px;color:var(--ink-dim);cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .16s;display:flex}.icon-btn:hover{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}.icon-btn.ghost{color:var(--side-dim);background:0 0;border-color:#ffffff24}.icon-btn.ghost:hover{color:#ef8079;border-color:#ef807966}.main{z-index:2;flex-direction:column;flex:1;gap:14px;min-width:0;display:flex;position:relative}.topbar{-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);background:#fff9;border:1px solid #ffffffd9;border-radius:22px;flex-shrink:0;justify-content:space-between;align-items:center;padding:13px 22px;display:flex;box-shadow:0 16px 40px -26px #284b1e66,inset 0 1px #ffffffe6}.mode-night .topbar{background:#16201ab8;border-color:#ffffff12;box-shadow:0 16px 40px -26px #0006}.top-title{color:var(--accent);align-items:center;gap:9px;font-family:Reem Kufi,sans-serif;font-size:18px;font-weight:700;display:flex}.top-actions{gap:9px;display:flex}.topbar .icon-btn{color:color-mix(in srgb, var(--accent) 80%, var(--ink));background:#ffffff8c;border-color:#2e7d322e}.mode-night .topbar .icon-btn{color:var(--ink-dim);background:#ffffff0d;border-color:#ffffff1a}.topbar .icon-btn:hover{border-color:var(--accent);color:var(--accent);background:#fff}.mode-night .topbar .icon-btn:hover{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:var(--accent);color:var(--accent)}.chat-page{flex-direction:column;flex:1;min-height:0;display:flex}.scroll{border-radius:22px;flex:1;min-height:0;position:relative;overflow-y:auto}.scroll::-webkit-scrollbar{width:10px}.scroll::-webkit-scrollbar-thumb{background:#78785a40 padding-box padding-box;border:3px solid #0000;border-radius:6px}.thread{flex-direction:column;gap:22px;max-width:820px;margin:0 auto;padding:28px 24px 8px;display:flex}.welcome{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:0;max-width:760px;min-height:100%;margin:0 auto;padding:14px 24px 18px;display:flex;position:relative}.particles{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.particles span{background:radial-gradient(circle, var(--gold), transparent 70%);border-radius:50%;position:absolute;bottom:-10px}.motion .particles span{animation:linear infinite floatUp}@keyframes floatUp{0%{opacity:0;transform:translateY(0)translate(0)}10%{opacity:1}90%{opacity:1}to{transform:translateY(-78vh) translateX(var(--drift,0px));opacity:0}}.welcome-emblem{z-index:1;flex-shrink:0;justify-content:center;align-items:center;width:188px;height:188px;margin-bottom:4px;display:flex;position:relative}.mihrab-arch{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.welcome-medallion{z-index:1;position:relative}.motion .medallion-spin{transform-box:fill-box;transform-origin:50%;animation:48s linear infinite spin}.motion .medallion-spin-rev{transform-box:fill-box;transform-origin:50%;animation:36s linear infinite reverse spin}@keyframes spin{to{transform:rotate(360deg)}}.motion .crescent-glow{animation:3.6s ease-in-out infinite glowPulse}@keyframes glowPulse{0%,to{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 50%, transparent))}50%{filter:drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 85%, transparent))}}.motion .arch-draw{stroke-dasharray:900;stroke-dashoffset:900px;animation:2.4s forwards drawPath}.motion .arch-draw-2{animation-delay:.35s}.nomotion .arch-draw{stroke-dashoffset:0}@keyframes drawPath{to{stroke-dashoffset:0}}.besmele-line{font-family:var(--arabic-font);color:var(--accent);opacity:.92;white-space:nowrap;z-index:1;direction:rtl;margin:2px 0 8px;font-size:22px;position:relative}.motion .besmele-line{animation:.7s .5s both fadeUp}.welcome-title{color:var(--accent);letter-spacing:-.01em;white-space:nowrap;z-index:1;margin:0 0 11px;font-family:Reem Kufi,sans-serif;font-size:26px;font-weight:700;position:relative}.motion .welcome-title{animation:.7s .62s both fadeUp}.welcome-sub{color:var(--ink-dim);z-index:1;max-width:470px;margin:0 0 12px;font-size:14px;line-height:1.55;position:relative}.motion .welcome-sub{animation:.7s .72s both fadeUp}.ornament{opacity:.8;z-index:1;margin:0 0 14px;position:relative}.motion .ornament{animation:.7s .8s both fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.suggestions{z-index:1;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:600px;display:grid;position:relative}.suggestion{border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;border-radius:14px;align-items:center;gap:12px;padding:12px 15px;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:13.6px;font-weight:500;transition:all .16s;display:flex;box-shadow:0 2px 8px #28321e0a}.motion .suggestion{opacity:0;animation:.6s forwards fadeUp}.suggestion:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line));box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent) 40%, transparent);transform:translateY(-2px)}.sg-ic{background:color-mix(in srgb, var(--accent) 11%, transparent);width:38px;height:38px;color:var(--accent);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;transition:all .16s;display:flex}.suggestion:hover .sg-ic{background:color-mix(in srgb, var(--gold) 18%, transparent);color:var(--gold)}.msg{font-size:calc(15px * var(--text-scale));gap:12px;display:flex}.msg.user{justify-content:flex-end}.user-bubble{background:linear-gradient(145deg, var(--bubble-user-1), var(--bubble-user-2));color:#fff;max-width:74%;box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);white-space:pre-wrap;word-break:break-word;border-radius:18px 18px 5px;padding:13px 17px;font-weight:500;line-height:1.65}.motion .msg.user{animation:.4s both slideR}@keyframes slideR{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}.bot-avatar{background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--paper)), var(--paper));border:1px solid var(--line);width:38px;height:38px;color:var(--gold);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:flex;box-shadow:0 4px 12px #28321e0f}.bot-body{flex-direction:column;gap:8px;max-width:80%;display:flex}.motion .msg.bot{animation:.45s both slideL}@keyframes slideL{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:none}}.bot-bubble{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);white-space:pre-wrap;word-break:break-word;border-radius:5px 18px 18px;padding:13px 17px;line-height:1.65}.msg-meta{align-items:center;gap:6px;padding-left:2px;display:flex}.msg-time{color:var(--ink-faint);font-size:11.5px}.msg-actions{opacity:0;gap:3px;transition:all .2s;display:flex}.msg.bot:hover .msg-actions{opacity:1}.act{width:28px;height:28px;color:var(--ink-faint);cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:center;align-items:center;padding:0;transition:all .14s;display:flex}.act:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, transparent)}.act.speaking{color:#c5453f}.thinking-row{align-items:flex-start;gap:12px;display:flex}.thinking-bubble{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:5px 18px 18px;align-items:center;gap:5px;padding:14px 18px;display:flex}.thinking-dot{background:var(--accent);opacity:.45;border-radius:50%;width:7px;height:7px}.motion .thinking-dot{animation:1.2s ease-in-out infinite bounce}.motion .thinking-dot:nth-child(2){animation-delay:.15s}.motion .thinking-dot:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}.thinking-label{color:var(--ink-dim);margin-left:6px;font-size:13px}.error-banner{background:color-mix(in srgb, #c5453f 12%, var(--paper));border:1px solid color-mix(in srgb, #c5453f 30%, var(--line));color:#c5453f;text-align:center;border-radius:12px;max-width:640px;margin:0 auto;padding:12px 18px;font-size:13.5px}.verse-card{background:linear-gradient(160deg, var(--paper2), color-mix(in srgb, var(--gold) 6%, var(--paper2)));border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line));cursor:pointer;border-radius:13px;margin:4px 0;padding:18px 20px;transition:all .18s;position:relative;overflow:hidden}.verse-card:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));box-shadow:0 8px 24px -10px color-mix(in srgb, var(--gold) 30%, transparent);transform:translateY(-1px)}.verse-card:before{content:"";background:linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 40%, transparent));width:3px;position:absolute;top:0;bottom:0;left:0}.verse-corner{border:1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);width:13px;height:13px;position:absolute}.verse-corner.tl{border-bottom:none;border-right:none;top:7px;left:10px}.verse-corner.tr{border-bottom:none;border-left:none;top:7px;right:10px}.verse-corner.bl{border-top:none;border-right:none;bottom:7px;left:10px}.verse-corner.br{border-top:none;border-left:none;bottom:7px;right:10px}.verse-ar{font-family:var(--arabic-font);text-align:right;font-size:calc(23px * var(--text-scale));color:var(--accent);direction:rtl;margin:2px 6px 12px;font-weight:700;line-height:1.9}.verse-tr{font-size:calc(14.5px * var(--text-scale));color:var(--ink);margin:0 4px;font-style:italic;line-height:1.7}.verse-ref{color:var(--gold);font-size:calc(12.5px * var(--text-scale));letter-spacing:.02em;align-items:center;gap:8px;margin:12px 4px 0;font-weight:700;display:flex}.verse-ref-chip{background:color-mix(in srgb, var(--gold) 12%, transparent);border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);border-radius:20px;padding:2px 10px;font-family:Reem Kufi,sans-serif}.verse-open{opacity:.55;align-items:center;margin-left:auto;transition:all .14s;display:flex}.verse-card:hover .verse-open{opacity:1}.composer-wrap{flex-shrink:0;padding:0}.composer{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;align-items:flex-end;gap:10px;max-width:820px;margin:0 auto;padding:7px 8px 7px 10px;transition:all .18s;display:flex;box-shadow:0 6px 20px -12px #28321e4d}.composer:focus-within{border-color:color-mix(in srgb, var(--accent) 55%, var(--line));box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent)}.mic{width:42px;height:42px;color:var(--ink-dim);cursor:pointer;background:0 0;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .16s;display:flex;position:relative}.mic:hover:not(:disabled){color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, transparent)}.mic:disabled{opacity:.4;cursor:default}.mic.rec{color:#fff;background:linear-gradient(145deg,#d9433f,#a82e2b)}.mic-pulse{pointer-events:none;border:2px solid #d9433f;border-radius:14px;animation:1.1s ease-out infinite micPulse;position:absolute;inset:-4px}@keyframes micPulse{0%{opacity:.8;transform:scale(.85)}to{opacity:0;transform:scale(1.35)}}.composer-input{color:var(--ink);resize:none;background:0 0;border:none;outline:none;flex:1;min-height:42px;max-height:130px;padding:8px 4px;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:15px;line-height:1.5;overflow-y:auto}.composer-input::placeholder{color:var(--ink-faint)}.composer-input::-webkit-scrollbar{width:4px}.composer-input::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}.send{background:color-mix(in srgb, var(--accent) 14%, transparent);width:44px;height:44px;color:color-mix(in srgb, var(--accent) 55%, var(--ink-faint));cursor:pointer;border:none;border-radius:13px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-family:inherit;transition:all .18s;display:flex}.send.ready{background:linear-gradient(145deg, var(--accent), var(--bubble-user-2));color:#fff;box-shadow:0 8px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent)}.send.ready:hover{transform:translateY(-1px)scale(1.04)}.send:disabled{opacity:.38;cursor:default;box-shadow:none;transform:none}.composer-hint{text-align:center;max-width:820px;color:var(--ink-faint);margin:9px auto 0;font-size:11.5px}.panel-scrim{z-index:40;background:#14190f47;animation:.2s fade;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.settings-panel{z-index:50;background:var(--paper);border-left:1px solid var(--line);flex-direction:column;width:340px;height:100vh;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-20px 0 60px -30px #0006}.settings-panel.open{transform:none}.settings-head{border-bottom:1px solid var(--line-soft);flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.settings-head h3{color:var(--accent);align-items:center;gap:8px;margin:0;font-family:Reem Kufi,sans-serif;font-size:17px;font-weight:700;display:flex}.settings-body{flex:1;padding:8px 20px 16px;overflow-y:auto}.setting-section{border-bottom:1px solid var(--line-soft);padding:14px 0}.setting-section:last-child{border-bottom:none}.setting-title{color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;font-size:11.5px;font-weight:700;display:block}.swatch-row{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:5px;padding:2px;display:flex}.swatch span{border:2.5px solid #0000;border-radius:11px;width:38px;height:38px;transition:all .15s;display:block;box-shadow:inset 0 -3px 8px #00000026}.swatch.on span{border-color:var(--ink);transform:scale(1.07)}.swatch em{color:var(--ink-faint);font-size:10.5px;font-style:normal}.swatch.on em{color:var(--ink-dim);font-weight:600}.font-row{gap:8px;display:flex}.font-opt{border:1.5px solid var(--line);background:var(--paper2);cursor:pointer;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:12px 4px;transition:all .15s;display:flex}.font-opt span{color:var(--accent);font-size:22px;line-height:1}.font-opt em{color:var(--ink-faint);text-align:center;font-size:11px;font-style:normal}.font-opt.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--paper2))}.font-opt.on em{color:var(--ink-dim);font-weight:600}.range{width:100%;accent-color:var(--accent)}.scale-labels{color:var(--ink-faint);justify-content:space-between;margin-top:5px;font-size:11px;display:flex}.toggle-row{width:100%;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;padding:9px 0;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:13.5px;display:flex}.sw{background:var(--line);border-radius:14px;flex-shrink:0;width:42px;height:24px;transition:all .18s;position:relative}.sw.on{background:var(--accent)}.sw-knob{background:#fff;border-radius:50%;width:18px;height:18px;transition:all .18s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.sw.on .sw-knob{left:21px}.settings-foot{border-top:1px solid var(--line-soft);text-align:center;flex-shrink:0;padding:14px 20px}.settings-foot p{color:var(--ink-faint);margin:0;font-size:11px;line-height:1.5}.mode-night .suggestion{box-shadow:none}