/* Hilo de conversación: escritorio y pantalla de chat móvil. */
.thread .backbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.thread .backbar button.back { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--brand); padding: 8px 12px; border-radius: 9px; background: var(--aqua-soft) }
.thread .who { font-weight: 700; font-size: 15px }
.thread .who small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono) }
.bubbles { display: flex; flex-direction: column; gap: 10px; max-width: 640px }
.thread .bubbles { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain }
.bub { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; animation: in .3s ease both }
.bub.customer { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px }
.bub.agent { align-self: flex-end; background: var(--brand-grad); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 18px -8px rgba(2, 132, 199, .55) }
.bub .who-s { font-size: 10px; font-family: var(--mono); opacity: .75; display: block; margin-bottom: 3px; letter-spacing: .05em }
.bub.note { align-self: center; background: var(--card-2); border: 1px dashed var(--line); color: var(--ink-3); font-size: 12px; padding: 7px 14px; border-radius: 999px; max-width: 92% }
.bub .tm { display: block; font-size: 9.5px; font-family: var(--mono); opacity: .6; margin-top: 4px; text-align: right }
.day-sep { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--ink-3) }
.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.day-sep span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap }
.bub.agent.owner { background: var(--marino); box-shadow: 0 6px 18px -8px rgba(10, 22, 40, .5) }
.bub .who-s.yo { opacity: .9; font-weight: 700 }
.reply { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 640px }
.reply-meta, .reply-compose { display: flex; gap: 8px; align-items: flex-end; min-width: 0 }
.reply-meta { flex-wrap: wrap }
.reply-compose { width: 100% }
.reply textarea { flex: 1; min-height: 42px; max-height: 140px; resize: vertical; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45 }
.reply textarea { min-width: 0 }
.reply textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--aqua-soft) }
.reply textarea:disabled { opacity: .6 }
.reply .btn { flex: none }
/* Pastilla, no cuadro: el rótulo es lo que hace que la función exista para
   quien no la conoce. Solo la usa #th-draft, así que el ancho puede crecer con
   el texto sin afectar a nada más. La caja de escribir es `flex: 1` y cede
   exactamente lo que ocupa la palabra. */
.btn-icon {
  flex: none; height: 42px; padding: 0 11px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; line-height: 1; white-space: nowrap;
  background: var(--aqua-soft); border: 1px solid transparent; transition: all .15s;
}
.btn-icon .lbl { font-size: 12.5px; font-weight: 600; color: var(--brand) }
.btn-icon:hover { border-color: var(--brand) }
.btn-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.btn-icon[disabled] { opacity: .5; cursor: not-allowed }
.attach-button { width: 42px; padding: 0; justify-content: center; color: var(--brand) }
.attach-selected { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 7px 9px; border: 1px solid var(--aqua-25); border-radius: var(--r-sm); background: var(--aqua-soft); color: var(--ink-2) }
.attach-selected[hidden] { display: none }
.attach-selected > .ico { width: 17px; height: 17px; flex: none; color: var(--brand) }
.attach-copy { display: flex; flex-direction: column; min-width: 0 }
.attach-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px }
.attach-copy small { color: var(--ink-3); font: 10.5px var(--mono) }
.attach-selected button { width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-2); font-size: 20px; line-height: 1 }
.attach-selected button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.thread-live { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.attach-sheet { width: min(92vw, 480px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column }
.attach-choices, .attach-library { display: grid; gap: 9px; margin-top: 14px }
.attach-library { min-height: 0; max-height: min(55dvh, 420px); overflow-y: auto; overscroll-behavior: contain }
.attach-choice, .attach-source { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); color: var(--ink); text-align: left }
.attach-choice:hover, .attach-source:hover { border-color: var(--brand); background: var(--aqua-soft) }
.attach-choice:focus-visible, .attach-source:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.attach-choice > .ico { width: 21px; height: 21px; flex: none; color: var(--brand) }
.attach-choice span, .attach-source span:first-child { min-width: 0; display: flex; flex: 1; flex-direction: column }
.attach-choice b, .attach-source b { font-size: 13px }
.attach-choice small, .attach-source small { margin-top: 3px; overflow: hidden; color: var(--ink-3); font: 10.5px var(--mono); text-overflow: ellipsis; white-space: nowrap }
.attach-library > p { margin: 8px 0; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 12px; line-height: 1.5; text-align: center }
.thread .th-pause { margin-left: auto; flex: none; cursor: pointer }
.thread-actions { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; flex-wrap: wrap }
.thread-actions:empty { display: none }
.thread-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; max-width: 640px }
.thread-note .nota-corta { display: none }

