/* ChatVizo UI — Compact & professional message layout (avatars, header line, timestamps)
   Full replacement file. Backup previous file first.
*/

:root{
  --cv-accent: #263244;
  --cv-accent-2: #2C3E50;
  --cv-accent-grad: linear-gradient(135deg,#2C3E50,#111827);
  --cv-white: #ffffff;
  --cv-user: #1e90ff; /* visitor bubble */
  --cv-ai-bg: #f6f8f7;
  --cv-human: #e67e22;
  --cv-radius: 12px;
  --cv-shadow: 0 12px 30px rgba(13,24,35,0.12);
  --cv-text: #222;
  --cv-muted: #8b99a3;
  --cv-small: 12px;
}

/* --- Toggle pill (kept same) --- */
#cv-toggle-wrap { position: fixed; right: 18px; bottom: 20px; z-index: 9999999; display:flex; align-items:center; gap:8px; transition: all .25s ease; }
#cv-toggle { display:flex; align-items:center; gap:10px; background:var(--cv-accent-grad); color:#fff; padding:10px 14px; border-radius:40px; box-shadow:var(--cv-shadow); cursor:pointer; min-width:160px; font-weight:700; user-select:none; }
#cv-toggle .cv-icon { width:36px;height:36px;border-radius:8px;background:#fff;color:var(--cv-accent);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 14px rgba(0,0,0,0.08); }
#cv-toggle .cv-label { font-size:15px; }
#cv-toggle .cv-actions{margin-left:auto}
#cv-toggle .cv-close{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.06);border:none;color:#fff;cursor:pointer}

/* collapsed / hidden styles */
#cv-toggle-wrap.collapsed { right:4px }
#cv-toggle-wrap.collapsed #cv-toggle { padding:6px; min-width:48px; border-radius:50%; }
#cv-toggle-wrap.collapsed #cv-toggle .cv-label, #cv-toggle-wrap.collapsed #cv-toggle .cv-actions { display:none; }
#cv-toggle-wrap.hidden-text { transform: translateX(26px); opacity:0.98 }

/* --- Widget --- */
#cv-widget { position: fixed; right:18px; width:360px; max-width: calc(100% - 40px); z-index:9999998; display:none; border-radius:12px; overflow:hidden; box-shadow:var(--cv-shadow); background:var(--cv-white); font-family: 'Segoe UI', Roboto, Arial, sans-serif; }

/* header */
#cv-header { background:var(--cv-accent-grad); color:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px; }
#cv-header .cv-title { display:flex; align-items:center; gap:10px; font-weight:700; }
#cv-header .cv-mini { font-size:13px; color:#e8eef5 }

/* body */
#cv-body { background:var(--cv-ai-bg); max-height:80vh; height:380px; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:6px; }

/* messages list wrapper */
#cv-messages { display:flex; flex-direction:column; gap:8px; padding:6px 10px; }

/* bubble container: we will use a wrapper to allow header (avatar+name+meta) above bubble */
.cv-msg {
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:100%;
}

/* message header row (avatar + name + timestamp) */
.cv-msg .cv-head {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--cv-muted);
}

/* small avatar box */
.cv-head .cv-avatar {
  width:34px; height:34px; border-radius:8px; flex:0 0 34px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:linear-gradient(135deg,#2C3E50,#1b2a36); box-shadow:0 6px 14px rgba(0,0,0,0.06); font-size:13px;
}

/* name + meta */
.cv-head .cv-meta { display:flex; flex-direction:column; gap:1px; }
.cv-head .cv-name { font-weight:700; color:var(--cv-text); line-height:1; }
.cv-head .cv-time { font-size:12px; color:var(--cv-muted); }

/* bubble itself */
.cv-bubble {
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  max-width:82%;
  word-break:break-word;
  box-shadow:0 6px 14px rgba(0,0,0,0.04);
}

/* Agent/AI (left) style */
.cv-msg.agent { align-items:flex-start; margin-left:0; }
.cv-msg.agent .cv-bubble { background:#fff; color:var(--cv-text); border-radius:12px 12px 12px 6px; padding-left:12px; padding-right:12px; }

/* Visitor (right) style */
.cv-msg.user { align-items:flex-end; margin-right:0; }
.cv-msg.user .cv-bubble { background:var(--cv-user); color:#fff; border-radius:12px 12px 6px 12px; padding-left:12px; padding-right:12px; }

/* avatars placement adjustments for compactness */
.cv-msg.agent .cv-head .cv-avatar { margin-right:2px; }
.cv-msg.user .cv-head .cv-avatar { order:2; margin-left:2px; }

/* For user when header is visible, place avatar at right */
.cv-msg.user .cv-head { flex-direction:row-reverse; align-items:center; }

/* If message group has no header (consecutive messages), we hide header area */
.cv-msg.nohead .cv-head { display:none; }
.cv-msg.nohead .cv-bubble { margin-top:2px; }

/* show timestamp on hover for bubbles that are grouped (no header) */
.cv-msg.nohead .cv-bubble[title] { position:relative; }
.cv-msg.nohead .cv-bubble:hover::after {
  content: attr(title);
  position:absolute;
  top:-22px;
  right:0;
  background:rgba(0,0,0,0.7);
  color:#fff;
  font-size:12px;
  padding:4px 6px;
  border-radius:6px;
  white-space:nowrap;
  transform: translateY(-4px);
}

/* small, compact spacing - avoid large margins so many messages fit */
#cv-messages { gap:6px; }
.cv-msg { gap:4px; }

/* input */
#cv-inputwrap { display:flex; gap:8px; padding:10px; background:#fff; border-top:1px solid #eee; }
#cv-input { flex:1; padding:10px 12px; border-radius:22px; border:1px solid #e6e6e6; outline:none; font-size:14px; }
#cv-send { width:44px; height:44px; border-radius:50%; border:none; background:var(--cv-accent-2); color:#fff; cursor:pointer; font-weight:700; }

/* responsive tweaks */
@media (max-width:640px){
  #cv-widget { right:12px; left:12px; width:auto; bottom:12px; max-width: calc(100% - 24px); }
  #cv-body { height:56vh; max-height:80vh; padding:8px; }
  .cv-head .cv-avatar { width:30px; height:30px; }
  #cv-messages { padding:6px; }
}

/* small helper: final bubble margin */
#cv-messages .cv-msg:last-child { margin-bottom:6px; }