/* ══════════════════════════════════════════════════════════════════════════
   Velamart Chat Widget (storefront) — ground-up redesign
   Visual language inspired by Intercom / Zendesk / Crisp (compact launcher,
   single intro message + suggestion cards, one-row composer) using the
   Velamart brand palette. Vanilla CSS, no framework.

   Spacing follows an 8px scale: --vcw-s1=4 (micro), --vcw-s2..s6 = 8/8/16/24/32px.
   Backend contract (endpoints, fields, localStorage keys) is unchanged —
   this file only touches presentation.
   ══════════════════════════════════════════════════════════════════════════ */

#velamart-chat-widget {
  position: fixed;
  z-index: 99990;
  /* --vcw-offset-x/y are recomputed in JS (layoutWidget()) so the widget
     never stacks on another fixed bottom-right element already on the page. */
  right: var(--vcw-offset-x, 24px);
  bottom: var(--vcw-offset-y, 24px);
  font-family: inherit;

  --vcw-primary: #1c48c1;
  --vcw-primary-dark: #123a94;
  --vcw-primary-light: #eef2fc;
  --vcw-accent: #ffcc32;

  /* 8px spacing system. s1/s2 are half-steps kept for hairline/micro gaps
     (icon padding, borders); s3-s6 are the on-grid 8/16/24/32 values used
     for all macro layout spacing (header, body, composer, cards). */
  --vcw-s1: 4px;
  --vcw-s2: 8px;
  --vcw-s3: 8px;
  --vcw-s4: 16px;
  --vcw-s5: 24px;
  --vcw-s6: 32px;

  --vcw-radius-lg: 22px;
  --vcw-radius-md: 16px;
  --vcw-radius-sm: 12px;

  --vcw-shadow-soft: 0 20px 50px rgba(15,45,122,.22), 0 4px 14px rgba(15,45,122,.08);
}

/* ── Launcher (collapsed state) ───────────────────────────────────────── */
@keyframes vcw-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(28,72,193,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(28,72,193,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,72,193,0); }
}
@keyframes vcw-fade-scale-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vcw-slide-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vcw-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  pointer-events: none;
  animation: vcw-ripple-anim .5s ease-out;
}
@keyframes vcw-ripple-anim {
  to { transform: scale(2.2); opacity: 0; }
}

.vcw-launcher {
  /* margin/padding/min-height/line-height/text-transform/font-weight reset —
     required because flatsome.css:41488 `button,input[type=button]...{
     margin-right:1em;padding:0 1.2em;min-height:2.5em;line-height:2.4em;
     text-transform:uppercase;font-weight:bolder}` and flatsome.css:87132
     `.button,button,...{margin-bottom:1em}` are bare `button` element
     selectors — this widget's classes are more specific and win on every
     property they declare, but never declared margin/padding, so those two
     leaked straight through onto every <button> in the widget. This is the
     confirmed root cause of the composer input collapsing to ~77px. */
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vcw-primary) 0%, var(--vcw-primary-dark) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(28,72,193,.38);
  animation: vcw-pulse-ring 2.2s ease-out 3;
  transition: transform .2s ease, box-shadow .2s ease, opacity .18s ease, visibility .18s ease;
}
.vcw-launcher:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 34px rgba(28,72,193,.48);
}
.vcw-launcher:active { transform: translateY(0) scale(.97); }

/* Only one close control may be visible at a time — when the panel is open,
   the header's own close button (.vcw-close-btn) takes over and the
   floating launcher hides entirely instead of doubling as a second one. */
#velamart-chat-widget.vcw-is-open .vcw-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.8);
  animation: none;
}

.vcw-launcher-icon { display: flex; align-items: center; justify-content: center; }
.vcw-launcher-icon svg { width: 26px; height: 26px; }

/* Hint bubble — brief "Cần hỗ trợ?" prompt shown once per visit next to the
   closed launcher; hovering the launcher itself shows the tooltip instead. */
