/* ===== Variables por defecto (fallback) ===== */
:root{
  /* paleta base (suave rosada, como tienes ahora) */
  --bg: #fff1f5;
  --panel: #f5f5f5;
  --bubble-ai: #e0e0e0;
  --bubble-user: #007bff;
  --bubble-ai-text: #000000;
  --bubble-user-text: #ffffff;
  --text-muted: #888888;
  --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
  --accent: #FF69B4;            /* botón scroll, acentos */
  --border: #cccccc;
  --form-bg: #ffffff;
  --form-border: rgba(0,0,0,.1);
  --bg:#fff;
  --chat-bg: var(--bg);

  /* tipografía */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* burbujas */
  --bubble-radius: 20px;
  --bubble-pad-v: 10px;
  --bubble-pad-h: 15px;

  /* chat-box */
  --chat-maxh: 70vh;
  --chat-pad: 20px;

  /* avatar */
  --avatar-size: 40px;

  /* typing */
  --typing-bg: #e0e0e0;
  --typing-text: #555;

  /* botones formularios */
  --btn-primary-bg: var(--bubble-user);
  --btn-primary-text: #fff;
  --btn-outline-text: #333;

  /* scroll btn */
  --scroll-btn-bg: var(--accent);
  --scroll-btn-text: #fff;
}


/* ===== Default (login y páginas sin sesión) ===== */
body[data-skin="Default"] {
  /* Colores base (pastel suave, no blanco) */
  --bg:        #f2f8ff;   /* azul cielo pastel */
  --chat-bg:   #f2f8ff;   /* igual que fondo general */
  --panel:     #ffffff;   /* paneles en blanco para resaltar sobre el pastel */
  --panel-2:   #e9f2fb;   /* panel secundario con un azul un poquito más intenso */

  /* Texto y detalles */
  --text:      #141416;   /* casi negro */
  --muted:     #61636b;   /* gris medio */
  --border:    #d3e4f5;   /* borde acorde al pastel */
  --card-shadow: 0 8px 24px rgba(0,0,0,.06);

  /* Marca/acento */
  --accent:    #5aa8ff;   /* azul claro para botones y acentos */

  /* Burbujas */
  --bubble-ai:        #000000;  /* gris-azulado claro para AI */
  --bubble-ai-text:   #ffffff;  /* texto oscuro */
  --bubble-user:      #2b8cff;  /* azul vivo para usuario */
  --bubble-user-text: #ffffff;  /* texto blanco sobre azul */

  /* Botones y formularios */
  --btn-primary-bg: var(--bubble-user);
  --btn-primary-text: #fff;
  --form-bg: #ffffff;
  --form-border: rgba(0,0,0,.10);
}

/* ===== Gabriela (rosa pastel) ===== */
body[data-skin="Gabriela"]{
  --bg:#fff7fb; --chat-bg:#fff7fb; --panel:#fffff2; --panel-2:#faf1f6;
  --text:#1c1c1e; --muted:#5f5f6a; --border:#ead9e3; --card-shadow:0 8px 24px rgba(0,0,0,.06);
  --accent:#ff6aa8; --bubble-ai:#ff6b9a; --bubble-ai-text:#ffffff;
  --bubble-user:#2b8cff; --bubble-user-text:#ffffff;
}

/* ===== Camila (turquesa + amarillo suave) ===== */
body[data-skin="Camila"]{
  --bg:#f2fffd; --chat-bg:#f5fffe; --panel:#fffff4; --panel-2:#ebfbf8;
  --text:#121212; --muted:#546364; --border:#cfeeee; --card-shadow:0 8px 24px rgba(0,0,0,.06);
  --accent:#27c4ba; --bubble-ai:#e6fbf9; --bubble-ai-text:#121212;
  --bubble-user:#2b8cff; --bubble-user-text:#ffffff;
}

/* ===== Martina (celeste + rosa claro) ===== */
body[data-skin="Martina"]{
  --bg:#f7fbff; --chat-bg:#f9fcff; --panel:#fffff6; --panel-2:#f0f7ff;
  --text:#111; --muted:#58606a; --border:#d9e8f6; --card-shadow:0 8px 24px rgba(0,0,0,.06);
  --accent:#9dd6ff; --bubble-ai:#ff6b9a; --bubble-ai-text:#ffffff;
  --bubble-user:#2b8cff; --bubble-user-text:#ffffff;
}

