/* Overlay edición imagen producto en dashboard */
.prod-img-edit-wrapper:hover .prod-img-edit-overlay { background:rgba(220,53,69,0.78) !important; }
.prod-img-edit-wrapper:hover .prod-img-edit-overlay i { opacity:1 !important; }
.prod-img-edit-overlay i { opacity:0; }
/* Imagen de producto: esquinas redondeadas consistentes */
.gc-prod-img-round { border-radius: 6px !important; }
/* Mensajes bot muy cortos: darles presencia visual uniforme */
#gc-chat .chat-receiver .chat-bubble.gc-short{min-width:auto;display:inline-flex;justify-content:center;align-items:center;text-align:center;padding:8px 12px;border-radius:14px;border-top-left-radius:4px;}
#gc-chat{position:fixed;right:16px;bottom:16px;z-index:1050;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;display:flex;flex-direction:column;align-items:flex-end}
#gc-chat .toggle{background:linear-gradient(135deg,#0d6efd,#4896ff);color:#fff;border-radius:28px;padding:12px 16px;border:none;box-shadow:0 4px 14px -2px rgba(0,0,0,.35),0 0 0 0 rgba(77,144,255,.55);cursor:pointer;position:relative;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;transition:box-shadow .35s ease,transform .25s ease,background .35s ease}
#gc-chat .toggle:hover{box-shadow:0 6px 18px -4px rgba(0,0,0,.45),0 0 0 4px rgba(77,144,255,.25)}
#gc-chat .toggle:active{transform:translateY(1px)}
#gc-chat .toggle:focus{outline:0;box-shadow:0 0 0 4px rgba(77,144,255,.35)}
#gc-chat .toggle .badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;background:#dc3545;color:#fff;border:2px solid #fff;border-radius:11px;font-size:11px;font-weight:700;line-height:1;align-items:center;justify-content:center;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:4;display:none}
#gc-chat .panel{position:absolute;bottom:22px;right:22px;width:550px;height:92vh;max-height:95vh;background:#ffffff;border:1px solid #e2e6ea;border-radius:30px;overflow:hidden;display:none;box-shadow:0 16px 40px -8px rgba(24,39,75,.25),0 4px 12px rgba(0,0,0,.12);display:flex;flex-direction:column;backdrop-filter:blur(3px);animation:gcChatRise .34s cubic-bezier(.22,.61,.36,1);transform:none}
#gc-chat .panel.gc-home-mode{backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes gcPop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
/* Subida suave del panel al abrir (sin rebote) */
@keyframes gcChatRise{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){#gc-chat .panel{animation:fadeIn .2s ease}}
/* Botón flotante: ícono de chat con cara feliz + texto "Ayuda" */
#gc-chat .toggle .gc-toggle-ico{display:inline-flex;align-items:center;flex:0 0 auto}
#gc-chat .toggle .gc-toggle-ico svg{display:block;width:25px;height:25px}
#gc-chat .toggle .gc-toggle-label{line-height:1;font-weight:600}
#gc-chat .toggle{display:inline-flex !important;align-items:center !important;gap:7px !important;white-space:nowrap}
/* Permitir que el JS oculte el botón (display:none inline) pese al !important de arriba */
#gc-chat .toggle[style*="display: none"],#gc-chat .toggle[style*="display:none"]{display:none !important}
/* Cierre animado del panel: desliza hacia abajo + fade */
@keyframes gcChatClose{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(22px) scale(.985)}}
#gc-chat .panel.gc-closing{animation:gcChatClose .28s cubic-bezier(.4,0,.65,1) forwards !important;pointer-events:none}
/* Header con efecto glass superpuesto (ventana) */
#gc-chat .panel{position:relative}
/* Header glass: versión refinada con blur suave y desvanecimiento continuo (sin línea recta) */
#gc-chat .header{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:6px;padding:14px 14px 12px;background:transparent;/* Blur se aplica sólo en el pseudo-elemento para poder desvanecerse */backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-top-left-radius:30px;z-index: 10;border-top-right-radius:30px;box-shadow:none;overflow:visible;min-height:64px;height:64px}
#gc-chat .header.gc-glass{background:transparent}
/* Nuevo método: overlay con máscara para un fade real (alpha) sin bloquear el contenido inferior */
#gc-chat .header:before{content:"";position:absolute;top:-4px;left:0;right:0;height:104px;border-top-left-radius:30px;border-top-right-radius:30px;pointer-events:none;z-index:0;background:rgba(255,255,255,.48);backdrop-filter:blur(5.5px);-webkit-backdrop-filter:blur(5.5px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1)0%,rgba(0,0,0,1)18%,rgba(0,0,0,.85)38%,rgba(0,0,0,.55)60%,rgba(0,0,0,.30)78%,rgba(0,0,0,.14)88%,rgba(0,0,0,.06)94%,rgba(0,0,0,0)100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1)0%,rgba(0,0,0,1)18%,rgba(0,0,0,.85)38%,rgba(0,0,0,.55)60%,rgba(0,0,0,.30)78%,rgba(0,0,0,.14)88%,rgba(0,0,0,.06)94%,rgba(0,0,0,0)100%)}
#gc-chat .panel.gc-home-mode .header:before{display:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#gc-chat .header:after{content:none !important}
/* Capa de vidrio degradada (blur + fade) */
/* Panel blanco de fondo sin overlays adicionales */
#gc-chat .panel{background:#ffffff;}
#gc-chat .panel:before{display:none !important}
/* Elevar header por encima del overlay */
#gc-chat .header > *{position:relative;z-index:2}
#gc-chat .gc-hbtn{border:none;background:transparent;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:#5e6770;transition:background .25s ease,color .25s ease,transform .25s ease}
#gc-chat .gc-hbtn svg{stroke:currentColor}
#gc-chat .gc-hbtn:hover{background:rgba(255,255,255,.45);color:#37424b}
#gc-chat .gc-hbtn:active{transform:translateY(1px);background:rgba(255,255,255,.55);color:#2c353d}
#gc-chat .gc-hbtn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(120,140,160,.35)}
#gc-chat .gc-head-center{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#3a4652;letter-spacing:.4px;text-shadow:0 1px 1px rgba(255,255,255,.25)}
#gc-chat .gc-head-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;justify-self:end;min-height:36px}
#gc-chat .gc-back{justify-self:start;min-height:36px}
/* Evitar que la tarjeta de agente mueva las acciones: reservar espacio estable */
#gc-chat .header .gc-head-actions .gc-hbtn{flex:0 0 auto}
/* Acciones en Home (minimizar) */
#gc-chat .gc-home .gc-hbtn{border:none;background:transparent;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:#5e6770;transition:background .25s ease,color .25s ease,transform .25s ease}
#gc-chat .gc-home .gc-hbtn:hover{background:rgba(255,255,255,.55);color:#37424b}
#gc-chat .gc-home .gc-hbtn:active{transform:translateY(1px)}
/* El mismo icono de minimizar (en el header) funciona en Home y Chat */

/* Tarjeta agente (avatar + nombre) centrada sobre header glass */
#gc-chat .gc-agent-card{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);padding:6px 14px 6px 8px;border-radius:40px;box-shadow:0 4px 14px -4px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.18);font-size:13px;font-weight:600;color:#24313c;line-height:1;position:relative;max-width:260px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;will-change:transform}
/* En modo home, el botón minimizar debe coincidir en posición con el modo chat; la card no afecta a .gc-head-actions */
#gc-chat .panel.gc-home-mode .gc-agent-card{display:none !important}
#gc-chat .gc-agent-card:before{content:"";position:absolute;inset:0;border-radius:40px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 0 0 4px rgba(255,255,255,.55) inset}
#gc-chat .gc-agent-avatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:visible;position:relative;box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
#gc-chat .gc-agent-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
#gc-chat .gc-agent-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
@keyframes gcAgentIn{0%{opacity:0;transform:translateY(-14px) scale(.97)}40%{opacity:1;transform:translateY(3px) scale(1.02)}65%{transform:translateY(-1.5px) scale(.99)}85%{transform:translateY(.5px) scale(1.005)}100%{opacity:1;transform:translateY(0) scale(1)}}
#gc-chat .gc-agent-card.gc-bounce-pending{opacity:0;animation:none}
#gc-chat .gc-agent-card.gc-skel-loading{animation:none;opacity:1;pointer-events:none}
#gc-chat .gc-agent-card.gc-skel-loading .status-indicator{opacity:0!important}
#gc-chat .gc-skel-overlay{position:absolute;inset:-3px;z-index:15;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:40px;background:rgba(255,255,255,.97)}
#gc-chat .gc-skel-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(90deg,#e8e8e8 25%,#f5f5f5 50%,#e8e8e8 75%);background-size:200% 100%;animation:gcShimmer 1.2s ease-in-out infinite;flex:0 0 auto}
#gc-chat .gc-skel-name{width:72px;height:12px;border-radius:6px;background:linear-gradient(90deg,#e8e8e8 25%,#f5f5f5 50%,#e8e8e8 75%);background-size:200% 100%;animation:gcShimmer 1.2s ease-in-out infinite .15s}
@keyframes gcShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#gc-chat .gc-agent-card.bot{background:rgba(255,255,255,.9)}
#gc-chat .gc-agent-card.admin{background:linear-gradient(135deg,#ffffff,#f1f5fa)}
#gc-chat .gc-agent-card.waiting{background:rgba(255,255,255,.85);min-height:calc(38px + 12px);} /* altura uniforme; sin espacio extra a la izquierda */
#gc-chat .gc-agent-card.waiting .gc-waiting-inner{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
#gc-chat .gc-agent-card.waiting .gc-agent-name{max-width:none}
#gc-chat .gc-agent-card.waiting .gc-wait-dot{width:8px;height:8px;border-radius:50%;background:#fab005;box-shadow:0 0 0 4px rgba(250,176,5,.25);display:inline-block;animation:gcPulse 1.4s ease-in-out infinite}
@keyframes gcPulse{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.25);opacity:1}}