.vcw-hint-bubble {
  position: absolute;
  right: 72px;
  bottom: 14px;
  background: #fff;
  color: #1c2333;
  font-size: 13px;
  font-weight: 700;
  padding: var(--vcw-s4) var(--vcw-s5);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--vcw-shadow-soft);
  opacity: 0;
  transform: translateY(6px) scale(.94);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  cursor: pointer;
}
.vcw-hint-bubble.vcw-hint-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.vcw-hint-bubble[hidden] { display: none; }

.vcw-launcher-tooltip {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 12px);
  background: #16305f;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: var(--vcw-s2) var(--vcw-s4);
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.vcw-launcher-tooltip::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: #16305f;
}
.vcw-launcher:hover .vcw-launcher-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
#velamart-chat-widget.vcw-is-open .vcw-launcher-tooltip { display: none; }

.vcw-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.vcw-badge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vcw-launcher,
  .vcw-msg,
  .vcw-suggestion-card,
  .vcw-typing,
  .vcw-typing-dots span,
  .vcw-emoji-panel,
  .vcw-composer-btn.vcw-recording,
  .vcw-recording-hint b { animation: none; }
  .vcw-ripple { display: none; }
}

/* ── Panel shell ──────────────────────────────────────────────────────── */
.vcw-panel {
  position: fixed;
  right: var(--vcw-offset-x, 24px);
  bottom: calc(var(--vcw-offset-y, 24px) + 72px);
  width: var(--vcw-panel-w, 404px);
  max-width: calc(100vw - 40px);
  height: var(--vcw-panel-h, 600px);
  max-height: calc(100vh - var(--vcw-offset-y, 24px) - 100px);
  background: #fff;
  border-radius: var(--vcw-radius-lg);
  box-shadow: var(--vcw-shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.vcw-panel.vcw-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Tablet/desktop/laptop width tiering (390-420px vs 360-390px) is computed
   in JS (layoutWidget()) and applied via --vcw-panel-w — see chat-widget.js. */

/* Mobile — fullscreen, no floating panel, closed launcher stays anchored. */
@media (max-width: 768px) {
  #velamart-chat-widget { right: 12px; bottom: 12px; }
  .vcw-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .vcw-hint-bubble { right: 64px; }
}

/* ── Header (90–100px) ────────────────────────────────────────────────── */
.vcw-header {
  background: linear-gradient(135deg, var(--vcw-primary) 0%, var(--vcw-primary-dark) 100%);
  color: #fff;
  min-height: 96px;
  padding: var(--vcw-s4) var(--vcw-s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vcw-s4);
  flex-shrink: 0;
}
.vcw-agent { display: flex; align-items: center; gap: var(--vcw-s4); min-width: 0; }
.vcw-agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  flex-shrink: 0;
}
.vcw-agent-info { min-width: 0; }
.vcw-agent-name { font-weight: 800; font-size: 18px; letter-spacing: .1px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcw-agent-role { font-size: 14px; opacity: .82; line-height: 1.3; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcw-agent-badges {
  display: flex;
  align-items: center;
  gap: var(--vcw-s1);
  flex-wrap: wrap;
  margin-top: var(--vcw-s1);
}
.vcw-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 2px var(--vcw-s1);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  white-space: nowrap;
}
.vcw-badge-pill--online { color: #d7fbe4; }
.vcw-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74,222,128,.35);
  flex-shrink: 0;
}

.vcw-close-btn {
  /* Same flatsome `button` element-selector leak as .vcw-launcher — see
     comment there (margin-right:1em / padding:0 1.2em / min-height:2.5em). */
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
}
.vcw-close-btn:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.vcw-close-btn:active { transform: scale(.94); }
.vcw-close-btn svg { width: 16px; height: 16px; }

/* ── Body (scrollable conversation area) ─────────────────────────────── */
.vcw-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--vcw-s4);
  background: #f6f8fc;
  display: flex;
  flex-direction: column;
  gap: var(--vcw-s4);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vcw-body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Quick-action cards (Intercom-style conversation starters) */
