/* Modern Chat Interface CSS - Complete Version */
/* Base Reset & Variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Color Scheme */
  --primary: #5B8FB9;    /* Soft Azure */
  --secondary: #7C9D96;  /* Sage Green */
  --accent: #FFB562;     /* Warm Apricot */
  --text: #2D4356;       /* Deep Navy */
  --background: #F8F9FA; /* Crisp White */
  --surface: rgba(255,255,255,0.98);
  --border: rgba(0,0,0,0.08);

  /* Typography */
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Effects */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
}

/* Base Styles */
body {
  font-family: var(--font-base);
  line-height: 1.6;
  color: var(--text);
  background:
          linear-gradient(160deg, var(--background) 0%, #F1F3F5 100%),
          repeating-linear-gradient(
                  45deg,
                  rgba(91,143,185,0.03) 0px,
                  rgba(91,143,185,0.03) 20px,
                  rgba(124,157,150,0.03) 20px,
                  rgba(124,157,150,0.03) 40px
          );
  padding: 2rem;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1 {
  font-size: 2.75rem;
  color: var(--text);
  text-align: center;
  margin: 2rem 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-shadow: var(--shadow-sm);
}

/* Content Containers */
div:not([id]) {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(12px);
  box-shadow:
          var(--shadow-lg),
          0 2px 4px rgba(0,0,0,0.03);
  border: 1px solid rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

div:not([id]):hover {
  transform: translateY(-2px);
  box-shadow:
          0 12px 28px rgba(0,0,0,0.1),
          0 4px 8px rgba(0,0,0,0.05);
}

/* Form Elements */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0.025em;
}

select,
textarea,
input[type="file"] {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 2px solid #E9ECEF;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--text);
  background: rgba(255,255,255,0.95);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

select:focus,
textarea:focus,
input[type="file"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,143,185,0.15);
  outline: none;
}

/* Button System */
button {
  padding: 0.875rem 1.75rem;
  margin: 0 0.5rem 0.5rem 0;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
          135deg,
          var(--primary) 0%,
          color-mix(in srgb, var(--primary), #fff 15%) 100%
  );
  color: white;
  box-shadow: var(--shadow-md);
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
          120deg,
          rgba(255,255,255,0.15) 0%,
          rgba(255,255,255,0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91,143,185,0.2);
}

button:hover::before {
  opacity: 1;
}

button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Button Variants */
#askButton,
#generateQuizBtn,
#generateImageBtn {
  background-image: linear-gradient(
          135deg,
          var(--primary),
          #4A708B
  );
}

#toggleRecordingBtn,
#toggleSpeakBtn,
#pauseSpeakBtn {
  background-image: linear-gradient(
          135deg,
          var(--secondary),
          #668B7A
  );
}

#simplifyPromptBtn,
#processFileBtn {
  background-image: linear-gradient(
          135deg,
          var(--accent),
          #FF9F50
  );
}

/* Interactive Elements */
textarea[readonly] {
  background: rgba(249, 250, 251, 0.8);
  cursor: not-allowed;
}

#aiResponse,
#imagePrompt {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background: rgba(249, 250, 251, 0.9);
  border-radius: 12px;
  padding: 1rem;
  line-height: 1.7;
}

/* Media Containers */
#imageContainer {
  text-align: center;
  margin: 2rem 0;
  background: var(--surface);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

#imageContainer img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease;
}

#imageContainer img:hover {
  transform: scale(1.02);
}

/* Quiz Interface */
#quizContainer {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-lg);
}

.quiz-question {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.quiz-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin: 0.5rem 0;
  background: rgba(249, 250, 251, 0.9);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.quiz-option:hover {
  background: rgba(235, 244, 255, 0.9);
  transform: translateX(8px);
}

/* Accessibility Modes */
body.visualImpaired {
  background: #1A1A1A;
  color: #FFFFFF;
  background-image: none;
}

body.visualImpaired div:not([id]) {
  background: #2A2A2A;
  border-color: #3A3A3A;
}

body.visualImpaired button {
  background-image: none;
  background-color: #404040;
}

/* Animated Background Pattern */
@keyframes backgroundShift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 40px 40px; }
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
          repeating-linear-gradient(
                  45deg,
                  rgba(91,143,185,0.03) 0px,
                  rgba(91,143,185,0.03) 20px,
                  transparent 20px,
                  transparent 40px
          ),
          repeating-linear-gradient(
                  -45deg,
                  rgba(124,157,150,0.03) 0px,
                  rgba(124,157,150,0.03) 20px,
                  transparent 20px,
                  transparent 40px
          );
  background-size: 60px 60px, 40px 40px;
  animation: backgroundShift 40s linear infinite;
  opacity: 0.4;
  z-index: -1;
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.3;
  }

  button {
    width: 100%;
    margin: 0 0 1rem 0;
  }

  #quizContainer {
    padding: 1.5rem;
  }

  .quiz-option:hover {
    transform: none;
    background: rgba(249, 250, 251, 0.9);
  }
}

@media (max-width: 480px) {
  body {
    padding: 0.5rem;
  }

  div:not([id]) {
    padding: 1rem;
    border-radius: 12px;
  }
}
/* Add to :root section */
:root {
  /* Existing variables */
  --reading-bg: #fbf0d9;
  --reading-text: #5a4632;
}

/* Add new theme styles */
[data-theme="dark"] {
  --primary: #5B8FB9;
  --secondary: #7C9D96;
  --accent: #FFB562;
  --text: #e0e0e0;
  --background: #1a1a1a;
  --surface: rgba(30,30,30,0.98);
}

[data-theme="reading"] {
  --background: var(--reading-bg);
  --text: var(--reading-text);
  --surface: rgba(251,240,217,0.98);
}

/* Update body background */
body {
  background: var(--background);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Update theme toggle button styling */
#themeToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 25px;
  background: var(--surface);
  border: 1px solid var(--primary);
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}