/* Pantalla inicial */
#gc-chat .gc-home{flex:1 1 auto;display:flex;align-items:stretch;justify-content:flex-start;padding:50px 22px 24px;background:linear-gradient(150deg,#f4f8fc,#e6eef7);position:relative;overflow:hidden;height:100%}
#gc-chat .gc-home-inner{width:100%;animation:fadeIn .35s ease;display:flex;flex-direction:column;min-height:100%;height:100%;}
#gc-chat .gc-brand{font-size:15px;font-weight:600;letter-spacing:.65px;color:#1d3b63;text-transform:uppercase;margin:0 0 50px 2px;opacity:.95}
#gc-chat .gc-home-head{display:flex;flex-direction:column;gap:10px;padding:0 2px 4px;margin-top:0;margin-bottom:10px}
#gc-chat .gc-home-title{margin:0;font-size:30px;font-weight:700;background:linear-gradient(120deg,#0d6efd,#2459c7,#4896ff);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
#gc-chat .gc-home-title .gc-emoji{background:none;-webkit-background-clip:initial;background-clip:initial;color:initial;-webkit-text-fill-color:initial}
#gc-chat .gc-home-title-row{display:flex;align-items:center;gap:14px;position:relative}
#gc-chat .gc-home-avatars{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;min-width:0}
#gc-chat .gc-home-avatar{width:40px;height:40px;border-radius:50%;position:relative;box-shadow:0 4px 10px -3px rgba(0,0,0,.35);border:2px solid #fff;flex:0 0 auto;background:#dee2e6;cursor:pointer;transition:z-index 0s linear .1s}
#gc-chat .gc-home-avatar:hover{z-index:1000 !important;transition-delay:0s}
#gc-chat .gc-home-avatar.online{box-shadow:0 0 0 2px #fff,0 0 0 4px #51cf66,0 4px 10px -3px rgba(0,0,0,.35)}
#gc-chat .gc-home-avatar.offline{opacity:.6}
/* Tooltip styles */
#gc-chat .gc-home-avatar:before, #gc-chat .gc-home-avatar:after {
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 100;
}
#gc-chat .gc-home-avatar:hover:before, #gc-chat .gc-home-avatar:hover:after,
#gc-chat .gc-home-avatar:active:before, #gc-chat .gc-home-avatar:active:after {
  opacity: 1; visibility: visible;
}
#gc-chat .gc-home-avatar:after {
  content: attr(data-tooltip);
  bottom: 100%; margin-bottom: 12px;
  background: #1d3b63; color: #fff; padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
#gc-chat .gc-home-avatar:before {
  content: "";
  bottom: 100%; margin-bottom: 0px;
  border: 6px solid transparent; border-top-color: #1d3b63;
}

#gc-chat .gc-home-avatar-bot.pulse:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(240,101,149,.55);animation:gcPulseBot 2.4s ease-in-out infinite}
@keyframes gcPulseBot{0%{box-shadow:0 0 0 0 rgba(240,101,149,.5)}70%{box-shadow:0 0 0 10px rgba(240,101,149,0)}100%{box-shadow:0 0 0 0 rgba(240,101,149,0)}}
#gc-chat .gc-home-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
#gc-chat .gc-home-avatar + .gc-home-avatar{margin-left:-16px}
#gc-chat .gc-home-avatar:nth-child(1){z-index:1}
#gc-chat .gc-home-avatar:nth-child(2){z-index:2}
#gc-chat .gc-home-avatar:nth-child(3){z-index:3}
#gc-chat .gc-home-sub{margin:2px 0 0;font-size:15px;color:#517096;font-weight:500;letter-spacing:.3px;opacity:.85}
#gc-chat .gc-home-card{background:#fff;border:1px solid #e2e6ea;border-radius:28px;padding:24px 20px 26px;box-shadow:0 10px 28px -10px rgba(24,39,75,.25),0 4px 12px -2px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:12px;position:relative;margin-top:0;flex:1 1 auto;min-height:0;overflow:visible}
/* Afinar overlay interior para evitar bordes blancos aparentes en los laterales */
#gc-chat .gc-home-card:before{content:"";position:absolute;inset:1px;border-radius:27px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.04) inset,0 0 0 5px rgba(255,255,255,.65) inset, 0 10px 24px -12px rgba(24,39,75,.18)}
#gc-chat .gc-home-inner{justify-content:flex-start;}

/* Ajustes responsivos para alturas pequeñas */
@media (max-height:560px){
	#gc-chat .gc-home{padding:40px 18px 18px;}
	#gc-chat .gc-brand{margin-bottom:34px;}
	#gc-chat .gc-home-head{margin-bottom:8px;gap:8px;}
	#gc-chat .gc-home-card{flex:1 1 auto;padding:20px 18px 22px;}
}
#gc-chat .gc-home-card-title{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#5b6e7f;opacity:.9}
#gc-chat .gc-home-options{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#gc-chat .gc-home-link{border:none;background:transparent;padding:10px 10px 10px 4px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#15406e;cursor:pointer;border-radius:14px;line-height:1;position:relative;transition:background .25s ease,color .25s ease,transform .25s ease;text-align:left}
#gc-chat .gc-home-link .gc-ico{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:#0d6efd}
#gc-chat .gc-home-link .gc-ico svg{width:28px;height:28px;stroke-width:2;fill:none}
#gc-chat .gc-home-link:hover{background:#f1f5f9;color:#0d4a91}
#gc-chat .gc-home-link:active{transform:translateY(1px)}
#gc-chat .gc-home-link.gc-wa .gc-ico{color:#0c9d58}
#gc-chat .gc-home-link.gc-ig .gc-ico{color:#d6336c}
#gc-chat .gc-home-link.gc-chat .gc-ico{color:#0d6efd}

/* Loading: spinner a la derecha del CTA principal */
#gc-chat .gc-home-link.gc-loading{opacity:.85}
#gc-chat .gc-home-start-main .gc-label{flex:1 1 auto}
#gc-chat .gc-home-spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:none;opacity:.65;animation:gcSpinnerRotate 1s linear infinite;flex:0 0 auto}
#gc-chat .gc-home-start-main.gc-loading .gc-home-spinner{display:inline-block}

