:root{--bg:#f4f6f8;--card:#fff;--ink:#16202a;--mute:#64748b;--line:#e2e8f0;--brand:#0f766e;--brand2:#115e59;--warn:#d97706;--bad:#dc2626;--ok:#16a34a;--violet:#7c3aed}
@media(prefers-color-scheme:dark){:root{--bg:#0f1720;--card:#17212c;--ink:#e6edf3;--mute:#94a3b8;--line:#263341}}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);margin:4px 0}
textarea{resize:vertical;min-height:60px}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);padding:8px 13px;border-radius:9px}
button:hover{border-color:var(--brand)}
button.p{background:var(--brand);color:#fff;border-color:var(--brand)}button.p:hover{background:var(--brand2)}
button.d{background:var(--bad);color:#fff;border-color:var(--bad)}
button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
button.sm{padding:4px 9px;font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth{width:min(430px,100%)}
.auth h1{margin:0 0 4px;color:var(--brand);font-size:23px}
.tabs{display:flex;gap:4px;margin:14px 0;flex-wrap:wrap}
.tabs button{flex:1;white-space:nowrap}
.mute{color:var(--mute);font-size:13px}
.err{color:var(--bad);min-height:20px;font-size:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.logo{width:44px;height:44px;border-radius:11px;object-fit:cover;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:5}
.top .sp{flex:1}
.chip{padding:3px 10px;border-radius:99px;font-size:12px;color:#fff;white-space:nowrap}
.s-online{background:var(--ok)}.s-away{background:var(--warn)}.s-whatsapp{background:#0d9488}.s-break{background:var(--violet)}.s-offline{background:#94a3b8}
.layout{display:grid;grid-template-columns:1fr 410px;gap:14px;padding:14px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.stage{background:#0b1117;border-radius:14px;min-height:260px;display:grid;place-items:center;overflow:hidden;position:relative;color:#9fb0c0}
.stage video{width:100%;height:auto;max-height:60vh;object-fit:contain;background:#000;display:block}
.stage video:fullscreen{max-height:none;height:100%}
.stage .pipbtn{position:absolute;bottom:8px;left:8px;background:#000a;color:#fff;border:0;padding:6px 12px;border-radius:8px;font-size:13px;cursor:pointer}
.stage .tag{position:absolute;top:8px;right:8px;background:#000a;color:#fff;padding:3px 10px;border-radius:8px;font-size:13px}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.tile.speaking{border-color:var(--ok);box-shadow:0 0 0 3px #16a34a33}
.tile .av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700}
.tile .r{display:flex;gap:8px;align-items:center}
.tile .acts{display:flex;gap:4px;flex-wrap:wrap}
.side{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 90px);position:sticky;top:70px}
@media(max-width:980px){.side{position:static;max-height:none}}
.side .tabs{margin:0}.side .tabs button{flex:none;padding:7px 10px;font-size:13px;position:relative}
.badge{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-inline-start:4px}
.panel{overflow:auto;flex:1;min-height:300px}
.task{border:1px solid var(--line);border-radius:11px;padding:10px;margin:8px 0}
.task h4{margin:0 0 4px;font-size:15px}
.st{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--line)}
.st-proposed{background:#fef3c7;color:#92400e}.st-review{background:#ede9fe;color:#5b21b6}.st-done{background:#dcfce7;color:#166534}.st-rejected{background:#fee2e2;color:#991b1b}.st-doing{background:#dbeafe;color:#1e40af}
.pri-high{border-inline-start:4px solid var(--bad)}.pri-mid{border-inline-start:4px solid var(--warn)}.pri-low{border-inline-start:4px solid var(--ok)}
.msgs{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.msg{background:var(--bg);border-radius:10px;padding:6px 10px}.msg b{font-size:13px}
.msg.own{background:#0f766e22}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.wrap{overflow:auto}
.bar{height:7px;background:var(--line);border-radius:9px;overflow:hidden;min-width:60px}.bar i{display:block;height:100%;background:var(--brand)}
.ev{padding:8px;border-bottom:1px solid var(--line)}
.ev.warn{border-inline-start:4px solid var(--warn)}.ev.q{border-inline-start:4px solid var(--violet)}.ev.ai{border-inline-start:4px solid #0ea5e9}
#toasts{position:fixed;bottom:14px;left:14px;display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(380px,92vw)}
.toast{background:#16202a;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:0 6px 20px #0005;animation:in .25s}
.toast.warn{background:#92400e}.toast.q{background:#5b21b6}.toast.ai{background:#075985}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
#modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:60;padding:16px}
#modal[hidden]{display:none}
#modal .card{width:min(520px,100%);max-height:90vh;overflow:auto}
.banner{background:#0369a1;color:#fff;padding:10px 16px;text-align:center}
.tip{background:var(--bg);border-radius:10px;padding:8px 10px;margin:6px 0}
@media print{.top,.side .tabs,#toasts,.noprint{display:none!important}.layout{display:block}}

.s-external{background:#0891b2}.tile.canspeak{border-color:var(--ok)}

/* شاشة ثابتة كالتطبيق بعد تسجيل الدخول: لا تحريك للصفحة ولا ارتداد ولا تكبير بالقرص، ويتحرك محتوى اللوحات داخلياً فقط */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{-webkit-user-drag:none}
body.in{overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.in input,body.in textarea,body.in select,body.in .msg,body.in .ev,body.in .tip,body.in td{-webkit-user-select:text;user-select:text}
body.in #app{height:100vh;height:100dvh;overflow:auto;display:flex;flex-direction:column;overscroll-behavior:none;padding-bottom:env(safe-area-inset-bottom)}
body.in .top{position:static;flex:none;padding-top:max(10px,env(safe-area-inset-top))}
body.in .layout{flex:1;min-height:0;align-items:stretch}
body.in .layout>section{overflow:auto;min-height:0;overscroll-behavior:contain}
body.in .side{position:static;max-height:none;height:100%;min-height:0}
body.in .panel{overscroll-behavior:contain}
@media(max-width:980px){body.in .layout{overflow:auto;display:block}body.in .layout>section{overflow:visible}body.in .side{height:auto;min-height:70vh;margin-top:12px}}

/* اللغتان: الاتجاه يتبدل مع اللغة */
html[lang=en] .lang-ar,html[lang=ar] .lang-en{display:none}
body.in #landing,body.in #landing-en{display:none}
html[dir=ltr] body,html[dir=ltr] th,html[dir=ltr] td{text-align:left}
html[dir=ltr] #toasts{left:auto;right:14px}
html[dir=ltr] .tabs button{white-space:nowrap}

#appwin{position:fixed;inset:0;z-index:55;background:#0f172a;display:flex;flex-direction:column}
#appwin .aw-bar{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#16202a;color:#fff;flex-wrap:wrap}
#appwin .sp{flex:1}#appwin .aw-cd{font:700 1.1rem monospace;background:#0006;padding:2px 10px;border-radius:8px}#appwin .aw-cd.low{background:#b91c1c}
#appwin iframe{flex:1;border:0;width:100%;background:#fff}
body.in .layout,body.in #app,body.in .panel{-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.in .layout{overflow-anchor:none}
/* الجوال: حاوية تمرير واحدة فقط (.layout) — تعدد الحاويات مع overscroll-behavior:contain كان يبتلع حركة الإصبع ويعلّق اللوحة */
@media(max-width:980px){
  body.in .layout,body.in .layout>section,body.in #app{overscroll-behavior:auto}
  body.in .layout>section,body.in .side,body.in .panel{overflow:visible;height:auto;max-height:none;min-height:0}
  body.in .side{min-height:70vh}
  body.in .layout{overflow-y:auto;touch-action:pan-y}
}
/* تكبير شاشة المشاركة داخل الصفحة مع زر رجوع (بدل ملء الشاشة الأصلي الذي لا يوجد فيه رجوع على بعض الأجهزة) */
.stage .stclose{display:none}
body.stage-big #stage{position:fixed;inset:0;z-index:9000;max-height:none;min-height:0;border-radius:0;background:#000}
body.stage-big #stage video{max-height:100dvh;height:100%;width:100%}
body.stage-big #stage .stclose{display:block;position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;z-index:9001;background:#000b;color:#fff;border:1px solid #fff5;border-radius:10px;padding:10px 16px;font-size:16px}
/* لوحة العرض الحرة */
.stage .bwrap{position:relative;width:100%;min-height:260px;display:grid}
.stage .bslide{width:100%;display:grid}
.stage .bs{position:relative;width:100%;min-height:260px;display:grid;place-items:center;background:#000}
.stage .btext{padding:28px 22px}
.stage .btx{color:#fff;font-weight:800;font-size:clamp(22px,5.5vw,42px);line-height:1.5;text-align:center;white-space:pre-wrap;word-break:break-word}
.stage .bimg,.stage .bvid{width:100%;max-height:60vh;object-fit:contain;display:block;background:#000}
.stage .byt{aspect-ratio:16/9;min-height:0}
.stage .byt iframe{width:100%;height:100%;border:0;display:block}
.stage .bcap{position:absolute;bottom:0;right:0;left:0;padding:8px 14px;background:linear-gradient(transparent,#000a);color:#fff;font-size:15px;text-align:center}
.stage .bdots{position:absolute;bottom:34px;left:0;right:0;display:flex;gap:6px;justify-content:center;pointer-events:none}
.stage .bdots i{width:8px;height:8px;border-radius:50%;background:#fff6}.stage .bdots i.on{background:#fff}
.stage .bplay{position:absolute;inset:auto 0 50px 0;margin:auto;width:max-content;max-width:90%;background:#000b;color:#fff;border:1px solid #fff6;border-radius:12px;padding:10px 18px;font-size:16px}
.stage .bedit{position:absolute;top:8px;left:8px;z-index:3;background:#000a;color:#fff;border:1px solid #fff4;border-radius:8px;padding:6px 12px;font-size:13px}
/* أزرار صوت لوحة العرض (لكل مشاهد) */
.stage .bctl{position:absolute;bottom:34px;right:8px;z-index:3;display:flex;gap:8px;align-items:center;background:#000a;border:1px solid #fff3;border-radius:22px;padding:4px 10px}
.stage .bctl[hidden]{display:none}
.stage .bmute{background:none;border:0;color:#fff;font-size:22px;padding:2px 6px;line-height:1}
.stage .bvolr{width:110px;accent-color:#14b8a6;direction:ltr}
/* تبديل شرائح اللوحة: انتقال وأسهم */
@keyframes slL{from{transform:translateX(40px);opacity:.2}to{transform:none;opacity:1}}
@keyframes slR{from{transform:translateX(-40px);opacity:.2}to{transform:none;opacity:1}}
.stage .bslide.sl-l{animation:slL .28s ease}.stage .bslide.sl-r{animation:slR .28s ease}
.stage .bnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#0008;color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:26px;line-height:1;padding:0;opacity:.75}
.stage .bprev{left:6px}.stage .bnext{right:6px}
.stage .bslide img{-webkit-user-drag:none;user-select:none}
/* شريط أيقونات الموظفين أعلى الدردشة */
.mstrip{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;margin-bottom:6px;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mchip{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:2px 4px;color:inherit;cursor:pointer;min-width:54px}
.mchip small{font-size:11px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute,#94a3b8)}
.mchip .av{position:relative;width:42px;height:42px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700}
.mchip.off .av{opacity:.5}
.mchip .sd{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--card,#111827)}