/* viewer toolbar: server pills (right) + refresh / fullscreen / copy / share / code / fit (left) */
:root{--sbh:44px}
#app{display:flex;flex-direction:column}
#view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000}
#sbar{position:relative;z-index:9;flex:none;height:var(--sbh);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 2px 0;
  background:linear-gradient(180deg,#121729,#0a0d17);direction:rtl;font-family:Tajawal,system-ui,"Segoe UI",Tahoma,Arial,sans-serif}
#sbar::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,#7c3aed,#f43f5e 38%,#f59e0b 68%,#7c3aed);pointer-events:none}
#sbar #servers{position:static;display:flex;gap:6px;padding:0 8px;overflow-x:auto;scrollbar-width:none;min-width:0;max-width:none;flex:1 1 auto;opacity:1}
#sbar #servers::-webkit-scrollbar{display:none}
#servers button{flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:#1a2036;color:#d7deee;font:inherit;font-size:13px;font-weight:700;padding:7px 15px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
#servers button:hover{background:#242d49}
#servers button .dot{width:8px;height:8px;border-radius:50%;background:#64748b;flex:none}
#servers button.on{color:#fff;border-color:rgba(255,255,255,.28);background:linear-gradient(135deg,#9f1239,var(--accent,#f43f5e));box-shadow:0 6px 18px rgba(244,63,94,.3)}
#servers button.on .dot{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}
#servers:empty{display:none}
/* no toolbar: floating pills as before */
#servers.srv-float{position:absolute;top:10px;right:10px;z-index:9;display:flex;gap:6px;flex-wrap:wrap;max-width:70%;transition:opacity .25s}
#app.idle.started #servers.srv-float{opacity:0;pointer-events:none}
body.ifr #servers.srv-float{opacity:1!important;pointer-events:auto!important}

.stools{display:flex;direction:ltr;flex:none;height:100%;border-inline-start:1px solid rgba(255,255,255,.08)}
.stools button{width:42px;height:100%;display:grid;place-items:center;background:transparent;border:0;border-inline-end:1px solid rgba(255,255,255,.08);color:#e6eaf5;cursor:pointer;padding:0;transition:background .15s,color .15s}
.stools button:hover{background:#1b2440;color:#fff}
.stools button:active{background:#232e52}
.stools svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sbtoast{position:absolute;top:calc(var(--sbh) + 12px);left:50%;transform:translate(-50%,-8px);z-index:30;background:rgba(10,13,23,.92);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 13px Tajawal,system-ui,Arial,sans-serif;padding:8px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.22s;direction:rtl}
#sbtoast.show{opacity:1;transform:translate(-50%,0)}

/* share sheet */
#shm{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.66);padding:14px;direction:rtl;font-family:Tajawal,system-ui,Arial,sans-serif}
#shm[hidden]{display:none}
#shm .sheet{width:100%;max-width:360px;background:#111729;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.6);color:#fff}
#shm h3{margin:0 0 12px;font-size:16px}
#shm .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#shm a,#shm button.cp{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:11px;border:0;color:#fff;font:700 13px Tajawal,system-ui,Arial,sans-serif;text-decoration:none;cursor:pointer}
#shm .wa{background:#16a34a}#shm .tg{background:#0ea5e9}#shm .fb{background:#2563eb}#shm .tw{background:#334155}
#shm button.cp{grid-column:1/-1;background:linear-gradient(135deg,#9f1239,#f43f5e)}
#shm .x{margin-top:10px;width:100%;background:#1c2540;border:0;color:#cbd5e1;border-radius:11px;padding:10px;font:inherit;cursor:pointer}
@media(max-width:520px){:root{--sbh:40px}.stools button{width:36px}#servers button{padding:6px 11px;font-size:12px}}