/* === SUBMENU DE CHAT (pantalla de selección IA/FAQ) === */
#gc-chat .gc-chat-submenu{display:none;flex-direction:column;flex:1 1 auto;padding:50px 22px 24px;background:linear-gradient(150deg,#f4f8fc,#e6eef7);position:relative;overflow:hidden;height:100%}
#gc-chat .gc-submenu-inner{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;margin:0 auto}
#gc-chat .gc-submenu-back{display:flex;align-items:center;gap:6px;background:none;border:none;padding:4px 8px 4px 0;font-size:13px;color:#64748b;cursor:pointer;transition:color .2s}
#gc-chat .gc-submenu-back:hover{color:#334155}
#gc-chat .gc-submenu-back svg{stroke:#94a3b8}
#gc-chat .gc-submenu-title{margin:0 0 8px;font-size:16px;font-weight:600;color:#1e293b}
#gc-chat .gc-submenu-options{display:flex;flex-direction:column;gap:12px}
#gc-chat .gc-submenu-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;cursor:pointer;transition:all .25s ease;text-align:left;position:relative;overflow:hidden}
#gc-chat .gc-submenu-btn::before{content:"";position:absolute;inset:0;background:rgba(13,110,253,.10);transform-origin:left;transform:scaleX(var(--gc-load, 0));transition:transform var(--gc-load-dur, .3s) cubic-bezier(.22,.61,.36,1);pointer-events:none;will-change:transform}
#gc-chat .gc-submenu-btn > *{position:relative;z-index:1}
#gc-chat .gc-submenu-btn.gc-loading{cursor:default;transform:none;box-shadow:none}
#gc-chat .gc-submenu-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
#gc-chat .gc-submenu-btn-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
#gc-chat .gc-submenu-btn-text{flex:1;display:flex;flex-direction:column;gap:2px}
#gc-chat .gc-submenu-btn-text strong{font-size:14px;font-weight:600;color:#1e293b}
#gc-chat .gc-submenu-btn-text small{font-size:12px;color:#64748b;font-weight:400}
/* Botón IA destacado */
#gc-chat .gc-submenu-ai{background:linear-gradient(135deg,rgba(139,92,246,.06) 0%,rgba(236,72,153,.06) 100%);border-color:rgba(139,92,246,.2)}
#gc-chat .gc-submenu-ai:hover{background:linear-gradient(135deg,rgba(139,92,246,.12) 0%,rgba(236,72,153,.12) 100%);border-color:rgba(139,92,246,.35)}
#gc-chat .gc-submenu-ai strong{background:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#gc-chat .gc-badge-ia{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);border-radius:10px;box-shadow:0 2px 6px rgba(139,92,246,.3)}
/* Botón FAQ secundario */
#gc-chat .gc-submenu-faq{opacity:.9}
#gc-chat .gc-submenu-faq:hover{opacity:1}

#gc-chat .gc-home-footer{margin-top:6px;font-size:11px;color:#6c7a86;opacity:.7;padding:0 4px}

/* Ajustes de msg/input ocultos al inicio */
#gc-chat .panel .msgs[style*='display:none'] + .input{display:none}
#gc-chat .msgs{flex:1 1 0%;min-height:0;overflow:hidden auto;overscroll-behavior:contain;padding:96px 14px 10px; /* compensar header fijo 64px + overlay */ scrollbar-width:none;position:relative;z-index:1;background:#ffffff;transition:padding-top .35s ease;mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)16px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)16px)}
#gc-chat .msgs:before{display:none}
#gc-chat .msgs::-webkit-scrollbar{display:none}
#gc-chat .chat{display:flex;gap:4px;margin:6px 0;align-items:flex-start}
#gc-chat .chat.compact{margin:1px 0 2px 0}
#gc-chat .chat.compact .chat-avatar{visibility:hidden}
#gc-chat .chat.compact .chat-header{display:none}
#gc-chat .chat.compact .chat-bubble{max-width:310px}
#gc-chat .chat-receiver{flex-direction:row}
#gc-chat .chat-sender{flex-direction:row-reverse}
#gc-chat .chat-avatar{position:relative;overflow:visible}
#gc-chat .chat-avatar .size-10{width:40px;height:40px;overflow:hidden;border-radius:50%}
#gc-chat .status-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;min-width:12px;min-height:12px;max-width:12px;max-height:12px;border-radius:50%;border:2px solid #fff;background:#6c757d;box-shadow:0 0 0 1px rgba(0,0,0,.05);transition:background-color .3s ease;pointer-events:none;display:block;z-index:10}
#gc-chat .status-indicator.status-indicator-sm{width:10px;height:10px;min-width:10px;min-height:10px;max-width:10px;max-height:10px}
#gc-chat .status-indicator.online{background:#28a745}
#gc-chat .status-indicator.offline{background:#adb5bd}
#gc-chat .status-indicator.bot{background:#f06595}
#gc-chat .status-indicator.waiting{background:#f59f00}
#gc-chat .chat-avatar img{width:100%;height:100%;object-fit:cover;border-radius:9999px}
#gc-chat .chat-header{font-size:12px;color:#212529;display:flex;gap:8px;align-items:center}
#gc-chat .chat-bubble{min-width:0;width:auto;max-width:480px;padding:8px 14px;border-radius:14px;font-size:14px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere;word-break:normal;hyphens:manual;display:block;white-space:normal;text-align:left;box-sizing:border-box}

