/* ============================================================
   BotServiceHub — app.css  (Dark default, Light toggle, RTL)
   ============================================================ */
/* ── Custom Arabic Fonts ───────────────────────────────────── */
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/static/fonts/HandicraftsRegular.woff2') format('woff2'),
       url('/static/fonts/HandicraftsRegular.otf') format('opentype');
  font-weight: 100 499;
  font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/static/fonts/HandicraftsMedium.woff2') format('woff2'),
       url('/static/fonts/HandicraftsMedium.otf') format('opentype');
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/static/fonts/HandicraftsBold.woff2') format('woff2'),
       url('/static/fonts/HandicraftsBold.otf') format('opentype');
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: 'TheYearofTheCamel';
  src: url('/static/fonts/CamelLight.woff2') format('woff2'),
       url('/static/fonts/CamelLight.otf') format('opentype');
  font-weight: 100 300;
  font-display: swap;
}
@font-face {
  font-family: 'TheYearofTheCamel';
  src: url('/static/fonts/CamelRegular.woff2') format('woff2'),
       url('/static/fonts/CamelRegular.otf') format('opentype');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'TheYearofTheCamel';
  src: url('/static/fonts/CamelBold.woff2') format('woff2'),
       url('/static/fonts/CamelBold.otf') format('opentype');
  font-weight: 700 900;
  font-display: swap;
}
:root{--font-heading:'TheYearofHandicrafts','Tajawal',sans-serif;--font-body:'TheYearofTheCamel','Tajawal',sans-serif;--font-bot:'TheYearofTheCamel','Tajawal',sans-serif;--physics:#4fc3f7;--math:#ab47bc;--chem:#66bb6a;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--t:.25s ease}
[data-theme="dark"]{--bg:#0b1220;--bg2:#111c30;--bg3:#162038;--card:#131f36;--card2:#1a2845;--border:rgba(99,179,237,.14);--text:#ffffff;--text2:#e0e8f5;--text3:#b0c4de;--primary:#3b82f6;--primary2:#60a5fa;--accent:#06b6d4;--gold:#f59e0b;--danger:#ef4444;--glass:rgba(16,28,55,.6);--shadow:0 8px 32px rgba(0,0,0,.5);--navbar-bg:rgba(11,18,32,.88);--input-bg:#0e1929;--msg-user:#1e3a6e;--msg-bot:#131f36}
[data-theme="light"]{--bg:#f0f4fb;--bg2:#e4ecf7;--bg3:#d8e4f2;--card:#ffffff;--card2:#f7faff;--border:rgba(59,130,246,.15);--text:#1e293b;--text2:#334155;--text3:#64748b;--primary:#2563eb;--primary2:#3b82f6;--accent:#0891b2;--gold:#d97706;--danger:#dc2626;--glass:rgba(255,255,255,.75);--shadow:0 8px 32px rgba(59,130,246,.12);--navbar-bg:rgba(240,244,251,.92);--input-bg:#ffffff;--msg-user:#dbeafe;--msg-bot:#f7faff}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;direction:inherit;transition:background var(--t),color var(--t);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%}
button{cursor:pointer;font-family:inherit;border:none;color:inherit;background:none}
input,textarea{font-family:inherit}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* NAVBAR */
#navbar{position:fixed;top:0;right:0;left:0;z-index:100;background:var(--navbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem;gap:1rem;transition:background var(--t)}
.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:600;font-size:1.1rem;color:var(--text)}
.nav-brand img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}
.nav-brand .logo-fb{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.nav-links{display:flex;align-items:center;gap:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{background:none;color:var(--text2);padding:.45rem .9rem;border-radius:var(--r-sm);font-size:.9rem;transition:color var(--t),background var(--t)}
.nav-link:hover,.nav-link.active{color:var(--text);background:var(--border)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
#theme-toggle{background:var(--bg2);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all var(--t)}
#theme-toggle:hover{background:var(--bg3)}
.language-toggle{min-width:68px;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:.42rem .7rem;border-radius:var(--r-md);font-size:.82rem;font-weight:700;white-space:nowrap;transition:all var(--t)}
.language-toggle:hover{background:var(--bg3);border-color:var(--primary)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:.5rem 1.2rem;border-radius:var(--r-md);font-weight:700;font-size:.9rem;transition:opacity var(--t),transform var(--t);border:none}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2);padding:.5rem 1rem;border-radius:var(--r-md);font-size:.95rem;transition:all var(--t)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary2)}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;cursor:pointer}
/* BG ANIMATION */
.bg-anim{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-anim .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12;animation:orbF 20s ease-in-out infinite}
.orb1{width:500px;height:500px;background:var(--primary);top:-150px;right:-100px;animation-duration:22s}
.orb2{width:400px;height:400px;background:var(--accent);bottom:-100px;left:-100px;animation-duration:28s;animation-delay:-8s}
.orb3{width:300px;height:300px;background:var(--physics);top:40%;left:30%;animation-duration:18s;animation-delay:-5s}
@keyframes orbF{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-50px)}66%{transform:translate(-40px,30px)}}
.edu-symbols{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.edu-sym{position:absolute;color:var(--text3);opacity:.07;font-size:clamp(1.4rem,3vw,2.2rem);animation:symF linear infinite;user-select:none;font-style:italic;font-weight:700}
@keyframes symF{0%{transform:translateY(110vh) rotate(0deg);opacity:0}5%{opacity:.07}95%{opacity:.07}100%{transform:translateY(-10vh) rotate(360deg);opacity:0}}
/* HERO */
#s-landing{padding-top:70px}
.hero{position:relative;z-index:1;min-height:calc(100vh - 70px);display:flex;align-items:center;padding:3rem 2rem;gap:3rem;max-width:1200px;margin:0 auto}
.hero-text{flex:1;min-width:0}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:var(--primary2);padding:.4rem .9rem;border-radius:100px;font-size:.95rem;font-weight:600;margin-bottom:1.5rem}
.hero h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:1.25;margin-bottom:1.25rem}
.hero h1 .grad{background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text2);font-size:1.05rem;line-height:1.85;margin-bottom:2rem;max-width:480px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-img{flex:0 0 320px;position:relative;display:flex;align-items:center;justify-content:center}
.hero-img-ring{position:relative;z-index:1;width:270px;height:270px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);box-shadow:0 0 60px rgba(245,158,11,.25),0 0 120px rgba(245,158,11,.1)}
.hero-img-ring img{width:100%;height:100%;object-fit:cover}
.hero-img-ring .img-fb{width:100%;height:100%;background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;align-items:center;justify-content:center;font-size:5rem}
.float-sym{position:absolute;font-size:1.5rem;opacity:.45;animation:fSym 4s ease-in-out infinite}
.float-sym:nth-child(1){top:8%;right:2%;animation-delay:0s}
.float-sym:nth-child(2){top:22%;left:-2%;animation-delay:.8s}
.float-sym:nth-child(3){bottom:18%;right:-2%;animation-delay:1.6s}
.float-sym:nth-child(4){bottom:8%;left:8%;animation-delay:2.4s}
@keyframes fSym{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* STATS */
.stats-bar{position:relative;z-index:1;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.5rem 2rem}
.stats-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat-num{font-family:var(--font-heading);font-size:2rem;font-weight:600;background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.stat-label{color:var(--text2);font-size:.95rem;margin-top:.2rem}
/* SECTION */
.section{position:relative;z-index:1;padding:4rem 2rem;max-width:1200px;margin:0 auto}
.section-title{font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;text-align:center;margin-bottom:2.5rem}
.section-title span{background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* SUBJECT CARDS */
.subject-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.subject-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;transition:transform var(--t),box-shadow var(--t)}
.subject-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.subject-card.physics{border-top:3px solid var(--physics)}
.subject-card.math{border-top:3px solid var(--math)}
.subject-card.chem{border-top:3px solid var(--chem)}
.subject-card-icon{font-size:2.5rem;margin-bottom:1rem}
.subject-card h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;margin-bottom:.75rem}
.subject-card ul{list-style:none}
.subject-card ul li{color:var(--text2);font-size:.87rem;padding:.3rem 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.subject-card ul li:last-child{border-bottom:none}
.subject-card ul li::before{content:'›';color:var(--text3)}
/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem;transition:transform var(--t),border-color var(--t);text-align:center}
.feature-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.feature-icon{font-size:1.8rem;margin-bottom:.7rem}
.feature-title{font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.feature-desc{color:var(--text2);font-size:.95rem;line-height:1.5}
/* TELEGRAM */
.tg-section{position:relative;z-index:1;background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(6,182,212,.06));border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4rem 2rem;text-align:center}
.tg-inner{max-width:650px;margin:0 auto}
.tg-qr{width:130px;height:130px;border-radius:var(--r-md);border:3px solid var(--primary);object-fit:cover;margin:0 auto 1.25rem;display:block}
.tg-qr-fb{width:130px;height:130px;border-radius:var(--r-md);border:3px solid var(--primary);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:3rem;margin:0 auto 1.25rem}
.tg-handle{color:var(--primary2);font-size:1.1rem;font-weight:700;margin:.65rem 0}
.tg-link{display:inline-flex;align-items:center;gap:.5rem;background:#2AABEE;color:#fff;padding:.65rem 1.5rem;border-radius:var(--r-md);font-weight:700;font-size:.9rem;transition:opacity var(--t)}
.tg-link:hover{opacity:.9}
/* CTA */
.cta-section{position:relative;z-index:1;text-align:center;padding:4rem 2rem;background:linear-gradient(180deg,transparent,var(--bg2),transparent)}
.cta-section h2{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;margin-bottom:1rem}
.cta-section p{color:var(--text2);margin-bottom:2rem}
.btn-cta{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:.85rem 2.5rem;border-radius:var(--r-lg);font-family:var(--font-body);font-size:1.05rem;font-weight:600;transition:transform var(--t),box-shadow var(--t);box-shadow:0 4px 20px rgba(59,130,246,.3)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(59,130,246,.4)}
/* FOOTER */
footer{position:relative;z-index:1;background:var(--bg2);border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;color:var(--text3);font-size:.95rem}
/* PWA */
.pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;animation:slideUp .4s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pwa-actions{display:flex;gap:.5rem;flex-shrink:0}
/* AUTH MODAL */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.5rem;width:100%;max-width:440px;animation:mIn .3s ease}
@keyframes mIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:.4rem}
.modal-sub{color:var(--text2);text-align:center;font-size:.9rem;margin-bottom:1.75rem}
.form-group{margin-bottom:1.1rem}
.form-label{font-size:.95rem;font-weight:600;color:var(--text2);margin-bottom:.4rem;display:block}
.form-input{width:100%;background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:.72rem 1rem;border-radius:var(--r-md);font-size:.92rem;transition:border-color var(--t);outline:none;direction:rtl}
.form-input:focus{border-color:var(--primary)}
.auth-toggle{text-align:center;margin-top:1.25rem;color:var(--text2);font-size:.88rem}
.auth-toggle button{background:none;color:var(--primary2);font-size:.88rem;font-weight:600;padding:.1rem .3rem;transition:color var(--t)}
.auth-toggle button:hover{color:var(--accent)}
.auth-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171;padding:.65rem 1rem;border-radius:var(--r-sm);font-size:.88rem;margin-bottom:1rem}
.auth-submit{width:100%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:.8rem;border-radius:var(--r-md);font-family:var(--font-body);font-size:1rem;font-weight:600;margin-top:.5rem;transition:opacity var(--t)}
.auth-submit:hover{opacity:.9}
.auth-submit:disabled{opacity:.6;cursor:default}
/* BOT SELECTOR */
#bot-selector{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem}
.selector-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;max-width:620px;max-height:90vh;overflow-y:auto;animation:mIn .3s ease;padding:2rem}
.selector-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
.selector-header h2{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;flex:1}
.back-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:.42rem .85rem;border-radius:var(--r-sm);font-size:.88rem;transition:all var(--t)}
.back-btn:hover{border-color:var(--primary);color:var(--primary2)}
.sel-close{background:none;color:var(--text3);font-size:1.3rem;padding:.2rem .4rem;transition:color var(--t)}
.sel-close:hover{color:var(--text)}
.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
.track-btn{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-md);padding:1.1rem 1rem;text-align:right;display:flex;align-items:center;gap:.75rem;color:var(--text);transition:border-color var(--t),transform var(--t),background var(--t)}
.track-btn:hover{border-color:var(--primary);transform:translateY(-2px);background:var(--bg2)}
.track-emoji{font-size:1.6rem}
.track-name{font-weight:700;font-size:.92rem}
.track-sub{color:var(--text2);font-size:.78rem;margin-top:.15rem}
.year-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.year-btn{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-md);padding:1.5rem;text-align:center;font-weight:700;font-size:1rem;color:var(--text);transition:border-color var(--t),transform var(--t)}
.year-btn:hover{border-color:var(--primary);transform:translateY(-2px)}
.year-icon{font-size:2rem;display:block;margin-bottom:.5rem}
.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.subject-btn{background:var(--card2);border:2px solid var(--border);border-radius:var(--r-md);padding:.95rem;display:flex;align-items:center;gap:.7rem;text-align:right;color:var(--text);transition:border-color var(--t),transform var(--t)}
.subject-btn:hover{transform:translateY(-2px)}
.subject-btn.physics:hover{border-color:var(--physics)}
.subject-btn.math:hover{border-color:var(--math)}
.subject-btn.chem:hover{border-color:var(--chem)}
.subject-btn.business:hover{border-color:#f59e0b}
.subject-btn.bio:hover{border-color:#10b981}
.subject-btn.arabic:hover{border-color:#8b5cf6}
.sub-emoji{font-size:1.7rem}
.sub-name{font-weight:700;font-size:.88rem}
.sub-id{color:var(--text2);font-size:.8rem;font-weight:600;margin-top:.1rem}
.coming-soon-box{text-align:center;padding:2rem;background:var(--bg2);border-radius:var(--r-lg)}
.cs-icon{font-size:3rem;margin-bottom:1rem}
.coming-soon-box p{color:var(--text2);margin-bottom:1.5rem;line-height:1.7;font-size:1rem}
/* CHAT */
#s-chat{display:flex;height:100vh;padding-top:70px;position:relative;overflow:hidden}
.chat-sidebar{width:272px;flex-shrink:0;background:var(--bg2);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;height:100%;overflow:hidden;transition:transform var(--t)}
.sidebar-header{padding:.85rem 1rem .7rem;border-bottom:1px solid var(--border)}
.sidebar-header h3{font-family:var(--font-heading);font-weight:700;font-size:.92rem;margin-bottom:.7rem}
.sidebar-search{width:100%;background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:.5rem .8rem;border-radius:var(--r-sm);font-size:.83rem;outline:none;text-align:start}
.sidebar-list{flex:1;overflow-y:auto;padding:.35rem 0}
.sidebar-group-title{font-size:.7rem;font-weight:700;color:var(--text3);padding:.3rem 1rem;letter-spacing:.05em}
.sidebar-bot-btn{width:100%;background:none;padding:.6rem 1rem;display:flex;align-items:center;gap:.6rem;text-align:start;transition:background var(--t)}
.sidebar-bot-btn:hover{background:var(--bg3)}
.sidebar-bot-btn.active{background:rgba(59,130,246,.12)}
.sb-emoji{font-size:1.25rem;flex-shrink:0}
.sb-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sub{font-size:.7rem;color:var(--text3)}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}
.chat-header{background:var(--card);border-bottom:1px solid var(--border);padding:.7rem 1.2rem;display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.toggle-sidebar{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:.4rem .6rem;border-radius:var(--r-sm);font-size:1rem;display:none}
.bot-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;border:2px solid var(--border);overflow:hidden}
.bot-avatar img{width:100%;height:100%;object-fit:cover}
.bot-header-name{font-weight:700;font-size:1rem}
.bot-header-desc{color:var(--text3);font-size:.76rem;margin-top:.1rem}
.chat-header-actions{display:flex;gap:.35rem;flex-shrink:1;flex-wrap:wrap;margin-inline-start:auto}
.chat-action-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:.3rem .5rem;border-radius:var(--r-sm);font-size:.82rem;transition:all var(--t);white-space:nowrap;flex-shrink:0}
.chat-action-btn:hover{border-color:var(--primary);color:var(--primary2)}
.chat-bg-sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(8rem,18vw,13rem);opacity:.03;pointer-events:none;z-index:0;user-select:none}
.chat-messages{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;position:relative;z-index:1;direction:rtl}
.msg-wrap{display:flex;align-items:flex-end;gap:.55rem;animation:msgIn .25s ease;width:100%}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-wrap.user{justify-content:flex-start!important}
.msg-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.msg-av.bot-av{background:var(--bg2);border:1px solid var(--border)}
.msg-av.bot-av img{width:100%;height:100%;object-fit:cover}
.msg-av.user-av{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700}
.msg-stack{display:flex;flex-direction:column;max-width:73%;min-width:0}
.msg-wrap.user .msg-stack{align-items:flex-end}
.msg-wrap.bot{justify-content:flex-start!important}
.msg-wrap.bot .msg-stack{align-items:flex-start}
.msg-bubble{max-width:100%;padding:.75rem 1.05rem;border-radius:var(--r-lg);font-size:1rem;line-height:1.8;word-break:normal;overflow-wrap:break-word;white-space:normal}
.msg-wrap.bot .msg-bubble{background:var(--msg-bot);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;font-family:var(--font-bot);font-size:1.05rem;line-height:1.9;font-weight:500;writing-mode:horizontal-tb}
.msg-wrap.user .msg-bubble{background:var(--msg-user);border-radius:var(--r-lg) var(--r-lg) 0 var(--r-lg);writing-mode:horizontal-tb}
.msg-bubble h1{font-size:1.3rem;font-family:var(--font-heading);margin:.6rem 0 .35rem;font-weight:800}.msg-bubble h2{font-size:1.15rem;font-family:var(--font-heading);margin:.5rem 0 .3rem;font-weight:700}.msg-bubble h3{font-size:1.05rem;font-family:var(--font-heading);margin:.45rem 0 .25rem;font-weight:700}
.msg-bubble p{margin:.3rem 0}
.msg-bubble ul,.msg-bubble ol{padding-right:1.2rem;margin:.3rem 0}
.msg-bubble code{background:rgba(0,0,0,.2);padding:.1rem .3rem;border-radius:4px;font-size:.84em}
.msg-bubble pre{background:rgba(0,0,0,.2);padding:.7rem;border-radius:var(--r-sm);overflow-x:auto;margin:.5rem 0}
.msg-bubble pre code{background:none;padding:0}
.msg-time{font-size:.7rem;color:var(--text3);margin:.2rem .3rem 0;white-space:nowrap}
.typing-wrap{display:flex;align-items:flex-end;gap:.55rem}
.typing-bubble{padding:.6rem 1rem;background:var(--msg-bot);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;display:flex;gap:.35rem;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text3);animation:dotB 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes dotB{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.chat-welcome{text-align:center;padding:2rem 1rem;color:var(--text2);font-size:.92rem}
.chat-welcome .w-icon{font-size:2.5rem;margin-bottom:.7rem}
.chat-welcome h3{font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:.45rem}
.quick-qs{padding:.7rem 1.2rem .45rem;display:flex;flex-wrap:wrap;gap:.45rem;flex-shrink:0;border-top:1px solid var(--border);z-index:1;background:var(--bg)}
.quick-q{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:.42rem .9rem;border-radius:100px;font-size:.95rem;transition:all var(--t);white-space:nowrap}
.quick-q:hover{border-color:var(--primary);color:var(--primary2)}
.chat-input-bar{padding:.7rem 1.2rem .9rem;background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;z-index:1}
.file-preview{display:flex;align-items:center;gap:.75rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.55rem .8rem;margin-bottom:.45rem;font-size:.95rem}
.file-preview-media{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.05);overflow:hidden;flex-shrink:0}
.file-preview-thumb{width:100%;height:100%;object-fit:cover}
.file-preview-icon{font-size:1.4rem;color:var(--text2)}
.file-preview-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.file-preview-name-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.file-name{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:.8rem;color:var(--text3);white-space:nowrap}
.file-preview-status{font-size:.82rem;color:var(--text2)}
.file-preview-progress{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.file-preview-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:width .2s ease}
.file-preview-actions{display:flex;align-items:center;gap:.4rem}
.file-action-btn,.remove-file{background:none;border:1px solid var(--border);color:var(--text2);font-size:.82rem;padding:.28rem .6rem;border-radius:999px}
.file-action-btn:hover,.remove-file:hover{border-color:var(--primary);color:var(--primary2)}
.remove-file{color:var(--danger)}
.chat-form{display:flex;align-items:flex-end;gap:.6rem;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:.45rem .6rem;transition:border-color var(--t)}
.chat-form:focus-within{border-color:var(--primary)}
.chat-ta{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:1rem;resize:none;min-height:36px;max-height:130px;padding:.3rem .4rem;line-height:1.55;text-align:start;unicode-bidi:plaintext}
.chat-ta::placeholder{color:var(--text3)}
.attach-btn,.send-btn{flex-shrink:0;width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all var(--t)}
.attach-btn{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.attach-btn:hover{border-color:var(--primary);color:var(--primary2)}
.formula-palette{display:flex;flex-direction:column;gap:.55rem;padding:.9rem 1rem .7rem;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(15,23,42,.78));border-top:1px solid var(--border);border-bottom:1px solid rgba(255,255,255,.04)}
.formula-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.formula-label{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:.35rem .7rem;border-radius:999px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:var(--primary2);font-size:.74rem;font-weight:800}
.formula-key{min-width:48px;padding:.5rem .8rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--text);font-size:1rem;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.formula-key.wide{min-width:64px}
.formula-key:hover{transform:translateY(-1px);border-color:var(--primary);color:#fff;background:rgba(59,130,246,.16)}
.send-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.send-btn:hover{opacity:.9;transform:scale(1.05)}
.send-btn:disabled{opacity:.5;cursor:default;transform:none}
.attach-bubble{padding:.6rem .75rem!important}
.attach-card{display:flex;align-items:center;gap:.75rem;min-width:220px}
.attach-thumb{width:72px;height:72px;border-radius:14px;object-fit:cover;border:1px solid var(--border);background:#fff;flex-shrink:0}
.attach-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--bg3);font-size:1.8rem;flex-shrink:0}
.attach-meta{display:flex;flex-direction:column;gap:.18rem;min-width:0;flex:1}
.attach-name-row{display:flex;align-items:center;gap:.45rem}
.attach-name{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:rgba(34,197,94,.16);color:#22c55e;font-weight:900;font-size:.8rem}
.attach-size{font-size:.78rem;color:var(--text3)}
.attach-status{font-size:.82rem;color:var(--text2)}
.attach-status.error{color:var(--danger)}
.attach-status.uploaded{color:#22c55e}
.attach-status.processing,.attach-status.uploading{color:var(--primary2)}
.attach-progress{height:5px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:.15rem}
.attach-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:width .2s ease}
.chat-meta{display:flex;justify-content:space-between;margin-top:.3rem}
.daily-lim{font-size:.73rem;color:var(--text3)}
/* DASHBOARD */
#s-dashboard{padding-top:70px;min-height:100vh;background:var(--bg)}
.dash-inner{max-width:1100px;margin:0 auto;padding:2rem}
.dash-title{font-family:var(--font-heading);font-size:1.55rem;font-weight:800;margin-bottom:1.7rem;display:flex;align-items:center;gap:.6rem}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.2rem}
.dc-label{color:var(--text2);font-size:.95rem;margin-bottom:.35rem}
.dc-value{font-family:var(--font-heading);font-size:1.75rem;font-weight:900;background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dc-sub{color:var(--text3);font-size:.76rem;margin-top:.2rem}
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.dash-card h3{font-family:var(--font-heading);font-weight:700;font-size:.95rem;margin-bottom:.9rem}
.chart-bars{display:flex;align-items:flex-end;gap:.45rem;height:110px}
.chart-bar{flex:1;background:linear-gradient(180deg,var(--primary),var(--primary2));border-radius:4px 4px 0 0;opacity:.65;min-height:4px;transition:opacity var(--t)}
.chart-bar:hover{opacity:1}
.chart-labels{display:flex;gap:.45rem;margin-top:.45rem}
.chart-label{flex:1;text-align:center;font-size:.7rem;color:var(--text3)}
.prog-list{display:flex;flex-direction:column;gap:.85rem}
.prog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;font-size:.86rem}
.prog-bg{height:7px;background:var(--bg3);border-radius:100px;overflow:hidden}
.prog-fill{height:100%;border-radius:100px;transition:width 1s ease}
.prog-fill.physics{background:var(--physics)}
.prog-fill.math{background:var(--math)}
.prog-fill.chem{background:var(--chem)}
.conv-list{display:flex;flex-direction:column;gap:.6rem}
.conv-item{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-md);padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem;cursor:pointer;transition:border-color var(--t),transform var(--t)}
.conv-item:hover{border-color:var(--primary);transform:translateX(-2px)}
.conv-emoji{font-size:1.4rem;flex-shrink:0}
.conv-title{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta{color:var(--text3);font-size:.76rem;margin-top:.12rem}
.conv-count{background:var(--bg3);color:var(--text2);font-size:.73rem;padding:.18rem .5rem;border-radius:100px;flex-shrink:0}
/* TRAINING */
#s-training{padding-top:70px;min-height:100vh;background:var(--bg)}
/* كتابك — same convention as the other views: clears the fixed navbar and
   scrolls with the page. Deliberately not #s-chat's height:100vh/overflow:hidden,
   which would make the lesson a nested scroll region and clip the action bar. */
#s-book{padding-top:70px;min-height:100vh;background:var(--bg)}
.training-container{max-width:760px;margin:0 auto;padding:1.5rem 1rem 3rem;position:relative;z-index:1}
.training-topbar{display:flex;justify-content:space-between;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:1rem}
.training-mode-badge{font-size:1.05rem;font-weight:800;padding:.45rem 1.1rem;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.28)}
.training-stats-row{display:flex;gap:.55rem;flex-wrap:wrap}
.training-stat{min-width:88px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;text-align:center;box-shadow:var(--shadow)}
.training-stat-label{display:block;color:var(--text3);font-size:.72rem;margin-bottom:.2rem}
.training-stat strong{font-size:.95rem}
.training-progress{margin-bottom:1.1rem}
.training-progress-label{margin-top:.45rem;color:var(--text3);font-size:.82rem}
.training-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;min-height:260px;box-shadow:var(--shadow)}
.training-setup{display:flex;flex-direction:column;gap:1rem}
.training-setup-title{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;text-align:center}
.training-setup-sub{color:var(--text2);text-align:center;line-height:1.8;font-size:.95rem}
.t-setup-switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.t-switch-btn{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:1rem 1.1rem;border-radius:16px;font-size:1.05rem;font-weight:800;transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t)}
.t-switch-btn:hover{border-color:var(--primary);transform:translateY(-1px)}
.t-switch-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(59,130,246,.25)}
.t-limited-box{display:flex;flex-direction:column;gap:1rem;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:16px;padding:1rem}
.t-setup-switches.mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.t-switch-btn.mini{font-size:.9rem;font-weight:700;padding:.8rem .85rem;border-radius:12px}
.training-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.training-field label{display:block;color:var(--text2);font-size:.88rem;font-weight:700;margin-bottom:.35rem}
.training-field input,.training-field select{width:100%;background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:.72rem .9rem;border-radius:12px;font-size:.95rem;outline:none}
.training-field input:focus,.training-field select:focus{border-color:var(--primary)}
.training-note{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.18);color:var(--text2);border-radius:12px;padding:.85rem .95rem;line-height:1.8;font-size:.9rem}
.training-start-btn{width:100%;border:none;border-radius:12px;padding:.9rem 1rem;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:1rem;font-weight:800;transition:transform var(--t),box-shadow var(--t)}
.training-start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.3)}
.training-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:.9rem;color:var(--text3)}
.training-q-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}
.training-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;color:var(--text2)}
.training-q-text{font-size:1.1rem;line-height:1.95;margin-bottom:1.2rem;font-weight:700;direction:rtl;text-align:right;writing-mode:horizontal-tb}
.training-options{display:flex;flex-direction:column;gap:.65rem}
.training-opt{display:flex;align-items:center;gap:.85rem;width:100%;padding:.9rem 1rem;border:2px solid var(--border);border-radius:12px;background:var(--bg2);color:var(--text);font-size:.98rem;text-align:right;transition:all var(--t)}
.training-opt:hover:not(.t-opt-disabled){border-color:var(--primary);transform:translateY(-1px)}
.training-opt-binary{justify-content:center;font-weight:800}
.training-opt-key{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;border-radius:8px;background:var(--bg3);color:var(--text2);font-weight:700;font-size:.86rem;flex-shrink:0}
.training-opt-text{flex:1;line-height:1.7}
.training-inline-input,.training-text-answer{width:100%;background:var(--input-bg);border:2px solid var(--border);color:var(--text);padding:.78rem .9rem;border-radius:12px;font-size:.98rem;outline:none;font-family:inherit}
.training-inline-input{display:inline-flex;vertical-align:middle;min-width:160px;max-width:240px;margin:0 .35rem}
.training-inline-input:focus,.training-text-answer:focus{border-color:var(--primary)}
.training-text-answer-wrap{display:flex;flex-direction:column;gap:.7rem}
.training-text-submit-btn,.training-print-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.78rem 1rem;border-radius:10px;font-size:.95rem;font-weight:800;transition:transform var(--t),box-shadow var(--t);font-family:inherit}
.training-text-submit-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none}
.training-print-btn{background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.35);color:#38bdf8}
.training-text-submit-btn:hover,.training-print-btn:hover{transform:translateY(-1px)}
.training-print-actions{display:flex;justify-content:flex-start;gap:.65rem;margin-top:1rem}
.training-text-answer-correct,.training-inline-input.training-text-answer-correct{border-color:#22c55e!important;background:rgba(34,197,94,.1)!important}
.training-text-answer-partial,.training-inline-input.training-text-answer-partial{border-color:#f59e0b!important;background:rgba(245,158,11,.1)!important}
.training-text-answer-wrong,.training-inline-input.training-text-answer-wrong{border-color:var(--danger)!important;background:rgba(239,68,68,.1)!important}
.training-hint-wrap{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.training-hint-btn{border:1px solid rgba(59,130,246,.35);background:rgba(59,130,246,.12);color:var(--primary2);border-radius:999px;padding:.45rem .8rem;font-size:.82rem;font-weight:700;cursor:pointer;transition:all var(--t);font-family:inherit}
.training-hint-btn:hover{transform:translateY(-1px);border-color:var(--primary);color:var(--text)}
.training-hint-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.training-hint-box{width:100%;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:10px;padding:.65rem .8rem;color:var(--text2);font-size:.9rem;line-height:1.7}
.training-hint-meta{width:100%;text-align:left;color:var(--text3);font-size:.76rem}
.t-opt-disabled{cursor:default}
.t-opt-selected{border-color:var(--primary)}
.t-opt-selected .training-opt-key{background:var(--primary);color:#fff}
.t-opt-correct{border-color:#22c55e!important;background:rgba(34,197,94,.1)!important}
.t-opt-correct .training-opt-key{background:#22c55e!important;color:#fff!important}
.t-opt-wrong{border-color:var(--danger)!important;background:rgba(239,68,68,.1)!important}
.t-opt-wrong .training-opt-key{background:var(--danger)!important;color:#fff!important}
.training-feedback{margin-top:1.1rem;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem}
.training-feedback strong{display:block;margin-bottom:.35rem}
.training-feedback p{line-height:1.8;color:var(--text2)}
.t-fb-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1rem;border-radius:12px;font-size:1rem;font-weight:800;margin-bottom:.8rem}
.t-fb-correct{background:rgba(34,197,94,.12);color:#22c55e}
.t-fb-partial{background:rgba(245,158,11,.12);color:#f59e0b}
.t-fb-wrong{background:rgba(239,68,68,.12);color:#f87171}
.t-fb-correct-line{padding:.7rem .9rem;background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.14);border-radius:10px;color:var(--text2);line-height:1.8;margin-bottom:.75rem}
.t-fb-explanation{padding:.7rem .9rem;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text2);line-height:1.8;margin-bottom:.75rem}
.t-fb-next-step{padding:.35rem .2rem .1rem;color:var(--primary2);line-height:1.7;font-size:.9rem}
.training-feedback-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.9rem}
.training-next-btn,.training-secondary-btn,.training-similar-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.75rem 1rem;border-radius:10px;font-size:.95rem;font-weight:700;transition:transform var(--t),box-shadow var(--t)}
.training-next-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.training-secondary-btn{background:transparent;border:1px solid var(--border);color:var(--text2)}
.training-similar-btn{background:rgba(14,165,233,.16);border:1px solid rgba(14,165,233,.35);color:#38bdf8}
.training-next-btn:hover,.training-secondary-btn:hover,.training-similar-btn:hover{transform:translateY(-1px)}
.training-error{text-align:center;padding:2rem 1rem;color:var(--danger);background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.16);border-radius:14px;margin-top:1rem}
.training-error p{margin-bottom:1rem;font-weight:600}
.training-retry-btn{padding:.6rem 1.4rem;border:1px solid var(--danger);border-radius:10px;background:transparent;color:var(--danger);font-weight:700}
/* ADAPTIVE QUIZ */
.quiz-chapter-grid{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;max-height:180px;overflow-y:auto;padding:4px}
.quiz-ch-tag{padding:6px 14px;border-radius:50px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:.82rem;cursor:pointer;transition:all .2s;user-select:none;white-space:nowrap}
.quiz-ch-tag:hover{border-color:var(--primary2);color:var(--primary2)}
.quiz-ch-tag.selected{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.quiz-ch-tag.all-tag{font-weight:700}
.quiz-ch-tag.all-tag.selected{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:var(--primary);box-shadow:0 0 10px rgba(59,130,246,.4)}
.quiz-progress-bar{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.8rem;color:var(--text3)}
.quiz-progress-track{flex:1;height:10px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#fb923c);border-radius:999px;transition:width .3s ease}
.quiz-loading{text-align:center;padding:40px 20px;color:var(--text2)}
.quiz-loading .spinner{margin:0 auto 12px}
.quiz-q-card{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;margin-bottom:10px;direction:rtl}
.quiz-q-num{font-size:.75rem;color:var(--text3);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.quiz-q-diff{padding:2px 8px;border-radius:50px;font-size:.7rem;font-weight:600}
.quiz-q-diff.easy{background:rgba(72,187,120,.15);color:#48bb78}
.quiz-q-diff.medium{background:rgba(237,137,54,.15);color:#ed8936}
.quiz-q-diff.hard{background:rgba(245,101,101,.15);color:#f56565}
.quiz-q-text{font-size:.95rem;font-weight:600;line-height:1.7;margin-bottom:10px;direction:rtl;text-align:right;writing-mode:horizontal-tb}
.quiz-choice{display:block;width:100%;text-align:right;padding:10px 14px;margin-bottom:6px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:.88rem;cursor:pointer;transition:all .2s;font-family:inherit;line-height:1.6}
.quiz-choice:hover{border-color:var(--primary2);background:rgba(59,130,246,.06)}
.quiz-choice.chosen{border-color:var(--primary);background:rgba(59,130,246,.12);font-weight:600}
.quiz-concept-input{width:100%;padding:10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg2);color:var(--text);font-family:inherit;font-size:.88rem;resize:vertical;min-height:60px;direction:rtl}
.quiz-concept-input:focus{border-color:var(--primary);outline:none}
.quiz-result-box{text-align:center;padding:24px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-lg)}
.quiz-result-score{font-size:3rem;font-weight:900;font-family:var(--font-heading);background:linear-gradient(135deg,var(--primary2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.quiz-result-label{font-size:.95rem;color:var(--text2);margin-top:4px}
.quiz-result-bar{height:8px;background:var(--bg3);border-radius:100px;overflow:hidden;margin:16px 0}
.quiz-result-fill{height:100%;border-radius:100px;transition:width 1s ease}
.quiz-review-card{padding:8px 12px;margin-bottom:6px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);font-size:.85rem}
.quiz-review-answer{font-size:.8rem;padding:0 10px}
.quiz-review-answer.wrong{color:#f56565}
.quiz-review-answer.correct{color:#48bb78}
/* UTILS */
.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin .7s linear infinite;margin:1.5rem auto}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--text3)}
.es-icon{font-size:2.5rem;margin-bottom:.7rem}
/* RESPONSIVE */
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr)}.subject-cards{grid-template-columns:1fr}.hero{flex-direction:column;text-align:center;min-height:auto;padding:2rem 1.5rem}.hero-img{flex:none}.hero p{margin:0 auto 2rem}.hero-btns{justify-content:center}.stats-inner{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:repeat(2,1fr)}.dash-2col{grid-template-columns:1fr}}
@media(max-width:640px){#navbar{padding:.65rem 1rem}.nav-links{display:flex!important;flex:1 1 auto;min-width:0;max-width:none;gap:.3rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}.nav-link{white-space:nowrap;font-size:.8rem;padding:.35rem .55rem;flex:0 0 auto}.features-grid{grid-template-columns:1fr}.track-grid{grid-template-columns:1fr}.subject-grid{grid-template-columns:1fr}.chat-sidebar{position:fixed;top:70px;right:0;bottom:0;z-index:50;width:260px;display:none}.chat-sidebar.mob-open{display:flex!important}.toggle-sidebar{display:flex!important}.chat-header{flex-wrap:wrap;gap:.55rem;padding:.6rem .75rem}.chat-header-actions{order:3;width:100%;margin-right:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:.2rem}.chat-header-actions::-webkit-scrollbar{display:none}.chat-action-btn{white-space:nowrap;flex:0 0 auto;font-size:.82rem;padding:.35rem .55rem}.bot-header-desc{display:none}.dash-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:1.75rem}.training-container{padding:1rem .75rem 2rem}.training-card{padding:1.1rem}.training-topbar{flex-direction:column;align-items:stretch}.training-stats-row{justify-content:center}.t-setup-switches,.t-setup-switches.mini,.training-setup-grid{grid-template-columns:1fr}.training-feedback-actions,.training-print-actions{flex-direction:column}.training-inline-input{display:block;max-width:none;width:100%;margin:.6rem 0 0}.formula-palette{padding:.85rem .8rem .6rem;overflow-x:auto}.formula-row{flex-wrap:nowrap;min-width:max-content}.formula-label{position:sticky;right:0;backdrop-filter:blur(6px)}}
@media(max-width:400px){.dash-grid{grid-template-columns:1fr}.year-grid{grid-template-columns:1fr}}

/* ── Dark mode: system preference fallback + path-option/modal-card styles ── */
@media (prefers-color-scheme: dark) {
  body {
    color: #e5e7eb;
  }
  .modal-card {
    background: #0f172a;
    color: #f9fafb;
  }
  .path-option {
    background: #1e293b;
    color: #f9fafb;
    border: 1px solid #334155;
  }
  .path-option:hover {
    background: #334155;
  }
  .path-option small {
    color: #cbd5e1;
  }
}

/* Ensure icons/svg never inherit a hardcoded dark fill */
.track-btn svg,
.subject-btn svg,
.feature-card svg {
  color: currentColor;
  fill: currentColor;
}

/* ── KaTeX: force LTR for math expressions inside RTL layout ── */
.katex, .katex-display, .math-inline, .math-display {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: center;
}

.msg-wrap.bot .msg-bubble .katex-display,
.msg-wrap.bot .msg-bubble .math-display,
.training-q-text .katex-display,
.training-q-text .math-display,
.quiz-q-text .katex-display,
.quiz-q-text .math-display {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}

/* ── Copy button ─────────────────────────────────────────── */
.msg-bubble{position:relative}
.msg-copy-btn{position:absolute;top:6px;left:6px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:.75rem;cursor:pointer;opacity:0;transition:opacity .15s;line-height:1.4;z-index:3;color:var(--text)}
.msg-bubble:hover .msg-copy-btn{opacity:.7}
.msg-copy-btn:hover{opacity:1!important}

@media (max-width: 640px) {
  .sidebar-close-btn { display: flex !important; }
}

/* Bilingual shared shell: content decides its own reading direction while
   controls and layout follow the selected UI locale. */
.msg-bubble[dir="auto"]{unicode-bidi:plaintext;text-align:start}
.msg-bubble[dir="auto"] ul,.msg-bubble[dir="auto"] ol{padding-inline-start:1.2rem;padding-inline-end:0}
html[dir="ltr"] .xmodal,
html[dir="ltr"] .xmodal-item,
html[dir="ltr"] .xexam-opt{direction:ltr;text-align:left}
html[dir="ltr"] .sidebar-group-title[style]{text-align:left!important}
@media(max-width:640px){
  html[dir="ltr"] .chat-sidebar{right:auto;left:0}
  .language-toggle{min-width:62px;padding:.38rem .55rem}
}
.sidebar-close-btn { display: none; background: none; border: none; color: var(--text2); font-size: 1.2rem; cursor: pointer; padding: .2rem .5rem; margin-inline-start: auto; line-height: 1; }
.sidebar-close-btn:hover { color: var(--text); }

/* عملي dropdown */
.dropdown-wrapper{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;top:100%;inset-inline-start:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:100;min-width:120px;margin-top:4px}
.dropdown-menu.open{display:block}
.dropdown-item{display:block;width:100%;background:none;border:none;color:var(--text1);padding:.5rem .75rem;font-size:.85rem;text-align:start;cursor:pointer;white-space:nowrap;transition:background var(--t)}
.dropdown-item:hover{background:var(--bg2)}

/* ===================================================================
   Mobile navbar overflow fix
   -------------------------------------------------------------------
   Two faults, one cause: on a phone the fixed navbar is taller and
   wider than the layout assumed.

   1. Every section cleared a hard-coded 70px, but the bar measures
      ~103px once the brand wraps, so the top 34px of each screen sat
      underneath it. On the Living Book that buried the sticky module
      header: elementFromPoint on either of its buttons returned the
      navbar, so the taps never reached them.
   2. `.nav-links` kept all six destinations on one no-wrap row inside a
      150px strip with the scrollbar hidden, leaving up to 240px of
      buttons outside the visible area with no affordance and no way to
      reach them except a drag that chained to the page.

   Sections now clear the bar's measured height (--navbar-h, published by
   app.js), and the row wraps instead of scrolling sideways. Desktop is
   untouched: this block is inside the mobile query, and above it the bar
   is 63px against the same 70px clearance.
   =================================================================== */
@media (max-width: 640px) {
  #navbar {
    flex-wrap: wrap;
    row-gap: .35rem;
    /* A drag that starts on a fixed bar must not pull the page or
       trigger pull-to-refresh. Taps are unaffected. */
    touch-action: none;
  }
  .nav-brand  { flex: 1 1 auto; min-width: 0 }
  .nav-actions { flex: 0 0 auto }

  .nav-links {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .3rem;
    /* No longer a hidden side-scroller: every destination is on screen. */
    overflow-x: visible;
    overscroll-behavior: contain;
  }
  .nav-link { flex: 0 1 auto }

  /* Clear the real bar, not a guessed number. */
  #s-landing, #s-chat, #s-dashboard, #s-training, #s-book {
    padding-top: var(--navbar-h, 70px);
  }
}


/* ===================================================================
   Chat tool groups
   -------------------------------------------------------------------
   The header row carried twelve tools; it now carries one button plus
   three groups. Nothing here restyles a tool — the menu rows reuse the
   existing `.dropdown-item` look, and each tool keeps `.chat-action-btn`
   so the download handler can still disable it.
   =================================================================== */
/* A non-interactive group label. The learn menu now carries eight rows in
   two groups; without a label the five method rows read as five more
   operations rather than as the delivery choice they are. It restyles no
   tool — `.dropdown-item` is untouched. */
.dropdown-sep {
  padding: .45rem .75rem .2rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text2);
  opacity: .8;
  white-space: nowrap;
  pointer-events: none;
}
.dropdown-sep + .dropdown-item { margin-top: 0 }

.tool-group-btn { display: inline-flex; align-items: center; gap: .25rem }
.tool-group-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary2) }

/* A menu row is a menu row, not a pill: the button styling that makes sense
   in a toolbar is overridden here, without removing the class the download
   handler looks for. */
.tool-group .dropdown-menu .chat-action-btn {
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  text-align: start;
  white-space: nowrap;
}
.tool-group .dropdown-menu .chat-action-btn:hover { background: var(--bg2); border-color: transparent }
.tool-group .dropdown-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
  direction: inherit;
  text-align: start;
  min-width: 100%;
  max-width: min(320px, calc(100vw - 1.5rem));
  z-index: 120;
  transform: translateX(var(--tool-menu-shift-x, 0px));
}
.tool-group .dropdown-menu button { font-size: .85rem; padding: .5rem .75rem }
/* A disabled tool must still read as disabled inside the menu. */
.tool-group .dropdown-menu .chat-action-btn:disabled { opacity: .5; cursor: not-allowed }

@media (max-width: 640px) {
  /* The toolbar used to be a hidden side-scroller here, which is what put
     controls outside the screen with no way to reach them. The controls wrap
     onto tidy rows instead. This rule sits after the earlier mobile block,
     so it wins without !important. */
  .chat-header-actions {
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: .35rem;
    /* Menus anchor to the bar, not to their button — see below. */
    position: relative;
  }

  /* A menu hung off its own button escapes the viewport once that button sits
     near the edge. Anchoring to the bar instead makes every menu span the bar
     and stay on screen at any width, in either direction. */
  .tool-group { position: static }
  .tool-group .dropdown-menu {
    inset-inline: 0;
    width: auto;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
    transform: none;
    /* Scrolling the menu never chains to the page, so no pull-to-refresh. */
    overscroll-behavior: contain;
  }

  /* Comfortable touch rows. */
  .tool-group .dropdown-menu button { min-height: 44px; padding: .6rem .8rem }
  .tool-group-btn { min-height: 40px }
}

/* ===================================================================
   «تعلّم» — the primary learning entry point in the navigation

   VISUAL ONLY. Same button, same `data-view="chat"`, same handler, same
   route. It reads as the main way in, so it carries the gold accent the
   header already uses for LUB's own marks (the mascot ring, the hero)
   rather than a new colour, and it keeps `.nav-link`'s box: same padding,
   same font-size, same height, so the row's balance is unchanged.
   =================================================================== */
.nav-link--learn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--gold);
  font-weight: 700;
  background: rgba(245, 158, 11, .10);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35);
}
[data-theme="light"] .nav-link--learn {
  background: rgba(217, 119, 6, .10);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .38);
}

