/* ============================================================================
   Chat de Laia — portado tal cual del prototipo aprobado de Departamentos IA.

   Lo único que se tradujo son las VARIABLES. El prototipo trae su propia paleta
   (--accent, --ink-2, --surface…) y el ERP dibuja con MudBlazor, así que acá se
   declaran esas variables sobre los tokens de MudBlazor: el panel se ve idéntico
   al aprobado y además sigue el tema del ERP —claro, oscuro y el color de la
   empresa— sin una segunda hoja de estilos.

   Van sobre .chat-fab y .chat-panel y no sobre :root a propósito: nombres como
   --border o --surface son demasiado genéricos para soltarlos al documento
   entero, donde chocarían con cualquier otra hoja que use los mismos.
   ============================================================================ */
.chat-fab, .chat-panel {
  --accent: var(--mud-palette-primary);
  --accent-strong: var(--mud-palette-primary-darken);
  --accent-soft: var(--mud-palette-primary-hover);
  --accent-line: var(--mud-palette-lines-inputs);
  --on-accent: var(--mud-palette-primary-text);
  --surface: var(--mud-palette-surface);
  --bg: var(--mud-palette-background-gray);
  --border: var(--mud-palette-lines-default);
  --border-strong: var(--mud-palette-lines-inputs);
  --ink: var(--mud-palette-text-primary);
  --ink-2: var(--mud-palette-text-secondary);
  --ink-3: var(--mud-palette-text-disabled);
  --shadow: 0 1px 3px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.18);
  --font-display: var(--mud-typography-h6-family, inherit);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.chat-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;border:none;
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(14,124,102,.32),var(--shadow);z-index:45;transition:transform .15s,background .15s}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab.abierto{background:var(--ink-2);color:var(--surface)}
.chat-panel{position:fixed;right:24px;bottom:88px;width:420px;max-width:calc(100vw - 32px);
  height:min(620px,calc(100vh - 128px));background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);z-index:44;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:opacity .18s,transform .18s}
.chat-panel:not(.abierto){visibility:hidden} /* además de aria-hidden: lo saca del orden de tabulación */
.chat-panel.abierto{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
  background:var(--accent-soft)}
.chat-av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-name{font-weight:700;font-size:13.5px;font-family:var(--font-display);letter-spacing:-.01em}
.chat-status{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chat-ico{background:none;border:none;color:var(--ink-2);padding:6px;border-radius:8px;line-height:0}
.chat-ico:hover{background:var(--surface);color:var(--ink)}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;background:var(--bg)}
.chat-empty{margin:auto 0;padding:4px 2px}
.chat-empty h5{margin:0 0 3px;font-size:14px;font-weight:700;font-family:var(--font-display)}
.chat-empty p{margin:0 0 12px;font-size:12.5px;color:var(--ink-2)}
.sug{display:block;width:100%;text-align:left;border:1px solid var(--border);background:var(--surface);
  border-radius:10px;padding:8px 11px;font-size:12.5px;margin-bottom:7px;color:var(--ink-2)}