/* Rich text simple (desde IA): **negrita**, _cursiva_, ==resaltado== */
#gc-chat .chat-bubble .gc-md-strong{font-weight:800}
#gc-chat .chat-bubble .gc-md-em{font-style:italic;opacity:.95}
#gc-chat .chat-bubble .gc-md-hl{background:rgba(240,101,149,.18);border:1px solid rgba(240,101,149,.18);padding:0 4px;border-radius:7px;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#gc-chat .chat-sender .chat-bubble .gc-md-hl{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.18)}
/* Asegurar que burbujas no se estiren con el contenedor flex */
#gc-chat .chat-body{display:inline-flex;flex-direction:column;flex:0 1 auto;max-width:100%;align-items:flex-start}
#gc-chat .chat-sender .chat-body{align-items:flex-end}
#gc-chat .chat-body{display:inline-flex;flex-direction:column;flex:0 1 auto;max-width:100%}
#gc-chat .chat-receiver .chat-bubble{background:#e9ecef;color:#212529;border-top-left-radius:4px}
#gc-chat .chat-sender .chat-bubble{background:#0d6efd;color:#fff;border-top-right-radius:4px}
#gc-chat .chat-sender .chat-bubble{margin-left:auto}
#gc-chat .chat-sender .chat-body{display:flex;flex-direction:column;align-items:flex-end}
#gc-chat .chat-sender .chat-header,#gc-chat .chat-sender .chat-footer{text-align:right}
#gc-chat .chat-header time{font-size:11px;color:#6c757d}
#gc-chat .chat-footer{font-size:11px;color:#6c757d;margin-top:2px}
#gc-chat .chat-footer .seen-text{font-size:11px;color:#6c757d;opacity:.75;margin-right:4px}
.seen-icon{ color:#4dabf7; }
#gc-chat .time{font-size:11px;color:#6c757d}
/* checks */
.gc-icon{display:inline-block;vertical-align:middle}
.gc-check{position:relative;width:14px;height:14px}
.gc-check:after{content:"";position:absolute;left:2px;top:4px;width:8px;height:4px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.gc-double{position:relative;width:18px;height:14px}
.gc-double:before,.gc-double:after{content:"";position:absolute;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.gc-double:before{left:0;top:6px;width:8px;height:4px}
.gc-double:after{left:6px;top:3px;width:8px;height:4px}
/* Clases de formato de texto del admin */
.gc-align-left{display:block !important;text-align:left !important;width:99% !important;margin:0 !important;padding:0 !important;line-height:inherit !important}
.gc-align-center{display:block !important;text-align:center !important;width:99% !important;margin:0 !important;padding:0 !important;line-height:inherit !important}
.gc-align-right{display:block !important;text-align:right !important;width:99% !important;margin:0 !important;padding:0 !important;line-height:inherit !important}
.gc-justify{display:block !important;text-align:justify !important;width:99% !important;margin:0 !important;padding:0 !important;line-height:inherit !important}
/* Ocultar br adyacentes a elementos de alineación */
.gc-align-left + br,.gc-align-center + br,.gc-align-right + br,.gc-justify + br{display:none !important}
/* Tamaños: pequeño < normal (default) < grande < muy grande */
.gc-size-small{font-size:0.8em !important}
.gc-size-large{font-size:1.25em !important}
.gc-size-xlarge{font-size:1.5em !important}
/* Tamaños con mayor especificidad para el chat */
#gc-chat .gc-size-small{font-size:0.8em !important}
#gc-chat .gc-size-large{font-size:1.25em !important}
#gc-chat .gc-size-xlarge{font-size:1.5em !important}
#gc-chat .chat-bubble .gc-size-small{font-size:0.8em !important}
#gc-chat .chat-bubble .gc-size-large{font-size:1.25em !important}
#gc-chat .chat-bubble .gc-size-xlarge{font-size:1.5em !important}
.gc-color-black{color:#000000 !important}
.gc-color-red{color:#e03131 !important}
.gc-color-orange{color:#fd7e14 !important}
.gc-color-yellow{color:#fab005 !important}
.gc-color-green{color:#40c057 !important}
.gc-color-blue{color:#228be6 !important}
.gc-color-purple{color:#7950f2 !important}
.gc-color-pink{color:#e64980 !important}
/* Colores en mensajes del admin (fondo azul) - ajustar para legibilidad */
#gc-chat .chat-sender .gc-color-black{color:#ffffff !important}
#gc-chat .chat-sender .gc-color-yellow{color:#ffe066 !important}
/* Error icon and text */
.gc-error{display:inline-block;vertical-align:middle;width:14px;height:14px}
#gc-chat .chat-footer .seen-text.error-text{color:#dc3545;font-weight:500}
#gc-chat .gc-error-icon,#gc-chat .gc-retry-icon{vertical-align:middle;margin-left:2px}
/* Botón reenviar */
#gc-chat .gc-retry-btn{background:none;border:none;padding:0;margin:0;font-size:11px;color:#dc3545;cursor:pointer;font-weight:normal;text-decoration:none}
#gc-chat .gc-retry-btn:hover{text-decoration:underline}
/* Spinner giratorio */
#gc-chat .gc-spinner-icon{vertical-align:middle;margin-left:2px;animation:gcSpinnerRotate 1s linear infinite}
@keyframes gcSpinnerRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#gc-chat .input{display:flex;padding:6px 10px 10px;gap:8px;flex:0 0 auto;background:#fff;border-top:1px solid #edf0f3}
#gc-chat .input input{flex:1 1 auto;min-width:80px;border:1px solid #d5dbe2;border-radius:10px;padding:6px 10px;height:34px;line-height:20px;font-size:14px;background:#fff;transition:border-color .25s ease,box-shadow .25s ease}
#gc-chat .input input:focus{outline:0;border-color:#3d89ff;box-shadow:0 0 0 3px rgba(61,137,255,.25)}
#gc-chat .input button{border:none;background:linear-gradient(135deg,#0d6efd,#3d89ff);color:#fff;padding:0 8px;height:34px;width:34px;line-height:34px;border-radius:18px;flex:0 0 auto;white-space:nowrap;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:4px;letter-spacing:.3px;box-shadow:0 4px 10px -3px rgba(0,0,0,.35);transition:box-shadow .3s ease,transform .25s ease,filter .25s ease}
#gc-chat .input button:hover{box-shadow:0 6px 14px -4px rgba(0,0,0,.45);filter:brightness(1.05)}
#gc-chat .input button:active{transform:translateY(1px);filter:brightness(.95)}
#gc-chat .sys{margin:4px 0;text-align:center}
#gc-chat .sys small{color:#6c757d;font-size:11px;letter-spacing:.2px}

/* Botones FAQ / navegación */
#gc-chat .gc-faq-separator{display:block;margin:10px 6px 6px;opacity:0;animation:faqSepIn .35s ease forwards}
#gc-chat .gc-faq-separator .line{height:1px;background:linear-gradient(90deg,#d7dde2,#eef2f5);width:100%;border-radius:1px;box-shadow:0 0 0 1px #eef2f5 inset}
@keyframes faqSepIn{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(4px)}}
#gc-chat .gc-faq-root{animation:fadeIn .35s ease}
#gc-chat .gc-faq-children{animation:fadeIn .25s ease}

/* Animaciones de aparición granular para cada mensaje */
@keyframes gcMsgIn{0%{opacity:0;transform:translateY(4px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gcAvatarIn{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes gcBubbleIn{0%{opacity:0;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gcMetaIn{0%{opacity:0;transform:translateY(2px)}100%{opacity:.9;transform:translateY(0)}}
@keyframes gcReceiptIn{0%{opacity:0;transform:translateX(4px)}100%{opacity:.75;transform:translateX(0)}}

#gc-chat .chat.gc-enter{animation:gcMsgIn .35s cubic-bezier(.25,.8,.35,1);}
#gc-chat .chat.gc-enter .chat-avatar{animation:gcAvatarIn .38s cubic-bezier(.25,.8,.35,1);}
#gc-chat .chat.gc-enter .chat-bubble{animation:gcBubbleIn .35s cubic-bezier(.25,.8,.35,1);}
#gc-chat .chat.gc-enter .chat-header time,#gc-chat .chat.gc-enter .chat-header span{animation:gcMetaIn .4s ease .05s both;}
#gc-chat .chat.gc-enter .chat-footer .seen-text,#gc-chat .chat.gc-enter .chat-footer .gc-icon{animation:gcReceiptIn .4s ease .1s both;}

/* Evitar animación repetida en mensajes compactos consecutivos: mantener transición suave */
#gc-chat .chat.compact.gc-enter .chat-avatar{animation:none}
#gc-chat .chat.compact.gc-enter .chat-header{animation:none}
#gc-chat .gc-quick-btn{border:1px solid #ccc;background:#f5f5f5;border-radius:18px;padding:6px 12px;font-size:12px;cursor:pointer;line-height:1.2;transition:background .25s ease,border-color .25s ease,color .25s ease;display:inline-flex;align-items:center;gap:4px}
#gc-chat .gc-quick-btn:hover{background:#e9ecef}
#gc-chat .gc-quick-btn:active{background:#dee2e6}
#gc-chat .gc-quick-btn.gc-back{background:#fff;border-color:#b8c2cc;color:#0d6efd}
/* #gc-chat .gc-quick-btn.gc-back:hover{background:#0d6efd;color:#fff} */
/* Placeholders (skeleton) mientras se carga siguiente set de preguntas */
#gc-chat .gc-faq-loading{display:flex;flex-wrap:wrap;gap:6px;margin:4px 6px 10px}
#gc-chat .gc-faq-loading .gc-faq-skel{background:linear-gradient(90deg,#e2e5e9 0%,#b8bfc6 40%,#e2e5e9 80%);background-size:200% 100%;animation:gcShimmer 1.05s ease-in-out infinite;border-radius:16px;position:relative;overflow:hidden;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:0;opacity:1}
@keyframes gcShimmer{0%{background-position:0% 0}100%{background-position:-200% 0}}
/* Evitar selección accidental durante carga */
#gc-chat .gc-faq-loading .gc-faq-skel{user-select:none;pointer-events:none}

/* Animación typing (tres puntos flotantes) */
#gc-chat .gc-typing-wrap{display:flex;gap:6px;margin:4px 0}
#gc-chat .gc-typing{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;padding:10px 14px;background:#e9ecef;color:#495057;border-radius:14px;font-size:14px;line-height:1.35;position:relative;min-width:44px;min-height:38px}
#gc-chat .gc-typing .dot{width:6px;height:6px;background:#6c757d;border-radius:50%;display:inline-block;animation:gcBounce 1s infinite ease-in-out}
#gc-chat .gc-typing .dot:nth-child(2){animation-delay:.2s}
#gc-chat .gc-typing .dot:nth-child(3){animation-delay:.4s}
@keyframes gcBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

/* Asegurar ocultamiento de scrollbar en móvil/vertical */
@media (max-width: 768px), (orientation: portrait) {
    #gc-chat .msgs::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    #gc-chat .msgs {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Bubble chain: unir visualmente respuestas consecutivas del mismo emisor */
#gc-chat .chat.compact .chat-bubble{border-top-left-radius:14px;border-top-right-radius:14px}
/* En el bloque compacto, el admin debe mantener esquina derecha ovalada (14px), no recortada */
#gc-chat .chat-sender.chat.compact .chat-bubble{border-top-right-radius:14px}
#gc-chat .chat-receiver.chat.compact .chat-bubble{border-top-left-radius:14px}


/* Accesibilidad foco teclado */
#gc-chat button:focus-visible{outline:2px solid #3d89ff;outline-offset:2px}

/* Pequeñas transiciones generales */
#gc-chat .chat-bubble,#gc-chat .header,#gc-chat .toggle,#gc-chat .input input,#gc-chat .input button{transition:background-color .3s ease,color .3s ease,border-color .3s ease}

/* === Nuevo diseño pill del área de entrada === */
#gc-chat .input.gc-pill{border-top:1px solid #edf0f3;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:6px;position:relative;z-index:20}
#gc-chat .gc-pill-inner{display:flex;align-items:center;background:#f1f3f5;border:1px solid #dde1e5;border-radius:999px;padding:4px;position:relative}
#gc-chat .gc-pill-inner:focus-within{border-color:#3d89ff;box-shadow:0 0 0 3px rgba(61,137,255,.25)}
#gc-chat .gc-input-wrap{flex:1 1 auto;display:flex;min-width:0}
#gc-chat .gc-input-wrap .gc-text{border:none;background:transparent;flex:1 1 auto;outline:0;font-size:14px;line-height:20px;min-width:0;padding:2px 6px 2px 6px}
/* Sin delineado personalizado al enfocar dentro del pill */
#gc-chat .gc-input-wrap .gc-text:focus{outline:none;box-shadow:none}
#gc-chat .gc-input-wrap .gc-text::placeholder{color:#6c757d;opacity:.7}
#gc-chat .gc-btn-icon{border:none;background:#ffffff;cursor:pointer;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;position:relative;color:#2460c9;transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease;border:1px solid #c8d2dc}
#gc-chat .gc-btn-icon:hover{background:#0d6efd;color:#fff;box-shadow:0 4px 10px -2px rgba(13,110,253,.55);border-color:#0d6efd}
#gc-chat .gc-btn-icon:active{transform:translateY(1px);filter:brightness(.95)}
#gc-chat .gc-btn-icon:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(13,110,253,.35)}

/* Botón enviar (gradiente) */
#gc-chat .gc-send{background:linear-gradient(135deg,#0d6efd,#3d89ff);color:#fff;width:40px;height:40px;margin:0;border:1px solid #0d6efd;box-shadow:0 6px 14px -4px rgba(0,0,0,.4);transition:filter .25s ease,box-shadow .25s ease}
#gc-chat .gc-send:hover{filter:brightness(1.07);box-shadow:0 8px 18px -6px rgba(0,0,0,.45)}
#gc-chat .gc-send:active{filter:brightness(.92)}
#gc-chat .gc-send-svg{width:26px;height:26px;display:block;fill:#fff;transition:transform .25s ease}
#gc-chat .gc-btn-icon.gc-send:hover .gc-send-svg{transform:translateY(-3px)}

/* Icono upload: flecha simple hacia arriba (SVG stroke) */
#gc-chat .gc-upload-svg{width:26px;height:26px;display:block;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
#gc-chat .gc-upload:hover .gc-upload-svg{transform:translateY(-3px)}

/* Estado distinto cuando hay imagen pendiente (resaltar upload) */
#gc-chat .gc-upload.has-image{background:#ffe8cc;color:#d9480f;border-color:#ffc078}
#gc-chat .gc-upload.has-image:hover{background:#ffa94d;color:#fff;border-color:#ff922b}

/* Botón ir arriba (scroll top) */
#gc-chat .gc-go-top{background:#ffffff;color:#0d6efd}
#gc-chat .gc-go-top:hover{background:#0d6efd;color:#fff;border-color:#0d6efd}
#gc-chat .gc-go-top-svg{width:24px;height:24px;display:block;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
#gc-chat .gc-go-top:hover .gc-go-top-svg{transform:translateY(-3px)}

/* Visibilidad condicional del botón ir arriba (aparece sólo si se ha hecho scroll) */
#gc-chat .gc-go-top{opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
#gc-chat .gc-go-top.show{opacity:1;transform:scale(1);pointer-events:auto}

/* Previsualización temporal de imagen seleccionada */
#gc-chat .gc-preview-temp{display:inline-flex;align-items:center;gap:0;border-radius:8px;animation:fadeIn .25s ease;position:relative;align-self:flex-start;}
#gc-chat .gc-prev-img-wrap{width:60px;height:60px;overflow:hidden;border-radius:6px;flex:0 0 auto;position:relative;background:#dee2e6}
#gc-chat .gc-prev-img-wrap img, #gc-chat .gc-prev-img-wrap video{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
#gc-chat .gc-prev-remove{
    position: absolute; top: -6px; right: -6px; 
    width: 20px; height: 20px; padding: 0; 
    border-radius: 50%; background: #dc3545; color: #fff; 
    border: 2px solid #fff; display: flex; align-items: center; justify-content: center; 
    opacity: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s;
    cursor: pointer;
    z-index: 10;
}
#gc-chat .gc-prev-remove:hover{transform: scale(1.1); background: #c82333;}
#gc-chat .gc-prev-remove svg{display:block;}

/* Nuevo layout columna para el input area */
#gc-chat .gc-pill-inner-col {
    display: flex;
    flex-direction: column;
    background: #f1f3f5;
    border: 1px solid #dde1e5;
    border-radius: 18px;
    padding: 8px;
    position: relative;
    gap: 8px;
}
#gc-chat .gc-pill-inner-col:focus-within {
    border-color: #3d89ff;
    box-shadow: 0 0 0 3px rgba(61, 137, 255, .25);
}

#gc-chat .gc-input-wrap-full {
    width: 100%;
}

#gc-chat .gc-input-wrap-full .gc-text {
    width: 100%;
    border: none;
    background: transparent;
    outline: 0;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    min-height: 60px;
    padding: 4px 8px;
    font-family: inherit;
    display: block;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
#gc-chat .gc-input-wrap-full .gc-text::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}
#gc-chat .gc-input-wrap-full .gc-text::placeholder {
    color: #6c757d;
    opacity: .7;
}

#gc-chat .gc-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#gc-chat .gc-actions-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botón Finalizar chat */
#gc-chat .input .gc-btn-end-chat {
    background: transparent;
    color: #dc3545;
    border: none;
    padding: 0 8px;
    height: auto;
    width: auto;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color .25s ease, transform .2s ease;
    white-space: nowrap;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#gc-chat .input .gc-btn-end-chat:hover {
    background: transparent;
    color: #dc3545;
    box-shadow: none;
    text-decoration: none;
}
#gc-chat .input .gc-btn-end-chat:active {
    transform: translateY(1px);
}


/* Dark mode support for preview */
:root[data-theme='dark'] #gc-chat .gc-preview-temp { background-color: #2a3034; border-color: #3a3f44; }
:root[data-theme='dark'] #gc-chat .gc-prev-remove { border-color: #2a3034; }
:root[data-theme='pink'] #gc-chat .gc-preview-temp { background-color: #fff0f6; border-color: #fcc2d7; }

@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}


/* =============================
   Filtros móviles (tema rosa)
   Forzar botón activo "llenado"
   ============================= */
/* Asegurar que los botones activos se vean llenos en rosa */
:root[data-theme='pink'] .chat-mobile-filters button.btn-outline-primary.active,
:root[data-theme='pink'] .chat-mobile-filters button.active,
:root[data-theme='pink'] .chat-mobile-filters .btn.btn-outline-primary.active,
:root[data-theme='pink'] .chat-mobile-filters .btn.active {
    background-color: #e83e8c !important;
    border-color: #e83e8c !important;
    color: #fff !important;
    border-width: 3px !important;
    box-shadow: none !important; /* Evitar recuadro/sombra cuadrada */
    border-radius: 14px !important; /* Asegurar esquinas redondeadas */
}

/* Estados hover/focus del activo: mantener relleno */
:root[data-theme='pink'] .chat-mobile-filters button.btn-outline-primary.active:hover,
:root[data-theme='pink'] .chat-mobile-filters button.btn-outline-primary.active:focus,
:root[data-theme='pink'] .chat-mobile-filters button.active:hover,
:root[data-theme='pink'] .chat-mobile-filters button.active:focus {
    background-color: #e83e8c !important;
    border-color: #e83e8c !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 14px !important;
}

/* =============================
   Filtros móviles (tema noche)
   Botón activo igual que modo día
   ============================= */
:root[data-theme='dark'] .chat-mobile-filters button.btn-outline-primary.active,
:root[data-theme='dark'] .chat-mobile-filters .btn.btn-outline-primary.active,
:root[data-theme='dark'] .chat-mobile-filters button.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: none !important;
}

:root[data-theme='dark'] .chat-mobile-filters button.btn-outline-primary.active:hover,
:root[data-theme='dark'] .chat-mobile-filters button.btn-outline-primary.active:focus,
:root[data-theme='dark'] .chat-mobile-filters button.active:hover,
:root[data-theme='dark'] .chat-mobile-filters button.active:focus {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: none !important;
}
/* Quitar cualquier sombra/outline por defecto de Bootstrap en botones del filtro (tema rosa) */
:root[data-theme='pink'] .chat-mobile-filters button.btn,
:root[data-theme='pink'] .chat-mobile-filters .btn {
    box-shadow: none !important;
    outline: none !important;
    border-radius: 14px !important;
}

/* Estados generales hover/focus/active en rosa: sin recuadro cuadrado */
:root[data-theme='pink'] .chat-mobile-filters button.btn:hover,
:root[data-theme='pink'] .chat-mobile-filters button.btn:focus,
:root[data-theme='pink'] .chat-mobile-filters button.btn:focus-visible,
:root[data-theme='pink'] .chat-mobile-filters button.btn:active {
    box-shadow: none !important;
    outline: none !important;
    border-radius: 14px !important;
}

/* Mensajes con imagen */
#gc-chat .chat-bubble.gc-has-image{padding:8px 8px 10px;display:flex;flex-direction:column;gap:6px;max-width:240px;width:auto}
#gc-chat .gc-img-wrap{width:100px;max-width:100px;max-height:none;overflow:hidden;border-radius:12px;position:relative;background:#000;flex:0 0 auto; cursor: pointer;}
#gc-chat .gc-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
#gc-chat .gc-img-wrap .gc-img-single{width:100%;min-width:0;display:block;position:relative;overflow:hidden;border-radius:8px}
#gc-chat .gc-img-wrap .gc-img-single img{width:100%;height:auto;display:block;object-fit:cover}
#gc-chat .gc-img-cap{font-size:13px;line-height:1.3;word-break:break-word;flex:1 1 auto}
#gc-chat .chat-bubble.gc-has-image{flex-direction:column;align-items:stretch;position:relative}
#gc-chat .chat-bubble.gc-has-image .gc-img-wrap{margin-bottom:4px;width:100%;max-width:100%;max-height:none}
#gc-chat .chat-bubble.gc-has-image .gc-img-cap{display:flex;justify-content:flex-start;align-items:flex-start;align-self:flex-start;text-align:left;padding:0 2px 2px;font-size:12px;opacity:.95;width:100%}

/* Ajustes para lado emisor y receptor manteniendo color burbuja */
#gc-chat .chat-receiver .chat-bubble.gc-has-image{background:#e9ecef}
#gc-chat .chat-sender .chat-bubble.gc-has-image{background:#0d6efd}

/* Forzar alineación izquierda para mensajes recibidos (admin/bot) */
#gc-chat .chat-receiver .chat-bubble {
    text-align: left !important;
}
#gc-chat .chat-receiver .chat-body {
    align-items: flex-start !important;
}
#gc-chat .chat-receiver .chat-header,
#gc-chat .chat-receiver .chat-footer {
    text-align: left !important;
}
/* Corregir caption de imágenes para mensajes recibidos: alinear a la derecha (cliente) */
#gc-chat .chat-sender .chat-bubble.gc-has-image .gc-img-cap {
    justify-content: flex-end !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    text-align: right !important;
}

/* Icono de reloj para estado enviando */
#gc-chat .gc-clock { vertical-align: middle; margin-left: 4px; opacity: 0.7; display: inline-block; }
#gc-chat .receipt { display: inline-flex; align-items: center; }

/* --- Nuevos Estilos para Grid y Lightbox --- */

/* Grid de imágenes */
#gc-chat .gc-img-grid {
    display: grid;
    gap: 2px;
    width: 240px; /* Ajustado para burbuja de chat */
    min-width: 240px;
    grid-template-columns: repeat(2, 1fr);
}
#gc-chat .gc-img-grid.gc-pending-grid{
    width: 300px;
    min-width: 300px;
    border-radius: 10px;
    grid-auto-rows: auto;
}
#gc-chat .gc-img-grid.gc-pending-grid img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
#gc-chat .gc-img-grid.gc-pending-grid.gc-grid-1 img{
    height: auto;
    max-height: 260px;
}
#gc-chat .gc-img-grid.gc-sending{opacity: .8;}
#gc-chat .gc-img-grid.gc-sending{opacity: .85;}
#gc-chat .gc-img-grid.gc-send-error img{object-fit: cover;}
/* Mensaje completo con error de envío - Azul desaturado (opaco) */
#gc-chat .chat.gc-msg-error {
    opacity: 1 !important;
    filter: none !important;
}
#gc-chat .chat.gc-msg-error .chat-bubble,
#gc-chat .chat.gc-msg-error .chat-bubble.gc-has-image {
    /* Permitir ver el color azul original pero desaturado y con transparencia */
    opacity: 0.5 !important;
}
/* Quitar fondo negro de contenedores de imagen en error */
#gc-chat .chat.gc-msg-error .gc-img-wrap,
#gc-chat .chat.gc-msg-error .gc-img-grid,
#gc-chat .chat.gc-msg-error .gc-img-item {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Pending grid sizing matching server-rendered images exactly */
#gc-chat .gc-img-grid.gc-pending-grid{
    display: grid;
    gap: 2px;
    width: 300px;
    min-width: 300px;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}
