/* ============================================================
 * Chat drawer (realtime) — session 646. Scope: #zn_chat_drawer.
 * Right-side panel: list view ↔ conversation view. Tokens auto-flip light theme.
 * z-index 1200 (dưới toast 10020 / modal 10030 để alertify hiện trên).
 * ============================================================ */

/* Backdrop. z 1240 > menu bell/avatar (1200), < toast (10020)/modal (10030). */
#zn_chat_backdrop{
  position:fixed; inset:0; z-index:1240;
  background:rgba(4,8,20,.46);
  opacity:0; visibility:hidden; transition:opacity .2s;
}
#zn_chat_backdrop.open{ opacity:1; visibility:visible; }
/* Khoá scroll nền khi mở full-width (mobile). */
@media (max-width:480px){ body.zn-chat-open{ overflow:hidden; } }

/* Drawer */
#zn_chat_drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1250;
  width:380px; max-width:100vw;
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--au-text, var(--ink));
  border-left:1px solid var(--border);
  box-shadow:-12px 0 44px rgba(0,0,0,.34);
  transform:translateX(100%); transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
#zn_chat_drawer.open{ transform:translateX(0); }

/* Header */
#zn_chat_drawer .cd-head{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 14px; border-bottom:1px solid var(--border);
}
#zn_chat_drawer .cd-head .ti{ font-size:16px; font-weight:800; flex:1; color:var(--au-bright, var(--ink)); }
#zn_chat_drawer .cd-head .back{ display:none; }
#zn_chat_drawer.view-convo .cd-head .back{ display:grid; }
#zn_chat_drawer .cd-ic{
  width:34px; height:34px; flex:none; border:0; cursor:pointer;
  border-radius:9px; display:grid; place-items:center;
  background:transparent; color:var(--au-muted); transition:background .15s,color .15s;
}
#zn_chat_drawer .cd-ic:hover{ background:var(--accent-soft); color:var(--accent-2); }

/* Convo header identity (hidden in list) */
#zn_chat_drawer .cd-who{ display:none; align-items:center; gap:9px; flex:1; min-width:0; }
#zn_chat_drawer.view-convo .cd-who{ display:flex; }
#zn_chat_drawer.view-convo .cd-head .ti{ display:none; }
#zn_chat_drawer .cd-who .nm{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--au-bright, var(--ink)); }
#zn_chat_drawer .cd-who .st{ font-size:11px; color:var(--au-muted); }
#zn_chat_drawer .cd-who .st.on{ color:#33c27f; }

/* Body (swappable panes) */
#zn_chat_drawer .cd-body{ flex:1; min-height:0; position:relative; overflow:hidden; }
#zn_chat_drawer .cd-pane{ position:absolute; inset:0; display:flex; flex-direction:column; }
#zn_chat_drawer .cd-list{ display:flex; }
#zn_chat_drawer .cd-convo{ display:none; }
#zn_chat_drawer.view-convo .cd-list{ display:none; }
#zn_chat_drawer.view-convo .cd-convo{ display:flex; }

/* ---- List ---- */
#zn_chat_drawer .cd-threads{ flex:1; overflow-y:auto; padding:6px; }
#zn_chat_drawer .cd-empty{ padding:40px 22px; text-align:center; color:var(--au-muted); font-size:13px; line-height:1.6; }
#zn_chat_drawer .th{
  display:flex; align-items:center; gap:11px; padding:9px 10px;
  border-radius:12px; cursor:pointer; transition:background .14s;
}
#zn_chat_drawer .th:hover{ background:var(--accent-soft); }
#zn_chat_drawer .th .who{ flex:1; min-width:0; }
#zn_chat_drawer .th .who .nm{ font-size:13.5px; font-weight:700; color:var(--au-bright, var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#zn_chat_drawer .th .who .pv{ font-size:12px; color:var(--au-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
#zn_chat_drawer .th.unread .who .pv{ color:var(--au-text, var(--ink)); font-weight:600; }
#zn_chat_drawer .th .meta{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
#zn_chat_drawer .th .tm{ font-size:10.5px; color:var(--au-muted); }
#zn_chat_drawer .th .badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:800;
  display:grid; place-items:center;
}

/* Avatar + presence dot */
#zn_chat_drawer .cd-av{ position:relative; flex:none; }
#zn_chat_drawer .cd-av .zy-avatar{ background-size:cover; background-position:center; }
#zn_chat_drawer .cd-av .dot{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
  border-radius:50%; background:#7a8099; border:2px solid var(--surface);
}
#zn_chat_drawer .cd-av .dot.on{ background:#33c27f; }

/* ---- Conversation ---- */
#zn_chat_drawer .cd-msgs{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:8px; }
#zn_chat_drawer .msg{ max-width:78%; display:flex; flex-direction:column; }
#zn_chat_drawer .msg .bubble{
  padding:8px 12px; border-radius:14px; font-size:13.5px; line-height:1.45;
  word-wrap:break-word; white-space:pre-wrap;
}
#zn_chat_drawer .msg .tm{ font-size:10px; color:var(--au-muted); margin-top:3px; }
#zn_chat_drawer .msg.them{ align-self:flex-start; }
#zn_chat_drawer .msg.them .bubble{ background:var(--surface-2); color:var(--au-text, var(--ink)); border-bottom-left-radius:5px; }
#zn_chat_drawer .msg.me{ align-self:flex-end; align-items:flex-end; }
#zn_chat_drawer .msg.me .bubble{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-bottom-right-radius:5px; }

/* Composer */
#zn_chat_drawer .cd-compose{
  flex:none; display:flex; align-items:flex-end; gap:8px;
  padding:10px 11px; border-top:1px solid var(--border);
}
#zn_chat_drawer .cd-compose textarea{
  flex:1; resize:none; max-height:110px; min-height:38px;
  padding:9px 12px; border-radius:12px; font:inherit; font-size:13.5px; line-height:1.4;
  background:var(--surface-2); color:var(--au-text, var(--ink));
  border:1px solid var(--border); outline:none;
}
#zn_chat_drawer .cd-compose textarea:focus{ border-color:var(--accent-2); }
#zn_chat_drawer .cd-send{
  flex:none; width:38px; height:38px; border:0; cursor:pointer; border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  display:grid; place-items:center; transition:opacity .15s, filter .15s;
}
#zn_chat_drawer .cd-send:hover{ filter:brightness(1.08); }
#zn_chat_drawer .cd-send:disabled{ opacity:.5; cursor:default; }

/* Header chat icon unread badge */
#header_chat_slot .zy-bell .count[data-zy-chat-count]{ background:var(--accent); }

/* Mobile */
@media (max-width:480px){
  #zn_chat_drawer{ width:100vw; border-left:0; }
}