/* support-widget.css — VARCO support chat widget (chat-telegram-support).
   All tokens scoped under #vcw-root to avoid host-page collisions. */

#vcw-root {
  --vcw-terracotta: #C0593F;
  --vcw-terracotta-dark: #A34A33;
  --vcw-gold: #D4A04A;
  --vcw-cream: #F5EFEA;
  --vcw-cream-soft: rgba(245,239,234,0.7);
  --vcw-cream-muted: rgba(245,239,234,0.45);
  --vcw-cream-faint: rgba(245,239,234,0.08);
  --vcw-bg-deep: #1E1A16;
  --vcw-bg-warm: #2A2219;
  --vcw-bg-card: #332A20;
  --vcw-green: #4ADE80;
  --vcw-red: #F87171;
  --vcw-fab-size: 56px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#vcw-root, #vcw-root * { box-sizing: border-box; }

/* ── FAB ───────────────────────────────────────────── */
#vcw-fab {
  position: fixed; right: 24px; bottom: 24px;
  width: var(--vcw-fab-size); height: var(--vcw-fab-size);
  border: none; border-radius: 50%;
  background: var(--vcw-terracotta); color: #fff;
  cursor: pointer; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,160,74,0.12);
  transition: transform .18s ease-out, background .2s;
  animation: vcw-fab-in .2s ease-out both; animation-delay: .15s;
}
#vcw-fab:hover { background: var(--vcw-terracotta-dark); transform: scale(1.05); }
#vcw-fab:active { transform: scale(.95); }
#vcw-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,160,74,0.55), 0 6px 20px rgba(0,0,0,0.35); }
#vcw-fab svg { width: 26px; height: 26px; }
#vcw-root[data-state]:not([data-state="closed"]) #vcw-fab { /* keep visible on desktop */ }

#vcw-fab-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--vcw-gold); color: var(--vcw-bg-deep);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
#vcw-root[data-unread="1"] #vcw-fab-badge { animation: vcw-pulse 1.5s ease-in-out infinite; }
.vcw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Panel ─────────────────────────────────────────── */
#vcw-panel {
  position: fixed; right: 24px; bottom: calc(24px + var(--vcw-fab-size) + 12px);
  width: 320px; height: 480px; max-height: calc(100vh - 120px);
  background: var(--vcw-bg-deep); color: var(--vcw-cream);
  border: 1px solid rgba(212,160,74,0.15); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,160,74,0.10);
  z-index: 2147483001; display: flex; flex-direction: column; overflow: hidden;
  animation: vcw-panel-in .2s ease-out both;
}
#vcw-root[data-state="closed"] #vcw-panel { display: none; }

#vcw-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: .8rem 1rem; background: var(--vcw-bg-warm);
  border-bottom: 1px solid rgba(245,239,234,0.06);
}
#vcw-header h2 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--vcw-cream); }
.vcw-header-left { display: flex; flex-direction: column; gap: 3px; }
#vcw-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px;
}
#vcw-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#vcw-status-pill[data-online="true"]  { color: var(--vcw-green); background: rgba(74,222,128,0.12); }
#vcw-status-pill[data-online="false"] { color: var(--vcw-gold); background: rgba(212,160,74,0.12); }
#vcw-close {
  background: none; border: none; color: var(--vcw-cream-soft); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 6px; border-radius: 6px; min-width: 32px; min-height: 32px;
}
#vcw-close:hover { color: var(--vcw-cream); background: var(--vcw-cream-faint); }
#vcw-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vcw-gold); }
.vcw-header-actions { display: flex; align-items: center; gap: 4px; }
#vcw-end {
  display: none; background: none; border: 1px solid rgba(245,239,234,0.18);
  color: var(--vcw-cream-soft); font-family: inherit; font-size: .68rem;
  padding: 4px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
#vcw-end:hover { color: var(--vcw-cream); border-color: var(--vcw-gold); }
#vcw-end:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vcw-gold); }
/* Show "Termina" only while a conversation is active. */
#vcw-root[data-state="active"] #vcw-end,
#vcw-root[data-state="active-empty"] #vcw-end { display: inline-block; }

/* ── Body regions ──────────────────────────────────── */
.vcw-body { flex: 1; overflow-y: auto; padding: 1rem; }
#vcw-root[data-state="intro"] #vcw-conversation,
#vcw-root[data-state="active"] #vcw-intro,
#vcw-root[data-state="active-empty"] #vcw-intro,
#vcw-root[data-state="closed-conv"] #vcw-intro { display: none; }
#vcw-root[data-state="intro"] #vcw-intro { display: flex; }

