/* ============================================================
   CHAT PANEL — "Elleson Trades AI Hub" redesign skin
   Reskins the existing #chat-panel / #chat-panel-tab (built live
   by script.js) to match elleson_trades_chat_ui_redesign.html —
   dark glassmorphism, brand-blue accents, Inter/JetBrains Mono,
   FontAwesome icons. All real functionality untouched; this file
   only overrides appearance. Load AFTER styles.css.
   ============================================================ */

:root{
  --cp-bg-900:#0b0f19;
  --cp-bg-800:#111827;
  --cp-bg-700:#1f2937;
  --cp-bg-600:#374151;
  --cp-brand-500:#3b82f6;
  --cp-brand-600:#2563eb;
  --cp-brand-700:#1d4ed8;
  --cp-bull:#10b981;
  --cp-bear:#ef4444;
  --cp-gold:#f59e0b;
}

@keyframes cpSlideUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes cpPulseRing{
  0%{ transform:scale(.95); opacity:1; }
  50%{ transform:scale(1.1); opacity:.5; }
  100%{ transform:scale(1.2); opacity:0; }
}

/* ── Panel shell ─────────────────────────────────────────── */
#chat-panel.cp-panel{
  background:rgba(17,24,39,.85) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:14px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.55) !important;
  font-family:'Inter',sans-serif !important;
  color:#e5e7eb !important;
}

/* ── Header ──────────────────────────────────────────────── */
#chat-panel .cp-header{
  background:rgba(11,15,25,.6) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
#chat-panel .cp-header-title{
  font-weight:700 !important;
  letter-spacing:.02em;
  color:#f3f4f6 !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#chat-panel .cp-header-title svg{ color:var(--cp-brand-500); }

#chat-panel .cp-pill{
  font-family:'JetBrains Mono',monospace !important;
  font-size:9.5px !important;
  font-weight:600;
  letter-spacing:.02em;
  padding:2px 8px !important;
  border-radius:20px !important;
  background:rgba(59,130,246,.15) !important;
  color:var(--cp-brand-500) !important;
  border:1px solid rgba(59,130,246,.25) !important;
}
#chat-panel .cp-pill.green{
  background:rgba(16,185,129,.15) !important;
  color:var(--cp-bull) !important;
  border-color:rgba(16,185,129,.3) !important;
}
#chat-panel .cp-pill.green::before{
  content:'';
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--cp-bull);
  margin-right:4px;
  vertical-align:middle;
  animation:cpPulseRing 2s ease-in-out infinite;
}

/* ── Icon buttons (header + compose) ────────────────────────*/
#chat-panel .cp-icon-btn{
  background:rgba(255,255,255,.04) !important;
  color:#9ca3af !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:8px !important;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
#chat-panel .cp-icon-btn:hover{
  background:rgba(255,255,255,.09) !important;
  color:#f3f4f6 !important;
}
#chat-panel .cp-icon-btn:active{ transform:scale(.94); }
#chat-panel #voice-toggle-btn.cp-icon-btn{
  border-radius:10px !important;
  overflow:visible;
}
#chat-panel .voice-ring{
  animation:cpPulseRing 2s cubic-bezier(.24,0,.38,1) infinite;
  pointer-events:none;
}

/* ── Quick-action toolbar ───────────────────────────────────*/
#chat-panel .cp-toolbar{ background:transparent !important; }
#chat-panel .cp-qa-btn{
  background:rgba(255,255,255,.04) !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:8px !important;
  padding:5px 10px !important;
  font-size:11px !important;
  font-weight:500;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:background .15s ease, border-color .15s ease;
}
#chat-panel .cp-qa-btn:hover{
  background:rgba(59,130,246,.12) !important;
  border-color:rgba(59,130,246,.35) !important;
  color:#fff !important;
}
#chat-panel .cp-qa-btn i{ color:var(--cp-brand-500); font-size:11px; }

/* ── Floating surfaces: roster / mention dropdown / emoji picker ── */
#chat-panel .cp-card-surface{
  background:rgba(17,24,39,.95) !important;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  box-shadow:0 12px 32px rgba(0,0,0,.5) !important;
}

/* ── Message list ────────────────────────────────────────── */
#chat-panel .cp-list{
  background:transparent !important;
}
#chat-panel .cp-list::-webkit-scrollbar{ width:6px; height:6px; }
#chat-panel .cp-list::-webkit-scrollbar-track{ background:var(--cp-bg-900); }
#chat-panel .cp-list::-webkit-scrollbar-thumb{ background:var(--cp-bg-600); border-radius:4px; }
#chat-panel .cp-list::-webkit-scrollbar-thumb:hover{ background:#4b5563; }

/* Day divider */
#chat-panel .cp-day{
  display:flex; align-items:center; justify-content:center;
  margin:14px 0 8px;
}
#chat-panel .cp-day span{
  background:rgba(255,255,255,.05) !important;
  color:#9ca3af !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:9.5px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 10px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.06);
}