.vcw-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--vcw-s2);
  margin-left: 36px; /* aligns under the intro bubble, past its avatar column */
}
.vcw-suggestions.vcw-hidden { display: none; }
.vcw-suggestion-card {
  /* Same flatsome `button` element-selector leak (see .vcw-launcher comment
     above) — this one was silently rendering card labels in UPPERCASE via
     inherited text-transform, since the label/desc spans never set their own. */
  margin: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--vcw-s4);
  padding: var(--vcw-s4);
  border-radius: var(--vcw-radius-md);
  border: 1.5px solid #e7edf9;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  animation: vcw-slide-fade-in .25s ease both;
}
.vcw-suggestion-card:nth-child(2) { animation-delay: .04s; }
.vcw-suggestion-card:nth-child(3) { animation-delay: .08s; }
.vcw-suggestion-card:nth-child(4) { animation-delay: .12s; }
.vcw-suggestion-card:nth-child(5) { animation-delay: .16s; }
.vcw-suggestion-card:hover {
  border-color: var(--vcw-primary);
  box-shadow: 0 8px 20px rgba(28,72,193,.14);
  transform: translateY(-1px) scale(1.01);
  background: var(--vcw-primary-light);
}
.vcw-suggestion-card:active { transform: translateY(0) scale(.99); }
.vcw-suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--vcw-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vcw-suggestion-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vcw-suggestion-label { font-size: 16px; font-weight: 700; color: #172038; line-height: 1.3; }
.vcw-suggestion-desc { font-size: 13px; font-weight: 500; color: #7c88a3; line-height: 1.3; }
.vcw-suggestion-chevron { color: #b7c2da; font-size: 16px; flex-shrink: 0; transition: transform .2s ease; }
.vcw-suggestion-card:hover .vcw-suggestion-chevron { transform: translateX(2px); color: var(--vcw-primary); }

/* ── Message bubbles ──────────────────────────────────────────────────── */
.vcw-msg { max-width: 82%; display: flex; flex-direction: column; animation: vcw-fade-scale-in .2s ease; }
.vcw-msg-customer { align-self: flex-end; align-items: flex-end; }
.vcw-msg-admin { align-self: flex-start; align-items: flex-start; max-width: 90%; }

.vcw-msg-name { font-size: 10.5px; font-weight: 700; color: #5b6a86; margin: 0 0 var(--vcw-s1) 36px; }
.vcw-msg-row { display: flex; align-items: flex-end; gap: var(--vcw-s2); }
.vcw-msg-customer .vcw-msg-row { flex-direction: row-reverse; }
.vcw-msg-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--vcw-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-bottom: 1px;
}

.vcw-bubble {
  padding: var(--vcw-s3) var(--vcw-s4);
  border-radius: var(--vcw-radius-md);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.vcw-msg-customer .vcw-bubble {
  background: linear-gradient(135deg, var(--vcw-primary) 0%, var(--vcw-primary-dark) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 10px rgba(28,72,193,.22);
}
.vcw-msg-admin .vcw-bubble {
  background: #fff;
  color: #1c2333;
  border: 1px solid #e7edf9;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(15,45,122,.06);
}

.vcw-msg-time { font-size: 10.5px; color: #8b96ab; margin-top: var(--vcw-s1); padding: 0 var(--vcw-s1); display: flex; align-items: center; gap: var(--vcw-s1); }
.vcw-msg-status { display: inline-flex; color: var(--vcw-primary); }
.vcw-msg-status svg { width: 13px; height: 13px; display: block; }

.vcw-attachment-img { max-width: 210px; max-height: 210px; border-radius: 12px; display: block; cursor: pointer; }
.vcw-attachment-file {
  display: flex; align-items: center; gap: var(--vcw-s2);
  padding: var(--vcw-s2) var(--vcw-s3); border-radius: 10px;
  background: rgba(28,72,193,.06); font-size: 12.5px; text-decoration: none; color: inherit;
}
.vcw-msg-customer .vcw-attachment-file { background: rgba(255,255,255,.16); color: #fff; }
.vcw-attachment-audio { display: flex; align-items: center; }
.vcw-attachment-audio audio { max-width: 210px; height: 34px; }

/* Typing indicator */
.vcw-typing {
  display: inline-flex; align-items: center; gap: var(--vcw-s2);
  padding: var(--vcw-s3) var(--vcw-s4); background: #fff;
  border: 1px solid #e7edf9; border-radius: var(--vcw-radius-md); border-bottom-left-radius: 4px;
  align-self: flex-start; margin-left: 32px; animation: vcw-fade-scale-in .2s ease;
}
.vcw-typing-label { font-size: 11.5px; color: #5b6a86; white-space: nowrap; }
.vcw-typing-dots { display: inline-flex; align-items: center; gap: var(--vcw-s1); }
.vcw-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #a9b3c8; animation: vcw-typing-bounce 1.2s infinite ease-in-out; }
.vcw-typing-dots span:nth-child(2) { animation-delay: .15s; }
.vcw-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes vcw-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Pre-chat details (compact, collapsed) ───────────────────────────── */
.vcw-prechat { border-top: 1px solid #e7edf9; background: #fff; flex-shrink: 0; }
.vcw-prechat summary { cursor: pointer; padding: var(--vcw-s2) var(--vcw-s4); font-size: 12px; color: var(--vcw-primary); font-weight: 700; list-style: none; }
.vcw-prechat summary::-webkit-details-marker { display: none; }
.vcw-prechat-fields { display: flex; flex-direction: column; gap: var(--vcw-s2); padding: 0 var(--vcw-s4) var(--vcw-s3); }
.vcw-prechat-fields input {
  /* Same flatsome bare-selector leak as the composer (margin-bottom:1em,
     height:2.507em, width:100%, box-shadow:inset...) — reset explicitly. */
  margin: 0; box-sizing: border-box; width: 100%; height: auto; box-shadow: none;
  border: 1.5px solid #dbe4f8; border-radius: var(--vcw-radius-sm); padding: var(--vcw-s2) var(--vcw-s3);
  font-size: 12.5px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.vcw-prechat-fields input:focus { border-color: var(--vcw-primary); box-shadow: 0 0 0 3px rgba(28,72,193,.1); }

/* ── Composer / footer (~72-84px, single row: icons · input · send) ─────
   CONFIRMED root cause of the input collapsing to ~77px (verified via real
   getComputedStyle in headless Chrome, identical at 1920/1600/1366/1280):
   flatsome.css has two bare element-selector rules —
     flatsome.css (byte 41488): button,input[type=button],input[type=reset],
       input[type=submit]{margin-right:1em;padding:0 1.2em;min-height:2.5em;
       line-height:2.4em;text-transform:uppercase;font-weight:bolder;...}
     flatsome.css (byte 87132): .button,button,fieldset,input,select,
       textarea{margin-bottom:1em}
   Every <button> in this composer (4 icon buttons + send) never had its own
   margin/padding declared, so flatsome's margin-right:1em + padding:0 1.2em
   leaked straight through: 5 buttons × (~15.5px margin + ~4px padding
   overflow past their own explicit width) ate ~95px of the 388px content
   row, leaving the textarea with almost nothing. Fixed by adding explicit
   margin:0/padding:0/min-height:0/line-height/text-transform resets on
   every .vcw-*-btn / .vcw-suggestion-card / .vcw-input rule below — see
   comments on .vcw-launcher and .vcw-suggestion-card for the same fix
   pattern. The width/max-width/box-shadow resets on .vcw-input further
   down are still correct (a different flatsome rule targets textarea
   width), just not what was actually starving the input here. */
.vcw-composer-bar {
  box-sizing: border-box;
  border-top: 1px solid #e7edf9;
  padding: 12px var(--vcw-s4);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  position: relative;
}
.vcw-composer-icons { display: flex; align-items: center; gap: var(--vcw-s1); flex: 0 0 auto; }
.vcw-composer-btn {
  /* margin/padding/min-height/line-height/text-transform reset — flatsome
     `button{...}` leak, see the composer-bar comment above for the exact rule. */
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #6b7690;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.vcw-composer-btn:hover { background: #eef2fc; color: var(--vcw-primary); transform: translateY(-1px); }
.vcw-composer-btn:active { transform: translateY(0) scale(.94); }
.vcw-composer-btn svg { width: 17px; height: 17px; }
.vcw-composer-btn.vcw-recording { background: #fee2e2; color: #dc2626; animation: vcw-pulse-ring 1.4s ease-out infinite; }

.vcw-input {
  /* Flexbox sizing — this is the fix: an explicit `flex: 1 1 auto` +
     `min-width: 0` + `width: auto` stops the host theme's global
     `textarea{width:100%;max-width:100%}` rule (flatsome.css) from ever
     starving this item down to its intrinsic min-content width. Do not
     replace with a fixed px width — the whole point is it fills whatever
     space is left after the icon cluster and send button. */
  margin: 0; /* flatsome.css byte 87132: textarea{margin-bottom:1em} leak */
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  resize: none;
  border: 1.5px solid #dbe4f8;
  border-radius: 28px;
  padding: 13px var(--vcw-s4);
  font-size: 15px;
  height: 52px;
  min-height: 52px;
  max-height: 96px;
  line-height: 24px;
  outline: none;
  font-family: inherit;
  color: #1c2333;
  background: #fff;
  box-shadow: none;
  vertical-align: middle;
  transition: border-color .15s ease, box-shadow .15s ease, height .1s ease;
}
.vcw-input::placeholder { color: #97a2b8; }
.vcw-input:focus { border-color: var(--vcw-primary); box-shadow: 0 0 0 3px rgba(28,72,193,.1); }

.vcw-send-btn {
  /* margin/padding/min-height/line-height/text-transform reset — flatsome
     `button{...}` leak, see the composer-bar comment above for the exact
     rule. This is the single biggest contributor to the input-collapse bug:
     the unresetted margin-right:1em + padding:0 1.2em on this button alone
     accounted for ~34px of the ~95px eaten from the input's available width. */
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--vcw-primary) 0%, var(--vcw-primary-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(28,72,193,.32);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.vcw-send-btn svg { width: 18px; height: 18px; }
.vcw-send-btn:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(28,72,193,.4); }
.vcw-send-btn:active { transform: scale(.96); }
.vcw-send-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.vcw-send-btn .vm-btn-spinner { width: 16px; height: 16px; }

.vcw-send-btn:focus-visible,
.vcw-composer-btn:focus-visible,
.vcw-suggestion-card:focus-visible,
.vcw-launcher:focus-visible,
.vcw-close-btn:focus-visible {
  outline: 2px solid var(--vcw-accent);
  outline-offset: 2px;
}

/* Emoji picker */
.vcw-emoji-panel {
  position: absolute;
  bottom: calc(100% + var(--vcw-s2));
  left: var(--vcw-s3);
  width: 244px;
  max-height: 190px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e7edf9;
  border-radius: var(--vcw-radius-md);
  box-shadow: var(--vcw-shadow-soft);
  padding: var(--vcw-s2);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  z-index: 5;
  animation: vcw-fade-scale-in .15s ease;
}
.vcw-emoji-panel[hidden] { display: none; }
/* margin/min-height reset — same flatsome `button{...}` leak; without it
   each cell in the 7-column emoji grid was taller/wider than its neighbor. */
.vcw-emoji-item { margin: 0; min-height: 0; text-transform: none; font-weight: 400; border: none; background: transparent; font-size: 19px; padding: var(--vcw-s1); border-radius: var(--vcw-s2); cursor: pointer; line-height: 1; }
.vcw-emoji-item:hover { background: #eef2fc; }

/* Upload error / recording hint */
.vcw-upload-error { padding: var(--vcw-s2) var(--vcw-s4); font-size: 12px; color: #c0392b; background: #fdecea; flex-shrink: 0; }
.vcw-upload-error[hidden] { display: none; }
.vcw-recording-hint { padding: var(--vcw-s2) var(--vcw-s4); font-size: 12px; color: #dc2626; background: #fef2f2; display: flex; align-items: center; gap: var(--vcw-s2); flex-shrink: 0; }
.vcw-recording-hint[hidden] { display: none; }
.vcw-recording-hint b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; animation: vcw-blink 1s infinite; }
@keyframes vcw-blink { 50% { opacity: .25; } }