/* ═══════════════════════════════════════════════════════════════
   Asistente del portal (SEG-312) — the client's chat with the assistant and its hand-off to a person.
   Only theme tokens (light and dark): no fixed colour here. Mobile first: the thread and the input take the whole width at 375 px.
   ═══════════════════════════════════════════════════════════════ */

.pa-panel { display: grid; gap: var(--space-3); }
.pa-note { margin: 0; font-size: 13px; color: var(--gray-500); display: flex; gap: var(--space-2); align-items: flex-start; }
.pa-note i { color: var(--gold-500); }
.pa-empty { padding: var(--space-6); text-align: center; color: var(--gray-500); font-size: 13px; }

.pa-thread { display: flex; flex-direction: column; gap: var(--space-2); min-height: 180px; max-height: 60vh; overflow-y: auto;
    padding: var(--space-2); border: 1px solid var(--gray-100); border-radius: var(--r-md); background: var(--white); }
.pa-msg { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); border: 1px solid var(--gray-100); display: grid; gap: var(--space-1); }
.pa-msg--client { align-self: flex-end; background: var(--blue-50); }
.pa-msg--assistant { align-self: flex-start; background: var(--white); }
.pa-msg__who { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.pa-msg__text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--gray-700); font-size: 14px; line-height: 1.45; }
.pa-msg__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pa-link { font-size: 13px; font-weight: 600; color: var(--blue-700); text-decoration: none; display: inline-flex; gap: var(--space-1); align-items: center; }
.pa-link:hover { text-decoration: underline; }

.pa-progress { align-self: flex-start; display: inline-flex; gap: var(--space-2); align-items: center; font-size: 13px; color: var(--gray-500);
    padding: var(--space-2) var(--space-3); border: 1px dashed var(--gray-100); border-radius: var(--r-md); }
.pa-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); animation: pa-pulse 1.2s ease-in-out infinite; }
@keyframes pa-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-progress__dot { animation: none; } }

.pa-input-row { display: flex; gap: var(--space-2); }
.pa-input { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-100); border-radius: var(--r-md);
    background: var(--white); color: var(--gray-700); font: inherit; font-size: 16px; }
.pa-input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.pa-send { flex: none; width: 44px; height: 44px; border: none; border-radius: var(--r-md); background: var(--blue-700); color: var(--white); cursor: pointer; }
.pa-send:disabled { opacity: .5; cursor: not-allowed; }

.pa-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pa-secondary { display: inline-flex; gap: var(--space-1); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-100);
    border-radius: var(--r-md); background: var(--white); color: var(--blue-700); font: inherit; font-size: 13px; cursor: pointer; min-height: 40px; }
.pa-secondary:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
    .pa-msg { max-width: 95%; }
    .pa-thread { max-height: 55vh; }
    .pa-secondary { flex: 1 1 auto; justify-content: center; }
}