/* ============================================
   CHATBOT.CSS — Systelcom
   Diseño Moderno y Elegante Integrado
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

   :root {
       --primary:    #000000;
       --secondary:  #0056b3;
       --accent:     #00a859;
       --light-bg:   #fafafa;
       --white:      #ffffff;
       --text-main:  #333333;
       --text-muted: #64748b;
       --chat-bg:    #f0f7ff;
   }
   
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'Montserrat', sans-serif;
       background: linear-gradient(135deg, var(--white) 0%, var(--chat-bg) 100%);
       display: flex;
       flex-direction: column;
       height: 100vh;
       color: var(--text-main);
       overflow: hidden;
   }
   
   /* ── Header Compartido ── */
   .header {
       background-color: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(10px);
       padding: 15px 40px;
       border-bottom: 1px solid #ebebeb;
       display: flex;
       justify-content: space-between;
       align-items: center;
       z-index: 1000;
       box-shadow: 0 4px 20px rgba(0,0,0,0.03);
   }
   
   .header-logo img {
       height: 45px;
       width: auto;
       transition: transform 0.3s ease;
   }
   
   .header-logo img:hover {
       transform: scale(1.05);
   }
   
   .btn-regresar {
       background-color: var(--light-bg);
       border: 1px solid #ddd;
       color: var(--text-muted);
       padding: 8px 18px;
       border-radius: 50px;
       font-size: 0.8rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       text-decoration: none;
       transition: all 0.3s ease;
   }
   
   .btn-regresar:hover {
       background-color: var(--white);
       color: var(--primary);
       border-color: #bbb;
       transform: translateX(-3px);
       box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   }
   
   /* ── Contenedor Principal del Chat ── */
   .chat-container-wrapper {
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
   }
   
   .chat {
       width: 100%;
       max-width: 800px;
       height: 85vh;
       background-color: var(--white);
       border-radius: 24px;
       box-shadow: 0 20px 60px rgba(0, 86, 179, 0.1);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       border: 1px solid rgba(0,0,0,0.04);
       animation: slideUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
       transform: translateY(30px);
       opacity: 0;
   }
   
   @keyframes slideUp {
       to { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Header del Robot en el chat ── */
   .chat_inner_header {
       background: var(--secondary);
       padding: 20px;
       display: flex;
       align-items: center;
       gap: 15px;
       color: var(--white);
   }
   
   .chat_inner_header img {
       height: 50px;
       width: 50px;
       border-radius: 25px;
       background: var(--white);
       padding: 5px;
       box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   }
   
   .header_info h2 {
       font-size: 1.2rem;
       font-weight: 800;
       margin-bottom: 2px;
       letter-spacing: 0.5px;
   }
   
   .header_info p {
       font-size: 0.8rem;
       font-weight: 500;
       opacity: 0.9;
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   .status-dot {
       width: 8px;
       height: 8px;
       background-color: #00ff88;
       border-radius: 50%;
       display: inline-block;
       box-shadow: 0 0 10px rgba(0,255,136,0.5);
   }
   
   /* ── Área de mensajes ── */
   .chat_messages {
       flex: 1;
       padding: 25px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
       gap: 15px;
       background: #fafcff;
       scroll-behavior: smooth;
   }
   
   /* Scrollbar personalizado */
   .chat_messages::-webkit-scrollbar { width: 6px; }
   .chat_messages::-webkit-scrollbar-track { background: transparent; }
   .chat_messages::-webkit-scrollbar-thumb { background: #cce0f5; border-radius: 10px; }
   .chat_messages::-webkit-scrollbar-thumb:hover { background: #99c2ed; }
   
   /* ── Mensajes Individuales ── */
   .chat_message {
       max-width: 75%;
       padding: 15px 20px;
       font-size: 0.95rem;
       line-height: 1.5;
       border-radius: 18px;
       word-wrap: break-word;
       position: relative;
       animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
       opacity: 0;
       transform: scale(0.9);
   }
   
   @keyframes popIn {
       to { opacity: 1; transform: scale(1); }
   }
   
   .chat_message--user {
       align-self: flex-end;
       background: var(--secondary);
       color: var(--white);
       border-bottom-right-radius: 4px;
       box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);
   }
   
   .chat_message--bot {
       align-self: flex-start;
       background: var(--white);
       color: var(--text-main);
       border: 1px solid #e2e8f0;
       border-bottom-left-radius: 4px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
   }
   
   /* ── Área de Input ── */
   .chat_input-group {
       display: flex;
       gap: 15px;
       padding: 20px 25px;
       background: var(--white);
       border-top: 1px solid #eee;
       align-items: center;
   }
   
   .chat_input {
       flex: 1;
       outline: none;
       border: 1px solid #e2e8f0;
       background: #f8fafc;
       font-size: 1rem;
       border-radius: 50px;
       padding: 15px 25px;
       transition: all 0.3s ease;
       font-family: inherit;
   }
   
   .chat_input:focus {
       border-color: var(--secondary);
       background: var(--white);
       box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1);
   }
   
   .chat_button {
       background-color: var(--accent);
       color: var(--white);
       font-size: 1.2rem;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       border: none;
       outline: none;
       transition: all 0.3s ease;
       box-shadow: 0 5px 15px rgba(0, 168, 89, 0.3);
   }
   
   .chat_button:hover {
       background-color: #008f4c;
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(0, 168, 89, 0.4);
   }
   
   .chat_button:active {
       transform: translateY(1px);
   }
   
   /* Responsive */
   @media (max-width: 600px) {
       .chat {
           max-width: 100%;
           height: 90vh;
           border-radius: 0;
           box-shadow: none;
           border: none;
       }
       .chat-container-wrapper {
           padding: 0;
       }
       .header {
           padding: 15px 20px;
       }
   }