/* The bulb sits on the same optical line as the label and never shrinks
   away on a narrow row. */
.nav-learn-ico {
  flex: 0 0 auto;
  display: block;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, .45));
}

/* Hover and active are a STEP UP from that resting accent, not a switch to
   the ordinary `.nav-link.active` grey — which would make the primary entry
   point look plainer once the student was actually in it. */
.nav-link--learn:hover,
.nav-link--learn.active {
  color: var(--gold);
  background: rgba(245, 158, 11, .20);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .65);
}
[data-theme="light"] .nav-link--learn:hover,
[data-theme="light"] .nav-link--learn.active {
  background: rgba(217, 119, 6, .18);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .7);
}
.nav-link--learn.active .nav-learn-ico {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, .75));
}

/* Phone: the icon shrinks with the label so the wrapped row keeps its
   rhythm and «تعلّم» stays one line among the six. */
@media (max-width: 640px) {
  .nav-link--learn { gap: .28rem }
  .nav-learn-ico { width: 15px; height: 15px }
}

/* A student who asked for less motion is not asking for less contrast;
   nothing here animates, so there is nothing to disable. */

/* ===================================================================
   Launch-status treatments (2026-08-18)

   Three states, one vocabulary:
     available  → normal item, untouched.
     beta       → .beta-chip: available exactly as before, plus a small
                  muted pill («تجريبي», full text in title) that must
                  never dominate the entry it annotates.
     future     → .future-item + .soon-tag: visibly present, deliberately
                  muted, no navigation. «قريبًا» is revealed inline on
                  hover / keyboard focus / tap (.soon-show set by
                  revealSoon) — inline (max-width transition) rather than
                  absolutely positioned so it can never be clipped by the
                  nav's / dropdown's overflow, and RTL/LTR both work via
                  margin-inline-start. Everything uses existing tokens;
                  no new colours.
   =================================================================== */
