:root{
  /* Colores de marca (verde + naranja) */
  --brand-green:#25c07a;
  --brand-orange:#ff7c5f;

  --cbg: color-mix(in oklab, var(--bg, #f5fcff), transparent 0%);
  --cpanel: color-mix(in oklab, var(--card, #ffffff), transparent 0%);
  --ctext: var(--text, #083346);
  --csoft: var(--border-soft, rgba(8,60,85,.14));
}

/* ========== FAB MÁS CHICO, VERDE→NARANJA, ICONO BLANCO ========== */
#chat-fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:2147483647;
}
#chat-fab button{
  width:52px;               /* antes 64px */
  height:52px;
  padding:0;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-orange));
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
#chat-fab button:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 16px 46px rgba(0,0,0,.38);
}
#chat-fab button:active{ transform:scale(.98) }

/* Icono del FAB en blanco, sea IMG o SVG (forzamos fill/stroke) */
#chat-fab button svg,
#chat-fab button img{
  width:22px;               /* más proporcionado al nuevo tamaño */
  height:22px;
  color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
#chat-fab button svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ========== PANEL ========== */
#chat-panel{
  position:fixed;
  right:18px;
  bottom:82px; /* despega del FAB más chico */
  width:min(440px,94vw);
  height:72vh;
  z-index:2147483646;
  display:none;
  flex-direction:column;
  background:var(--cpanel);
  border:2px solid var(--csoft);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
#chat-panel.open{ display:flex }

/* Cabecera + acciones (cerrar, WhatsApp, etc.) */
.chat-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px;
  border-bottom:1px solid var(--csoft);gap:8px;color:var(--ctext)
}
.chat-title{display:flex;align-items:center;gap:8px;font-weight:900}
.chat-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Botones de icono: cerrar / Whats / otros: siempre blanco */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-orange));
  color:#fff; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.24) }
.icon-btn:active{ transform:scale(.96) }

.icon-btn svg,.icon-btn img{
  width:20px;height:20px;color:#fff;
}
.icon-btn svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Si quieres diferenciar WhatsApp, puedes mantener la misma gama: */
/* .icon-btn.whats { background:linear-gradient(135deg,var(--brand-green),#2ad58a); } */

/* Mensajes */
.chat-body{
  flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;
  color:var(--ctext);background:var(--cbg)
}
.chat-msg{padding:10px 12px;border-radius:12px;max-width:85%;line-height:1.45}
.chat-msg.me{
  align-self:flex-end;
  background:color-mix(in oklab,var(--brand-green), transparent 70%);
}
.chat-msg.ai{
  align-self:flex-start;
  background:color-mix(in oklab,var(--brand-orange), transparent 78%);
}

/* Input + botón enviar (icono blanco) */
.chat-foot{
  display:flex;gap:8px;padding:10px;border-top:1px solid var(--csoft);background:var(--cpanel)
}
.chat-foot input{
  flex:1;min-width:120px;padding:12px;border-radius:12px;border:1px solid var(--csoft);
  background:color-mix(in oklab,var(--cbg),transparent 20%);color:var(--ctext);outline:none
}
.chat-foot input:focus{ box-shadow:0 0 0 3px rgba(37,192,122,.22); border-color:var(--brand-green) }

.chat-foot button{
  padding:12px 14px;border-radius:12px;border:0;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-orange));
  color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.chat-foot button:hover{ transform:translateY(-1px) }
.chat-foot button:active{ transform:scale(.98) }
.chat-foot button:disabled{opacity:.45;cursor:not-allowed}

/* Icono de enviar dentro del botón (si es SVG/IMG) */
.chat-foot button svg,
.chat-foot button img{
  width:18px;height:18px;color:#fff;vertical-align:middle
}
.chat-foot button svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width:640px){
  #chat-fab{
    position: fixed !important;
    right:16px !important;
    bottom:20px !important;
    z-index: 2147483647 !important;
  }
  #chat-fab button{
    width:56px;
    height:56px;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
    animation: chatFabPulse 2s ease-in-out infinite;
  }
  #chat-fab button svg,#chat-fab button img{ width:24px; height:24px }

  #chat-panel{
    position: fixed !important;
    right:8px;
    left:8px;
    width:auto;
    height:75vh;
    bottom:86px;
    border-radius:12px;
    z-index: 2147483646 !important;
  }
}

/* Animación de pulso para el FAB en móvil */
@keyframes chatFabPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(37, 192, 122, 0.6);
  }
}

/* Asegura visibilidad y color blanco para FA */
#chat-fab button i,
.icon-btn i,
.chat-foot button i{
  font-size: 20px;
  color: #fff;
  line-height: 1;
  display: inline-block;
  width: 1em; height: 1em;
}