/* מסך הוואטסאפ (wa.js).
 *
 * שתי עמודות כמו בוואטסאפ עצמו: שרשורים מימין, שיחה משמאל. בטלפון
 * הרשימה והשיחה מתחלפות במקום להידחס.
 */

.wa-wrap{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 260px);
  min-height:420px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden}

/* ── רשימת השרשורים ──────────────────────────────────────────── */
.wa-side{border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
  min-width:0;background:var(--surface2)}
.wa-search{padding:10px;border-bottom:1px solid var(--line)}
.wa-search input{width:100%;font:inherit;font-size:13px;padding:8px 12px;
  border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--ink)}
.wa-list{flex:1;overflow-y:auto}
.wa-t{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;
  border-bottom:1px solid var(--line);background:transparent;font:inherit;cursor:pointer;
  text-align:start;color:var(--ink)}
.wa-t:hover{background:var(--surface3)}
.wa-t.on{background:var(--accent-t1);box-shadow:inset 3px 0 0 var(--accent)}
.wa-av{inline-size:34px;block-size:34px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:700;font-size:14px;background:var(--accent-t2);
  color:var(--accent)}
.wa-av.big{inline-size:38px;block-size:38px}
.wa-tb{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.wa-tn{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:flex;align-items:center;gap:5px}
.wa-lock{font-style:normal;font-size:10px;opacity:.6}
.wa-tl{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-tl i{font-style:normal;color:var(--ink3);opacity:.8}
.wa-tm{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;
  font-size:10.5px;color:var(--ink3)}
.wa-un{font-family:var(--font-num);font-size:10.5px;font-weight:700;padding:1px 7px;
  border-radius:99px;background:var(--wa);color:#04310f}

/* ── השיחה ───────────────────────────────────────────────────── */
.wa-pane{display:flex;flex-direction:column;min-width:0}
.wa-head{display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:var(--surface2)}
.wa-hn{display:flex;flex-direction:column;min-width:0}
.wa-hn b{font-size:14.5px}
.wa-hn .n{font-size:11.5px;color:var(--ink3);font-family:var(--font-num)}
.wa-win{margin-inline-start:auto;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:99px;white-space:nowrap}
.wa-win.open{background:color-mix(in srgb,var(--won-vivid) 16%,transparent);color:var(--won)}
.wa-win.shut{background:var(--surface3);color:var(--ink3)}

.wa-msgs{flex:1;overflow-y:auto;padding:16px 15px;display:flex;flex-direction:column;gap:8px;
  background:var(--bg)}
.wa-m{display:flex}
.wa-m.in{justify-content:flex-start}
.wa-m.out{justify-content:flex-end}
.wa-bub{max-width:min(78%,520px);padding:8px 12px 6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1)}
.wa-m.out .wa-bub{background:color-mix(in srgb,var(--wa) 16%,var(--surface));
  border-color:color-mix(in srgb,var(--wa) 30%,transparent)}
.wa-bub.bad{border-color:color-mix(in srgb,var(--lost-vivid) 45%,transparent)}
.wa-bub p{margin:0;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.wa-tpl{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:99px;
  background:var(--accent-t2);color:var(--accent);margin-bottom:4px}
.wa-meta{display:flex;align-items:center;gap:5px;justify-content:flex-end;
  font-size:10.5px;color:var(--ink3);margin-top:3px}
.wa-meta i{font-style:normal}
.wa-meta i.rd{color:var(--new-vivid)}
.wa-err{display:block;font-size:11px;color:var(--lost);margin-top:3px}

/* ── תיבת הכתיבה ─────────────────────────────────────────────── */
.wa-comp{display:flex;align-items:flex-end;gap:9px;padding:11px 13px;
  border-top:1px solid var(--line);background:var(--surface2)}
.wa-comp textarea{flex:1;font:inherit;font-size:14px;padding:10px 13px;border-radius:18px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);resize:none;
  min-height:42px;max-height:140px;line-height:1.45}
.wa-send{font:inherit;font-size:13.5px;font-weight:700;padding:10px 20px;border-radius:99px;
  border:0;background:var(--wa);color:#04310f;cursor:pointer;min-height:42px}
.wa-send:hover{filter:brightness(1.07)}
.wa-send:disabled{opacity:.55;cursor:default}
.wa-comp.closed{flex-direction:column;align-items:stretch;gap:10px}
.wa-closed-n{font-size:12.5px;color:var(--ink3);line-height:1.6}
.wa-closed-n b{color:var(--ink2)}
.wa-tpls{display:flex;gap:9px;align-items:center}
.wa-tpls select{flex:1;font:inherit;font-size:13.5px;padding:9px 12px;border-radius:var(--r-ctl);
  border:1px solid var(--line2);background:var(--surface);color:var(--ink)}

.wa-none,.wa-empty{display:grid;place-items:center;text-align:center;padding:40px 22px;
  color:var(--ink3);font-size:13.5px;flex:1}
.wa-empty b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px}
.wa-empty p{margin:0;max-width:34ch;line-height:1.6}

/* ── טלפון: רשימה או שיחה, לא שתיהן ──────────────────────────── */
@media (max-width:760px){
  .wa-wrap{grid-template-columns:1fr;height:calc(100vh - 210px)}
  .wa-side{border-inline-start:0;border-bottom:1px solid var(--line);max-height:44vh}
  .wa-pane{min-height:0}
  .wa-bub{max-width:88%}
  .wa-send{min-height:44px}
  .wa-comp textarea{min-height:44px}
}