.sug:hover{border-color:var(--accent-line);color:var(--ink)}
.msg{display:flex;gap:8px;align-items:flex-start}
.msg.user{justify-content:flex-end}
.msg-av{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.msg-col{max-width:80%;min-width:0}
.bub{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.55;border:1px solid var(--border);
  background:var(--surface);border-bottom-left-radius:4px;overflow-wrap:anywhere}
.msg.user .bub{background:var(--accent);color:var(--on-accent);border-color:transparent;
  border-bottom-left-radius:12px;border-bottom-right-radius:4px}
.bub p{margin:0 0 7px}
.bub p:last-child{margin:0}
.bub ul{margin:5px 0;padding-left:17px}
.bub li{margin:2px 0}
.bub code{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.bub em{color:var(--ink-2)}
.msg-meta{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);margin-top:4px;
  display:flex;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.msg-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.msg-act{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-strong);
  border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:600}
.msg-act:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.typing{display:flex;gap:4px;padding:5px 3px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .typing span{animation:none;opacity:.5} .chat-panel{transition:none} }
.chat-foot{border-top:1px solid var(--border);padding:10px 12px;background:var(--surface)}
.chat-row{display:flex;gap:8px;align-items:flex-end}
/* El COLOR va explícito. Sin él, la caja hereda el negro por omisión del navegador
   y en tema oscuro quedaba texto negro sobre fondo oscuro: se escribía a ciegas.
   El fondo sí seguía el tema, así que el defecto sólo aparecía de noche. */
.chat-row textarea{flex:1;min-width:0;resize:none;max-height:110px;overflow-y:auto;
  border:1px solid var(--border-strong);border-radius:10px;padding:8px 10px;
  background:var(--surface);color:var(--ink);
  font-size:13px;line-height:1.45;font-family:inherit}
.chat-row textarea::placeholder{color:var(--ink-3)}
.chat-row textarea:focus{outline:none;border-color:var(--accent)}
.chat-send{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send:disabled{opacity:.45}
.chat-hint{font-size:10.5px;color:var(--ink-3);margin-top:7px;display:flex;justify-content:space-between;
  gap:8px;flex-wrap:wrap;align-items:center}
.chat-deep{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--ink-2);font-weight:600}
.chat-deep input{margin:0;accent-color:var(--accent)}


/* La sombra del botón flotante venía con el verde del prototipo escrito a mano.
   Se deja neutra para que no pelee con el color de cada empresa. */
.chat-fab { box-shadow: 0 6px 22px rgba(0,0,0,.28), var(--shadow); }

/* En el teléfono el panel ocupa el ancho disponible: con 420px fijos quedaba
   cortado, y el ERP ahora se abre desde el celular por la VPN. */
@media (max-width: 520px) {
  .chat-panel { right: 12px; left: 12px; width: auto; bottom: 78px; }
  .chat-fab { right: 16px; bottom: 16px; }
}

/* ── Historial de conversaciones ─────────────────────────────────────────────
   Capa superpuesta DENTRO del panel, no barra lateral: el panel mide 420 px y una
   lateral dejaría el hilo en 280, con burbujas al 80% — ilegible. El overflow
   hidden del panel juega a favor de la capa absoluta. Sólo se usan las variables
   ya declaradas arriba: inventar una nueva acá la deja sin valor. */
.chat-hist{position:absolute;left:0;right:0;top:57px;bottom:0;z-index:2;
  background:var(--surface);overflow-y:auto;overflow-x:hidden;padding:6px 0}
.chat-hist-vacio{padding:28px 22px;text-align:center;font-size:13px;line-height:1.5;
  color:var(--ink-2)}
.chat-hist-item{display:flex;align-items:center;gap:4px;padding:0 8px 0 0;
  /* Sin min-width:0 una fila flex NO se encoge bajo el ancho de su contenido —el valor por
     omisión es «auto», no cero— y una glosa larga estira la lista entera hacia afuera del panel.
     Es lo que sacaba de pantalla la confirmación «¿Borrar «mándame la liquidación…»?». */
  min-width:0;
  /* Borde izquierdo transparente para marcar la fila activa sin que el texto salte. */
  border-left:3px solid transparent}
.chat-hist-item:hover{background:var(--accent-soft)}
.chat-hist-item.es-actual{border-left-color:var(--accent)}
.chat-hist-tit{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:10px 8px 10px 11px;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit}
.chat-hist-tit>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px}
.chat-hist-fecha{font-size:11px;color:var(--ink-2)}
.chat-hist-del{flex:none;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--ink-2);opacity:0}
.chat-hist-item:hover .chat-hist-del{opacity:1}
.chat-hist-del:hover{background:var(--accent-line)}
.chat-hist-confirm{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  padding:10px 11px;font-size:12px}
.chat-hist-confirm>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.chat-hist-confirm>input{flex:1;min-width:0}
.chat-hist-confirm>button{flex:none;background:none;border:0;cursor:pointer;font:inherit;
  font-weight:600;padding:2px 6px;border-radius:5px;color:var(--accent)}
.chat-hist-confirm>button:disabled{opacity:.5;cursor:default}

/* ═══════════════════════════════════════════════════════════════════════════
   La misma conversación, a pantalla completa
   ───────────────────────────────────────────────────────────────────────────
   El marcado es EL MISMO que el del panel flotante: acá sólo se recoloca. Por
   eso la lista de conversaciones deja de ser una capa superpuesta y pasa a ser
   una columna, sin cambiar una línea de Razor — a 420 px una barra lateral
   dejaba el hilo en 280 e ilegible, pero con la página entera sobra el ancho.
   ═══════════════════════════════════════════════════════════════════════════ */

