@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#050505; --surface:#0C0A07; --raised:#14110C; --deep:#0A0806;
  --line:#2A2218; --line-soft:#1B1610;
  --gold:#B8863B; --gold-lt:#D9AE68; --gold-dim:#6E5427;
  --text:#EDEAE4; --muted:#9C9284; --faint:#6F675C;
  --ok:#5E9E76; --bad:#C0625A;
  --f:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f);font-weight:300;font-size:15px;line-height:1.7;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{cursor:not-allowed;opacity:.4}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- chrome ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.1rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.brand{display:flex;align-items:center;gap:.6rem;font-size:13.5px;font-weight:500}
.brand .mk{
  width:26px;height:26px;border:1px solid var(--gold);color:var(--gold-lt);
  display:grid;place-items:center;font-size:12px;font-family:var(--mono);flex:none;
}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:.15rem .45rem;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;flex:none}
.dot.on{background:var(--ok)}

.page{max-width:920px;margin-inline:auto;padding:1.4rem 1.1rem 3rem}

h1{font-size:1.25rem;font-weight:600;margin:0 0 .25rem;line-height:1.4}
.sub{color:var(--faint);font-size:12.5px;margin:0 0 1.4rem}
h2{
  font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:1.8rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);
}

/* ---------- customer rows (broker screen) ---------- */
.row{
  display:flex;align-items:center;gap:.9rem;background:var(--surface);
  border:1px solid var(--line);padding:.85rem 1rem;margin-bottom:1px;
}
.row .code{font-family:var(--mono);font-size:16px;color:var(--gold-lt);font-weight:500;flex:none}
.row .meta{flex:1 1 auto;min-width:0}
.row .meta .i{font-size:13.8px;color:var(--text)}
.row .meta .b{font-size:12.2px;color:var(--faint);font-family:var(--mono)}
.btn{
  border:1px solid var(--gold);color:var(--gold-lt);background:rgba(184,134,59,.08);
  padding:.42rem .95rem;font-size:13.5px;font-weight:500;flex:none;transition:background .15s;
}
.btn:hover:not(:disabled){background:rgba(184,134,59,.2)}
.btn.solid{background:var(--gold);color:#0A0806;border-color:var(--gold)}
.btn.solid:hover:not(:disabled){background:var(--gold-lt)}
.btn.danger{border-color:var(--bad);color:var(--bad);background:rgba(192,98,90,.08)}
.btn.danger:hover:not(:disabled){background:rgba(192,98,90,.2)}
.btn.lg{padding:.7rem 1.6rem;font-size:15px}

/* ---------- call panel ---------- */
.call{
  border:1px solid var(--gold-dim);background:var(--raised);
  padding:1.3rem 1.2rem;margin:1.2rem 0;display:none;
}
.call.show{display:block}
.call .who{font-family:var(--mono);font-size:1.5rem;color:var(--gold-lt);margin-bottom:.15rem}
.call .st{color:var(--muted);font-size:13.5px;margin-bottom:1rem}
.call .timer{font-family:var(--mono);font-size:2.1rem;color:var(--text);line-height:1.1;margin-bottom:1rem;
  font-variant-numeric:tabular-nums}
.call .acts{display:flex;gap:.6rem;flex-wrap:wrap}

.ring{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}

/* ---------- diagnostics ---------- */
.diag{
  border:1px solid var(--line);background:var(--deep);margin-top:1.2rem;
  font-family:var(--mono);font-size:12px;direction:ltr;text-align:left;
}
.diag .hd{
  padding:.4rem .7rem;border-bottom:1px solid var(--line-soft);color:var(--faint);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.diag .kv{display:flex;justify-content:space-between;padding:.32rem .7rem;
  border-bottom:1px solid var(--line-soft)}
.diag .kv:last-child{border-bottom:0}
.diag .k{color:var(--faint)}
.diag .v{color:var(--text)}
.diag .v.good{color:var(--ok);font-weight:500}
.diag .v.bad{color:var(--bad);font-weight:500}

/* ---------- log ---------- */
.log{border:1px solid var(--line);background:var(--surface)}
.log .e{display:flex;gap:.8rem;align-items:baseline;padding:.55rem .9rem;
  border-bottom:1px solid var(--line-soft);font-size:13.2px}
.log .e:last-child{border-bottom:0}
.log .e .t{font-family:var(--mono);color:var(--faint);font-size:12px;flex:none}
.log .e .d{font-family:var(--mono);color:var(--gold-lt);flex:none;font-variant-numeric:tabular-nums}
.log .e .o{color:var(--muted);flex:1 1 auto}
.log .empty{padding:.9rem;color:var(--faint);font-size:13px}
.nodelete{color:var(--faint);font-size:12px;margin-top:.5rem;display:block}

/* ---------- notices ---------- */
.notice{border:1px solid var(--bad);background:rgba(192,98,90,.08);color:var(--text);
  padding:.75rem .95rem;font-size:13.5px;margin:1rem 0;display:none}
.notice.show{display:block}
.hint{border:1px solid var(--gold-dim);background:rgba(184,134,59,.06);
  padding:.75rem .95rem;font-size:13.3px;color:var(--muted);margin:1rem 0}
.hint b{color:var(--gold-lt);font-weight:600}

/* ---------- landing ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:1.6rem 0}
.split a{background:var(--surface);padding:1.5rem 1.3rem;text-decoration:none;color:inherit;
  display:block;transition:background .15s}
.split a:hover{background:var(--raised)}
.split a .n{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:.5rem}
.split a .h{font-size:1.05rem;font-weight:600;margin-bottom:.3rem}
.split a .p{font-size:13.2px;color:var(--muted);line-height:1.6}
ol.steps{padding-inline-start:1.2rem;color:var(--muted);font-size:14px;max-width:62ch}
ol.steps li{margin-bottom:.4rem}
ol.steps li::marker{color:var(--gold-dim)}
code{font-family:var(--mono);font-size:.87em;background:var(--raised);padding:.06em .3em;
  border:1px solid var(--line-soft);direction:ltr;display:inline-block}

/* ---------- multi-party additions ---------- */
.barr{display:flex;align-items:center;gap:.6rem}

.roster{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .9rem}
.chip-p{
  font-size:12.5px;padding:.2rem .6rem;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);border-radius:2px;
}
.chip-p.customer{border-color:var(--gold-dim);color:var(--gold-lt)}
.chip-p.broker{border-color:#4a6b7a;color:#8FB6C6}
.chip-p.admin{border-color:#6b5a7a;color:#B39FC6}

.call .timer{visibility:hidden}
.pill{
  font-size:10.5px;font-family:var(--mono);border:1px solid var(--gold-dim);
  color:var(--gold-lt);padding:.05rem .35rem;margin-inline-start:.35rem;
}
.notice.info{border-color:var(--gold-dim);background:rgba(184,134,59,.08)}
#audioSinks{display:none}
#legs .kv:last-child{border-bottom:0}