/* ===== Noelia (granate suave + ocre pastel) ===== */
body[data-skin="Noelia"]{
  --bg:#fff8f8; --chat-bg:#fff9fb; --panel:#fffff0; --panel-2:#f7f1f1;
  --text:#161616; --muted:#5b5658; --border:#eadede; --card-shadow:0 8px 24px rgba(0,0,0,.06);
  --accent:#c95a6b; --bubble-ai:#a5f6fa; --bubble-ai-text:#161616;
  --bubble-user:#2b8cff; --bubble-user-text:#ffffff;
}

/* ===== Isabella (lavanda + durazno) ===== */
body[data-skin="Isabella"]{
  --bg:#fbf8ff; --chat-bg:#fdfaff; --panel:#fffffe; --panel-2:#f4eeff;
  --text:#151515; --muted:#5d5b68; --border:#e4dcfb; --card-shadow:0 8px 24px rgba(0,0,0,.06);
  --accent:#b79cff; --bubble-ai:#f3eeff; --bubble-ai-text:#151515;
  --bubble-user:#2b8cff; --bubble-user-text:#ffffff;
}

/* ===== Aplica las variables a tus elementos existentes ===== */
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}

.chat-box{
  background: var(--panel);
  box-shadow: var(--card-shadow);
}

.message.aimi .bubble, .message.assistant .bubble{
  background: var(--bubble-ai);
  color: var(--bubble-ai-text);
}

.message.user .bubble{
  background: var(--bubble-user);
  color: var(--bubble-user-text);
}

.btn.btn-primary{
  background: var(--btn-primary-bg, var(--bubble-user));
  color: var(--btn-primary-text, #fff);
  border-color: var(--btn-primary-bg, var(--bubble-user));
}

.form-control{
  background: var(--form-bg);
  border-color: var(--form-border);
  color: var(--text);
}



/* ====== TUS SELECTORES ORIGINALES, SIN CAMBIOS ====== */
body {
  background-color: var(--bg);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}

.chat-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 180px; /* espacio para el chat-form fijo */
}

.chat-box {
  max-height: var(--chat-maxh);
  overflow-y: auto;
  padding: var(--chat-pad);
  background-color: var(--panel);
  border-radius: 15px;
  animation: fadeIn 0.5s ease-in;
  box-shadow: var(--card-shadow);
}

/* Mensajes */
.message {
  display: flex;
  margin-bottom: 15px;
  opacity: 0;
  animation: slideIn 0.4s forwards;
}
.message.aimi {
  flex-direction: row;
  justify-content: flex-start;
}
.message.user {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 10px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.bubble {
  max-width: 60%;
  padding: var(--bubble-pad-v) var(--bubble-pad-h);
  border-radius: var(--bubble-radius);
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.95;
}
.message.aimi .bubble {
  background-color: var(--bubble-ai);
  color: var(--bubble-ai-text);
  border-bottom-left-radius: 0;
}
.message.user .bubble {
  background-color: var(--bubble-user);
  color: var(--bubble-user-text);
  border-bottom-right-radius: 0;
}

.timestamp {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* Formulario inferior fijo */
#chat-form {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--form-bg);
  padding: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
#chat-form .input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
#chat-form input.form-control {
  flex-grow: 1;
  border-radius: 1.5rem;
  padding: 10px 15px;
  border: 1px solid var(--border);
  outline: none;
}
#chat-form button.btn-outline-secondary {
  height: 40px;
  padding: 0 14px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--btn-outline-text);
}
#chat-form .btn-primary {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
}

/* Separadores, typing, media */
.date-divider {
  text-align: center;
  font-weight: bold;
  margin: 15px 0;
  color: #555;
}

.typing-bubble {
  background-color: var(--typing-bg);
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  color: var(--typing-text);
  max-width: 200px;
  animation: pulse 1s infinite;
}
.typing-dots::after {
  content: '';
  display: inline-block;
  animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0px); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

.img-emocional, .video-emocional {
  width: 100%;
  max-height: 300px;
  margin-top: 5px;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.2s ease-in-out;
}
.img-emocional:hover, .video-emocional:hover { transform: scale(1.02); }
.audio-nota { width: 100%; margin-top: 5px; }

/* Botón scroll */
.scroll-btn {
  position: absolute; bottom: 20px; right: 20px;
  background-color: var(--scroll-btn-bg);
  color: var(--scroll-btn-text);
  border: none; border-radius: 30px;
  padding: 10px 20px; font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 50; cursor: pointer; display: none;
  transition: opacity 0.3s ease;
}
.scroll-btn:hover { opacity: 0.8; }

