/* ============================================================
   CHAT GLOBO — FRESA de cara al público (ventas)
   Estética de marca (marrón/beige/rosa). Clona el molde del cookie-consent.
   ============================================================ */

.cg-root { position: fixed; inset: 0; z-index: 3500; pointer-events: none; }
.cg-root * { box-sizing: border-box; }

/* ---------- burbuja flotante (abajo-derecha) ---------- */
.cg-bubble {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  background: var(--marron);
  color: var(--beige);
  border: 1px solid color-mix(in srgb, var(--beige) 16%, transparent);
  border-radius: 100px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  box-shadow: 0 22px 60px -20px rgba(25,9,0,.7), 0 4px 14px rgba(25,9,0,.3);
  /* oculta hasta pasar el hero */
  opacity: 0; transform: translateY(20px) scale(.96);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), background .2s;
}
.cg-root.is-revealed .cg-bubble { opacity: 1; transform: translateY(0) scale(1); }
.cg-root.is-open .cg-bubble { opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none; }
.cg-bubble:hover { background: var(--marron-soft, #4a2614); }

.cg-bubble-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rosa);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa) 70%, transparent);
  animation: cg-pulse 2.4s ease-in-out infinite;
}
@keyframes cg-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rosa) 55%, transparent); }
  50%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rosa) 0%, transparent); }
}

/* wordmark FRESA dentro de la burbuja */
.cg-bubble-logo { height: 20px; width: auto; display: block; }

/* ---------- panel de chat ---------- */
.cg-panel {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  pointer-events: auto;
  width: min(384px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 96px));
  display: flex; flex-direction: column;
  background: var(--marron);
  color: var(--beige);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(25,9,0,.72), 0 6px 18px rgba(25,9,0,.34);
  font-family: var(--sans);
  animation: cg-rise .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes cg-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* head */
.cg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--beige) 14%, transparent);
}
.cg-head-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cg-head-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--marron-deep, #1f0d04);
  border: 1.5px solid var(--rosa);
}
.cg-head-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-head-name { font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.cg-head-sub { font-size: 11.5px; opacity: .62; margin-top: 1px; }
.cg-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  color: var(--beige); opacity: .6;
  border: 1px solid color-mix(in srgb, var(--beige) 24%, transparent);
  transition: opacity .2s, background .2s;
}
.cg-close:hover { opacity: 1; background: color-mix(in srgb, var(--beige) 10%, transparent); }

/* list */
.cg-list {
  flex: 1; overflow-y: auto; padding: 16px 16px 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.cg-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.cg-msg--assistant {
  align-self: flex-start;
  background: color-mix(in srgb, var(--beige) 10%, transparent);
  border-bottom-left-radius: 5px;
}
.cg-msg--user {
  align-self: flex-end;
  background: var(--rosa); color: var(--marron);
  border-bottom-right-radius: 5px;
}

/* typing dots */
.cg-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.cg-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--beige) 60%, transparent);
  animation: cg-blink 1.3s infinite ease-in-out both;
}
.cg-typing span:nth-child(2) { animation-delay: .18s; }
.cg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cg-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* cta row */
.cg-cta-row {
  display: flex; gap: 8px; padding: 8px 14px 4px;
}
.cg-cta, .cg-wa {
  flex: 1; text-align: center;
  padding: 10px 14px; border-radius: 100px;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  transition: background .2s, opacity .2s, border-color .2s;
}
.cg-cta { background: var(--rosa); color: var(--marron); border: 1px solid var(--rosa); }
.cg-cta:hover { background: #fff; border-color: #fff; }
.cg-wa {
  background: transparent; color: var(--beige);
  border: 1px solid color-mix(in srgb, var(--beige) 30%, transparent);
  text-decoration: none;
}
.cg-wa:hover { border-color: var(--beige); background: color-mix(in srgb, var(--beige) 8%, transparent); }

/* compose */
.cg-compose {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 16px;
}
.cg-input {
  flex: 1; min-width: 0;
  padding: 11px 15px; border-radius: 100px;
  background: color-mix(in srgb, var(--beige) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--beige) 20%, transparent);
  color: var(--beige); font-family: var(--sans); font-size: 13.5px;
  outline: none; transition: border-color .2s;
}
.cg-input::placeholder { color: color-mix(in srgb, var(--beige) 46%, transparent); }
.cg-input:focus { border-color: var(--rosa); }
.cg-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: var(--rosa); color: var(--marron);
  transition: background .2s, opacity .2s;
}
.cg-send:hover:not(:disabled) { background: #fff; }
.cg-send:disabled { opacity: .4; }

/* móvil: panel casi a pantalla completa */
@media (max-width: 560px) {
  .cg-panel {
    right: 8px; left: 8px; bottom: 8px;
    width: auto; height: min(76vh, calc(100vh - 80px));
  }
  .cg-bubble { right: 12px; bottom: 12px; }
}