/* public/css/chat.css */

:root {
    --bg-main: #121214;
    --bg-panel: #1a1a1e;
    --bg-msg-user: #2d3748;
    --bg-msg-minia: #232934;
    --text-primary: #e2e8f0;
    --text-muted: #a0aec0;
    --accent: #4ade80; /* Verde neón para el online y éxito */
    --accent-blue: #3b82f6;
    --border-color: #2d2d34;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

/* Contenedor Flexbox de la App */
.minia-app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* Panel Principal de Chat */
.chat-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--border-color);
}

.chat-header {
    background-color: var(--bg-panel);
    padding: 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.chat-header h2 {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    font-size: 0.75rem;
    background-color: rgba(74, 222, 128, 0.15);
    color: var(--accent);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--accent);
    text-transform: uppercase;
}

.chat-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Caja de Mensajes con Scroll Fluido */
.chat-messages-box {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-main);
}

.message {
    max-width: 75%;
    padding: 0.9rem 1.2rem;
    border-radius: 8px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.minia-message {
    background-color: var(--bg-msg-minia);
    align-self: flex-start;
    border-left: 4px solid var(--accent-blue);
}

.user-message {
    background-color: var(--bg-msg-user);
    align-self: flex-end;
    border-right: 4px solid var(--accent);
}

/* Formulario Input Fijo Abajo */
.chat-input-form {
    background-color: var(--bg-panel);
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.8rem;
}

.chat-input-form input {
    flex: 1;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input-form input:focus {
    border-color: var(--accent-blue);
}

.chat-input-form button {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    padding: 0 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-input-form button:hover {
    background-color: #2563eb;
}

/* Panel Lateral de Auditoría (Sidebar) */
.chat-sidebar-metadata {
    width: 320px;
    background-color: var(--bg-panel);
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.chat-sidebar-metadata h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.chat-sidebar-metadata hr {
    border: 0;
    border-top: 1px solid var(--border-color);
}

.meta-section h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    letter-spacing: 0.5px;
}

.meta-section pre {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 0.7rem;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    color: #34d399; /* Tono verde consola */
}

.meta-section pre {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 0.7rem;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    color: #34d399;
    
    /* ◄ ¡MÉTELE ESTAS TRES LÍNEAS NUEVAS AQUÍ! */
    white-space: pre-wrap;       /* Ajuste de línea automático */
    word-break: break-all;       /* Rompe palabras largas si es necesario */
    overflow-x: hidden;          /* Chau barra horizontal molesta */
}

/* Efecto hover simple para el botón de limpiar */
#btnClearChat:hover {
    background-color: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}
.account-panel { padding: .8rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.account-panel a { color: #7dc9ff; }
.account-panel summary { cursor: pointer; margin-top: .5rem; }
.account-panel form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.account-panel input, .account-panel button { padding: .6rem; border: 1px solid #52617a; border-radius: 6px; }
.account-panel p { margin: .5rem 0; font-size: .9rem; }
button:disabled { opacity: .55; cursor: wait; }
@media(max-width: 760px) { body { height: auto; overflow: auto; } .minia-app-container { flex-direction: column; height: auto; min-height: 100vh; } .chat-main-panel { height: 85vh; min-height: 600px; } .chat-sidebar-metadata { width: auto; } .account-panel form { flex-direction: column; } }

/* Public chat: focused conversation without internal diagnostics. */
.minia-app-container{max-width:1100px;margin:0 auto;width:100%;padding:16px}.chat-main-panel{border:1px solid var(--border-color);border-radius:18px;overflow:hidden}.account-panel{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.account-panel>a{color:#a7e8c5;font-size:13px}.chat-header h2{letter-spacing:.08em}.chat-header p{font-size:13px;margin-top:8px}.chat-messages-box{padding:24px}.message p{line-height:1.7}@media(max-width:600px){.minia-app-container{padding:0}.chat-main-panel{border-radius:0}.chat-header{gap:10px}.chat-header h2{font-size:20px}.status-badge{font-size:10px}}