/* Main stylesheet for NovaChat */
:root {
    /* Dark mode variables (default) */
    --bg-color: #1a1a1a;
    --sidebar-bg: #2d2d2d;
    --sidebar-border: #444;
    --text-color: #7ee787;
    --text-muted: #9e9e9e;
    --content-bg: #1a1a1a;
    --topbar-bg: #212121;
    --link-hover: #fff;
    --assistant-msg-bg: #2f352f;
    --assistant-msg-color: #9ef1a0;
    --user-msg-bg: #15354f;
    --user-msg-color: #a0f1f1;
    --btn-newchat-bg: #0d6efd;
}

body.light-mode {
    /* Light mode overrides */
    --bg-color: #f8f9fa;
    --sidebar-bg: #e9ecef;
    --sidebar-border: #ccc;
    --text-color: #0d6efd;
    --text-muted: #6c757d;
    --content-bg: #f8f9fa;
    --topbar-bg: #e9ecef;
    --link-hover: #000;
    --assistant-msg-bg: #e2ffe2;
    --assistant-msg-color: #198754;
    --user-msg-bg: #cce5ff;
    --user-msg-color: #0d6efd;
    --btn-newchat-bg: #0d6efd;
}



.message-bubble {
  transition: all var(--animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center bottom;
}



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



.ai-message {
  background-color: var(--color-secondary);
}



.chat-input {
  transition: transform 0.2s ease-in-out;
}



.chat-input:focus {
  transform: scale(1.02);
}



@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }


  to { opacity: 1; transform: translateY(0); }


}



.new-message {
  animation: fade-in-up var(--animation-speed) ease-out;
}



.media-player {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 15px;
}



.persona-badge {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: #6c757d;
    color: white;
    display: inline-block;
}



.torrent-info {
    background: #2d2d2d;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
}



.progress-bar-striped {
    animation: progress-animation 1s linear infinite;
}



@keyframes progress-animation {
    0% { background-position: 40px 0; }


    100% { background-position: 0 0; }


}



/* Mobile-first media queries */
@media (min-width: 768px) {
  .sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
  }


}



@media (max-width: 767px) {
  .message-bubble {
    font-size: 14px;
    padding: 8px 12px;
  }


  .chat-input {
    font-size: 14px;
  }


}