/* ─────────────────────────────────────────────────────────────────────────────
   ASISTENTE — botón flotante y panel de chat

   Está en todas las pantallas a propósito: el operador pregunta desde donde esté,
   no navega hasta el agente. La mecánica y las clases están calcadas del panel de
   CodexER, con la paleta de Domus.

   ⚠️ Deuda conocida: estos tres componentes (flotante, panel, texto con links) son
   los mismos que los de CodexER con otro prefijo. Cuando haya un tercer producto
   con agente conversacional, hay que extraerlos a una RCL compartida en vez de
   copiarlos otra vez — es exactamente la lección que el monorepo ya pagó con el
   motor del agente y con el de documentos.
   ───────────────────────────────────────────────────────────────────────────── */

.dm-agente-fab-wrap {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.dm-agente-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--dm-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(45, 139, 94, 0.38);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.dm-agente-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(45, 139, 94, 0.45);
}

.dm-agente-fab--open { background: var(--dm-dark-3); }

.dm-agente-fab-icon { font-size: 1.4rem; line-height: 1; }

/* El panel arranca colapsado y no ocupa lugar: sin esto tapa la pantalla apenas
   se carga cualquier página. */
.dm-agente-flyout {
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .18s ease;
}

.dm-agente-flyout--open {
    width: min(420px, calc(100vw - 44px));
    height: min(560px, calc(100vh - 130px));
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: var(--dm-bg-card);
    border: 1px solid var(--dm-border);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.dm-agente-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--dm-dark-1);
    color: var(--dm-text-light);
}

.dm-agente-flyout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
}

.dm-agente-star { color: var(--dm-primary); }

.dm-agente-empresa {
    font-size: .72rem;
    font-weight: 400;
    color: var(--dm-text-muted);
}

.dm-agente-flyout-actions { display: flex; gap: 4px; }

.dm-agente-flyout-btn {
    background: transparent;
    border: 0;
    color: var(--dm-text-muted);
    cursor: pointer;
    font-size: .95rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.dm-agente-flyout-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.dm-agente-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.dm-agente-chat {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ⚠️ El atributo `hidden` del navegador vale `display:none`, pero es una regla de UA y CUALQUIER
   `display` explicito la pisa. Sin esto, poner hidden en el chat no ocultaba nada: al abrir las
   charlas anteriores se veian igual las sugerencias abajo de la lista. Verificado en Azure el
   06/09/2026. Vale para cualquier elemento con display propio al que se le ponga hidden. */
.dm-agente-chat[hidden],
.dm-agente-input-row[hidden] { display: none !important; }

.dm-agente-hint {
    font-size: .82rem;
    color: var(--dm-text-muted);
    line-height: 1.5;
}

.dm-agente-hint ul { margin: 6px 0 0; padding-left: 18px; }
.dm-agente-hint li { margin-bottom: 3px; }

.dm-agente-msg {
    max-width: 88%;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: .86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.dm-agente-msg--user {
    align-self: flex-end;
    background: var(--dm-primary);
    color: #fff;
}

.dm-agente-msg--assistant {
    align-self: flex-start;
    background: var(--dm-bg-content);
    border: 1px solid var(--dm-border);
    color: var(--dm-dark-1);
}

.dm-agente-pensando { color: var(--dm-text-muted); font-style: italic; }

/* De dónde salió el número: es lo que separa una respuesta verificable de una
   afirmación. Va chico, pero va. */
.dm-agente-fuentes {
    margin-top: 6px;
    font-size: .68rem;
    color: var(--dm-text-muted);
    font-family: ui-monospace, monospace;
}

.dm-agente-link { color: var(--dm-accent); text-decoration: underline; }
/* ⚠️ Es un <a>: en app.css, `a:hover { color: var(--dm-primary-hover) }`
   (especificidad 0,1,1) le gana a `.dm-agente-link` (0,1,0), y el link que el
   asistente ofrece pierde su color de acento al pasar el mouse. Misma familia
   que los links del portal del ocupante. */
.dm-agente-link:hover { color: var(--dm-accent); }

.dm-agente-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--dm-border);
    background: var(--dm-bg-card);
}

.dm-agente-textarea {
    flex: 1;
    resize: none;
    max-height: 120px;
    padding: 8px 10px;
    border: 1px solid var(--dm-border);
    border-radius: 8px;
    font-size: .86rem;
    font-family: inherit;
}

.dm-agente-textarea:focus {
    outline: none;
    border-color: var(--dm-primary);
}

.dm-agente-send {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--dm-primary);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.dm-agente-send:disabled { background: var(--dm-border); color: var(--dm-text-muted); cursor: default; }

/* ── La voz (estilo del agente de Rakuxt) ──
   Micrófono a la izquierda del texto, parlante a la derecha, y arriba del input una línea
   que dice si el micrófono está abierto. Todo con el mismo alto que el botón de enviar. */
.dm-agente-mic,
.dm-agente-voz-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--dm-border);
    border-radius: 8px;
    background: var(--dm-bg-content);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.dm-agente-mic:hover,