/* Por qué te espera este cliente, encima del botón de "ya lo atendí": el motivo
   lo guarda el backend en cada escalación y el panel no lo mostraba, así que el
   dueño abría el chat y tenía que leerse el hilo entero para deducirlo. */
.th-motivo { font-size: 13px; color: var(--warn); margin: 0 0 10px; line-height: 1.5 }
.th-motivo b { font-weight: 700 }
.th-motivo__aviso { color: var(--bad); font-weight: 600 }

/* El reloj de la ventana de WhatsApp. Solo aparece cuando aprieta (quedan menos
   de 2 h) o cuando ya se cerró: un contador permanente sería ruido de fondo. */
.th-ventana { display: block; font-weight: 700; margin-bottom: 4px }
.th-ventana.urgente { color: var(--warn) }
.th-ventana.cerrada { color: var(--bad) }

@media (max-width: 820px) {
  /* Solo .bnav se oculta aquí: .install-bar es el aviso de "hay versión
     nueva", y ocultarlo justo en la pantalla donde el dueño más vive lo dejaba
     mudo — nadie llegaba a verlo (lección de esta ronda). */
  body.hilo-abierto .bnav { display: none }
  body.hilo-abierto { overflow: hidden }
  #conv-thread[hidden] { display: none }
  /* `top: var(--vvtop)` en vez de `inset: 0`: en iOS, al abrir el teclado, el
     navegador NO encoge el layout viewport (al que se ancla un `fixed`) —
     desplaza el visual viewport hacia arriba. Sin este `top`, el hilo se
     encogía en altura pero seguía clavado en 0, y la parte que dejaba de
     coincidir con lo visible se veía como cabecera cortada y un hueco negro
     debajo. `--vvtop` lo publica thread-viewport.js desde `visualViewport.
     offsetTop`; sin JS (o teclado cerrado) cae a 0, idéntico a `inset:0`.
     El relleno inferior descuenta `--vvbottom` (lo que el teclado tapa): con
     el teclado abierto el borde inferior del hilo es el teclado, no el
     indicador de inicio, y esos 34px de safe-area eran un hueco vacío entre
     la caja y las teclas. Sin teclado --vvbottom es 0 y el relleno se queda. */
  #conv-thread { position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); z-index: 60; height: var(--vvh, 100dvh); display: flex; flex-direction: column; background: var(--bg); padding: env(safe-area-inset-top) 14px calc(10px + max(0px, env(safe-area-inset-bottom) - var(--vvbottom, 0px))) }
  #conv-thread .backbar { flex: none; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line) }
  #conv-thread .who { min-width: 0; overflow: hidden }
  #conv-thread .who, #conv-thread .who small { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
  #conv-thread .th-pause { font-size: 11.5px; padding: 6px 10px }
  #conv-thread .bubbles { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: 12px 0; max-width: none }
  #conv-thread .bubbles > :first-child { margin-top: auto }
  #conv-thread .thread-actions { order: 1; flex: none; margin: 0; padding: 0 0 8px; max-width: none }
  #conv-thread .thread-actions .btn { flex: 1; padding: 10px 14px; font-size: 13px }
  #conv-thread .reply { order: 2; flex: none; margin: 0; max-width: none }
  /* En el teléfono el botón sube a su propia línea. Con rótulo se comía 91px de
     una casilla que ya era estrecha (133px de 375), y esta pantalla es
     justamente donde el dueño escribe. Arriba conserva su texto entero y la
     casilla recupera todo el ancho. */
  #conv-thread #th-draft { height: 34px; font-size: 14px }
  #conv-thread #th-draft .lbl { font-size: 12px }
  #conv-thread .reply-meta:empty { display: none }
  #conv-thread .attach-selected { flex: 1 1 180px }
  #conv-thread .reply textarea { resize: none; max-height: 110px; scrollbar-width: none }
  #conv-thread .reply textarea::-webkit-scrollbar { display: none }
  #conv-thread .thread-note { order: 3; flex: none; margin: 6px 0 0; max-width: none; font-size: 11px }
  /* La papelera (#354) va al PIE también en el teléfono. `.thread-actions {
     order: 1 }` y `.btn { flex: 1 }` se escribieron para «Ya lo atendí» y
     atrapaban también a #th-papelera-acciones: «Borrar» subía encima de la caja
     a todo lo ancho, pegado a donde se escribe — justo lo que el #354 quiso
     evitar. Con order 3 el orden del DOM manda: aviso, nota de la papelera,
     botón; y a su ancho. El margen va en el botón y no en el contenedor para
     que un botón oculto (demo, servidor viejo) no deje 8px de fantasma. */
  #conv-thread #th-papelera-acciones { order: 3; padding: 0 }
  #conv-thread #th-papelera-acciones .btn { flex: none; margin-top: 8px }
  /* Mientras el dueño escribe (la CAJA con foco = teclado arriba) la fila
     destructiva se retira, como el botón de la Torre en el #366: abajo solo
     queda lo que compite con el teclado. La señal es la caja y no
     .reply:focus-within: el clip y «Enviar» también viven en .reply, y al
     cerrar el diálogo de adjuntar el foco vuelve al clip SIN teclado. */
  #conv-thread .reply:has(#th-reply-text:focus) ~ #th-papelera-nota,
  #conv-thread .reply:has(#th-reply-text:focus) ~ #th-papelera-acciones { display: none }
  /* Los avisos de instalar/actualizar entran al flujo del hilo: siguen
     visibles, pero reducen las burbujas en vez de tapar archivo y compositor. */
  body.hilo-abierto #conv-thread > .system-bars { order: 4; display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 8px }
  body.hilo-abierto #system-bars .install-bar { position: static; width: 100%; padding: 9px 11px; border-radius: var(--r-sm); font-size: 11.5px }
  body.hilo-abierto #system-bars .install-bar > span { flex-basis: 150px }
  body.hilo-abierto #system-bars .install-bar .btn { padding: 8px 11px; font-size: 11.5px }
  #conv-thread .thread-note .nota-larga { display: none }
  #conv-thread .thread-note .nota-corta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  #conv-thread .reply[hidden] ~ .thread-note .nota-larga { display: block; white-space: normal }
  #conv-thread .reply[hidden] ~ .thread-note .nota-corta { display: none }
}

/* Adjuntos del hilo (#134): la foto ocupa su burbuja; audio y documentos son
   chips que se activan al toque. En burbujas del agente/dueño (fondo oscuro)
   el chip se aclara para no desaparecer. */
.bub .adj-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; cursor: zoom-in }
.bub .adj-audio { display: block; max-width: 100%; width: 240px; margin-top: 2px }
.bub .adj { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); background: var(--card-2); color: inherit; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left }
.bub .adj-chip { cursor: default }
.bub .adj-carga { cursor: progress }
.bub.agent .adj { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45) }
.bub .adj-txt { margin-top: 6px }
.bub .delivery { display: block; margin-top: 5px; font: 9.5px var(--mono); text-align: right; opacity: .78 }
.bub .delivery.failed { color: #FFD1D1; opacity: 1; max-width: 34ch; margin-left: auto }
.bub.customer .delivery { display: none }