#gc-chat .gc-img-grid.gc-pending-grid img{
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
#gc-chat .gc-img-grid.gc-pending-grid.gc-grid-1{
    grid-template-columns: 1fr;
}
#gc-chat .gc-img-grid.gc-pending-grid.gc-grid-1 img{
    height: auto;
}
/* Remove gc-img-bubble overrides - use gc-has-image instead */
#gc-chat .gc-img-item {
    position: relative;
    width: 100%;
  height: auto;
    overflow: hidden;
}
#gc-chat .gc-img-grid .gc-img-item {
  height: 100px; /* Altura fija solo para items dentro de grids */
}
#gc-chat .gc-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay "Abrir" centrado */
#gc-chat .gc-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none; /* Permitir click en el wrap */
}
#gc-chat .gc-img-wrap:hover .gc-grid-overlay {
    opacity: 1;
}
#gc-chat .gc-grid-overlay span {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* Lightbox */
#gc-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 11000; /* Encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#gc-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
#gc-lightbox .lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#gc-lightbox.has-thumbnails .lightbox-content {
  padding-bottom: 118px;
  box-sizing: border-box;
}
#gc-lightbox .lightbox-content img {
    max-width: 95%;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
#gc-lightbox .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    left: auto;
    transform: none;
    color: #fff;
    cursor: pointer;
    z-index: 11002;
    user-select: none;
    background: rgba(0,0,0,0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}
