:root {
  --bg:#0b0d12; --panel:#12151c; --panel2:#181c25; --line:#252a35; --text:#ece9e2; --muted:#8a8f9a;
  --gold:#d4a853; --gold-bg:#1f1a10; --gold-line:#4a3c17; --purple:#9b7bff; --purple-bg:#171529; --purple-line:#3a3160;
  --rep:#7ee787; --lead:#79c0ff; --danger:#ff7b72; --ok:#4cd98a; --system:#8a8f9a;
}
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:hidden; max-width:100vw; background:var(--bg); color:var(--text); font-family: system-ui, "Segoe UI", Arial, sans-serif; font-size:15px; }
body { min-height:100vh; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:12px; padding:9px 14px; }
button:disabled { opacity:.45; cursor:default; }
button.gold { background:var(--gold); color:#1a1408; border-color:var(--gold); font-weight:700; }
button.danger { background:#2a1414; border-color:#6b2b2b; color:var(--danger); }
button.ghost { background:transparent; }
input, textarea { font:inherit; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:9px 12px; width:100%; }
h1 { font-size:18px; font-weight:700; margin:0 0 10px; }
h2 { font-size:15px; font-weight:700; margin:0 0 8px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.row { display:flex; gap:8px; align-items:center; }
.grow { flex:1; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.hidden { display:none !important; }

/* header */
.top { display:flex; align-items:center; gap:16px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; }
.top .logo { background:#fff; border-radius:12px; padding:4px 10px; height:44px; display:flex; align-items:center; }
.top .logo img { height:36px; display:block; }
.top .logo .brandtxt { color:#111; font-weight:800; font-size:15px; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.top .title { line-height:1.15; }
.top .title b { font-size:17px; display:block; }
.top .title span { font-size:11px; color:var(--gold); letter-spacing:.06em; }
.top .who { display:flex; align-items:center; gap:10px; }
.top .who .n { font-weight:600; }
.top .who .s { font-size:12px; color:var(--muted); }
.top .short { display:none; }
@media (max-width: 700px) {
  .top { gap:10px; padding:8px 12px; }
  .top .logo { height:38px; padding:3px 8px; } .top .logo img { height:30px; }
  .top .title b { font-size:14px; white-space:nowrap; } .top .title span { display:none; }
  .top .who .n, .top .who .s { display:none; }
  .top a.small { white-space:nowrap; font-size:12px; }
  .top .full { display:none; } .top .short { display:inline; }
  /* two rows on a phone: logo, title and avatar on top, the buttons share the full width below (Shachar 29/09: "חשבון" ran off the screen) */
  .top { flex-wrap:wrap; row-gap:8px; }
  .top .grow { order:3; flex-basis:100%; height:0; }
  .top .who { order:2; margin-inline-start:auto; }
  .top #callTime { order:2; white-space:nowrap; }
  .top > button, .top > a.small { order:4; flex:1 1 0; min-width:0; text-align:center; justify-content:center; padding-inline:6px; }
}
@media (max-width: 420px) {
  .top:has(#callTime:not(:empty)) .title { display:none; }   /* live call on a narrow phone: the clock needs the room, the logo says who we are */
}
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--muted); margin-inline-end:5px; }
.dot.on { background:var(--ok); } .dot.off { background:var(--danger); }

/* avatars */
.avatar { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; overflow:hidden; }
.avatar.ai { background:#fff; border:2px solid var(--purple); }
.avatar.ai img { width:26px; height:26px; object-fit:contain; }
.avatar.mgr { background:#2a2416; color:var(--gold); border:2px solid var(--gold); }
.avatar.rep { background:#1f2a1f; color:var(--rep); border:2px solid #2f5a3a; }
.avatar.sys { background:#2a2f3a; color:#fff; }
.avatar.big { width:48px; height:48px; font-size:18px; }

/* score cards */
.scores { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.score { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; min-width:0; }
.score .lbl { font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; }
.score .lbl .tag { font-size:12px; color:var(--ok); }
.score .num { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; margin:4px 0; transition:color .4s; }
.score .num.sm { font-size:22px; padding:6px 0 8px; }
.score .bar { height:6px; border-radius:3px; background:#232833; overflow:hidden; }
.score .bar i { display:block; height:100%; width:0; border-radius:3px; transition:width .6s; }
.score.rep .bar i { background:var(--ok); } .score.lead .bar i { background:var(--gold); } .score.stage .bar i { background:var(--purple); }
.score .why { font-size:12px; color:var(--muted); line-height:1.4; margin-top:6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.num.hot { color:var(--ok); } .num.low { color:var(--danger); }

/* stage bar */
.stages { display:flex; gap:6px; }
.stages .st { flex:1; text-align:center; font-size:12px; color:var(--muted); }
.stages .st i { display:block; height:6px; border-radius:3px; background:#2a2f3a; margin-bottom:6px; }
.stages .st.done i, .stages .st.cur i { background:var(--gold); }
.stages .st.cur { color:var(--text); font-weight:700; }

/* feed (AI + manager) */
.feed { display:flex; flex-direction:column; gap:12px; }
.msg { display:flex; gap:10px; align-items:flex-start; }
.msg .bubble { border-radius:14px; padding:12px 14px; flex:1; min-width:0; }
.msg.ai .bubble { background:var(--purple-bg); border:1px solid var(--purple-line); }
.msg.mgr .bubble { background:var(--gold-bg); border:1px solid var(--gold-line); }
.msg.sys .bubble { background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
.msg .meta { font-size:12px; color:var(--muted); margin-bottom:5px; display:flex; gap:8px; }
.msg.ai .meta b { color:var(--purple); } .msg.mgr .meta b { color:var(--gold); }
.msg .text { font-size:16px; line-height:1.45; }
.msg .say { margin-top:8px; font-size:14px; border-top:1px dashed var(--line); padding-top:6px; }
.msg .say span { color:var(--muted); font-size:12px; }

/* transcript */
.tr-wrap { position:relative; }
.tr { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px 14px; overflow-y:auto; font-size:15px; line-height:1.55; }
.tr .l { padding:8px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; }
.tr .l .t { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; flex:none; width:44px; padding-top:3px; }
.tr .l .who { flex:none; font-weight:700; font-size:13px; padding-top:2px; min-width:46px; }
.tr .l.rep .who { color:var(--rep); } .tr .l.lead .who { color:var(--lead); } .tr .l.unk .who { color:var(--muted); }
.tr .partial { color:var(--muted); font-style:italic; padding:8px 0; }
.tr .l.playing, .tr .mk.playing { background:var(--gold-bg); border-radius:8px; }
.costtbl th, .costtbl td { padding:7px 6px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; } .costtbl th { font-weight:600; }
.noreview .rv, .noreview .lx, .noreview .lr { display:none !important; }   /* managers who may not sharpen the coach */
.tr .l.seekable { cursor:pointer; } .tr .l.seekable:hover { background:var(--panel2); border-radius:8px; }
.tr .l.seekable .t { color:var(--gold); text-decoration:underline dotted; }
.player { margin-top:8px; margin-bottom:0; flex-wrap:wrap; }
.player .hint { width:100%; font-size:12px; color:var(--muted); }
.donecard { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.donecard a.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; text-decoration:none; background:var(--gold); color:#1a1408; font-weight:700; font-size:18px; padding:14px 18px; border-radius:14px; }
.donecard a.btn:hover { filter:brightness(1.08); }
.tr .flash { outline:2px solid var(--gold); outline-offset:2px; border-radius:8px; }
.tr .mk { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.tr .mk .t { color:var(--purple); font-size:12px; font-variant-numeric:tabular-nums; flex:none; width:44px; padding-top:6px; }
.tr .mk .mkb { flex:1; min-width:0; background:var(--purple-bg); border:1px solid var(--purple-line); border-radius:12px; padding:8px 12px; font-size:14px; line-height:1.45; cursor:pointer; }
.tr .mk .mkb b { color:var(--purple); }
.tr .mk .mkb .say { margin-top:4px; font-size:13px; color:var(--muted); }
.tr .mk .rv { margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; }
.tr .mk .rv button { padding:2px 9px; font-size:12px; }
.tr .mk .rv button.on.good { background:#1f4a30; color:#7ee787; border-color:#2e7d4b; }
.tr .mk .rv button.on.bad { background:#4a1f1f; color:#ff7b72; border-color:#8a2f2f; }
.tr .mk .rv .cm { color:var(--gold); }
.tr .mk .rvbox { margin-top:6px; display:flex; gap:6px; } .tr .mk .rvbox textarea { flex:1; min-height:40px; font-size:13px; }
.feed .msg.ai { cursor:pointer; }
.feed .msg.ai .rvtag { font-size:11px; margin-inline-start:auto; }
.player { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 12px; margin-bottom:8px; }
.player audio { flex:1; height:36px; }
.tr .fix { display:inline-flex; gap:4px; margin-inline-start:6px; } .tr .fix button { padding:2px 8px; font-size:11px; }
/* meeting: recording bar + discreet layout (the customer sits next to the laptop) */
.recbar { display:flex; align-items:center; gap:12px; background:#2a1414; border:1px solid #6b2b2b; border-radius:16px; padding:10px 16px; }
.recbar .rec { width:12px; height:12px; border-radius:50%; background:var(--danger); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.25; } }
body.discreet .side, body.discreet .trmobile, body.discreet #presence, body.discreet #histWrap, body.discreet .helpbar .dark { display:none !important; }
body.discreet .layout { display:block; max-width:820px; }
body.discreet .tipcard .text { font-size:20px; } body.discreet .tipcard .say { font-size:15px; } body.discreet .notecard .text { font-size:17px; }
.tolive { position:absolute; top:8px; inset-inline-end:18px; padding:4px 12px; font-size:12px; background:var(--gold); color:#1a1408; font-weight:700; border:none; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.45); opacity:.92; z-index:2; }
.tr-tools { display:flex; gap:8px; align-items:center; margin-bottom:8px; }

/* calls list */
.calls { display:flex; flex-direction:column; gap:10px; }
.calls .sec { font-size:12px; color:var(--muted); margin:6px 0 0; }
.call { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer; display:flex; gap:10px; }
.call.sel { border-color:var(--gold); background:var(--gold-bg); }
.call .body { flex:1; min-width:0; }
.call .n { font-weight:700; display:flex; justify-content:space-between; gap:8px; }
.call .n .dur { font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; }
.call .m { font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.badge { font-size:11px; border-radius:999px; padding:3px 9px; background:var(--panel2); border:1px solid var(--line); }
.badge.live { color:var(--ok); border-color:#1f4a30; background:#0f1f16; }
.badge.help-rep { color:var(--danger); background:#2a1414; border-color:#6b2b2b; font-weight:700; }
.badge.help-ai { color:var(--purple); background:var(--purple-bg); border-color:var(--purple-line); font-weight:700; }
.badge.ended { color:var(--muted); }
.badge.muted { color:var(--danger); border-color:#6b2b2b; }
.badge.gold { color:var(--gold); border-color:var(--gold-line); background:var(--gold-bg); }

/* control cards (manager) */
.ctl { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:12px; }
.ctl h2 { margin-bottom:2px; }
.ctl .sub { font-size:12px; color:var(--muted); margin-bottom:10px; }
.ctl button { width:100%; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { border:none; border-radius:0; padding:7px 12px; font-size:13px; width:auto; }
.seg button.on { background:var(--gold); color:#1a1408; font-weight:700; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; border-radius:999px; padding:4px 10px; background:#0f1f16; color:var(--ok); border:1px solid #1f4a30; }
.pill.off { background:#2a1414; color:var(--danger); border-color:#6b2b2b; }

.presence { display:flex; align-items:center; gap:12px; background:var(--gold-bg); border:1px solid var(--gold-line); border-radius:16px; padding:12px 16px; }
.presence .pill { margin-inline-start:auto; background:var(--panel2); color:var(--gold); border-color:var(--gold-line); }

/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:20; padding:16px; }
.modal .box { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:0 18px 18px; width:min(720px, 100%); max-height:90vh; overflow:auto; }
/* sticky title row with the close X in the top-right corner (first item = right side in RTL) */
.mhead { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; background:var(--panel); padding:14px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.mhead h1 { margin:0; }
.mhead .x { width:36px; height:36px; padding:0; border-radius:50%; font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.mhead .x:hover { border-color:var(--gold); color:var(--gold); }
.field { margin-bottom:10px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }

.toast { position:fixed; bottom:90px; inset-inline-start:50%; transform:translateX(50%); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 16px; z-index:30; }

.md h2, .md h3, .md h4 { color:var(--gold); margin:14px 0 6px; font-size:16px; } .md ul { margin:4px 0 8px; padding-inline-start:20px; } .md li { margin:3px 0; } .md p { margin:6px 0; }

.tr .l { position:relative; flex-wrap:wrap; }
.tr .l .tx { flex:1; min-width:0; }
.tr .l .lx { flex:none; padding:0 7px; font-size:12px; opacity:0; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px; }
.tr .l:hover .lx, .tr .l .lx.on { opacity:1; }
.tr .l .lr { width:100%; padding-inline-start:100px; font-size:12px; color:var(--gold); }
.tr .l .lr:empty { display:none; }
.tr .lbox { width:100%; margin:6px 0 2px; padding:8px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; gap:6px; }
.tr .lbox .row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tr .lbox textarea { min-height:38px; font-size:13px; }
.tr .lbox button.on.good { background:#1f4a30; color:#7ee787; border-color:#2e7d4b; } .tr .lbox button.on.bad { background:#4a1f1f; color:#ff7b72; border-color:#8a2f2f; }
.feed .fi.playing .bubble { box-shadow:0 0 0 2px var(--gold); }
@media (hover: none) { .tr .l .lx { opacity:.55; } }

/* wide recording player (27/09) */
.player.wide { margin-top:14px; padding:10px 14px; display:block; position:sticky; bottom:10px; z-index:5; box-shadow:0 6px 24px rgba(0,0,0,.55); }
@media (max-width: 960px) { .player.wide { bottom:84px; } }
.wp-ctrl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wp-ctrl .wp-play { min-width:44px; font-size:15px; }
.wp-time { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; min-width:92px; text-align:center; }
.wp-legend { display:inline-flex; align-items:center; gap:6px; } .wp-legend .wp-m { position:static; display:inline-block; transform:none; height:12px; }
.wp-bar { position:relative; height:34px; margin-top:8px; cursor:pointer; touch-action:none; }
.wp-track { position:absolute; left:0; right:0; top:14px; height:6px; border-radius:6px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; }
.wp-fill { height:100%; width:0; background:var(--gold); }
.wp-head { position:absolute; top:9px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(0,0,0,.35); pointer-events:none; }
.wp-marks { position:absolute; inset:0; pointer-events:none; }
.wp-m { position:absolute; top:4px; width:3px; height:26px; margin-left:-1px; border-radius:2px; background:var(--purple); opacity:.85; }
.wp-m.rev { background:var(--gold); } .wp-m.note { background:#58a6ff; }
.wp-pop { position:absolute; bottom:38px; transform:translateX(-50%); white-space:nowrap; max-width:60vw; overflow:hidden; text-overflow:ellipsis; background:#0d1117; border:1px solid var(--line); border-radius:8px; padding:3px 8px; font-size:12px; color:var(--text); pointer-events:none; direction:rtl; }