/* Responsive */
@media (max-width: 576px) {
  .chat-container { width: 100%; padding: 0 10px; }
  .chat-box { padding: 10px; }
  .message .bubble { max-width: 100% !important; font-size: 16px; }
  #chat-form .btn-primary { font-size: 1.1rem; }
}

.img-subida { max-width: 200px; border-radius: 12px; margin-top: 8px; }
.img-subida-usuario {
  max-width: 200px; max-height: 200px; border-radius: 8px;
  margin-top: 5px; cursor: pointer; box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

:root{
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Asegura que todo use la variable */
html, body,
input, button, select, textarea {
  font-family: var(--font-family) !important;
}

/* Altura estimada del composer fijo */
:root{ --composer-h: 140px; }

/* iOS safe area */
.safe-bottom {
  padding-bottom: calc(var(--composer-h) + env(safe-area-inset-bottom, 0px));
}

/* El contenedor general ya tenía padding-bottom.
   Asegúrate de que use la clase safe-bottom. */
.chat-container.safe-bottom { padding-bottom: calc(var(--composer-h) + env(safe-area-inset-bottom, 0px)); }

/* La caja que scrollea debe “saber” que hay algo fijo abajo */
.chat-box { 
  /* elimina max-height si te limita en móvil */
  max-height: none;
  height: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* El formulario fijo: añade safe-area para que no quede pegado al borde */
#chat-form {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}


body{
  background: var(--chat-bg);
}

/* Badge del motto (ligero) */
.motto-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.25rem .6rem;
  font-size:.85rem;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.05);
}


/* evita que Chrome "ancle" el scroll a un mensaje viejo */
.chat-box .message { overflow-anchor: none; }
/* hace scroll suave cuando sí corresponde */
.chat-box { scroll-behavior: smooth; }
/* evita rebotes con el input fijo abajo */
.chat-box { overscroll-behavior: contain; }


/* ===============================
   Topbar y Footer “pastel friendly”
   =============================== */

:root{
  --header-bg: color-mix(in srgb, var(--accent) 9%, #fff);
  --header-text: #1c1c1f;
  --footer-bg: color-mix(in srgb, var(--accent) 8%, #fff);
  --footer-text:#1c1c1f;
  --chip-bg: color-mix(in srgb, var(--accent) 18%, #fff);
  --chip-text:#0f1115;
}

/* TOP BAR */
.app-topbar{
  position: sticky; top:0; z-index: 1030;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border, #e6e6e7);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(4px);
}
.app-topbar .container{
  max-width: 1080px; padding: .65rem 1rem;
}
.app-brand{
  font-weight: 700; font-size: 1.1rem; color: var(--header-text);
  letter-spacing:.2px;
}
.app-brand small{
  font-weight:500; opacity:.75; margin-left:.35rem;
}
.top-actions{ display:flex; gap:.5rem; align-items:center; }

/* Botones del top */
.btn-spotify{
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
  padding: .4rem .65rem; border-radius: 999px; font-weight:600;
}
.btn-spotify:hover{ filter: brightness(0.98); }

.btn-settings{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius: 999px;
  border:1px solid var(--border,#e6e6e7);
  background:#fff; color:#30323a; box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.btn-settings:hover{ transform: translateY(-1px); }

.btn-logout{
  background: #fff; color:#b0152a; border:1px solid #f3b8c0;
  padding:.4rem .75rem; border-radius: 10px; font-weight:700;
}
.btn-logout:hover{ background:#fff5f6; }

/* FOOTER BAR */
.app-footer-bar{
  margin-top: 2rem;
  background: var(--footer-bg);
  border-top: 1px solid var(--border,#e6e6e7);
  box-shadow: 0 -6px 18px rgba(0,0,0,.05);
}
.app-footer-bar .container{
  max-width:1080px; padding: .9rem 1rem;
  display:flex; align-items:center; justify-content:center;
  color: var(--footer-text);
}
.footer-brand{
  font-weight: 700;
}
.footer-tag{
  margin-left:.5rem; padding:.25rem .5rem; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  border:1px solid color-mix(in srgb, var(--accent) 30%, #fff);
  font-weight:600; font-size:.85rem;
}

/* Caja de chat centrada (suave) */
.chat-container{
  max-width: 1080px;
}

.message:not(.user) .bubble{
  background: var(--bubble-ai) !important;
  color: var(--bubble-ai-text) !important;
  border: 1px solid var(--border);
}