/* ============================================================
   5Q CRM — Internal Team Chat — one panel, light surface.
   The panel floats over Chatwoot's light content area (the dark hub
   rail is the only dark region), so it stays light on purpose. One
   token set below; no colour is written twice. LTR today, logical
   properties throughout so an RTL pass only flips `direction`.
   ============================================================ */
:root{
  /* Kareem (2026-09-16): the chat takes the product's own theme (dark by default, light with [data-theme="light"] on <html>)
     and a quieter look — flat accent, no gradients or glow. The tokens map onto shared/ui.css names. */
  --ch-accent:var(--accent,#1f93ff); --ch-accent-2:var(--accent,#1f93ff); --ch-accent-text:var(--accent-text,#1f93ff);   /* polish-p2: the blue as text (light #1462bf) */ --ch-fill:var(--accent-fill,#1668c9);   /* #552: behind white text */ --ch-accent-soft:var(--accent-soft,rgba(31,147,255,.12));
  --ch-surface:var(--panel,#14171b); --ch-surface-2:var(--panel-2,#1b1f24); --ch-bg:var(--bg,#0a0b0d); --ch-them:var(--panel-2,#1b1f24);
  --ch-ink:var(--text,#e7e9ea); --ch-ink-2:var(--text,#e7e9ea); --ch-muted:var(--muted,#a4a9ae); --ch-faint:var(--dim,#697077);
  --ch-rule:var(--border,#262b31); --ch-rule-soft:var(--border-soft,#20242a);
  --ch-danger:var(--danger,#ef4444); --ch-danger-soft:var(--danger-soft,rgba(239,68,68,.14)); --ch-ok:var(--success,#22c55e); --ch-warn-bg:var(--warn-soft,rgba(245,158,11,.12)); --ch-warn:var(--warn,#f59e0b);
  --ch-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.5)); --ch-radius:16px;
  --ch-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ch-av:var(--panel-2,#1b1f24); --ch-on-me:#fff;
}
[data-theme="light"]{
  --ch-surface:#fff; --ch-surface-2:#f3f4f6; --ch-bg:#f6f7f9; --ch-them:#eef0f3;
  --ch-ink:#1b1f24; --ch-ink-2:#1b1f24; --ch-muted:#5c636b; --ch-faint:#9aa0a6;
  --ch-rule:#e2e5e9; --ch-rule-soft:#eceef1; --ch-shadow:0 12px 36px rgba(16,24,40,.14); --ch-av:#e8eefb;
}
.chat-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chat-fab,.chat-pop,.chat-win.min,.ch-float{font-family:var(--ch-font);direction:ltr}
.chat-fab *:focus-visible,.chat-pop *:focus-visible,.ch-float *:focus-visible,.chat-win.min:focus-visible,.chat-fab:focus-visible{outline:2px solid var(--ch-accent);outline-offset:2px}

/* ---- launcher -------------------------------------------- */
.chat-fab{
  position:fixed;bottom:84px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--ch-fill);
  border:0;color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(22,104,201,.28);
  z-index:9997;display:flex;align-items:center;justify-content:center;transition:transform .12s;
}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab svg{width:24px;height:24px}
.chat-fab .badge,.chat-win.min .min-badge{
  position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:#E11D48;color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px var(--ch-bg);display:none;
}
.chat-fab .badge.show,.chat-win.min .min-badge.show{display:block}

/* ---- the panel ------------------------------------------- */
.chat-pop{
  position:fixed;bottom:154px;right:22px;width:340px;height:min(540px,calc(100vh - 180px));
  background:var(--ch-surface);border:1px solid var(--ch-rule);border-radius:var(--ch-radius);
  box-shadow:var(--ch-shadow);z-index:9998;display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;animation:chFl .16s ease-out;
}
.chat-pop[hidden]{display:none}
@keyframes chFl{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.chat-view{display:flex;flex-direction:column;flex:1;min-height:0}
.chat-view[hidden]{display:none}
.chat-conn{
  background:var(--ch-warn-bg);color:var(--ch-warn);font-size:12px;font-weight:700;text-align:center;
  padding:5px 10px;border-bottom:1px solid rgba(245,158,11,.35);flex-shrink:0;
}
.chat-conn[hidden]{display:none}

.chat-pop-h{
  padding:12px 12px 8px 16px;font-size:15px;color:var(--ch-ink);display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.chat-pop-h b{font-size:15px;font-weight:800;letter-spacing:-.2px;flex:1}
.h-acts{display:flex;gap:2px}
.chat-ic{
  border-radius:50%;width:36px;height:36px;border:0;background:transparent;color:var(--ch-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;line-height:1;transition:background .12s,color .12s;
}
.chat-ic:hover{background:var(--ch-surface-2);color:var(--ch-ink)}
.chat-ic.on{color:var(--ch-accent-text);background:var(--ch-accent-soft)}

.chat-search{
  border-radius:99px;background:var(--ch-surface-2);border:1px solid transparent;padding:9px 14px;font-size:13px;
  margin:4px 12px 6px;color:var(--ch-ink);font-family:inherit;outline:none;
}
.chat-search:focus{background:var(--ch-surface);border-color:var(--ch-accent);box-shadow:0 0 0 3px rgba(11,95,255,.10)}
.chat-list{padding:4px 6px 10px;overflow-y:auto;flex:1;min-height:0}
.chat-list::-webkit-scrollbar,.chat-body::-webkit-scrollbar,.sheet-members::-webkit-scrollbar{width:6px}
.chat-list::-webkit-scrollbar-thumb,.chat-body::-webkit-scrollbar-thumb,.sheet-members::-webkit-scrollbar-thumb{background:rgba(16,24,40,.14);border-radius:3px}
.chat-sec{padding:10px 12px 4px;font-size:12px;font-weight:800;color:var(--ch-muted);letter-spacing:.4px;text-transform:uppercase}
.chat-row{display:flex;align-items:center;gap:11px;border-radius:14px;padding:9px 11px;cursor:pointer;min-height:44px;transition:background .12s}
.chat-row:hover,.chat-row:focus-visible{background:var(--ch-surface-2)}
.chat-row.unread .chat-row-name{font-weight:800}
.chat-row.unread .chat-row-last{color:var(--ch-ink);font-weight:700}
.chat-av{
  width:40px;height:40px;border-radius:50%;background:var(--ch-av);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;position:relative;color:var(--ch-ink-2);
}
.chat-av.ini{font-size:14px;font-weight:800}
.on-dot{position:absolute;bottom:1px;inset-inline-start:1px;width:11px;height:11px;background:#22C55E;border:2.5px solid var(--ch-surface);border-radius:50%}
.on-dot.off{background:#B5C0D0}
.on-dot.away{background:#F59E0B}   /* 080-F1 c: Away, the Team panel's amber (.st.busy) */
html.ph-screen .q-online.away{background:var(--ph-amber9,#F59E0B)}
.chat-row-mid{flex:1;min-width:0}
.chat-row-name{font-size:14px;font-weight:700;color:var(--ch-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-last{font-size:12.5px;font-weight:500;color:var(--ch-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chat-cnt{background:var(--ch-fill);color:#fff;border-radius:99px;font-size:12px;font-weight:800;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 6px;flex:none;display:none}
.chat-cnt.show{display:inline-block}
.chat-empty,.chat-loading{text-align:center;color:var(--ch-muted);padding:24px 12px;font-size:13px}

/* ---- conversation view ------------------------------------ */
.chat-win-h{padding:8px 10px 8px 6px;background:var(--ch-surface);border-bottom:1px solid var(--ch-rule-soft);display:flex;align-items:center;gap:8px;flex-shrink:0}
.chat-win-h .av{width:32px;height:32px;border-radius:50%;background:var(--ch-av);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ch-ink-2);flex-shrink:0}
.chat-win-h .mid{flex:1;min-width:0}
.chat-win-h .n{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--ch-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-seen{font-size:12px;font-weight:700;color:var(--ch-muted);margin-top:1px}
.cw-seen.online{color:var(--ch-ok)}
.chat-win-h .actions{display:flex;gap:2px;flex-shrink:0}
.chat-win-h .actions button{background:none;border:0;color:var(--ch-muted);cursor:pointer;width:32px;height:32px;border-radius:50%;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.chat-win-h .actions button:hover{background:var(--ch-surface-2);color:var(--ch-ink)}
.chat-pinbar{background:var(--ch-warn-bg);border-bottom:1px solid rgba(245,158,11,.35);padding:6px 12px;font-size:12px;color:var(--ch-warn);display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0}
.chat-pinbar[hidden]{display:none}
.chat-pinbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px 6px;background:var(--ch-bg);display:flex;flex-direction:column;gap:3px;min-height:0;position:relative;overflow-anchor:auto}
.chat-jump{position:absolute;right:14px;bottom:74px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ch-rule);background:var(--ch-surface);color:var(--ch-ink);box-shadow:0 6px 18px rgba(16,24,40,.18);cursor:pointer;z-index:2;font-size:16px}
.chat-jump[hidden]{display:none}
.chat-day{margin:10px 0 8px;text-align:center;font-size:12px;font-weight:800;color:var(--ch-muted)}

/* ---- messages ---------------------------------------------- */
.cm{margin-bottom:2px;display:flex;flex-direction:column;gap:2px}
.cm.g-last,.cm.g-single{margin-bottom:10px}
.cm-sender{font-size:12px;font-weight:800;color:var(--ch-muted);margin:6px 8px 3px;text-align:start}
.cm.me .cm-sender{display:none}
.cm-line{display:flex;align-items:flex-end;gap:6px}
.cm.me .cm-line{justify-content:flex-end}
.cm.them .cm-line{justify-content:flex-start}
.cm-b{
  position:relative;max-width:78%;border-radius:16px;padding:8px 12px;font-size:13.5px;font-weight:450;line-height:1.5;
  min-width:0;word-break:break-word;box-shadow:0 1px 2px rgba(16,24,40,.05);unicode-bidi:plaintext;
}
.cm.me .cm-b{background:var(--ch-fill);color:#fff;box-shadow:none}
.cm.them .cm-b{background:var(--ch-them);color:var(--ch-ink)}
.cm-b.flash{box-shadow:0 0 0 3px rgba(11,95,255,.45)}
.cm.me.g-first .cm-b{border-end-end-radius:7px}
.cm.me.g-mid .cm-b{border-start-end-radius:7px;border-end-end-radius:7px}
.cm.me.g-last .cm-b{border-start-end-radius:7px}
.cm.them.g-first .cm-b{border-end-start-radius:7px}
.cm.them.g-mid .cm-b{border-start-start-radius:7px;border-end-start-radius:7px}
.cm.them.g-last .cm-b{border-start-start-radius:7px}
.cm-mention{font-weight:800}
.cm.them .cm-mention{color:var(--ch-accent-text)}
.cm-reply{border-radius:9px;font-size:12px;opacity:.9;background:rgba(0,0,0,.05);padding:5px 10px;margin-bottom:4px;border-inline-start:3px solid rgba(0,0,0,.20);font-weight:600;cursor:pointer}
.cm.me .cm-reply{background:rgba(255,255,255,.14);border-inline-start-color:rgba(255,255,255,.55)}
.cm-reply .n{font-weight:800;font-size:12px;display:block;margin-bottom:1px}
.cm-out{flex:none;font-size:12.5px;font-weight:900;letter-spacing:-1.5px;color:var(--ch-faint);line-height:1;padding-bottom:3px}
.cm-out .cm-tick.sent{color:var(--ch-faint)}
.cm-out .cm-tick.read{color:var(--ch-accent-text)}
.cm-out .cm-tick.pending{color:#B5C0D0;letter-spacing:0}
.cm-out .cm-tick.failed{color:var(--ch-danger);letter-spacing:0}
.cm-ed{font-size:12px;font-weight:700;color:var(--ch-muted);background:rgba(16,24,40,.06);border-radius:99px;padding:2px 7px;flex:none;align-self:flex-end;margin-bottom:2px}
.cm-rx-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.cm.me .cm-rx-row{justify-content:flex-end}
.cm-rxbar{display:inline-flex;align-items:center;gap:1px;background:var(--ch-surface);border:1px solid rgba(16,24,40,.10);border-radius:99px;padding:2px 8px 2px 6px;cursor:pointer;box-shadow:0 2px 8px rgba(16,24,40,.10);font-family:inherit;transition:transform .1s}
.cm-rxbar:hover{transform:scale(1.06)}
.cm-rxbar.mine{border-color:var(--ch-accent);background:var(--ch-accent-soft)}
.cm-rxbar .rx-e{font-size:13.5px}
.cm-rxbar .rx-n{font-size:12px;font-weight:800;color:var(--ch-ink-2);margin-inline-start:4px}
.cm-acts{display:flex;gap:1px;align-items:center;flex:none;opacity:0;visibility:hidden;transition:opacity .13s ease,visibility .13s}
.cm:hover .cm-acts,.cm-acts:hover,.cm:focus-within .cm-acts{opacity:1;visibility:visible}
.cm-acts button{border:0;background:transparent;width:28px;height:28px;border-radius:50%;font-size:13.5px;color:var(--ch-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.cm-acts button:hover{background:rgba(16,24,40,.07);color:var(--ch-ink)}
.cm.pending .cm-b{opacity:.82}
.cm.failed .cm-b{background:var(--ch-danger-soft);color:#991B1B;box-shadow:none}
.cm-fail{align-self:flex-end;font-size:12px;font-weight:700;color:var(--ch-danger);margin:2px 4px}
.cm-fail button,.cm-confirm button{font-family:inherit;font-size:12px;font-weight:800;border:1px solid var(--ch-rule);background:var(--ch-surface);color:var(--ch-ink);border-radius:99px;padding:3px 10px;cursor:pointer;margin-inline-start:4px}
.cm-fail button{color:var(--ch-accent-text);border-color:var(--ch-accent)}
.cm-confirm{align-self:flex-end;font-size:12px;font-weight:700;color:var(--ch-ink-2);background:var(--ch-surface);border:1px solid var(--ch-rule);border-radius:12px;padding:6px 10px;margin:2px 4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cm-confirm .dng{color:#fff;background:var(--ch-danger);border-color:var(--ch-danger)}
.cm-del{font-style:italic;color:var(--ch-muted);font-size:13px}
.cm.me .cm-del{color:rgba(255,255,255,.85)}
.cm-imgs{display:grid;gap:3px;border-radius:14px;overflow:hidden;max-width:250px;margin:2px 0 0}
.cm-imgs.g1{grid-template-columns:1fr}
.cm-imgs.g2,.cm-imgs.g4,.cm-imgs.g5plus{grid-template-columns:1fr 1fr}
.cm-imgs.g3{grid-template-columns:1fr 1fr;grid-template-rows:120px 120px}
.cm-imgs img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block;min-height:60px;background:rgba(16,24,40,.08)}
.cm-imgs img.broken{font-size:12px;padding:8px}
.cm-img{position:relative;padding:0;border:0;cursor:pointer;background:none}
.cm-img .img-more{position:absolute;inset:0;background:rgba(16,24,40,.55);color:#fff;font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center}
.cm-b[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);inset-inline-start:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ch-ink);color:var(--ch-surface);font-size:12px;font-weight:700;padding:5px 10px;border-radius:9px;white-space:nowrap;width:max-content;
  max-width:min(240px,60vw);text-align:center;line-height:1.5;pointer-events:none;opacity:0;visibility:hidden;z-index:60;
  box-shadow:0 8px 24px rgba(16,24,40,.28);transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
/* anchored to the bubble's inner edge so it never leaves the panel (a centred tooltip on a
   short bubble at the edge was cut in half — Kareem's screenshot, 2026-09-07) */
.cm.me .cm-b[data-tip]::after{inset-inline-start:auto;inset-inline-end:0;transform:translateY(4px)}
.cm.them .cm-b[data-tip]::after{inset-inline-start:0;transform:translateY(4px)}
.cm-b[data-tip]:hover::after{opacity:1;visibility:visible}
.cm.me .cm-b[data-tip]:hover::after,.cm.them .cm-b[data-tip]:hover::after{transform:translateY(0)}

/* ---- floats ---------------------------------------------- */
.ch-float{position:fixed;z-index:9999;background:var(--ch-surface);border:1px solid rgba(16,24,40,.09);border-radius:14px;box-shadow:0 14px 40px rgba(16,24,40,.20);padding:5px;animation:chFl .13s ease;max-width:calc(100vw - 16px)}
.ch-float.ch-rx{display:flex;gap:2px;border-radius:99px;padding:4px 6px;align-items:center;flex-wrap:nowrap}
.ch-float.ch-rx.exp{flex-wrap:wrap;max-width:232px;border-radius:16px;padding:6px;justify-content:center}
.ch-float.ch-rx button{border:0;background:none;font-size:20px;cursor:pointer;padding:3px 5px;border-radius:50%;transition:transform .12s;min-width:32px;min-height:32px}
.ch-float.ch-rx button:hover{transform:scale(1.32)}
.ch-float.ch-rx .rx-more{font-size:15px;font-weight:900;color:var(--ch-faint);width:28px;height:28px;border-radius:50%;background:rgba(16,24,40,.06);margin-inline-start:2px}
.ch-float.ch-menu{display:flex;flex-direction:column;min-width:170px;max-height:min(280px,60vh);overflow-y:auto}
.ch-float.ch-menu button{border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:700;text-align:start;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--ch-ink);min-height:40px}
.ch-float.ch-menu button small{display:block;font-size:12px;color:var(--ch-muted);font-weight:500}
.ch-float.ch-menu button:hover,.ch-float.ch-menu button:focus-visible{background:var(--ch-surface-2)}
.ch-float.ch-menu .dng{color:var(--ch-danger)}

/* ---- typing / composer ----------------------------------- */
.chat-typing{padding:1px 14px 3px;font-size:12px;color:var(--ch-muted);line-height:1.4;font-style:italic;min-height:0}
.chat-typing:empty{display:none}
.chat-foot{padding:8px 10px;background:var(--ch-surface);border-top:1px solid var(--ch-rule-soft);display:flex;align-items:flex-end;gap:6px;flex-shrink:0;position:relative}
.chat-inp{
  flex:1;border-radius:22px;background:var(--ch-surface-2);border:1px solid transparent;padding:9px 14px;font-size:13.5px;font-weight:500;
  color:var(--ch-ink);font-family:inherit;resize:none;min-height:20px;max-height:120px;line-height:1.4;outline:none;
}
.chat-inp::placeholder{color:var(--ch-faint);font-weight:500}
.chat-inp:focus{background:var(--ch-surface);border-color:var(--ch-accent);box-shadow:0 0 0 3px rgba(11,95,255,.10)}
.chat-count{position:absolute;right:58px;top:-18px;font-size:12px;font-weight:700;color:var(--ch-muted);background:var(--ch-surface);padding:1px 6px;border-radius:99px;border:1px solid var(--ch-rule)}
.chat-count.over{color:var(--ch-danger);border-color:var(--ch-danger)}
.chat-count[hidden]{display:none}
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--ch-fill);box-shadow:none;border:0;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .12s;flex-shrink:0}
.chat-send:hover{transform:scale(1.06)}
.chat-send .sndi{display:block;line-height:1;pointer-events:none}
/* #540: the text shrinks and ellipsises, the 44 px × never leaves the bar (a long preview used to push it out of sight) */
.chat-replybar{padding:0 0 0 12px;min-height:44px;background:var(--ch-surface-2);border-top:1px solid var(--ch-rule-soft);font-size:12.5px;color:var(--ch-ink-2);display:flex;align-items:center;gap:4px}
.chat-replybar .t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-replybar .lbl{flex:0 1 auto;max-width:55%}.chat-replybar .pv{flex:1 1 0}   /* the preview keeps its own direction: Arabic is cut at its end, not its start */
.chat-replybar.edit{background:var(--ch-accent-soft);color:var(--ch-accent-text)}
.chat-replybar .n{font-weight:800}
.chat-replybar .x{margin-inline-start:auto;background:none;border:0;color:var(--ch-muted);cursor:pointer;width:44px;height:44px;border-radius:50%;font-size:17px;flex-shrink:0}
.chat-replybar .x:hover{background:rgba(16,24,40,.06)}
.chat-atts{display:flex;gap:7px;align-items:center;padding:8px 10px 2px;overflow-x:auto;scrollbar-width:thin;background:var(--ch-surface)}
.att-th{position:relative;width:56px;height:56px;border-radius:11px;overflow:hidden;border:1px solid rgba(16,24,40,.10);background:var(--ch-them);flex:none}
.att-th img{width:100%;height:100%;object-fit:cover;display:block}
.att-th.up img{filter:brightness(.6)}
.att-x{position:absolute;top:2px;inset-inline-end:2px;width:20px;height:20px;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;font-size:12px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.att-x:hover{background:var(--ch-danger)}
.att-sp{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:attSpin .7s linear infinite}
@keyframes attSpin{to{transform:rotate(360deg)}}

/* ---- group sheet ------------------------------------------ */
.sheet-body{padding:6px 16px 16px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;min-height:0}
.sheet-l{font-size:12px;font-weight:800;color:var(--ch-muted);margin-top:6px}
.sheet-inp{margin:0;width:100%;box-sizing:border-box}
.sheet-members{max-height:220px;overflow-y:auto;border:1px solid var(--ch-rule);border-radius:10px;padding:4px}
.sheet-member{display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer;font-size:13px;border-radius:8px;min-height:40px;color:var(--ch-ink)}
.sheet-member:hover{background:var(--ch-surface-2)}
.sheet-member small{margin-inline-start:auto;color:var(--ch-muted);font-size:12px}
.sheet-err{color:var(--ch-danger);font-size:12.5px;font-weight:700}
.sheet-acts{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.btn-ghost,.btn-primary{padding:9px 14px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;min-height:40px}
.btn-ghost{background:none;border:1px solid var(--ch-rule);color:var(--ch-ink)}
.btn-primary{background:var(--ch-fill);border:0;color:#fff}
.btn-primary:disabled{opacity:.6;cursor:wait}

/* ---- toast ------------------------------------------------ */
.chat-toast{position:absolute;left:12px;right:12px;bottom:70px;background:var(--ch-ink);color:var(--ch-surface);font-size:12.5px;font-weight:700;padding:9px 12px;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.3);z-index:5;display:flex;align-items:center;gap:8px}
.chat-toast[hidden]{display:none}
.chat-toast .t-retry{margin-inline-start:auto;background:var(--ch-surface);color:var(--ch-ink);border:0;border-radius:99px;padding:4px 10px;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit}

/* ---- minimised bubbles ------------------------------------ */
.chat-win.min{
  position:fixed;right:22px;width:56px;height:56px;border-radius:50%;padding:0;overflow:visible;
  background:var(--ch-fill);color:#fff;border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(22,104,201,.28);display:flex;align-items:center;justify-content:center;z-index:9997;transition:transform .12s;
}
.chat-win.min:hover{transform:scale(1.06)}
.chat-win.min .min-ini{font-size:15px;font-weight:800;letter-spacing:-.3px;line-height:1}
/* رن ٠٥٧: الكورات المصغّرة بتتراكب فوق الكورة الأساسية — أصغر منها شوية وبحلقة بيضا حواليها
   عشان تتقرا كطبقة فوقها، مش كأربع كورات أساسية. والأيقونة للجروب والجروب العام. */
.chat-win.min{width:50px;height:50px;box-shadow:0 6px 18px rgba(22,104,201,.28),0 0 0 3px var(--ch-bg);z-index:9998}
.chat-win.min .min-ico{display:flex;align-items:center;justify-content:center}
.chat-win.min .min-ico svg{width:20px;height:20px}
.chat-win.min .min-more{position:absolute;bottom:-4px;right:-4px;min-width:20px;height:18px;padding:0 5px;border-radius:99px;background:var(--ch-surface);color:var(--ch-ink);font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--ch-bg)}
.chat-win.min .min-close{position:absolute;top:-6px;left:-4px;width:20px;height:20px;border-radius:50%;background:rgba(15,23,42,.85);color:#fff;border:0;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 2px var(--ch-surface);opacity:0;transition:opacity .12s}
.chat-win.min:hover .min-close,.chat-win.min:focus-within .min-close{opacity:1}

/* ---- phones ------------------------------------------------- */
/* Run 078b (build-plan §6 team / teamconv, lane L1): the phone is html.ph-screen (shared/phone.js, the SCREEN — ADR 0017), not
   the window's width: the 641–767 px floating panel with its launcher hidden is gone (R4.2). The look is the approved pictures'
   (factory/specs/078b-phone-redesign/all/shots/team.png, teamconv.png — all.html #sh-team / #sh-teamconv, family B) through
   the --ph-* tokens of shared/phone-ui.css. The rows, header, search and composer pieces the phone adds are chat-phone.js's. */
html.ph-screen .chat-pop button{font-family:var(--ph-font);font-size:14px;line-height:1.35;font-feature-settings:"cv11" 1}   /* a button does not inherit the page's type */
html.ph-screen #chatListView{background:var(--ph-sheet);box-shadow:0 -8px 30px rgba(0,0,0,.12);animation:up .38s var(--ph-ease-up)}   /* the list is the prototype's .sheet.page */
html.ph-screen .chat-pop{inset:0;width:auto;height:auto;border-radius:0;border:0;bottom:0;right:0;box-shadow:none;background:var(--ph-sheet);color:var(--ph-t1);font-family:var(--ph-font);z-index:9998}
html.ph-screen body.chat-open .chat-fab,html.ph-screen body.chat-open .chat-win.min{display:none}
html.ph-screen .chat-win.min{display:none}   /* minimised bubbles are a desk idea: on the phone a conversation is open or it is not */
/* a finger on a phone (run 077): fields at 16 px (iOS does not zoom) and ≥ 44; a message's actions show on a tap, 44 px each */
html.ph-screen .chat-search,html.ph-screen .chat-inp{font-size:16px;min-height:44px}
html.ph-screen .cm-acts{opacity:0;visibility:hidden}
html.ph-screen .cm:hover .cm-acts{opacity:0;visibility:hidden}   /* a finger leaves a «hover» where it tapped: only a tap on the message shows them */
html.ph-screen .cm.acts-on .cm-acts,html.ph-screen .cm:focus-within .cm-acts{opacity:1;visibility:visible}
html.ph-screen .cm-acts button{width:44px;height:44px;font-size:16px}
html.ph-screen .cm-b[data-tip]::after{display:none}
html.ph-screen .chat-jump{bottom:80px;width:44px;height:44px}
/* the list: «Messages» 28/700, the pen and × faces, the search as the prototype's field, the chips */
html.ph-screen .chat-pop-h{padding:14px 16px 10px;gap:10px;min-height:0}
html.ph-screen .chat-pop-h b{font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.35;color:var(--ph-t1)}
html.ph-screen .chat-pop-h .h-acts{gap:10px}
html.ph-screen #chatNotifyBtn{display:none}   /* desktop notifications: a desk browser's thing */
html.ph-screen .chat-pop .chat-ic{width:44px;height:44px;margin:-4px;border-radius:22px;background:transparent;color:var(--ph-t2)}
html.ph-screen .chat-pop .chat-ic:hover{background:transparent}
html.ph-screen .chat-pop-h .chat-ic>.q-face{width:36px;height:36px;border-radius:18px;background:var(--ph-soft);display:grid;place-items:center;color:var(--ph-t2)}
html.ph-screen .chat-pop-h .chat-ic>.q-face svg.q-i{width:16px;height:16px;stroke-width:2.2}
html.ph-screen .q-chat-chips .q-face{text-align:start}
html.ph-screen .q-chat-search{padding:0 16px 10px;background:var(--ph-sheet)}
html.ph-screen .q-chat-search .q-in{position:relative}
html.ph-screen .q-chat-search .chat-search{margin:-1px 0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ph-t1);height:44px;box-shadow:none;flex:1;min-width:0}
html.ph-screen .q-chat-search .chat-search:focus{background:transparent;box-shadow:none;border:0}
html.ph-screen .q-chat-search .q-in:focus-within{box-shadow:inset 0 0 0 1.5px var(--ph-blue)}
html.ph-screen .q-chat-search .chat-search::placeholder{color:var(--ph-t3);opacity:1}
html.ph-screen .q-chat-chips{margin-top:10px}
html.ph-screen .q-chat-chips .q-hit.fw{min-width:44px}   /* «All» is a 43 px face: the finger still gets 44 */
html.ph-screen .chat-list{padding:0;background:var(--ph-sheet)}
html.ph-screen .chat-sec{display:none}   /* the phone draws people and chats as one list (the picture) */
html.ph-screen .chat-row.q-cr{border-radius:0;min-height:0;padding:10px 16px;gap:12px}
html.ph-screen .chat-row.q-cr:hover,html.ph-screen .chat-row.q-cr:focus-visible{background:transparent}
html.ph-screen .chat-row.q-cr:active{background:var(--ph-soft)}
html.ph-screen .chat-row.q-cr .t b{font-weight:600;color:var(--ph-t1);overflow-wrap:anywhere}
html.ph-screen .q-cr .q-av.q-gen{background:var(--ph-blue-fill);color:#fff}
html.ph-screen .q-cr .q-av.q-grpav{background:var(--ph-iris3);color:var(--ph-iris)}
html.ph-screen #chatBubbles[data-chat-filter="unread"] .chat-row:not(.unread),html.ph-screen #chatBubbles[data-chat-filter="groups"] .chat-row:not([data-kind="group"]){display:none}
html.ph-screen #chatBubbles .q-empty{padding:40px 18px}
/* the conversation: the prototype's .cv-hd, bubbles and B composer */
html.ph-screen .chat-win-h{padding:10px 12px 10px 6px;gap:10px;background:var(--ph-sheet);border-bottom:1px solid var(--ph-line)}
html.ph-screen .chat-win-h [data-act="back"]{width:44px;height:44px;margin:-2px -4px -2px -14px;border-radius:0;background:transparent;color:var(--ph-t1)}
html.ph-screen .chat-pop [data-act="back"].chat-ic>.q-face,html.ph-screen .chat-pop [data-act="sheetBack"].chat-ic>.q-face{width:36px;height:40px;border-radius:0;background:transparent;color:var(--ph-t1);display:grid;place-items:center}
html.ph-screen .chat-pop [data-act="back"].chat-ic>.q-face svg.q-i,html.ph-screen .chat-pop [data-act="sheetBack"].chat-ic>.q-face svg.q-i{width:20px;height:20px;stroke-width:1.8}
html.ph-screen .chat-pop [data-act="sheetBack"].chat-ic{margin:-2px -4px -2px -14px;color:var(--ph-t1)}
html.ph-screen .chat-win-h .av{width:34px;height:34px;background:none;overflow:visible;position:relative}
html.ph-screen .chat-win-h .av .q-av{width:34px;height:34px}
html.ph-screen .chat-win-h .n{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ph-t1)}
html.ph-screen .cw-seen,html.ph-screen .cw-seen.online{font-size:12px;font-weight:400;color:var(--ph-t2);margin-top:0;display:flex;align-items:center;gap:5px}
html.ph-screen .chat-win-h .actions [data-act="min"],html.ph-screen .chat-win-h .actions [data-act="close"]{display:none}
html.ph-screen .chat-win-h .actions .q-chat-more{width:44px;height:44px;margin:-6px;border-radius:0;display:grid;place-items:center;background:transparent;color:var(--ph-t1)}
html.ph-screen .chat-win-h .actions .q-chat-more>.q-face{width:32px;height:32px;border-radius:8px;display:grid;place-items:center}
html.ph-screen .chat-pinbar{background:var(--ph-amber3);color:var(--ph-amber);border-bottom:0;min-height:44px;font-size:13px}
html.ph-screen .chat-body{background:var(--ph-bg);padding:10px 12px 0;gap:6px}
html.ph-screen .chat-day{align-self:center;margin:4px 0;font-size:11.5px;font-weight:400;color:var(--ph-t3);text-align:start}
html.ph-screen .cm,html.ph-screen .cm.g-last,html.ph-screen .cm.g-single{margin-bottom:0}
html.ph-screen .cm-sender{font-size:11.5px;font-weight:500;color:var(--ph-t2);margin:4px 11px 0}
html.ph-screen #chatConv[data-kind="direct"] .cm-sender{display:none}
html.ph-screen .cm-b{max-width:78%;padding:8px 11px;border-radius:14px;font-size:14px;font-weight:400;line-height:1.4;box-shadow:none}
html.ph-screen .cm.them .cm-b{background:var(--ph-in);color:var(--ph-t1)}
html.ph-screen .cm.me .cm-b{background:var(--ph-out);color:var(--ph-t1)}
html.ph-screen .cm.them.g-first .cm-b,html.ph-screen .cm.them.g-mid .cm-b,html.ph-screen .cm.them.g-last .cm-b,html.ph-screen .cm.them .cm-b{border-radius:14px 14px 14px 4px}
html.ph-screen .cm.me.g-first .cm-b,html.ph-screen .cm.me.g-mid .cm-b,html.ph-screen .cm.me.g-last .cm-b,html.ph-screen .cm.me .cm-b{border-radius:14px 14px 4px 14px}
html.ph-screen .cm.me .cm-mention{color:var(--ph-blue11)}
html.ph-screen .cm.me .cm-reply{background:rgba(39,129,246,.08);border-inline-start-color:var(--ph-blue)}
html.ph-screen .cm.me .cm-del{color:var(--ph-t2)}
html.ph-screen .cm-out{display:none}   /* the ticks sit inside the bubble, beside the time (.q-mt) */
html.ph-screen .cm-b .q-mt{display:flex;gap:4px;justify-content:flex-end;align-items:center;font-size:10.5px;color:var(--ph-t3);margin-top:2px;line-height:1.4}
html.ph-screen .cm-b .q-mt svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.ph-screen .cm-b .q-mt .read{color:var(--ph-blue-text)}
html.ph-screen .cm-b .q-mt .failed{color:var(--ph-ruby);font-weight:700}
html.ph-screen .cm-ed{background:var(--ph-soft);color:var(--ph-t2);font-weight:500}
/* a reaction under a message: the 24 px pill stays as it looks, the finger gets 44 (the pill is drawn behind the button) */
html.ph-screen .cm-rxbar{position:relative;isolation:isolate;min-width:44px;min-height:44px;margin:-10px 0;padding:0 8px 0 6px;border:0;background:transparent;box-shadow:none;justify-content:center}
html.ph-screen .cm-rxbar:hover{transform:none}
html.ph-screen .cm-rxbar::before{content:"";position:absolute;inset:10px 0;z-index:-1;border-radius:99px;background:var(--ph-soft);border:1px solid var(--ph-line)}
html.ph-screen .cm-rxbar.mine::before{background:var(--ph-blue3);border-color:var(--ph-blue)}
html.ph-screen .cm-rxbar .rx-n{color:var(--ph-t2)}
html.ph-screen .chat-typing{padding:2px 16px 4px;color:var(--ph-t3);font-style:normal;background:var(--ph-bg)}
html.ph-screen .chat-foot{padding:8px 10px max(30px,calc(env(safe-area-inset-bottom) + 6px));gap:8px;background:var(--ph-bg);border-top:0;align-items:flex-end}
html.ph-screen .chat-foot [data-act="attach"]{width:44px;height:44px;margin:-4px;border-radius:22px;background:transparent;color:var(--ph-t1)}
html.ph-screen .chat-foot [data-act="attach"]>.q-face{width:36px;height:36px;border-radius:18px;background:var(--ph-soft);color:var(--ph-t1);display:grid;place-items:center}
html.ph-screen .chat-foot .q-pill{flex:1;min-width:0;min-height:38px;border-radius:19px;border:1px solid var(--ph-line);display:flex;align-items:center;padding:0 6px 0 14px;gap:2px;background:var(--ph-card);box-shadow:0 2px 10px rgba(0,0,0,.06)}
html.ph-screen .chat-foot .q-pill .chat-inp{flex:1;min-width:0;margin:-4px 0;padding:11px 0;min-height:44px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ph-t1);line-height:1.35;font-weight:400}
html.ph-screen .chat-foot .q-pill .chat-inp:focus{background:transparent;border:0;box-shadow:none}
html.ph-screen .chat-foot .q-pill .chat-inp::placeholder{color:var(--ph-t3);font-weight:400}
html.ph-screen .chat-foot .q-pill [data-act="emoji"]{width:44px;height:44px;margin:-7px -7px -7px -7px;border-radius:22px;background:transparent;color:var(--ph-t2)}
html.ph-screen .chat-foot .q-pill [data-act="emoji"]>.q-face{width:30px;height:30px;display:grid;place-items:center}
html.ph-screen .chat-foot .chat-send{width:44px;height:44px;margin:-4px;border-radius:22px;background:transparent;color:#fff}
html.ph-screen .chat-foot .chat-send:hover{transform:none}
html.ph-screen .chat-foot .chat-send>.q-face{width:36px;height:36px;border-radius:18px;background:var(--ph-blue-fill);display:grid;place-items:center}
html.ph-screen .chat-foot .chat-send>.q-face svg.q-i{stroke-width:2.4}
/* D31 AC1 (Kareem «المستطيل الازرق»): the focused field draws no square ring outside the rounded pill (.chat-pop *:focus-visible
   won over .chat-inp{outline:none}); the pill itself shows the focus, inside its own shape. Same for the New group name. */
html.ph-screen .chat-foot .q-pill .chat-inp:focus,html.ph-screen .chat-foot .q-pill .chat-inp:focus-visible,
html.ph-screen #grpName:focus,html.ph-screen #grpName:focus-visible{outline:none}
html.ph-screen .chat-foot .q-pill:focus-within{border-color:var(--ph-blue);box-shadow:inset 0 0 0 .5px var(--ph-blue),0 2px 10px rgba(0,0,0,.06)}
html.ph-screen #grpName:focus{border-color:var(--ph-blue);box-shadow:none}
html.ph-screen .chat-pop,html.ph-screen .ch-float{-webkit-tap-highlight-color:transparent}
/* AC5: with the keyboard up the composer sits on it (the 30 px home-line room is only for no keyboard) */
html.ph-screen body.ph-kbd .chat-foot{padding-bottom:8px}
/* AC3: the emoji picker docked in the composer (chat-phone.js moves it into #chatFoot): 8 px above it, the panel's width, one
   scroll, 44 px targets; no hover growth on a finger */
html.ph-screen #chatFoot>#chatEmojiPicker{position:absolute;left:8px !important;right:8px;top:auto !important;bottom:calc(100% + 8px);width:auto;max-width:none;
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px;padding:6px;border-radius:16px;max-height:min(240px,40vh);overflow-y:auto;overscroll-behavior:contain;z-index:5;animation:none;
  background:var(--ph-card);border:1px solid var(--ph-line);box-shadow:0 8px 28px rgba(0,0,0,.14)}
html.ph-screen #chatFoot>#chatEmojiPicker button{min-width:44px;min-height:44px;font-size:24px;padding:0;border-radius:12px}
html.ph-screen #chatFoot>#chatEmojiPicker .rx-more{width:44px;height:44px;border-radius:12px;background:var(--ph-soft);color:var(--ph-t2)}
@media (hover:none){html.ph-screen .ch-float.ch-rx button:hover{transform:none}}
html.ph-screen .chat-count{right:58px;top:-22px;background:var(--ph-sheet);border-color:var(--ph-line);color:var(--ph-t2)}
html.ph-screen .chat-replybar{background:var(--ph-soft);border-top:0;color:var(--ph-t2);min-height:44px}
html.ph-screen .chat-replybar .x{width:44px;height:44px}
/* the new-group screen: a B page */
html.ph-screen #chatGroupSheet .chat-pop-h{padding:10px 12px 10px 6px;gap:10px;border-bottom:1px solid var(--ph-line);background:var(--ph-sheet)}
html.ph-screen #chatGroupSheet .chat-pop-h b{font-size:15px;font-weight:600;letter-spacing:0}
html.ph-screen #chatGroupSheet .sheet-body{padding:6px 16px 16px;gap:8px}
html.ph-screen #chatGroupSheet .sheet-l{font-size:13px;font-weight:500;color:var(--ph-t2);margin-top:8px}
html.ph-screen #chatGroupSheet .sheet-inp{height:46px;border-radius:12px;background:var(--ph-field);border:0;padding:0 12px;color:var(--ph-t1)}
html.ph-screen #chatGroupSheet .sheet-members{max-height:none;border:0;border-radius:16px;background:var(--ph-soft2);padding:0}
html.ph-screen #chatGroupSheet .sheet-member{min-height:50px;padding:8px 14px;font-size:15px;color:var(--ph-t1)}
/* S2 (predicted team-group): each member is the drawing's row — the name, the email under it, a blue check on the right when
   picked — instead of the desk's native checkbox + email on the right. The checkbox stays the real, focusable control. */
html.ph-screen #chatGroupSheet .sheet-member{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"n c" "e c";column-gap:12px;row-gap:1px;position:relative;border-radius:0}
html.ph-screen #chatGroupSheet .sheet-member+.sheet-member::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen #chatGroupSheet .sheet-member>span{grid-area:n;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen #chatGroupSheet .sheet-member small{grid-area:e;margin:0;font-size:12.5px;color:var(--ph-t2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen #chatGroupSheet .sheet-member input{grid-area:c;align-self:center;-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:0;border-radius:6px;background:transparent;cursor:pointer}
html.ph-screen #chatGroupSheet .sheet-member input:checked{background:var(--ph-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat}
html.ph-screen #chatGroupSheet .sheet-member input:focus-visible{outline:2px solid var(--ph-blue);outline-offset:2px}
html.ph-screen #chatGroupSheet .sheet-member:hover{background:transparent}
html.ph-screen #chatGroupSheet .sheet-member:has(input:focus-visible){background:var(--ph-soft)}
/* the drawing's footer: Cancel (110) + Create group pinned at the sheet's bottom over a hairline */
html.ph-screen #chatGroupSheet .sheet-acts{gap:10px;margin:auto -16px -16px;padding:10px 16px 30px;border-top:1px solid var(--ph-hair);background:var(--ph-sheet);position:sticky;bottom:-16px}
html.ph-screen #chatGroupSheet .sheet-acts .btn-ghost{flex:0 0 110px}
html.ph-screen #chatGroupSheet .btn-ghost,html.ph-screen #chatGroupSheet .btn-primary{min-height:48px;border-radius:14px;font-size:16px;font-weight:600;flex:1}
html.ph-screen #chatGroupSheet .btn-ghost{border:0;background:var(--ph-soft);color:var(--ph-t1)}
html.ph-screen #chatGroupSheet .btn-primary{background:var(--ph-blue-fill)}
html.ph-screen .chat-toast{bottom:96px;left:16px;right:16px;border-radius:14px;background:var(--ph-sheet);color:var(--ph-t1);box-shadow:var(--ph-toast-shadow);font-size:14px;font-weight:500;padding:12px 14px}
html.ph-screen .chat-toast .t-retry{background:var(--ph-t1);color:var(--ph-sheet)}   /* E-1a design B1: the toast's inverse pair, readable in light and dark */
html.ph-screen .q-chat-sheet button.q-row{width:100%;text-align:left;font:inherit;color:var(--ph-t1);background:transparent}
html.ph-screen .q-chat-sheet button.q-row:active{background:var(--ph-soft)}
html.ph-screen .ch-float{border-radius:14px;background:var(--ph-sheet);border-color:var(--ph-line)}
html.ph-screen .ch-float.ch-rx button{min-width:44px;min-height:44px}
html.ph-screen .ch-float.ch-menu button{min-height:44px;color:var(--ph-t1)}
@media (prefers-reduced-motion:reduce){
  .chat-pop,.ch-float,.chat-fab,.chat-win.min,.chat-send,.cm-rxbar,.cm-acts{animation:none!important;transition:none!important}
  .chat-fab:hover,.chat-win.min:hover,.chat-send:hover,.cm-rxbar:hover{transform:none}
}