/* System / notification pills */
#chat-panel .cp-notification-wrap{ display:flex; justify-content:center; margin:6px 0; }
#chat-panel .cp-notification{
  background:rgba(59,130,246,.1) !important;
  color:#93c5fd !important;
  border:1px solid rgba(59,130,246,.2) !important;
  border-radius:20px !important;
  padding:4px 12px !important;
  font-size:10.5px !important;
  font-family:'JetBrains Mono',monospace !important;
}

/* Message rows — animate in like the reference template */
#chat-panel .cp-row{
  animation:cpSlideUp .28s cubic-bezier(.16,1,.3,1) both;
  margin-bottom:10px;
}

/* Avatars */
#chat-panel .cp-avatar{
  background:linear-gradient(135deg,var(--cp-brand-600),#6366f1) !important;
  box-shadow:0 2px 8px rgba(37,99,235,.3);
}
#chat-panel .cp-avatar-alt{
  background:linear-gradient(135deg,#7c3aed,#db2777) !important;
}

/* Bubbles */
#chat-panel .cp-bubble{
  background:var(--cp-bg-700) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:14px !important;
  color:#e5e7eb !important;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
#chat-panel .cp-row.self .cp-bubble{
  background:linear-gradient(135deg,var(--cp-brand-600),var(--cp-brand-700)) !important;
  border-color:rgba(59,130,246,.4) !important;
  color:#fff !important;
}
#chat-panel .cp-bubble.cp-mention{
  border-color:rgba(245,158,11,.5) !important;
  box-shadow:0 0 0 1px rgba(245,158,11,.25), 0 0 16px rgba(245,158,11,.15) !important;
}
#chat-panel .cp-bubble.cp-deleted{
  background:rgba(255,255,255,.03) !important;
  color:#6b7280 !important;
  font-style:italic;
  border:1px dashed rgba(255,255,255,.1) !important;
}
#chat-panel .cp-bubble-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:3px;
}
#chat-panel .cp-bubble-user{
  font-weight:700 !important;
  font-size:11.5px !important;
  color:#93c5fd !important;
  cursor:pointer;
}
#chat-panel .cp-row.self .cp-bubble-user{ color:rgba(255,255,255,.85) !important; }
#chat-panel .cp-time{
  font-family:'JetBrains Mono',monospace !important;
  font-size:9.5px !important;
  color:rgba(255,255,255,.4) !important;
  flex-shrink:0;
}

/* Hover-reveal meta / action row */
#chat-panel .cp-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; }
#chat-panel .cp-meta button,
#chat-panel .cp-meta i{ color:#6b7280 !important; }
#chat-panel .cp-meta button:hover,
#chat-panel .cp-meta button:hover i{ color:var(--cp-brand-500) !important; }

/* Typing line */
#chat-panel #chat-typing-line{
  color:var(--cp-brand-500) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-style:normal !important;
}

/* ── Compose area ────────────────────────────────────────── */
#chat-panel .cp-compose{
  background:rgba(11,15,25,.5) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
#chat-panel .cp-input{
  background:var(--cp-bg-700) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  color:#f3f4f6 !important;
  font-family:'Inter',sans-serif !important;
}
#chat-panel .cp-input:focus{
  outline:none !important;
  border-color:var(--cp-brand-500) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;
}
#chat-panel .cp-input::placeholder{ color:#6b7280 !important; }

#chat-panel .cp-send-btn{
  background:linear-gradient(135deg,var(--cp-brand-600),var(--cp-brand-700)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-weight:700 !important;
  box-shadow:0 4px 12px rgba(37,99,235,.35);
  transition:transform .1s ease, box-shadow .15s ease;
}
#chat-panel .cp-send-btn:hover{
  box-shadow:0 6px 16px rgba(37,99,235,.5);
}
#chat-panel .cp-send-btn:active{ transform:scale(.96); }

/* ── Collapsed tab (floating pill when panel is minimized) ──*/
#chat-panel-tab.cp-tab{
  background:linear-gradient(135deg,var(--cp-brand-600),var(--cp-brand-700)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.1) !important;
  font-family:'Inter',sans-serif !important;
  box-shadow:0 8px 28px rgba(37,99,235,.4) !important;
}
#chat-panel-tab.cp-tab:hover{ filter:brightness(1.08); }

/* Voice recording bar dot already uses a keyframe defined in script.js
   (scRecPulse) — just recolor it to match the accent-bear red. */
#chat-panel #chat-rec-dot{ background:var(--cp-bear) !important; }

/* Pinned message bar */
#chat-panel .cp-pinned{
  background:rgba(59,130,246,.08) !important;
  border-bottom:1px solid rgba(59,130,246,.15) !important;
}
#chat-panel .cp-pinned-title{
  color:#93c5fd !important;
  font-size:11px !important;
  font-weight:600;
}
#chat-panel .cp-pinned-close{ color:#9ca3af !important; }
#chat-panel .cp-pinned-close:hover{ color:#f3f4f6 !important; }