/* ═══════════════════════════════════════════════════════════════
   AGENT PORTAL · style.css
   World-class live chat UI · Dark/Light modes
═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Brand */
  --p:         #2563eb;
  --pd:        #1d4ed8;
  --pl:        #3b82f6;
  --p-tint:    #eff6ff;
  --p-tint2:   #dbeafe;
  --p-border:  #bfdbfe;

  /* Surface */
  --bg:        #eef2f7;
  --card:      #ffffff;
  --card2:     #f8fafc;
  --card3:     #f1f5f9;

  /* Text */
  --txt:       #0d1117;
  --txt2:      #4b5563;
  --txt3:      #9ca3af;

  /* Borders */
  --bdr:       #e2e8f0;
  --bdr2:      #cbd5e1;

  /* Status */
  --ok:        #10b981;
  --ok-bg:     #ecfdf5;
  --ok-txt:    #065f46;
  --warn:      #f59e0b;
  --warn-bg:   #fffbeb;
  --warn-txt:  #78350f;
  --err:       #ef4444;
  --err-bg:    #fef2f2;
  --err-txt:   #991b1b;

  /* Radius */
  --r:         10px;
  --r2:        14px;
  --r3:        20px;
}

[data-theme="dark"] {
  --p:         #3b82f6;
  --pd:        #2563eb;
  --pl:        #60a5fa;
  --p-tint:    #0f2040;
  --p-tint2:   #1a3460;
  --p-border:  #2d5fa8;

  --bg:        #0b1220;
  --card:      #111d2e;
  --card2:     #162336;
  --card3:     #1c2d42;

  --txt:       #e8f0fc;
  --txt2:      #94aecf;
  --txt3:      #5a7898;

  --bdr:       #1e3248;
  --bdr2:      #2a4460;

  --ok:        #10b981;
  --ok-bg:     #052a1c;
  --ok-txt:    #34d399;
  --warn:      #f59e0b;
  --warn-bg:   #1f1400;
  --warn-txt:  #fbbf24;
  --err:       #f87171;
  --err-bg:    #200a0a;
  --err-txt:   #fca5a5;
}

/* ── Typography ──────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--txt);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--txt3); }

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.gh {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 14px;
  gap: 0;
  background: var(--card);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  z-index: 100;
}

.hl {
  display: flex;
  align-items: center;
  padding-right: 14px;
  height: 100%;
  flex-shrink: 0;
}

.logo { height: 22px; width: auto; display: block; }

.h-sep {
  width: 1px;
  height: 20px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* Take Next button */
.h-tnb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 0 14px;
  height: 32px;
  background: var(--p);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.h-tnb:hover  { background: var(--pd); }
.h-tnb:active { transform: scale(0.97); }
.h-tnb svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.h-spacer { flex: 1; }

/* Icon buttons group */
.h-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 12px;
}

.hb {
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  border: 1px solid var(--bdr);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt2);
  transition: all 0.15s;
  flex-shrink: 0;
}
.hb:hover { background: var(--p-tint); color: var(--p); border-color: var(--p-border); }
.hb svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}

/* Agent pill */
.h-agent { position: relative; flex-shrink: 0; padding-left: 12px; }

.h-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.h-pill:hover { background: var(--card2); border-color: var(--bdr); }

.h-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--p);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
}
.h-av-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--card);
}

.h-info { display: flex; flex-direction: column; }
.h-name { font-size: 12px; font-weight: 700; color: var(--txt); white-space: nowrap; line-height: 1.3; }
.h-sub  { font-size: 10px; color: var(--txt3); white-space: nowrap; }

.h-chev { color: var(--txt3); transition: transform 0.2s; flex-shrink: 0; }
.h-chev svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.h-agent.open .h-chev { transform: rotate(180deg); }

/* Dropdown */
.h-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 196px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 300;
  overflow: hidden;
  display: none;
  animation: fadeSlideIn 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
.h-agent.open .h-drop { display: block; }

.h-drop-head {
  padding: 13px 15px;
  background: var(--card2);
  border-bottom: 1px solid var(--bdr);
}
.h-drop-name { font-size: 13px; font-weight: 700; color: var(--txt); }
.h-drop-role { font-size: 11px; color: var(--txt3); margin-top: 2px; }

