/* host-chat.css — chat flotante del anfitrión, REUTILIZABLE (FAB + ventana
   arrastrable/redimensionable + globo de bienvenida). Generalizado desde el
   patrón de Cacho (ARG). Cada página:
     · setea --host-accent (color del anfitrión) y --host-accent-rgb en su tema,
     · pone el DOM con ids hostFab / hostChat / hostChatClose / hostChatHead /
       hostPeek / hostPeekBtn / hostPeekClose,
     · incluye js/host-chat.js.
   El chat (chat-core.js) vive dentro de .host-chat__main; este archivo solo es
   la cáscara flotante. --host-on-accent = color del texto sobre el acento. */

/* En estas páginas el anfitrión flotante ocupa la esquina inferior derecha;
   el botón "volver arriba" se va a la izquierda para no taparlo. */
.back-top{right:auto;left:28px;}
@media(max-width:720px){.back-top{left:16px;}}

/* El FAB es solo el estado "colapsado": botón-ícono chico y redondo (solo el
   emoji del anfitrión). No es el estado inicial — de arranque invita el globo
   (host-peek). Se muestra tras descartar el globo o cerrar el chat. */
.host-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:none;align-items:center;justify-content:center;background:var(--host-accent);color:var(--host-on-accent,#1a1a18);border:none;border-radius:50%;width:58px;height:58px;padding:0;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.42);transition:transform .15s,box-shadow .15s;}
.host-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.5);}
.host-fab__ico{font-size:1.55rem;line-height:1;}
/* nombre accesible para lectores de pantalla, sin texto visible */
.host-fab__txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.host-collapsed .host-fab{display:inline-flex;}
body.host-open .host-fab{display:none;}

/* Globo "cerrado pero invitador": asoma sobre el FAB, el anfitrión saluda.
   Tocarlo abre el chat; la × lo descarta. En Lora (persona hablando). */
.host-peek{position:fixed;right:20px;bottom:20px;z-index:59;display:flex;align-items:flex-end;gap:6px;max-width:min(320px,80vw);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .38s ease,transform .38s ease;}
.host-peek.is-shown{opacity:1;transform:none;pointer-events:auto;}
.host-peek__bubble{display:inline-flex;align-items:center;gap:9px;text-align:left;background:var(--host-accent);color:var(--host-on-accent,#1a1a18);border:none;border-radius:16px 16px 4px 16px;padding:11px 15px;cursor:pointer;font-family:"Lora",Georgia,serif;font-size:.94rem;font-weight:600;line-height:1.28;box-shadow:0 10px 28px rgba(0,0,0,.42);}
.host-peek__bubble:hover{filter:brightness(1.04);}
.host-peek__ico{font-size:1.15rem;line-height:1;flex-shrink:0;}
.host-peek__close{background:rgba(var(--bg-rgb),.92);color:var(--txt-dim);border:1px solid rgba(var(--line-rgb),.22);border-radius:50%;width:22px;height:22px;line-height:1;font-size:.72rem;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s,border-color .15s;}
.host-peek__close:hover{color:var(--txt-bright);border-color:rgba(var(--line-rgb),.4);}
body.host-open .host-peek{opacity:0!important;pointer-events:none!important;transform:translateY(10px);}
@media(prefers-reduced-motion:reduce){.host-peek,.host-peek.is-shown{transition:opacity .2s ease;transform:none;}}
@media(max-width:720px){.host-peek{right:14px;bottom:16px;max-width:min(300px,82vw);}}

/* Ventana flotante: arrastrable (por la cabecera) + redimensionable (resize) */
.host-chat{position:fixed;right:20px;bottom:20px;z-index:61;width:min(480px,94vw);height:min(720px,88vh);min-width:340px;min-height:440px;max-width:96vw;max-height:94vh;display:flex;flex-direction:column;background:rgba(var(--bg-rgb),1);border:1px solid rgba(var(--host-accent-rgb),.42);border-radius:16px;overflow:hidden;resize:both;box-shadow:0 24px 64px rgba(0,0,0,.55);animation:host-chat-in .22s ease;}
.host-chat.is-dragging{animation:none;transition:none;user-select:none;box-shadow:0 30px 80px rgba(0,0,0,.6);}
@keyframes host-chat-in{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.host-chat[hidden]{display:none;}
.host-chat__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:rgba(var(--host-accent-rgb),.12);border-bottom:1px solid rgba(var(--host-accent-rgb),.28);flex-shrink:0;cursor:move;touch-action:none;user-select:none;}
.host-chat__title{font-family:"Share Tech Mono",monospace;font-size:.7rem;letter-spacing:.05em;color:var(--txt-bright);pointer-events:none;}
.host-chat__title b{color:var(--host-accent);letter-spacing:.1em;}
.host-chat__close{background:none;border:none;color:var(--txt-dim);font-size:1.25rem;cursor:pointer;line-height:1;padding:4px 9px;border-radius:6px;}
.host-chat__close:hover{color:var(--txt-bright);background:rgba(var(--line-rgb),.1);}
/* Layout interno: la conversación se encoge y la cinta de idiomas queda anclada al fondo. */
.host-chat__main{flex:1;min-height:0;min-width:0;overflow:hidden;display:flex;}
.host-chat .plan-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:16px;gap:14px;}
.host-chat .plan-head,.host-chat .how-accord,.host-chat .lang-ticker-block{flex-shrink:0;}
.host-chat .chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;}
.host-chat #chatZone{flex:1;min-height:0;display:flex;flex-direction:column;}
.host-chat #chatZone .convo{flex:1;min-height:120px;height:auto;}
.host-chat .landing{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;}
.host-chat .plan-head__kicker .how-toggle{white-space:nowrap;}
@media(max-width:720px){
  .host-chat{right:0;left:0;bottom:0;top:0;width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;border:none;resize:none;}
  .host-fab{right:16px;bottom:16px;width:54px;height:54px;}
}