/* Intro form */
#vcw-intro { flex-direction: column; gap: .8rem; }
.vcw-lede { margin: 0 0 .2rem; font-size: .85rem; line-height: 1.5; color: var(--vcw-cream-soft); }
.vcw-field { display: flex; flex-direction: column; gap: .3rem; }
.vcw-field label { font-size: .78rem; color: var(--vcw-cream-soft); }
.vcw-field input, #vcw-input {
  width: 100%; padding: .6rem .8rem; font-size: 16px; /* 16px prevents iOS zoom */
  background: var(--vcw-cream-faint); border: 1px solid rgba(245,239,234,0.12);
  border-radius: 8px; color: var(--vcw-cream); font-family: inherit;
}
.vcw-field input:focus, #vcw-input:focus { outline: none; border-color: var(--vcw-gold); }
.vcw-field.vcw-has-error input { border-color: var(--vcw-red); }
.vcw-error-msg { color: var(--vcw-red); font-size: .72rem; margin: .2rem 0 0; }
.vcw-btn-primary {
  background: var(--vcw-terracotta); color: #fff; border: none;
  padding: .7rem 1.25rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .2s;
}
.vcw-btn-primary:hover { background: var(--vcw-terracotta-dark); }
.vcw-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.vcw-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,160,74,0.55); }
.vcw-privacy { margin: .2rem 0 0; font-size: .7rem; line-height: 1.5; color: var(--vcw-cream-muted); }
.vcw-privacy a { color: var(--vcw-gold); text-decoration: none; }
.vcw-privacy a:hover { text-decoration: underline; }

/* Conversation area */
#vcw-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#vcw-root[data-state="intro"] #vcw-conversation { display: none; }
#vcw-thread { list-style: none; margin: 0; padding: .85rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.vcw-msg { display: flex; flex-direction: column; max-width: 80%; animation: vcw-msg-in .15s ease-out both; }
.vcw-msg-bubble { padding: .55rem .75rem; font-size: .875rem; line-height: 1.45; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.vcw-msg--visitor { align-self: flex-end; align-items: flex-end; }
.vcw-msg--visitor .vcw-msg-bubble { background: var(--vcw-terracotta); color: #fff; border-radius: 12px 12px 4px 12px; }
.vcw-msg--admin { align-self: flex-start; }
.vcw-msg--admin .vcw-msg-bubble { background: var(--vcw-bg-card); color: var(--vcw-cream); border-left: 2px solid var(--vcw-gold); border-radius: 12px 12px 12px 4px; }
.vcw-msg--system { align-self: center; max-width: 90%; }
.vcw-msg--system .vcw-msg-bubble { background: var(--vcw-bg-warm); color: var(--vcw-cream-soft); border: 1px dashed rgba(212,160,74,0.25); font-size: .8rem; text-align: center; }
.vcw-msg-time { font-size: .68rem; color: var(--vcw-cream-muted); margin-top: 2px; }
.vcw-msg[data-status="sending"] .vcw-msg-time::after { content: " · inviando…"; }
.vcw-msg[data-status="failed"] .vcw-msg-bubble { opacity: .7; }
.vcw-msg[data-status="failed"] .vcw-msg-time { color: var(--vcw-red); }

/* Compose */
#vcw-compose { display: flex; gap: 8px; align-items: flex-end; padding: .6rem .7rem; background: var(--vcw-bg-warm); border-top: 1px solid rgba(245,239,234,0.06); }
#vcw-root[data-state="closed-conv"] #vcw-compose,
#vcw-root[data-state="intro"] #vcw-compose { display: none; }
#vcw-input { resize: none; min-height: 38px; max-height: 110px; padding: .5rem .75rem; }
#vcw-send {
  flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--vcw-terracotta); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#vcw-send:hover { background: var(--vcw-terracotta-dark); }
#vcw-send:disabled { opacity: .5; cursor: not-allowed; }
#vcw-send:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,160,74,0.55); }
#vcw-send svg { width: 18px; height: 18px; }

/* Closed-conversation CTA */
#vcw-closed-cta { display: none; flex-direction: column; gap: .8rem; align-items: center; padding: 1.2rem 1rem; text-align: center; }
#vcw-root[data-state="closed-conv"] #vcw-closed-cta { display: flex; }
#vcw-closed-cta p { margin: 0; font-size: .85rem; color: var(--vcw-cream-soft); }

/* Toast + connection banner */
#vcw-toast { position: absolute; left: 12px; right: 12px; bottom: 70px; padding: .6rem .8rem; border-radius: 8px; font-size: .8rem; background: rgba(248,113,113,0.12); color: var(--vcw-red); border: 1px solid rgba(248,113,113,0.25); animation: vcw-toast-in .2s ease-out; }
#vcw-conn-banner { padding: .4rem .8rem; font-size: .75rem; text-align: center; background: rgba(212,160,74,0.08); color: var(--vcw-gold); }

/* ── Animations ────────────────────────────────────── */
@keyframes vcw-fab-in   { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes vcw-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vcw-msg-in   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vcw-pulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes vcw-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Mobile (<600px): full-screen overlay ──────────── */
@media (max-width: 600px) {
  #vcw-panel {
    inset: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh;
    max-height: none; border-radius: 0; border: none;
    animation: vcw-panel-up .28s cubic-bezier(.32,.72,0,1) both;
  }
  #vcw-root:not([data-state="closed"]) #vcw-fab { display: none; }
  #vcw-close { min-width: 44px; min-height: 44px; }
  #vcw-compose { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  @keyframes vcw-panel-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #vcw-root *, #vcw-root *::before, #vcw-root *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  #vcw-fab-badge { animation: none !important; }
}