/* Grok Bot PWA — light theme matching the Grok Bot app (sand tokens from app.asar) */
@font-face{font-family:XVF;font-weight:200 800;font-display:swap;src:url(/fonts/XVF.woff2) format("woff2")}
@font-face{font-family:"GB Arabic";font-weight:100 900;font-display:swap;src:local("SF Arabic"),local(".SF Arabic"),url(/fonts/NotoSansArabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
/* :root tokens moved to theme-tokens.css (single source) */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--chrome);color:var(--text);font-size:var(--fs);line-height:var(--lh);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:18px;height:18px;flex:none}
[dir=auto],.bidi{unicode-bidi:plaintext}
#app{height:100dvh;display:flex;overflow:hidden}

/* round icon button (white pill, like the app's search / + buttons) */

/* bot avatar (SVG mascot) */
.av{width:34px;height:34px;flex:none;position:relative;display:grid;place-items:center}
.av svg{width:100%;height:100%}
.av.sm{width:22px;height:22px}.av.big{width:64px;height:64px}
.dot{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--sidebar)}
.dot.off{display:none}

/* ===== sidebar ===== */
.side{width:300px;flex:none;background:var(--sidebar);border-right:.5px solid var(--stroke3);display:flex;flex-direction:column;padding-top:var(--st)}
.side-h{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px 8px}
.side-h .ttl-s{flex:1;font-weight:600;font-size:var(--fs-lg);min-width:0}
.searchbar{display:none;margin:4px 16px 8px}
.searchbar.on{display:flex}
.searchbar input{flex:1;height:36px;border-radius:999px;border:.5px solid var(--stroke);background:var(--elevated);padding:0 14px;font:inherit;font-size:16px;color:var(--text);outline:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 14px;border-bottom:.5px solid var(--stroke3);margin:0 0 10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:var(--r-item);position:relative}
.tile.on{background:var(--active)}
.tile .av{width:58px;height:58px}
.tile b{font-weight:400;font-size:var(--fs-xs);color:var(--text);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext}
.tile .badge{position:absolute;top:6px;right:10px}
.list{flex:1;overflow:auto;padding:0 8px calc(12px + var(--sb))}
.item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px;border-radius:var(--r-item);text-align:left}
.item:active,.item:hover{background:var(--hover)}.item.on{background:var(--active)}
.it-t{flex:1;min-width:0}
.it-t b{display:block;font-weight:500;font-size:var(--fs);line-height:var(--lh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:left}
.it-t span{display:block;font-size:var(--fs-sm);line-height:18px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:left}
.it-time{font-size:var(--fs-xxs);color:var(--text3)}
.it-st{color:var(--accent)!important}
.sec{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text3);padding:12px 12px 6px}
.side-f{display:flex;align-items:center;gap:10px;padding:10px 16px calc(12px + var(--sb))}
.side-f .me{width:36px;height:36px;border-radius:50%;background:var(--avatar-bg);color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm)}
.side-f .pill{flex:1;height:36px;border-radius:999px;background:var(--elevated);border:.5px solid var(--stroke3);box-shadow:var(--shadow-pill);display:grid;place-items:center;font-size:var(--fs);color:var(--text)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bot);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;line-height:1}