.beta-chip{
  display:inline-block;vertical-align:middle;margin-inline-start:.4rem;
  padding:.05rem .45rem;font-size:.62rem;font-weight:700;line-height:1.5;
  color:var(--text2);background:var(--bg2);
  border:1px solid var(--border);border-radius:999px;white-space:nowrap;
}
.beta-chip--full{font-size:.72rem;padding:.15rem .65rem;align-self:center}

.future-item{opacity:.55;cursor:default}
.future-item:hover,.future-item:focus-visible{opacity:.8}
/* The generic hover paints .nav-link/.dropdown-item as if navigable;
   keep the muted text colour so the state stays honest. */
.future-item:hover{color:var(--text2)}
/* Keyboard discovery must stay visible. */
.future-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.soon-tag{
  display:inline-block;vertical-align:middle;overflow:hidden;white-space:nowrap;
  max-width:0;opacity:0;padding:.05rem 0;margin-inline-start:0;
  font-size:.68rem;font-weight:700;line-height:1.5;
  color:var(--text2);background:var(--bg2);
  border:1px solid transparent;border-radius:999px;
  transition:max-width .25s ease,opacity .25s ease,padding .25s ease,margin .25s ease;
}
.future-item:hover .soon-tag,
.future-item:focus-visible .soon-tag,
.future-item.soon-show .soon-tag{
  max-width:6em;opacity:1;padding:.05rem .5rem;margin-inline-start:.4rem;
  border-color:var(--border);
}