.chat-panel.pantalla{
  position:static;right:auto;bottom:auto;width:auto;max-width:none;
  height:calc(100vh - 132px);min-height:420px;
  opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:none;
  display:grid;grid-template-columns:288px 1fr;grid-template-rows:auto 1fr auto;
  box-shadow:none;
}

.chat-panel.pantalla > .chat-head{grid-column:2;grid-row:1}
.chat-panel.pantalla > .chat-body{grid-column:2;grid-row:2}
.chat-panel.pantalla > .chat-foot{grid-column:2;grid-row:3}

.chat-panel.pantalla > .chat-hist{
  position:static;grid-column:1;grid-row:1 / 4;
  border-right:1px solid var(--border);border-top:0;
  display:flex;flex-direction:column;overflow-y:auto;
}

/* El consumo va al pie de la columna de conversaciones y se queda pegado abajo:
   es un dato de referencia, no una fila más de la lista. */
.chat-gasto{
  margin-top:auto;flex:none;padding:12px 14px;border-top:1px solid var(--border);
  background:var(--surface);font-size:12px;color:var(--ink-2);
}
.chat-gasto-fila{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.chat-gasto-tit{font-weight:600;color:var(--ink)}
.chat-gasto-barra{height:5px;border-radius:3px;background:var(--accent-line);margin:7px 0 6px;overflow:hidden}
.chat-gasto-barra>span{display:block;height:100%;background:var(--accent);border-radius:3px}
.chat-gasto-barra.alto>span{background:#d97706}
.chat-gasto-barra.tope>span{background:#dc2626}
.chat-gasto-pie{display:flex;justify-content:space-between;gap:8px;font-size:11px}

@media (max-width: 900px){
  .chat-panel.pantalla{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;height:calc(100vh - 120px)}
  .chat-panel.pantalla > .chat-head{grid-column:1;grid-row:1}
  .chat-panel.pantalla > .chat-hist{grid-column:1;grid-row:2;max-height:180px;
    border-right:0;border-bottom:1px solid var(--border)}
  .chat-panel.pantalla > .chat-body{grid-column:1;grid-row:3}
  .chat-panel.pantalla > .chat-foot{grid-column:1;grid-row:4}
  .chat-gasto{margin-top:0}
}

/* ── Cabecera de la pantalla completa: el modelo se elige, no se deduce ── */
.chat-modelo{display:flex;align-items:center;gap:7px;flex:none}
.chat-modelo-rot{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.chat-modelo select{font:inherit;font-size:12px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:5px 8px;cursor:pointer;max-width:220px}
.chat-modelo select:disabled{opacity:.55;cursor:default}

/* ── Las dos listas: a la vista y archivadas ── */
.chat-hist-modo{flex:none;display:flex;gap:4px;padding:10px 12px 8px;border-bottom:1px solid var(--border)}
.chat-hist-modo>button{flex:1;background:none;border:0;cursor:pointer;font:inherit;font-size:12px;
  color:var(--ink-2);padding:6px 8px;border-radius:7px}
.chat-hist-modo>button:hover{background:var(--accent-soft)}
.chat-hist-modo>button.es-actual{background:var(--accent-soft);color:var(--ink);font-weight:600}

/* El renombrado en línea reusa la caja de la confirmación de borrado. */
.chat-hist-input{flex:1;min-width:0;font:inherit;font-size:12px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 7px}

/* ── El corte de la compactación ──
   Los mensajes resumidos NO desaparecen: se pliegan detrás de este divisor. Si se
   borraran de la vista, la persona creería que el chat le perdió la conversación. */
.chat-corte{margin:6px 0}
.chat-corte-linea{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2)}
.chat-corte-linea>span{flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-corte-linea::before,.chat-corte-linea::after{content:"";height:1px;background:var(--border);flex:0 0 12px}
.chat-corte-linea>button{background:none;border:0;cursor:pointer;font:inherit;font-size:11px;
  color:var(--accent);padding:2px 4px;border-radius:5px;flex:none}
.chat-corte-linea>button:hover{background:var(--accent-soft)}
.chat-corte-linea>button:disabled{opacity:.5;cursor:default}
.chat-corte-texto{margin-top:8px;padding:10px 12px;border:1px dashed var(--border);
  border-radius:10px;font-size:12px;line-height:1.5;color:var(--ink-2);background:var(--surface)}

/* ── Adjuntos ── */
.chat-clips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chat-clip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;
  padding:4px 6px 4px 10px;font-size:11px;color:var(--ink)}
/* El nombre es un boton porque se puede abrir, pero no tiene que PARECER un boton: hereda la
   tipografia del chip y solo se subraya al pasar por encima. */
.chat-clip-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
  font:inherit;text-align:left;flex:0 1 auto}
.chat-clip-nom:hover{text-decoration:underline}
.chat-clip-nom:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:3px}
.chat-clip-peso{color:var(--ink-2);flex:none}
.chat-clip>svg{flex:none;color:var(--ink-2)}
.chat-clip>button:not(.chat-clip-nom){background:none;border:0;cursor:pointer;color:var(--ink-2);
  display:flex;align-items:center;padding:2px;border-radius:50%;flex:none}
.chat-clip>button:not(.chat-clip-nom):hover{background:var(--accent-line);color:var(--ink)}
.chat-clip-error{font-size:11px;color:#dc2626;margin-bottom:8px}

/* El input de archivo real queda invisible encima del icono: es la forma de que el clip
   se vea como un botón sin perder el selector nativo del navegador. */
.chat-clip-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;border-radius:9px;cursor:pointer;color:var(--ink-2)}
.chat-clip-btn:hover{background:var(--accent-soft);color:var(--ink)}
.chat-clip-btn.apagado{opacity:.4;cursor:default}
.chat-clip-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:inherit;width:100%;height:100%}

