/* css/chat-bubbles.css — Burbujas de Chat en escritorio (F4.9, LinkedIn/Google Chat).
   docs/PLAN_CHAT_BUBBLES_SMARTDATE_PUSH.md, Fase 1. Solo escritorio: js/chat-bubbles.js ya
   controla la visibilidad real (isDesktopLayout), esta media query es la 2ª capa (igual que el
   patrón ya usado por el sheet nativo de Chat en native-materials.css — doble candado JS+CSS). */

.chat-bubbles-dock{
  position:fixed; right:16px; bottom:max(0px, env(safe-area-inset-bottom)); z-index:99990;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  pointer-events:none; /* el contenedor no bloquea clics; los hijos sí se reactivan abajo */
  transition:right .2s ease, bottom .2s ease;
  max-width:calc(100vw - 32px);
}
/* UXU-1/PG-3 (auditoría de cierre, CONFIRMADOS): resuelto 100% en CSS con :has() — sin JS/
   MutationObserver, se reevalúa solo cuando el DOM cambia.
   - #larry-global-panel comparte la misma esquina (right:16px) con z-index más alto (99998 >
     99990 del dock) — quedaba tapado sin ninguna señal. 344px = ancho real de .cad-larry-panel.
   - .toast-stack usa el top-layer real (Popover API) — siempre se pinta encima sin importar
     z-index — y comparte la misma esquina; sube el dock mientras haya algún toast visible. */
/* Hallazgo real (2026-07-18, reportado en vivo por el usuario): #larry-global-panel se crea UNA
   vez y solo se OCULTA con display:none al minimizar (js/larry-global.js#minimize) — nunca se
   quita del DOM. Sin ":not([style*=...])" este :has() seguía matcheando (y corriendo el dock
   372px) para siempre después de la PRIMERA vez que se abrió el panel de Larry en la sesión,
   aunque estuviera minimizado/invisible. */
