/* ================================================================ */
/* CHAT_STYLE.CSS - Estilos Específicos para el Widget de Chat      */
/* Todos los selectores están prefijados con .chat-widget-container */
/* para minimizar conflictos con los estilos globales del sitio.    */
/* ================================================================ */

/* Estilo base para el widget. 
   Los estilos de posicionamiento (fixed, bottom, right, z-index, width, display:none)
   se manejan en el HTML inline del index.html principal para asegurar
   que el widget esté oculto y posicionado correctamente desde el inicio.
   Aquí definimos el aspecto interno.
*/
.chat-widget-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    max-width: 100%; /* Ya está en el inline, pero por si acaso */
    background-color: #ffffff;
    /* border y box-shadow ya están en el inline del index.html */
    display: flex; /* Controlado por JS para mostrar/ocultar */
    flex-direction: column;
    overflow: hidden; 
    font-size: 14px; /* Un tamaño base para el chat, puedes ajustar */
    line-height: 1.5; /* Espaciado de línea base */
}

/* NO aplicar estilos globales al body, p, button desde aquí */
/* Esos selectores generales que tenías al principio de tu archivo original han sido eliminados */
/* porque son los que más probablemente causen conflictos. */

.chat-widget-container .chat-header {
    background-color: #ffffff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.chat-widget-container .chat-title {
    font-size: 1.1em; /* Relativo al font-size base del widget */
    font-weight: bold;
    color: #333;
    margin: 0; /* Resetear margen si lo hereda */
}

.chat-widget-container .chat-close-btn {
    background: none;
    border: none;
    font-size: 1.6em;
    color: #757575;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}
.chat-widget-container .chat-close-btn:hover {
    color: #333;
}

.chat-widget-container .chat-body {
    padding: 15px;
    flex-grow: 1;
    display: flex; /* Para manejar el cambio entre form y chatInterface */
    flex-direction: column;
    overflow-y: auto; /* Si el contenido del body es muy largo */
}

.chat-widget-container .chat-intro {
    font-size: 0.9em;
    color: #555555;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.4;
}

.chat-widget-container .form-group {
    margin-bottom: 15px;
}

.chat-widget-container .form-group label {
    display: block;
    font-size: 0.85em;
    color: #555555;
    margin-bottom: 5px;
}

.chat-widget-container .form-group input[type="text"],
.chat-widget-container .form-group input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 0.95em;
    font-family: inherit; /* Heredar la fuente del widget */
}

.chat-widget-container .form-group input[type="text"]:focus,
.chat-widget-container .form-group input[type="email"]:focus {
    outline: none;
    border-color: #007bff; 
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.chat-widget-container .chat-privacy-notice {
    background-color: #f9f9f9;
    padding: 10px;
    margin-top: 5px; 
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    font-size: 0.8em;
    color: #666666;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    line-height: 1.3;
}

.chat-widget-container .chat-privacy-notice p {
    margin: 0; /* Específico para el p dentro de este notice */
    flex-grow: 1; 
    color: #666666; /* Asegurar color si el p global es diferente */
}

.chat-widget-container .chat-privacy-notice a {
    color: #007bff; 
    text-decoration: none;
}

.chat-widget-container .chat-privacy-notice a:hover {
    text-decoration: underline;
}

.chat-widget-container .privacy-close-btn {
    background: none;
    border: none;
    font-size: 1.2em;
    color: #999;
    cursor: pointer;
    padding: 0 0 0 10px; 
    line-height: 1; 
}
.chat-widget-container .privacy-close-btn:hover {
    color: #555;
}

.chat-widget-container .chat-actions {
    display: flex;
    border-top: 1px solid #e0e0e0; 
    /* Los márgenes negativos podrían causar problemas si el padding del .chat-body cambia.
       Es mejor que los botones ocupen el 100% del ancho si el .chat-actions no tiene padding. */
    margin-top: auto; /* Empujar al final si .chat-body es flex */
}

/* Estilo para los botones dentro de .chat-actions */
.chat-widget-container .chat-actions .btn { /* Aplicando la clase .btn específicamente */
    flex-grow: 1;
    padding: 12px 15px;
    border: none; /* Heredado de .btn, pero explícito */
    font-size: 1em; /* Relativo al widget */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: transparent; /* Resetear por si acaso */
    color: inherit; /* Heredar color base */
    text-align: center;
    line-height: normal; /* Resetear */
    font-family: inherit; /* Heredar fuente del widget */
}

.chat-widget-container .chat-actions .btn-regresar {
    background-color: #6c757d; 
    color: white;
    border-bottom-left-radius: 7px; 
    border-top-right-radius: 0; /* Asegurar esquinas correctas */
    border-bottom-right-radius: 0;
}
.chat-widget-container .chat-actions .btn-regresar:hover {
    background-color: #5a6268;
}

.chat-widget-container .chat-actions .btn-enviar {
    background-color: #e9ecef; 
    color: #6c757d; 
    border-bottom-right-radius: 7px; 
    border-top-left-radius: 0; /* Asegurar esquinas correctas */
    border-bottom-left-radius: 0;
}
.chat-widget-container .chat-actions .btn-enviar:hover {
    background-color: #d3d9df;
}
.chat-widget-container .chat-actions .btn-enviar:disabled {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
}

/* Estilos para la Interfaz de Chat Real */
.chat-widget-container #chatInterface {
    display: flex; /* Controlado por JS */
    flex-direction: column;
    height: 350px; /* Altura fija, ajusta si es necesario. Considera flex-grow si el .chat-body debe adaptarse. */
    width: 100%; /* Ocupar el ancho del .chat-body */
    flex-grow: 1; /* Para ocupar el espacio disponible en .chat-body */
}

