1  /* Main stylesheet for NovaChat */
   2  :root {
   3      /* Dark mode variables (default) */
   4      --bg-color: #1a1a1a;
   5      --sidebar-bg: #2d2d2d;
   6      --sidebar-border: #444;
   7      --text-color: #7ee787;
   8      --text-muted: #9e9e9e;
   9      --content-bg: #1a1a1a;
  10      --topbar-bg: #212121;
  11      --link-hover: #fff;
  12      --assistant-msg-bg: #2f352f;
  13      --assistant-msg-color: #9ef1a0;
  14      --user-msg-bg: #15354f;
  15      --user-msg-color: #a0f1f1;
  16      --btn-newchat-bg: #0d6efd;
  17  }
  18  
  19  body.light-mode {
  20      /* Light mode overrides */
  21      --bg-color: #f8f9fa;
  22      --sidebar-bg: #e9ecef;
  23      --sidebar-border: #ccc;
  24      --text-color: #0d6efd;
  25      --text-muted: #6c757d;
  26      --content-bg: #f8f9fa;
  27      --topbar-bg: #e9ecef;
  28      --link-hover: #000;
  29      --assistant-msg-bg: #e2ffe2;
  30      --assistant-msg-color: #198754;
  31      --user-msg-bg: #cce5ff;
  32      --user-msg-color: #0d6efd;
  33      --btn-newchat-bg: #0d6efd;
  34  }
  35  
  36  
  37  
  38  .message-bubble {
  39    transition: all var(--animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
  40    transform-origin: center bottom;
  41  }
  42  
  43  
  44  
  45  .user-message {
  46    background-color: var(--color-primary);
  47  }
  48  
  49  
  50  
  51  .ai-message {
  52    background-color: var(--color-secondary);
  53  }
  54  
  55  
  56  
  57  .chat-input {
  58    transition: transform 0.2s ease-in-out;
  59  }
  60  
  61  
  62  
  63  .chat-input:focus {
  64    transform: scale(1.02);
  65  }
  66  
  67  
  68  
  69  @keyframes fade-in-up {
  70    from { opacity: 0; transform: translateY(20px); }
  71  
  72  
  73    to { opacity: 1; transform: translateY(0); }
  74  
  75  
  76  }
  77  
  78  
  79  
  80  .new-message {
  81    animation: fade-in-up var(--animation-speed) ease-out;
  82  }
  83  
  84  
  85  
  86  .media-player {
  87      background: #1a1a1a;
  88      border-radius: 8px;
  89      padding: 15px;
  90  }
  91  
  92  
  93  
  94  .persona-badge {
  95      font-size: 0.8rem;
  96      padding: 2px 8px;
  97      border-radius: 12px;
  98      background: #6c757d;
  99      color: white;
 100      display: inline-block;
 101  }
 102  
 103  
 104  
 105  .torrent-info {
 106      background: #2d2d2d;
 107      padding: 15px;
 108      border-radius: 8px;
 109      color: #fff;
 110  }
 111  
 112  
 113  
 114  .progress-bar-striped {
 115      animation: progress-animation 1s linear infinite;
 116  }
 117  
 118  
 119  
 120  @keyframes progress-animation {
 121      0% { background-position: 40px 0; }
 122  
 123  
 124      100% { background-position: 0 0; }
 125  
 126  
 127  }
 128  
 129  
 130  
 131  /* Mobile-first media queries */
 132  @media (min-width: 768px) {
 133    .sidebar {
 134      height: 100vh;
 135      position: sticky;
 136      top: 0;
 137    }
 138  
 139  
 140  }
 141  
 142  
 143  
 144  @media (max-width: 767px) {
 145    .message-bubble {
 146      font-size: 14px;
 147      padding: 8px 12px;
 148    }
 149  
 150  
 151    .chat-input {
 152      font-size: 14px;
 153    }
 154  
 155  
 156  }