/* css/chat.css — App 💬 Chat (F4.2/F4.3, épica Aluna Workspace F4). Aditivo, después de
   tokens-productivity.css (usa el patrón compartido .yt-split para lista+detalle). */

/* Bug real reportado por el usuario en vivo (2026-07-16, captura móvil): el modal "+ Nuevo
   mensaje" (openNewChat) reusaba las clases .cts-modal/.cts-in/.cts-rm de js/contacts.js — pero
   esas clases NO viven en ningún CSS global, las inyecta contacts.js él mismo en un <style> al
   montar. Si el usuario entra a Chat SIN haber abierto Contactos antes (caso normal en móvil),
   esas clases no existen: el <dialog class="appmod"> de AppModal.overlay() es a propósito
   transparente y full-viewport SIN centrar nada (dialog.appmod{background:transparent} en
   js/dialog-service.js) — el llamante SIEMPRE debe aportar su propio fondo+centrado vía la clase
   extra. Sin `.chat-new-bk` (equivalente a `.cts-modal-bk`), el <input> quedaba flotando sin
   estilo, ancho completo, pegado arriba del viewport — exactamente la barra blanca reportada.
   Fix: clases 100% propias de Chat (nunca dependen de que otro módulo haya montado antes). */
.chat-new-bk{position:fixed;inset:0;background:rgba(20,18,16,.5);z-index:99995;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.chat-new-box{background:var(--bg-surface,#fff);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(440px,calc(100% - 32px));padding:20px}
.chat-new-in{width:100%;box-sizing:border-box;border:1px solid var(--bg-border,#e6e2db);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:16px;background:var(--bg-page,#fff);color:var(--text,#222)}
.chat-new-in:focus{outline:none;border-color:var(--yt-orange,#EC6628)}
.chat-new-x{border:none;background:none;cursor:pointer;color:var(--text-2,#999);font-size:15px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.chat-new-x:hover{color:#dc2626}
.pl-lit:hover{background:var(--bg-raised,#f7f4ef) !important}

/* Auditoría F4+F5 (2026-07-17, hallazgo HIGH): `.chat-shell{height:100%}` necesita una altura
   REAL heredada de sus 2 ancestros (`.tab-pane`/`.main-inner`) — ninguno la daba, mismo bug ya
   documentado y corregido en css/mail.css:11-30 (BUG REAL 2026-07-13) para Correo. Sin este
   `:has()`, es `.main` (scroll de PÁGINA) el que termina scrolleando, empujando el compositor de
   Chat fuera de vista detrás del bottom-nav en móvil. */
.main-inner:has(#tab-chat-soon.tab-pane.active){ height:100%; min-height:0; padding:0; display:flex; flex-direction:column; }
#tab-chat-soon.tab-pane.active{ flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column; }
.chat-shell{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-toolbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--divider,#e6e2db)}
.chat-toolbar h1{font-size:16px;margin:0;flex:1}
.chat-row{position:relative}
.chat-row .chat-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--yt-orange,#EC6628);color:#fff;border-radius:999px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-row-name{font-weight:600;color:var(--text,#2b2926);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-prev{font-size:12px;color:var(--text-muted,#8a8580);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-when{font-size:11px;color:var(--text-muted,#8a8580);flex-shrink:0}
.chat-thread{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-thread-hd{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--divider,#e6e2db)}
.chat-thread-back{display:none;background:none;border:0;cursor:pointer;color:var(--text,#2b2926);min-width:44px;min-height:44px;align-items:center;justify-content:center}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.chat-msg{max-width:70%;padding:8px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;word-break:break-word}
.chat-msg.mine{align-self:flex-end;background:var(--yt-orange,#EC6628);color:#fff;border-bottom-right-radius:4px}
.chat-msg.theirs{align-self:flex-start;background:var(--bg-raised,#f0ede8);color:var(--text,#2b2926);border-bottom-left-radius:4px}
.chat-msg.chat-larry{background:rgba(236,102,40,.12);border:1px solid rgba(236,102,40,.28)}
.chat-msg.chat-larry .chat-msg-name{color:var(--yt-orange,#EC6628)}
.chat-msg-name{font-size:11px;font-weight:700;opacity:.75;margin-bottom:2px}
.chat-msg-time{font-size:10px;opacity:.65;margin-top:3px;text-align:right}
.chat-composer{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--divider,#e6e2db)}
.chat-composer textarea{flex:1;resize:none;border:1px solid var(--bg-border,#e6e2db);border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;max-height:120px;background:var(--bg-surface,#fff);color:var(--text,#2b2926)}
.chat-typing{font-size:11px;color:var(--text-muted,#8a8580);padding:0 14px;height:16px}
.chat-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted,#8a8580);font-size:13px;text-align:center;padding:24px}
@media (pointer:coarse){ .chat-composer #chat-send{min-width:44px;min-height:44px} }
/* Hallazgo real reportado por el usuario (2026-07-17, con captura): el botón GLOBAL de Larry
   (.larry-fab, css/app.css — position:fixed, right:16px, 56px de ancho, SIEMPRE visible <768px en
   TODAS las pantallas, no solo dentro de un módulo) tapaba el botón "Enviar" del compositor de
   Chat — el compositor es una barra DOCKED (flujo normal al fondo de .chat-shell, no
   position:fixed), así que el sistema compartido native-materials.css (pensado para elementos
   FLOTANTES que deben elevarse POR ENCIMA de Larry) no aplica aquí: lo que hace falta es despejar
   HORIZONTALMENTE, no verticalmente. Usa --larry-fab-reserve-x (css/native-materials.css) — el
   compositor completo se recorre a la izquierda en el breakpoint donde Larry es visible, así
   "Enviar" nunca queda debajo de su botón. */
@media (max-width:768px){ .chat-composer{ padding-right:var(--larry-fab-reserve-x, calc(56px + 16px + 12px)) } }
@media (max-width:879px){ .chat-thread-back{display:inline-flex} }
/* Auditoría F4+F5 (2026-07-17, hallazgo HIGH, IOS-C6): <16px dispara auto-zoom de iOS Safari al
   enfocar. Solo en el breakpoint móvil (no cambia la tipografía de escritorio). */
@media (max-width:879px){ .chat-composer textarea, .chat-slash-in{ font-size:16px; } }
:root[data-os="android"] .chat-thread-back{min-width:48px;min-height:48px}
/* Auditoría F4+F5 (2026-07-17, hallazgo MEDIUM, IOS-C7): back solo-ícono viola el precedente
   Mail.app ("‹ Bandeja" con texto contextual) — mismo patrón exacto, ver css/mail.css:657/696. */
.chat-back-label{display:none}
:root[data-os="ios"] .chat-back-label{display:inline;margin-left:1px}
:root[data-os="ios"] .chat-thread-back{padding:0 10px 0 6px;gap:2px;width:auto}

/* ── F4.4: comandos "/" del composer, @menciones, tarjetas/imagenes en mensajes ── */
.chat-attach-btn{flex-shrink:0;min-width:36px;min-height:36px;border:1px solid var(--bg-border,#e6e2db);background:var(--bg-surface,#fff);color:var(--text,#2b2926);border-radius:10px;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (pointer:coarse){ .chat-attach-btn{min-width:44px;min-height:44px} }
:root[data-os="android"] .chat-attach-btn{min-width:48px;min-height:48px}

.chat-slash-menu{position:fixed;z-index:100070;width:260px;background:var(--bg-surface,#fff);border:1px solid var(--bg-border,#e6e2db);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden;font-family:inherit}
.chat-slash-in{width:100%;border:none;border-bottom:1px solid var(--bg-border,#e6e2db);padding:10px 12px;font-size:13px;font-family:inherit;color:var(--text,#2b2926);box-sizing:border-box;outline:none;background:transparent}
.chat-slash-list{max-height:280px;overflow:auto;padding:4px}
.chat-slash-it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text,#2b2926);cursor:pointer;white-space:nowrap;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.chat-slash-it:hover{background:var(--bg-raised,#f0ede8)}
.chat-slash-ic{width:22px;text-align:center;font-size:15px;flex-shrink:0}
.chat-slash-empty{padding:12px;font-size:12.5px;color:var(--text-muted,#8a8580);text-align:center}
.chat-gif-grid,.chat-emoji-grid{max-height:280px;overflow:auto;padding:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chat-gif-it{aspect-ratio:1;border-radius:8px;border:1px solid var(--bg-border,#e6e2db);background-size:cover;background-position:center;cursor:pointer;padding:0}
.chat-emoji-grid{grid-template-columns:repeat(6,1fr)}
.chat-emoji-it{font-size:20px;border:none;background:none;cursor:pointer;padding:6px;border-radius:8px}
.chat-emoji-it:hover{background:var(--bg-raised,#f0ede8)}

.chat-chip{display:inline-flex;align-items:center;background:var(--bg-raised,#f0ede8);border-radius:999px;padding:1px 9px;font-weight:600;cursor:pointer;font-size:inherit}
.chat-msg.mine .chat-chip{background:rgba(255,255,255,.28)}
.chat-chip-pop{position:fixed;z-index:100080;width:230px;background:var(--bg-surface,#fff);border:1px solid var(--bg-border,#e6e2db);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:10px;font-family:inherit}
.chat-chip-pop-hd{display:flex;align-items:center;gap:9px}
.chat-chip-pop-hd b{display:block;font-size:13px;color:var(--text,#2b2926)}
.chat-chip-pop-hd small{display:block;font-size:11.5px;color:var(--text-muted,#8a8580)}
.chat-chip-pop-av{width:34px;height:34px;border-radius:50%;background:var(--bg-raised,#f0ede8) center/cover;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-muted,#8a8580);flex-shrink:0}
.chat-chip-pop-lines{margin-top:8px;font-size:11.5px;color:var(--text-muted,#8a8580);display:flex;flex-direction:column;gap:2px}
.chat-chip-menu{position:fixed;z-index:100080;background:var(--bg-surface,#fff);border:1px solid var(--bg-border,#e6e2db);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden}
.chat-chip-menu button{display:block;width:100%;border:none;background:none;padding:9px 14px;font-size:13px;text-align:left;cursor:pointer;color:var(--text,#2b2926);font-family:inherit;white-space:nowrap}
.chat-chip-menu button:hover{background:var(--bg-raised,#f0ede8)}

.chat-img-msg{max-width:220px;max-height:220px;border-radius:10px;display:block}
.chat-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--bg-border,#e6e2db);border-radius:10px;overflow:hidden;max-width:260px;background:var(--bg-surface,#fff)}
.chat-msg.mine .chat-card{border-color:rgba(255,255,255,.4)}
.chat-card-img{height:120px;background-size:cover;background-position:center;background-color:var(--bg-raised,#f0ede8)}
.chat-card-body{padding:8px 10px}
.chat-card-title{display:block;font-size:12.5px;color:var(--text,#2b2926)}
.chat-msg.mine .chat-card-title{color:#fff}
.chat-card-desc{font-size:11.5px;color:var(--text-muted,#8a8580);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-card-site{font-size:10.5px;color:var(--text-muted,#8a8580);margin-top:4px;text-transform:uppercase;letter-spacing:.02em}
.chat-card-file{display:flex;align-items:center;gap:8px;padding:9px 12px}
.chat-card-file-ic{font-size:18px}
.chat-card-file-name{font-size:12.5px;color:var(--text,#2b2926);word-break:break-word}
.chat-msg.mine .chat-card-file-name{color:#fff}
.chat-card-screen{display:flex;align-items:center;gap:8px;padding:9px 12px;width:100%;border:1px solid var(--bg-border,#e6e2db);background:var(--bg-surface,#fff);cursor:pointer;font-family:inherit;text-align:left}
.chat-msg.mine .chat-card-screen{border-color:rgba(255,255,255,.4);background:transparent}
.chat-card-screen-ic{font-size:18px;flex-shrink:0}
.chat-card-screen:hover{background:var(--bg-raised,#f0ede8)}
.chat-msg.mine .chat-card-screen:hover{background:rgba(255,255,255,.12)}
.chat-sysmsg{text-align:center;font-size:11.5px;color:var(--text-muted,#8a8580);padding:4px 0}

/* ── F4.10: chip de fecha detectada (js/chat-task-suggest.js) — solo escritorio, ver el propio
   módulo (isMobile() ahí ya evita pintarlo en móvil; esta media query es la 2ª capa, mismo
   criterio de doble candado JS+CSS que el resto de Chat). ── */
.chat-date-suggest{ margin-top:-2px }
.chat-date-chip{ display:inline-flex; align-items:center; gap:4px; border:1px dashed var(--yt-orange,#EC6628); background:transparent; color:var(--yt-orange,#EC6628); border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit }
.chat-date-chip:hover, .chat-date-chip:focus-visible{ background:rgba(236,102,40,.1) }
.chat-date-chip:focus-visible{ outline:2px solid var(--yt-orange,#EC6628); outline-offset:2px }
.chat-date-chip.locked{ border-color:var(--text-muted,#8a8580); color:var(--text-muted,#8a8580) }
/* BL-1 (auditoría de cierre, CONFIRMADO): chip navegable "✅ Tarea creada" — línea sólida (no
   punteada) para distinguirlo visualmente del chip de sugerencia pendiente. */
.chat-date-chip.done{ border-style:solid; border-color:var(--ok,#22c55e); color:var(--ok,#22c55e) }
.chat-date-chip.done:hover, .chat-date-chip.done:focus-visible{ background:rgba(34,197,94,.1) }
.chat-date-pop{ position:fixed; z-index:100080; width:240px; background:var(--bg-surface,#fff); border:1px solid var(--bg-border,#e6e2db); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.22); padding:10px; font-family:inherit }
.chat-date-pop-hd{ font-size:12px; font-weight:700; color:var(--yt-orange,#EC6628); margin-bottom:6px }
.chat-date-pop-title{ font-size:13px; font-weight:600; color:var(--text,#2b2926) }
.chat-date-pop-desc{ font-size:11.5px; color:var(--text-muted,#8a8580); margin-top:3px }
.chat-date-pop-create{ margin-top:8px; width:100%; font-size:12.5px }
.chat-date-pop-gate{ font-size:12px; color:var(--text-muted,#8a8580); line-height:1.4 }
/* PCH-2 (auditoría de cierre, CONFIRMADO): mismo fix que css/chat-bubbles.css — combinado con
   pointer:coarse en vez de un OR suelto, para no ocultar en escritorio grande con touchscreen. */
@media (max-width:879px) and (pointer:coarse), (max-height:500px) and (pointer:coarse) and (max-width:960px){ .chat-date-suggest{ display:none } }