.chat-widget-container .chat-messages {
    flex-grow: 1;
    overflow-y: auto; 
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column; 
}

.chat-widget-container .chat-message {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 75%; /* Un poco más de espacio */
    word-wrap: break-word;
    line-height: 1.4; /* Específico para mensajes */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Sombra sutil */
}

.chat-widget-container .chat-message.user {
    background-color: #007bff; 
    color: white;
    align-self: flex-end; 
    border-bottom-right-radius: 5px;
}

.chat-widget-container .chat-message.agent {
    background-color: #e9ecef; 
    color: #333;
    align-self: flex-start; 
    border-bottom-left-radius: 5px;
}

.chat-widget-container .chat-message strong { 
    display: block;
    font-size: 0.8em;
    margin-bottom: 3px;
    color: #777; /* Un poco más claro para el nombre */
}
.chat-widget-container .chat-message.user strong {
    color: #d1e7ff;
}
.chat-widget-container .chat-message.agent strong {
    color: #555; /* Mismo que el general si se prefiere */
}

.chat-widget-container .chat-system-message {
    font-style: italic;
    color: #888;
    text-align: center;
    font-size: 0.9em;
    margin: 10px 0;
    padding: 5px; /* Añadir padding */
}

.chat-widget-container .chat-input-area {
    display: flex;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: auto; /* Asegurar que esté al final */
}

.chat-widget-container #chatMessageInput {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    font-family: inherit; /* Heredar fuente del widget */
    font-size: 0.95em;
}

.chat-widget-container .btn-enviar-mensaje { 
    background-color: #28a745; 
    color: white;
    padding: 10px 15px; /* Igual que otros botones */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em; /* Igual que otros botones */
    font-weight: 500; /* Igual que otros botones */
    line-height: normal;
}
.chat-widget-container .btn-enviar-mensaje:hover {
    background-color: #218838;
}


/* En chat/chat_style.css - Añadir estos estilos */

/* ... (Estilos existentes) ... */

/* Estilos para la Vista de Selección de Departamento */
.chat-widget-container #departmentSelectionView {
    /* display: block; por defecto o flex si lo haces contenedor flex */
    padding-top: 10px; /* Espacio superior */
}

.chat-widget-container #departmentListContainer button.department-button {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: var(--secondary-bg, #f6f7f9); /* Usar variable si está definida, sino fallback */
    border: 1px solid var(--border-color, #dce0e6);
    color: var(--primary-text, #1d2129);
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative; /* Para el icono */
}

.chat-widget-container #departmentListContainer button.department-button:hover {
    background-color: var(--hover-bg, #e7f3ff);
    border-color: var(--accent-color, #007bff);
}

/* Icono de flecha/externo (puedes usar Font Awesome o un SVG si prefieres) */
.chat-widget-container #departmentListContainer button.department-button::after {
    content: '→'; /* o '\2192' o un icono SVG como background-image */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color, #007bff);
    font-size: 1.1em;
}

.chat-widget-container .chat-privacy-notice-small {
    font-size: 0.75em;
    color: #777;
    margin-top: 15px;
    text-align: center;
}
.chat-widget-container .chat-privacy-notice-small a {
    color: var(--accent-color, #007bff);
    text-decoration: none;
}
.chat-widget-container .chat-privacy-notice-small a:hover {
    text-decoration: underline;
}

/* Asegurar que solo una vista principal esté activa */
/* .chat-widget-container #departmentSelectionView,
.chat-widget-container #userInfoFormView,
.chat-widget-container #chatInterface {
    display: none; /* Controlado por JS 
} */
/* No es necesario si usamos JS para display:none en las no activas */

.chat-widget-container #departmentSelectionView,
.chat-widget-container #userInfoFormView,
.chat-widget-container #chatInterface {
    width: 100%;
    flex-grow: 1; /* Para ocupar el espacio vertical del chat-body */
    display: flex; /* Ya lo pone el JS, pero es bueno tenerlo en CSS */
    flex-direction: column; /* Para apilar elementos internos verticalmente */
    /* Otros estilos como padding si es necesario */
}