#gc-lightbox .lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Navegación Lightbox */
#gc-lightbox .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    z-index: 11002;
    transition: background 0.2s;
}
#gc-lightbox .lightbox-nav:hover { background: rgba(255,255,255,0.3); }
#gc-lightbox .lightbox-prev { left: 20px; }
#gc-lightbox .lightbox-next { right: 20px; }

/* Miniaturas Lightbox */
#gc-lightbox .lightbox-thumbnails {
    position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 720px);
    z-index: 11002;
  padding: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
  background: rgba(0,0,0,0.38);
  border-radius: 16px;
  backdrop-filter: blur(4px);
}
#gc-lightbox .lightbox-thumbnails::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#gc-lightbox .lightbox-thumbnails-track {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
  min-width: 100%;
}
#gc-lightbox .lightbox-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
  opacity: 0.72;
    transition: all 0.2s;
    pointer-events: auto;
    background: #000;
  scroll-snap-align: center;
}
#gc-lightbox .lightbox-thumb.active {
    border-color: #fff;
    opacity: 1;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.28), 0 10px 24px rgba(0,0,0,0.42);
}
#gc-lightbox .lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gc-lightbox .lightbox-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
  touch-action: none;
}
#gc-lightbox .lightbox-img-wrap.is-zoomed {
  cursor: grab;
}
#gc-lightbox .lightbox-img-wrap.is-dragging {
  cursor: grabbing;
}
#gc-lightbox .lightbox-img-wrap:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
  #gc-lightbox.has-thumbnails .lightbox-content {
    padding-bottom: 106px;
  }
  #gc-lightbox .lightbox-thumbnails {
    bottom: 12px;
    width: calc(100% - 20px);
    padding: 8px 10px;
  }
  #gc-lightbox .lightbox-thumb {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }
}

