/* ====================================================
   AUTH (LOGIN / SIGNUP) PAGE - CAJA RECTANGULAR CENTRADA
   ==================================================== */
#pg-auth.active { display: flex !important; align-items: center; justify-content: center; background: var(--bk); padding-top: var(--nav-h); }
.auth-box { width: 90%; max-width: 400px; padding: 2.5rem; background: var(--dk2); border: 1px solid var(--db); border-radius: 8px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); margin-top: -5vh; }
.auth-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; margin-bottom: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}
.btn-discord { width: 100%; padding: 1.1rem; background: #5865F2; color: #fff; border: none; border-radius: 4px; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.5rem; cursor: pointer; transition: filter 0.3s, transform 0.3s; }
.btn-discord:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-discord svg { flex-shrink: 0; }
.auth-divider { margin: 1.5rem 0; border-bottom: 1px solid var(--db); position: relative; text-align: center; }
.auth-divider span { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--dk2); padding: 0 10px; font-size: 0.65rem; color: var(--gr); letter-spacing: 1px;}
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }

/* ====================================================
   36912AI CHAT INTERFACE (FULL HEIGHT)
   ==================================================== */
/* El chat ocupa el 100% de la pantalla porque no hay Header */
.chat-layout { display: flex; height: 100dvh; width: 100%; background: var(--bk); }

.chat-sidebar { width: 260px; background-color: var(--dk); border-right: 1px solid var(--db); display: flex; flex-direction: column; padding: 1.2rem; flex-shrink: 0; }
.chat-new-btn { background: transparent; color: var(--wh); border: 1px solid var(--db); padding: 0.8rem; border-radius: 6px; text-align: left; font-weight: 500; cursor: pointer; transition: all 0.3s; margin-bottom: 1.5rem; }
.chat-new-btn:hover { background: var(--dk2); border-color: var(--gr); }

.chat-history { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.chat-hist-item { color: var(--lt); font-size: 0.85rem; padding: 0.7rem; border-radius: 6px; cursor: pointer; transition: all .2s; display: flex; justify-content: space-between; align-items: center; }
.chat-hist-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chat-hist-item:hover { background: var(--dk2); color: var(--wh); }
.chat-hist-item.active { background: var(--dk3); color: var(--y); font-weight: 600; }

.delete-chat-btn { background: transparent; border: none; color: var(--gr); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; padding: 4px; display: flex; align-items: center; justify-content: center;}
.chat-hist-item:hover .delete-chat-btn { opacity: 1; }
.delete-chat-btn:hover { color: #ff4444; }

.chat-user-area { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--db); display: flex; align-items: center; justify-content: space-between; }
.chat-user-info { display: flex; align-items: center; gap: 0.7rem; color: var(--wh); font-size: 0.9rem; overflow: hidden; }
.user-avatar-img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--db); object-fit: cover; }
.chat-login-btn { background: var(--dk2); color: var(--wh); padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.75rem; border: 1px solid var(--db); cursor: pointer; }
.chat-login-btn:hover { background: var(--wh); color: var(--bk); }

.chat-main { flex: 1; display: flex; flex-direction: column; position: relative; }

/* Nuevo Header del Chat (con el título centrado) */
.chat-main-header { display: flex; justify-content: center; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--db); position: relative; }
.chat-title { font-family: 'Orbitron', sans-serif; color: var(--y); font-weight: bold; letter-spacing: 2px; font-size: 1.1rem; }
.mobile-back-logo { display: none; position: absolute; left: 1.5rem; font-size: 1.2rem; margin: 0; }
.chat-main-header .chat-login-btn { position: absolute; right: 1.5rem; }

.chat-messages { flex: 1; overflow-y: auto; padding: 3rem 1rem; display: flex; flex-direction: column; gap: 2rem; }
.chat-msg { display: flex; gap: 1.2rem; max-width: 800px; width: 100%; margin: 0 auto; }
.ai-msg { align-items: flex-start; }
.user-msg { flex-direction: row-reverse; }

.chat-content-wrapper { display: flex; flex-direction: column; gap: 6px; max-width: 85%; }
.ai-msg .chat-content-wrapper { align-items: flex-start; }
.user-msg .chat-content-wrapper { align-items: flex-end; }

.chat-avatar { width: 35px; height: 35px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: bold; flex-shrink: 0; }
.ai-msg .chat-avatar { background: transparent; }
.ai-avatar-img { width: 100%; height: 100%; object-fit: contain; }
.user-msg .chat-avatar { background: var(--dk3); color: var(--wh); border: 1px solid var(--db); }

.chat-bubble { font-size: 1rem; line-height: 1.6; color: var(--wh); word-wrap: break-word; white-space: pre-wrap; padding: 1rem; border-radius: 8px; }
.ai-msg .chat-bubble { background: transparent; padding: 0; }
.user-msg .chat-bubble { background: var(--dk3); }

.copy-msg-btn { background: transparent; border: none; color: var(--gr); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 4px; font-family: 'Exo 2', sans-serif; font-size: 0.8rem;}
.chat-msg:hover .copy-msg-btn { opacity: 1; }
.copy-msg-btn:hover { color: var(--wh); background: var(--dk2); }

.chat-input-area { padding: 1.5rem; max-width: 800px; width: 100%; margin: 0 auto; }
.chat-input-wrapper { display: flex; align-items: flex-end; background: var(--dk2); border: 1px solid var(--db); border-radius: 12px; padding: 0.7rem; }
.chat-input-wrapper textarea { flex: 1; background: transparent; border: none; color: var(--wh); padding: 0.5rem; outline: none; resize: none; max-height: 200px; font-size: 1rem; }
.chat-send-btn { background: var(--y); color: var(--bk); border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.chat-disclaimer { text-align: center; font-size: 0.75rem; color: var(--gr); margin-top: 0.8rem; }

@media (max-width: 768px) {
  .chat-sidebar { display: none; }
  .mobile-back-logo { display: inline-flex; } /* Aparece el logo en móvil para volver */
  .auth-box { margin-top: 0; }
  .copy-msg-btn, .delete-chat-btn { opacity: 1; } 
}