/* GrotTec Chat - componente autónomo, pensado para convivir con la home. */
.chat-ia, .chat-ia * { box-sizing: border-box; }
.chat-ia {
  --chat-bg: #111115; --chat-panel: #1a1a20; --chat-border: #303037;
  --chat-muted: #a5a5b2; --chat-red: #e10600;
  position: fixed; right: max(22px, env(safe-area-inset-right, 0px));
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  z-index: 110; font-family: var(--font-sans, Inter, sans-serif); color: #f7f7f9;
  line-height: 1.5; isolation: isolate;
}
.chat-ia button, .chat-ia input, .chat-ia textarea { font: inherit; }
.chat-ia button { cursor: pointer; }
.chat-launcher {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px; color: #fff; background: #e10600;
  font-size: 14px; font-weight: 700; box-shadow: 0 12px 44px rgba(0,0,0,.35), 0 8px 24px rgba(225,6,0,.2);
  transition: transform .2s, background .2s;
}
.chat-launcher:hover { transform: translateY(-3px); background: #be0906; }
.chat-launcher svg { height: 22px; width: 22px; flex: none; }
.chat-launcher .chat-online { width: 8px; height: 8px; border-radius: 50%; background: #64e69f; box-shadow: 0 0 0 3px rgba(100,230,159,.2); }
.chat-launcher-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.chat-launcher-text small { font-size: 10px; letter-spacing: .045em; opacity: .9; font-weight: 500; }
.chat-window {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: min(388px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 116px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--chat-bg); border: 1px solid var(--chat-border);
  border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.52);
  transform-origin: 85% 100%; animation: chat-appear .2s ease-out;
}
.chat-window[hidden], .chat-handoff[hidden], .chat-typing[hidden], .chat-welcome[hidden] { display: none !important; }
@keyframes chat-appear { from { opacity:0; transform: translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.chat-head { flex: 0 0 auto; display:flex; justify-content: space-between; align-items:center; gap: 12px; padding: 15px 16px;
 background: linear-gradient(125deg, #212127 0%, #151518 100%); border-bottom: 1px solid var(--chat-border); }
.chat-agent { display: flex; align-items:center; gap: 11px; min-width: 0; }
.chat-avatar { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background: #e10600; font-size:15px; font-weight:800; letter-spacing:-.05em; color:white; }
.chat-agent strong, .chat-agent small { display:block; }
.chat-agent strong { font-size:14px; line-height:1.2; }
.chat-agent small { font-size:11px; color:#b9b9c6; margin-top: 4px; }
.chat-head-actions { display:flex; gap: 4px; }
.chat-icon-btn { border:0; color:#e9e9ed; background:transparent; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; }
.chat-icon-btn:hover { background:#34343c; }
.chat-icon-btn svg { width:19px; height:19px; }
.chat-info { flex:none; text-align:center; padding:8px 12px; color:var(--chat-muted); font-size:10px; background:#17171c; border-bottom:1px solid var(--chat-border); }
.chat-messages { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:19px 15px 18px;
 display: flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:#3e3e47 transparent; }
.chat-date { align-self:center; color:#90909e; font-size:10px; padding:5px 10px; background:#202027; border-radius:50px; }
.chat-welcome { max-width:95%; align-self:flex-start; }
.chat-msg { display:flex; flex-direction:column; max-width:86%; gap:4px; }
.chat-msg[data-role="visitor"] { align-self:flex-end; align-items:flex-end; }
.chat-msg[data-role="bot"], .chat-msg[data-role="agent"], .chat-msg[data-role="system"] { align-self:flex-start; align-items:flex-start; }
.chat-bubble { white-space:pre-wrap; overflow-wrap:anywhere; padding:11px 13px; border-radius:14px 14px 14px 4px; background:#282830; color:#f0f0f3; font-size:13px; line-height:1.52; }
.chat-msg[data-role="visitor"] .chat-bubble { background:#b8100c; color:#fff; border-radius:14px 14px 4px 14px; }
.chat-msg[data-role="system"] .chat-bubble { border:1px dashed #494955; background:transparent; color:#c1c1c9; font-size:12px; }
.chat-meta { color:#858596; font-size:10px; padding:0 4px; }
.chat-typing { display:flex; flex:0 0 auto; gap:6px; align-items:center; padding: 5px 19px 10px; font-size:11px; color:var(--chat-muted); }
.chat-typing i { width:5px; height:5px; background:var(--chat-red); border-radius:50%; animation:chat-dot 1s infinite alternate; }
.chat-typing i:nth-child(2) { animation-delay:.2s; } .chat-typing i:nth-child(3) { animation-delay:.4s; }
@keyframes chat-dot { to {opacity:.2;transform:translateY(-2px)} }
.chat-error { margin:0; padding:0 14px; font-size:11px; color:#ffaaa9; }
.chat-error:empty { display:none; }
.chat-cta-bar { flex:0 0 auto; display:flex; justify-content:center; border-top:1px solid var(--chat-border); padding:9px 12px; background:#16161b; }
.chat-advisor-btn { border:1px solid #4b3639; background:rgba(225,6,0,.09); color:#ffcbc9; border-radius:9px; font-size:12px; font-weight:600; padding:8px 14px; }
.chat-advisor-btn:hover { background:rgba(225,6,0,.18); }
.chat-compose { flex:0 0 auto; display:flex; align-items:flex-end; gap:9px; padding:12px; background:#1c1c22; border-top:1px solid var(--chat-border); }
.chat-compose textarea { flex:1; width:100%; min-width:0; min-height:41px; max-height:110px; resize:none; background:#121217; border:1px solid #373740; color:#fff; border-radius:11px; padding:11px 12px; font-size:13px; line-height:1.4; outline:none; }
.chat-compose textarea:focus { border-color:#b92522; }
.chat-compose textarea::placeholder { color:#8f8f9b; }
.chat-send { border:0; flex:0 0 41px; width:41px; height:41px; display:grid; place-items:center; background:#e10600; border-radius:11px; color:#fff; }
.chat-send:disabled { opacity:.45; cursor:not-allowed; }
.chat-send svg { width:19px; height:19px; }
.chat-footnote { background:#1c1c22; font-size:10px; color:#888893; text-align:center; padding:0 12px 10px; }
.chat-handoff { flex:1 1 auto; min-height:0; overflow-y:auto; padding:22px 19px; display:flex; flex-direction:column; gap:13px; }
.chat-handoff h3 {font-size:19px;line-height:1.15;margin:0;color:#fff;}
.chat-handoff p {font-size:12px;color:#adadb8;margin:0 0 5px;}
.chat-handoff label { display:grid; gap:5px; color:#d8d8dd; font-size:12px; font-weight:600; }
.chat-handoff input:not([type="checkbox"]) { border:1px solid #3d3d48; background:#17171d; color:white; border-radius:9px; padding:11px 12px; font-size:13px; width:100%; }
.chat-handoff input:not([type="checkbox"]):focus {outline:1px solid #d62420;}
.chat-handoff .chat-privacy { display:flex; align-items:flex-start; gap:9px; font-size:11px; font-weight:400; color:#b1b1bd; }
.chat-privacy input { flex:none; margin-top:3px; accent-color:#e10600; }
.chat-handoff .chat-transfer {border:0;border-radius:9px; background:#e10600; color:#fff;font-size:13px;font-weight:700;padding:12px;}
.chat-handoff .chat-transfer:disabled {opacity:.55;cursor:wait;}
.chat-handoff .chat-back {border:1px solid #383844;border-radius:9px;background:transparent;color:#ddd;padding:10px;font-size:12px;}
.chat-form-error { color:#ffaaa9 !important; min-height:15px; }
@media(max-width:520px) {
 .chat-ia { right:max(12px,env(safe-area-inset-right,0px)); bottom:max(12px,env(safe-area-inset-bottom,0px)); }
 .chat-window { right:-3px; width:min(420px,calc(100vw - 24px)); height:min(650px,calc(100dvh - 94px)); border-radius:16px; bottom:calc(100% + 10px); }
 .chat-launcher { padding:12px 14px; }
}
@media(prefers-reduced-motion:reduce) { .chat-window, .chat-typing i, .chat-launcher { animation:none;transition:none; } }
/* El atributo hidden siempre tiene prioridad frente a display:flex/grid de los componentes. */
.chat-ia [hidden] { display:none !important; }

.chat-ia.chat-offline .chat-online { background:#89909a; box-shadow:0 0 0 3px rgba(137,144,154,.18); }