/* Handle de redimensionamiento - C futurista con bordes finos y fondo semi-opaco */
#gc-chat .gc-resize-handle {
    position: absolute;
    width: 50px;
    height: 50px;
    cursor: nwse-resize;
    z-index: 1051;
    pointer-events: all;
    
    /* Recorte interactivo: Solo la forma de la C (incluyendo puntas redondeadas) recibe eventos */
    clip-path: path('M 46 10 A 36 36 0 0 0 10 46 A 4 4 0 0 0 18 46 A 28 28 0 0 1 46 18 A 4 4 0 0 0 46 10 Z');
    
    /* Estrategia de Alto Contraste Universal (sin mix-blend-mode) */
    /* Usamos un borde blanco con una sombra negra dura. */
    /* En fondo oscuro: Se ve el blanco. En fondo claro: Se ve la sombra negra. */

    /* Fondo: Gradiente radial. Borde Blanco Puro. Relleno Glass más sutil. */
    background: radial-gradient(
        circle at 46px 46px,
        transparent 28px,
        rgba(255, 255, 255, 1) 28px,       /* Borde interno (Blanco) */
        rgba(255, 255, 255, 1) 29.5px,     /* Grosor 1.5px */
        rgba(255, 255, 255, 0.1) 29.5px,   /* Relleno Glass (más sutil para menos "gris") */
        rgba(255, 255, 255, 0.1) 34.5px,    
        rgba(255, 255, 255, 1) 34.5px,     /* Borde externo (Blanco) */
        rgba(255, 255, 255, 1) 36px,       /* Grosor 1.5px */
        transparent 36px
    );
    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Máscara SVG: Arco suave */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M 46 14 A 32 32 0 0 0 14 46' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M 46 14 A 32 32 0 0 0 14 46' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* Eliminamos 'background' de la transición para evitar artefactos visuales (bleeding) al interpolar gradientes */
    transition: transform 0.2s ease, filter 0.2s ease;
    
    /* CLAVE: Sombra negra suave (outline) + Sombra suave */
    /* Reducimos la opacidad de la sombra negra (de 0.8 a 0.3) para que sea sutil y no "gris fuerte" */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Ocultar handle en modo Home/Menú para evitar redimensionamiento */
#gc-chat .panel.gc-home-mode ~ .gc-resize-handle {
    display: none !important;
    pointer-events: none;
}

#gc-chat .gc-resize-handle:hover {
    transform: scale(1.05);
    /* Hover: Sombra un poco más marcada pero suave */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    
    /* Hover: Relleno un poco más visible */
    background: radial-gradient(
        circle at 46px 46px,
        transparent 28px,
        rgba(255, 255, 255, 1) 28px,
        rgba(255, 255, 255, 1) 29.5px,
        rgba(255, 255, 255, 0.2) 29.5px,    /* Relleno más visible en hover */
        rgba(255, 255, 255, 0.2) 34.5px,
        rgba(255, 255, 255, 1) 34.5px,
        rgba(255, 255, 255, 1) 36px,
        transparent 36px
    );
}
#gc-chat .gc-resize-handle:before,
#gc-chat .gc-resize-handle:after {
    display: none;
}

/* Botón flotante para scroll hacia abajo - posicionado entre msgs e input */
#gc-chat .gc-scroll-down-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dde1e5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 25;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

/* Ocultar botón cuando el chat está en modo home */
#gc-chat .panel.gc-home-mode .gc-scroll-down-btn {
    display: none !important;
}
#gc-chat .gc-scroll-down-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: scale(1.05);
}
#gc-chat .gc-scroll-down-btn svg {
    width: 20px;
    height: 20px;
    stroke: #495057;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
#gc-chat .gc-scroll-down-btn.visible {
    display: flex !important;
}

/* Badge de mensajes no leídos en el botón de scroll */
#gc-chat .gc-scroll-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    line-height: 1;
}
#gc-chat .gc-scroll-badge.visible {
    display: flex;
}

/* Global Skeleton Loader (copied from .gc-faq-skel) */
/* High specificity to override dashboard.php inline styles */
#liveChatAdmin .chat-mobile-filters button.gc-btn-skeleton,
.gc-btn-skeleton {
    background: #e2e5e9 !important; /* Solid fallback */
    background: linear-gradient(90deg, #e2e5e9 0%, #b8bfc6 40%, #e2e5e9 80%) !important;
    background-size: 200% 100% !important;
    background-image: linear-gradient(90deg, #e2e5e9 0%, #b8bfc6 40%, #e2e5e9 80%) !important;
    animation: gcShimmer 1.05s ease-in-out infinite !important;
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none;
    user-select: none;
    border-color: transparent !important;
    box-shadow: none !important;
}

.gc-btn-skeleton * {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Theme support for skeleton */
[data-theme="dark"] #liveChatAdmin .chat-mobile-filters button.gc-btn-skeleton,
[data-theme="dark"] .gc-btn-skeleton {
    background: #343a40 !important;
    background: linear-gradient(90deg, #343a40 0%, #495057 40%, #343a40 80%) !important;
    background-size: 200% 100% !important;
    background-image: linear-gradient(90deg, #343a40 0%, #495057 40%, #343a40 80%) !important;
}

[data-theme="pink"] #liveChatAdmin .chat-mobile-filters button.gc-btn-skeleton,
[data-theme="pink"] .gc-btn-skeleton {
    background: #f8d7da !important;
    background: linear-gradient(90deg, #f8d7da 0%, #f1aeb5 40%, #f8d7da 80%) !important;
    background-size: 200% 100% !important;
    background-image: linear-gradient(90deg, #f8d7da 0%, #f1aeb5 40%, #f8d7da 80%) !important;
}

/* Product Carousel */
.gc-product-carousel {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    overflow-x: auto !important;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}
.gc-product-carousel::-webkit-scrollbar {
    display: none;
}
.gc-product-carousel:active {
    cursor: grabbing;
}
.gc-product-card {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.gc-product-card:hover {
    transform: translateY(-2px);
}
.gc-carousel-add-btn:active {
    transform: scale(0.95);
}

/* ===== Indicador de escribiendo (typing) ===== */
#gc-chat .gc-typing-indicator {
    animation: fadeIn 0.3s ease;
}
#gc-chat .gc-typing-bubble {
    display: flex;
    align-items: center;
    padding: 12px 16px !important;
    min-height: 36px;
    background: #e9ecef !important;
}
#gc-chat .gc-typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}
#gc-chat .gc-typing-dots span {
  display: inline-block;
  flex: 0 0 auto;
    width: 8px;
    height: 8px;
    background-color: #888;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}
#gc-chat .gc-typing-dots span:nth-child(1) {
    animation-delay: 0s;
}
#gc-chat .gc-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
#gc-chat .gc-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Check único para estado "enviado" */
#gc-chat .gc-icon.gc-single {
    opacity: 0.7;
}

/* ======================================================
   MOBILE FULL-SCREEN CHAT (≤ 767px)
   El widget deja de ser ventana flotante y ocupa toda
   la pantalla, por encima de todo (z-index alto).
   ====================================================== */
@media (max-width: 767.98px) {

  /* ── Panel: fixed fullscreen ── */
  #gc-chat .panel {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1055 !important;
    animation: gcPanelMobileIn .34s cubic-bezier(.22,.61,.36,1) !important;
  }
  @keyframes gcPanelMobileIn {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* ── Header ── */
  #gc-chat .header,
  #gc-chat .header:before {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  #gc-chat .header {
    padding: 12px 16px 10px;
    min-height: 62px;
    height: 62px;
    grid-template-columns: 44px 1fr 44px;
  }
  #gc-chat .gc-hbtn {
    width: 44px;
    height: 44px;
  }
  #gc-chat .gc-hbtn svg {
    width: 22px;
    height: 22px;
  }
  #gc-chat .gc-head-center {
    font-size: 16px;
  }

  /* ── Home screen ── */
  #gc-chat .gc-home {
    padding: 70px 20px 20px;
  }
  #gc-chat .gc-brand {
    font-size: 18px;
    margin-bottom: 32px;
    letter-spacing: .8px;
  }
  #gc-chat .gc-home-head {
    gap: 12px;
    margin-bottom: 18px;
  }
  #gc-chat .gc-home-title {
    font-size: 38px;
    letter-spacing: .4px;
  }
  #gc-chat .gc-home-title .gc-emoji {
    font-size: 34px;
  }
  #gc-chat .gc-home-sub {
    font-size: 18px;
    letter-spacing: .3px;
  }
  #gc-chat .gc-home-avatar {
    width: 54px;
    height: 54px;
  }
  #gc-chat .gc-home-avatar + .gc-home-avatar {
    margin-left: -20px;
  }

  /* ── Card de opciones ── */
  #gc-chat .gc-home-card {
    border-radius: 24px;
    padding: 24px 20px 28px;
    gap: 14px;
  }
  #gc-chat .gc-home-card-title {
    font-size: 14px;
    letter-spacing: .6px;
    margin-bottom: 6px;
  }
  #gc-chat .gc-home-options {
    gap: 4px;
  }
  #gc-chat .gc-home-link {
    padding: 14px 14px 14px 6px;
    font-size: 17px;
    border-radius: 16px;
    gap: 14px;
  }
  #gc-chat .gc-home-link .gc-ico {
    width: 40px;
    height: 40px;
  }
  #gc-chat .gc-home-link .gc-ico svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
  }
  #gc-chat .gc-home-footer {
    font-size: 13px;
    margin-top: 10px;
  }

  /* ── Submenu ── */
  #gc-chat .gc-chat-submenu {
    padding: 70px 20px 20px;
  }
  #gc-chat .gc-submenu-inner {
    max-width: 100%;
    gap: 20px;
  }
  #gc-chat .gc-submenu-title {
    font-size: 19px;
    margin-bottom: 10px;
  }
  #gc-chat .gc-submenu-back {
    font-size: 15px;
    padding: 6px 10px 6px 0;
  }
  #gc-chat .gc-submenu-back svg {
    width: 18px;
    height: 18px;
  }
  #gc-chat .gc-submenu-options {
    gap: 14px;
  }
  #gc-chat .gc-submenu-btn {
    padding: 18px 20px;
    border-radius: 18px;
    gap: 16px;
  }
  #gc-chat .gc-submenu-btn-icon {
    width: 48px;
    height: 48px;
  }
  #gc-chat .gc-submenu-btn-icon svg,
  #gc-chat .gc-submenu-btn-icon img {
    width: 36px;
    height: 36px;
  }
  #gc-chat .gc-submenu-btn-text strong {
    font-size: 17px;
  }
  #gc-chat .gc-submenu-btn-text small {
    font-size: 14px;
  }
  #gc-chat .gc-badge-ia {
    font-size: 11px;
    padding: 4px 12px;
  }

  /* ── Mensajes ── */
  #gc-chat .msgs {
    padding-top: 80px;
  }
  #gc-chat .chat-bubble {
    max-width: calc(100vw - 80px);
    font-size: 15px;
    line-height: 1.42;
    padding: 10px 16px;
  }
  #gc-chat .chat-avatar .size-10 {
    width: 36px;
    height: 36px;
  }
  #gc-chat .chat-header {
    font-size: 13px;
  }
  #gc-chat .chat-footer,
  #gc-chat .chat-header time {
    font-size: 12px;
  }
  #gc-chat .gc-quick-btn {
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 22px;
  }

  /* ── Input ── */
  #gc-chat .input,
  #gc-chat .input.gc-pill {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  #gc-chat .gc-input-wrap .gc-text,
  #gc-chat .gc-input-wrap-full .gc-text {
    font-size: 16px; /* evita zoom automático en iOS */
  }
  #gc-chat .gc-btn-icon,
  #gc-chat .gc-send {
    width: 46px;
    height: 46px;
  }
  #gc-chat .gc-send-svg,
  #gc-chat .gc-upload-svg {
    width: 28px;
    height: 28px;
  }

  /* ── Ocultar resize handle ── */
  #gc-chat .gc-resize-handle {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── z-index del wrapper (toggle visible cuando panel cerrado) ── */
  #gc-chat {
    z-index: 1055;
  }
}