.ditem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt2);
  cursor: pointer;
  transition: background 0.1s;
}
.ditem:hover { background: var(--card2); }
.ditem svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ditem.danger       { color: var(--err); }
.ditem.danger:hover { background: var(--err-bg); }

.h-drop-sep { height: 1px; background: var(--bdr); margin: 3px 0; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE TABS
═══════════════════════════════════════════════════════════════ */
.mob-tabs { display: none; flex-shrink: 0; }
.mob-tabs { background: var(--card); border-bottom: 1px solid var(--bdr); }

.mtr { display: flex; }

.mtab {
  flex: 1;
  padding: 9px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.mtab.active { color: var(--p); border-bottom-color: var(--p); }

.tbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: var(--warn);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════════════ */
.ac {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   QUEUE PANEL
═══════════════════════════════════════════════════════════════ */
.qp {
  width: 210px;
  min-width: 210px;
  background: var(--card);
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state */
.qp.collapsed { width: 44px; min-width: 44px; }
.qp.collapsed .qfull,
.qp.collapsed .q-stats,
.qp.collapsed .qtop-lbl { display: none; }
.qp.collapsed .qcol-icons { display: flex; }
.qp.collapsed .colbtn svg { transform: rotate(180deg); }
.qp.collapsed .qtop { justify-content: center; padding: 8px; }

/* Stats strip */
.q-stats {
  display: flex;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.qst {
  flex: 1;
  padding: 10px 4px;
  text-align: center;
}
.qst + .qst { border-left: 1px solid var(--bdr); }
.qsv {
  font-size: 19px;
  font-weight: 800;
  color: var(--p);
  line-height: 1;
  letter-spacing: -0.5px;
}
.qsl {
  font-size: 9px;
  font-weight: 600;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 3px;
}

/* Panel top row */
.qtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 13px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.qtop-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* Collapse button */
.colbtn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--card2);
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt3);
  transition: all 0.18s;
  flex-shrink: 0;
}
.colbtn:hover { background: var(--p); color: #fff; border-color: var(--p); }
.colbtn svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed indicator dots */
.qcol-icons {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
.qcol-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Full panel content */
.qfull {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Queue list */
.ql {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.qi {
  background: var(--card2);
  border-radius: var(--r);
  padding: 10px 10px 9px;
  margin-bottom: 7px;
  border: 1px solid var(--bdr);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.qi:hover  { border-color: var(--p-border); background: var(--p-tint); }
.qi.active {
  border-color: var(--p);
  background: var(--p-tint);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.qi-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.qvn { font-weight: 700; font-size: 12px; color: var(--txt); }
.qwt {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--warn);
}
.qwt svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.qsite {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--txt3);
  margin-bottom: 7px;
}
.qsite svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.qi-foot {}

.qbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r3);
  font-size: 10px;
  font-weight: 700;
}
.qbadge svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.qbadge.demo    { background: var(--p); color: #fff; }
.qbadge.support { background: var(--err-bg); color: var(--err-txt); }

/* Online Agents footer */
.oaf { border-top: 1px solid var(--bdr); flex-shrink: 0; }

.oaf-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.oaf-hdr:hover { background: var(--card2); }

.oaf-lbl { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.5px; }

.oaf-right { display: flex; align-items: center; gap: 6px; }
.oaf-cnt {
  background: var(--p);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r3);
  padding: 1px 8px;
}
.oaf-chev { color: var(--txt3); transition: transform 0.2s; }
.oaf-chev svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.oaf.open .oaf-chev { transform: rotate(180deg); }

.oaf-body { max-height: 0; overflow: hidden; transition: max-height 0.24s ease; }
.oaf.open .oaf-body { max-height: 60px; }

.oaf-inner {
  padding: 4px 12px 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.ab {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--p);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  position: relative;
}
.ab:hover { transform: scale(1.12); }
.ab[data-s="away"] { opacity: 0.38; }

.ab-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--card);
}
.ab-dot.away { background: var(--warn); }

.ab-more {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT PANEL
═══════════════════════════════════════════════════════════════ */
.cp {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

/* Chat header */
.chdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  gap: 12px;
}

.cvi {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* Visitor avatar with purple gradient */
.vav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.vd { min-width: 0; }
.vd h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vmeta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.vmeta-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--txt3);
  white-space: nowrap;
}
.vmeta-item svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.vsep { color: var(--bdr2); font-size: 11px; }

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r3);
  font-size: 10px;
  font-weight: 700;
  background: var(--err-bg);
  color: var(--err-txt);
  white-space: nowrap;
}
.score-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Chat action buttons */
.chat-acts { display: flex; gap: 5px; flex-shrink: 0; }