.msg-clips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;justify-content:flex-end}
.msg-clip{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px}

/* ═══════════════════════════════════════════════════════════════════════════
   La lista de conversaciones, legible
   ───────────────────────────────────────────────────────────────────────────
   Dos defectos que se veían juntos y tenían causas distintas:

   1) Los títulos salían CENTRADOS y recortados por los dos lados, cada fila
      perdiendo una cantidad distinta según su largo. Se alinea a la izquierda
      de forma explícita en cada nivel —la fila, el botón y sus dos líneas—
      porque basta que uno de ellos herede el centrado de otra hoja de estilo
      para que vuelva a pasar.

   2) Las filas se APLASTABAN. Al pasar la barra a contenedor flexible vertical
      para pegar el consumo abajo, cada fila quedó encogible: en vez de
      aparecer la barra de desplazamiento, treinta conversaciones se repartían
      el alto disponible. Con «flex:none» vuelven a medir lo suyo y la lista se
      desplaza.

   Y la letra era demasiado tenue para leerla de un vistazo, que es lo único
   que se le pide a esta lista.
   ═══════════════════════════════════════════════════════════════════════════ */

.chat-hist-item{
  flex:none;                 /* no se encoge: la lista se desplaza, no se aplasta */
  justify-content:flex-start;
  text-align:left;
}

.chat-hist-tit{
  align-items:flex-start;    /* las dos líneas pegadas a la izquierda */
  text-align:left;
}

.chat-hist-tit>span{
  display:block;
  width:100%;
  text-align:left;
}

/* El título es lo que se lee para encontrar una conversación: va con el color
   de texto principal y algo de peso, no con el secundario. */
.chat-hist-tit>span:first-child{
  color:var(--ink);
  font-weight:500;
  line-height:1.35;
}

.chat-hist-fecha{
  color:var(--ink-2);
  font-size:11px;
  line-height:1.3;
}

/* La conversación abierta se distingue por el fondo, no sólo por una línea de
   3 px que en una lista larga no se ve. */
.chat-hist-item.es-actual{background:var(--accent-soft)}
.chat-hist-item.es-actual .chat-hist-tit>span:first-child{font-weight:600}

/* Los botones de la fila estaban invisibles hasta pasar el ratón por encima.
   En la pantalla completa se dejan tenues pero presentes: un botón que sólo
   existe al acertarle con el cursor no se descubre nunca. */
.chat-panel.pantalla .chat-hist-del{opacity:.45}
.chat-panel.pantalla .chat-hist-item:hover .chat-hist-del{opacity:1}

.chat-hist-modo{flex:none}