:root {
  --sparkie-bg: #f4f4f4;
  --sparkie-header: #ffffff;
  --sparkie-user: #1877f2;
  --sparkie-bot: #eeeeee;
  --sparkie-text: #000000;
}
body.dark-mode {
  --sparkie-bg: #121212;
  --sparkie-header: #1e1e1e;
  --sparkie-user: #2563eb;
  --sparkie-bot: #2d2d2d;
  --sparkie-text: #f0f0f0;
}
#sparkie-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#sparkie-modal.oculto { display:none; }
#sparkie-modal.fade-in { animation: modalFadeIn 0.3s forwards; }
#sparkie-modal.fade-out { animation: modalFadeOut 0.3s forwards; }
@keyframes modalFadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes modalFadeOut { from {opacity:1;} to {opacity:0;} }
#sparkie-modal .chat-container {
  background: var(--sparkie-bg);
  color: var(--sparkie-text);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 900px;
  height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin-top: env(safe-area-inset-top);
  margin-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#sparkie-modal .chat-header {
  background-color: var(--sparkie-header);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
#sparkie-modal .chat-header button { background: transparent; border:none; font-size:1.2rem; cursor:pointer; margin-left:0.5rem; }
#sparkie-modal .cerrar-chat { font-size:1.5rem; margin-right:0.75rem; }
#sparkie-modal .chat-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:1rem; scroll-behavior:smooth; }
#sparkie-modal .chat-body::-webkit-scrollbar { width:6px; }
#sparkie-modal .chat-body::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius:10px; }
#sparkie-modal .chat-body::-webkit-scrollbar-track { background-color: transparent; }
#sparkie-modal .chat-form { display:flex; border-top:1px solid #ddd; padding:0.75rem; gap:0.5rem; }
#sparkie-modal .chat-form textarea { flex:1; padding:0.6rem 1rem; border-radius:12px; border:1px solid #ccc; font-size:1rem; resize:none; min-height:48px; line-height:1.3; }
#sparkie-modal .chat-form textarea:focus { border-color: var(--sparkie-user); outline:none; box-shadow:0 0 4px var(--sparkie-user); }
#sparkie-modal .chat-form button { background:#ff5c39; color:white; border:none; border-radius:20px; padding:0.6rem 1.2rem; cursor:pointer; font-weight:bold; }
#sparkie-modal .chat-form button:hover { background:#e44827; }
#sparkie-modal .mensaje { display:flex; align-items:flex-start; gap:0.75rem; max-width:90%; animation: fadeIn 0.3s ease forwards; }
#sparkie-modal .mensaje.usuario { align-self:flex-end; flex-direction:row-reverse; }
#sparkie-modal .mensaje.sparkie { align-self:flex-start; flex-direction:row; }
#sparkie-modal .avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background-color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
#sparkie-modal .burbuja { padding:0.75rem 1rem; border-radius:16px; font-size:0.95rem; max-width:75%; word-wrap:break-word; white-space:pre-wrap; line-height:1.4; transition:all 0.3s ease; }
#sparkie-modal .burbuja:hover { transform:scale(1.02); }
#sparkie-modal .mensaje.usuario .burbuja { background-color: var(--sparkie-user); color:white; }
#sparkie-modal .mensaje.sparkie .burbuja { background-color: var(--sparkie-bot); color: var(--sparkie-text); }
#sparkie-modal .burbuja.pensando { font-style: italic; opacity:0.6; position:relative; }
#sparkie-modal .burbuja.pensando::after { content:' .'; animation:puntos 1s steps(3,end) infinite; }
@keyframes puntos {0%{content:' .';}33%{content:' ..';}66%{content:' ...';}100%{content:' .';}}

@media (max-width: 600px) {
  #sparkie-modal .chat-container {
    width: 95vw;
    height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 12px;
  }
}