/* ── Landscape móvil muy corto (p.ej. 667×375 rotado) ── */
@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 500px) {
  #gc-chat .gc-home {
    padding: 52px 14px 6px;
  }
  #gc-chat .gc-brand {
    margin-bottom: 12px;
    font-size: 13px;
  }
  #gc-chat .gc-home-title {
    font-size: 20px;
  }
  #gc-chat .gc-home-head {
    gap: 5px;
    margin-bottom: 3px;
  }
  #gc-chat .gc-home-avatar {
    width: 32px;
    height: 32px;
  }
  #gc-chat .gc-home-card {
    padding: 10px 14px 12px;
    gap: 6px;
    border-radius: 16px;
  }
  #gc-chat .gc-home-link {
    padding: 7px 8px 7px 2px;
    font-size: 13px;
  }
  #gc-chat .gc-home-link .gc-ico {
    width: 24px;
    height: 24px;
  }
  #gc-chat .gc-home-link .gc-ico svg {
    width: 22px;
    height: 22px;
  }
  #gc-chat .gc-chat-submenu {
    padding: 52px 14px 6px;
    gap: 8px;
  }
  #gc-chat .gc-submenu-btn {
    padding: 9px 12px;
  }
  #gc-chat .gc-submenu-title {
    font-size: 13px;
    margin-bottom: 3px;
  }
  #gc-chat .msgs {
    padding-top: 60px;
  }
  #gc-chat .header {
    min-height: 48px;
    height: 48px;
    padding: 8px 10px 6px;
  }
}

/* ======================================================
   TABLET FLOTANTE (768px – 1199px)
   El panel sigue siendo ventana flotante (no fullscreen)
   pero con todos los componentes un poco más grandes.
   ====================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ── Panel: un poco más grande, sin desbordar viewport ── */
  #gc-chat .panel {
    width: min(580px, calc(100vw - 32px)) !important;
    /* Evitar look “casi fullscreen” en tablet portrait */
    height: min(68vh, calc(100vh - 240px)) !important;
    max-height: calc(100vh - 240px) !important;
  }

  /* ── Header ── */
  #gc-chat .header {
    height: 72px;
    min-height: 72px;
    padding: 16px 16px 14px;
    grid-template-columns: 42px 1fr 42px;
  }
  #gc-chat .gc-hbtn {
    width: 42px;
    height: 42px;
  }
  #gc-chat .gc-hbtn svg {
    width: 22px;
    height: 22px;
  }
  #gc-chat .gc-head-center {
    font-size: 16px;
  }

  /* ── Home ── */
  #gc-chat .gc-home {
    padding: 70px 26px 18px;
    overflow: hidden;
    box-sizing: border-box;
  }
  #gc-chat .gc-brand {
    font-size: 17px;
    margin-bottom: 34px;
  }
  #gc-chat .gc-home-head {
    gap: 12px;
    margin-bottom: 16px;
  }
  #gc-chat .gc-home-title {
    font-size: 34px;
  }
  #gc-chat .gc-home-sub {
    font-size: 17px;
  }
  #gc-chat .gc-home-avatar {
    width: 48px;
    height: 48px;
  }
  #gc-chat .gc-home-avatar + .gc-home-avatar {
    margin-left: -18px;
  }

  /* ── Card de opciones ── */
  #gc-chat .gc-home-card {
    border-radius: 30px;
    padding: 28px 24px 30px;
    gap: 16px;
    min-height: auto;
    flex: 0 0 auto;
  }
  #gc-chat .gc-home-card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  #gc-chat .gc-home-options {
    gap: 4px;
  }
  #gc-chat .gc-home-link {
    padding: 13px 12px 13px 6px;
    font-size: 16px;
    gap: 14px;
    border-radius: 16px;
  }
  #gc-chat .gc-home-link .gc-ico {
    width: 36px;
    height: 36px;
  }
  #gc-chat .gc-home-link .gc-ico svg {
    width: 32px;
    height: 32px;
  }

  /* ── Submenu ── */
  #gc-chat .gc-chat-submenu {
    padding: 70px 26px 18px;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* En tablet, ocupar el ancho disponible (evitar max-width:320px del base) */
  #gc-chat .gc-submenu-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
  }
  #gc-chat .gc-submenu-back {
    font-size: 15px;
    padding: 8px 10px 8px 0;
  }
  #gc-chat .gc-submenu-back svg {
    width: 18px;
    height: 18px;
  }
  #gc-chat .gc-submenu-title {
    font-size: 22px;
    margin-bottom: 18px;
  }
  #gc-chat .gc-submenu-options {
    gap: 18px;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: 14px;
  }
  #gc-chat .gc-submenu-btn {
    width: 100%;
    padding: 22px 22px;
    gap: 18px;
    border-radius: 20px;
  }
  #gc-chat .gc-submenu-btn-icon {
    width: 58px;
    height: 58px;
  }
  #gc-chat .gc-submenu-btn-icon svg,
  #gc-chat .gc-submenu-btn-icon img {
    width: 42px;
    height: 42px;
  }
  #gc-chat .gc-submenu-btn-text strong {
    font-size: 18px;
  }
  #gc-chat .gc-submenu-btn-text small {
    font-size: 14px;
  }
  #gc-chat .gc-badge-ia {
    font-size: 11px;
    padding: 4px 12px;
  }

  /* ── Mensajes ── */
  #gc-chat .msgs {
    padding-top: 108px;
  }
  #gc-chat .chat-bubble {
    font-size: 15px;
    padding: 10px 16px;
    max-width: 520px;
  }
  #gc-chat .gc-quick-btn {
    font-size: 14px;
    padding: 9px 18px;
  }

  /* ── Input ── */
  #gc-chat .gc-input-wrap .gc-text,
  #gc-chat .gc-input-wrap-full .gc-text {
    font-size: 15px;
  }
  #gc-chat .gc-btn-icon,
  #gc-chat .gc-send {
    width: 44px;
    height: 44px;
  }
}