.ib {
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  background: transparent;
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt2);
  transition: all 0.15s;
}
.ib:hover { background: var(--p-tint); color: var(--p); border-color: var(--p-border); }
.ib.close:hover { background: var(--err-bg); color: var(--err-txt); border-color: var(--err); }
.ib svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════════════════════════ */
.cm {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* AI Summary bubble */
.ai-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--p-tint);
  border: 1px solid var(--p-border);
  border-radius: var(--r2);
  padding: 10px 13px;
  animation: msgIn 0.3s ease;
}

.ai-bubble-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--p);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-bubble-icon svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ai-content { font-size: 12px; line-height: 1.6; padding-top: 4px; }
.ai-lbl { font-weight: 700; color: var(--pl); margin-right: 5px; }
.ai-txt { color: var(--txt2); }

/* Message rows */
.msg {
  display: flex;
  gap: 8px;
  max-width: 72%;
  animation: msgIn 0.25s ease;
}
.msg.agent { flex-direction: row-reverse; align-self: flex-end; }

.mav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt2);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}
.msg.agent .mav { background: var(--p); color: #fff; border-color: var(--p); }

.mbody {}

.mb {
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt);
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 4px 13px 13px 13px;
  transition: border-color 0.15s;
}
.mb:hover { border-color: var(--bdr2); }
.msg.agent .mb {
  background: var(--p);
  color: #fff;
  border: none;
  border-radius: 13px 4px 13px 13px;
}

.mt {
  font-size: 10px;
  color: var(--txt3);
  margin-top: 4px;
  font-weight: 500;
}
.msg.agent .mt { text-align: right; }

/* System message */
.sys-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 10px;
  color: var(--txt3);
  font-weight: 500;
  padding: 2px 0;
}
.sys-msg::before,
.sys-msg::after { content: ''; flex: 1; height: 1px; background: var(--bdr); }

/* Typing indicator */
.typing-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: msgIn 0.25s ease;
}
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 15px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 4px 13px 13px 13px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--txt3);
  animation: typingPulse 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════
   CHAT INPUT
═══════════════════════════════════════════════════════════════ */
.cia {
  padding: 10px 14px;
  background: var(--card);
  border-top: 1px solid var(--bdr);
  flex-shrink: 0;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r2);
  padding: 6px 6px 6px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-row:focus-within {
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.input-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.input-tool {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt3);
  transition: all 0.15s;
}
.input-tool:hover { background: var(--card2); color: var(--txt2); }
.input-tool.ai-tool:hover { color: var(--p); }
.input-tool svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ci {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--txt);
  resize: none;
  min-height: 32px;
  max-height: 100px;
  padding: 5px 0;
  line-height: 1.5;
}
.ci::placeholder { color: var(--txt3); }

.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--p);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.send-btn:hover  { background: var(--pd); }
.send-btn:active { transform: scale(0.94); }
.send-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes typingPulse {
  0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
  30%           { opacity: 1;    transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body { height: 100dvh; }

  .mob-tabs { display: block; }

  /* Stack panels */
  .ac { flex-direction: column; }

  /* Queue takes full width */
  .qp {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    flex: 1;
    transition: none;
  }
  .qp.collapsed { width: 100% !important; }

  /* Hide/show panels via tab */
  .qp.tab-hidden,
  .cp.tab-hidden { display: none; }

  /* Chat panel fills remaining space */
  .cp { flex: 1; }

  /* Messages wider on mobile */
  .msg { max-width: 88%; }

  /* Hide some header items on very small screens */
  .h-name, .h-sub { display: none; }
  .h-info { display: none; }

  /* Wider messages */
  .vmeta .vsep ~ .vmeta-item ~ .vsep { display: none; }
}

@media (max-width: 380px) {
  .h-tnb span { display: none; }
  .vmeta-item:nth-child(n+4) { display: none; }
  .vsep:nth-child(n+4) { display: none; }
}