:root:has(#larry-global-panel:not([style*="display: none"])) .chat-bubbles-dock{ right:calc(344px + 28px); }
:root:has(.toast-stack > *) .chat-bubbles-dock{ bottom:60px; }
/* IOS-1/PCH-1/PG-1 (auditoría de cierre lote medio, 2026-07-18, CONFIRMADO HIGH, verificado en
   vivo con captura real a 1280×720): sin overflow-x/max-width, varias ventanas de 300px+gap podían
   exceder el viewport disponible (agravado por el corrimiento de :has(#larry-global-panel) de
   arriba) y quedar parcial o totalmente inalcanzables. js/chat-bubbles.js#maxFittingWindows() ya
   limita cuántas ventanas se expanden a la vez según el ancho real disponible — esto es la red de
   seguridad para el caso límite en que aun así no quepan exactas (redimensión a media carga, etc). */
.chat-bubbles-row{ display:flex; flex-direction:row-reverse; align-items:flex-end; gap:10px; pointer-events:none; max-width:100%; overflow-x:auto; overflow-y:hidden; }
.chat-bubbles-pills{ display:flex; flex-direction:row-reverse; gap:8px; pointer-events:none; }

.chat-bubble-window{
  pointer-events:auto;
  width:300px; height:400px; max-height:70vh;
  display:flex; flex-direction:column;
  background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e6e2db); border-radius:12px 12px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  overflow:hidden;
}
.chat-bubble-hd{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  background:var(--yt-orange,#EC6628); color:#fff; cursor:pointer; flex-shrink:0;
  transition:background-color .25s ease;
}
/* ACC-4 (auditoría de cierre, CONFIRMADO, MEDIUM): blanco sobre --brand-secondary daba ~2.32:1
   (por debajo del piso 4.5:1 AA para texto normal) — texto oscuro sobre el mismo fondo da >9:1.
   Además del color, ahora hay un punto (chat-bubble-unread-dot) y un aria-label real con texto
   ("— Nuevo mensaje"), no solo el cambio de color (WCAG 1.4.1 Use of Color). */
.chat-bubble-window.unread .chat-bubble-hd{ background:var(--brand-secondary, #FF8A5B); color:#1a1208; }
.chat-bubble-window.unread .chat-bubble-btn{ background:rgba(0,0,0,.12); color:#1a1208; }
.chat-bubble-window.unread .chat-bubble-btn:hover{ background:rgba(0,0,0,.22); }
.chat-bubble-unread-dot{ display:none; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.chat-bubble-window.unread .chat-bubble-unread-dot, .chat-bubble-pill.unread .chat-bubble-unread-dot{ display:inline-block; }
.chat-bubble-pill.unread .chat-bubble-unread-dot{ color:var(--brand-secondary,#FF8A5B); }
.chat-bubble-hd-title{ flex:1; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-bubble-hd-actions{ display:flex; gap:2px; flex-shrink:0 }
.chat-bubble-btn{ border:none; background:rgba(255,255,255,.18); color:#fff; width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center }
.chat-bubble-btn:hover{ background:rgba(255,255,255,.32) }
.chat-bubble-msgs{ flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:5px; font-size:12.5px }
.chat-bubble-typing{ font-size:10.5px; color:var(--text-muted,#8a8580); padding:0 10px; height:14px; flex-shrink:0 }
.chat-bubble-composer{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--divider,#e6e2db); flex-shrink:0 }
.chat-bubble-composer textarea{ flex:1; resize:none; border:1px solid var(--bg-border,#e6e2db); border-radius:8px; padding:6px 9px; font:inherit; font-size:12.5px; max-height:80px; background:var(--bg-page,#fff); color:var(--text,#2b2926) }
/* Lote medio Fase 3: mismo menú "/" del tab completo — botón con el mismo look que .chat-attach-btn
   (css/chat.css) pero más compacto, para caber en el composer angosto de la ventana-burbuja. */
.chat-bubble-attach{ flex-shrink:0; width:30px; height:30px; border:1px solid var(--bg-border,#e6e2db); background:var(--bg-page,#fff); color:var(--text,#2b2926); border-radius:8px; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center }
.chat-bubble-attach:hover{ background:var(--bg-raised,#f6f3ee) }
.chat-bubble-send{ border:none; background:var(--yt-orange,#EC6628); color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.chat-bubble-send:hover{ opacity:.9 }

/* Mensajes dentro de la ventana-burbuja: reusa exactamente las clases de css/chat.css
   (.chat-msg/.chat-msg.mine/.chat-card/.chat-chip/.chat-sysmsg...) — ChatRender.msgHtml pinta el
   mismo HTML tanto en el tab completo como aquí, solo se acota el ancho máximo del burbuja. */
.chat-bubble-msgs .chat-msg{ max-width:85%; font-size:12.5px }
.chat-bubble-msgs .chat-card{ max-width:220px }
.chat-bubble-msgs .chat-img-msg{ max-width:180px; max-height:180px }

.chat-bubble-pill{
  pointer-events:auto;
  display:flex; align-items:center; gap:6px; max-width:180px;
  background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e6e2db); border-radius:999px;
  padding:5px 12px 5px 5px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.14);
  font:inherit; text-align:left; transition:background-color .25s ease;
}
.chat-bubble-pill.unread{ background:color-mix(in srgb, var(--brand-secondary,#FF8A5B) 16%, var(--bg-surface,#fff)); border-color:var(--brand-secondary,#FF8A5B); }
/* PG-2 (auditoría de cierre lote medio, 2026-07-18): única superficie clicable del archivo sin
   :hover, inconsistente con .chat-bubble-btn/.chat-bubble-attach/.chat-bubble-send/.chat-row-bubble-btn. */
.chat-bubble-pill:hover{ background:var(--bg-raised,#f6f3ee); }
.chat-bubble-pill.unread:hover{ background:color-mix(in srgb, var(--brand-secondary,#FF8A5B) 24%, var(--bg-surface,#fff)); }
.chat-bubble-pill-av{ width:26px; height:26px; border-radius:50%; background:var(--yt-orange,#EC6628); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0 }
.chat-bubble-pill-preview{ font-size:11px; color:var(--text-muted,#8a8580); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Botón "abrir en ventana flotante" de cada fila de la lista de Chat (js/chat.js#rowHtml) */
.chat-row-bubble-btn{
  flex-shrink:0; border:none; background:transparent; color:var(--text-muted,#8a8580); cursor:pointer;
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s ease;
}
.chat-row:hover .chat-row-bubble-btn, .chat-row-bubble-btn:focus-visible{ opacity:1 }
.chat-row-bubble-btn:hover{ background:var(--bg-raised,#f0ede8); color:var(--text,#2b2926) }

/* PCH-2 (auditoría de cierre, CONFIRMADO, MEDIUM): "(pointer:coarse)" solo (sin tope de ancho)
   ocultaba el feature en CUALQUIER pantalla táctil, incluida una de escritorio grande con
   touchscreen — inconsistente con isDesktopLayout()/isMobile() (JS), que ya combinan ambas
   señales. Mismo patrón exacto que esas dos funciones.
   IOS-1/PCH-1/PG-1 (auditoría de cierre lote medio, 2026-07-18, CONFIRMADO HIGH): agregado
   "(pointer:coarse) and (hover:none)" SIN tope de ancho/alto — un iPad (sin mouse) se oculta
   siempre, sin importar su tamaño de pantalla; mismo criterio exacto que ChatRender.isMobileTouch()
   en js/chat-render.js (fuente única). */
@media (pointer:coarse) and (hover:none), (max-width:879px) and (pointer:coarse), (max-height:500px) and (pointer:coarse) and (max-width:960px){
  .chat-bubbles-dock{ display:none !important; }
  .chat-row-bubble-btn{ display:none; }
}