.dm-agente-voz-toggle:hover { border-color: var(--dm-primary); }

.dm-agente-mic:disabled { opacity: .5; cursor: default; }

/* Manos libres activo: el botón pasa a ser el ⏹ y se ve encendido. */
.dm-agente-mic--on {
    background: var(--dm-primary);
    border-color: var(--dm-primary);
    color: #fff;
}

/* Silenciado se ve apagado; leyendo, normal. La ausencia sola no se nota. */
.dm-agente-voz-toggle { opacity: .55; }
.dm-agente-voz-toggle--on { opacity: 1; }

.dm-agente-voz-estado {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 0;
    font-size: .76rem;
    color: var(--dm-text-muted);
}

.dm-agente-voz-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dm-warning, #d97706);
}

.dm-agente-voz-punto--escucha {
    background: var(--dm-primary);
    animation: dm-agente-latido 1.2s ease-in-out infinite;
}

@keyframes dm-agente-latido {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: .55; }
}

.dm-agente-hint-voz {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--dm-border);
}

/* "Cancelar" al lado de la frase de espera, con el contador de segundos como señal de vida. */
.dm-agente-pensando {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dm-agente-cancelar {
    border: 1px solid var(--dm-border);
    background: transparent;
    color: var(--dm-text-muted);
    border-radius: 6px;
    font-size: .72rem;
    font-style: normal;
    padding: 2px 8px;
    cursor: pointer;
}

.dm-agente-cancelar:hover { color: var(--dm-danger, #b91c1c); border-color: var(--dm-danger, #b91c1c); }

/* Al imprimir un contrato o una rendición, el asistente no va en la hoja. */
@media print {
    .dm-agente-fab-wrap { display: none !important; }
}

/* ── La charla guardada: barra de herramientas e historial (06/09/2026) ───────────────────────
   Cerrar el panel para mirar la ficha que el propio agente linkeo y volver a abrirlo era empezar
   de cero. Ahora la charla vive en la base y esta barra es lo que deja cambiar de tema sin perder
   lo hablado. */

.dm-agente-barra {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--dm-agente-borde, #e2e8f0);
    background: var(--dm-agente-barra-bg, #f8fafc);
    flex: none;
}

/* El titulo se come el espacio sobrante y se corta: es la primera pregunta de la charla y puede
   ser larga. Sin el ellipsis empuja los botones fuera del panel. */
.dm-agente-barra-titulo {
    flex: 1;
    min-width: 0;
    font-size: .78rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-agente-barra-btn {
    flex: none;
    padding: .2rem .5rem;
    font-size: .75rem;
    border: 1px solid var(--dm-agente-borde, #e2e8f0);
    border-radius: 5px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    line-height: 1.4;
}

.dm-agente-barra-btn:hover:not(:disabled) { border-color: #7C6BC4; color: #7C6BC4; }
.dm-agente-barra-btn:disabled { opacity: .45; cursor: default; }

/* El aviso del tope y el de charla cerrada comparten estilo: los dos dicen "ojo con esto" sin
   ser un error. */
.dm-agente-tope {
    flex: none;
    padding: .45rem .7rem;
    font-size: .78rem;
    line-height: 1.4;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    color: #92400e;
}

.dm-agente-historial {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

.dm-agente-historial-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .6rem;
    margin-bottom: .35rem;
    border: 1px solid var(--dm-agente-borde, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.dm-agente-historial-item:hover { border-color: #7C6BC4; }
.dm-agente-historial-item--activa { border-left: 3px solid #7C6BC4; }

.dm-agente-historial-titulo {
    display: block;
    font-size: .82rem;
    color: #1e293b;
    line-height: 1.35;
    /* Dos renglones y corta: el titulo es la primera pregunta y puede ser un parrafo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dm-agente-historial-meta {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    color: #94a3b8;
}