/* ===== chat ===== */
.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--chrome);position:relative}
.ch-h{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--st)) 12px 14px;background:linear-gradient(var(--chrome) 60%,rgba(252,252,252,0))}
.ch-h .ttl{flex:1;min-width:0;display:flex;justify-content:center}
.ch-h .pillname{display:flex;align-items:center;gap:7px;max-width:100%;height:36px;padding:0 14px 0 8px;border-radius:999px;background:var(--elevated);border:.5px solid var(--stroke3);box-shadow:var(--shadow-pill)}
.ch-h .pillname b{font-weight:500;font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.msgs{flex:1;overflow:auto;padding:calc(66px + var(--st)) 14px 12px;display:flex;flex-direction:column;gap:6px}
.day{align-self:center;font-size:var(--fs-xs);color:var(--text3);padding:10px 0 4px}
.mwrap{display:flex;flex-direction:column;gap:4px;align-items:flex-start;max-width:100%}
.mwrap.user{align-items:flex-end}
.mwrap{position:relative}.msgs{overflow-x:hidden;overflow-anchor:none}
.swr{position:absolute;left:-40px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--hover);color:var(--text2);opacity:0;pointer-events:none;transition:background .15s,color .15s}.swr svg{width:18px;height:18px}.swr.hit{background:var(--bot);color:#fff}
.mwrap+.mwrap.bot,.mwrap.bot+.mwrap.user,.mwrap.user+.mwrap.bot{margin-top:8px}
.m{max-width:var(--bubble-max-w);font-size:var(--bubble-fs);line-height:var(--bubble-lh);font-weight:var(--bubble-fw);word-wrap:break-word;position:relative;user-select:text;-webkit-user-select:text;unicode-bidi:plaintext;text-align:start}
.m.user{background:var(--bot);color:var(--on-bot);padding:7px 12px;border-radius:var(--r-bubble);white-space:pre-wrap}
.mwrap.user .m{max-width:var(--bubble-max-w-sent)} /* «توحيد خط وحجم الفقاعات»: sent bubbles keep their gap */
.m.bot{background:var(--bubble-agent);color:var(--bubble-ink);padding:7px 12px;border-radius:var(--r-bubble);white-space:normal}
.m.priv{display:flex;align-items:center;gap:8px;white-space:normal}
.m.priv svg{width:16px;height:16px;flex:none}
.m.priv .pv-txt{flex:1}
.m .pv-btn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline;opacity:.9}
.menu button.mi{background:none;border:0;color:inherit;font:inherit;text-align:start}
.m.bot.bare{background:none;padding:0}
.meta{font-size:var(--fs-xxs);color:var(--text3);padding:0 6px;line-height:14px}
.meta.tap{display:none}.mwrap.show-meta .meta.tap{display:block;animation:metaIn .18s ease}@keyframes metaIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sender{display:flex;align-items:center;gap:8px;color:var(--text3);font-size:var(--fs);margin:10px 0 2px 2px}
.sender .av{width:28px;height:28px}
.empty{margin:auto;text-align:center;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty b{color:var(--text);font-size:var(--fs-xl);font-weight:600}

/* markdown inside bot bubble */
.md>*:first-child{margin-top:0}.md>*:last-child{margin-bottom:0}
.md p{margin:0 0 8px}
.md h1,.md h2,.md h3,.md h4{font-weight:600;margin:12px 0 6px;line-height:1.35}
.md h1{font-size:20px}.md h2{font-size:18px}.md h3{font-size:16px}
.md ul,.md ol{padding-inline-start:1.3em;margin:0 0 8px}.md li{margin:2px 0}
.md li>input[type=checkbox]{margin-inline-end:6px;accent-color:var(--bot)}
.md a{color:var(--accent);text-decoration:none}.md a:hover{text-decoration:underline}
.md blockquote{border-inline-start:3px solid var(--stroke);padding-inline-start:10px;color:var(--text2);margin:0 0 8px}
.md hr{border:0;border-top:.5px solid var(--stroke);margin:10px 0}
.md code{font-family:"XVF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--hover);border:.5px solid var(--stroke3);padding:.1em .35em;border-radius:4px;direction:ltr;unicode-bidi:embed}
.md .tbl{overflow-x:auto;margin:2px 0 8px;border:.5px solid var(--stroke);border-radius:var(--r-lg);background:var(--elevated)}
.md table{border-collapse:collapse;font-size:var(--fs);min-width:100%}
.md th,.md td{padding:6px 10px;border-bottom:.5px solid var(--stroke3);text-align:start;white-space:nowrap}
.md th{background:var(--sidebar);font-weight:600}.md tr:last-child td{border-bottom:0}
.cb{margin:2px 0 8px;border:.5px solid var(--stroke);border-radius:var(--r-xl);background:var(--elevated);overflow:hidden;direction:ltr}
.cb-h{display:flex;align-items:center;justify-content:space-between;padding:5px 8px 5px 12px;font-size:var(--fs-xs);color:var(--text3);border-bottom:.5px solid var(--stroke3);background:var(--sidebar)}
.cb-h button{display:flex;align-items:center;gap:4px;color:var(--text3);font-size:var(--fs-xs);padding:3px 6px;border-radius:6px}
.cb-h button:hover{background:var(--active)}.cb-h svg{width:13px;height:13px}
.cb pre{margin:0;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.55}
.cb pre code{background:none;border:0;padding:0;font-size:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hljs{background:transparent!important}
.edited{color:var(--text3)}
.rq{display:block;font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);color:inherit;opacity:.75;border-inline-start:2px solid currentColor;padding:1px 8px;margin:1px 0 5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:start;unicode-bidi:plaintext}
.hl-flash{animation:fl 1.2s}@keyframes fl{0%,40%{background:color-mix(in srgb,var(--bot) 18%,transparent);border-radius:12px}}
.reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:-2px}
.pill{font-size:13px;line-height:1;padding:4px 7px;border-radius:999px;background:var(--elevated);border:.5px solid var(--stroke);box-shadow:0 1px 2px rgba(0,0,0,.05)}
/* gallery */
.gal{display:grid;gap:4px;border-radius:14px;overflow:hidden;max-width:min(86%,300px)}
.gal.n1{grid-template-columns:1fr}.gal.n2,.gal.n4{grid-template-columns:1fr 1fr}.gal.n3{grid-template-columns:2fr 1fr}.gal.n3 figure:first-child{grid-row:span 2}
.gal.nm{grid-template-columns:1fr 1fr 1fr}
.gal figure{position:relative;background:var(--sidebar);min-height:80px;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;display:block;max-height:300px}
.gal.n1 img{object-fit:cover;max-height:360px}
.gal-cap{font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);color:var(--bubble-ink2);margin:-4px 0 8px;max-width:var(--bubble-max-w);unicode-bidi:plaintext;text-align:start}
/* lightbox (dark, like iOS) */
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;flex-direction:column;touch-action:none;color:#fff}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + var(--st)) 12px 8px;font-size:var(--fs-sm)}
.lb .gbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15);color:#fff;box-shadow:none}
.lb-stage{flex:1;overflow:hidden;display:grid;place-items:center}
.lb-stage img{max-width:100%;max-height:100%;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb-cap{padding:10px 16px calc(14px + var(--sb));font-size:var(--fs-lg);text-align:center;line-height:1.5;unicode-bidi:plaintext}
.lb-nav{position:absolute;top:50%;width:40px;height:40px}.lb-prev{left:8px}.lb-next{right:8px}
/* files */
.files{display:flex;flex-direction:column;gap:6px;max-width:min(86%,320px);width:100%}
.mwrap.user .files{align-items:flex-end}
.fc{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--elevated);border:.5px solid var(--stroke);border-radius:14px;text-decoration:none;color:var(--text);width:100%}
.fc .fi{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}
.fc .fn{flex:1;min-width:0}.fc .fn b{display:block;font-weight:500;font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .fn span{font-size:var(--fs-xs);color:var(--text3)}
.fc .dl{color:var(--text3)}
video.vid{width:100%;max-width:300px;border-radius:14px;background:#000;display:block}
.aud{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;background:var(--bubble-agent);border-radius:999px;min-width:220px;max-width:280px}
.mwrap.user .aud{background:var(--bot);color:#fff}
.aud .play{width:32px;height:32px;border-radius:50%;background:var(--elevated);color:var(--text);display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.aud .play svg{width:14px;height:14px}
.aud .bars{flex:1;height:24px;display:flex;align-items:center;gap:2px;direction:ltr;cursor:pointer}
.aud .bars i{flex:1;background:currentColor;opacity:.3;border-radius:2px;min-height:3px}
.aud .bars i.on{opacity:1}
.aud .t{font-size:var(--fs-xxs);opacity:.75;min-width:30px;text-align:center;direction:ltr}
/* cards */
.card{background:var(--elevated);border:.5px solid var(--stroke);border-radius:16px;padding:14px;width:var(--bubble-max-w);max-width:100%;box-sizing:border-box;font-size:var(--bubble-fs);line-height:var(--bubble-lh);color:var(--bubble-ink);display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card .q{font-weight:var(--bubble-fw-title);font-size:var(--bubble-fs);line-height:var(--bubble-lh);unicode-bidi:plaintext;text-align:start}
.card .d{color:var(--bubble-ink);font-size:var(--bubble-fs);line-height:var(--bubble-lh);margin-top:-4px;unicode-bidi:plaintext;text-align:start}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;align-items:center;gap:10px;text-align:start;padding:9px 12px;border-radius:var(--r-xl);border:.5px solid var(--stroke);background:var(--elevated);font-size:var(--bubble-fs);line-height:var(--bubble-lh)}
.opt span{unicode-bidi:plaintext;flex:1;text-align:start}
.opt:active{background:var(--hover)}
.opt .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--text4);flex:none;display:grid;place-items:center}
.opt.sel .ck{background:var(--bot);border-color:var(--bot)}.opt.sel .ck::after{content:"✓";font-size:12px;color:#fff}
.opt.sel{border-color:var(--bot);background:color-mix(in srgb,var(--bot) 8%,#fff)}
.opt.primary{background:var(--text);border-color:var(--text);color:#fff;font-weight:600;justify-content:center}.opt.primary span{flex:none}
.opt.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 6%,#fff);justify-content:center}.opt.danger span{flex:none}
.opt small{display:block;color:var(--bubble-ink2);font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);font-weight:var(--bubble-fw)}
.card input,.card textarea,.card select{unicode-bidi:plaintext}
.card label.f{display:flex;flex-direction:column;gap:5px;font-size:var(--bubble-fs);line-height:var(--bubble-lh);color:var(--bubble-ink);unicode-bidi:plaintext}
.card label.f em{color:var(--danger);font-style:normal}
.card.locked .opt:not(.sel){opacity:.4}.card.locked .opt,.card.locked .opt.primary{cursor:default;box-shadow:none}.card.locked .opt.primary{background:color-mix(in srgb,var(--text) 22%,var(--elevated));border-color:transparent;color:var(--text2)}.card.locked .opt.sel{opacity:.6}.card.locked .opt.sel>span:not(.ck):first-child::before{content:"✓ "}.card.locked input,.card.locked textarea,.card.locked select{opacity:.6}.card.locked button,.card.locked input,.card.locked textarea,.card.locked label{pointer-events:none}
.card.sr{direction:rtl}
.sr-row{display:flex;flex-direction:column;gap:2px;font-size:var(--bubble-fs);line-height:var(--bubble-lh);text-align:start}
.sr-row b{color:var(--bubble-ink2);font-weight:var(--bubble-fw-title);font-size:var(--bubble-sub-fs)}
.sr-row span{unicode-bidi:plaintext}
.sr-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sr-add{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 14px}
.sr-file{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text2);background:var(--hover);border-radius:10px;padding:6px 8px;text-decoration:none}
.sr-file img{width:72px;height:52px;object-fit:cover;border-radius:6px}
.sr-chips{display:flex;flex-wrap:wrap;gap:4px}
.sr-chip{font-size:var(--fs-xs);background:var(--hover);border-radius:999px;padding:3px 8px;color:var(--text2)}
.done{display:flex;align-items:center;gap:6px;color:var(--green);font-size:var(--fs-sm)}
.card .done{font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh)}
.secret-row{display:flex;gap:6px}.secret-row input{flex:1;direction:ltr;font-family:ui-monospace,monospace}
.secret-row .gbtn{width:40px;height:40px;border-radius:var(--r-lg);box-shadow:none}
.lock{font-size:var(--fs-xs);color:var(--text3);unicode-bidi:plaintext;text-align:start}
.card .lock{font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);color:var(--bubble-ink2)}
/* typing */
.typing{display:flex;align-items:center;gap:8px;color:var(--text3);font-size:var(--fs);margin:8px 0 0 2px}
.typing .av{width:28px;height:28px}
.typing .col{display:flex;flex-direction:column;gap:4px}
.typing .lbl{background:linear-gradient(90deg,var(--text4) 0%,var(--text) 50%,var(--text4) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite;unicode-bidi:plaintext}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.prog{height:2px;border-radius:2px;background:var(--active);overflow:hidden;width:200px}.prog i{display:block;height:100%;background:var(--bot);transition:width .4s}
.progrow{display:flex;align-items:center;gap:6px}.progrow .pct{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums;min-width:28px}
.lanes{display:flex;flex-direction:column;gap:4px;max-width:260px}.lanes.n2,.lanes.n3,.lanes.num{width:min(440px,calc(100vw - 90px));max-width:none}.lanes.n3 .lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.lane .progrow{width:100%}.lane .progrow .prog{flex:1;width:auto;min-width:0}.lane .progrow .pct{min-width:24px;font-size:9px}.typing .stnote{font-size:10px;color:var(--accent,var(--text3));unicode-bidi:plaintext}.lanes .lsum{font-size:10px;color:var(--text3)}
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.lanes.num .lgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
.lane{border:1px solid var(--stroke);border-radius:6px;padding:3px 5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.lane .ln{font-size:10px;color:var(--text2,var(--text3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.lane .prog{width:100%}.lane .lv{font-size:11px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.lane.done{opacity:.7}.lane.done .prog i{background:var(--green)}.lane.done .lv{color:var(--green)}.lane.failed{border-color:var(--danger)}.lane.failed .lv{color:var(--danger)}
/* sheets & menus */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.25);display:flex;align-items:flex-end;justify-content:center;animation:fi .15s}
@keyframes fi{from{opacity:0}}
.sheet{width:min(420px,100%);margin:0 8px calc(8px + var(--sb));background:rgba(255,255,255,.92);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:.5px solid var(--stroke3);border-radius:18px;overflow:hidden;animation:su .2s cubic-bezier(.2,.9,.3,1);box-shadow:0 10px 40px rgba(0,0,0,.15)}
@keyframes su{from{transform:translateY(40px)}}
.sheet .act{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;font-size:16px;text-align:start;border-bottom:.5px solid var(--stroke3);color:var(--text)}
.sheet .act:last-child{border-bottom:0}.sheet .act svg{width:20px;height:20px;color:var(--text2)}
.sheet .act:active{background:var(--hover)}
.menu{position:absolute;bottom:64px;left:14px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:.5px solid var(--stroke);border-radius:14px;padding:4px;min-width:210px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.menu .mi{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:var(--fs);cursor:pointer;overflow:hidden}
.menu .mi:active,.menu .mi:hover{background:var(--hover)}
.menu svg{color:var(--text2)}
/* visually hidden but tappable file inputs (iOS needs a real, non display:none input) */
.menu .mi input[type=file]{position:absolute;inset:0;opacity:0;font-size:100px;cursor:pointer;width:100%;height:100%}
.vh{position:absolute!important;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.m.pressed{transform:scale(.98);transition:transform .15s}
/* composer */
.comp{padding:6px 12px calc(10px + var(--sb));position:relative}
.box{background:var(--elevated);border:1px solid var(--stroke);border-radius:24px;padding:5px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.row{display:flex;align-items:flex-end;gap:6px}
.box textarea{flex:1;min-width:0;resize:none;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:16px;line-height:22px;padding:7px 4px;max-height:160px;unicode-bidi:plaintext}
.tr-wrap{position:relative;flex:1;min-width:0;display:flex}
.tr-wrap textarea{width:100%}
.box.xl .tr-wrap textarea{background:color-mix(in srgb,var(--bot) 22%,transparent);border:1px solid var(--bot);border-radius:18px;padding:7px 10px}
.box.xl .tr-wrap.has-go textarea{padding-right:40px}
.box.xl .tr-wrap.rtl.has-go textarea{padding-right:10px;padding-left:40px}
.tr-go{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--bot);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16)}
.tr-wrap.rtl .tr-go{right:auto;left:6px}
.tr-go[hidden]{display:none!important}
.tr-go svg{width:15px;height:15px;stroke:#fff}
.tr-go:disabled,.tr-go.busy{opacity:.55}
.tr-out{margin:2px 4px 4px;border:1px solid var(--stroke);border-radius:18px;background:var(--elevated);padding:2px 4px}
.tr-out[hidden]{display:none!important}
.tr-out textarea{width:100%;display:block}
.menu .mi.on{background:color-mix(in srgb,var(--bot) 14%,transparent)}
.box textarea::placeholder{color:var(--text4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbtn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hover);color:var(--text2)}
.cbtn svg{width:18px;height:18px}
.send{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bot);color:#fff;flex:none}
.send svg{width:17px;height:17px}
.send.stop{background:var(--danger)}
.send:disabled{opacity:.4}
.send.wait{opacity:.8}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:4px 4px 2px}
.chips:empty{display:none}
.chip{display:flex;align-items:center;gap:6px;background:var(--hover);border-radius:var(--r-lg);padding:4px 8px;font-size:var(--fs-sm);position:relative}
.chip button svg{width:13px;height:13px}
.chip.up{opacity:.55}
.chip.big{padding:0;background:none}.chip.big img{width:56px;height:56px;border-radius:10px;object-fit:cover;display:block}
.chip.big>button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#555;color:#fff;display:grid;place-items:center;z-index:2}
.chip.big>button svg{width:11px;height:11px}
.chip.big img[data-ed]{cursor:pointer}.chip.big .spin,.chip.big .pct{pointer-events:none}.chip.big .ed-b{position:absolute;right:3px;bottom:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;pointer-events:none;z-index:1}.chip.big .ed-b svg{width:11px;height:11px}
.chip .spin{position:absolute;inset:0;display:grid;place-items:center}
.chip .spin::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #fff;border-top-color:transparent;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.replying{display:flex;align-items:center;gap:8px;padding:4px 8px 2px;font-size:var(--fs-sm);color:var(--text3)}
.replying span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-inline-start:2px solid var(--bot);padding-inline-start:8px;unicode-bidi:plaintext}
.replying button svg{width:14px;height:14px}
.rec{display:flex;align-items:center;gap:10px;flex:1;color:var(--danger);font-size:var(--fs);padding:6px;direction:ltr}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:bl 1s infinite}@keyframes bl{50%{opacity:.2}}
.warn{font-size:var(--fs-xs);color:#b7791f;text-align:center;padding:0 0 6px}
.toast{position:fixed;bottom:calc(96px + var(--sb));left:50%;transform:translateX(-50%);background:rgba(28,28,28,.92);color:#fff;padding:9px 16px;border-radius:999px;font-size:var(--fs-sm);z-index:80;max-width:90vw;text-align:center;unicode-bidi:plaintext}
.toast.err{background:var(--danger)}
/* login */
.login{margin:auto;width:min(340px,90vw);display:flex;flex-direction:column;align-items:center;gap:14px}
.login .av{width:64px;height:64px}
.login h2{font-size:22px;font-weight:600;margin:0}
.login button{width:100%;height:46px;border-radius:999px;background:var(--text);color:#fff;font-weight:600;font-size:var(--fs-lg)}
.login .err{color:var(--danger);font-size:var(--fs-sm);min-height:16px}
@media (max-width:760px){
  .side{width:100%;border:0}
  #app.in-chat .side{display:none}
  #app:not(.in-chat) .chat{display:none}
}
@media (min-width:761px){ .back{display:none} }

/* ===== bot computer (follows the app theme; black only in fullscreen) ===== */
.pcv{position:fixed;inset:0;z-index:45;background:var(--chrome);color:var(--text);display:flex;flex-direction:column}
.pcv-h{display:flex;align-items:center;gap:10px;padding:calc(8px + var(--st)) 12px 8px}
.pcv-h b{flex:1;font-size:var(--fs-lg);font-weight:600}
.pcv-h select{background:var(--elevated);color:var(--text);border:.5px solid var(--stroke);border-radius:var(--r-lg);padding:6px 8px;font:inherit;font-size:var(--fs-sm);max-width:170px}
.pcv-st{display:flex;justify-content:space-between;padding:0 14px 6px;font-size:var(--fs-xs);color:var(--text3)}
.pcv-st .live{display:flex;align-items:center;gap:6px}.pcv-st .live i{width:7px;height:7px;border-radius:50%;background:#14c16f;animation:bl 2s infinite}
.pcv.off .pcv-st .live i{background:var(--danger)}
.pcv.switching .pcv-st .live i{background:#d89a1a;animation:none}
.pcv-stage{flex:1;display:grid;place-items:center;overflow:hidden;padding:0 8px;touch-action:none;position:relative}
.pcv-wrap{position:relative;max-width:100%;max-height:100%;display:inline-block;line-height:0}
.pcv-stage img{max-width:100%;max-height:calc(100dvh - 330px);border-radius:10px;border:.5px solid var(--stroke);background:#000;box-shadow:var(--shadow-pill);user-select:none;-webkit-user-drag:none;touch-action:none}
.pcv.ctl .pcv-stage img{outline:2px solid var(--danger);outline-offset:2px}
.cur{position:absolute;width:18px;height:18px;pointer-events:none;transform:translate(-2px,-2px);display:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.pcv.ctl .cur{display:block}
.cur.down{transform:translate(-2px,-2px) scale(.85)}
.pcv-ctl{padding:10px 14px calc(12px + var(--sb));border-top:.5px solid var(--stroke3);background:var(--sidebar);display:flex;flex-direction:column;gap:8px}
.tog{display:flex;align-items:center;gap:10px;font-size:var(--fs)}
.tog input{display:none}.tog .sw{width:44px;height:26px;border-radius:13px;background:var(--active);position:relative;flex:none;transition:.2s}
.sheet.pw .err{color:var(--danger);font-size:var(--fs-sm);min-height:16px}
.tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.tog input:checked+.sw{background:var(--danger)}.tog input:checked+.sw::after{left:20px;background:#fff}
.pcv-hint{font-size:var(--fs-xs);color:var(--text3)}
.pcv.ctl #pch{color:var(--danger)}
.seg{display:flex;background:var(--active);border-radius:999px;padding:2px;align-self:flex-start}
.seg button{padding:5px 12px;border-radius:999px;font-size:var(--fs-xs);color:var(--text2)}.seg button.on{background:var(--elevated);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.row2{display:flex;gap:8px}.row2 input{flex:1}
.kb{display:flex;flex-wrap:wrap;gap:6px}.kb button{padding:7px 10px;border-radius:var(--r-lg);background:var(--elevated);border:.5px solid var(--stroke);font-size:var(--fs-sm);direction:ltr;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.kb button:active{background:var(--elevated-h)}
.sheet.pw{padding:18px;display:flex;flex-direction:column;gap:10px;margin-bottom:auto;margin-top:30vh}
.load-earlier{align-self:center;margin:8px auto 4px;padding:8px 14px;border:0;border-radius:99px;background:var(--bg2,#f0f0f0);color:var(--text2);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.sv .sv-hook{border-bottom:.5px solid var(--stroke3)}
.sv .sv-hook:last-child{border-bottom:0}
.sv .sv-hook .st-row{border-bottom:0;flex-wrap:wrap}
.sv .sv-meta{display:flex;flex-wrap:wrap;gap:6px 10px;padding:0 14px 2px;color:var(--text3);font-size:12px}
.sv .sv-meta .okc{color:var(--green);font-weight:600}
.sv .sv-meta .badc{color:var(--danger);font-weight:600}
.sv .sv-ops{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}
.sv .sv-ops .cnt.bad{color:var(--danger)}

/* «ملفات المشرف» new-file badge */
.mf-new{display:inline-block;margin-inline:6px;padding:1px 8px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;line-height:18px;vertical-align:middle}

/* «إرسال يدوي» — مِرسال couldn't deliver (owner 2efbe45c) */
.card .msend{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:14px;background:var(--msend-bg);border:.5px solid var(--msend-line);box-shadow:var(--msend-shadow);backdrop-filter:blur(10px)}
.card .msend.secret{background:var(--msend-sec-bg);border-color:var(--msend-sec-line)}
.card .msend-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:var(--bubble-sub-fs);color:var(--bubble-ink)}
.card .msend-ic{font-size:15px}
.card .msend-box{position:relative;border-radius:11px;background:var(--msend-glass);border:.5px solid var(--stroke);overflow:hidden}
.card .msend-code{margin:0;padding:12px 12px 12px 64px;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,"Noto Sans Arabic",monospace;white-space:pre-wrap;word-break:break-word;color:var(--bubble-ink);max-height:220px;overflow:auto;unicode-bidi:plaintext;text-align:start;direction:rtl}
.card .msend-copy{position:absolute;top:8px;left:8px;border:.5px solid var(--stroke);background:var(--msend-glass);color:var(--bubble-ink);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
.card .msend-copy.ok{color:var(--success);border-color:var(--msend-line)}
.card .msend-go{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:10px 14px;border-radius:12px;background:var(--msend-go);color:var(--msend-on-go);font-weight:600;box-shadow:var(--msend-go-shadow)}
.card .msend-go small{opacity:.85;font-weight:500}
.card .msend-mask{padding:12px;border-radius:11px;background:var(--msend-mask);border:.5px dashed var(--msend-sec-line);color:var(--bubble-ink2);letter-spacing:3px;text-align:center;user-select:none}
.card .msend-n{font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);color:var(--bubble-ink2)}

/* «ملفاتي ٢» (owner msg f6545671): floating button in the rail + «أحدث الملفات» + server folders, glass in the Omnis theme */
.mf-fab{position:absolute;bottom:calc(100% + 46px);right:12px;z-index:7;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:.5px solid var(--stroke);background:var(--elevated);color:var(--text3);box-shadow:var(--shadow-pill);cursor:pointer;padding:0;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.mf-fab svg{width:18px;height:18px}.mf-fab.on{color:var(--brand)}.side-panel .mf-fab{display:none}
.mf-fab .tb-n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-size:10px;font-style:normal;font-weight:600;display:grid;place-items:center;border:1.5px solid var(--chrome);font-variant-numeric:tabular-nums}
.mf-recent{display:flex;align-items:center;gap:12px;width:100%;margin:6px 0 4px;padding:14px 16px;border-radius:18px;border:.5px solid color-mix(in srgb,var(--brand) 28%,var(--stroke));background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,transparent),color-mix(in srgb,var(--elevated) 82%,transparent));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 8px 24px -14px color-mix(in srgb,var(--brand) 60%,transparent);color:var(--text);text-align:start;cursor:pointer;font:inherit}
.mf-recent .acc-tx{flex:1}.mf-recent .acc-tx b{display:block;font-size:15px}.mf-recent .acc-tx small{color:var(--text3);font-size:12px}
.mf-recent-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand)}.mf-recent-ic svg{width:20px;height:20px}
.mf-cnt{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--brand);color:var(--on-brand);font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mf-glass{background:color-mix(in srgb,var(--elevated) 78%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mf-hero{margin:6px 0 10px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,transparent),transparent);border:.5px solid var(--stroke)}
.mf-hero b{display:block;font-size:16px}.mf-hero small{color:var(--text3);font-size:12px;line-height:1.6}
.mf-lib{width:100%;text-align:start;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mf-lib.is-new .acc-tx b{font-weight:800}
.mf-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);flex:none}