:root {
      --primary-color: #e63946;
      --bg-color: #0a0a0a;
      --text-color: #f8f9fa;
      --section-bg: rgba(15, 15, 15, 0.95);
      --border-color: #2d2d2d;
      --message-bg: #1a1a1a;
      --own-message-bg: #2d1518;
      --own-message-border: #e63946;
      --reply-bg: rgba(230,57,70,0.05);
      --error-bg: rgba(220, 38, 38, 0.1);
      --error-border: rgba(220, 38, 38, 0.4);
    }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      min-height: 100vh;
      overflow-x: hidden;
    }
    h1, h2, h3, .app-title {
      font-family: 'Poppins', sans-serif;
    }
    .message-bubble {
      background: var(--message-bg);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      max-width: 80%;
      word-wrap: break-word;
      margin-bottom: 0.75rem;
      position: relative;
      padding: 0.75rem;
      border-radius: 0.5rem;
    }
    .own-message {
      margin-left: auto;
      background: var(--own-message-bg);
      border-color: var(--own-message-border);
    }
    .message-bubble::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      top: 15px;
    }
    .own-message::before {
      right: -5px;
      background: var(--own-message-bg);
      border-right: 1px solid var(--own-message-border);
      border-top: 1px solid var(--own-message-border);
    }
    .other-message::before {
      left: -5px;
      background: var(--message-bg);
      border-left: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .reply-indicator {
      background: var(--reply-bg);
      border-left: 3px solid var(--primary-color);
      padding: 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 0.375rem;
    }
    .auth-input {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }
    .auth-input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(230,57,70,0.2);
    }
    /* The login modal covers the full screen. Its background has a subtle grid overlay */
    #authModal {
      backdrop-filter: blur(8px);
      background: rgba(0,0,0,0.7);
      background-image: 
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.03) 25%, transparent 26%, transparent 74%, rgba(255,255,255,0.03) 75%, transparent 76%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.03) 25%, transparent 26%, transparent 74%, rgba(255,255,255,0.03) 75%, transparent 76%, transparent);
      background-size: 30px 30px;
    }
    .btn-primary {
      background: var(--primary-color);
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      background: #d12d3a;
    }
    .btn-secondary {
      background: rgba(255,255,255,0.1);
      transition: all 0.3s ease;
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.15);
    }
    .emoji-picker {
      background: var(--section-bg);
      border: 1px solid var(--border-color);
      z-index: 10;
    }
    /* Center emoji within the button */
    .emoji-btn {
      cursor: pointer;
      transition: all 0.1s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .emoji-btn:hover {
      background: rgba(255,255,255,0.1);
    }
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.05);
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }
    .reply-btn, .delete-btn, .cancel-reply-btn {
      transition: transform 0.2s ease;
    }
    .reply-btn:hover, .delete-btn:hover, .cancel-reply-btn:hover {
      transform: scale(1.1);
    }
    #emojiButton:active {
      transform: scale(0.95);
      transition: transform 0.1s;
    }
    /* Simple fade-in animation class (can be applied as needed) */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fadeIn 0.3s ease forwards;
    }
    .shake {
      animation: shake 0.5s ease-in-out;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }
    /* Subtle grid for Home Screen */
    #homeScreen {
      background: var(--bg-color);
      background-image: 
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.05) 26%, transparent 27%, transparent 74%, rgba(255,255,255,0.05) 75%, rgba(255,255,255,0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.05) 26%, transparent 27%, transparent 74%, rgba(255,255,255,0.05) 75%, rgba(255,255,255,0.05) 76%, transparent 77%, transparent);
      background-size: 50px 50px;
    }
    /* Subtle grid for Chat Interface */
    #chatInterface {
      background-image: 
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.03) 25%, transparent 26%, transparent 74%, rgba(255,255,255,0.03) 75%, transparent 76%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.03) 25%, transparent 26%, transparent 74%, rgba(255,255,255,0.03) 75%, transparent 76%, transparent);
      background-size: 30px 30px;
    }
    /* Footer styling */
    footer {
      background: var(--section-bg);
      border-top: 1px solid var(--border-color);
    }