/**
 * Main CSS Styles
 * Contains common styles used throughout the application
 * Note: CSS variables are defined in variables.css
 */

/* Theme-specific variables that extend variables.css */
:root {
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  --card-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --background-light: #ffffff;
  --background-dark: #1f1f1f;
  --text-light: #202124;
  --text-dark: #e8eaed;
  --gray-color: #5f6368;
}

/* Dark mode colors */
[data-theme="dark"] {
  --background-color: var(--background-dark);
  --text-color: var(--text-dark);
  --card-background: #2d2d2d;
}

/* Light mode colors */
[data-theme="light"] {
  --background-color: var(--background-light);
  --text-color: var(--text-light);
  --card-background: #ffffff;
}

/* Global styles */
body {
  margin: 0;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

button, input, select, textarea {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  font-family: var(--font-family);
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--primary-color);
  color: white;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn:active {
  opacity: 0.8;
  transform: translateY(0);
}

.btn-icon {
  margin-right: 0.5rem;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: white;
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-warning {
  background-color: var(--warning-color);
  color: white;
}

.btn-success {
  background-color: var(--success-color);
  color: white;
}

.btn-light {
  background-color: var(--light-color);
  color: var(--dark-color);
  border: 1px solid var(--border-color);
}

.btn-dark {
  background-color: var(--dark-color);
  color: var(--light-color);
}

/* Input styles */
.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.input-label {
  font-size: 14px;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.input-field {
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--card-background);
  color: var(--text-color);
  font-size: 14px;
  transition: border 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Card styles */
.card {
  background-color: var(--card-background);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  padding: 1rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: var(--card-shadow-hover);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.card-body {
  padding: 0.5rem 0;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

/* Grid and Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.col {
  flex: 1 1;
  padding: 0 0.5rem;
}

/* Utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
  
  .row {
    flex-direction: column;
  }
  
  .col {
    margin-bottom: 1rem;
  }
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Modern Spinner Styles */
.spinner {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(var(--primary-color-rgb), 0.1);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
}

.spinner::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;
}

/* Loading container for full-page loading states */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  gap: 1rem;
}

.loading-container .spinner {
  width: 32px;
  height: 32px;
  border-color: rgba(255, 255, 255, 0.1);
}

.loading-container .spinner::before {
  border-top-color: white;
}

/* Button spinner */
.action-button .spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* Verification spinner */
.verification-status .spinner {
  width: 28px;
  height: 28px;
  border-color: rgba(255, 255, 255, 0.1);
}

.verification-status .spinner::before {
  border-top-color: white;
}

/* Spinner Component Styles */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.spinner-text {
  font-size: 0.875rem;
  color: var(--text-color-secondary);
  text-align: center;
}

.loading-container .spinner-text {
  color: white;
  font-size: 1rem;
}

.chat-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.chat-input {
  flex: 1 1;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background-color: var(--accent-color);
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.send-button:disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
}

.send-button:not(:disabled):hover {
  background-color: var(--accent-hover-color);
}

/* Page Refresh Prompt Styles */
.page-refresh-prompt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.page-refresh-prompt {
  background-color: var(--card-background);
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.refresh-prompt-icon {
  margin-bottom: 1rem;
}

.page-refresh-prompt h3 {
  color: var(--text-color);
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

.page-refresh-prompt p {
  color: var(--text-color);
  margin: 0 0 2rem 0;
  line-height: 1.5;
  opacity: 0.8;
}

.refresh-prompt-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.refresh-prompt-buttons .action-button {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.refresh-prompt-buttons .action-button.primary {
  background-color: var(--primary-color);
  color: white;
}

.refresh-prompt-buttons .action-button.primary:hover {
  background-color: #1976d2;
  transform: translateY(-1px);
}

.refresh-prompt-buttons .action-button.secondary {
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.refresh-prompt-buttons .action-button.secondary:hover {
  background-color: var(--border-color);
  transform: translateY(-1px);
}
/* ========================================
   CSS Custom Properties (Variables)
   Scoobs Live Theme System
   ======================================== */

:root {
  /* === Primary Brand Colors === */
  --primary-color: #4285f4;      /* Main brand blue */
  --primary-color-dark: #3367d6;  /* Darker blue for hover states */
  --primary-rgb: 66, 133, 244;    /* Primary color RGB values */
  --secondary-color: #757575;     /* Gray for secondary elements */
  --accent-color: #ff9800;        /* Orange accent color */

  /* === Text Colors === */
  --text-color-primary: #333333;  /* Dark gray for main text */
  --text-color-secondary: #666666; /* Medium gray for secondary text */
  --text-primary: var(--text-color-primary);

  /* === Background Colors === */
  --bg-color: #ffffff;            /* White background */
  --bg-color-secondary: #f8f9fa;  /* Light gray secondary background */
  --bg-color-tertiary: #f1f3f4;   /* Slightly darker gray tertiary background */
  --bg-color-alt: #f5f5f5;        /* Alternative light gray background */
  --bg-color-hover: #e8eaed;      /* Background color for hover states */
  --background-primary: var(--bg-color);
  --background-disabled: #e9ecef;

  /* === Semantic Colors === */
  --error-color: #ea4335;         /* Red for error states */
  --success-color: #34a853;       /* Green for success states */
  --warning-color: #fbbc05;       /* Yellow for warning states */
  --info-color: #4285f4;          /* Blue for info states */
  --danger-color: var(--error-color);
  --disabled-color: #9e9e9e;      /* Gray for disabled elements */

  /* === UI Component Colors === */
  --border-color: #dadce0;        /* Light gray for borders */
  --card-bg: rgba(255, 255, 255, 0.95); /* Semi-transparent white for cards */
  --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */

  /* === Button Colors === */
  --button-bg: #4a6cf7;          /* Button background color */
  --button-text: white;          /* Button text color */
  --button-hover: #3a5ce5;       /* Button hover color */

  /* === Input Colors === */
  --input-bg: rgba(255, 255, 255, 0.9); /* Semi-transparent input background */
  --input-text: #333;            /* Input text color */

  /* === Control Colors === */
  --slider-bg: #e0e0e0;          /* Background for sliders */
  --scrollbar-track: #f1f1f1;    /* Scrollbar track color */
  --scrollbar-thumb: #c1c1c1;    /* Scrollbar thumb color */

  /* === Gradients === */
  --bg-gradient: linear-gradient(135deg, #667eea, #764ba2); /* Background gradient */

  /* === Insight Colors === */
  --insight-bg-even: #ffffff;        /* Even row background for insights */
  --insight-bg-odd: #f0f4f8;         /* Odd row background for insights */
  --insight-border: rgba(0, 0, 0, 0.1); /* Border color for insights */
  --insight-highlight: rgba(255, 255, 0, 0.15); /* Highlight color for insights */

  /* === Text on Color Combinations === */
  --text-on-primary: white;
  --text-on-secondary: white;
  --text-on-danger: white;
  --text-on-success: white;
  --text-on-warning: #333;
  --text-on-info: white;
  --text-on-light: #333;
  --text-on-dark: white;

  /* === Extended Color Palette === */
  --light-color: #f8f9fa;
  --dark-color: #343a40;

  /* === Dynamic Layout Variables === */
  --header-height-expanded: 160px;
  --header-height-collapsed: 120px;
  --header-height: var(--header-height-expanded);
}

/* ========================================
   Dark Mode Color Variables
   ======================================== */

.dark-mode {
  /* === Primary Brand Colors === */
  --primary-color: #6c9fff;
  --primary-color-dark: #5a8ae6;
  --primary-rgb: 108, 159, 255;
  --secondary-color: #4d5b7c;
  --accent-color: #ff9f43;

  /* === Text Colors === */
  --text-color-primary: #e1e5ee;
  --text-color-secondary: #a0a8b7;
  --text-primary: var(--text-color-primary);

  /* === Background Colors === */
  --bg-color: #1e2430;
  --bg-color-secondary: #2a3142;
  --bg-color-tertiary: #323c52;
  --bg-color-alt: #262f3d;
  --bg-color-hover: #3a4559;
  --background-primary: var(--bg-color);
  --background-disabled: #3a4559;

  /* === Semantic Colors === */
  --error-color: #ff6b6b;
  --success-color: #5cb85c;
  --warning-color: #ffb142;
  --info-color: #5bc0de;
  --danger-color: var(--error-color);
  --disabled-color: #4d5b7c;

  /* === UI Component Colors === */
  --border-color: #3a4559;
  --card-bg: rgba(42, 49, 66, 0.9);
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  /* === Button Colors === */
  --button-bg: #4a5568;
  --button-text: #e2e8f0;
  --button-hover: #2d3748;

  /* === Input Colors === */
  --input-bg: rgba(45, 55, 72, 0.9);
  --input-text: #e2e8f0;

  /* === Control Colors === */
  --slider-bg: #3a4559;
  --scrollbar-track: #2a3142;
  --scrollbar-thumb: #4d5b7c;

  /* === Gradients === */
  --bg-gradient: linear-gradient(135deg, #1a1c2c, #2d3748);

  /* === Insight Colors === */
  --insight-bg-even: #2a2a2a;
  --insight-bg-odd: #333333;
  --insight-border: rgba(255, 255, 255, 0.1);
  --insight-highlight: rgba(255, 255, 0, 0.1);
} 
/* Base page styles - ensures gradient covers entire page */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bg-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

/* Base Styles */
body { /* Combined from two definitions */
  background-color: var(--bg-color);
  color: var(--text-color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Layout Patterns === */
.flex-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* === Base Component Styles === */
.button-base {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  padding: 8px 16px;
  background-color: var(--button-bg);
  color: var(--button-text);
}

.button-base:hover:not(:disabled) {
  background-color: var(--button-hover);
  transform: translateY(-1px);
}

.button-base:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--disabled-color);
}

.input-base, /* Combined selectors with similar base input styles */
input[type="text"],
input[type="password"],
textarea,
select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  box-sizing: border-box; /* Ensure padding doesn't add to width */
}

.input-base:focus, /* Combined selectors with similar base input focus styles */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

input[type="text"]:hover, /* Combined hover styles */
input[type="password"]:hover,
textarea:hover,
select:hover {
  border-color: var(--primary-color);
}

.container-base {
  background: var(--bg-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.list-item-base {
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--bg-color-secondary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

/* === Common Animations === */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes spin { /* Consolidated from multiple definitions */
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes modalSlideIn { /* Consolidated from multiple definitions */
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes ripple {
  0% { transform: scale(0, 0); opacity: 0.5; }
  20% { transform: scale(25, 25); opacity: 0.3; }
  100% { opacity: 0; transform: scale(40, 40); }
}

@keyframes highlightNew {
  0% { background-color: var(--insight-highlight); transform: translateX(-10px); }
  100% { background-color: inherit; transform: translateX(0); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Container / General Layout === */
.container {
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 0px 30px;
  background: var(--bg-gradient);
  color: var(--text-color-primary);
  position: relative;
  overflow: hidden; /* Already defined on html, body, but keep for safety */
}

.live-insight-container {
  background: var(--bg-gradient);
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  padding: 0 10px 10px 10px;
  background: transparent; /* Make background transparent to show gradient */
  width: 100%;
  max-width: 100%;
  max-height: 650px;
  box-sizing: border-box;
  flex: 1 1; /* Take available space */
  min-height: 0; /* Allow shrinking */
  overflow: hidden; /* Prevent overflow */
}

/* Flexbox layout handles height automatically */

/* Section containers (Transcript & Insights areas) */
.section { /* Consolidated from multiple definitions */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-color);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* Ensure content doesn't overflow the section boundaries */
  margin-top: 0;
  margin-bottom: 10px;
}

.text-container { /* Consolidated from multiple definitions */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* CRITICAL: Allow flex shrinking for nested scroll to work */
  background: var(--bg-color);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  flex-grow: 1; 
  transition: height 0.3s ease; /* Smooth transition for height changes */
}

.analysis-list { /* Consolidated from multiple definitions */
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* Let children handle scrolling */
}

.insights-section { /* Consolidated */
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Contain content within section boundaries */
  position: relative;
  min-height: 0; /* Important for nested flex scrolling */
  /* Remove height: 100% - let flex handle sizing */
  /* padding: 0px 10px; Removed as .section usually has padding/structure */
  /* height: calc(100vh - 300px); Removed, use flex: 1 */
  /* max-height: 800px; Removed, let flex handle */
  /* min-height: 400px; Moved to .section */
}

@keyframes flyAndFadeOut {
  0% {
    left: -50px;
    opacity: 0;
  }
  /* Start fade-in and movement */
  20% { /* At 0.5s (20% of 2.5s total duration) */
    opacity: 1;
  }
  /* Movement continues, icon is visible */
  80% { /* At 2.0s (80% of 2.5s), movement should be complete */
    left: calc(100% - 60px); /* Corrected left for right-edge alignment */
    opacity: 1;
  }
  /* Start fade-out at destination (matches JS timeout for class removal)
     If JS timeout is 2.5s, and fade-out should happen within this,
     let's say fade-out starts at 1.5s and ends by 2.5s.
     1.5s / 2.5s = 60%
     2.5s / 2.5s = 100%
  */
  60% { /* At 1.5s */
    /* Ensure left is at destination if not already fully there */
    left: calc(100% - 60px);
    opacity: 1; /* Still opaque */
  }
  100% { /* At 2.5s */
    left: calc(100% - 60px); /* Stays at destination */
    opacity: 0; /* Faded out */
  }
}

.insight-animation-icon {
  position: absolute;
  top: 10px;
  left: -50px;
  width: 60px;
  height: 40px;
  opacity: 0;
  transition: left 2s ease-in-out, opacity 0.5s ease-in-out; /* Handles both directions */
  z-index: 99999;
}

.insight-animation-icon.animate {
  left: calc(100% - 60px); /* Corrected for icon width for right-edge alignment */
  opacity: 1;
  /* No 'transition' property here; it will use the base class's transition */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: var(--bg-color-tertiary);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: visible;
}

.section-header h3, h2 { /* Combined h2 and section-header h3 */
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color-primary);
  display: flex; /* Added from h2 */
  align-items: center; /* Added from h2 */
  gap: 6px; /* Added from h2 */
}

/* === Header === */
.header-section { /* Consolidated */
  position: relative;
  z-index: 1000;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
  width: 100%;
  overflow: visible !important;
  margin-bottom: 20px;
}

/* Apply collapsed header height at the container level so all children inherit it */
.live-insight-container.header-collapsed {
  --header-height: var(--header-height-collapsed);
}

.header-section.collapsed {
  margin-bottom: 30px; /* Adjusted from 30px, check if this overrides the 20px above */
}

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  padding: 0 16px;
  width: 100%;
  overflow: visible;
  background: var(--bg-gradient); /* Inherited from container, but explicit here */
}

.header-top-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; /* Added to help center title */
  align-items: center; /* Added to help center title */
  justify-content: center; /* Added to help center title */
}

.header-content { /* For potential inner content alignment */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  position: relative;
  z-index: 1001;
  overflow: visible !important;
}

.header-left {
  position: absolute; /* Take out of flow for centering */
  left: 16px; /* Match padding */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 1010;
}

.header-right {
  position: absolute; /* Take out of flow for centering */
  right: 16px; /* Match padding */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1001;
}

.app-logo {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  margin-right: 10px; /* Added space */
  /* display: none; Was hidden, keep hidden? Let\'s show it */
  display: inline-block; /* Make it visible next to title */
  vertical-align: middle; /* Align with title */
}

.app-title-container { /* Likely redundant, keep hidden */
  display: none;
}

.app-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: white;
  text-align: center; /* Already centered by flexbox on parent */
  /* justify-content: center; Removed, handled by parent */
  margin: 0 auto; /* Center horizontally */
  padding: 0;
  position: relative;
  display: inline-block;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.app-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, transparent);
  transform: scaleX(0.8);
  opacity: 0.7;
}

/* Hamburger Menu */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 20px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2001; /* Ensure it's above the side panel */
  margin-right: 15px; /* Space between hamburger and title/logo if logo is shown */
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: white; /* Default light mode */
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-menu:hover {
  opacity: 0.8;
}

.hamburger-menu.open span:first-child {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.open span:last-child {
  transform: translateY(-9px) rotate(-45deg);
}

/* User Avatar & Dropdown */
.user-avatar-container { /* Combined from .header-section .user-avatar-container */
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the avatar horizontally */
  padding: 8px;
  border-radius: 50px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 1004;
  width: 40px; /* Set fixed width */
  height: 40px; /* Set fixed height */
}

/* Base user avatar styles */
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  width: 100%;
  height: 100%;
  text-align: center;
}

.user-avatar-container:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.user-avatar-container:active {
  transform: translateY(0);
}

.user-avatar-container .user-info { /* Combined from .header-section .user-avatar-container .user-info */
  position: absolute;
  top: calc(100% + 10px); /* Increased gap */
  right: 0;
  transform: translateY(10px);
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  min-width: 240px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
              rgba(0, 0, 0, 0.1) 0px 5px 10px,
              rgba(0, 0, 0, 0.2) 0px 15px 40px;
  opacity: 0;
  visibility: hidden;
  color: #333333;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-avatar-container:hover .user-info { /* Combined */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 11000; /* Ensure it's above everything */
}

.user-avatar-container .user-info::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10000 !important; /* Above dropdown content */
}

@media (max-height: 600px) { /* Combined */
  .user-avatar-container .user-info {
    top: auto;
    bottom: calc(100% + 10px); /* Increased gap */
    transform: translateY(-10px);
  }

  .user-avatar-container:hover .user-info {
    transform: translateY(0);
  }

  .user-avatar-container .user-info::before {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
    /* z-index: 3001; Removed, already high */
  }
}

.user-avatar-container .user-email { /* Combined */
  font-size: 0.9rem;
  color: #333333;
  padding: 8px;
  width: 100%;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
  box-sizing: border-box;
  flex-shrink: 0;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
}

.avatar-option {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-option:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.avatar-option.selected {
  background: #e3e8ff;
  border-color: #667eea;
}

.sign-out-button { /* Combined from multiple definitions */
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 100px;
  border-radius: 6px;
  background: var(--button-bg);
  color: white; /* Changed from var(--button-text) for clarity */
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0; /* Added from dropdown version */
  position: relative; /* Added from dropdown version */
  margin-top: 10px; /* Added from dropdown version */
  z-index: 10001 !important; /* Added from dropdown version */
}

.sign-out-button:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
}

.sign-out-button:active {
  background: var(--button-hover);
  background: var(--button-active, var(--button-hover)); /* Use variable or fallback */
  transform: translateY(0);
}

/* === Side Panel === */
body.side-panel-open-no-scroll { overflow: hidden !important; }
html.side-panel-open-no-scroll { overflow: hidden !important; }

.side-panel { /* Consolidated */
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  height: -webkit-fill-available; /* For iOS Safari */
  height: 100svh; /* Preferred: Small Viewport Height, accounts for dynamic browser bars */
  background: var(--bg-color);
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  z-index: 2000;
  overflow-y: auto;
  overflow-x: visible; /* Allow dropdowns to extend horizontally */
  box-sizing: border-box;
  /* Scrollbar styles moved to consolidated section */
}

.side-panel.open { /* Consolidated */
  left: 0;
}

.side-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1999;
}

.side-panel-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.side-panel-content { /* Consolidated */
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow content to grow and fill available space */
  min-height: 0; /* Allow content to shrink */
  overflow-y: auto; /* Allow scrolling within content */
  overflow-x: visible; /* Allow horizontal overflow for dropdowns */
  box-sizing: border-box; /* Ensure padding is included */
  /* Scrollbar styles moved to consolidated section */
}

.side-panel-content h3 {
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color-primary);
  font-size: 1.2rem;
}

.side-panel-section { /* Consolidated */
  margin-bottom: 24px;
}

.side-panel-section h4 {
  margin: 0 0 12px 0;
  color: var(--text-color-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Side panel footer for controls */
.side-panel-footer {
  margin-top: auto;
  padding-top: 10px; /* Reduced from 20px */
  border-top: 1px solid var(--border-color);
}

/* Settings within Side Panel */
.setting-item { /* Consolidated */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0; /* Reduced vertical padding from 12px */
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child { /* Consolidated */
  border-bottom: none;
  /* Reduce margin before sign out */
  /* margin-top: 16px; */ 
}

.setting-item label {
  color: var(--text-color-primary);
  font-size: 0.85rem; /* Slightly smaller font */
  display: flex;
  align-items: center;
  gap: 6px; /* Slightly reduced gap */
  cursor: pointer;
}

/* Reduce margin on sign out button itself */
.side-panel-footer .sign-out-button {
    margin-top: 10px; /* Reduced from original implicit margin */
}

/* Language/Engine Selectors specific padding adjustment */
/* Only apply to traditional select elements, not our new component */
select.language-select,
.engine-select {
    width: 100%; /* Ensure full width in side panel */
    padding: 6px 10px; /* Reduced padding */
    font-size: 0.85rem; /* Slightly smaller font */
    /* Ensure right padding for arrow */
    padding-right: 28px !important; 
}

/* Toggle Switch Style */
.setting-item input[type="checkbox"] {
  width: 40px;
  height: 20px;
  position: relative;
  -webkit-appearance: none;
          appearance: none;
  background: var(--bg-color-primary);
  background-color: gray;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Prevent shrinking */
}

.setting-item input[type="checkbox"]:checked {
  background: var(--primary-color);
}

.setting-item input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background: var(--bg-color);
  transition: all 0.3s ease;
}

.setting-item input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

 /* Enhanced Disabled Styling */
 .setting-item input[type="checkbox"]:disabled {
  background: var(--bg-color-alt); /* More distinct disabled background */
  border-color: var(--border-color);
  opacity: 0.6; /* Keep some opacity */
  cursor: not-allowed;
}

.setting-item input[type="checkbox"]:disabled::before {
  background: var(--border-color); /* Dim the knob significantly */
  box-shadow: none;
}

/* Apply not-allowed cursor to the whole item when disabled */
.setting-item:has(input:disabled) {
    cursor: not-allowed;
}

/* Session History in Side Panel */
.session-history {
  flex: 1 1; /* Allow it to take remaining space */
  display: flex; /* Enable flex properties */
  flex-direction: column; /* Stack header and list */
  overflow: hidden; /* Prevent content from overflowing this container */
  margin-bottom: 24px; /* Consistent spacing */
  /* Removed fixed border-bottom */
  /* Removed min-height */
}

.section-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0; /* Prevent header from shrinking */
}

/* Reuse .side-panel-section h4 style */
.section-header-with-action h4 {
  margin: 0;
  color: var(--text-color-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Remove specific padding/font-size from individual button */
.save-session-button,
.new-session-button, /* Assuming similar base style was needed */
.refresh-sessions-button { /* Assuming similar base style was needed */
  /* Remove text-specific styles */
  /* font-size: 0.8rem; */
  /* padding: 4px 8px; */

  /* Keep general styles if needed */
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Generic Icon Button Style */
.icon-button {
  width: 32px;  /* Fixed width */
  height: 32px; /* Fixed height */
  padding: 0;   /* Remove padding */
  font-size: 1rem; /* Adjust icon size if needed */
  display: inline-flex; /* Ensure icon centers */
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Make circular */
}

.icon-button svg {
  display: block; /* Helps with alignment sometimes */
}

/* Specific hover/disabled for save button (can be combined if others are the same) */
.save-session-button:hover:not(:disabled),
.new-session-button:hover:not(:disabled),
.refresh-sessions-button:hover:not(:disabled) {
  background: var(--primary-color-dark);
  transform: translateY(-1px);
}

.save-session-button:disabled,
.new-session-button:disabled, /* Apply disabled style if applicable */
.refresh-sessions-button:disabled { /* Apply disabled style if applicable */
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--disabled-color); /* Use disabled color */
  transform: none; /* Prevent hover effect */
}

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1; /* Allow list to grow */
  overflow-y: auto; /* Enable scrolling for the list itself */
  /* Explicitly set height to 0 to ensure flex-grow works correctly */
  height: 0; 
  /* Removed max-height */
  /* Apply scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sessions-list::-webkit-scrollbar { width: 6px; }
.sessions-list::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.sessions-list::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; }


.session-item {
  padding: 6px; /* Further reduced for ultra-compact layout */
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px; /* Slightly smaller radius for compactness */
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-bottom: 4px; /* Minimal spacing between items */
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtler shadow */
}

.session-item:hover {
  background: var(--bg-color-hover);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.session-item.current-session {
  border: 2px solid var(--primary-color);
  background: var(--bg-color-hover);
  box-shadow: 0 2px 12px rgba(108, 159, 255, 0.3);
}

.session-item.current-session::before {
  content: '●';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  font-size: 12px;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.session-title {
  display: inline-block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-color-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px); /* Allow space for the edit button */
}

.session-date {
  font-size: 0.8rem;
  color: var(--text-color-secondary);
  display: block; /* Ensure it takes full width */
}

.loading-sessions,
.no-sessions { /* Combined styles for placeholder text */
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  padding: 10px;
  text-align: center;
  font-style: italic;
}

.loading-sessions {
  display: flex;
  align-items: center;
  justify-content: center; /* Center spinner and text */
  gap: 8px;
}


/* Adjust main content when side panel is open */
.container.side-panel-open {
  /* margin-left: 300px; Might not be needed if panel overlays */
  transition: margin-left 0.3s ease; /* Keep transition */
}

/* === Collapsible Header Content === */
.collapsible-content {
  padding: 20px 15px;
  display: flex;
  flex-direction: column; /* Default, adjust if needed */
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-color);
  border-radius: 0 0 8px 8px; /* Rounded bottom corners */
  position: relative;
  z-index: 900; /* Below header but above main content */
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 1px solid var(--border-color); /* Add top border */
}

.collapsible-content.hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border-top: none; /* Hide border when collapsed */
  transition: all 0.3s ease;
}

.collapse-toggle {
  position: absolute;
  bottom: -18px; /* Position overlapping the bottom edge */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Precise centering */
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001; /* Above header content */
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  color: var(--text-color-primary);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.collapse-toggle:hover {
  color: orange;
  font-weight: bold;
}

/* === Context Section (API Key, Meeting Context, etc.) === */
.context-section {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Increased gap */
  padding: 10px 0px 0px 0px; /* Keep top padding only */
  background: transparent;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* API Key Section */
.api-key-section {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap */
  align-items: center; /* Changed this from flex-start */
  gap: 15px;
  padding: 10px 15px;
  background-color: var(--bg-color-secondary);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px; /* Rounded bottom corners if header isn't collapsed */
}

.api-input-container {
  position: relative;
  flex: 2 1; /* Takes more space */
  min-width: 200px;
}

.api-key-input { /* Specific styling for API key input */
  width: 100%;
  padding: 8px 32px 8px 12px; /* Space for indicator */
  border-radius: 8px; /* Match base input */
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--input-text);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

 /* Inherits focus from base input */ 
/* .api-key-input:focus {} */

.api-key-input.valid {
  border-color: var(--success-color);
  background-color: rgba(52, 168, 83, 0.1);
  background-color: rgba(var(--success-rgb, 52, 168, 83), 0.1); /* Define --success-rgb or use hex */
}

.api-key-input.invalid {
  border-color: var(--error-color);
  background-color: rgba(234, 67, 53, 0.1);
  background-color: rgba(var(--error-rgb, 234, 67, 53), 0.1); /* Define --error-rgb or use hex */
}

.api-key-input.validating {
  border-color: var(--warning-color);
  background-color: rgba(251, 188, 5, 0.1);
  background-color: rgba(var(--warning-rgb, 251, 188, 5), 0.1); /* Define --warning-rgb or use hex */
}

.api-status-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.api-status-indicator.valid { color: var(--success-color); }
.api-status-indicator.invalid { color: var(--error-color); }
.api-status-indicator.validating { color: var(--warning-color); }
.api-status-indicator.idle .idle-indicator { color: var(--text-color-secondary); }

.api-key-warning {
  position: absolute;
  bottom: -20px; /* Position below the input */
  left: 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-color-secondary);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0px; /* Remove side padding */
  border-radius: 4px;
  margin-top: 4px;
}

.api-key-warning::before {
  content: '⚠️';
  font-size: 0.8rem;
}

.api-selectors {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 1 1; /* Takes less space */
}

/* Base select styling - using CSS gradient arrow to avoid SVG minimizer issues */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(1em - 2px), calc(100% - 10px) calc(1em - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px !important; /* Ensure space for arrow */
  cursor: pointer;
}

.api-provider-select,
.api-model-select { /* Specific overrides for API selectors */
  padding: 8px 32px 8px 12px; /* Re-apply padding */
  border-radius: 4px; /* Smaller radius */
  background-color: var(--bg-color-secondary); /* Specific background */
  color: var(--text-color-primary);
  font-size: 0.9rem;
  flex: 1 1;
  min-width: 120px;
  /* Inherits base select styles (border, transition, focus, arrow) */
}

.api-provider-select:hover,
.api-model-select:hover { /* Specific hover */
  border-color: var(--primary-color);
}

select option { /* Base option styling */
  background-color: var(--bg-color);
  color: var(--text-color-primary);
}

.api-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.test-api-button,
.clear-api-button { /* Combined styles for smaller action buttons */
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.85rem;
  border-radius: 4px;
  background-color: var(--button-bg);
  color: var(--button-text);
  flex-shrink: 0;
  width: auto;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer; /* Added */
}

.test-api-button:hover:not(:disabled),
.clear-api-button:hover:not(:disabled) {
  background-color: var(--button-hover);
  transform: translateY(-1px);
}

.test-api-button:disabled,
.clear-api-button:disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
  opacity: 0.7;
}

.clear-api-button {
  background-color: var(--error-color);
}

.clear-api-button:hover:not(:disabled) {
  background-color: #dc2626; /* Darker red */
}


/* Meeting Context Textarea */
.meeting-context {
  width: 100%;
  min-height: 50px;
  height: 50px; /* Set initial height */
  padding: 12px;
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-color-primary);
  font-size: 0.9rem;
  resize: vertical;
  line-height: 1.5;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto; /* Use auto for scrollbar */
}

/* Inherits from base input hover */ 
/* .meeting-context:hover { } */
 /* Inherits from base input focus */ 
/* .meeting-context:focus {} */

/* === Upload Area (Unified) === */
.unified-upload {
  margin: 0; /* Remove all margins */
  padding: 0; /* Remove padding from container - move to content */
  border-top: 1px solid var(--border-color);
  background: var(--bg-color-secondary);
  transition: all 0.3s ease;
  position: relative;
  border-radius: 0 0 8px 8px; /* Keep bottom radius for text-container */
  /* Ensure no overflow hidden here */
  overflow: visible;
  /* Anchor to bottom of text-container */
  flex-shrink: 0; /* Don't shrink when space is limited */
  margin-top: auto; /* Push to bottom using flexbox */
}

.unified-upload.collapsed {
  padding: 0;
  height: 24px; /* Height for the toggle button */
  overflow: hidden;
  border-top: none; /* Hide border when collapsed */
}

.toggle-upload-button {
  position: absolute;
  top: 0; /* Align with the top of the container */
  right: 10px;
  background: var(--bg-color-secondary); /* Match upload area background */
  border: 1px solid var(--border-color);
  border-bottom: none; /* Remove border shared with area */
  border-radius: 4px 4px 0 0; /* Round top corners */
  color: var(--text-color-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 8px; /* Adjusted padding */
  transition: color 0.2s ease;
  z-index: 5;
  /* Extend above the container while keeping button at container top */
  margin-top: -13px; /* Move the button up while keeping its positioning reference */
}

.unified-upload.collapsed .toggle-upload-button {
    top: 0; /* Reset position when collapsed */
    border: none; /* No border when collapsed */
    border-radius: 4px; /* Normal radius */
}


.toggle-upload-button:hover {
  color: var(--primary-color);
}

.unified-upload.dragging-over {
  border-color: var(--primary-color);
  background: var(--bg-color-hover);
}

.upload-section-content {
  margin: 0; /* Remove all margins */
  padding: 8px 10px; /* Move padding from unified-upload container to content */
  display: flex;
  flex-direction: column;
  gap: 8px; /* Keep small gap */
}

.upload-title {
  display: flex;
  align-items: center;
  gap: 6px; /* Reduced gap */
  font-size: 0.9rem;
  color: var(--text-color-primary);
  font-weight: 500;
  margin-bottom: 4px; /* Small space below title */
}

.upload-options {
  margin-bottom: 4px; /* Reduced margin */
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-color-secondary);
}

.upload-option {
  color: var(--text-color-secondary); /* Base color */
}

.clickable-upload {
  padding: 3px 6px; /* Reduced padding */
}

.url-input-section {
  display: flex; 
  align-items: center; 
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-bottom: 0;
}

.url-input {
  flex: 1 1; /* Allow input to grow */
  padding: 6px 12px; /* Adjust padding */
  height: 32px; 
  border: 1px solid var(--border-color);
  border-right: none; /* Remove right border */
  border-radius: 16px 0 0 16px !important; /* Rounded left corners - high value */
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 0.85rem;
  min-width: 0; 
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.url-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1); /* Subtle focus */
  z-index: 2; 
  position: relative; 
}

.small-button { 
  height: 32px; 
  flex-shrink: 0; 
  padding: 6px 12px; /* Match input vertical padding */
  border-radius: 0 16px 16px 0 !important; /* Rounded right corners - high value */
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-bg); /* Use button bg for border */
  border-left: none; /* Remove left border to join with input */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.small-button:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}

/* --- Image Specific Styles --- */

.image-list .image-thumbnail-container {
  display: flex;
  flex-wrap: wrap; /* Allow thumbnails to wrap */
  gap: 8px; /* Reduced spacing */
  padding-left: 0; /* Align with list text */
}

.image-thumbnail-wrapper {
  position: relative; 
  border: 1px solid var(--border-color);
  padding: 2px;
  background-color: var(--bg-color-secondary);
  border-radius: 4px; /* Slightly rounded corners */
  overflow: hidden; /* Clip remove button if needed */
}

.image-thumbnail {
  display: block; 
  width: 50px; /* Slightly smaller width */
  height: 50px; /* Slightly smaller height */
  object-fit: cover; 
  cursor: help; 
  border-radius: 3px; /* Inner radius */
}

.image-remove-btn {
  position: absolute;
  top: -6px; /* Position slightly outside */
  right: -6px;
  background-color: rgba(40, 40, 40, 0.75); /* Darker background for visibility */
  color: #fff; 
  border-radius: 50%; 
  width: 16px; /* Smaller button */
  height: 16px;
  font-size: 11px; /* Smaller font */
  line-height: 16px; /* Center the cross */
  text-align: center;
  padding: 0;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.image-thumbnail-wrapper:hover .image-remove-btn {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Dark Mode Specific Overrides --- */

.dark-mode .url-input {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .small-button {
  background-color: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-text);
}
.dark-mode .small-button:hover {
  background-color: var(--button-hover);
  border-color: var(--button-hover);
}

.dark-mode .image-thumbnail-wrapper {
  background-color: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .image-remove-btn {
   background-color: rgba(60, 60, 60, 0.85); /* Adjusted dark background */
   color: #eee;
}


/* ... rest of the styles ... */

/* --- Added Resources Display --- */
.added-resources-display {
  margin-top: 8px; /* Small margin above */
  padding-top: 8px; /* Reduced padding */
  border-top: 1px solid var(--border-color);
  max-height: 200px; /* Increased max height slightly */
  overflow-y: auto;  /* Ensure vertical scroll */
  width: 100%;
  /* Explicit scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.added-resources-display::-webkit-scrollbar {
  width: 6px;
}

.added-resources-display::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

.added-resources-display::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

.resource-list {
  margin-bottom: 8px;
}

.resource-list h5 {
  margin-bottom: 4px; /* Reduced margin */
  font-size: 0.8rem; /* Slightly smaller */
  color: var(--text-color-secondary); /* Use secondary color for labels */
  font-weight: 600;
}

.resource-list ul {
  list-style: none;
  padding-left: 0; /* Remove padding */
  margin: 0;
}

.resource-list li {
  display: flex;
  align-items: center;
  font-size: 0.85rem; /* Restore size */
  margin-bottom: 4px; /* Restore margin */
  padding: 2px 0;
  gap: 6px; /* Add gap for icon */
}

.resource-list li span { /* Style for the name */
   color: var(--text-color-primary);
   margin-left: 0; /* Remove margin if gap is used */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-grow: 1; /* Allow name to take space */
}

.resource-list li svg {
   flex-shrink: 0;
}

.dark-mode .resource-list li,
.dark-mode .resource-list li span {
  color: var(--text-color-primary);
}

.dark-mode .resource-list li svg {
  color: var(--text-color-secondary); 
}

.dark-mode .resource-list li.resource-item {
  display: flex;
  align-items: center;
  gap: 6px; /* Space between checkbox, label, and remove button */
  margin-bottom: 4px; /* Increased margin slightly for checkbox */
  padding: 2px 0; 
}

.resource-item input[type="checkbox"] {
  flex-shrink: 0; /* Prevent checkbox from shrinking */
  margin: 0; /* Remove default margin */
  cursor: pointer;
  /* Optional: Add custom checkbox styling */
  /* appearance: none; 
  width: 16px; 
  height: 16px; 
  border: 1px solid var(--border-color);
  border-radius: 3px; 
  position: relative; */
}

/* Optional custom checkbox checked state */
/* .resource-item input[type="checkbox"]:checked::before { 
  content: '\2713'; 
  position: absolute; 
  top: 0; left: 2px; 
  color: var(--primary-color); 
  font-size: 14px; 
}*/

.resource-item .resource-label {
  display: flex;
  align-items: center;
  gap: 6px; /* Space between icon and text */
  flex-grow: 1; /* Allow label to take available space */
  cursor: pointer; /* Make label clickable for checkbox */
  overflow: hidden; /* Prevent long names from overflowing */
}

.resource-item .resource-label .resource-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem; /* Slightly larger for readability */
}


.resource-item .remove-resource-btn {
  flex-shrink: 0; /* Prevent button from shrinking */
  margin-left: auto; /* Keep button pushed to the right */
}

/* Image Checkbox Specifics */
.image-thumbnail-wrapper {
  position: relative; 
  display: block; /* Change back from flex */
  border: 1px solid var(--border-color);
  padding: 2px;
  background-color: var(--bg-color-secondary);
  border-radius: 4px; 
  overflow: visible; /* Allow controls to sit outside */
  margin: 8px; /* Add margin to prevent overlap */
}

.image-select-checkbox {
  position: absolute;
  top: -8px; 
  left: -8px;
  z-index: 5; 
  cursor: pointer;
  margin: 0;
  /* Basic size */
  width: 16px;
  height: 16px;
}

.image-select-label { /* Label now just wraps the image */
  cursor: pointer; 
  display: block; 
}

.image-thumbnail {
  display: block; 
  width: 50px; 
  height: 50px; 
  object-fit: cover; 
  border-radius: 3px; 
}

.image-remove-btn {
  position: absolute;
  top: -8px; /* Align vertically with checkbox */
  right: -8px;
  z-index: 6; /* Above checkbox */
  background-color: rgba(40, 40, 40, 0.75); 
  color: #fff; 
  border-radius: 50%; 
  width: 16px; 
  height: 16px;
  font-size: 11px; 
  line-height: 16px; 
  text-align: center;
  padding: 0;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
}
.image-thumbnail-wrapper:hover .image-remove-btn {
  opacity: 1;
  transform: scale(1.1);
}

.dark-mode .image-thumbnail-wrapper {
  background-color: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .image-remove-btn {
   background-color: rgba(60, 60, 60, 0.85); 
   color: #eee;
}


/* ... existing styles ... */

/* --- Added Resources Display --- */

/* Removed empty duplicate resource-item selector */

/* Insight Controls */
.insight-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary); /* Match dark mode naming */
  border-radius: 6px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color); /* Add separator */
  flex-shrink: 0; /* Prevent shrinking */
}

.manual-insight-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 200px; /* Ensure button and toggle have space */
}

.get-insight-button,
.transcript-insights-button,
.frequency-apply-button { /* Combine similar button styles */
  padding: 8px 16px;
  border-radius: 22px;
  border: 1px solid transparent;
  background: var(--button-bg);
  color: var(--button-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.get-insight-button:disabled,
.transcript-insights-button:disabled,
.frequency-apply-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.transcript-insights-button {
  background-color: var(--success-color); /* Use success color as fallback */
  margin-left: 8px;
}

.transcript-insights-button:hover:not(:disabled) {
  filter: brightness(90%); /* Simple hover effect */
}


.auto-insight-label { /* Styling for the checkbox label */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-color-primary); /* Set base color */
  font-size: 0.9rem; /* Match button font size */
}

/* Assuming a checkbox is inside the label */
.auto-insight-label input[type="checkbox"] {
   margin-right: 0.5rem; /* Space between checkbox and text */
  cursor: pointer;
}


.insight-frequency-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1; /* Allow it to grow */
  min-width: 200px; /* Minimum width */
}

.insight-frequency-section label { /* Label for the slider */
  color: var(--text-color-primary);
  transition: opacity 0.2s ease;
  white-space: nowrap;
  font-size: 0.9rem; /* Match other controls */
}

.insight-frequency-section label.disabled,
.insight-frequency-section:has(.frequency-slider:disabled) label {
  opacity: 0.4;
  cursor: not-allowed;
}

.frequency-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1; /* Take available space within section */
  min-width: 150px; /* Ensure slider and value fit */
}

/* Insight Language Selector */
.insight-language-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
}

.insight-language-section label {
  color: var(--text-color-primary);
  white-space: nowrap;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.insight-language-select {
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-color-primary);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  max-width: 170px;
  transition: border-color 0.2s ease;
}

.insight-language-select:hover {
  border-color: var(--accent-color);
}

.insight-language-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 99, 102, 241), 0.15);
}

.frequency-slider {
  flex: 1 1;
  height: 4px;
  border-radius: 2px;
  background: var(--slider-bg); /* Use slider variable */
  outline: none;
  opacity: 1;
  transition: opacity 0.2s;
  min-width: 100px; /* Minimum width for usability */
  cursor: pointer;
  appearance: none; /* Override default */
  -webkit-appearance: none; /* Override default */
}

/* Webkit specific slider thumb */
.frequency-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 14px; /* Thumb width */
  height: 14px; /* Thumb height */
  background: var(--primary-color); /* Thumb color */
  border-radius: 50%; /* Make it round */
  cursor: pointer;
}

/* Firefox specific slider thumb */
.frequency-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  border: none; /* Remove default border */
}


.frequency-slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.frequency-slider:disabled::-webkit-slider-thumb { background: var(--disabled-color); }
.frequency-slider:disabled::-moz-range-thumb { background: var(--disabled-color); }


.frequency-value {
  min-width: 4ch; /* Ensure space for "60 s" */
  text-align: right;
  white-space: nowrap;
  color: var(--text-color-primary);
  font-size: 0.9rem;
}

.frequency-apply-button {
  flex-shrink: 0; /* Prevent button from shrinking */
  border-radius: 22px;
}


/* Insights List */
.insights-list { /* Consolidated */
  flex: 1 1; /* Take remaining space */
  overflow-y: auto;
  padding: 12px; /* Reduced padding for more compact layout */
  padding-bottom: 0; /* Remove bottom padding to connect with chat-box */
  margin: 0; /* Remove any default margins */
  min-height: 0; /* Needed for flex scrolling */
  max-height: none !important; /* Ensure no max-height constraints, override inline styles */
  text-align: left; /* Ensure content aligns left */
  display: flex; /* Enable flex layout for insight batches */
  flex-direction: column; /* Stack insight batches vertically */
  transition: max-height 0.3s ease;
}

.insight-batch { /* Consolidated */
  padding: 12px;
  border-bottom: 1px solid var(--insight-border);
  background: var(--insight-bg-even);
  color: var(--text-color-primary);
  text-align: left; /* Ensure content aligns left */
  flex-shrink: 0; /* Prevent insight batches from shrinking */
}

/* Add spacer to fill remaining space when there are few insights */
.insights-list::after {
  content: '';
  flex: 1 1; /* Fill remaining space */
  min-height: 20px; /* Minimum height to ensure some space */
}

.insights-list .insight-batch:nth-child(odd) { /* Consolidated */
  background: var(--insight-bg-odd);
}

.new-insight {
  animation: highlightNew 2s ease-out;
}

.insight-batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  flex-direction: row;
  margin-left: -23px;
}

.insight-batch-timestamp { /* Consolidated */
  font-size: 0.85em;
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.insight-delete-button {
  background: none;
  background-color: var(--error-color);
  border: none;
  color: #000000;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 50%;
  font-size: 0.9em;
  opacity: 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Show delete button on hover for desktop */
.insight-batch:hover .insight-delete-button {
  opacity: 1;
}

.insight-delete-button:hover {
  background-color: var(--error-color);
  color: white;
  transform: scale(1.1);
}

/* Always show delete buttons on touch devices */
@media (hover: none) and (pointer: coarse) {
  .insight-delete-button {
    opacity: 0.6;
  }
  
  .insight-delete-button:active {
    opacity: 1;
    background-color: var(--error-color);
    color: white;
    transform: scale(1.1);
  }
}

/* Alternative: Show on smaller screens (mobile/tablet) */
@media (max-width: 1024px) {
  .insight-delete-button {
    opacity: 0.6;
  }
}

.insight-provider {
  font-size: 0.85em;
  color: var(--text-color-secondary);
  opacity: 0.8;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.insight-provider .provider-icon {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.insight-provider .provider-name {
  font-weight: 500;
  color: var(--text-color-primary);
  opacity: 0.9;
}

.insight-provider .model-name {
  font-size: 0.9em;
  color: var(--text-color-secondary);
  opacity: 0.7;
  font-weight: 400;
  margin-left: 2px;
}

/* Provider-specific icon animations and styling */
.insight-provider .google-icon {
  animation: rotate 4s linear infinite;
}

.insight-provider .openai-icon {
  animation: pulse 2s ease-in-out infinite;
}

.insight-provider .openai-icon path {
  fill: #000000;
}

.dark-mode .insight-provider .openai-icon path {
  fill: #ffffff;
}

.insight-provider .huggingface-icon {
  animation: bounce 2s ease-in-out infinite;
}

.insight-provider .liveinsight-icon {
  animation: wink 3s ease-in-out infinite;
  border-radius: 2px;
}

.insight-provider .default-icon {
  animation: pulse 2s ease-in-out infinite;
}

/* Custom animations for provider icons */
/* Provider logo animations DISABLED per user request */
/*
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  60% { transform: translateY(-1px); }
}

@keyframes wink {
  0%, 90%, 100% { transform: scale(1); }
  95% { transform: scale(1.1); }
}
*/

/* Hover effects - DISABLED per user request */
/*
.insight-provider:hover .provider-icon {
  transform: scale(1.2);
}

.insight-provider:hover .google-icon {
  animation-duration: 1s;
}

.insight-provider:hover .openai-icon,
.insight-provider:hover .default-icon {
  animation-duration: 0.5s;
}

.insight-provider:hover .huggingface-icon {
  animation-duration: 1s;
}

.insight-provider:hover .liveinsight-icon {
  animation-duration: 1.5s;
}
*/

/* Dark mode adjustments */
.dark-mode .insight-provider {
  opacity: 0.7;
}

.dark-mode .insight-provider .provider-name {
  color: var(--text-color-primary);
  opacity: 0.8;
}

.dark-mode .insight-provider .model-name {
  color: var(--text-color-secondary);
  opacity: 0.6;
}

.dark-mode .insight-provider .default-icon path {
  fill: #cccccc;
}

.insight-point { /* Consolidated */
  margin: 4px 0;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-color-primary); /* Base color */
}

.insight-point .icon {
  flex-shrink: 0;
  font-size: 1.1em;
  margin-top: 2px; /* Align icon slightly better with text */
}

.insight-point .content {
  flex-grow: 1;
  line-height: 1.4;
  color: var(--text-color-primary);
}

.insight-point .content p {
  margin: 0;
  display: inline;
}

.insight-point .content strong {
  color: #6366f1;
  color: var(--accent-color, #6366f1);
  font-weight: 700;
}

.insight-point.type-answer .content strong,
.insight-point.ai-answer .content strong {
  color: #10b981;
}

.insight-point.type-question .content strong,
.insight-point.user-question .content strong {
  color: #f59e0b;
}

.insight-point.type-takeaway .content strong {
  color: #8b5cf6;
}

.insight-point.type-todo .content strong {
  color: #ec4899;
}

.insight-point.type-ask .content strong {
  color: #ef4444;
}

/* Specific Insight Types */
.insight-point.type-model-info {
  background-color: var(--bg-secondary);
  border-left: 3px solid var(--accent-color);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--text-secondary); /* Use secondary text color */
  /* display: flex; Already flex */
  /* align-items: center; Already align-items */
  /* gap: 8px; Already gap */
}

.insight-point.type-model-info .icon {
  font-size: 1.1em; /* Already set */
}

/* Q&A Styles */
.qa-insight { /* Consolidated */
  background: var(--bg-secondary); /* Use secondary background */
  border-left: 3px solid var(--accent-color);
  margin: 8px 0;
  padding: 10px 12px; /* Add padding */
  border-radius: 4px; /* Add radius */
  color: var(--text-color-primary);
}

.user-question {
  color: var(--accent-color); /* Use accent color for question */
  font-weight: 500;
  margin-bottom: 6px; /* Space below question */
  display: block; /* Ensure it takes full width */
}

.ai-answer {
  background: var(--bg-color); /* Slightly different background for answer */
  border-radius: 4px;
  padding: 8px 12px;
  /* margin-top: 4px; Removed, using margin-bottom on question */
  border-left: 2px solid var(--primary-color); /* Use primary color for answer */
  color: var(--text-color-primary);
  line-height: 1.4; /* Ensure readability */
}

.empty-insights { /* Consolidated */
  color: var(--text-color-secondary);
  padding: 16px;
  text-align: center; /* Center text */
  font-style: italic;
  flex: 1 1; /* Take space when empty */
  display: flex; /* Center content */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.controls-overlay {
  position: absolute; /* Change from default/relative */
  top: 10px;          /* Position from top */
  right: 10px;         /* Position from right */
  z-index: 10;         /* Ensure it's above content */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;       /* Arrange buttons nicely */
  gap: 5px;            /* Spacing between buttons */
  opacity: 0;          /* Hidden by default */
  transition: opacity 0.3s ease-in-out; /* Smooth fade */
  pointer-events: none; /* Prevent interaction when hidden */
}

/* Show controls when hovering over the parent text container */
.text-container:hover .controls-overlay {
  opacity: 1;
  pointer-events: auto; /* Allow interaction when visible */
}

/* Adjust dark mode background */
.dark-mode .controls-overlay {
  background-color: rgba(50, 50, 50, 0.8); /* Darker semi-transparent background */
}

/* Optional: Adjust button styles within the overlay if needed */
.controls-overlay button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-size: 1.1em; /* Adjust icon size if needed */
  color: var(--text-color-secondary);
  transition: color 0.2s ease;
}

.controls-overlay button:hover {
  color: var(--text-color-primary);
}

/* === Chat Box (Sticky Footer) === */
.chat-box { 
  /* Remove sticky positioning - use flex instead */
  background: var(--bg-color);
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  flex-shrink: 0; /* Prevent shrinking - stay at bottom */
  /* Ensure chat-box stays within its parent container */
  max-height: 80px; /* Limit maximum height */
  overflow: hidden; /* Prevent content overflow */
  /* Scrollbar styles removed, not applicable */
}

/* Combined form styles for chat-box and potentially insights-list if it becomes input */
.chat-box form,
.insights-list.input-mode { /* Added hypothetical class */
  display: flex;
  gap: 8px;
  position: relative;
  padding: 2px; /* Space for gradient border */
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  border-radius: 24px; /* Fully rounded */
  animation: gradientMove 8s linear infinite;
  align-items: center;
  min-height: 44px; /* Ensure consistent height */
}

.chat-box form::before,
.insights-list.input-mode::before { /* Gradient border inner background */
  content: '';
  position: absolute;
  inset: 1px; /* Inset to show gradient */
  background: var(--bg-color);
  border-radius: 23px; /* Slightly smaller radius */
  z-index: 0;
}

.chat-box input {
  flex: 1 1 auto; /* Allow shrinking and growing */
  min-width: 0; /* Prevent overflow */
  padding: 10px 16px; /* Adjusted padding for height */
  border: none;
  border-radius: 23px 0px 0px 23px;
  background: transparent; /* Make input transparent */
  color: var(--text-color-primary);
  font-size: 14px;
  position: relative;
  z-index: 1; /* Above pseudo-element */
  transition: all 0.3s ease;
  line-height: 1.2;
  height: 40px; /* Fixed height */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.chat-box input::placeholder {
  color: var(--text-secondary); /* Use variable */
}

.chat-box input:focus {
  outline: none;
  border: none;
  box-shadow: 0 0 15px rgba(66, 133, 244, 0.3),
              0 0 30px rgba(234, 67, 53, 0.2),
              0 0 45px rgba(251, 188, 5, 0.1);
}

/* Increased specificity */
.chat-box form button { 
  flex: 0 0 40px; /* Fixed size */
  width: 40px;
  height: 40px;
  border-radius: 50% !important; /* Make button circular and override others */
  border: none;
  /* Separate background properties, image on top */
  background: linear-gradient(135deg, #4285f4, #34a853); /* Use gradient background */
  background-size: cover; /* Size for image, cover for gradient */
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1; /* Above pseudo-element */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Ensure content (like spinner) respects border-radius */
  padding: 0; /* Remove padding if using icon */
}

.chat-box form button img {
  width: 65%;
  height: 65%;
  object-fit: contain;
  transition: transform 0.3s ease; /* Add transition for hover effect */
  display: block !important; /* Force display */
  opacity: 1 !important; /* Force opacity */
}

/* Update other states to use the more specific selector */
.chat-box form button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
}

/* Add hover effect for the icon inside the button */
.chat-box form button:hover:not(:disabled) img {
  transform: scale(1.1); /* Slightly enlarge icon on hover */
}

.chat-box button:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Smaller shadow on active */
}

.chat-box button:disabled {
  cursor: not-allowed;
  opacity: 0.7; /* Keep opacity for visual feedback */
  box-shadow: none; /* Remove shadow when disabled */
}

/* === Action Buttons (Summarize, etc.) === */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px 20px; /* Increase horizontal padding */
  background-color: var(--bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 15px 0 25px 0; /* Remove horizontal margins for full width */
  width: 100%; /* Full width */
  max-width: none; /* Remove width constraint */
  flex-wrap: wrap; /* Allow buttons to wrap on small screens */
  position: relative; /* Ensure proper positioning */
  box-sizing: border-box; /* Include padding in width calculation */
}

.action-buttons .action-button { /* Consolidated */
  min-width: 180px; /* Set minimum width */
  height: 44px; /* Set fixed height */
  padding: 0 20px;
  background-color: var(--button-bg); /* Changed from --primary-color */
  color: var(--button-text);
  border: none;
  border-radius: 22px; /* Rounded corners */
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex; /* Use inline-flex for icon alignment */
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap; /* Prevent text wrapping */
  text-decoration: none; /* Remove underline if used as link */
  vertical-align: middle; /* Align if mixed with other inline elements */
  position: relative; /* For gradient border effect */
}

/* Special gradient border for summarize button */
.action-buttons .action-button.summarize-button::before {
  content: '';
  position: absolute;
  inset: -2px; /* Create border effect */
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  border-radius: 24px; /* Slightly larger radius */
  animation: gradientMove 8s linear infinite;
  z-index: -1; /* Behind the button */
}

/* Inner background for gradient border button */
.action-buttons .action-button.summarize-button::after {
  content: '';
  position: absolute;
  inset: 0; /* Fill the button */
  background: var(--button-bg);
  border-radius: 22px; /* Match button radius */
  z-index: -1; /* Behind content but above gradient */
}

/* Dark mode support for gradient border */
.dark-mode .live-insight-container .action-buttons .action-button.summarize-button::after {
  background: var(--button-bg);
}



.countdown-timer { /* Timer within button */
  font-size: 0.9em;
  color: var(--text-secondary); /* Use secondary text color */
  margin-left: 4px;
}


/* === Floating Controls (Record, Reset, Language) === */
/* .floating-controls was removed, using .floating-control-panel */

.floating-control-panel {
  position: fixed; /* Position set dynamically via inline styles */
  background: rgba(255, 255, 255, 0.7);
  background: var(--floating-panel-bg, rgba(255, 255, 255, 0.7)); /* Use CSS var */
  border-radius: 15px;
  padding: 12px 12px 0px 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  /* z-index moved to inline styles for better control */
  display: flex;
  flex-direction: column;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 3px solid rgba(0, 0, 0, 0.08);
  border: 3px solid var(--floating-panel-border, rgba(0, 0, 0, 0.08)); /* Slightly thicker border for draggable edge */
  min-width: 230px;
  width: 230px;
  max-height: 80vh; /* Prevent panel from getting too tall */
  /* Don't use overflow here - let children handle it so dropdown can extend beyond */
  transition: box-shadow 0.3s ease, height 0.2s ease, border-color 0.2s ease; /* Removed width transition to prevent panel expansion */
  cursor: default; /* Default cursor, drag handle and edges will override */
}

/* Make the panel border area show drag cursor */
.floating-control-panel:hover {
  border-color: rgba(59, 130, 246, 0.3);
  border-color: var(--floating-panel-border-hover, rgba(59, 130, 246, 0.3));
}

.dark-mode .floating-control-panel {
  --floating-panel-bg: rgba(44, 44, 44, 0.7);
  --floating-panel-border: rgba(255, 255, 255, 0.15);
  --floating-panel-border-hover: rgba(59, 130, 246, 0.4);
}

.floating-control-panel.dragging {
  transition: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Prevent text selection on body while dragging the panel */
body.panel-dragging {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

/* Status info area at top is also draggable */
.floating-panel-status-info {
  cursor: move;
}

.floating-control-items {
  margin-bottom: 10px; /* Space between items and handle */
  overflow: visible; /* Allow dropdown to extend beyond container */
  position: relative; /* Establish positioning context */
}

/* Language select in floating panel */
/* Only apply to traditional select elements */
.floating-control-panel select.language-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  border: 1px solid var(--floating-panel-select-border, rgba(0,0,0,0.1)); /* Use CSS var */
  background: rgba(255,255,255,0.5);
  background: var(--floating-panel-select-bg, rgba(255,255,255,0.5)); /* Use CSS var */
  color: var(--text-color-primary); /* Use CSS var */
  /* Inherits base select styles */
}

.dark-mode .floating-control-panel select.language-select {
  --floating-panel-select-bg: rgba(30, 36, 48, 0.92);
  --floating-panel-select-border: rgba(255, 255, 255, 0.1);
  color: var(--text-color-primary);
}

.dark-mode .floating-control-panel select.language-select option {
  background: #2a3142;
  color: #e1e5ee;
  padding: 8px 12px;
}

.dark-mode .floating-control-panel select.language-select option:checked {
  background: #3a4559;
  color: #fff;
}

/* Ensure our new searchable selector fits properly in floating panel */
.floating-control-panel .searchable-language-selector {
  width: 100%;
  margin-bottom: 10px;
}

/* Buttons container */
.floating-control-buttons {
  display: flex;
  padding-top: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Individual buttons */
.floating-control-panel .control-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  color: white;
  /* cursor is set dynamically */
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  /* background, opacity are set dynamically */
}

.floating-control-panel .control-button:hover:not(:disabled) {
  transform: scale(1.05);
}

/* Specific backgrounds (can be overridden by inline styles for dynamic state) */
.floating-control-panel .control-button.start {
  background: #4CAF50;
}
.floating-control-panel .control-button.stop {
  background: #f44336;
}
.floating-control-panel .control-button.reset {
  background: #FF9800;
}

/* Phone recorder wrapper */
.phone-recorder-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drag Handle */
.floating-control-panel .drag-handle {
  cursor: move;
  padding: 8px 5px 5px 5px;
  text-align: center; /* Center align the drag handle */
  border-top: 1px solid #ddd;
  border-top: 1px solid var(--floating-panel-handle-border, #ddd); 
  -webkit-user-select: none; 
          user-select: none;
  border-bottom-left-radius: 12px; /* Match parent radius */
  border-bottom-right-radius: 12px; /* Match parent radius */
  z-index: 9999;
  width: 100%; /* Ensure it spans the full width of the current container */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* When QR modal is open, extend drag handle to match QR content width */
.floating-control-panel.qr-modal-open .drag-handle {
  width: 375px; /* Match qr-code-content width */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* Center the drag handle */
}

.dark-mode .floating-control-panel .drag-handle {
  --floating-panel-handle-border: #444;
}

.floating-control-panel .drag-handle-icon {
  width: 20px; /* Reduced from 30px to make it smaller */
  height: 5px;
  background: #ccc;
  background: var(--drag-handle-icon-bg, #ccc); /* Use CSS var */
  margin: 0 auto; /* Right align the icon instead of center */
  border-radius: 5px;
}

.dark-mode .floating-control-panel .drag-handle-icon {
  --drag-handle-icon-bg: #666;
}

/* === Other Header Controls (Buttons, Toggles) === */
.control-buttons { /* Container in header */
  display: flex;
  gap: 50px;
}

/* Standard Control Button (e.g., "Toggle Summary") */
.control-button {
  padding: 6px 14px;
  font-size: 0.9rem;
  display: inline-flex; /* Align icon and text */
  align-items: center;
  gap: 6px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; /* For ripple */
  white-space: nowrap; /* Prevent wrapping */
}

.control-button:hover:not(:disabled) {
  background-color: var(--button-hover);
  transform: translateY(-1px);
}

.control-button:active:not(:disabled) {
  transform: translateY(0);
}

.control-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--disabled-color);
}

/* Ripple Effect */
.control-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  pointer-events: none; /* Prevent ripple from interfering */
}

.control-button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

/* Active State for Toggles */
.control-button.active {
  background-color: var(--primary-color);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Inset shadow for active state */
}

.control-button.active:hover {
  background-color: var(--primary-color-dark);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px); /* Glassy effect */
  padding: 8px;
  box-sizing: border-box; /* Include padding in size */
}

.dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.dark-mode-toggle:active {
  transform: translateY(0);
}

/* Help Button */
.help-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 8px;
  box-sizing: border-box;
}

.help-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.help-button:active {
  transform: translateY(0);
}

.scroll-toggle,
.order-toggle,
.copy-button,
.sort-order-button { /* Combined base styles for small toggle buttons */
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-color-primary);
  font-size: 1rem; /* Ensure icon size is decent */
  padding: 0; /* Remove padding if icon fits */
}

.scroll-toggle:hover,
.order-toggle:hover,
.copy-button:hover,
.sort-order-button:hover {
  background: var(--bg-color-hover);
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scroll-toggle:active,
.order-toggle:active,
.copy-button:active,
.sort-order-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.scroll-toggle.active,
.order-toggle.active,
.sort-order-button.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color-dark);
  color: white;
}

.scroll-toggle.active:hover,
.order-toggle.active:hover,
.sort-order-button.active:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === Copy Success Message === */
.copy-success-message {
  position: absolute; 
  top: 15px; /* Align with controls overlay */
  right: 60px; /* Position next to controls */
  background: rgba(40, 167, 69, 0.9); /* Success green */
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px; 
  animation: fadeInOut 2s ease;
  z-index: 10; /* Same level as controls */
  pointer-events: none; /* Prevent interaction */
}

/* === Modal Styles === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2050; /* Higher than side panel (2000) to ensure modal appears on top */
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* Delete Confirmation Modal */
.delete-confirmation-modal {
  background: var(--bg-color);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  animation: modalSlideIn 0.3s ease-out;
}

.delete-confirmation-modal h3 {
  margin: 0 0 16px 0;
  color: var(--text-color-primary);
  font-size: 1.2rem;
  font-weight: 600;
}

.delete-confirmation-modal p {
  margin: 0 0 24px 0;
  color: var(--text-color-secondary);
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cancel-button,
.delete-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cancel-button {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-color-primary);
}

.cancel-button:hover {
  background: var(--border-color);
}

.delete-button {
  background: var(--error-color);
  border: 1px solid var(--error-color);
  color: white;
}

.delete-button:hover {
  background: #d32f2f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
}

.modal-content {
  background: var(--bg-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
  overflow: hidden; /* Prevent content overflow */
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Prevent shrinking */
}

.modal-header h3 { /* Consolidated */
  margin: 0;
  color: var(--text-color-primary);
  font-size: 1.4rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  line-height: 1; /* Ensure icon centers */
}

.modal-close:hover {
  background: var(--bg-color-hover);
  color: var(--text-color-primary);
}

.modal-body {
  padding: 20px;
  overflow-y: auto; /* Allow scrolling */
  flex-grow: 1; /* Allow body to take space */
  /* max-height handled by modal-content */
  /* Scrollbar styles moved to consolidated section */
}

.summary-text {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.6;
  color: var(--text-color-primary);
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0; /* Prevent shrinking */
}

/* === Notifications - Commented out to prevent conflict with inline styles === */
/*
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 400px;
  z-index: 3000; 
  animation: slideIn 0.3s ease-out forwards;
  backdrop-filter: blur(8px);
  border-left: 4px solid transparent;
}

.notification.success {
  background-color: rgba(212, 237, 218, 0.95);
  border-left-color: #28a745;
  color: #155724;
}

.notification.error {
  background-color: rgba(248, 215, 218, 0.95);
  border-left-color: #dc3545;
  color: #721c24;
}

.notification.warning {
  background-color: rgba(255, 243, 205, 0.95);
  border-left-color: #ffc107;
  color: #856404;
}

.notification.info {
  background-color: rgba(209, 236, 241, 0.95);
  border-left-color: #17a2b8;
  color: #0c5460;
}

/* Compact notification for short messages */
.notification.notification-compact {
  max-width: -webkit-fit-content !important;
  max-width: fit-content !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  min-width: -webkit-fit-content !important;
  min-width: fit-content !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  justify-content: space-between !important;
  text-align: left !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Override mobile styles for compact notifications */
@media (max-width: 768px) {
  .notification.notification-compact {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .notification.notification-compact {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 320px) {
  .notification.notification-compact {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

.notification-message {
  flex: 1 1;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 500;
}

.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 0 5px;
  color: inherit;
  line-height: 1;
}

.notification-close:hover {
  opacity: 1;
}

/* === Spinner === */
.spinner { /* Consolidated */
  width: 1em; /* Default size relative to font */
  height: 1em; /* Default size relative to font */
  border: 2px solid transparent; /* Thickness */
  border-top-color: var(--primary-color); /* Spinner color */
  border-right-color: var(--primary-color); /* Spinner color */
  border-radius: 50%;
  opacity: 0.8;
  animation: spin 0.7s linear infinite;
  display: inline-block; /* Correct display */
  vertical-align: middle; /* Align with text */
  flex-shrink: 0; /* Prevent shrinking in flex context */
}

/* === Dark Mode Adjustments === */

/* Base Variables are handled by .dark-mode {} block at the top */

.dark-mode body { /* Ensure body colors update */
   background-color: var(--bg-color);
  color: var(--text-color-primary);
}

.dark-mode .hamburger-menu span {
  background-color: var(--text-color-primary); /* Use primary text color */
}

.dark-mode .side-panel {
  background: var(--bg-color); /* Use main background */
  border-right-color: var(--border-color); /* Use dark border color */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .setting-item input[type="checkbox"] {
  background: var(--bg-color-tertiary); /* Use tertiary for off state */
}

.dark-mode .setting-item input[type="checkbox"]:checked {
  background: var(--primary-color);
}

.dark-mode .setting-item input[type="checkbox"]::before {
  background: var(--bg-color); /* Use main background for knob */
}

.dark-mode .session-item {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .session-item:hover {
  background: var(--bg-color-hover);
}

.dark-mode .session-item.current-session {
  border: 2px solid var(--primary-color);
  background: var(--bg-color-tertiary);
  box-shadow: 0 2px 12px rgba(108, 159, 255, 0.4);
}

/* Dark mode styles for session buttons */
.dark-mode .edit-title-btn {
  background: var(--bg-color-tertiary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .edit-title-btn:hover {
  background-color: var(--primary-color);
  border: 1px solid transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4);
}

.dark-mode .ai-title-btn {
  background: var(--bg-color-tertiary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .ai-title-btn:hover:not(:disabled) {
  background-color: var(--primary-color);
  border: 1px solid transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4);
}

.dark-mode .ai-title-btn:disabled {
  background: var(--bg-color-secondary);
  border-color: transparent;
  color: var(--text-color-secondary);
}

.dark-mode .ai-title-btn:disabled:hover {
  background: var(--bg-color-secondary);
  border-color: transparent;
  color: var(--text-color-secondary);
}

.dark-mode .setting-item input[type="checkbox"]:disabled + label {
  opacity: 0.5; /* Consistent dimming in dark mode */
}


.dark-mode .header-section,
.dark-mode .dropdown-content, /* Assuming .user-info is a dropdown */
.dark-mode .tooltip, /* Define if needed */
.dark-mode .context-menu, /* Define if needed */
.dark-mode .popup-menu { /* Define if needed */
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-primary);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Consistent shadow */
}
.dark-mode .header-section { background: var(--bg-color); } /* Header section needs main bg */
.dark-mode .side-panel { background: var(--bg-color); } /* Side panel needs main bg */

.dark-mode .button, /* Generic button class if used */
.dark-mode .control-button,
.dark-mode .action-button,
.dark-mode .test-api-button,
.dark-mode .clear-api-button,
.dark-mode .get-insight-button,
.dark-mode .transcript-insights-button,
.dark-mode .frequency-apply-button,
.dark-mode .small-button,
.dark-mode .save-session-button,
.dark-mode .reload-transcripts-button,
.dark-mode .sign-out-button { /* Group all standard buttons */
  background: var(--button-bg);
  border-color: var(--border-color);
  color: var(--button-text);
}
.dark-mode .clear-api-button { background-color: var(--error-color); }
.dark-mode .transcript-insights-button { background-color: var(--success-color); }


.dark-mode .button:hover:not(:disabled),
.dark-mode .control-button:hover:not(:disabled),
.dark-mode .action-button:hover:not(:disabled),
.dark-mode .test-api-button:hover:not(:disabled),
.dark-mode .clear-api-button:hover:not(:disabled),
.dark-mode .get-insight-button:hover:not(:disabled),
.dark-mode .transcript-insights-button:hover:not(:disabled),
.dark-mode .frequency-apply-button:hover:not(:disabled),
.dark-mode .small-button:hover:not(:disabled),
.dark-mode .save-session-button:hover:not(:disabled),
.dark-mode .reload-transcripts-button:hover:not(:disabled),
.dark-mode .sign-out-button:hover:not(:disabled) {
  background: var(--button-hover);
}
.dark-mode .clear-api-button:hover:not(:disabled) { filter: brightness(90%); }
.dark-mode .transcript-insights-button:hover:not(:disabled) { filter: brightness(90%); }

/* Disabled buttons in dark mode */
.dark-mode .button:disabled,
.dark-mode .control-button:disabled,
.dark-mode .action-button:disabled,
.dark-mode .test-api-button:disabled,
.dark-mode .clear-api-button:disabled,
.dark-mode .get-insight-button:disabled,
.dark-mode .transcript-insights-button:disabled,
.dark-mode .frequency-apply-button:disabled,
.dark-mode .small-button:disabled,
.dark-mode .save-session-button:disabled,
.dark-mode .sign-out-button:disabled {
    background-color: var(--disabled-color);
    color: var(--text-color-secondary); /* Dimmer text */
    opacity: 0.7;
}


.dark-mode .dropdown-option:hover, /* Generic dropdown option */
.dark-mode .menu-item:hover { /* Generic menu item */
  background: var(--bg-color-hover);
}

.dark-mode .divider { /* Generic divider */
  border-color: var(--border-color);
}

/* Add or modify these styles in src/styles/LiveInsightTool.css */

.live-insights-tier-info {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Adds space between plan name and link */
  padding: 0.5rem 0; /* Adjust padding as needed */
  font-size: 0.9rem; /* Slightly smaller base font size for this info */
}

.current-tier-label .current-tier-name {
  font-weight: 600; /* Make the plan name a bit bolder */
  color: var(--text-color-primary); /* Ensure it uses primary text color */
}

.tier-action-link {
  color: var(--primary-color); /* Use primary color for links */
  text-decoration: none;
  font-weight: 500;
}

.tier-action-link:hover {
  text-decoration: underline;
  color: var(--primary-color-dark); /* Slightly darker on hover */
}

.manage-link { /* For the "Top Tier Active" text or future manage links */
  color: var(--text-color-secondary);
  font-style: italic;
}

/* Dark Mode Specifics */
.dark-mode .current-tier-label .current-tier-name {
  color: var(--text-color-primary);
}

.dark-mode .tier-action-link {
  color: var(--primary-color); /* Use dark mode primary color */
}

.dark-mode .tier-action-link:hover {
  color: var(--primary-color-light); /* Slightly lighter on hover for dark mode */
}

.dark-mode .manage-link {
  color: var(--text-color-secondary);
}

/* Inputs and Textareas */
.dark-mode .input-base,
.dark-mode input[type="text"],
.dark-mode input[type="password"],
.dark-mode textarea,
.dark-mode select,
.dark-mode .api-key-input,
.dark-mode .url-input,
.dark-mode .meeting-context { /* Group input-like elements */
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-primary); /* Use primary text color */
  width: 100%; /* Ensure full width in side panel */
}

.dark-mode .input-base:focus,
.dark-mode input[type="text"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .api-key-input:focus,
.dark-mode .url-input:focus,
.dark-mode .meeting-context:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(108, 159, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 108, 159, 255), 0.2); /* Use primary color */
}

/* Select specific dark mode - no duplicate background-image needed */
.dark-mode select {
  /* Arrow inherited from base select rule */
}
.dark-mode .api-provider-select, /* Already targeted by base select */
.dark-mode .api-model-select,
.dark-mode .floating-language-select,
.dark-mode select.language-select { /* Target specific select elements only */
    background-color: var(--bg-color-secondary);
  color: var(--text-color-primary);
    border-color: var(--border-color);
    width: 100% !important; /* Ensure language-select takes full width */
}

.dark-mode select option {
    background-color: var(--bg-color-secondary);
  color: var(--text-color-primary);
}

/* Fix for Firefox dropdown background - replaced @-moz-document to avoid CSS minimizer issues */
@supports (-moz-appearance: none) {
  .dark-mode select {
    background-color: var(--bg-color-secondary) !important;
  }
  .dark-mode select option {
     background-color: var(--bg-color-tertiary) !important; /* Use slightly different for options */
     color: var(--text-color-primary) !important;
  }
}

.dark-mode .api-key-warning {
  background: transparent;
  color: var(--text-color-secondary);
}

.dark-mode .section {
  background-color: var(--bg-color);
  border-color: var(--border-color);
}

.dark-mode .floating-controls {
  background: rgba(30, 36, 48, 0.8); /* Match dark bg */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.dark-mode .drag-handle:hover { background-color: rgba(255, 255, 255, 0.05); }
.dark-mode .drag-handle-icon { background-color: var(--secondary-color); }


.dark-mode .dark-mode-toggle {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color-primary); /* Update icon color */
}

.dark-mode .dark-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .help-button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color-primary);
}

.dark-mode .help-button:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .user-avatar-container {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .user-avatar-container:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .user-avatar-container .user-info {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .user-avatar-container .user-info::before {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .user-avatar-container .user-email {
  background: var(--bg-color-tertiary); /* Slightly darker */
  color: var(--text-color-primary);
  border-color: var(--border-color);
}

.dark-mode .avatar-grid {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .avatar-option {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .avatar-option:hover {
  background: var(--bg-color-hover);
}

.dark-mode .avatar-option.selected {
  background: var(--primary-color-dark);
  border-color: var(--primary-color);
  color: var(--button-text); /* Ensure contrast */
}

/* Insights Dark Mode */
.dark-mode .insight-batch {
  background: var(--insight-bg-even);
  border-color: var(--insight-border);
  color: var(--text-color-primary);
}

.dark-mode .insights-list .insight-batch:nth-child(odd) {
  background: var(--insight-bg-odd);
}

.dark-mode .insight-batch-timestamp {
  color: var(--text-color-secondary);
}

.dark-mode .insight-delete-button {
  color: #000000;
}

.dark-mode .insight-delete-button:hover {
  background-color: var(--error-color);
  color: white;
}

/* Dark mode touch device states */
@media (hover: none) and (pointer: coarse) {
  .dark-mode .insight-delete-button:active {
    background-color: var(--error-color);
    color: white;
  }
}

.dark-mode .insight-point,
.dark-mode .insight-point .content {
  color: var(--text-color-primary);
}

.dark-mode .insight-point .content strong {
  color: #818cf8;
}

.dark-mode .insight-point.type-answer .content strong,
.dark-mode .insight-point.ai-answer .content strong {
  color: #34d399;
}

.dark-mode .insight-point.type-question .content strong,
.dark-mode .insight-point.user-question .content strong {
  color: #fbbf24;
}

.dark-mode .insight-point.type-takeaway .content strong {
  color: #a78bfa;
}

.dark-mode .insight-point.type-todo .content strong {
  color: #f472b6;
}

.dark-mode .insight-point.type-ask .content strong {
  color: #f87171;
}

.dark-mode .qa-insight {
  background: var(--bg-color-secondary); /* Use secondary bg */
  border-left-color: var(--accent-color);
  color: var(--text-color-primary);
}

.dark-mode .ai-answer {
  background: var(--bg-color); /* Use main bg */
  border-left-color: var(--primary-color);
  color: var(--text-color-primary);
}

.dark-mode .empty-insights {
  color: var(--text-color-secondary);
}

/* Chat Box Dark Mode */
.dark-mode .chat-box {
  background: var(--bg-color);
    border-top-color: var(--border-color);
}
.dark-mode .chat-box form::before {
  background: var(--bg-color); /* Match chat box background */
}

.dark-mode .chat-box input {
  background: transparent; /* Keep transparent */
  border: none;
  border-radius: 23px 0px 0px 23px;
  color: var(--text-color-primary);
}

.dark-mode .chat-box input::placeholder {
  color: var(--text-color-secondary);
}

  /* Gradient remains the same, maybe adjust if needed */
/* .dark-mode .chat-box button { } */


.dark-mode .chat-box button:disabled {
    /* background: var(--disabled-color); -- Removed background override */
    /* Inherit opacity and other styles from the base disabled rule */
}

/* Scrollbars Dark Mode */
.dark-mode .scroll-container::-webkit-scrollbar-track,
.dark-mode .insights-list::-webkit-scrollbar-track,
.dark-mode .side-panel-content::-webkit-scrollbar-track,
.dark-mode .sessions-list::-webkit-scrollbar-track,
.dark-mode .modal-body::-webkit-scrollbar-track,
.dark-mode .continuous-transcript::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.dark-mode .scroll-container::-webkit-scrollbar-thumb,
.dark-mode .insights-list::-webkit-scrollbar-thumb,
.dark-mode .side-panel-content::-webkit-scrollbar-thumb,
.dark-mode .sessions-list::-webkit-scrollbar-thumb,
.dark-mode .modal-body::-webkit-scrollbar-thumb,
.dark-mode .continuous-transcript::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.dark-mode .scroll-container::-webkit-scrollbar-thumb:hover,
.dark-mode .insights-list::-webkit-scrollbar-thumb:hover,
.dark-mode .side-panel-content::-webkit-scrollbar-thumb:hover,
.dark-mode .sessions-list::-webkit-scrollbar-thumb:hover,
.dark-mode .modal-body::-webkit-scrollbar-thumb:hover,
.dark-mode .continuous-transcript::-webkit-scrollbar-thumb:hover {
  background: var(--bg-color-hover); /* Use hover color for thumb hover */
}


/* === Subscription Info Styles === */
.subscription-info {
  background: #f8f9fa;
  background: var(--card-bg, #f8f9fa);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--border-color);
}

.subscription-info .tier-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color-primary);
  margin-bottom: 2px;
}

.subscription-info .plan-details {
  width: 100%;
}

.subscription-info .plan-details h4 {
  margin: 8px 0 4px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color-primary);
}

.subscription-info .usage-stats {
  display: flex;
  gap: 16px;
  margin: 8px 0;
}

.subscription-info .usage-stats .subscription-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.subscription-info .usage-stats .subscription-stat-label {
  font-size: 0.95rem;
  color: var(--text-color-secondary);
}

.subscription-info .usage-stats .subscription-stat-value {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color-primary);
}

.subscription-info .usage-stats .subscription-stat-limit {
  color: var(--text-color-secondary);
  font-weight: 400;
  margin-left: 2px;
}

.subscription-info .tooltip-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.manage-subscription-button {
  background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.manage-subscription-button:hover {
  background: linear-gradient(90deg, #0056b3 0%, #003d82 100%);
  transform: translateY(-1px);
}

.upgrade-plan-button {
  background: linear-gradient(90deg, #6f42c1 0%, #28a745 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  transition: all 0.2s ease;
}

.upgrade-plan-button:hover {
  background: linear-gradient(90deg, #5a2d9a 0%, #1e7e34 100%);
  transform: translateY(-1px);
}

/* Dark mode subscription styles */
.dark-mode .subscription-info {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark-mode .subscription-info .tier-name,
.dark-mode .subscription-info .plan-details h4 {
  color: var(--text-color-primary);
}

.dark-mode .subscription-info .usage-stats .subscription-stat-value {
  color: var(--text-color-primary);
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr; /* Stack sections */
    height: auto; /* Allow content to determine height */
    /* Ensure main-content itself can scroll if its children overflow due to vh units */
    overflow-y: auto;
    padding: 0 5px 5px 5px; /* Reduced padding for more space */
  }

  .section {
      min-height: 200px;
      height: auto;
      max-height: none;
      margin-bottom: 8px;
  }
  
  /* Reduce unnecessary spacing in section headers */
  .section-header {
    padding: 8px 12px;
    margin-bottom: 8px;
  }

  .api-key-section {
  flex-direction: column;
    gap: 0.75rem; /* Reduce gap */
  }

  .api-input-container,
  .api-selectors,
  .api-actions {
    width: 100%; /* Make elements full width */
    gap: 0.5rem; /* Adjust gap */
  }
  .api-selectors { flex-direction: column; } /* Stack selects */
  .api-actions { justify-content: center; } /* Center buttons */
  .test-api-button, .clear-api-button { width: auto; flex: 1 1; } /* Allow buttons to share space */


  .insight-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0;
  }

  .manual-insight-control {
    gap: 0.25rem;
    min-width: auto;
  }

  .get-insight-button,
  .transcript-insights-button,
  .frequency-apply-button {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 18px;
  }

  .auto-insight-label {
    font-size: 0.8rem;
  }

  .insight-frequency-section {
    min-width: auto;
    gap: 0.25rem;
    flex: 0 1 auto;
    margin-top: 0;
  }

  .frequency-control {
    flex: 1 1;
    min-width: auto;
  }

  .frequency-slider {
    min-width: 40px;
  }

  .insight-language-section {
    min-width: auto;
    gap: 0.25rem;
    flex: 0 1 auto;
    margin-top: 0;
  }

  .insight-language-select {
    flex: 1 1;
    max-width: none;
  }

  .container.side-panel-open {
    margin-left: 0; /* Panel overlays */
  }


  .header-left { left: 8px; } /* Reduce left margin */
  .header-right { 
    right: 8px; /* Reduce right margin */
    gap: 4px !important; /* Reduce gap between buttons */
  }
  
  /* Make header buttons smaller on mobile */
  .header-right .help-button,
  .header-right .dark-mode-toggle {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem;
    padding: 6px !important;
  }
  
  /* Make user avatar smaller on mobile */
  .header-right .user-avatar-container {
    width: 32px;
    height: 32px;
  }
  
  .header-right .user-avatar-container .user-avatar {
    font-size: 1rem;
    line-height: 32px;
  }
  
  /* Adjust app title for mobile */
  .app-title { 
    font-size: 1.2rem; /* Reduce title size further */
  }
  
  /* Make app logo smaller on mobile */
  .app-logo {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Ensure title container doesn't overlap with buttons */
  .title-container {
    max-width: calc(100vw - 140px) !important; /* Reserve space for buttons on both sides */
    padding: 0 8px;
  }
  
  .container { padding: 0 15px; } /* Adjust container padding */
  
  /* === Mobile Optimized Action Buttons === */
  .action-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 4px !important;
    margin: 8px 0 8px 0 !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Firefox */
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
  }
  
  /* Custom scrollbar for webkit browsers */
  .action-buttons::-webkit-scrollbar {
    height: 4px;
  }
  
  .action-buttons::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  
  .action-buttons::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }
  
  .action-buttons .action-button {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    font-weight: 500;
    letter-spacing: -0.3px;
  }
  
  .action-buttons .action-button .action-icon {
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
  }

  .floating-controls {
      bottom: 10px;
      right: 10px;
      padding: 10px;
  }
}

/* === Consolidated Scrollbar Styles === */
.scroll-container, /* Generic scrollable container */
.insights-list,
.side-panel,
.side-panel-content,
.sessions-list,
.modal-body,
.continuous-transcript,
.user-avatar-container .user-info /* Add dropdown if scrollable */
 {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* === Dynamic Heights for Header Collapse === */
.live-insight-container.header-collapsed .insights-list {
  /* When header is collapsed, expand the scrollable areas */
  max-height: calc(100vh - var(--header-height-collapsed) - 200px) ; /* More space when collapsed */
  transition: max-height 0.3s ease; /* Smooth transition when header expands/collapses */
}

.live-insight-container.header-collapsed .continuous-transcript {
  /* Let it expand naturally within its container */
  flex: 1 1;
  min-height: 0;
  height: 100%;
}


.continuous-transcript {
  /* Remove viewport-based constraints to let it fill the text-container naturally */
  flex: 1 1;
  min-height: 0;
  height: 100%;
}

/* Make continuous-transcript take available space within its text-container */
.text-container .continuous-transcript {
  flex: 1 1 !important; /* Take all available space */
  overflow-y: auto !important; /* Allow scrolling for transcript content */
  padding: 16px 16px 16px 16px !important; /* Consistent padding all around */
  min-height: 0 !important; /* Allow shrinking - CRITICAL for flex scrolling */
  margin: 0 !important; /* Ensure no margins */
  border-radius: 0 !important; /* Remove border radius to connect with upload area */
  /* Height constraint needed for scrolling to work */
  height: 100% !important;
  max-height: 100% !important; /* Constrain height to enable scroll - was 'none' which broke desktop scrolling */
}

/* Fix transcript segments to extend to bottom without gaps */
.text-container .continuous-transcript .transcript-segment {
  margin-bottom: 8px !important; /* Reduce gap between segments */
}

/* Remove margin from the last transcript segment to connect with upload area */
.text-container .continuous-transcript .transcript-segment:last-child {
  margin-bottom: 0 !important; /* No gap after last segment */
}

.scroll-container::-webkit-scrollbar,
.insights-list::-webkit-scrollbar,
.side-panel::-webkit-scrollbar,
.side-panel-content::-webkit-scrollbar,
.sessions-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.continuous-transcript::-webkit-scrollbar,
.user-avatar-container .user-info::-webkit-scrollbar {
  width: 6px;
  height: 6px; /* Add height for horizontal scrollbars */
}

.scroll-container::-webkit-scrollbar-track,
.insights-list::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track,
.side-panel-content::-webkit-scrollbar-track,
.sessions-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.continuous-transcript::-webkit-scrollbar-track,
.user-avatar-container .user-info::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px; /* Round track ends */
}

.scroll-container::-webkit-scrollbar-thumb,
.insights-list::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb,
.side-panel-content::-webkit-scrollbar-thumb,
.sessions-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.continuous-transcript::-webkit-scrollbar-thumb,
.user-avatar-container .user-info::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-thumb:hover,
.insights-list::-webkit-scrollbar-thumb:hover,
.side-panel::-webkit-scrollbar-thumb:hover,
.side-panel-content::-webkit-scrollbar-thumb:hover,
.sessions-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.continuous-transcript::-webkit-scrollbar-thumb:hover,
.user-avatar-container .user-info::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-color); /* Darken thumb on hover */
}

/* === Insight UI Kit Styles (Assumed to be mostly unique) === */
/* Button styles - consolidated */
.insight-button,
.insight-button-primary,
.insight-button-secondary,
.insight-button-danger,
.insight-button-success,
.insight-button-warning,
.insight-button-info,
.insight-button-light,
.insight-button-dark,
.insight-button-outline,
.insight-button-ghost,
.insight-button-link,
.insight-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  background-color: var(--button-bg);  /* Changed from transparent */
  color: var(--button-text);          /* Changed from var(--text-primary) */
  box-shadow: none;
}

.insight-button:hover,
.insight-button:focus {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none; /* Ensure no underline on hover */
}
.insight-button:active {
    transform: translateY(0);
    opacity: 1;
}

.insight-button:disabled,
.insight-button.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  transform: none; /* No hover effect */
}

.insight-button-primary { background-color: var(--primary-color); color: var(--text-on-primary); border-color: var(--primary-color); }
.insight-button-secondary { background-color: var(--secondary-color); color: var(--text-on-secondary); border-color: var(--secondary-color); }
.insight-button-danger { background-color: var(--danger-color); color: var(--text-on-danger); border-color: var(--danger-color); }
.insight-button-success { background-color: var(--success-color); color: var(--text-on-success); border-color: var(--success-color); }
.insight-button-warning { background-color: var(--warning-color); color: var(--text-on-warning); border-color: var(--warning-color); }
.insight-button-info { background-color: var(--info-color); color: var(--text-on-info); border-color: var(--info-color); }
.insight-button-light { background-color: var(--light-color); color: var(--text-on-light); border-color: var(--light-color); }
.insight-button-dark { background-color: var(--dark-color); color: var(--text-on-dark); border-color: var(--dark-color); }

.insight-button-outline {
  background-color: transparent;
  border: 1px solid currentColor; /* Uses the text color for border */
  color: var(--button-bg); /* Reset text color for outline */
}
.insight-button-outline.insight-button-primary { color: var(--primary-color); }
.insight-button-outline.insight-button-secondary { color: var(--secondary-color); }
/* Add other colors as needed */

.insight-button-ghost {
  background-color: transparent;
  border: none;
  color: var(--text-primary); /* Reset color for ghost */
}
.insight-button-ghost:hover { background-color: rgba(0,0,0,0.05); } /* Subtle hover */
.dark-mode .insight-button-ghost:hover { background-color: rgba(255,255,255,0.05); }

.insight-button-link {
  background-color: transparent;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  padding: 0; /* No padding for link-like buttons */
  vertical-align: baseline; /* Align with text */
}
.insight-button-link:hover { text-decoration: none; }

.insight-button-icon {
  padding: 0.5rem;
  border-radius: 50%;
  width: 2.5rem; /* Fixed size */
  height: 2.5rem; /* Fixed size */
  line-height: 1; /* Center icon */
}

/* Button Group */
.insight-button-group {
  display: inline-flex;
  vertical-align: middle;
}

.insight-button-group .insight-button {
  position: relative;
  flex: 1 1 auto;
  border-radius: 0; /* Remove individual radius */
}
.insight-button-group .insight-button:not(:first-child) { margin-left: -1px; } /* Overlap borders */
.insight-button-group .insight-button:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.insight-button-group .insight-button:last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.insight-button-group .insight-button:focus { z-index: 1; } /* Bring focused button to front */


/* Container and Layout styles - consolidated */
.insight-container,
.insight-container-fluid,
.insight-container-sm,
.insight-container-md,
.insight-container-lg,
.insight-container-xl,
.insight-container-xxl {
  width: 100%;
  padding-right: 15px; /* Standard gutter */
  padding-left: 15px; /* Standard gutter */
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

@media (min-width: 576px) { .insight-container, .insight-container-sm { max-width: 540px; } }
@media (min-width: 768px) { .insight-container, .insight-container-sm, .insight-container-md { max-width: 720px; } }
@media (min-width: 992px) { .insight-container, .insight-container-sm, .insight-container-md, .insight-container-lg { max-width: 960px; } }
@media (min-width: 1200px) { .insight-container, .insight-container-sm, .insight-container-md, .insight-container-lg, .insight-container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .insight-container, .insight-container-sm, .insight-container-md, .insight-container-lg, .insight-container-xl, .insight-container-xxl { max-width: 1320px; } }

/* Removed .insight-container-fluid specific rule as it's covered by base */

.insight-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px; /* Negative margin for gutter */
  margin-left: -15px; /* Negative margin for gutter */
  box-sizing: border-box;
}

.insight-col,
.insight-col-auto,
/* Add specific column size classes if needed e.g., .insight-col-6 */
.insight-col-sm,
.insight-col-md,
.insight-col-lg,
.insight-col-xl,
.insight-col-xxl {
  position: relative;
  width: 100%;
  padding-right: 15px; /* Standard gutter */
  padding-left: 15px; /* Standard gutter */
  box-sizing: border-box;
  flex-basis: 0; /* Default basis */
  flex-grow: 1; /* Default grow */
  max-width: 100%; /* Default max width */
}

.insight-col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* Example responsive column */
@media (min-width: 768px) {
  .insight-col-md-6 { /* Example: Half width on medium screens */
      flex: 0 0 50%;
      max-width: 50%;
  }
}

/* Offsets */
/* .insight-offset-sm, .insight-offset-md, etc. - Define these if needed */
@media (min-width: 768px) { .insight-offset-md-2 { margin-left: 16.666667%; } } /* Example offset */

/* Gutters */
/* .insight-gutters-sm, .insight-gutters-md, etc. - Define if needed, usually adjusts row margin and col padding */


/* Input and Form styles - consolidated */
.insight-input,
.insight-input-sm,
.insight-input-lg,
.insight-select, /* Add class for styled selects */
.insight-textarea { /* Add class for styled textareas */
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--background-primary);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  -webkit-appearance: none;
          appearance: none; /* Remove default styling */
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.insight-input:focus,
.insight-select:focus,
.insight-textarea:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.insight-input:disabled,
.insight-select:disabled,
.insight-textarea:disabled {
  background-color: var(--background-disabled);
  opacity: 0.65;
  cursor: not-allowed;
}

.insight-input-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }
.insight-input-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.3rem; }

/* Input Group */
.insight-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap; /* Allow addons/buttons to wrap */
  align-items: stretch;
  width: 100%;
}

.insight-input-group .insight-input,
.insight-input-group .insight-select,
.insight-input-group .insight-textarea {
  position: relative;
  flex: 1 1 auto;
  width: 1%; /* Prevent taking full width */
  min-width: 0; /* Allow shrinking */
  margin-bottom: 0;
}

/* Input group addons/buttons */
.insight-input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
}
.dark-mode .insight-input-group-text { background-color: var(--bg-color-secondary); border-color: var(--border-color); color: var(--text-color-secondary); }

.insight-input-group > .insight-input:not(:first-child),
.insight-input-group > .insight-select:not(:first-child),
.insight-input-group > .insight-textarea:not(:first-child),
.insight-input-group > .insight-input-group-text:not(:first-child),
.insight-input-group > .insight-button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px; /* Overlap borders */
}

.insight-input-group > .insight-input:not(:last-child),
.insight-input-group > .insight-select:not(:last-child),
.insight-input-group > .insight-textarea:not(:last-child),
.insight-input-group > .insight-input-group-text:not(:last-child),
.insight-input-group > .insight-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.insight-input-group > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.insight-input-group > :last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.insight-input-group > :first-child:last-child { border-radius: 0.375rem; } /* If only one item */

.insight-input-group > :not(:first-child:last-child):first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.insight-input-group > :not(:first-child:last-child):last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }


.insight-input-group > .insight-button { /* Ensure button aligns correctly */
  position: relative; 
    z-index: 2; /* Keep button above input */
}

/* Session type styles */
.session-type-container {
  margin-bottom: 10px;
}

.session-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.session-type-label {
  font-weight: 500;
  color: var(--text-color);
  margin-right: 8px;
}

.session-type-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
  padding: 2px 8px;
  border-radius: 4px;
}

.session-type-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.session-type-option input[type="radio"] {
  margin-right: 5px;
  cursor: pointer;
}

.other-session-type {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
  width: 200px;
  transition: all 0.2s ease;
}

.other-session-type:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

/* Dark mode styles for session type */
.dark-mode .session-type-label {
  color: var(--text-color-dark);
}

.dark-mode .session-type-option:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .other-session-type {
  background-color: var(--input-bg-dark);
  color: var(--text-color-dark);
  border-color: var(--border-color-dark);
}

.dark-mode .other-session-type:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

/* Responsive styles */
@media (max-width: 768px) {
  .session-type-options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .session-type-label {
    width: 100%;
    margin-bottom: 6px;
  }
  
  .other-session-type {
    width: 100%;
    margin-top: 6px;
  }
}

/* Language selector in side panel */
.setting-item.language-selector:not(.searchable-language-selector) {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: visible; /* Allow dropdown to extend beyond container */
  position: relative; /* Establish positioning context */
}

.setting-item.language-selector:not(.searchable-language-selector) label {
  margin-bottom: 4px;
}

/* New searchable language selector - ensure proper display */
.setting-item .searchable-language-selector {
  width: 100%;
}

/* Only target traditional select elements */
select.language-select {
  width: 100%;
  padding: 6px 10px; /* Reduced padding */
  border: 2px solid var(--border-color);
  background: var(--bg-color-secondary); /* Changed from --bg-color-primary */
  color:var(--text-color-primary);
  font-size: 0.65rem; /* Slightly smaller font */
  margin-bottom: 0;
  -webkit-appearance: none;
          appearance: none;
  /* Arrow inherited from base select rule */
}

.dark-mode select.language-select {
  background-color: var(--bg-color-secondary);
  border-color: var(--border-color-dark);
  color: var(--text-color-dark);
  width: 100% !important;
}

select.language-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

/* Add styles for session title editing */
.session-item.editing {
  background-color: var(--bg-color-secondary);
}

.session-edit-form {
  width: 100%;
  margin-bottom: 4px;
}

.session-title-input {
  width: 100%;
  padding: 4px 8px;
  background-color: var(--bg-color);
  color: var(--text-color-primary);
  border: 1px solid var(--primary-color);
  border-radius: 4px; 
  font-size: 0.9rem;
}

.session-item .session-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.session-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Title takes full width */
  width: 100%;
  min-height: 24px; /* Reduced height since no buttons */
  margin-bottom: 4px; /* Space between title and footer */
}

.session-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 20px; /* Compact footer height */
}

.session-buttons {
  display: flex;
  align-items: center;
  gap: 4px; /* Compact spacing between buttons */
  margin-left: auto; /* Push buttons to the right */
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

.edit-title-btn {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 0.8rem; /* Smaller font */
  padding: 4px; /* Reduced padding */
  margin: 0;
  opacity: 0.7; /* Consistent with other buttons */
  transition: all 0.2s ease; /* Faster transition */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* Smaller radius for compactness */
  width: 28px; /* Smaller fixed width */
  height: 28px; /* Smaller fixed height */
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtler shadow */
  color: var(--text-color-secondary);
}

.edit-title-btn:hover {
  opacity: 1;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.02); /* Subtle scale effect */
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
  box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 66, 133, 244), 0.2);
}

.session-item:hover .edit-title-btn {
  opacity: 0.7; /* Consistent with base opacity */
}

/* Delete Session Button */
.delete-session-btn {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 0.8rem; /* Consistent with other buttons */
  padding: 4px; /* Consistent padding */
  margin: 0;
  opacity: 0.7; /* Consistent with other buttons */
  transition: all 0.2s ease; /* Consistent transition */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* Consistent radius */
  width: 28px; /* Consistent width */
  height: 28px; /* Consistent height */
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Consistent shadow */
  color: var(--error-color);
  /* Removed transform: translateX(10px) for consistent positioning */
}

.delete-session-btn:hover {
  opacity: 1;
  background-color: var(--error-color);
  border-color: var(--error-color);
  color: white;
  transform: scale(1.02); /* Consistent with other buttons */
  box-shadow: 0 2px 6px rgba(234, 67, 53, 0.2); /* Consistent shadow */
}

.session-item:hover .delete-session-btn {
  opacity: 0.7; /* Consistent with other buttons */
}

.edit-buttons {
  display: flex;
  margin-top: 8px;
  gap: 8px;
}

.save-title-btn,
.cancel-title-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
}

.save-title-btn {
  background-color: var(--primary-color);
  color: white;
}

.save-title-btn:hover {
  background-color: var(--primary-color-dark);
}

.cancel-title-btn {
  background-color: var(--bg-color-secondary);
  color: var(--text-color-primary);
}

.cancel-title-btn:hover {
  background-color: var(--border-color);
}

/* Free Model Info */
.free-model-info {
  display: flex;
  align-items: center;
  background-color: rgba(0, 128, 0, 0.1);
  border-radius: 6px;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.free-model-badge {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 10px;
}

.free-model-description {
  color: #2E7D32;
  font-size: 0.9rem;
}

.dark-mode .free-model-info {
  background-color: rgba(0, 128, 0, 0.2);
}

.dark-mode .free-model-description {
  color: #81C784;
}

/* Subscription Status Styles */
.subscription-status {
  position: relative;
  display: inline-block;
  margin-right: 1rem;
}

.tier-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscription-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.subscription-status:hover .subscription-tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip-content {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: var(--card-shadow);
  min-width: 200px;
}

.tooltip-content h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color-primary);
  font-size: 1rem;
}

.tooltip-content .usage-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tooltip-content .stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-color-secondary);
}

/* Dark mode adjustments */
.dark-mode .tooltip-content {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
}

.dark-mode .tooltip-content h4 {
  color: var(--text-color-primary);
}

.dark-mode .tooltip-content .stat {
  color: var(--text-color-secondary);
}

/* Header Subscription Status */
.header-subscription-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  height: 32px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.header-subscription-status:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.tier-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.tier-name {
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
}

.subscription-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  min-width: 240px;
  transform: translateY(-10px);
}

.header-subscription-status:hover .subscription-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip-content {
  background: var(--bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.tooltip-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-color-secondary);
}

.tooltip-header h4 {
  margin: 0;
  color: var(--text-color-primary);
  font-size: 0.95rem;
  font-weight: 600;
}

.usage-stats {
  padding: 12px 16px;
}

.usage-stats .stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.85rem;
}

.stat-label {
  color: var(--text-color-secondary);
}

.stat-value {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stat-value strong {
  color: var(--text-color-primary);
  font-weight: 600;
}

.stat-limit {
  color: var(--text-color-secondary);
  font-size: 0.8rem;
}

/* Dark mode adjustments */
.dark-mode .header-subscription-status {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .header-subscription-status:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .tooltip-content {
  background: var(--bg-color);
  border-color: var(--border-color);
}

.dark-mode .tooltip-header {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-subscription-status {
    height: 28px;
    padding: 0 6px;
  }

  .tier-name {
    font-size: 0.8rem;
  }

  .subscription-tooltip {
    right: -10px;
    min-width: 220px;
  }
}

/* Style for the new AI Title button */
.ai-title-btn {
  background: var(--bg-color-secondary);
  border: 1px solid transparent;
  cursor: pointer; 
  font-size: 0.8rem; /* Consistent with other buttons */
  padding: 4px; /* Consistent padding */
  margin: 0;
  opacity: 0.7; /* Consistent with other buttons */
  transition: all 0.2s ease; /* Consistent transition */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* Consistent radius */
  width: 28px; /* Consistent width */
  height: 28px; /* Consistent height */
  color: var(--primary-color);
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Consistent shadow */
}

.ai-title-btn:hover:not(:disabled) {
  opacity: 1;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.02); /* Consistent with other buttons */
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
  box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 66, 133, 244), 0.2);
}

.ai-title-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: var(--bg-color-tertiary);
  border-color: transparent;
  color: var(--text-color-secondary);
  box-shadow: none;
}

.ai-title-btn:disabled:hover {
  background: var(--bg-color-tertiary);
  border-color: transparent;
  color: var(--text-color-secondary);
  transform: none;
  box-shadow: none;
}

.session-item:hover .edit-title-btn,
.session-item:hover .ai-title-btn { /* Show both on hover */
  opacity: 0.7; /* Consistent with other buttons */
}

.edit-buttons {
  display: flex;
  margin-top: 8px;
  gap: 8px;
}

/* Scoobs Correct Transcript button in transcript header */
.ai-correct-btn {
  background: var(--bg-color-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px;
  margin: 0;
  opacity: 0.85;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  color: var(--primary-color);
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.ai-correct-btn:hover:not(:disabled) {
  opacity: 1;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 66, 133, 244), 0.3);
}

.ai-correct-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: var(--bg-color-tertiary);
  border-color: transparent;
  color: var(--text-color-secondary);
  box-shadow: none;
}

.dark-mode .ai-correct-btn {
  background: var(--bg-color-tertiary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .ai-correct-btn:hover:not(:disabled) {
  background-color: var(--primary-color);
  border: 1px solid transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4);
}

/* Style the new engine select dropdown */
.engine-select {
  width: 100%;
  padding: 6px 6px; /* Reduced padding */
  border-radius: 6px;
  border: 2px solid var(--border-color);
  background: var(--bg-color-secondary);
  color: var(--text-color-primary);
  font-size: 0.75rem; /* Slightly smaller font */
  margin-bottom: 0;
  -webkit-appearance: none;
          appearance: none;
  /* Arrow inherited from base select rule */
  cursor: pointer;
  transition: all 0.2s ease;
}

.engine-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--disabled-color);
}

.engine-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.dark-mode .engine-select {
  background-color: var(--bg-color-secondary);
  border-color: var(--border-color-dark);
  color: var(--text-color-primary);
}

/* Remove old engine button styles if they exist */
/* .engine-button { ... } */
/* .engine-button.active { ... } */

/* Reduce margin on sign out button itself */
.side-panel-footer .sign-out-button {
    margin-top: 10px; /* Reduced from original implicit margin */
}

/* Settings Header */
.settings-header {
  /* Styles moved from inline */
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px; 
}

.settings-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color-primary);
}

.settings-header button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-color-secondary);
  font-size: 0.9rem; /* Match text size */
}

/* Collapsible Settings Container */
.collapsible-settings {
  overflow: hidden;
  transition: opacity 0.3s ease-out, margin-bottom 0.3s ease-out;
  /* max-height: 500px; */ /* REMOVED */
  opacity: 1;
  margin-bottom: 10px; 
}

.collapsible-settings.collapsed {
  /* max-height: 0; */ /* REMOVED */
  opacity: 0;
  margin-bottom: 0;
  border-bottom: none; 
  display: none; /* Use display none instead */
}

/* Ensure last setting-item in collapsed section has no border */
.collapsible-settings.collapsed .setting-item:last-child {
   border-bottom: none;
}

/* Apply disabled style if applicable */
.refresh-sessions-button:disabled { /* Apply disabled style if applicable */
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--disabled-color); /* Use disabled color */
  transform: none; /* Prevent hover effect */
}

/* --- ADD Specific Dark Mode Styles for Enabled Side Panel Buttons --- */
.dark-mode .save-session-button:not(:disabled),
.dark-mode .new-session-button:not(:disabled),
.dark-mode .refresh-sessions-button:not(:disabled) {
  background-color: var(--primary-color); /* Use primary color for active state */
  color: var(--button-text); /* Ensure text contrast */
}

.dark-mode .save-session-button:hover:not(:disabled),
.dark-mode .new-session-button:hover:not(:disabled),
.dark-mode .refresh-sessions-button:hover:not(:disabled) {
  background-color: var(--primary-color-dark); /* Darker primary on hover */
  transform: translateY(-1px);
}
/* --- END Specific Dark Mode Styles --- */

/* --- Added Resources Display --- */

.upload-section-content {
  margin-top: 0; /* Removed top margin, handled by parent padding */
  display: flex;
  flex-direction: column;
  gap: 8px; /* Keep small gap */
}

.upload-title {
  display: flex;
  align-items: center;
  gap: 6px; /* Reduced gap */
  font-size: 0.9rem;
  color: var(--text-color-primary);
  font-weight: 500;
  margin-bottom: 4px; /* Small space below title */
}

.upload-options {
  margin-bottom: 4px; /* Reduced margin */
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-color-secondary);
}

.upload-option {
  color: var(--text-color-secondary); /* Base color */
}

.clickable-upload {
  padding: 3px 6px; /* Reduced padding */
}

.url-input-section {
  display: flex; 
  align-items: center; 
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-bottom: 0;
}

.url-input {
  flex: 1 1; /* Allow input to grow */
  padding: 6px 12px; /* Adjust padding */
  height: 32px; 
  border: 1px solid var(--border-color);
  border-right: none; /* Remove right border */
  border-radius: 16px 0 0 16px !important; /* Rounded left corners - high value */
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 0.85rem;
  min-width: 0; 
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.url-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1); /* Subtle focus */
  z-index: 2; 
  position: relative; 
}

.small-button { 
  height: 32px; 
  flex-shrink: 0; 
  padding: 6px 12px; /* Match input vertical padding */
  border-radius: 0 16px 16px 0 !important; /* Rounded right corners - high value */
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-bg); /* Use button bg for border */
  border-left: none; /* Remove left border to join with input */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.small-button:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}

/* --- Image Specific Styles --- */

.image-list .image-thumbnail-container {
  display: flex;
  flex-wrap: wrap; /* Allow thumbnails to wrap */
  gap: 8px; /* Reduced spacing */
  padding-left: 0; /* Align with list text */
}

.image-thumbnail-wrapper {
  position: relative; 
  border: 1px solid var(--border-color);
  padding: 2px;
  background-color: var(--bg-color-secondary);
  border-radius: 4px; /* Slightly rounded corners */
  overflow: hidden; /* Clip remove button if needed */
}

.image-thumbnail {
  display: block; 
  width: 50px; /* Slightly smaller width */
  height: 50px; /* Slightly smaller height */
  object-fit: cover; 
  cursor: help; 
  border-radius: 3px; /* Inner radius */
}

.image-remove-btn {
  position: absolute;
  top: -6px; /* Position slightly outside */
  right: -6px;
  background-color: rgba(40, 40, 40, 0.75); /* Darker background for visibility */
  color: #fff; 
  border-radius: 50%; 
  width: 16px; /* Smaller button */
  height: 16px;
  font-size: 11px; /* Smaller font */
  line-height: 16px; /* Center the cross */
  text-align: center;
  padding: 0;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.image-thumbnail-wrapper:hover .image-remove-btn {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Dark Mode Specific Overrides --- */

.dark-mode .url-input {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .small-button {
  background-color: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-text);
}
.dark-mode .small-button:hover {
  background-color: var(--button-hover);
  border-color: var(--button-hover);
}

.dark-mode .image-thumbnail-wrapper {
  background-color: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.dark-mode .image-remove-btn {
   background-color: rgba(60, 60, 60, 0.85); /* Adjusted dark background */
   color: #eee;
}


/* ... rest of the styles ... */

.added-resources-display {
  margin-top: 8px; /* Small margin above */
  padding-top: 8px; /* Reduced padding */
  border-top: 1px solid var(--border-color);
  max-height: 150px; /* Further reduced max height */
  overflow-y: auto;
  width: 100%; 
}

.resource-list {
  margin-bottom: 8px;
}

.resource-list h5 {
  margin-bottom: 4px; /* Reduced margin */
  font-size: 0.8rem; /* Slightly smaller */
  color: var(--text-color-secondary); /* Use secondary color for labels */
  font-weight: 600;
}

.resource-list ul {
  list-style: none;
  padding-left: 0; /* Remove padding */
  margin: 0;
}

.resource-list li {
  margin-bottom: 2px; /* Tighter spacing */
  padding: 2px 0; /* Add minimal vertical padding */
}

.resource-list li span { /* Target the span holding the name */
  color: var(--text-color-primary); /* Use primary text color */
  margin-left: 4px; /* Add small space after icon */
}


/* ... rest of the styles ... */

/* --- Added Resources Display --- */

/* ... existing styles ... */

.resource-list li.resource-item {
  display: flex;
  align-items: center;
  gap: 6px; /* Space between checkbox, label, and remove button */
  margin-bottom: 4px; /* Increased margin slightly for checkbox */
  padding: 2px 0; 
}

.resource-item input[type="checkbox"] {
  flex-shrink: 0; /* Prevent checkbox from shrinking */
  margin: 0; /* Remove default margin */
  cursor: pointer;
  /* Optional: Add custom checkbox styling */
  /* appearance: none; 
  width: 16px; 
  height: 16px; 
  border: 1px solid var(--border-color);
  border-radius: 3px; 
  position: relative; */
}

/* Optional custom checkbox checked state */
/* .resource-item input[type="checkbox"]:checked::before { 
  content: '\2713'; 
  position: absolute; 
  top: 0; left: 2px; 
  color: var(--primary-color); 
  font-size: 14px; 
}*/

.resource-item .resource-label {
  display: flex;
  align-items: center;
  gap: 6px; /* Space between icon and text */
  flex-grow: 1; /* Allow label to take available space */
  cursor: pointer; /* Make label clickable for checkbox */
  overflow: hidden; /* Prevent long names from overflowing */
}

.resource-item .resource-label .resource-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem; /* Slightly larger for readability */
}


.resource-item .remove-resource-btn {
  flex-shrink: 0; /* Prevent button from shrinking */
  margin-left: auto; /* Keep button pushed to the right */
}

/* Image Checkbox Specifics */
.image-thumbnail-wrapper {
  position: relative; 
  display: flex; /* Use flex for checkbox alignment */
  flex-direction: column; /* Stack checkbox, label, remove button */
  border: 1px solid var(--border-color);
  padding: 2px;
  background-color: var(--bg-color-secondary);
  border-radius: 4px; 
  overflow: visible; /* Allow remove button to overflow */
}

.image-select-checkbox {
  position: absolute;
  top: -8px; /* Position checkbox relative to wrapper */
  left: -8px;
  z-index: 5; /* Above thumbnail */
  cursor: pointer;
  margin: 0;
  /* Optional: Style checkbox */
}

.image-select-label {
  cursor: pointer; /* Make image clickable for checkbox */
  display: block; /* Ensure label takes block space */
}

.image-thumbnail {
  /* Styles remain the same */
  display: block; 
  width: 50px; 
  height: 50px; 
  object-fit: cover; 
  border-radius: 3px; 
}

.image-remove-btn {
  /* Styles remain the same */
  position: absolute;
  top: -6px; 
  right: -6px;
  z-index: 6; /* Above checkbox */
  /* ... other remove btn styles ... */
}

/* ... existing styles ... */

/* Ensure upload section collapse works with display: none */
.unified-upload.collapsed .upload-section-content {
  display: none;
}
.unified-upload.collapsed .toggle-upload-button {
  /* Adjust button position when collapsed if needed, but display:none should handle it */
  margin: 0 auto;
}

/* Show hint text when collapsed */
.unified-upload.collapsed::after {
  content: "Expand to upload files";
  font-style: italic;
  display: block;
  text-align: right;
  margin-right: 50px;
  color: var(--text-color-secondary);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  opacity: 0.7;
}

/* Ensure resource display area scrolls */
.added-resources-display {
  /* ... existing styles ... */
  max-height: 150px; 
  overflow-y: auto;
  /* Add scrollbar styling consistency */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.added-resources-display::-webkit-scrollbar { width: 6px; }
.added-resources-display::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.added-resources-display::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; }

/* Image Checkbox/Button Positioning */
.image-thumbnail-wrapper {
  position: relative; 
  display: block; /* Change back from flex */
  border: 1px solid var(--border-color);
  padding: 2px;
  background-color: var(--bg-color-secondary);
  border-radius: 4px; 
  overflow: visible; /* Allow controls to sit outside */
  margin: 8px; /* Add margin to prevent overlap */
}

.image-select-checkbox {
  position: absolute;
  top: -8px; 
  left: -8px;
  z-index: 5; 
  cursor: pointer;
  margin: 0;
  /* Basic size */
  width: 16px;
  height: 16px;
}

.image-select-label { /* Label now just wraps the image */
  cursor: pointer; 
  display: block; 
}

.image-thumbnail {
  display: block; 
  width: 50px; 
  height: 50px; 
  object-fit: cover; 
  border-radius: 3px; 
}

.image-remove-btn {
  position: absolute;
  top: -8px; /* Align vertically with checkbox */
  right: -8px;
  z-index: 6; /* Above checkbox */
  background-color: rgba(40, 40, 40, 0.75); 
  color: #fff; 
  border-radius: 50%; 
  width: 16px; 
  height: 16px;
  font-size: 11px; 
  line-height: 16px; 
  text-align: center;
  padding: 0;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
}

/* Resource Info Text Styling */
.resource-info-text {
  font-size: 0.75rem; /* Small text */
  color: var(--text-color-secondary);
  margin: 8px 0 0 0; /* Margin top, remove others */
  padding: 5px; /* Add some padding */
  background-color: var(--bg-color-tertiary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-left: 3px solid var(--info-color);
}

.dark-mode .resource-info-text {
  background-color: var(--bg-color-secondary);
  color: var(--text-color-secondary);
  border-left-color: var(--info-color);
}

/* Emoji Burst Animation Styles */
.emoji-burst-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.emoji-burst-item {
  position: absolute;
  font-size: 2rem;
  z-index: 1001;
  animation: explosionBurst ease-out forwards;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Main explosion animation */
@keyframes explosionBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4) rotate(0deg);
  }
  20% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.3),
      calc(-50% + var(--explosion-y) * 0.3)
    ) scale(1.2) rotate(calc(var(--rotation) * 0.2));
  }
  40% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.7),
      calc(-50% + var(--explosion-y) * 0.7)
    ) scale(1) rotate(calc(var(--rotation) * 0.5));
  }
  70% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.95),
      calc(-50% + var(--explosion-y) * 0.95)
    ) scale(var(--final-scale)) rotate(calc(var(--rotation) * 0.8));
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--explosion-x)),
      calc(-50% + var(--explosion-y))
    ) scale(calc(var(--final-scale) * 0.3)) rotate(var(--rotation));
  }
}

/* Alternative animations for variety */
.emoji-burst-item:nth-child(3n) {
  animation-name: explosionBurstSpin;
}

.emoji-burst-item:nth-child(4n) {
  animation-name: explosionBurstPulse;
}

.emoji-burst-item:nth-child(5n) {
  animation-name: explosionBurstZigzag;
}

/* Spinning explosion variant */
@keyframes explosionBurstSpin {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5) rotate(60deg);
  }
  20% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.3),
      calc(-50% + var(--explosion-y) * 0.3)
    ) scale(1.3) rotate(180deg);
  }
  40% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.7),
      calc(-50% + var(--explosion-y) * 0.7)
    ) scale(1.1) rotate(360deg);
  }
  70% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.95),
      calc(-50% + var(--explosion-y) * 0.95)
    ) scale(var(--final-scale)) rotate(540deg);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--explosion-x)),
      calc(-50% + var(--explosion-y))
    ) scale(calc(var(--final-scale) * 0.2)) rotate(720deg);
  }
}

/* Pulsing explosion variant */
@keyframes explosionBurstPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.6);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  25% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.4),
      calc(-50% + var(--explosion-y) * 0.4)
    ) scale(1.4);
  }
  35% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.6),
      calc(-50% + var(--explosion-y) * 0.6)
    ) scale(1.1);
  }
  50% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.8),
      calc(-50% + var(--explosion-y) * 0.8)
    ) scale(1.3);
  }
  70% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.95),
      calc(-50% + var(--explosion-y) * 0.95)
    ) scale(var(--final-scale));
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--explosion-x)),
      calc(-50% + var(--explosion-y))
    ) scale(calc(var(--final-scale) * 0.1));
  }
}

/* Zigzag explosion variant */
@keyframes explosionBurstZigzag {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
  }
  25% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.4 + 20px),
      calc(-50% + var(--explosion-y) * 0.4)
    ) scale(1) rotate(90deg);
  }
  50% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.7 - 15px),
      calc(-50% + var(--explosion-y) * 0.7)
    ) scale(1.1) rotate(180deg);
  }
  75% {
    transform: translate(
      calc(-50% + var(--explosion-x) * 0.9 + 10px),
      calc(-50% + var(--explosion-y) * 0.9)
    ) scale(var(--final-scale)) rotate(270deg);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--explosion-x)),
      calc(-50% + var(--explosion-y))
    ) scale(calc(var(--final-scale) * 0.3)) rotate(360deg);
  }
}

/* Connection Health and Force Save Styles */
.mainApp-connection-indicator {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mainApp-connection-indicator .connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.connection-status.degraded {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
}

.connection-status.broken {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.dark-mode .connection-status.degraded {
  color: #ffecb3;
  background-color: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.dark-mode .connection-status.broken {
  color: #ffcccb;
  background-color: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Connection status indicators for sidebar and components */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
  flex-shrink: 0;
}

.status-dot.healthy {
  background-color: #28a745;
  background-color: var(--success-color, #28a745);
  box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
}

.status-dot.degraded {
  background-color: #ffc107;
  background-color: var(--warning-color, #ffc107);
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.5);
  animation: connectionPulse 2s infinite;
}

.status-dot.broken {
  background-color: #dc3545;
  background-color: var(--error-color, #dc3545);
  box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
  animation: connectionPulse 1s infinite;
}

/* Header main wrapper for connection status */
.header-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.connection-status-indicator {
  display: flex;
  align-items: center;
}

.force-save-btn {
  margin-top: 8px;
  background-color: #dc3545 !important;
  color: white !important;
  border: 1px solid #dc3545 !important;
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.force-save-btn:hover:not(:disabled) {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.force-save-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.force-save-btn:disabled {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  cursor: not-allowed;
  opacity: 0.65;
}

.dark-mode .force-save-btn {
  background-color: #e74c3c !important;
  border-color: #e74c3c !important;
}

.dark-mode .force-save-btn:hover:not(:disabled) {
  background-color: #c0392b !important;
  border-color: #a93226 !important;
}

/* Connection Health Pulse Animation */
@keyframes connectionPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.connection-status.broken {
  animation: connectionPulse 2s infinite;
}

/* Force Save Urgency Animation */
@keyframes forceSaveUrgent {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
  }
  50% {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
  }
}

.force-save-btn:not(:disabled):not(:hover) {
  animation: forceSaveUrgent 3s infinite;
}

/* === Scoobs Animation Styles === */
.scoobs-animation-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  animation: scoobsSlideUpDown 2s ease-in-out;
}

.scoobs-animation-icon {
  width: 120px;
  height: 120px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes scoobsSlideUpDown {
  0% {
    bottom: -130px;
    opacity: 0;
  }
  15% {
    bottom: 80px;
    opacity: 1;
  }
  85% {
    bottom: 80px;
    opacity: 1;
  }
  100% {
    bottom: -130px;
    opacity: 0;
  }
}

/* Dark mode adjustments for Scoobs animation */
.dark-mode .scoobs-animation-icon {
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.1));
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .scoobs-animation-icon {
    width: 90px;
    height: 90px;
  }
  
  @keyframes scoobsSlideUpDown {
    0% {
      bottom: -100px;
      opacity: 0;
    }
    15% {
      bottom: 60px;
      opacity: 1;
    }
    85% {
      bottom: 60px;
      opacity: 1;
    }
    100% {
      bottom: -100px;
      opacity: 0;
    }
  }
}

/* === Central AI Button Theme === */
/* Universal class for all AI-powered buttons with gradient border and glow */
.ai-powered-button {
  position: relative;
  overflow: hidden;
}

/* Dynamic border radius calculation for different button types */
.ai-powered-button.get-insight-button::before {
  border-radius:22px; /* 4px base + 2px */
  margin: 1px;
  border: 1px solid transparent;
}

.ai-powered-button.action-button::before {
  border-radius: 24px; /* 22px base + 2px */
}

.ai-powered-button.ai-title-btn::before,
.ai-powered-button.ai-correct-btn::before {
  border-radius: 8px; /* 6px base + 2px */
}

.ai-powered-button::before {
  content: '';
  position: absolute;
  inset: -2px; /* Create border effect */
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  border-radius: 6px; /* Default fallback */
  animation: gradientMove 8s linear infinite;
  z-index: -1; /* Behind the button */
}

/* Dynamic border radius for inner backgrounds */
.ai-powered-button.get-insight-button::after {
  border-radius: 22px; /* Match get-insight-button */
  margin:1.5px;
}

.ai-powered-button.action-button::after {
  border-radius: 22px; /* Match action-button */
  margin: 1px;
}

.ai-powered-button.ai-title-btn::after,
.ai-powered-button.ai-correct-btn::after {
  margin: 1px;
  border-radius: 6px;
}

.ai-powered-button::after {
  content: '';
  position: absolute;
  inset: 0; /* Fill the button */
  background: var(--button-bg);
  border-radius: 4px; /* Default fallback */
  z-index: -1; /* Behind content but above gradient */
}

/* Ensure button content stays above pseudo-elements */
.ai-powered-button > * {
  position: relative;
  z-index: 1;
}

/* Dark mode support */
.dark-mode .ai-powered-button::after,
.dark-mode .ai-powered-button.get-insight-button::after,
.dark-mode .ai-powered-button.action-button::after,
.dark-mode .ai-powered-button.ai-title-btn::after,
.dark-mode .ai-powered-button.ai-correct-btn::after {
  background: var(--button-bg);
}

/* Hover glow effect for AI buttons */
.ai-powered-button:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(66, 133, 244, 0.3);
  transition: box-shadow 0.3s ease;
}

.dark-mode .ai-powered-button:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(108, 159, 255, 0.4);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* === Notifications === */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: clamp(300px, 85vw, 500px);
  z-index: 9999; 
  animation: slideIn 0.3s ease-out forwards;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: white;
  font-size: clamp(11px, 2.5vw, 16px);
  word-break: break-word;
  gap: 10px;
}

.notification.success {
  background-color: rgba(212, 237, 218, 0.95);
  border-left-color: #28a745;
  color: #155724;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notification.error {
  background-color: rgba(248, 215, 218, 0.95);
  border-left-color: #dc3545;
  color: #721c24;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notification.warning {
  background-color: rgba(255, 243, 205, 0.95);
  border-left-color: #ffc107;
  color: #856404;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notification.info {
  background-color: rgba(209, 236, 241, 0.95);
  border-left-color: #17a2b8;
  color: #021a1e;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notification-message {
  flex: 1 1;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 500;
}

.notification-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 0 5px;
  color: inherit;
  line-height: 1;
}

.notification-close:hover {
  opacity: 1;
}

/* Responsive font sizing for notifications */
@media (max-width: 768px) {
  .notification {
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 40px);
    width: -webkit-fit-content;
    width: fit-content;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    font-size: 14px;
    padding: 10px 16px;
  }
  
  .notification-message {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .notification {
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);
    width: -webkit-fit-content;
    width: fit-content;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .notification-message {
    font-size: 11px;
  }
  
  .notification-close {
    font-size: 16px;
  }
}

@media (max-width: 320px) {
  .notification {
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);
    width: -webkit-fit-content;
    width: fit-content;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    font-size: 11px;
    padding: 6px 10px;
  }
  
  .notification-message {
    font-size: 10px;
  }
};

/* Dark mode support for gradient border */
.dark-mode .action-buttons .action-button.summarize-button::after {
  background: var(--button-bg);
}

.action-buttons .action-button:hover:not(:disabled) {
  background-color: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.action-buttons .action-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons .action-button:disabled { /* Consolidated */
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--background-disabled);
  color: var(--text-color-primary); /* Ensure readable text */
  box-shadow: none; /* Remove shadow when disabled */
}

.action-icon { /* Consolidated */
  font-size: 1.2em;
  display: flex; /* Ensures icon centers properly */
  align-items: center;
  justify-content: center;
  margin-right: 0; /* Removed fixed margin, rely on gap */
}

.action-buttons .action-button:disabled .action-icon {
  opacity: 0.6; /* Match button opacity */
}

.action-buttons .action-button .spinner { /* Spinner within button */
  width: 1em; /* Size relative to font */
  height: 1em; /* Size relative to font */
  margin-right: 8px; /* Space between spinner and text */
  /* Spinner animation handled by .spinner */
}

@media (max-width: 480px) {
  .notification {
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);
    width: -webkit-fit-content;
    width: fit-content;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .notification-message {
    font-size: 11px;
  }
  
  .notification-close {
    font-size: 16px;
  }
  
  /* === Ultra-Compact Action Buttons for Small Screens === */
  .action-buttons {
    gap: 6px !important;
    padding: 8px 4px !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  
  .action-buttons .action-button {
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    position: relative !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Hide all text on very small screens, show icon only */
  .action-buttons .action-button span:not(.action-icon):not(.spinner) {
    display: none !important;
  }
  
  /* Center icons in circular buttons */
  .action-buttons .action-button .action-icon {
    font-size: 1.2rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Ensure icons show even when disabled */
  .action-buttons .action-button:disabled .action-icon {
    opacity: 0.5 !important;
    display: flex !important;
  }
  
  /* Make sure SVG icons are centered */
  .action-buttons .action-button .action-icon svg,
  .action-buttons .action-button svg {
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* Show tooltip on hover for accessibility */
  .action-buttons .action-button::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 4px;
  }
  
  .action-buttons .action-button:active::after {
    opacity: 1;
  }
  
  /* Additional mobile optimizations for very small screens */
  .header-right {
    gap: 2px !important; /* Even smaller gap */
  }
  
  .header-right .help-button,
  .header-right .dark-mode-toggle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem;
    padding: 4px !important;
  }
  
  .header-right .user-avatar-container {
    width: 28px;
    height: 28px;
  }
  
  .header-right .user-avatar-container .user-avatar {
    font-size: 0.9rem;
    line-height: 28px;
  }
  
  .app-title {
    font-size: 1rem; /* Even smaller title */
  }
  
  .app-logo {
    width: 20px !important;
    height: 20px !important;
  }
  
  .title-container {
    max-width: calc(100vw - 120px) !important; /* More space for smaller buttons */
    padding: 0 4px;
  }
  
  .header-left { left: 6px; }
  .header-right { right: 6px; }
}

/* Mobile header menu controls */
.mobile-header-menu {
  display: none;
}

.mobile-menu-item:hover {
  background-color: var(--bg-color-hover) !important;
}

.dark-mode .mobile-dropdown-menu {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dark-mode .mobile-menu-item:hover {
  background-color: var(--bg-color-tertiary) !important;
}

@media (max-width: 768px) {
  /* Hide desktop buttons, show mobile menu */
  .desktop-header-buttons {
    display: none !important;
  }
  
  .mobile-header-menu {
    display: block !important;
  }
  
  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* Speaker Mode Toggle - Inline within floating panel */
.external-audio-toggle-inline {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.external-audio-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-color-primary);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.external-audio-label:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .external-audio-label:hover {
  background: rgba(255, 255, 255, 0.05);
}

.external-audio-icon {
  margin-right: 6px;
  font-size: 14px;
}

/* Small Toggle Switch for floating panel */
.toggle-switch-small {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
  flex-shrink: 0;
}

.toggle-switch-small input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-small {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e0;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.toggle-slider-small:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch-small input:checked + .toggle-slider-small {
  background-color: #ff9800;
}

.toggle-switch-small input:checked + .toggle-slider-small:before {
  transform: translateX(16px);
}

.dark-mode .toggle-slider-small {
  background-color: #4a5568;
}

.dark-mode .toggle-slider-small:before {
  background-color: #f7fafc;
}

/* Speaker Mode Content - Embedded in floating panel (top) */
.external-audio-content {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* Prevent width expansion of floating panel */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Prevent content from overflowing */
  /* Remove opacity transition to prevent layout shifts */
}

.dark-mode .external-audio-content {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Note: Floating panel max-height is now handled by base .floating-control-panel rule */

/* File Content Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.modal-content {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border-radius: 12px;
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e1e5e9;
  border-bottom: 1px solid var(--border-color, #e1e5e9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: #f8f9fa;
  background: var(--hover-bg, #f8f9fa);
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 200px;
}

.markdown-content {
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  line-height: 1.6;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  color: #3498db;
  color: var(--primary-color, #3498db);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.markdown-content h1 { font-size: 1.8rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.3rem; }

.markdown-content p {
  margin-bottom: 1em;
}

.markdown-content ul, .markdown-content ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.markdown-content li {
  margin-bottom: 0.5em;
}

.markdown-content code {
  background: #f8f9fa;
  background: var(--code-bg, #f8f9fa);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
}

.markdown-content pre {
  background: #f8f9fa;
  background: var(--code-bg, #f8f9fa);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
}

.markdown-content blockquote {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--primary-color, #3498db);
  padding-left: 16px;
  margin: 1em 0;
  color: #6c757d;
  color: var(--text-muted, #6c757d);
  font-style: italic;
}

.file-content-text {
  background: #f8f9fa;
  background: var(--code-bg, #f8f9fa);
  padding: 20px;
  border-radius: 8px;
  color: #2c3e50;
  color: var(--text-color, #2c3e50);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  margin: 0;
}

.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #e1e5e9;
  border-top: 1px solid var(--border-color, #e1e5e9);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.modal-footer .btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-footer .btn-secondary {
  background: #6c757d;
  background: var(--secondary-bg, #6c757d);
  color: white;
}

.modal-footer .btn-secondary:hover {
  background: #5a6268;
  background: var(--secondary-bg-hover, #5a6268);
}

.modal-footer .btn-primary {
  background: #3498db;
  background: var(--primary-color, #3498db);
  color: white;
}

.modal-footer .btn-primary:hover {
  background: #2980b9;
  background: var(--primary-color-hover, #2980b9);
}

/* Dark mode support */
.dark-mode .modal-content,
[data-theme="dark"] .modal-content {
  background: #1a1a1a;
  color: #e0e0e0;
}

.dark-mode .modal-header,
[data-theme="dark"] .modal-header {
  border-bottom-color: #333;
}

.dark-mode .modal-header h3,
[data-theme="dark"] .modal-header h3 {
  color: #e0e0e0;
}

.dark-mode .modal-close-btn,
[data-theme="dark"] .modal-close-btn {
  color: #aaa;
}

.dark-mode .modal-close-btn:hover,
[data-theme="dark"] .modal-close-btn:hover {
  background: #333;
  color: #fff;
}

.dark-mode .modal-footer,
[data-theme="dark"] .modal-footer {
  border-top-color: #333;
}

.dark-mode .markdown-content,
.dark-mode .file-content-text,
[data-theme="dark"] .markdown-content,
[data-theme="dark"] .file-content-text {
  color: #e0e0e0;
}

.dark-mode .markdown-content h1,
.dark-mode .markdown-content h2,
.dark-mode .markdown-content h3,
.dark-mode .markdown-content h4,
.dark-mode .markdown-content h5,
.dark-mode .markdown-content h6,
[data-theme="dark"] .markdown-content h1,
[data-theme="dark"] .markdown-content h2,
[data-theme="dark"] .markdown-content h3,
[data-theme="dark"] .markdown-content h4,
[data-theme="dark"] .markdown-content h5,
[data-theme="dark"] .markdown-content h6 {
  color: #4a9eff;
}

.dark-mode .markdown-content code,
.dark-mode .markdown-content pre,
.dark-mode .file-content-text,
[data-theme="dark"] .markdown-content code,
[data-theme="dark"] .markdown-content pre,
[data-theme="dark"] .file-content-text {
  background: #2d2d2d;
  color: #e0e0e0;
}

.dark-mode .markdown-content blockquote,
[data-theme="dark"] .markdown-content blockquote {
  color: #aaa;
  border-left-color: #4a9eff;
}

/* Responsive design */
@media (max-width: 768px) {
  .modal-content {
    width: 95vw;
    max-height: 95vh;
    margin: 10px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* === Toggle Switch Component === */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #4CAF50;
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.dark-mode input:checked + .toggle-slider {
  background-color: #66bb6a;
}

.dark-mode .toggle-slider {
  background-color: #555;
}

/* === Minimized Floating Control Panel Styles === */
.floating-control-panel.minimized {
  width: 64px !important; /* Fixed size for container */
  height: 64px !important;
  min-width: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important; /* Allow toggle button to overlap */
  transition: all 0.3s ease !important;
  cursor: move !important; /* Indicate entire minimized panel is draggable */
  border-width: 3px !important;
}

.floating-control-panel.minimized:hover {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.floating-control-panel.minimized.dragging {
  transition: none !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Position the maximize button on the edge of the circle */
.floating-control-panel.minimized .minimize-floating-btn {
  top: -8px !important;
  right: -8px !important;
  width: 26px !important;
  height: 26px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  z-index: 105 !important;
}

/* Ensure wrapper fits perfectly */
.floating-control-panel.minimized .minimized-controls {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Override inline styles of the start/stop button to fill the container nicely */
.floating-control-panel.minimized .control-button {
  width: 54px !important;
  height: 54px !important;
  box-shadow: none !important; /* Let the panel handle the shadow */
  margin: 0 !important;
  border-radius: 50% !important;
}



/* === Mobile Optimization & Tab View === */

/* Hide mobile tabs on desktop */
.split-view-resizer { display: none; }

.mobile-tab-control {
  display: none;
  width: 100%;
  padding: 4px 5px;
  gap: 6px;
  background: var(--bg-color);
  margin-bottom: 4px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-tab-button {
  flex: 1 1;
  padding: 6px 4px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-color-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-tab-button.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Mobile Header Toggle */
.mobile-header-toggle {
  display: none;
  width: 100%;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-color-primary);
  font-weight: 600;
}

/* Mobile Layout adjustments */
@media (max-width: 768px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-y: auto; /* Allow normal page scrolling */
  }

  .container {
    padding: 0 10px; /* Reduce container padding */
    min-height: 100dvh; /* Use dynamic viewport height */
    height: auto; /* Allow growth */
    overflow: visible; /* Allow scrolling */
    display: flex;
    flex-direction: column;
  }

  /* Hide footer on mobile to maximize space */
  footer, [role="contentinfo"] {
    display: none !important;
  }

  /* SHOW mobile tab control on mobile */
  .mobile-tab-control {
    display: flex !important;
    flex-shrink: 0;
  }

  .main-content {
    display: flex; /* Switch from grid to flex column */
    flex-direction: column;
    flex: 1 1; /* Grow to fill remaining space */
    height: auto !important; /* Allow growth for page scrolling */
    min-height: 0; /* Critical for flex scrolling */
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 10px);
    overflow: visible; /* Allow scrolling */
    touch-action: manipulation;
  }

  /* === TRANSCRIPT ONLY VIEW === */
  .main-content.mobile-tab-transcript .transcript-section-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 !important;
    height: calc(100dvh - 70px) !important;
    min-height: calc(100dvh - 70px) !important;
    max-height: calc(100dvh - 70px) !important;
    overflow: hidden !important;
  }

  .main-content.mobile-tab-transcript .transcript-section-container .text-container {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-content.mobile-tab-transcript .transcript-section-container .text-container .continuous-transcript {
    flex: 1 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .main-content.mobile-tab-transcript .insights-section-container {
    display: none !important;
  }
  
  .main-content.mobile-tab-transcript .split-view-resizer {
    display: none !important;
  }

  /* === INSIGHTS ONLY VIEW === */
  .main-content.mobile-tab-insights .insights-section-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 !important;
    height: calc(100dvh - 70px) !important;
    min-height: calc(100dvh - 70px) !important;
    max-height: calc(100dvh - 70px) !important;
    overflow: hidden !important;
  }

  .main-content.mobile-tab-insights .insights-section-container .text-container {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main-content.mobile-tab-insights .insights-section-container .analysis-list {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .main-content.mobile-tab-insights .insights-section-container .insights-section {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .main-content.mobile-tab-insights .insights-section-container .insights-list {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .main-content.mobile-tab-insights .insights-section-container .analysis-list .chat-box {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-color) !important;
    z-index: 20 !important;
  }

  .main-content.mobile-tab-insights .transcript-section-container {
    display: none !important;
  }
  
  .main-content.mobile-tab-insights .split-view-resizer {
    display: none !important;
  }

  /* === SPLIT VIEW === */
  /* SPLIT VIEW - Side-by-side two-column layout (like desktop) */
  .main-content.mobile-tab-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-gap: 0 4px !important;
    gap: 0 4px !important;
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 2px !important;
  }

  /* Tab bar spans full width across both columns */
  .main-content.mobile-tab-split .mobile-tab-control {
    grid-column: 1 / -1 !important;
  }

  .main-content.mobile-tab-split .split-view-resizer {
    display: none !important;
  }

  .main-content.mobile-tab-split .transcript-section-container,
  .main-content.mobile-tab-split .insights-section-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    zoom: 0.75;
  }

  .main-content.mobile-tab-split .insights-section-container {
    border-left: 1px solid var(--border-color);
    padding-left: 2px;
  }

  /* Compact section headers in split view */
  .main-content.mobile-tab-split .section-header {
    padding: 2px 6px !important;
  }

  .main-content.mobile-tab-split .section-header h3 {
    font-size: 0.8rem !important;
    margin: 0 !important;
  }

  /* Resizer Styles */
  .split-view-resizer {
    position: absolute; /* Absolute positioning for robust placement */
    left: 0;
    width: 100%;
    height: 30px; /* Large touch target */
    top: 50%;
    top: var(--split-ratio, 50%); /* Dynamic position based on state */
    transform: translateY(-50%); /* Center on the line */
    background: transparent; /* Transparent container */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    flex-shrink: 0;
    z-index: 1000; /* Highest priority */
    touch-action: none; /* Disable browser gestures */
    -webkit-user-select: none;
            user-select: none;
    pointer-events: auto; /* Ensure it captures events */
  }
  
  .resizer-handle-bar {
    width: 40px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    pointer-events: none; /* Clicks pass through to container */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Visual lift */
  }
  
  /* Ensure sections take full height - but NOT in split view */
  .section {
    margin-bottom: 0;
    border: none; 
    height: auto !important; 
    min-height: 100%;
    max-height: none !important;
    display: flex;
    flex-direction: column;
  }

  /* In split view, sections fill their grid cell */
  .main-content.mobile-tab-split .section {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  
  /* Remove the individual section overrides - handled by rules above */

  /* SPLIT TAB - STRICT HEIGHT CONSTRAINT FOR INTERNAL SCROLLING */
  /* CRITICAL: These rules must override LiveInsightTool.css which has `max-height: none !important` */
  .main-content.mobile-tab-split .transcript-section-container .text-container {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important; /* Container hides overflow, child scrolls */
    flex: 1 1 !important;
    min-height: 0 !important;
  }
  
  .main-content.mobile-tab-split .transcript-section-container .text-container .continuous-transcript {
    height: 100% !important;
    max-height: 100% !important; /* Override the `max-height: none !important` from LiveInsightTool.css */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important; /* Override flex to allow proper scrolling */
  }
  
  /* Insights scrolling in split view */
  .main-content.mobile-tab-split .insights-section-container .text-container {
    flex: 1 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  .main-content.mobile-tab-split .insights-section-container .analysis-list {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .main-content.mobile-tab-split .insights-section-container .insights-section {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .main-content.mobile-tab-split .insights-section-container .insights-list {
    height: auto !important;
    max-height: none !important; /* Let it grow within the scrollable container */
    overflow-y: auto !important;
    flex: 1 1 !important;
    min-height: 0 !important;
  }
  
  /* Chat box in split view - compact styling handled above */

  /* Re-enable internal scrolling for split view - REMOVED, handled above with more specific selectors */
  
  /* Adjust chat box position in Insights tab - MUST always be visible at bottom */
  .chat-box {
    position: relative; 
    background: var(--bg-color);
    padding: 10px;
    z-index: 10;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0 !important; /* Never shrink - always visible */
    min-height: 50px !important; /* Minimum height to ensure visibility */
  }
  
  /* In split view, chat box stays compact at bottom of insights */
  .main-content.mobile-tab-split .insights-section-container .chat-box {
    position: relative !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
  }

  /* Adjust Insights List to scroll properly */
  .insights-list {
    overflow-y: auto;
    flex: 1 1;
  }

  /* Ensure insights section is relative so overlay positions correctly above chat */
  .insights-section {
    position: relative !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* === ACTION BUTTONS MOBILE LAYOUT === */
  .action-buttons {
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px !important;
    background: var(--bg-color);
    z-index: 5;
    flex-shrink: 0; /* Don't squash buttons */
    box-sizing: border-box;
    /* Reset fixed positioning if present in desktop styles */
    position: relative !important; 
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important; /* Center align buttons */
    align-items: center !important; /* Vertically center */
    gap: 12px;
    /* Ensure it's in the normal document flow */
    clear: both !important;
  }

  /* Action button styling for mobile - compact circular icons */
  .action-buttons .action-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 1rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    position: relative;
    flex-direction: row !important;
    margin: 0 !important;
  }
  
  /* Hide text labels on mobile - show only icons */
  .action-buttons .action-button > span:not(.action-icon):not(.spinner) {
    display: none !important;
  }
  
  .action-buttons .action-button .action-icon,
  .action-buttons .action-button svg.action-icon,
  .action-buttons .action-button > svg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  /* In split view, action buttons come after the sections - no overlay */
  .main-content.mobile-tab-split ~ .action-buttons {
    margin-top: 4px !important;
    padding-bottom: 60px;
  }
  
  /* === FLOATING CONTROL PANEL MOBILE === */
  .floating-control-panel {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transform: scale(0.6);
    transform-origin: top left;
  }

  .floating-control-panel.minimized {
    transform: none;
  }
  
  .floating-control-panel .drag-handle {
    touch-action: none !important;
    cursor: grab !important;
    min-height: 30px !important;
    min-width: 100% !important;
  }
  
  .floating-control-panel .drag-handle:active {
    cursor: grabbing !important;
  }

  /* === COMPACT INSIGHT CONTROLS ON MOBILE === */
  .insight-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.25rem 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .manual-insight-control {
    gap: 0.25rem !important;
    min-width: auto !important;
  }

  .insight-frequency-section {
    min-width: auto !important;
    gap: 0.25rem !important;
    flex: 0 1 auto !important;
    margin-top: 0 !important;
    width: auto !important;
  }

  .insight-frequency-section label {
    font-size: 0.8rem !important;
  }

  .insight-language-section {
    min-width: auto !important;
    gap: 0.25rem !important;
    flex: 0 1 auto !important;
    margin-top: 0 !important;
    width: auto !important;
  }

  .insight-language-section label {
    font-size: 0.8rem !important;
  }

  .section-header {
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }

  .section-header h3 {
    font-size: 1rem !important;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Transcript editing styles */
.transcript-segment {
  /* Dynamic height that grows based on content, similar to text area */
  position: relative;
  margin-bottom: 12px;
  padding: 16px 16px 12px 16px;
  border-radius: 8px;
  background-color: var(--insight-bg-even);
  border: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  
  /* Disable native mobile text selection context menu */
  -webkit-touch-callout: none; /* Disable callout on iOS Safari */
  -webkit-user-select: text; /* Allow text selection but disable context menu */ /* Firefox */ /* IE/Edge */
  user-select: text; /* Standard */
  touch-action: manipulation; /* Disable context menu on touch devices */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
}

.dark-mode .transcript-segment {
  color: #e2e8f0;
}

.transcript-segment:hover {
  background-color: rgba(66, 153, 225, 0.1);
  border-color: rgba(66, 153, 225, 0.2);
}

.dark-mode .transcript-segment:hover {
  background-color: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.2);
}

.transcript-segment::after {
  content: '✎';
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 9px;
  opacity: 0;
  color: #4299e1;
  transition: opacity 0.2s ease;
}

.dark-mode .transcript-segment::after {
  color: #60a5fa;
}

.transcript-segment:hover::after {
  opacity: 0.7;
}

/* New container for text and edit button */
.transcript-text-container {
  align-items: flex-start;
  position: relative;
  flex-grow: 1;
  margin-right: 0px;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
  order: 2;
  height: auto !important;
  max-height: none !important;
}

.editable-transcript-text {
  flex-grow: 1;
  display: block;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  cursor: text;
  line-height: 1.6;
  height: auto !important;
  max-height: none !important;
}

.editable-transcript-input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  min-width: 100px;
  padding: 2px 4px;
  border: 1px solid #4299e1;
  border-radius: 3px;
  background-color: rgba(66, 153, 225, 0.1);
  outline: none;
}

.dark-mode .editable-transcript-input {
  border-color: #60a5fa;
  background-color: rgba(96, 165, 250, 0.15);
  color: #e2e8f0;
}

.editable-transcript-input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
}

.dark-mode .editable-transcript-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.transcript-edit-info {
  padding: 0px 15px;
  margin: 5px 0 15px;
  background: lightgoldenrodyellow;
  border: 1px solid orange;
  color: darkorange;
  border-radius: 10px;
  font-size: 14px;
  font-style: italic;
  position: relative;
  animation: fadeIn 0.3s ease-in;
}

.dark-mode .transcript-edit-info {
  background: rgba(96, 165, 250, 0.15);
  border-color: #60a5fa;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Make sure the continuous transcript has appropriate styling for editing */
.continuous-transcript {
  white-space: pre-wrap;
  line-height: 1.5;
  word-break: break-word;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between items */
  margin: 0; /* Remove any margin */
  flex: 1 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  color: var(--text-color-primary);
  padding: 1rem;
  line-height: 1.6;
  font-size: 15px;
  background-color: var(--bg-color);
  border-radius: 5px;
  padding-top: 45px;
  /* Dynamic height that responds to header collapse - overridden by LiveInsightTool.css */
  
  /* Disable native mobile text selection context menu */
  -webkit-touch-callout: none; /* Disable callout on iOS Safari */
  -webkit-user-select: text; /* Allow text selection but disable context menu */ /* Firefox */ /* IE/Edge */
  user-select: text; /* Standard */
  touch-action: manipulation; /* Disable context menu on touch devices */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
}

.dark-mode .continuous-transcript {
  color: #e2e8f0;
}

.transcript-edit-info-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #4299e1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.transcript-edit-info-close:hover {
  opacity: 1;
}

.dark-mode .transcript-edit-info-close {
  color: #60a5fa;
}

/* Styling for user-edited transcript segments */
.transcript-segment[style*="borderBottom"] {
  transition: all 0.2s ease;
}

.transcript-segment[style*="borderBottom"]:hover {
  background-color: rgba(66, 153, 225, 0.15);
}

.dark-mode .transcript-segment[style*="borderBottom"] {
  border-bottom-color: #60a5fa !important;
}

.dark-mode .transcript-segment[style*="borderBottom"]:hover {
  background-color: rgba(96, 165, 250, 0.25);
}

/* Styles for transcript text and timestamp display */
.timestamp-display {
  position: absolute;
  top: -20px;
  right: -18px;
  margin-top: 2px;
  font-size: 11px;
  color: #718096;
  opacity: 0.7;
  background-color: rgba(247, 250, 252, 0.6);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.dark-mode .timestamp-display {
  color: #cbd5e0;
  background-color: rgba(26, 32, 44, 0.6);
}

.phone-indicator {
  margin-left: 4px;
  font-size: 12px;
}

/* Segment Actions Wrapper and Buttons */
.segment-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  order: 1;
  flex-shrink: 0;
  padding-right: 16px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 5px; /* Adjust as needed for vertical positioning */
  align-self: flex-start; /* Ensure it aligns to the start of the cross axis */
  z-index: 10; /* Ensure it stays on top */
}

.segment-actions-wrapper .segment-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color-secondary);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  opacity: 0;
  transform: scale(0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .segment-actions-wrapper {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  .transcript-segment:hover .segment-actions-wrapper {
    opacity: 1;
  }

  /* Ensure buttons inside the wrapper also become visible on hover */
  .transcript-segment:hover .segment-actions-wrapper .segment-action-button {
    opacity: 1;
    transform: scale(1);
    /* visibility: visible; /* Explicitly set if needed, opacity should suffice */
  }

  .segment-actions-wrapper .segment-action-button:hover {
    opacity: 1 !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-dark) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 66, 133, 244), 0.3) !important;
  }
  
  .transcript-segment:hover .segment-actions-wrapper .ask-scoobs-button::before {
    opacity: 1;
  }
}

@media (hover: none) {
  /* Make the wrapper visible */
  .segment-actions-wrapper {
    opacity: 1;
  }
  /* Ensure buttons are also visible and correctly scaled */
  .segment-actions-wrapper .segment-action-button {
    opacity: 1;
    transform: scale(1);
  }
  /* Ensure the tooltip pseudo-element is visible too */
  .segment-actions-wrapper .ask-scoobs-button::before {
    opacity: 1;
  }
}

.segment-action-button.edit-transcript-button {
  font-size: 14px;
  color: var(--primary-color);
  background: var(--bg-color-secondary);
  margin-right: 0;
}

.segment-action-button.ask-scoobs-button {
  /* Apply gradient border effect with updated sizing */
  position: relative;
  overflow: hidden;
  padding: 6px;
  border: 1px solid transparent;
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  animation: gradientMove 8s linear infinite;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.segment-action-button.ask-scoobs-button::before {
  /* Inset background to create the border */
  content: '';
  position: absolute;
  inset: 1px; /* Border thickness to match new design */
  background: var(--bg-color);
  border-radius: 10px; /* Adjust for rounded corners */
  z-index: 0;
  transition: background-color 0.3s ease;
}

.segment-action-button.ask-scoobs-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 66, 133, 244), 0.3);
}

.segment-action-button.ask-scoobs-button img {
  position: relative;
  z-index: 1;
  width: 20px; /* Increased from 16px to match session button */
  height: 20px; /* Increased from 16px to match session button */
  display: block;
}

.dark-mode .segment-action-button {
  background: var(--bg-color-tertiary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .segment-action-button.edit-transcript-button {
  background: var(--bg-color-tertiary);
  color: var(--primary-color);
}

.dark-mode .segment-action-button:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color-dark) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4) !important;
}

.dark-mode .segment-action-button.ask-scoobs-button {
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  animation: gradientMove 8s linear infinite;
}

.dark-mode .segment-action-button.ask-scoobs-button:hover {
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4);
}

/* Ensure ::before background matches dark mode */
.dark-mode .segment-action-button.ask-scoobs-button::before {
  background: var(--bg-color);
}

.transcript-edit-textarea {
  /* Use !important to override global textarea styles in LiveInsightTool.css */
  flex-grow: 1; /* Allow textarea to grow and fill space */
  flex-basis: 0; /* Important for proper flex sizing */
  min-height: auto !important; /* CHANGED: Remove fixed min-height to prevent density changes */
  padding: 0 !important; /* CHANGED: Remove padding to match transcript-text - override global styles */
  margin: 0 !important; /* CHANGED: Ensure no margin */
  border: none !important; /* CHANGED: Remove border to prevent box model differences */
  border-radius: 0 !important; /* CHANGED: Remove border radius */
  background-color: transparent !important; /* CHANGED: Make background transparent */
  color: inherit !important; /* CHANGED: Use inherited color */
  resize: none !important; /* CHANGED: Disable resize to prevent UI changes */
  line-height: 1.6 !important; /* Match .editable-transcript-text - override global styles */
  font-family: inherit !important;
  font-size: inherit !important;
  box-sizing: content-box !important; /* CHANGED: Match content-box to avoid box model differences */
  order: 2; /* Ensure it comes after the (hidden) actions wrapper */
  outline: none !important; /* CHANGED: Remove focus outline to maintain visual consistency */
  word-wrap: break-word !important; /* CHANGED: Match text wrapping behavior */
  white-space: pre-wrap !important; /* CHANGED: Match whitespace handling */
  overflow: hidden !important; /* CHANGED: Hide scrollbars to maintain consistent appearance */
}

/* Style for text inside textarea when segment is editing */
.transcript-segment.editing .transcript-edit-textarea {
  font-style: italic;
}

.transcript-edit-textarea:focus {
  outline: none !important;
  border: none !important; /* CHANGED: Remove border even on focus */
  box-shadow: none !important; /* CHANGED: Remove box shadow to prevent layout changes */
  background-color: transparent !important; /* CHANGED: Keep background transparent on focus */
}

.dark-mode .transcript-edit-textarea {
    background-color: transparent !important; /* CHANGED: Keep background transparent */
    color: inherit !important; /* CHANGED: Use inherited color */
    border: none !important; /* CHANGED: Remove border */
}

.dark-mode .transcript-edit-textarea:focus {
    border: none !important; /* CHANGED: Remove border even on focus */
    box-shadow: none !important; /* CHANGED: Remove box shadow to prevent layout changes */
    background-color: transparent !important; /* CHANGED: Keep background transparent on focus */
}

/* Enhanced interim transcript styling */
.interim-transcript-segment {
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
  border: 2px solid rgba(66, 153, 225, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
  animation: pulseGlow 2s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out;
  transform: translateY(0);
  opacity: 1;
}

.interim-transcript-segment.finalizing {
  animation: finalizeTransition 0.5s ease-out forwards;
}

@keyframes finalizeTransition {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px) scale(1.02);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
  }
}

.dark-mode .interim-transcript-segment {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(34, 197, 94, 0.15));
  border-color: rgba(96, 165, 250, 0.4);
}

.interim-transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.interim-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4299e1;
  font-weight: 600;
}

.dark-mode .interim-indicator {
  color: #60a5fa;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #48bb78;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}

.interim-timestamp {
  color: var(--text-color-secondary);
  font-size: 0.8rem;
  opacity: 0.8;
}

.dark-mode .interim-timestamp {
  color: var(--text-color-secondary-dark);
}

.interim-transcript-content {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color-primary);
  font-style: italic;
  position: relative;
}

.dark-mode .interim-transcript-content {
  color: var(--text-color-primary-dark);
}

.typing-cursor {
  color: #4299e1;
  font-weight: bold;
  animation: blink 1s infinite;
  margin-left: 2px;
}

.dark-mode .typing-cursor {
  color: #60a5fa;
}

/* Animations */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px rgba(66, 153, 225, 0.3);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 20px rgba(66, 153, 225, 0.5);
    transform: scale(1.01);
  }
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Minimalist interim transcript styling */
.minimalist-interim-transcript {
  color: var(--text-color-secondary);
  opacity: 0.8;
  font-style: italic;
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: fadeInTyping 0.3s ease-in;
}

.dark-mode .minimalist-interim-transcript {
  color: var(--text-color-secondary-dark);
}

@keyframes fadeInTyping {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}

/* Legacy interim text fallback */
.interim-text {
  color: var(--text-color-secondary);
  opacity: 0.7;
  font-style: italic;
}

.dark-mode .interim-text {
    color: var(--text-color-secondary-dark);
}

/* Indicator shown when editing during active recording */
.editing-recording-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--text-color-secondary);
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.08), rgba(66, 153, 225, 0.08));
  border: 1px dashed rgba(72, 187, 120, 0.3);
  border-radius: 8px;
  animation: editRecordingPulse 2s ease-in-out infinite;
}

.dark-mode .editing-recording-indicator {
  color: var(--text-color-secondary-dark);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(96, 165, 250, 0.12));
  border-color: rgba(34, 197, 94, 0.4);
}

.editing-recording-indicator .recording-dot {
  width: 8px;
  height: 8px;
  background-color: #48bb78;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.editing-recording-indicator .queued-count {
  margin-left: 4px;
  font-weight: 500;
  color: #4299e1;
}

.dark-mode .editing-recording-indicator .queued-count {
  color: #60a5fa;
}

@keyframes editRecordingPulse {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.7;
  }
}

.empty-transcript {
  text-align: center;
  color: #718096;
  font-style: italic;
  padding: 2rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dark-mode .empty-transcript {
    color: #a0aec0;
}

.reload-transcripts-button {
  background-color: #4299e1;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.reload-transcripts-button:hover {
  background-color: #2b6cb0;
}

.dark-mode .reload-transcripts-button {
    background-color: #60a5fa;
}

.dark-mode .reload-transcripts-button:hover {
    background-color: #3b82f6;
}

/* Styles for selected text within transcript segments */
.transcript-segment ::selection {
  background-color: rgba(66, 133, 244, 0.4);
  background-color: rgba(var(--primary-rgb, 66, 133, 244), 0.4);
  color: white; /* Better contrast for selected text */
}

/* Enhanced text selection for better mobile experience */
.transcript-segment {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default; /* Allow text selection callout on iOS */
}

/* Improve touch selection targets */
.editable-transcript-text {
  line-height: 1.6; /* Better line spacing for easier selection */
  word-break: break-word; /* Prevent long words from breaking layout */
}

/* Mobile-specific selection improvements */
@media (max-width: 768px) {
  .transcript-segment {
    padding: 12px 16px; /* Slightly more padding for easier touch selection */
  }
  
  .editable-transcript-text {
    font-size: 1rem; /* Slightly larger text on mobile for easier reading and selection */
    line-height: 1.7;
  }
  
  /* Make selection highlights more prominent on mobile */
  .transcript-segment ::selection {
    background-color: rgba(66, 133, 244, 0.5);
    background-color: rgba(var(--primary-rgb, 66, 133, 244), 0.5);
  }
}

/* Dark mode selection styles */
.dark-mode .transcript-segment ::selection {
  background-color: rgba(108, 159, 255, 0.5);
  background-color: rgba(var(--primary-rgb, 108, 159, 255), 0.5);
  color: var(--bg-color);
}

/* Optional: Dark mode adjustments - Browser default should handle contrast */
/* Remove the previous dark mode comment block as it's no longer relevant */

.speaker-management {
  padding: 8px 15px;
  background-color: var(--bg-color-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dark-mode .speaker-management {
    background-color: var(--bg-color-secondary-dark);
    border-bottom-color: var(--border-color-dark);
}

.speaker-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.speaker-management-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color-primary);
}

.dark-mode .speaker-management-header h4 {
    color: var(--text-color-primary-dark);
}

.speaker-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.speaker-controls select {
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color-primary);
  font-size: 0.8rem;
}

.dark-mode .speaker-controls select {
    background-color: var(--input-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

.speaker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.speaker-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background-color: var(--bg-color);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.dark-mode .speaker-item {
    background-color: var(--bg-color-secondary-dark);
    border-color: var(--border-color-dark);
}

.speaker-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.speaker-name {
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-color-primary);
}

.dark-mode .speaker-name {
    color: var(--text-color-primary-dark);
}

.speaker-item form {
  display: inline;
}

.speaker-item form input {
  width: 80px;
  padding: 2px 4px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background-color: var(--bg-color-secondary);
}

.dark-mode .speaker-item form input {
    background-color: var(--input-bg-dark);
    border-color: var(--border-color-dark);
    color: var(--text-color-dark);
}

.phone-transcript {
  position: relative;
}

.phone-speaker {
  font-weight: 600;
  color: #4299e1;
  margin-right: 0.5rem;
}

.dark-mode .phone-speaker {
    color: #60a5fa;
}

.transcript-segment.editing {
  /* REMOVED: border and background changes to prevent density shifts */
  /* Only show italics to indicate edit mode */
}

/* Subtle Selection Ask Scoobs Button - matches segment button style */
.selection-ask-scoobs-button {
  /* Base styling matching segment action buttons */
  background: var(--bg-color-secondary);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-5px) scale(0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation: selectionButtonFadeIn 0.3s ease forwards;
  
  /* Gradient border effect like the segment ask-scoobs-button */
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #4285f4,
    #ea4335,
    #fbbc05,
    #34a853,
    #4285f4
  );
  background-size: 300% 100%;
  animation: selectionButtonFadeIn 0.3s ease forwards, gradientMove 8s linear infinite;
  
  /* Comprehensive mobile context menu prevention and button interaction */
  -webkit-touch-callout: none !important; /* Disable callout on iOS Safari */
  -webkit-user-select: none !important; /* Prevent text selection on button */ /* Firefox */ /* IE/Edge */
  user-select: none !important; /* Standard */
  touch-action: manipulation !important; /* Enable touch interactions, disable context menu */
  -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight */
  -webkit-user-drag: none !important; /* Prevent drag */
  pointer-events: auto !important; /* Ensure button is clickable */
  z-index: 10000 !important; /* Ensure button appears above all native mobile elements */
}

.selection-ask-scoobs-button::before {
  content: '';
  position: absolute;
  inset: 1px; /* Match chat input border thickness */
  background: var(--bg-color);
  border-radius: 10px; /* Adjusted for 2px inset */
  z-index: 0;
}

.selection-ask-scoobs-button img {
  position: relative;
  z-index: 1;
}

.selection-ask-scoobs-button:hover {
  opacity: 1 !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color-dark) !important;
  color: white !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 66, 133, 244), 0.3) !important;
}

@keyframes selectionButtonFadeIn {
  to {
    opacity: 0.8;
    transform: translateY(0) scale(1);
  }
}

/* Dark mode styles */
.dark-mode .selection-ask-scoobs-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background-color: white;
}

.dark-mode .selection-ask-scoobs-button::before {
  background: white;
}

.dark-mode .selection-ask-scoobs-button:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color-dark) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(108, 159, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 108, 159, 255), 0.4) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .selection-ask-scoobs-button {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    /* Ensure button is more prominent on mobile */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    /* Additional mobile-specific protections */
    -webkit-text-size-adjust: none !important;
    -webkit-font-smoothing: antialiased !important;
  }
  
  /* Prevent any mobile browser interference */
  .selection-ask-scoobs-button,
  .selection-ask-scoobs-button * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-text-size-adjust: none !important;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .selection-ask-scoobs-button:hover {
    transform: scale(1) !important;
  }
}

/* AI-corrected segment styling - subtle, modern, non-distracting */
.transcript-segment.ai-corrected {
  position: relative;
  animation: aiCorrectionPulse 1.5s ease-out;
}

.transcript-segment.ai-corrected::before {
  content: '✨';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 14px;
  opacity: 0;
  animation: sparkleIn 1.5s ease-out;
  pointer-events: none;
}

@keyframes aiCorrectionPulse {
  0% {
    background-color: var(--insight-bg-even);
  }
  15% {
    background-color: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
  }
  100% {
    background-color: var(--insight-bg-even);
    box-shadow: none;
  }
}

@keyframes sparkleIn {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
  }
  30% {
    opacity: 1;
    transform: scale(1.2) translateY(0);
  }
  70% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-5px);
  }
}

.dark-mode .transcript-segment.ai-corrected {
  animation: aiCorrectionPulseDark 1.5s ease-out;
}

@keyframes aiCorrectionPulseDark {
  0% {
    background-color: var(--insight-bg-even);
  }
  15% {
    background-color: rgba(167, 139, 250, 0.12);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
  }
  100% {
    background-color: var(--insight-bg-even);
    box-shadow: none;
  }
}

/* Prevent context menu on selected text throughout transcript */
.continuous-transcript *::selection,
.transcript-segment *::selection,
.editable-transcript-text::selection {
  /* Disable native context menu for selected text */
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  user-select: text;
}

/* Comprehensive mobile context menu prevention */
@media (hover: none) and (pointer: coarse) {
  .continuous-transcript,
  .transcript-segment,
  .editable-transcript-text,
  .transcript-text-container {
    /* Enhanced mobile text selection without context menu */
    -webkit-touch-callout: none !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    /* Prevent long press context menu */
    -webkit-user-drag: none !important;
    -webkit-user-modify: read-only !important;
    /* Additional touch behavior controls */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Prevent context menu on any child elements */
  .continuous-transcript *,
  .transcript-segment *,
  .editable-transcript-text *,
  .transcript-text-container * {
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    touch-action: manipulation !important;
  }
}

.transcript-segment ::selection {
  background-color: rgba(66, 133, 244, 0.4);
  background-color: rgba(var(--primary-rgb, 66, 133, 244), 0.4);
  color: white; /* Better contrast for selected text */
} 
.buy-me-coffee-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  padding: 15px;
}

.buy-me-coffee-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
}

.buy-me-coffee-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.buy-me-coffee-img {
  height: 50px;
  width: auto;
  border-radius: 8px;
}

.buy-me-coffee-text {
  margin-top: 10px;
  font-size: 14px;
  color: #374151;
  text-align: center;
  font-weight: 500;
}

/* Dark mode support */
[data-theme="dark"] .buy-me-coffee-text,
.dark-mode .buy-me-coffee-text {
  color: #d1d5db;
}

/* Responsive design */
@media (max-width: 768px) {
  .buy-me-coffee-container {
    margin: 15px 0;
    padding: 10px;
  }
  
  .buy-me-coffee-img {
    height: 45px;
  }
  
  .buy-me-coffee-text {
    font-size: 13px;
  }
}

/* Alternative button styles */
.buy-me-coffee-minimal {
  background: none;
  border: 2px solid #ffdd00;
  color: #ffdd00;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.buy-me-coffee-minimal:hover {
  background: #ffdd00;
  color: #000;
  transform: translateY(-2px);
} 
.footer {
  background: transparent;
  border-top: 1px solid var(--border-color);
  padding: 40px 0 20px;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px;
  gap: 40px;
}

/* footer title */
.footer-section h3 {
  color: #1f2937;
  text-align: left;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-section ul {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 12px;
}

.footer-section ul li a {
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-section ul li a:hover {
  color: var(--primary-color);
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.social-links a {
  color: #4b5563;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.social-links a:hover {
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* Disabled social links - coming soon */
.social-links .social-link-disabled {
  color: #6b7280;
  font-size: 1.2rem;
  cursor: not-allowed;
  opacity: 0.7;
  position: relative;
}

.social-links .social-link-disabled:hover {
  opacity: 0.9;
}

/* Support section - align BuyMeACoffee left */
.footer-section.support-section .buy-me-coffee-container {
  align-items: flex-start;
  padding-left: 0;
  margin-left: 0;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.footer-bottom p {
  color: var(--text-color-primary);
  font-size: 0.9rem;
  margin: 0;
}

/* Dark mode adjustments */
.dark-mode .footer {
  background: var(--bg-color);
  border-color: var(--border-color);
}

.dark-mode .footer-section h3 {
  color: #f3f4f6;
}

.dark-mode .footer-section ul li a {
  color: #d1d5db;
}

.dark-mode .footer-section ul li a:hover {
  color: var(--primary-color);
}

.dark-mode .social-links a {
  color: #d1d5db;
}

.dark-mode .social-links a:hover {
  color: var(--primary-color);
}

.dark-mode .social-links .social-link-disabled {
  color: #9ca3af;
  opacity: 0.6;
}

.dark-mode .social-links .social-link-disabled:hover {
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer {
    padding: 30px 0 15px;
  }
  
  .footer-section {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
} 
/* Main container for the phone recorder component */
:root {
  --connected-color: #48bb78;
  --connected-shadow: rgba(72, 187, 120, 0.5);
  --default-bg: #2d3748;
  --hover-bg: #4a5568;
  --bg-color: #ffffff;
  --bg-color-alt: #f8f9fa;
  --text-color-primary: #333333;
  --text-color-secondary: #718096;
  --border-color: #e2e8f0;
  --button-bg: #4a5568;
  --button-hover: #2d3748;
  --button-text: white;
  --notification-color: #ed8936;
  --notification-shadow: rgba(237, 137, 54, 0.6);
}

/* Dark mode variables */
.dark-mode {
  --bg-color: #1e2430;
  --bg-color-alt: #2a3142;
  --text-color-primary: #e1e5ee;
  --text-color-secondary: #a0a8b7;
  --border-color: #3a4559;
  --button-bg: #4a5568;
  --button-hover: #323c52;
  --button-text: #e1e5ee;
}

/* Base button styles */
button.phone-recorder-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 36px;
  min-width: 80px;
  padding: 0 16px;
  border-radius: 8px;
  background-color: #2d3748;
  background-color: var(--default-bg);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Connection indicator dot */
.connection-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #48bb78;
  background-color: var(--connected-color);
  border: 2px solid white;
  box-shadow: 0 0 8px rgba(72, 187, 120, 0.5);
  box-shadow: 0 0 8px var(--connected-shadow);
  animation: pulse 2s infinite;
}

/* Notification badge for pending connections */
.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  background-color: #ed8936;
  background-color: var(--notification-color);
  color: white;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 0 8px rgba(237, 137, 54, 0.6);
  box-shadow: 0 0 8px var(--notification-shadow);
  z-index: 2;
}

/* Notification glow effect for the button */
.notification-glow {
  animation: glow-pulse 1.5s infinite;
}

@keyframes glow-pulse {
  0% { box-shadow: 0 0 5px 2px rgba(237, 137, 54, 0.6); box-shadow: 0 0 5px 2px var(--notification-shadow); }
  50% { box-shadow: 0 0 15px 5px rgba(237, 137, 54, 0.6); box-shadow: 0 0 15px 5px var(--notification-shadow); }
  100% { box-shadow: 0 0 5px 2px rgba(237, 137, 54, 0.6); box-shadow: 0 0 5px 2px var(--notification-shadow); }
}

/* Notification blink effect for the modal - whole background flash */
.notification-blink {
  animation: blink-background 1.5s infinite;
}

@keyframes blink-background {
  0% { 
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 30px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 30px 10px var(--notification-shadow);
  }
  50% { 
    background: rgba(237, 137, 54, 0.3);
    box-shadow: 0 0 50px 15px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 50px 15px var(--notification-shadow);
  }
  100% { 
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 30px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 30px 10px var(--notification-shadow);
  }
}

/* Enhanced notification effect for modal content */
.notification-blink .qr-code-content {
  border: 2px solid #ed8936;
  border: 2px solid var(--notification-color);
  animation: content-glow 1.5s infinite;
}

@keyframes content-glow {
  0% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 20px 5px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 20px 5px var(--notification-shadow);
    transform: scale(1);
  }
  50% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 35px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 35px 10px var(--notification-shadow);
    transform: scale(1.005);
  }
  100% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 20px 5px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 20px 5px var(--notification-shadow);
    transform: scale(1);
  }
}

/* Hover states */
button.phone-recorder-toggle:hover {
  background-color: #4a5568;
  background-color: var(--hover-bg);
  transform: translateY(-1px);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.5); box-shadow: 0 0 0 0 var(--connected-shadow); }
  70% { box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
}

/* Modal overlay for QR code scanner - now rendered as portal */
.qr-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
}

/* Modal content container */
.qr-code-content {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border-radius: 8px;
  max-width: 600px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow: hidden;
  color: #333333;
  color: var(--text-color-primary);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
}

/* Responsive design for mobile devices */
@media (max-width: 480px) {
  .qr-code-modal {
    background: rgba(0, 0, 0, 0.3); /* Subtle background on small screens for visual separation */
  }
  
  .qr-code-content {
    width: 95vw;
    max-width: 95vw;
    margin: 10px;
    max-height: 95vh;
  }
  
  .qr-modal-header h3 {
    font-size: 1.1rem;
  }
  
  .qr-modal-hint {
    font-size: 0.65rem;
  }
  
  .qr-modal-body {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 360px) {
  .qr-code-modal {
    background: rgba(0, 0, 0, 0.4); /* Slightly more visible on very small screens */
  }
  
  .qr-code-content {
    width: 98vw;
    max-width: 98vw;
    margin: 5px;
  }
  
  .qr-modal-body {
    padding: 0.4rem 0.6rem;
  }
  
  .qr-modal-hint {
    display: none; /* Hide hint on very small screens where modal takes most space */
  }
  
  /* Make QR code responsive on small screens */
  .qr-modal-body canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Modal header with drag handle and close button */
.qr-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border-color);
  background: #ffffff;
  background: var(--bg-color);
  border-radius: 8px 8px 0 0;
  position: relative;
}

.qr-modal-header-content {
  flex: 1 1;
  margin-right: 2rem; /* Give space for the close button */
}

.qr-modal-header h3 {
  margin: 0;
  color: #333333;
  color: var(--text-color-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.qr-modal-hint {
  font-size: 0.75rem;
  color: #718096;
  color: var(--text-color-secondary);
  pointer-events: none;
  opacity: 0.8;
}

.qr-modal-close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #718096;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0; /* Prevent shrinking */
}

.qr-modal-close-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333333;
  color: var(--text-color-primary);
}

.qr-modal-close-button:active {
  transform: scale(0.95);
}

/* Modal body with scrollable content */
.qr-modal-body {
  padding: 0.75rem 1.25rem;
  max-height: calc(90vh - 60px); /* Subtract header height */
  overflow-y: auto;
  text-align: center;
}

/* IP address input label */
.ip-input-container label {
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: #333333;
  color: var(--text-color-primary);
}

/* IP address input section */
.ip-input-container {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ip-input-container input {
  padding: 0.2rem;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: 200px;
  text-align: center;
  font-size: 1rem;
  background-color: #f8f9fa;
  background-color: var(--bg-color-alt);
  color: #333333;
  color: var(--text-color-primary);
}

.ip-help {
  font-size: 0.8rem;
  color: #718096;
  color: var(--text-color-secondary);
  margin-top: 0.2rem;
  max-width: 300px;
  text-align: center;
}

/* QR code display section */
.qr-code-container {
  margin: 0.5rem 0;
  padding: 0.4rem;
  background-color: white;
  display: inline-block;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
}

.qr-code-container canvas {
  width: 180px !important;
  height: 180px !important;
}

/* URL display and copy section */
.qr-url {
  margin: 0.4rem 0;
  width: 100%;
  text-align: center;
}

.qr-url p {
  margin-bottom: 0.1rem;
  font-size: 0.85rem;
  color: #718096;
  color: var(--text-color-secondary);
}

.url-display-container {
  background-color: #f8f9fa;
  background-color: var(--bg-color-alt);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
}

.url-display {
  background-color: #f8f9fa;
  background-color: var(--bg-color-alt);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.4rem;
  font-size: 0.65rem;
  text-align: left;
  word-break: break-all;
  color: #333333;
  color: var(--text-color-primary);
  flex: 1 1;
}

/* Copy URL button */
.copy-url-button {
  padding: 4px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #718096;
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.copy-url-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333333;
  color: var(--text-color-primary);
}

.copy-url-button:active {
  transform: translateY(1px);
}

/* QR code scanning instructions */
.qr-instructions {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #333333;
  color: var(--text-color-primary);
}

/* Development URL display */
.dev-url {
  margin-top: 0rem;
  font-size: 0.55rem;
  word-break: break-all;
  padding: 0.25rem;
  color: #718096;
  color: var(--text-color-secondary);
  border-radius: 4px;
  border: 1px dashed #e2e8f0;
  border: 1px dashed var(--border-color);
}

/* Verification code section */
.verification-code {
  margin: 0;
}

.verification-code p {
  margin: 0;
  color: #333333;
  color: var(--text-color-primary);
}

.verification-code .code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.verification-code .code {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 5px;
  color: #4299e1;
  background-color: rgba(66, 153, 225, 0.1);
  padding: 0.4rem;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-color);
  margin: 0.4rem 0;
}

.verification-code .code.refreshing {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.refresh-code-button {
  background: transparent;
  border: none;
  color: #718096;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.refresh-code-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333333;
  color: var(--text-color-primary);
  transform: rotate(30deg);
}

.refresh-code-button:active {
  transform: rotate(360deg);
}

.refresh-code-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.verification-hint {
  font-size: 0.75rem;
  color: #718096;
  color: var(--text-color-secondary);
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: rgba(72, 187, 120, 0.1);
  border-radius: 4px;
  border-left: 3px solid #48bb78;
}

/* Connection status indicator */
.connection-status {
  display: flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.4rem;
  background-color: rgba(66, 153, 225, 0.1);
  border-radius: 4px;
}

.connection-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4299e1;
  margin-right: 0.5rem;
}

.connection-status-text {
  font-size: 0.9rem;
  color: #4299e1;
}

/* Workflow steps section */
.workflow-steps {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  text-align: left;
  font-size: 0.7rem;
  color: #333333;
  color: var(--text-color-primary);
}

.workflow-steps h4 {
  color: #333333;
  color: var(--text-color-primary);
  margin: 0.3rem 0;
}

.workflow-steps ol {
  margin: 0;
  padding-left: 1.5rem;
}

.workflow-steps li {
  margin-bottom: 0.4rem;
  line-height: 1;
  color: #333333;
  color: var(--text-color-primary);
}

.workflow-note {
  margin-top: 0.4rem;
  font-style: italic;
  font-size: 0.8rem;
  color: #718096;
  color: var(--text-color-secondary);
}

/* Pending connections section */
.pending-connections {
  margin-top: 0.75rem;
  text-align: left;
  max-height: 150px;
  overflow-y: auto;
}

.connection-request {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  background-color: rgba(66, 153, 225, 0.05);
  border: 1px solid rgba(66, 153, 225, 0.1);
}

.device-info {
  display: flex;
  flex-direction: column;
}

.device-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: #333333;
  color: var(--text-color-primary);
}

.request-time {
  font-size: 0.7rem;
  color: #718096;
  color: var(--text-color-secondary);
}

/* Connection action buttons */
.connection-actions {
  display: flex;
  gap: 0.5rem;
}

.approve-button, .deny-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.approve-button {
  background-color: #48bb78;
  color: white;
}

.deny-button {
  background-color: #f56565;
  color: white;
}

/* Connected devices section */
.connected-devices {
  margin-top: 0.75rem;
  text-align: left;
}

.devices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.devices-header h4 {
  margin: 0;
  color: #333333;
  color: var(--text-color-primary);
}

.toggle-inactive-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  background-color: #4a5568;
  background-color: var(--button-bg);
  color: white;
  color: var(--button-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toggle-inactive-button:hover {
  background-color: #2d3748;
  background-color: var(--button-hover);
}

.connected-device {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.connected-device.active {
  background-color: rgba(72, 187, 120, 0.05);
  border: 1px solid rgba(72, 187, 120, 0.2);
  border-left: 4px solid #48bb78;
}

.connected-device.offline {
  background-color: rgba(237, 137, 54, 0.05);
  border: 1px solid rgba(237, 137, 54, 0.2);
  border-left: 4px solid #ed8936;
  opacity: 0.8;
}

.connected-device.disconnected {
  background-color: rgba(229, 62, 62, 0.05);
  border: 1px solid rgba(229, 62, 62, 0.2);
  border-left: 4px solid #e53e3e;
  opacity: 0.7;
}

.device-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}

.device-name-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.device-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.device-status-indicator.active {
  background-color: #48bb78;
  box-shadow: 0 0 4px rgba(72, 187, 120, 0.6);
  animation: pulse-status 2s infinite;
}

.device-status-indicator.offline {
  background-color: #ed8936;
  box-shadow: 0 0 4px rgba(237, 137, 54, 0.6);
}

.device-status-indicator.disconnected {
  background-color: #e53e3e;
  box-shadow: 0 0 4px rgba(229, 62, 62, 0.6);
}

@keyframes pulse-status {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.device-name {
  font-weight: 500;
  color: #333333;
  color: var(--text-color-primary);
}

.device-status-text {
  font-size: 0.8rem;
  margin-top: 0.1rem;
}

.status-active {
  color: #48bb78;
  font-weight: 500;
}

.status-offline {
  color: #ed8936;
  font-weight: 500;
}

.status-disconnected {
  color: #e53e3e;
  font-weight: 500;
}

.device-actions {
  display: flex;
  gap: 0.5rem;
}

.inactive-status {
  color: #718096;
  color: var(--text-color-secondary);
  font-style: italic;
}

/* Disconnect button */
.disconnect-button {
  background-color: transparent;
  color: #f56565;
  border: 1px solid #f56565;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disconnect-button:hover {
  background-color: rgba(245, 101, 101, 0.1);
}

/* Reconnect button */
.reconnect-button {
  background-color: transparent;
  color: #ed8936;
  border: 1px solid #ed8936;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reconnect-button:hover {
  background-color: rgba(237, 137, 54, 0.1);
}

/* Subscription status indicator */
.subscription-status {
  margin-top: 0.4rem;
  padding: 0.2rem;
  border-radius: 4px;
  font-size: 0.7rem;
  text-align: center;
}

.subscription-status.active {
  background-color: rgba(72, 187, 120, 0.1);
  color: #48bb78;
}

.subscription-status.inactive {
  background-color: rgba(245, 101, 101, 0.1);
  color: #f56565;
}

/* Phone transcript section */
.phone-transcript {
  position: relative;
  color: #333333;
  color: var(--text-color-primary);
}

.phone-speaker {
  font-weight: 600;
  color: #4299e1;
  margin-right: 0.5rem;
}

/* Recording indicator */
.phone-recording-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #48bb78;
  animation: pulse 2s infinite;
}

/* Test controls section */
.test-controls {
  margin: 0.6rem 0;
  padding: 0.4rem;
  background-color: rgba(255, 165, 0, 0.1);
  border-radius: 4px;
  border: 1px dashed orange;
}

.test-button {
  background-color: orange;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

.test-button:hover {
  background-color: darkorange;
}

.test-hint {
  font-size: 0.7rem !important;
  margin: 0;
  color: #718096;
  color: var(--text-color-secondary);
}

/* Reconnection note */
.reconnection-note {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: #718096;
  color: var(--text-color-secondary);
  border-radius: 4px;
  border: 1px dashed #e2e8f0;
  border: 1px dashed var(--border-color);
  background-color: #f8f9fa;
  background-color: var(--bg-color-alt);
}

/* Styles for the QR code image overlay */
.qr-code-image-container {
  position: relative;
  display: inline-block; /* Important for positioning the overlay */
  padding: 0; /* Remove default padding */
  line-height: 0; /* Remove extra space below canvas */
}

.qr-code-image-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%; /* Adjust size as needed */
  height: 30%; /* Adjust size as needed */
  background: white; /* Background to make icon stand out */
  padding: 5px; /* Small padding around icon */
  border-radius: 50%; /* Make it round */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code-image-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Recording coordination badges */
.primary-recorder-badge {
  margin-left: 0.3rem;
  padding: 0.1rem 0.3rem;
  background-color: #4299e1;
  color: white;
  font-size: 0.6rem;
  border-radius: 10px;
  font-weight: 600;
}

.recording-badge {
  margin-left: 0.3rem;
  padding: 0.1rem 0.3rem;
  background-color: #48bb78;
  color: white;
  font-size: 0.6rem;
  border-radius: 10px;
  font-weight: 600;
  animation: pulse 2s infinite;
}

.reconnection-badge {
  margin-left: 0.3rem;
  padding: 0.1rem 0.3rem;
  background-color: #ed8936;
  color: white;
  font-size: 0.6rem;
  border-radius: 10px;
  font-weight: 600;
}

/* Device management styling */
.devices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.devices-header-actions {
  display: flex;
  gap: 0.5rem;
}

.clear-inactive-button {
  background-color: #f56565;
  color: white;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.clear-inactive-button:hover {
  background-color: #e53e3e;
}

.remove-button {
  background-color: #e53e3e;
  color: white;
  border: none;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 0.3rem;
}

.remove-button:hover {
  background-color: #c53030;
}

.reconnection-status {
  font-size: 0.7rem;
  color: #ed8936;
  font-style: italic;
  padding: 0.2rem 0.5rem;
}

.device-management-note {
  background-color: rgba(79, 172, 254, 0.1);
  border: 1px solid rgba(79, 172, 254, 0.3);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
}

.device-management-note h5 {
  margin: 0 0 0.5rem 0;
  color: #4facfe;
  font-size: 0.9rem;
}

.device-management-note ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.device-management-note li {
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.device-management-note p {
  margin: 0.5rem 0 0 0;
  color: #666;
}

/* Dark mode styles for QR modal */
.qr-code-modal.dark-mode {
  background: rgba(0, 0, 0, 0.8);
}

.qr-code-modal.dark-mode .qr-code-content {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .qr-modal-header {
  border-bottom-color: #4a5568;
}

.qr-code-modal.dark-mode .qr-modal-header h3 {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .qr-modal-hint {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .qr-modal-close-button {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .qr-modal-close-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .ip-input-container label {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .ip-input-container input {
  background-color: #4a5568;
  border-color: #718096;
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .url-display {
  background-color: #4a5568;
  border-color: #718096;
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .copy-url-button {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .copy-url-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .verification-code p {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .verification-code .code {
  background-color: rgba(66, 153, 225, 0.2);
  border-color: #4299e1;
  color: #63b3ed;
}

.qr-code-modal.dark-mode .refresh-code-button {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .refresh-code-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .workflow-steps h4,
.qr-code-modal.dark-mode .workflow-steps li {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .workflow-note {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .connection-request {
  background-color: rgba(66, 153, 225, 0.1);
  border-color: rgba(66, 153, 225, 0.2);
}

.qr-code-modal.dark-mode .device-name {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .request-time,
.qr-code-modal.dark-mode .entered-code {
  color: #a0aec0;
}

.qr-code-modal.dark-mode .device-management-note {
  background-color: rgba(66, 153, 225, 0.05);
  border-color: rgba(66, 153, 225, 0.1);
}

.qr-code-modal.dark-mode .device-management-note h5 {
  color: #e2e8f0;
}

.qr-code-modal.dark-mode .device-management-note li,
.qr-code-modal.dark-mode .device-management-note p {
  color: #cbd5e0;
}

.qr-code-modal.dark-mode .verification-hint {
  background-color: rgba(72, 187, 120, 0.15);
  color: #a0aec0;
  border-left: 3px solid #48bb78;
}

.qr-code-modal.dark-mode .device-management-note {
  background-color: rgba(72, 187, 120, 0.15);
  color: #a0aec0;
  border-color: rgba(72, 187, 120, 0.3);
}

/* Dark mode notification effects */
.qr-code-modal.dark-mode.notification-blink {
  animation: dark-blink-background 1.5s infinite;
}

.qr-code-modal.dark-mode.notification-blink .qr-code-content {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border-color: #ed8936;
  border-color: var(--notification-color);
  animation: dark-content-glow 1.5s infinite;
}

@keyframes dark-blink-background {
  0% { 
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 30px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 30px 10px var(--notification-shadow);
  }
  50% { 
    background: rgba(237, 137, 54, 0.4);
    box-shadow: 0 0 50px 15px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 50px 15px var(--notification-shadow);
  }
  100% { 
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 30px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 30px 10px var(--notification-shadow);
  }
}

@keyframes dark-content-glow {
  0% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 20px 5px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 20px 5px var(--notification-shadow);
    transform: scale(1);
  }
  50% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 35px 10px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 35px 10px var(--notification-shadow);
    transform: scale(1.005);
  }
  100% { 
    background-color: #ffffff; 
    background-color: var(--bg-color);
    box-shadow: 0 0 20px 5px rgba(237, 137, 54, 0.6);
    box-shadow: 0 0 20px 5px var(--notification-shadow);
    transform: scale(1);
  }
}


/* Searchable Language Selector Styles */

/* ===========================
   BASE STYLES (Light Mode Default)
   =========================== */

.searchable-language-selector {
  position: relative;
  width: 100%;
}

/* Button styles */
.searchable-language-selector .language-selector-button {
  width: 100%;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.searchable-language-selector .language-selector-button:hover:not(:disabled) {
  border-color: #4a90e2;
  background-color: #f5f5f5;
}

.searchable-language-selector .language-selector-button:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.searchable-language-selector .language-selector-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f9f9f9;
}

.language-selector-button .selected-language {
  flex: 1 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Windows emoji font first */
  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

.language-selector-button .dropdown-arrow {
  font-size: 10px;
  color: #666;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* Portal-rendered dropdown */
.searchable-language-dropdown-portal {
  z-index: 999999;
}

.searchable-language-dropdown {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 400px;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search input container */
.searchable-language-dropdown .search-input-container {
  padding: 12px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #f9f9f9;
}

.searchable-language-dropdown .language-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: #ffffff;
  color: #333;
  transition: all 0.2s ease;
}

.searchable-language-dropdown .language-search-input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.searchable-language-dropdown .language-search-input::placeholder {
  color: #999;
}

/* Language list */
.searchable-language-dropdown .language-list {
  flex: 1 1;
  overflow-y: auto;
  max-height: 300px;
}

.searchable-language-dropdown .language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
}

.searchable-language-dropdown .language-option:last-child {
  border-bottom: none;
}

.searchable-language-dropdown .language-option:hover,
.searchable-language-dropdown .language-option.highlighted {
  background-color: #f0f7ff;
  color: #1a1a1a;
}

.searchable-language-dropdown .language-option.selected {
  background-color: #e3f2fd;
  font-weight: 600;
  color: #0d47a1;
}

.searchable-language-dropdown .language-option.selected.highlighted {
  background-color: #bbdefb;
  color: #0d47a1;
}

.language-option .language-display {
  flex: 1 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Windows emoji font first for flag emoji, then system fonts for text */
  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.language-option .checkmark {
  color: #4a90e2;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
  margin-left: auto;
}

.searchable-language-dropdown .no-results {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* Dropdown footer */
.searchable-language-dropdown .dropdown-footer {
  padding: 8px 12px;
  border-top: 1px solid #e5e5e5;
  background-color: #f9f9f9;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* Custom scrollbar for language list */
.language-list::-webkit-scrollbar {
  width: 8px;
}

.language-list::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.language-list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.language-list::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

/* ===========================
   DARK MODE OVERRIDES
   Must come AFTER light mode styles to override
   =========================== */

/* Dark mode - Button */
body.dark-mode .searchable-language-selector .language-selector-button {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .searchable-language-selector .language-selector-button:hover:not(:disabled) {
  border-color: #5ca3f5 !important;
  background-color: #333 !important;
}

body.dark-mode .searchable-language-selector .language-selector-button:focus {
  border-color: #5ca3f5 !important;
  box-shadow: 0 0 0 3px rgba(92, 163, 245, 0.2) !important;
}

body.dark-mode .searchable-language-selector .language-selector-button:disabled {
  background-color: #222 !important;
}

body.dark-mode .language-selector-button .dropdown-arrow {
  color: #999 !important;
}

/* Dark mode - Dropdown */
body.dark-mode .searchable-language-dropdown {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .searchable-language-dropdown .search-input-container {
  background-color: #2a2a2a !important;
  border-bottom-color: #444 !important;
}

body.dark-mode .searchable-language-dropdown .language-search-input {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .searchable-language-dropdown .language-search-input:focus {
  border-color: #5ca3f5 !important;
  box-shadow: 0 0 0 3px rgba(92, 163, 245, 0.2) !important;
}

body.dark-mode .searchable-language-dropdown .language-search-input::placeholder {
  color: #999 !important;
  opacity: 1;
}

/* Dark mode - Language options */
body.dark-mode .searchable-language-dropdown .language-option {
  border-bottom-color: #333 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .searchable-language-dropdown .language-option:hover,
body.dark-mode .searchable-language-dropdown .language-option.highlighted {
  background-color: #2a3a4a !important;
  color: #ffffff !important;
}

body.dark-mode .searchable-language-dropdown .language-option.selected {
  background-color: #1e3a5f !important;
  color: #90caf9 !important;
  font-weight: 600;
}

body.dark-mode .searchable-language-dropdown .language-option.selected.highlighted {
  background-color: #2a4a7a !important;
  color: #90caf9 !important;
}

body.dark-mode .language-option .checkmark {
  color: #5ca3f5 !important;
}

body.dark-mode .searchable-language-dropdown .no-results {
  color: #888 !important;
}

body.dark-mode .searchable-language-dropdown .dropdown-footer {
  background-color: #2a2a2a !important;
  border-top-color: #444 !important;
  color: #888 !important;
}

/* Dark mode - Scrollbar */
body.dark-mode .language-list::-webkit-scrollbar-track {
  background-color: #2a2a2a !important;
}

body.dark-mode .language-list::-webkit-scrollbar-thumb {
  background-color: #555 !important;
}

body.dark-mode .language-list::-webkit-scrollbar-thumb:hover {
  background-color: #666 !important;
}

/* ===========================
   RESPONSIVE & ACCESSIBILITY
   =========================== */

/* Responsive adjustments */
@media (max-width: 768px) {
  .searchable-language-dropdown {
    max-height: 350px;
  }
  
  .language-list {
    max-height: 250px;
  }
  
  .language-label {
    font-size: 13px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .searchable-language-selector .language-selector-button {
    border-width: 2px;
  }
  
  .language-option.selected {
    border: 2px solid #4a90e2;
  }
  
  body.dark-mode .language-option.selected {
    border: 2px solid #5ca3f5;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .language-selector-button,
  .language-option,
  .dropdown-arrow {
    transition: none;
  }
  
  .searchable-language-dropdown {
    animation: none;
  }
}

/* ReconnectionBanner Styles */

.reconnection-banner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
  color: white;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.reconnection-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.reconnection-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reconnection-icon svg {
  display: block;
}

.spinner {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner-circle {
  stroke: white;
  stroke-dasharray: 50;
  stroke-dashoffset: 25;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 50;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -50;
  }
}

.reconnection-message {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
}

.reconnecting-text {
  font-weight: 600;
}

.connection-lost-text {
  font-weight: 600;
}

.last-update-text {
  opacity: 0.9;
  font-size: 13px;
}

.failure-count-text {
  opacity: 0.85;
  font-size: 12px;
  font-style: italic;
}

.reconnection-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  color: #ff6b6b;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.reconnection-button:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reconnection-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.reconnection-button svg {
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .reconnection-banner {
    padding: 10px 12px;
  }

  .reconnection-banner-content {
    gap: 8px;
  }

  .reconnection-message {
    font-size: 13px;
    gap: 6px;
  }

  .last-update-text {
    font-size: 12px;
  }

  .failure-count-text {
    font-size: 11px;
  }

  .reconnection-button {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .reconnection-banner {
    animation: none;
  }

  .spinner {
    animation: none;
  }

  .spinner-circle {
    animation: none;
  }

  .reconnection-button:hover {
    transform: none;
  }
}









/* Microphone Selector Styles - Compact floating panel design */

.microphone-selector {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}

.mic-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.5);
  background: var(--floating-panel-select-bg, rgba(255, 255, 255, 0.5));
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--floating-panel-select-border, rgba(0, 0, 0, 0.1));
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative; /* Anchor for the invisible select overlay */
}

.mic-selector-wrapper:hover:not(.disabled) {
  border-color: #4a90e2;
  border-color: var(--primary-color, #4a90e2);
  background: rgba(255, 255, 255, 0.7);
}

.mic-selector-wrapper.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mic-icon {
  color: #4a90e2;
  color: var(--primary-color, #4a90e2);
  flex-shrink: 0;
  font-size: 14px;
  pointer-events: none; /* Let clicks pass through to the select overlay */
}

.mic-selector-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* Allow text truncation */
  pointer-events: none; /* Let clicks pass through to the select overlay */
}

.mic-selector-label {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  color: var(--text-color-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Visible display of the selected microphone name */
.mic-selector-value {
  color: #333;
  color: var(--text-color-primary, #333);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Invisible select that covers the full wrapper for click handling */
.mic-selector-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.mic-selector-dropdown:disabled {
  cursor: not-allowed;
}

.mic-selector-dropdown option {
  padding: 8px 12px;
  background: #fff;
  color: #333;
}

.mic-selector-dropdown:focus {
  outline: none;
}

.mic-selector-arrow {
  color: #666;
  color: var(--text-color-secondary, #666);
  flex-shrink: 0;
  font-size: 12px;
  transition: transform 0.2s ease;
  pointer-events: none; /* Let clicks pass through to the select overlay */
}

.mic-selector-wrapper:hover .mic-selector-arrow {
  color: #4a90e2;
  color: var(--primary-color, #4a90e2);
}

/* ========== Dark mode support ========== */
.dark-mode .mic-selector-wrapper {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .mic-selector-wrapper:hover:not(.disabled) {
  border-color: rgba(108, 159, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.dark-mode .mic-selector-label {
  color: #a0a8b7;
  color: var(--text-color-secondary, #a0a8b7);
}

.dark-mode .mic-selector-value {
  color: #e1e5ee;
  color: var(--text-color-primary, #e1e5ee);
}

.dark-mode .mic-selector-dropdown option {
  background: #2a3142;
  color: #e1e5ee;
  padding: 8px 12px;
}

.dark-mode .mic-selector-dropdown option:checked {
  background: #3a4559;
  color: #fff;
}

.dark-mode .mic-icon {
  color: #6c9fff;
  color: var(--primary-color, #6c9fff);
}

.dark-mode .mic-selector-arrow {
  color: #a0a8b7;
  color: var(--text-color-secondary, #a0a8b7);
}

.dark-mode .mic-selector-wrapper:hover .mic-selector-arrow {
  color: #6c9fff;
  color: var(--primary-color, #6c9fff);
}

.subscription-prompt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.subscription-prompt-modal {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: visible; /* Allow badge to extend horizontally */
  position: relative;
  animation: slideIn 0.4s ease-out;
}

.subscription-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px 32px 0 32px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 0;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.header-content h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  align-self: flex-start;
}

.header-content p {
  font-size: 1.1rem;
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  margin: 0;
  line-height: 1.5;
  align-self: flex-start;
}

.close-button {
  background: none;
  border: none;
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.close-button:hover {
  background-color: #f3f4f6;
  background-color: var(--bg-color-hover, #f3f4f6);
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
}

.subscription-prompt-body {
  padding: 32px 32px 24px 32px;
  overflow: visible; /* Ensure badge can extend outside container */
}

.plans-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  max-width: 100%;
  align-items: stretch;
  margin-top: 24px;
  position: relative;
}

.subsPrompt-plan-card {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border: 2px solid #e5e7eb;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

.subsPrompt-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
  border-color: var(--primary-color, #667eea);
}

.subsPrompt-plan-card.popular {
  border-color: #f59e0b;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.plan-card.current {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.popular-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  white-space: nowrap;
  z-index: 10;
}

.subsPrompt-plan-header {
  text-align: center;
  margin-bottom: 20px;
}

.plan-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

.plan-icon.free {
  color: #10b981;
}

.plan-icon.pro {
  color: #667eea;
}

.plan-icon.plus {
  color: #f59e0b;
}

.subsPrompt-plan-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
  margin: 0 0 8px 0;
}

.plan-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
}

.plan-price .currency {
  font-size: 1.2rem;
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  font-weight: 500;
}

.plan-price .amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
}

.plan-price .period {
  font-size: 1rem;
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  font-weight: 500;
}

.plan-features {
  flex-grow: 1;
  margin-bottom: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
}

.feature-check {
  color: #10b981;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.plan-button {
  width: 100%;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}

.plan-button.upgrade {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.plan-button.upgrade:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.plan-button.current {
  background: #10b981;
  color: white;
  cursor: default;
}

.plan-button.downgrade {
  background: #f59e0b;
  color: white;
  border: 2px solid #f59e0b;
}

.plan-button.downgrade:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.plan-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* .spinner animation defined in main.css */

.subscription-prompt-footer {
  padding: 24px 32px 32px 32px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--border-color, #e5e7eb);
  text-align: center;
}

.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.skip-button {
  background: none;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color, #e5e7eb);
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skip-button:hover {
  background-color: #f3f4f6;
  background-color: var(--bg-color-hover, #f3f4f6);
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
  border-color: #6b7280;
  border-color: var(--text-color-secondary, #6b7280);
}

.footer-note {
  font-size: 0.875rem;
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  margin: 0;
}

/* Dark mode support */
.dark-mode .subscription-prompt-modal {
  background: var(--bg-color);
  color: var(--text-color-primary);
}

.dark-mode .subsPrompt-plan-card {
  background: var(--bg-color);
  border-color: var(--border-color);
}

.dark-mode .subsPrompt-plan-card.current {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

/* Animations - @keyframes fadeIn defined in main.css */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* @keyframes spin defined in main.css */

/* Loading and Error States */
.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.loading-container .spinner {
  font-size: 2rem;
  color: #667eea;
  color: var(--primary-color, #667eea);
  margin-bottom: 16px;
  animation: spin 1s linear infinite;
}

.loading-container p {
  color: #6b7280;
  color: var(--text-color-secondary, #6b7280);
  font-size: 1.1rem;
  margin: 0;
}

.error-container p {
  color: #1f2937;
  color: var(--text-color-primary, #1f2937);
  font-size: 1.1rem;
  margin: 0 0 16px 0;
}

.error-container button {
  background: #667eea;
  background: var(--primary-color, #667eea);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.error-container button:hover {
  background: #5a67d8;
  background: var(--primary-color-dark, #5a67d8);
  transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 1024px) {
  .subscription-prompt-modal {
    max-width: 95vw;
  }
}

@media (max-width: 900px) {
  .plans-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .subscription-prompt-modal {
    margin: 10px;
    max-height: 95vh;
  }
  
  .subscription-prompt-header {
    padding: 24px 24px 0 24px;
  }
  
  .header-content h2 {
    font-size: 1.5rem;
  }
  
  .subscription-prompt-body {
    padding: 24px;
  }
  
  .subsPrompt-plan-card {
    padding: 20px;
    min-height: auto;
  }
  
  .subscription-prompt-footer {
    padding: 20px 24px 24px 24px;
  }
}

@media (max-width: 480px) {
  .subscription-prompt-overlay {
    padding: 10px;
  }
  
  .header-content h2 {
    font-size: 1.25rem;
  }
  
  .header-content p {
    font-size: 1rem;
  }
  
  .plan-price .amount {
    font-size: 2rem;
  }
} 
.external-audio-helper {
  position: fixed;
  bottom: 140px;
  right: 20px;
  width: 320px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: all 0.3s ease;
}

.external-audio-helper.dark {
  background: rgba(40, 44, 52, 0.95);
  border: 1px solid #4a5568;
  color: #e2e8f0;
}

.external-audio-helper.minimized {
  width: 200px;
  height: auto;
}

/* Header */
.helper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px 12px 0 0;
}

.external-audio-helper.dark .helper-header {
  border-bottom: 1px solid #4a5568;
  background: rgba(45, 50, 60, 0.8);
}

.helper-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.helper-controls {
  display: flex;
  gap: 8px;
}

.minimize-button,
.close-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.minimize-button:hover,
.close-button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.external-audio-helper.dark .minimize-button:hover,
.external-audio-helper.dark .close-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Minimized State */
.minimized-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.minimized-header:hover {
  background: rgba(0, 0, 0, 0.05);
}

.external-audio-helper.dark .minimized-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Content */
.helper-content {
  padding: 12px;
  max-height: 350px;
  overflow-y: auto;
}

/* Audio Level Section */
.audio-level-section {
  margin-bottom: 12px;
}

.audio-level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
}

.level-category {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.level-category.very_low,
.level-category.low {
  background: #fef2f2;
  color: #dc2626;
}

.level-category.moderate {
  background: #f0fdf4;
  color: #16a34a;
}

.level-category.high,
.level-category.very_high {
  background: #fefce8;
  color: #ca8a04;
}

.external-audio-helper.dark .level-category.very_low,
.external-audio-helper.dark .level-category.low {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

.external-audio-helper.dark .level-category.moderate {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.external-audio-helper.dark .level-category.high,
.external-audio-helper.dark .level-category.very_high {
  background: rgba(202, 138, 4, 0.2);
  color: #fcd34d;
}

/* Audio Bars */
.audio-bars {
  display: flex;
  gap: 2px;
  height: 20px;
  align-items: end;
}

.audio-bar {
  flex: 1 1;
  background: #e5e7eb;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.audio-bar.filled.low {
  background: #ef4444;
}

.audio-bar.filled.medium {
  background: #22c55e;
}

.audio-bar.filled.high {
  background: #f59e0b;
}

.external-audio-helper.dark .audio-bar {
  background: #374151;
}

/* Status Dashboard */
.status-dashboard {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 11px;
}

.external-audio-helper.dark .status-dashboard {
  background: #2d3748;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-label {
  color: #64748b;
  font-weight: 500;
}

.status-value {
  font-weight: 600;
}

.status-value.enabled {
  color: #16a34a;
}

.status-value.disabled {
  color: #64748b;
}

/* Gain Controls */
.gain-controls {
  margin-bottom: 10px;
}

.gain-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
}

.auto-gain-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
}

.auto-gain-toggle input {
  margin: 0;
}

.gain-slider-container {
  position: relative;
}

.gain-slider {
  width: 100%;
  height: 6px;
  background: #e5e7eb63;
  border-radius: 3px;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.gain-slider:hover {
  opacity: 1;
}

.gain-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gain-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: #64748b;
}

/* Advice Sections */
.advice-section {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 11px;
}

.advice-section.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.advice-section.warning {
  background: #fefce8;
  border: 1px solid #fde047;
}

.advice-section.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.external-audio-helper.dark .advice-section.info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.external-audio-helper.dark .advice-section.warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.external-audio-helper.dark .advice-section.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.advice-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.advice-text {
  line-height: 1.4;
  color: #000000;
}

/* Tips Section */
.tips-section {
  margin-bottom: 10px;
}

.tips-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.dismiss-tips {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: 2px;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.tips-list li {
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}

.tips-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: bold;
}

/* Quick Status */
.quick-status {
  font-size: 12px;
}

.status-optimal {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #16a34a;
  font-weight: 500;
}

.status-adjusting {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
  font-weight: 500;
}

/* Status Icons */
.status-icon {
  width: 16px;
  height: 16px;
}

.status-icon.optimal {
  color: #16a34a;
}

.status-icon.low {
  color: #ef4444;
}

.status-icon.high {
  color: #f59e0b;
}

.status-icon.adjusting {
  color: #64748b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .external-audio-helper {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
  }

  .external-audio-helper.minimized {
    width: auto;
    right: 20px;
    left: auto;
  }

  .status-dashboard {
    flex-direction: column;
    gap: 8px;
  }

  .status-item {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.external-audio-helper {
  animation: slideIn 0.3s ease-out;
}

/* Scrollbar styling */
.helper-content::-webkit-scrollbar {
  width: 4px;
}

.helper-content::-webkit-scrollbar-track {
  background: transparent;
}

.helper-content::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 2px;
}

.external-audio-helper.dark .helper-content::-webkit-scrollbar-thumb {
  background: #4a5568;
}

/* Embedded styles for floating panel integration */
.external-audio-helper-embedded {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Prevent width expansion of floating panel */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.external-audio-helper-embedded.dark {
  color: #e2e8f0;
}

.external-audio-helper-embedded .audio-level-section {
  margin-bottom: 8px;
}

.external-audio-helper-embedded .audio-level-header {
  font-size: 11px;
  margin-bottom: 6px;
}

.external-audio-helper-embedded .level-category {
  padding: 1px 6px;
  font-size: 10px;
}

.external-audio-helper-embedded .audio-bars {
  height: 16px;
}

.external-audio-helper-embedded .status-dashboard {
  margin-bottom: 8px;
  padding: 6px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.external-audio-helper-embedded.dark .status-dashboard {
  background: rgba(255, 255, 255, 0.03);
}

.external-audio-helper-embedded .status-item {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.external-audio-helper-embedded .status-label {
  font-size: 10px;
}

.external-audio-helper-embedded .status-value {
  font-size: 12px;
  font-weight: 600;
}

.external-audio-helper-embedded .gain-controls {
  margin-bottom: 8px;
}

.external-audio-helper-embedded .gain-control-header {
  font-size: 11px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.external-audio-helper-embedded .auto-gain-toggle {
  font-size: 10px;
}

.external-audio-helper-embedded .gain-slider-container {
  margin-bottom: 4px;
}

.external-audio-helper-embedded .gain-slider {
  width: 100%;
  height: 4px;
  margin-bottom: 4px;
  background: #2c3e50;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
}

.external-audio-helper-embedded .gain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
}

.external-audio-helper-embedded .gain-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
}

.external-audio-helper-embedded .advice-section {
  margin-bottom: 8px;
  padding: 6px 8px;
  font-size: 11px;
}

.external-audio-helper-embedded .advice-icon {
  font-size: 12px;
}

.external-audio-helper-embedded .quick-status {
  font-size: 11px;
  text-align: center;
}

.external-audio-helper-embedded .status-optimal,
.external-audio-helper-embedded .status-adjusting {
  padding: 4px 8px;
  border-radius: 4px;
}

/* Responsive adjustments for embedded mode */
@media (max-width: 768px) {
  .external-audio-helper-embedded .status-dashboard {
    flex-direction: column;
    gap: 6px;
  }
  
  .external-audio-helper-embedded .status-item {
    flex-direction: row;
    justify-content: space-between;
  }
} 
.feature-limit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.feature-limit-modal {
  background: #ffffff;
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  position: relative;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support */
[data-theme="dark"] .feature-limit-modal {
  background: #1a1a2e;
  color: #e0e0e0;
}

.feature-limit-modal .close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: #666;
  color: var(--text-muted, #666);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
  z-index: 1;
}

.feature-limit-modal .close-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
  color: var(--text-primary, #333);
}

[data-theme="dark"] .feature-limit-modal .close-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.limit-header {
  padding: 24px 24px 16px;
  text-align: center;
  border-bottom: 1px solid #eee;
  border-bottom: 1px solid var(--border-color, #eee);
}

[data-theme="dark"] .limit-header {
  border-bottom-color: #333;
}

.limit-header .limit-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.limit-icon.cooldown {
  color: #f59e0b;
}

.limit-icon.daily {
  color: #d97706; /* Golden amber - friendly Scoobs color */
}

.limit-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  color: var(--text-primary, #1a1a1a);
}

[data-theme="dark"] .limit-header h3 {
  color: #fff;
}

.limit-body {
  padding: 20px 24px;
}

.limit-reason {
  font-size: 0.95rem;
  color: #555;
  color: var(--text-secondary, #555);
  margin: 0 0 12px;
  line-height: 1.5;
}

.limit-reason.scoobs-message {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  color: var(--text-primary, #333);
  background: linear-gradient(135deg, #fef9e7, #fef3c7);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid #f59e0b;
}

[data-theme="dark"] .limit-reason {
  color: #b0b0b0;
}

[data-theme="dark"] .limit-reason.scoobs-message {
  background: linear-gradient(135deg, #3d3418, #4a3f1d);
  color: #fef3c7;
  border-left-color: #d97706;
}

.limit-info {
  font-size: 0.85rem;
  color: #888;
  color: var(--text-muted, #888);
  margin: 0 0 16px;
  font-style: italic;
}

.limit-reset {
  font-size: 0.85rem;
  color: #888;
  color: var(--text-muted, #888);
  margin: 0 0 16px;
}

.cooldown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #92400e;
}

[data-theme="dark"] .cooldown-timer {
  background: linear-gradient(135deg, #78350f, #92400e);
  color: #fef3c7;
}

.upgrade-section {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

[data-theme="dark"] .upgrade-section {
  background: linear-gradient(135deg, #0c2d48, #1a4a6e);
}

.upgrade-section h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  color: var(--text-primary, #1a1a1a);
}

[data-theme="dark"] .upgrade-section h4 {
  color: #fff;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #444;
  color: var(--text-secondary, #444);
}

[data-theme="dark"] .benefits-list li {
  color: #d0d0d0;
}

.benefits-list .benefit-icon {
  color: #3b82f6;
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.limit-footer {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upgrade-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.upgrade-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.dismiss-button {
  padding: 12px 24px;
  background: transparent;
  color: #666;
  color: var(--text-muted, #666);
  border: 1px solid #ddd;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.dismiss-button:hover {
  background: #f5f5f5;
  background: var(--hover-bg, #f5f5f5);
  color: #333;
  color: var(--text-primary, #333);
}

[data-theme="dark"] .dismiss-button {
  border-color: #444;
  color: #888;
}

[data-theme="dark"] .dismiss-button:hover {
  background: #2a2a3e;
  color: #fff;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .feature-limit-modal {
    max-width: 100%;
    margin: 10px;
  }

  .limit-header {
    padding: 20px 20px 12px;
  }

  .limit-header .limit-icon {
    font-size: 40px;
  }

  .limit-header h3 {
    font-size: 1.2rem;
  }

  .limit-body {
    padding: 16px 20px;
  }

  .limit-footer {
    padding: 12px 20px 20px;
  }
}

.cooldown-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #92400e;
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

[data-theme="dark"] .cooldown-indicator {
  background: linear-gradient(135deg, #78350f, #92400e);
  color: #fef3c7;
}

.cooldown-indicator.compact {
  padding: 4px 8px;
  font-size: 0.75rem;
  gap: 4px;
}

.cooldown-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cooldown-icon {
  font-size: 0.75rem;
  animation: spin-slow 3s linear infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cooldown-label {
  font-weight: 500;
}

.cooldown-time {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Cooldown Badge - for inline use next to buttons */
.cooldown-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 6px;
  animation: pulse-subtle 2s ease-in-out infinite;
}

[data-theme="dark"] .cooldown-badge {
  background: #92400e;
  color: #fef3c7;
}

.cooldown-badge svg {
  font-size: 0.6rem;
}

/* Usage indicator for showing remaining daily limits */
.usage-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  background: var(--card-bg, #f5f5f5);
  border-radius: 8px;
  font-size: 0.8rem;
}

[data-theme="dark"] .usage-indicator {
  background: #2a2a3e;
}

.usage-bar {
  flex: 1 1;
  height: 6px;
  background: #e0e0e0;
  background: var(--border-color, #e0e0e0);
  border-radius: 3px;
  overflow: hidden;
}

[data-theme="dark"] .usage-bar {
  background: #444;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.usage-bar-fill.low {
  background: #22c55e; /* Green - plenty remaining */
}

.usage-bar-fill.medium {
  background: #f59e0b; /* Amber - getting low */
}

.usage-bar-fill.high {
  background: #ef4444; /* Red - almost depleted */
}

.usage-text {
  min-width: 60px;
  text-align: right;
  color: #666;
  color: var(--text-muted, #666);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .usage-text {
  color: #888;
}

/* ===== CSS VARIABLES ===== */
:root {
  /* Colors */
  --phone-primary-color: #667eea;
  --phone-secondary-color: #764ba2;
  --phone-success-color: #48bb78;
  --phone-danger-color: #f56565;
  --phone-warning-color: #ed8936;
  --phone-info-color: #4299e1;
  --phone-text-light: #ffffff;
  --phone-text-dark: #2d3748;
  --phone-bg-overlay: rgba(255, 255, 255, 0.1);
  --phone-bg-overlay-dark: rgba(0, 0, 0, 0.2);
  --phone-border-light: rgba(255, 255, 255, 0.2);
  --phone-border-dark: rgba(255, 255, 255, 0.1);
  
  /* Shadows */
  --phone-shadow-light: 0 10px 30px rgba(0, 0, 0, 0.2);
  --phone-shadow-dark: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* Spacing */
  --phone-spacing-xs: 8px;
  --phone-spacing-sm: 12px;
  --phone-spacing-md: 16px;
  --phone-spacing-lg: 20px;
  --phone-spacing-xl: 24px;
  
  /* Border Radius */
  --phone-radius-sm: 8px;
  --phone-radius-md: 12px;
  --phone-radius-lg: 16px;
  
  /* Transitions */
  --phone-transition-fast: 0.2s ease;
  --phone-transition-normal: 0.3s ease;
}

/* ===== DARK MODE VARIABLES ===== */
.phone-dark-mode {
  --phone-text-light: #e2e8f0;
  --phone-bg-overlay: rgba(0, 0, 0, 0.3);
  --phone-border-light: rgba(255, 255, 255, 0.1);
}

/* ===== RESET & BASE STYLES ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ===== MAIN PAGE CONTAINER ===== */
.phone-recorder-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background: linear-gradient(135deg, var(--phone-primary-color), var(--phone-secondary-color));
  color: #ffffff;
  color: var(--phone-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  padding: var(--phone-spacing-lg);
  position: relative;
  overflow-x: hidden;
}

/* ===== CONTAINER ===== */
.phone-container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  gap: var(--phone-spacing-lg);
}

/* ===== HEADER ===== */
.phone-container h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 20px 0;
  margin: 0 0 var(--phone-spacing-lg) 0;
  text-align: center;
  letter-spacing: 0.5px;
}

.phone-page-title-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  margin-right: var(--phone-spacing-sm);
  object-fit: contain;
}

/* ===== LOADING SPINNER ===== */
.phone-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  gap: var(--phone-spacing-md);
  padding: 24px;
  padding: var(--phone-spacing-xl);
}

/* ===== ERROR CONTAINER ===== */
.phone-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  padding: var(--phone-spacing-xl);
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border-radius: var(--phone-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  max-width: 400px;
  width: 100%;
}

.phone-error-container .phone-error-icon {
  font-size: 48px;
  color: #f56565;
  color: var(--phone-danger-color);
  margin-bottom: 16px;
  margin-bottom: var(--phone-spacing-md);
}

.phone-error-container h2 {
  margin: 0 0 12px 0;
  margin: 0 0 var(--phone-spacing-sm) 0;
  font-size: 20px;
  font-weight: 600;
}

.phone-error-container p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.5;
}

.phone-error-message {
  background-color: rgba(245, 101, 101, 0.2);
  color: #ffffff;
  color: var(--phone-text-light);
  padding: 12px;
  padding: var(--phone-spacing-sm);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  text-align: center;
  border: 1px solid rgba(245, 101, 101, 0.4);
  font-size: 14px;
}

/* ===== VERIFICATION CONTAINER ===== */
.phone-verification-container {
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  gap: var(--phone-spacing-lg);
}

/* ===== VERIFICATION STATUS ===== */
.phone-verification-status {
  text-align: center;
  padding: 24px;
  padding: var(--phone-spacing-xl);
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border-radius: var(--phone-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  width: 100%;
}

.phone-verification-status .phone-status-icon {
  font-size: 48px;
  margin-bottom: 16px;
  margin-bottom: var(--phone-spacing-md);
  display: block;
}

.phone-verification-status.phone-pending .phone-status-icon {
  color: #4299e1;
  color: var(--phone-info-color);
}

.phone-verification-status.phone-approved .phone-status-icon {
  color: #48bb78;
  color: var(--phone-success-color);
}

.phone-verification-status.phone-rejected .phone-status-icon,
.phone-verification-status.phone-disconnected .phone-status-icon {
  color: #f56565;
  color: var(--phone-danger-color);
}

.phone-verification-status h2 {
  margin: 0 0 12px 0;
  margin: 0 0 var(--phone-spacing-sm) 0;
  font-size: 20px;
  font-weight: 600;
}

.phone-verification-status p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.5;
}

/* ===== VERIFICATION FORM ===== */
.phone-verification-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  gap: var(--phone-spacing-md);
  padding: 24px;
  padding: var(--phone-spacing-xl);
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border-radius: var(--phone-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  width: 100%;
}

/* ===== DEVICE NAME SECTION ===== */
.phone-device-name-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--phone-spacing-xs);
}

.phone-label {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  color: var(--phone-text-light);
  margin-bottom: 8px;
  margin-bottom: var(--phone-spacing-xs);
}

.phone-label-tip {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.8;
  margin-left: 8px;
  margin-left: var(--phone-spacing-xs);
}

.phone-device-name-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  background: rgba(66, 153, 225, 0.15);
  border: 1px solid rgba(66, 153, 225, 0.3);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  padding: 12px;
  padding: var(--phone-spacing-sm);
  font-size: 12px;
  line-height: 1.4;
  color: #ffffff;
  color: var(--phone-text-light);
  opacity: 0.9;
}

.phone-tip-icon {
  color: #4299e1;
  color: var(--phone-info-color);
  margin-right: 8px;
  margin-right: var(--phone-spacing-xs);
  font-size: 14px;
  flex-shrink: 0;
}

.phone-device-name-tip span {
  flex: 1 1;
}

.phone-device-name-input-container {
  display: flex;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  align-items: stretch;
}

.phone-device-name-input-container .phone-input-field {
  flex: 1 1;
}

.phone-auto-fill-button {
  background: #667eea;
  background: var(--phone-primary-color);
  border: 1px solid #667eea;
  border: 1px solid var(--phone-primary-color);
  color: white;
  padding: 8px 12px;
  padding: var(--phone-spacing-xs) var(--phone-spacing-sm);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  transition: all var(--phone-transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.phone-auto-fill-button:hover:not(:disabled) {
  background: #764ba2;
  background: var(--phone-secondary-color);
  border-color: #764ba2;
  border-color: var(--phone-secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Dark mode adjustments for auto-fill button */
.phone-dark-mode .phone-auto-fill-button {
  background: #4299e1;
  background: var(--phone-info-color);
  border-color: #4299e1;
  border-color: var(--phone-info-color);
}

.phone-dark-mode .phone-auto-fill-button:hover:not(:disabled) {
  background: #3182ce;
  border-color: #3182ce;
}

/* ===== FORM INPUTS ===== */
.phone-input-field {
  width: 100%;
  padding: 16px;
  padding: var(--phone-spacing-md);
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  color: #ffffff;
  color: var(--phone-text-light);
  font-size: 16px;
  transition: all 0.3s ease;
  transition: all var(--phone-transition-normal);
}

.phone-input-field:focus {
  outline: none;
  border-color: #667eea;
  border-color: var(--phone-primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.phone-input-field::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Light mode placeholder - better contrast */
:not(.phone-dark-mode) .phone-input-field::placeholder {
  color: rgba(45, 55, 72, 0.7); /* Dark gray with good contrast on light backgrounds */
}

/* Dark mode placeholder */
.phone-dark-mode .phone-input-field::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Light gray on dark backgrounds */
}

/* Remove spinner from number inputs */
.phone-input-field[type="number"]::-webkit-outer-spin-button,
.phone-input-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.phone-input-field[type="number"] {
  -moz-appearance: textfield;
}

/* ===== BUTTONS ===== */
.phone-button {
  padding: 16px 24px;
  padding: var(--phone-spacing-md) var(--phone-spacing-xl);
  border: none;
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--phone-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  min-height: 48px;
}

.phone-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.phone-button:not(:disabled):hover {
  transform: translateY(-1px);
}

.phone-button:not(:disabled):active {
  transform: translateY(0);
}

/* Button Variants */
.phone-button.phone-primary {
  background: #667eea;
  background: var(--phone-primary-color);
  color: white;
}

.phone-button.phone-primary:not(:disabled):hover {
  background: #5a6fd8;
}

.phone-button.phone-secondary {
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  color: #ffffff;
  color: var(--phone-text-light);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
}

.phone-button.phone-secondary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
}

.phone-button.phone-danger {
  background: #f56565;
  background: var(--phone-danger-color);
  color: white;
}

.phone-button.phone-danger:not(:disabled):hover {
  background: #e53e3e;
}

/* Special Button Classes */
.phone-button-start {
  background: #48bb78;
  background: var(--phone-success-color);
  color: white;
}

.phone-button-start:not(:disabled):hover {
  background: #38a169;
}

.phone-button-stop {
  background: #f56565;
  background: var(--phone-danger-color);
  color: white;
}

.phone-button-stop:not(:disabled):hover {
  background: #e53e3e;
}

.phone-secondary-button {
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  color: #ffffff;
  color: var(--phone-text-light);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
}

.phone-secondary-button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
}

.phone-danger-button {
  background: #f56565;
  background: var(--phone-danger-color);
  color: white;
}

.phone-danger-button:not(:disabled):hover {
  background: #e53e3e;
}

/* ===== HELP BUTTON ===== */
.phone-help-button {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  background: linear-gradient(135deg, var(--phone-info-color), #3182ce);
  color: #ffffff;
  color: var(--phone-text-light);
  border: none;
  padding: 12px 16px;
  padding: var(--phone-spacing-sm) var(--phone-spacing-md);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  box-shadow: var(--phone-shadow-dark);
}

.phone-help-button:not(:disabled):hover {
  background: linear-gradient(135deg, #3182ce, #2c5aa0);
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* ===== RECORDER CONTAINER ===== */
.phone-recorder-container {
  width: 100%;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border-radius: var(--phone-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  box-shadow: var(--phone-shadow-light);
  padding: 16px 20px;
  padding: var(--phone-spacing-md) var(--phone-spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  display: flex;
  flex-direction: column;
  gap: 16px;
  gap: var(--phone-spacing-md);
}

/* ===== STATUS INDICATORS ===== */
.phone-status-indicators {
  display: flex;
    flex-direction: column;
  gap: 4px;
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: rgba(0, 0, 0, 0.2);
  background: var(--phone-bg-overlay-dark);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  font-size: 14px;
}

.phone-connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  font-weight: 500;
}

.phone-connection-status.phone-connected {
  color: #48bb78;
  color: var(--phone-success-color);
}

.phone-connection-status.phone-disconnected {
  color: #f56565;
  color: var(--phone-danger-color);
}

.phone-session-id-display,
.phone-device-name-display {
  opacity: 0.8;
  font-size: 13px;
}

.phone-wake-lock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  font-weight: 500;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  animation: pulse 2s ease-in-out infinite;
}

.phone-wake-lock-status.phone-wake-active {
  color: #48bb78;
  color: var(--phone-success-color);
  background: rgba(72, 187, 120, 0.1);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ===== RECORDING STATUS ===== */
.phone-recording-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  gap: var(--phone-spacing-sm);
  font-size: 18px;
  font-weight: 500;
  padding: 16px;
  padding: var(--phone-spacing-md);
}

.phone-recording-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
  transition: all 0.3s ease;
  transition: all var(--phone-transition-normal);
}

.phone-recording-dot.phone-active {
  background: #f56565;
  background: var(--phone-danger-color);
  animation: phone-pulse 1.5s infinite;
}

@keyframes phone-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* ===== SELECTORS CONTAINER ===== */
.phone-selectors-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--phone-spacing-sm);
}

.phone-selectors-container > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--phone-spacing-xs);
}

.phone-selectors-container label {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  color: var(--phone-text-light);
}

.phone-selectors-container select {
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: rgba(255, 255, 255, 0.1);
  background: var(--phone-bg-overlay);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border: 1px solid var(--phone-border-light);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  color: #ffffff;
  color: var(--phone-text-light);
  font-size: 14px;
  cursor: pointer;
}

.phone-selectors-container select:focus {
  outline: none;
  border-color: #667eea;
  border-color: var(--phone-primary-color);
}

.phone-selectors-container select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== TRANSCRIPT PREVIEW ===== */
.phone-transcript-preview {
  min-height: 300px;
  max-height: 60vh;
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: rgba(0, 0, 0, 0.2);
  background: var(--phone-bg-overlay-dark);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 1px solid var(--phone-border-dark);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.phone-transcript-preview .no-transcript {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  text-align: center;
  padding: 20px;
  padding: var(--phone-spacing-lg);
  line-height: 1.5;
}

.transcript-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--phone-spacing-sm);
}

.transcript-segment {
  padding: 12px;
  padding: var(--phone-spacing-sm);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.transcript-segment.final {
  background: rgba(72, 187, 120, 0.2);
  border-color: rgba(72, 187, 120, 0.4);
}

.transcript-segment.interim {
  background: rgba(66, 153, 225, 0.2);
  border-color: rgba(66, 153, 225, 0.4);
  animation: pulse-glow 2s infinite;
}

.transcript-timestamp {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-bottom: 4px;
  font-weight: 500;
}

.phone-transcript-text {
  margin: 0;
  line-height: 1.6;
  color: #ffffff;
  color: var(--phone-text-light);
  font-size: 14px;
  word-wrap: break-word;
}

.interim-text {
  font-style: italic;
  opacity: 0.8;
}

/* ===== CONTROLS ===== */
.phone-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  gap: var(--phone-spacing-sm);
  justify-content: center;
}

.phone-record-button {
  flex: 1 1;
  min-width: 140px;
  font-size: 16px;
  font-weight: 600;
}

.phone-disconnect-button {
  width: 100%;
  margin-top: 16px;
  margin-top: var(--phone-spacing-md);
}

/* ===== NOTIFICATIONS ===== */
.phone-notification {
  position: fixed;
  top: 20px;
  top: var(--phone-spacing-lg);
  right: 20px;
  right: var(--phone-spacing-lg);
  padding: 16px;
  padding: var(--phone-spacing-md);
  border-radius: 12px;
  border-radius: var(--phone-radius-md);
  color: white;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  z-index: 1000;
  animation: phone-slideIn 0.3s ease-out;
  min-width: -webkit-fit-content;
  min-width: fit-content;
  max-width: 350px;
  width: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  box-shadow: var(--phone-shadow-dark);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  word-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: pre-wrap;
}

/* Compact notification for short messages */
.phone-notification.phone-notification-compact {
  padding: 6px 12px;
  min-width: auto;
  border-radius: 12px;
  border-radius: var(--phone-radius-md);
  font-size: 13px;
  font-weight: 600;
}

/* Notification content wrapper for better text handling */
.phone-notification-content {
  flex: 0 1 auto;
  min-width: 0; /* Allow content to shrink */
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}

/* For very long single words or URLs */
.phone-notification-content:has(a) {
  word-break: break-all;
}

/* Notification variants with improved contrast */
.phone-notification.phone-success { 
  background: linear-gradient(135deg, #48bb78, #38a169); 
  background: linear-gradient(135deg, var(--phone-success-color), #38a169);
  border-color: rgba(255, 255, 255, 0.2);
}

.phone-notification.phone-error { 
  background: linear-gradient(135deg, #f56565, #e53e3e); 
  background: linear-gradient(135deg, var(--phone-danger-color), #e53e3e);
  border-color: rgba(255, 255, 255, 0.2);
}

.phone-notification.phone-warning { 
  background: linear-gradient(135deg, #ed8936, #dd6b20); 
  background: linear-gradient(135deg, var(--phone-warning-color), #dd6b20);
  border-color: rgba(255, 255, 255, 0.2);
  color: #1a202c; /* Dark text for better contrast on orange */
  font-weight: 600;
}

.phone-notification.phone-info { 
  background: linear-gradient(135deg, #4299e1, #3182ce); 
  background: linear-gradient(135deg, var(--phone-info-color), #3182ce);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Add icon support for notifications */
.phone-notification-icon {
  margin-right: 8px;
  margin-right: var(--phone-spacing-xs);
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Improved dismiss button */
.phone-notification-dismiss {
  margin-left: 8px;
  margin-left: var(--phone-spacing-xs);
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  transition: opacity var(--phone-transition-fast);
  flex-shrink: 0;
}

.phone-notification-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* Enhanced animations for notifications */
@keyframes phone-slideIn {
  from {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes phone-slideOut {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
}

/* Notification states for enter/exit animations */
.phone-notification.phone-entering {
  animation: phone-slideIn 0.3s ease-out forwards;
}

.phone-notification.phone-exiting {
  animation: phone-slideOut 0.2s ease-in forwards;
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
  .phone-recorder-page {
    padding: 16px;
    padding: var(--phone-spacing-md);
  }
  
  .phone-container h1 {
    font-size: 24px;
  }
  
  .phone-page-title-icon {
    width: 28px;
    height: 28px;
  }
  
  .phone-recorder-container {
    padding: 20px;
    padding: var(--phone-spacing-lg);
  }
  
  .phone-notification {
    top: 12px;
    top: var(--phone-spacing-sm);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: -webkit-fit-content;
    min-width: fit-content;
    max-width: calc(100vw - 32px);
    width: -webkit-fit-content;
    width: fit-content;
    font-size: 13px;
    padding: 8px 12px;
    padding: var(--phone-spacing-xs) var(--phone-spacing-sm);
  }
}

@media (max-width: 480px) {
  .phone-recorder-page {
    padding: 12px;
    padding: var(--phone-spacing-sm);
  }
  
  .phone-container h1 {
    font-size: 20px;
  }
  
  .phone-page-title-icon {
    width: 24px;
    height: 24px;
  }
  
  .phone-recorder-container {
    padding: 16px;
    padding: var(--phone-spacing-md);
  }
  
  .phone-controls {
    flex-direction: column;
  }
  
  .phone-record-button {
  width: 100%;
  }
  
  .phone-selectors-container {
    gap: 12px;
    gap: var(--phone-spacing-sm);
  }
  
  .phone-button {
    min-height: 44px;
    font-size: 15px;
  }

  /* Notification adjustments for small screens */
  .phone-notification {
    font-size: 12px;
    padding: 12px;
    padding: var(--phone-spacing-sm);
    max-width: calc(100vw - 20px);
    left: 10px;
    right: 10px;
    top: 10px;
    width: auto;
    min-width: auto;
    transform: none;
    line-height: 1.3;
    text-align: left;
  }

  .phone-notification-icon {
    font-size: 14px;
    margin-right: 6px;
  }

  .phone-notification-dismiss {
    font-size: 14px;
    margin-left: 6px;
  }
}

@media (max-width: 320px) {
  .phone-recorder-page {
    padding: 8px;
    padding: var(--phone-spacing-xs);
  }
  
  .phone-recorder-container {
    padding: 12px;
    padding: var(--phone-spacing-sm);
  }
  
  .phone-container h1 {
    font-size: 18px;
  }
}

/* ===== DARK MODE SPECIFIC OVERRIDES ===== */
.phone-dark-mode .phone-input-field {
  background: rgba(0, 0, 0, 0.3);
  color:white;
}

.phone-dark-mode .phone-selectors-container select {
  background: rgba(0, 0, 0, 0.3);
}

.phone-dark-mode .phone-transcript-preview {
  background: rgba(0, 0, 0, 0.4);
}

.phone-dark-mode .phone-transcript-preview .no-transcript {
  color: rgba(255, 255, 255, 0.5);
}

.phone-dark-mode .transcript-segment {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-dark-mode .transcript-segment.final {
  background: rgba(72, 187, 120, 0.15);
  border-color: rgba(72, 187, 120, 0.3);
}

.phone-dark-mode .transcript-segment.interim {
  background: rgba(66, 153, 225, 0.15);
  border-color: rgba(66, 153, 225, 0.3);
}

.phone-dark-mode .transcript-timestamp {
  color: rgba(255, 255, 255, 0.6);
}

.phone-dark-mode .phone-transcript-text {
  color: rgba(255, 255, 255, 0.9);
}

.phone-dark-mode .phone-status-indicators {
  background: rgba(0, 0, 0, 0.4);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for better keyboard navigation */
.phone-button:focus-visible,
.phone-input-field:focus-visible,
.phone-selectors-container select:focus-visible {
  outline: 2px solid #667eea;
  outline: 2px solid var(--phone-primary-color);
  outline-offset: 2px;
}

/* ===== PHONE ENGINE NOTE ===== */
.phone-engine-note {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  padding: 6px 8px;
  padding: 6px var(--phone-spacing-xs);
  margin-top: 8px;
  margin-top: var(--phone-spacing-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  font-size: 12px;
  opacity: 0.9;
}

.phone-tip-icon {
  color: #4299e1;
  color: var(--phone-info-color);
  margin-right: 4px;
  font-size: 12px;
}

/* ===== DESKTOP MODE TOGGLE ===== */
.phone-setting-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-radius: var(--phone-radius-md);
  padding: 16px;
  padding: var(--phone-spacing-md);
  margin-top: 16px;
  margin-top: var(--phone-spacing-md);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Compact setting item for single-line controls */
.phone-setting-item-compact {
  padding: 12px;
  padding: var(--phone-spacing-sm);
  margin-top: 12px;
  margin-top: var(--phone-spacing-sm);
}

.phone-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  gap: var(--phone-spacing-xs);
}

.phone-setting-label-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  flex: 1 1;
  cursor: pointer;
}

.phone-setting-label-with-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  flex: 1 1;
  font-size: 14px;
  font-weight: 500;
}

.phone-setting-icon-sm {
  font-size: 14px;
  color: #4299e1;
  color: var(--phone-info-color);
}

.phone-checkbox-inline {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-left: var(--phone-spacing-xs);
  cursor: pointer;
}

/* iOS-style Toggle Switch */
.phone-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-left: auto;
}

.phone-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.phone-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.phone-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 1px;
  background-color: white;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .phone-toggle-slider {
  background-color: #48bb78;
  background-color: var(--phone-success-color);
  border-color: #48bb78;
  border-color: var(--phone-success-color);
}

input:focus + .phone-toggle-slider {
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.3);
}

input:checked + .phone-toggle-slider:before {
  transform: translateX(20px);
}

/* Dark mode adjustments for toggle */
.phone-dark-mode .phone-toggle-slider {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.phone-dark-mode input:checked + .phone-toggle-slider {
  background-color: #48bb78;
  background-color: var(--phone-success-color);
  border-color: #48bb78;
  border-color: var(--phone-success-color);
}

.phone-help-button-sm {
  padding: 6px;
  background: rgba(66, 153, 225, 0.15);
  border: 1px solid rgba(66, 153, 225, 0.3);
  border-radius: 50%;
  color: #4299e1;
  color: var(--phone-info-color);
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.phone-help-button-sm:hover {
  background: rgba(66, 153, 225, 0.25);
  border-color: rgba(66, 153, 225, 0.5);
}

.phone-setting-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  font-weight: 600;
  margin-bottom: 12px;
  margin-bottom: var(--phone-spacing-sm);
  cursor: pointer;
}

.phone-setting-icon {
  color: #4299e1;
  color: var(--phone-info-color);
  font-size: 16px;
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--phone-spacing-sm);
  margin-bottom: 8px;
  margin-bottom: var(--phone-spacing-xs);
}

.toggle-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
}

.toggle-container input[type="checkbox"]:checked {
  background: #48bb78;
  background: var(--phone-success-color);
  border-color: #48bb78;
  border-color: var(--phone-success-color);
}

.mode-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.mode-status.active {
  background: rgba(72, 187, 120, 0.2);
  color: #48bb78;
  color: var(--phone-success-color);
}

.phone-setting-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

.phone-setting-note .phone-tip-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Dark mode adjustments for desktop mode toggle */
.phone-dark-mode .phone-setting-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-dark-mode .toggle-container input[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.2);
}

.phone-dark-mode .mode-status.active {
  background: rgba(72, 187, 120, 0.3);
}

/* ===== AUDIO ENHANCEMENT SECTION ===== */
.audio-enhancement-section {
  margin: 12px 0;
  margin: var(--phone-spacing-sm) 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
}

.audio-enhancement-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

.audio-controls-toggle {
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.audio-controls-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.audio-icon {
  font-size: 1rem;
}

.audio-status {
  margin-left: auto;
  font-size: 1.2rem;
  font-weight: bold;
}

.audio-controls-panel {
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: var(--card-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* External Audio Toggle */
.external-audio-toggle {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.external-audio-toggle label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
}

.external-audio-toggle .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.external-audio-toggle span {
  font-weight: 500;
  color: #000000;
  flex: 1 1;
}

.dark-mode .external-audio-toggle span {
  color: var(--text-color-primary);
}

.external-audio-toggle small {
  color: var(--text-color-secondary);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Toggle Switch Styling */
.external-audio-toggle input[type="checkbox"] {
  position: relative;
  width: 50px;
  height: 24px;
  -webkit-appearance: none;
          appearance: none;
  background: #ddd;
  border-radius: 24px;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
  flex-shrink: 0;
}

.external-audio-toggle input[type="checkbox"]:checked {
  background: #667eea;
}

.external-audio-toggle input[type="checkbox"]:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.external-audio-toggle input[type="checkbox"]:checked:before {
  transform: translateX(26px);
}

.external-audio-toggle input[type="checkbox"]:hover {
  opacity: 0.8;
}

.external-audio-toggle input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* Dark mode toggle switch */
.dark-mode .external-audio-toggle input[type="checkbox"] {
  background: #4a5568;
}

.dark-mode .external-audio-toggle input[type="checkbox"]:checked {
  background: #667eea;
}

/* Audio Level Display */
.audio-level-display {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.audio-level-header {
  display: flex;
  color: #3f3d3d;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.level-category {
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.level-category.very_low {
  background: #fee2e2;
  color: #dc2626;
}

.level-category.low {
  background: #fef3c7;
  color: #d97706;
}

.level-category.moderate {
  background: #d1fae5;
  color: #059669;
}

.level-category.high {
  background: #dbeafe;
  color: #2563eb;
}

.level-category.very_high {
  background: #fce7f3;
  color: #be185d;
}

.audio-level-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.level-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.level-fill.very_low {
  background: #dc2626;
}

.level-fill.low {
  background: #d97706;
}

.level-fill.moderate {
  background: #059669;
}

.level-fill.high {
  background: #2563eb;
}

.level-fill.very_high {
  background: #be185d;
}

.audio-level-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-color-secondary);
}

.silence-state {
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-weight: 500;
  text-transform: capitalize;
}

.silence-state.active {
  background: #d1fae5;
  color: #059669;
}

.silence-state.low_activity {
  background: #fef3c7;
  color: #d97706;
}

.silence-state.extended_silence {
  background: #fee2e2;
  color: #dc2626;
}

.silence-state.long_silence {
  background: #fce7f3;
  color: #be185d;
}

/* Gain Controls */
.gain-controls {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.gain-header {
  display: flex;
  color: #3f3d3d;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.auto-gain-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.auto-gain-toggle input {
  margin: 0;
}

.gain-slider-container {
  position: relative;
}

.gain-slider {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.gain-slider:hover {
  opacity: 0.8;
}

.gain-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gain-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gain-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-size: 0.7rem;
  color: var(--text-color-secondary);
}

/* Audio Advice */
.audio-advice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.audio-advice.info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1e40af;
}

.audio-advice.warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.audio-advice.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #166534;
}

.advice-icon {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Optimization Tips */
.optimization-tips {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.optimization-tips.info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1e40af;
}

.optimization-tips.warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.tip-icon {
  align-self: flex-start;
  margin-top: 0.125rem;
}

.optimization-tips small {
  color: var(--text-color-secondary);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Dark mode support */
.dark-mode .audio-enhancement-section {
  border-color: #374151;
}

.dark-mode .audio-controls-panel {
  background: #1f2937;
}

.dark-mode .external-audio-toggle {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.dark-mode .audio-level-display,
.dark-mode .gain-controls {
  background: rgba(255, 255, 255, 0.05);
}

.dark-mode .audio-level-bar {
  background: #374151;
}

.dark-mode .gain-slider {
  background: #374151;
}

.dark-mode .audio-advice.info {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.dark-mode .audio-advice.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.dark-mode .audio-advice.success {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.dark-mode .optimization-tips.info {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.dark-mode .optimization-tips.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* Responsive Design */
@media (max-width: 768px) {
  .audio-controls-panel {
    padding: 0.75rem;
  }
  
  .audio-level-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .gain-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .audio-level-info {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Phone transcript preview */
.mobile-optimization-note {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: rgba(72, 187, 120, 0.2);
  border: 1px solid rgba(72, 187, 120, 0.4);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  color: #ffffff;
  color: var(--phone-text-light);
  font-size: 13px;
  margin-top: 8px;
  margin-top: var(--phone-spacing-xs);
}

.optimization-icon {
  color: #48bb78;
  color: var(--phone-success-color);
  margin-right: 8px;
  margin-right: var(--phone-spacing-xs);
  font-size: 14px;
  flex-shrink: 0;
}

.mobile-optimization-note span {
  line-height: 1.4;
}

.dark-mode .mobile-optimization-note {
  background: rgba(72, 187, 120, 0.15);
  border-color: rgba(72, 187, 120, 0.3);
}

.silent-mode-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--phone-spacing-xs);
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  color: #ffffff;
  color: var(--phone-text-light);
  font-size: 13px;
  margin-top: 8px;
  margin-top: var(--phone-spacing-xs);
}

.silent-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.level-indicator {
  font-size: 16px;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
}

.level-indicator.active {
  animation: pulse-glow 2s infinite;
}

.level-indicator.inactive {
  opacity: 0.5;
}

.silent-mode-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.silent-level-fill {
  height: 100%;
  background: linear-gradient(90deg, #48bb78, #38a169);
  transition: width 0.1s ease, background-color 0.3s ease;
  border-radius: 3px;
}

.silent-level-fill.active {
  background: linear-gradient(90deg, #48bb78, #68d391);
  box-shadow: 0 0 8px rgba(72, 187, 120, 0.5);
}

.silent-level-fill.inactive {
  background: rgba(255, 255, 255, 0.3);
}

.silent-mode-display small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  text-align: center;
  margin-top: 2px;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.dark-mode .silent-mode-display {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
}

/* ===== MOBILE SILENT MODE REMINDER ===== */
.mobile-silent-reminder {
  margin: 12px 0;
  margin: var(--phone-spacing-sm) 0;
  padding: 12px;
  padding: var(--phone-spacing-sm);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  border-radius: var(--phone-radius-sm);
  font-size: 13px;
}

.silent-reminder-content {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--phone-spacing-xs);
}

.silent-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.silent-text {
  flex: 1 1;
  color: #ffffff;
  color: var(--phone-text-light);
}

.silent-text strong {
  color: #ffc107;
}

.silent-help-btn {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: #ffffff;
  color: var(--phone-text-light);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
  transition: var(--phone-transition-fast);
  flex-shrink: 0;
}

.silent-help-btn:hover {
  background: rgba(255, 193, 7, 0.3);
  border-color: rgba(255, 193, 7, 0.6);
}

.dark-mode .mobile-silent-reminder {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.08));
  border-color: rgba(255, 193, 7, 0.2);
}
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px;
  box-sizing: border-box;
}

.auth-layout {
  display: flex;
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.auth-box {
  background: white;
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capabilities-section {
  flex: 1 1;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.capability-tiles {
  max-width: 600px;
  width: 100%;
}

.capabilities-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.capabilities-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  font-weight: 400;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.capability-tile {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.capability-tile:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.capability-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin: 0 auto 1rem auto;
}

.capability-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
  text-align: center;
}

.capability-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  text-align: center;
}

.auth-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: block;
  object-fit: contain;
}

.auth-title {
  text-align: center;
  margin-bottom: 0.5rem;
  color: #2d3748;
  font-size: 1.75rem;
  font-weight: 600;
}

.auth-subtitle {
  text-align: center;
  color: #718096;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.form-group {
  position: relative;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #718096;
  font-size: 1rem;
  z-index: 1;
  pointer-events: none;
}

.password-toggle-icon {
  position: absolute;
  right: 10px;
  color: #718096;
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 2;
  padding: 4px 8px;
}

.password-toggle-icon:hover {
  color: #2d3748;
}

.form-group input {
  width: 100%;
  padding: 0.875rem 35px 0.875rem 35px;
  border: 1px solid #cbd5e0;
  border-radius: 0.375rem;
  font-size: 1rem;
  transition: all 0.2s;
  box-sizing: border-box;
  line-height: 1.5;
  flex-grow: 1;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input.error {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.validation-error {
  color: #dc3545;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.1rem;
  width: 100%;
  display: block;
  line-height: 1.4;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  color: #718096;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #e2e8f0;
}

.auth-divider span {
  padding: 0 1rem;
  font-size: 0.9rem;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #2d3748;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.social-button:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
}

.social-button img {
  width: 20px;
  height: 20px;
}

.social-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.social-button .spinner {
  margin-right: 8px;
}

button[type="submit"] {
  width: 100%;
  padding: 0.875rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

button[type="submit"]:hover {
  background-color: #5a67d8;
  transform: translateY(-1px);
}

button[type="submit"]:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
  padding: 0.5rem;
  background: #fff5f5;
  border-radius: 6px;
}

.success-message {
  color: #2f855a;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
  padding: 0.5rem;
  background: #f0fff4;
  border-radius: 6px;
}

.auth-switch {
  margin-top: 1.5rem;
  text-align: center;
  color: #718096;
}

.auth-switch p {
  margin: 0;
  font-size: 0.95rem;
}

.auth-switch button {
  background: none;
  border: none;
  color: #667eea;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 0.95rem;
}

.auth-switch button:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .auth-layout {
    flex-direction: column-reverse;
    max-width: 600px;
  }
  
  .auth-box {
    max-width: 100%;
    padding: 2rem;
  }
  
  .capabilities-section {
    padding: 2rem;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
  
  .auth-layout {
    min-height: auto;
  }
  
  .capability-tile {
    padding: 1rem;
  }
  
  .capabilities-section {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .auth-box {
    padding: 2rem;
  }

  .auth-logo {
    width: 60px;
    height: 60px;
  }

  .auth-title {
    font-size: 1.5rem;
  }
}

.forgot-password {
  margin-top: 10px;
  text-align: center;
}

.forgot-password button {
  background: none;
  border: none;
  color: #4a90e2;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  text-decoration: underline;
}

.forgot-password button:hover {
  color: #357abd;
}

.capability-tile.highlighted {
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.capability-tile.highlighted .capability-title {
  color: #ffffff;
}

.capability-tile.highlighted .capability-icon {
  background: rgba(255, 255, 255, 0.25);
}

.capability-tile strong {
  color: #ffffff;
  font-weight: 600;
}

/* Signup Success Message Styles */
.signup-success-message {
  text-align: center;
  padding: 20px 0;
}

.signup-success-message .success-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: bounce 1s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.signup-success-message .success-text {
  font-size: 16px;
  color: #4a5568;
  margin-bottom: 8px;
}

.signup-success-message .success-email {
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 20px;
  word-break: break-word;
}

.signup-success-message .success-instructions {
  font-size: 14px;
  color: #718096;
  line-height: 1.6;
  margin-bottom: 30px;
  padding: 16px;
  background: #f7fafc;
  border-radius: 8px;
  border-left: 4px solid #667eea;
} 
.stripe-checkout-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 2rem;
}

.checkout-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  max-width: 500px;
  width: 100%;
  text-align: center;
}

/* Loading State */
.stripe-checkout-wrapper.loading .spinner {
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 1.5rem;
}

.loading-content h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.loading-content p {
  color: #6c757d;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.loading-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}

.step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.step.active {
  background: #e3f2fd;
  color: #1976d2;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.step.active .step-icon {
  background: #2196f3;
  color: white;
}

.security-notice {
  background: #f0f8f0;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.security-notice p {
  margin: 0;
  color: #2e7d32;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Error State */
.stripe-checkout-wrapper.error .error-icon {
  font-size: 3rem;
  color: #dc3545;
  margin-bottom: 1.5rem;
}

.error-content h2 {
  color: #dc3545;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.error-message {
  color: #6c757d;
  margin-bottom: 2rem;
  font-size: 1rem;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 1rem;
}

.error-solutions {
  text-align: left;
  margin-bottom: 2rem;
}

.error-solutions h3 {
  color: #2c3e50;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.error-solutions ul {
  list-style: none;
  padding: 0;
}

.error-solutions li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
  position: relative;
  padding-left: 1.5rem;
}

.error-solutions li:before {
  content: '•';
  color: #007bff;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.error-solutions li:last-child {
  border-bottom: none;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.retry-button,
.cancel-button,
.continue-button {
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.retry-button {
  background: #007bff;
  color: white;
}

.retry-button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.cancel-button {
  background: #6c757d;
  color: white;
}

.cancel-button:hover {
  background: #545b62;
  transform: translateY(-2px);
}

.continue-button {
  background: #28a745;
  color: white;
}

.continue-button:hover {
  background: #1e7e34;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.spinning {
  animation: spin 1s linear infinite;
}

.support-notice {
  margin-top: 2rem;
  padding: 1rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
}

.support-notice p {
  margin: 0;
  color: #856404;
  font-size: 0.875rem;
}

/* Success State */
.stripe-checkout-wrapper.success .success-icon {
  font-size: 3rem;
  color: #28a745;
  margin-bottom: 1.5rem;
}

.success-content h2 {
  color: #28a745;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.success-content p {
  color: #6c757d;
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .stripe-checkout-wrapper {
    padding: 1rem;
  }

  .checkout-container {
    padding: 2rem;
  }

  .loading-content h2,
  .error-content h2,
  .success-content h2 {
    font-size: 1.25rem;
  }

  .loading-steps {
    text-align: center;
  }

  .step {
    justify-content: center;
  }

  .error-actions {
    flex-direction: column;
  }

  .retry-button,
  .cancel-button,
  .continue-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .checkout-container {
    padding: 1.5rem;
  }

  .stripe-checkout-wrapper.loading .spinner,
  .stripe-checkout-wrapper.error .error-icon,
  .stripe-checkout-wrapper.success .success-icon {
    font-size: 2.5rem;
  }
}

/* @keyframes spin defined in main.css */

/* Focus states for accessibility */
.retry-button:focus,
.cancel-button:focus,
.continue-button:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Loading animation for steps */
.step.active {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
} 
.subscription-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  min-height: 100vh;
}

.subscription-dashboard.loading,
.subscription-dashboard.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.loading-spinner {
  font-size: 1.2rem;
  color: #007bff;
}

.retry-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 15px;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dashboard-header h1 {
  color: #2c3e50;
  font-size: 2rem;
  margin: 0;
  font-weight: 700;
}

.plan-badge {
  display: flex;
  align-items: center;
}

.plan-indicator {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-indicator.free-plan {
  background: #e9ecef;
  color: #6c757d;
}

.plan-indicator.liveai-insights-pro {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.plan-indicator.liveai-insights-plus {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  color: white;
}

/* Dashboard Tabs */
.dashboard-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.tab {
  flex: 1 1;
  background: none;
  border: none;
  padding: 15px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 120px;
  justify-content: center;
}

.tab:hover {
  background: #f8f9fa;
  color: #007bff;
}

.tab.active {
  background: #007bff;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Dashboard Content */
.dashboard-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Overview Tab */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;
  gap: 25px;
}

.overview-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
  border-left: 4px solid #007bff;
}

.overview-card h3 {
  color: #2c3e50;
  font-size: 1.1rem;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.plan-details h2 {
  color: #007bff;
  font-size: 1.8rem;
  margin: 0 0 5px 0;
  font-weight: 700;
}

.plan-price {
  color: #6c757d;
  font-size: 1.1rem;
  margin: 0 0 10px 0;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.trialing {
  background: #fff3cd;
  color: #856404;
}

.billing-details h2 {
  color: #28a745;
  font-size: 1.5rem;
  margin: 0 0 5px 0;
  font-weight: 700;
}

.billing-details p {
  color: #6c757d;
  margin: 0;
}

.usage-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.usage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.usage-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.usage-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.usage-item span:first-child {
  color: #6c757d;
  font-weight: 500;
  font-size: 0.95rem;
}

.usage-item span:last-child {
  color: #2c3e50;
  font-weight: 600;
  font-size: 1rem;
  padding: 6px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

/* Usage Tab */
.usage-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 30px;
}

.usage-chart {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
}

.usage-chart h3 {
  color: #2c3e50;
  font-size: 1.2rem;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.progress-container {
  margin-bottom: 15px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-fill.ai-tokens {
  background: linear-gradient(90deg, #007bff, #0056b3);
}

.progress-fill.deepgram {
  background: linear-gradient(90deg, #28a745, #1e7e34);
}

.progress-text {
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 500;
}

.sessions-count {
  text-align: center;
  padding: 20px;
}

.sessions-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: #007bff;
  margin-bottom: 5px;
}

.sessions-label {
  color: #6c757d;
  font-size: 1rem;
}

.usage-reset-info {
  background: #e3f2fd;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-left: 4px solid #2196f3;
}

.usage-reset-info svg {
  color: #2196f3;
  font-size: 1.2rem;
}

.usage-reset-info p {
  color: #1976d2;
  margin: 0;
  font-weight: 500;
}

/* Billing Tab */
.billing-overview {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
  gap: 30px;
}

.current-subscription {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
}

.current-subscription h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.subscription-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e9ecef;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row span:first-child {
  color: #6c757d;
  font-weight: 500;
}

.detail-row span:last-child {
  color: #2c3e50;
  font-weight: 600;
}

.status.active {
  color: #28a745;
}

.status.free {
  color: #6c757d;
}

.billing-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.action-button.primary {
  background: #007bff;
  color: white;
}

.action-button.primary:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.action-button.secondary {
  background: #6c757d;
  color: white;
}

.action-button.secondary:hover {
  background: #545b62;
}

.action-button.danger {
  background: #dc3545;
  color: white;
  margin-top: 10px;
}

.action-button.danger:hover {
  background: #c82333;
}

.action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.free-user-message {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}

.free-user-message .upgrade-prompt h4 {
  color: #495057;
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.free-user-message p {
  color: #6c757d;
  margin: 0 0 15px 0;
  font-size: 1rem;
}

.free-user-message .action-button {
  text-decoration: none;
}



/* History Tab */
.payment-history h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin: 0 0 25px 0;
  font-weight: 600;
}

.history-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  padding: 15px 20px;
  background: white;
  align-items: center;
}

.table-header {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.table-row span {
  color: #6c757d;
}

.status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.status.succeeded {
  color: #28a745;
}

.status.refunded {
  color: #ff6b6b;
  font-weight: 600;
}

.no-history {
  text-align: center;
  padding: 40px;
  color: #6c757d;
}

/* Settings Tab */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
}

.settings-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.subscription-setting-item {
  margin-bottom: 15px;
}

.subscription-setting-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2c3e50;
  font-weight: 500;
  cursor: pointer;
}

.subscription-setting-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #007bff;
}

.danger-zone {
  border-left: 4px solid #dc3545;
}

.danger-zone h3 {
  color: #dc3545;
}

.danger-button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.danger-button:hover {
  background: #c82333;
  transform: translateY(-2px);
}

.danger-zone p {
  color: #6c757d;
  margin: 0;
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .subscription-dashboard {
    padding: 15px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .dashboard-header h1 {
    font-size: 1.5rem;
  }

  .dashboard-tabs {
    flex-direction: column;
  }

  .tab {
    justify-content: flex-start;
  }

  .overview-cards {
    grid-template-columns: 1fr;
  }

  .usage-charts {
    grid-template-columns: 1fr;
  }

  .billing-overview {
    grid-template-columns: 1fr;
  }

  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .table-header span,
  .table-row span {
    padding: 5px 0;
  }

  .table-header span:before,
  .table-row span:before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: #2c3e50;
  }


}

@media (max-width: 480px) {
  .dashboard-content {
    padding: 20px 15px;
  }

  .overview-card,
  .usage-chart,
  .current-subscription,
  .settings-section {
    padding: 20px 15px;
  }

  .sessions-number {
    font-size: 2rem;
  }

  .action-button {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
}

/* Success Notification for Cancellation */
.cancellation-success-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease-out;
}

.cancellation-success-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #28a745;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 500px;
}

.notification-icon {
  font-size: 1.5rem;
  font-weight: bold;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .cancellation-success-notification {
    top: 10px;
    right: 10px;
    left: 10px;
  }

  .notification-content {
    min-width: auto;
    max-width: none;
  }
}

/* Add invoice download button styles */
.download-invoice-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.download-invoice-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.download-invoice-btn:active {
  transform: translateY(0);
} 
.user-context-manager {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border-radius: 12px;
  padding: 24px;
  color: #333333;
  color: var(--text-color-primary, #333333);
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--card-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.user-context-manager.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dadce0;
  border-bottom: 1px solid var(--border-color, #dadce0);
}

.modal-header h2 {
  margin: 0;
  color: #4285f4;
  color: var(--primary-color, #4285f4);
  font-size: 1.5rem;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: #e8eaed;
  background: var(--bg-color-hover, #e8eaed);
  color: #ea4335;
  color: var(--error-color, #ea4335);
}

/* Tabs */
.context-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid #dadce0;
  border-bottom: 1px solid var(--border-color, #dadce0);
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  border-radius: 8px 8px 0 0;
  padding: 4px;
}

.context-tabs .tab {
  background: transparent;
  border: none;
  padding: 12px 20px;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.context-tabs .tab:hover {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  color: #333333;
  color: var(--text-color-primary, #333333);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.context-tabs .tab.active {
  background: #4285f4;
  background: var(--primary-color, #4285f4);
  color: white;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.context-tabs .tab .badge {
  background: #ff9800;
  background: var(--accent-color, #ff9800);
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}

/* Content Areas */
.manual-context,
.auto-detected {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.context-intro {
  background: #f1f3f4;
  background: var(--bg-color-tertiary, #f1f3f4);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.context-intro svg {
  color: #4285f4;
  color: var(--info-color, #4285f4);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.context-intro p {
  margin: 0;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Form Styling */
.context-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-size: 0.95rem;
}

.form-group label svg {
  color: #4285f4;
  color: var(--primary-color, #4285f4);
  font-size: 1rem;
}

.form-group select,
.form-group textarea {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border: 2px solid #dadce0;
  border: 2px solid var(--border-color, #dadce0);
  border-radius: 8px;
  padding: 12px;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  resize: vertical;
}

.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4285f4;
  border-color: var(--primary-color, #4285f4);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.form-group select:hover,
.form-group textarea:hover {
  border-color: #4285f4;
  border-color: var(--primary-color, #4285f4);
}

.form-group textarea {
  min-height: 80px;
  line-height: 1.5;
}

.form-group.error select,
.form-group.error textarea {
  border-color: #ea4335;
  border-color: var(--error-color, #ea4335);
}

.field-help {
  font-size: 0.8rem;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  margin-top: 4px;
  line-height: 1.4;
}

.error-text {
  color: #ea4335;
  color: var(--error-color, #ea4335);
  font-size: 0.8rem;
  margin-top: 4px;
  font-weight: 500;
}

/* Status Messages */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  font-size: 1rem;
}

.error-message {
  background: rgba(234, 67, 53, 0.1);
  border: 1px solid #ea4335;
  border: 1px solid var(--error-color, #ea4335);
  color: #ea4335;
  color: var(--error-color, #ea4335);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.success-message {
  background: rgba(52, 168, 83, 0.1);
  border: 1px solid #34a853;
  border: 1px solid var(--success-color, #34a853);
  color: #34a853;
  color: var(--success-color, #34a853);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #dadce0;
  border-top: 1px solid var(--border-color, #dadce0);
  flex-wrap: wrap;
  align-items: center;
}

.save-button,
.clear-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-button {
  background: #4285f4;
  background: var(--primary-color, #4285f4);
  color: white;
}

.save-button:hover:not(:disabled) {
  background: #3367d6;
  background: var(--primary-color-dark, #3367d6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.save-button:disabled {
  background: #9e9e9e;
  background: var(--disabled-color, #9e9e9e);
  cursor: not-allowed;
  transform: none;
}

.clear-button {
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  color: #ea4335;
  color: var(--error-color, #ea4335);
  border: 2px solid #ea4335;
  border: 2px solid var(--error-color, #ea4335);
}

.clear-button:hover:not(:disabled) {
  background: #ea4335;
  background: var(--error-color, #ea4335);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
}

/* Confirmation Dialog */
.confirmation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.confirmation-content {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.confirmation-content h3 {
  margin: 0 0 12px 0;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-size: 1.2rem;
  font-weight: 600;
}

.confirmation-content p {
  margin: 0 0 20px 0;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
}

.confirmation-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-yes,
.confirm-no {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-yes {
  background: #ea4335;
  background: var(--error-color, #ea4335);
  color: white;
}

.confirm-yes:hover {
  background: #d73527;
  transform: translateY(-1px);
}

.confirm-no {
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  color: #333333;
  color: var(--text-color-primary, #333333);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.confirm-no:hover {
  background: #e8eaed;
  background: var(--bg-color-hover, #e8eaed);
}

/* Auto-detected items */
.auto-detected-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auto-category {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
  border-radius: 8px;
  padding: 16px;
}

.auto-category h4 {
  margin: 0 0 12px 0;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-category h4 svg {
  color: #4285f4;
  color: var(--primary-color, #4285f4);
}

.auto-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f1f3f4;
  background: var(--bg-color-tertiary, #f1f3f4);
  border-radius: 6px;
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.auto-item-info {
  flex: 1 1;
}

.auto-item-value {
  font-weight: 500;
  color: #333333;
  color: var(--text-color-primary, #333333);
  margin-bottom: 2px;
}

.auto-item-context {
  font-size: 0.8rem;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  line-height: 1.3;
}

.auto-item-actions {
  display: flex;
  gap: 8px;
}

.promote-btn,
.remove-btn {
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.promote-btn {
  background: #34a853;
  background: var(--success-color, #34a853);
  color: white;
}

.promote-btn:hover {
  background: #2e8b57;
  transform: translateY(-1px);
}

.remove-btn {
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  color: #ea4335;
  color: var(--error-color, #ea4335);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.remove-btn:hover {
  background: rgba(234, 67, 53, 0.1);
  border-color: #ea4335;
  border-color: var(--error-color, #ea4335);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px;
  color: #666666;
  color: var(--text-color-secondary, #666666);
}

.empty-state svg {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .user-context-manager {
    margin: 16px;
    padding: 20px;
    border-radius: 8px;
  }
  
  .context-tabs {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  
  .context-tabs .tab {
    border-radius: 0;
    justify-content: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .save-button,
  .clear-button {
    width: 100%;
    justify-content: center;
  }
  
  .auto-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .auto-item-actions {
    align-self: flex-end;
  }
}

/* Dark mode support */
.dark-mode .user-context-manager {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .context-tabs {
  background: var(--bg-color-secondary);
}

.dark-mode .form-group select,
.dark-mode .form-group textarea {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .auto-item {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
} 
.cancellation-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cancellation-dialog {
  background: #ffffff;
  background: var(--bg-color-primary, #ffffff);
  border-radius: 12px;
  max-width: 550px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  color: var(--text-color-primary, #333);
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  color: var(--text-color-secondary, #666);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-button:hover:not(:disabled) {
  background: #f5f5f5;
  background: var(--bg-color-secondary, #f5f5f5);
  color: #333;
  color: var(--text-color-primary, #333);
}

.close-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dialog-content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.warning-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  margin-bottom: 20px;
}

.warning-icon {
  font-size: 1.5rem;
  color: #856404;
  flex-shrink: 0;
}

.warning-section p {
  margin: 0;
  color: #856404;
  font-weight: 500;
}

.info-section {
  margin-bottom: 24px;
}

.info-section h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #333;
  color: var(--text-color-primary, #333);
}

.info-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-section li {
  padding: 8px 0;
  color: #666;
  color: var(--text-color-secondary, #666);
  line-height: 1.5;
}

.feedback-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-section label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: #333;
  color: var(--text-color-primary, #333);
  font-weight: 500;
}

.feedback-section select,
.feedback-section textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  background: var(--bg-color-primary, #fff);
  color: #333;
  color: var(--text-color-primary, #333);
  transition: border-color 0.2s;
}

.feedback-section select:focus,
.feedback-section textarea:focus {
  outline: none;
  border-color: #007bff;
  border-color: var(--accent-color, #007bff);
}

.feedback-section select:disabled,
.feedback-section textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f5f5;
  background: var(--bg-color-secondary, #f5f5f5);
}

.feedback-section textarea {
  resize: vertical;
  min-height: 80px;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--border-color, #e0e0e0);
}

.dialog-actions button {
  flex: 1 1;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.cancel-button {
  background: #f5f5f5;
  background: var(--bg-color-secondary, #f5f5f5);
  color: #333;
  color: var(--text-color-primary, #333);
}

.cancel-button:hover:not(:disabled) {
  background: #e0e0e0;
  background: var(--bg-color-tertiary, #e0e0e0);
}

.confirm-button.danger {
  background: #dc3545;
  color: white;
}

.confirm-button.danger:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.dialog-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .cancellation-dialog {
    background: #1a1a1a;
    background: var(--bg-color-primary, #1a1a1a);
  }

  .dialog-header h2 {
    color: #e0e0e0;
    color: var(--text-color-primary, #e0e0e0);
  }

  .warning-section {
    background: #3d3520;
    border-color: #6c5a28;
  }

  .warning-section p {
    color: #ffc107;
  }

  .warning-icon {
    color: #ffc107;
  }

  .feedback-section select,
  .feedback-section textarea {
    background: #2a2a2a;
    background: var(--bg-color-secondary, #2a2a2a);
    color: #e0e0e0;
    color: var(--text-color-primary, #e0e0e0);
    border-color: #444;
    border-color: var(--border-color, #444);
  }

  .cancel-button {
    background: #2a2a2a;
    background: var(--bg-color-secondary, #2a2a2a);
    color: #e0e0e0;
    color: var(--text-color-primary, #e0e0e0);
  }

  .cancel-button:hover:not(:disabled) {
    background: #333;
    background: var(--bg-color-tertiary, #333);
  }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .cancellation-dialog-overlay {
    padding: 10px;
  }

  .dialog-header {
    padding: 20px 16px 12px;
  }

  .dialog-header h2 {
    font-size: 1.25rem;
  }

  .dialog-content {
    padding: 16px;
  }

  .dialog-actions {
    flex-direction: column-reverse;
    padding: 12px 16px 16px;
  }

  .dialog-actions button {
    width: 100%;
  }
}


.subscription-manager {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.subscription-manager.loading,
.subscription-manager.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  font-size: 1.2rem;
  min-height: 300px;
}

.subscription-manager.error {
  color: #dc3545;
}

.subscription-manager.error button {
  padding: 0.75rem 1.5rem;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}

.subscription-manager.error button:hover {
  background: #c82333;
}

/* Header */
.subscription-header {
  text-align: center;
  margin-bottom: 3rem;
}

.header-top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.back-button {
  background: #f8f9fa;
  color: #6c757d;
  border: 1px solid #e9ecef;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.back-button:hover {
  background: #e9ecef;
  color: #495057;
  transform: translateX(-2px);
}

.subscription-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #2c3e50;
}

.subscription-header p {
  font-size: 1.1rem;
  color: #6c757d;
  margin: 0 0 1.5rem 0;
}

/* View Switcher */
.view-switcher {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 1.5rem;
}

.view-button {
  background: white;
  color: #6c757d;
  border: 2px solid #e9ecef;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.view-button:hover {
  border-color: #007bff;
  color: #007bff;
  transform: translateY(-2px);
}

.view-button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.plans-view {
  /* Container for the plans content */
}

/* Current Plan Section */
.current-plan {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.current-plan h3 {
  margin: 0 0 1.5rem 0;
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 600;
}

.plan-info {
  margin-bottom: 2rem;
}

.plan-details h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
}

.plan-status {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: #6c757d;
}

.plan-status .status {
  font-weight: 600;
  text-transform: capitalize;
}

.plan-status .status.active {
  color: #28a745;
}

.plan-status .status.past_due {
  color: #dc3545;
}

.plan-status .status.canceled {
  color: #6c757d;
}

.billing-cycle {
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
  color: #6c757d;
}

/* Usage Stats */
.usage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.stat {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.stat .label {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

.stat .value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-fill.deepgram {
  background: linear-gradient(90deg, #28a745, #1e7e34);
}

/* Plan Comparison */
.plan-comparison {
  margin-bottom: 3rem;
}

.plan-comparison h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem 0;
  color: #2c3e50;
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

/* Plan Cards */
.plan-card {
  background: white;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  overflow: hidden;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.plan-card.current {
  border-color: #28a745;
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);
}

.plan-card.pro {
  border-color: #007bff;
}

.plan-card.pro:hover {
  border-color: #0056b3;
}

.plan-card.plus {
  border-color: #ffd700;
  position: relative;
}

.plan-card.plus:hover {
  border-color: #ffed4a;
}

.plan-card.plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #ffed4a);
}

/* Plan Header */
.plan-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.plan-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.plan-icon.free {
  color: #28a745;
}

.plan-icon.pro {
  color: #007bff;
}

.plan-icon.plus {
  color: #ffd700;
}

.plan-header h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
}

.plan-header .price {
  font-size: 2rem;
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 1rem;
}

/* Features List */
.features-list {
  list-style: none;
  padding: 0 2rem;
  margin: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #495057;
  font-size: 0.95rem;
}

.features-list li svg {
  font-size: 1rem;
  flex-shrink: 0;
}

.features-list li svg[data-icon="check"] {
  color: #28a745;
}

.features-list li svg[data-icon="times"] {
  color: #dc3545;
  opacity: 0.6;
}

/* Plan Action */
.plan-action {
  padding: 1.5rem 2rem 2rem;
}

.plan-button {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
}

.plan-button.upgrade {
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
}

.plan-button.upgrade:hover:not(:disabled) {
  background: linear-gradient(45deg, #0056b3, #004085);
  transform: translateY(-2px);
}

.plan-button.downgrade {
  background: linear-gradient(45deg, #6c757d, #5a6268);
  color: white;
}

.plan-button.downgrade:hover:not(:disabled) {
  background: linear-gradient(45deg, #5a6268, #495057);
  transform: translateY(-2px);
}

.plan-button.current {
  background: #28a745;
  color: white;
  cursor: default;
}

.plan-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Subscription Actions */
.subscription-actions {
  text-align: center;
  margin-top: 3rem;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.secondary-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #007bff;
  text-decoration: none;
  border: 2px solid #007bff;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.secondary-button:hover {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
}

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

  .subscription-header h2 {
    font-size: 2rem;
  }

  .current-plan {
    padding: 1.5rem;
  }

  .usage-stats {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plan-comparison h3 {
    font-size: 1.5rem;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .secondary-button {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .subscription-header h2 {
    font-size: 1.75rem;
  }

  .plan-header {
    padding: 1.5rem 1.5rem 1rem;
  }

  .features-list {
    padding: 0 1.5rem;
  }

  .plan-action {
    padding: 1rem 1.5rem 1.5rem;
  }

  .plan-header .price {
    font-size: 1.5rem;
  }
}

/* Spinner animation defined in main.css */ 
.public-navbar {
  background-color: var(--card-background);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 700;
  font-size: 1.5rem;
}

.navbar-logo img {
  height: 32px;
  width: 32px;
}

.navbar-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navbar-links li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.2s;
}

.navbar-links li a:hover,
.navbar-links li a.active {
  color: var(--primary-color);
}

.nav-login-btn {
  margin-left: 1rem;
}

.nav-signup-btn {
  background-color: var(--primary-color);
  color: white !important;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.nav-signup-btn:hover {
  background-color: var(--primary-hover);
}

.mobile-menu-icon {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
}

@media (max-width: 768px) {
  .mobile-menu-icon {
    display: block;
  }

  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--card-background);
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
  }

  .navbar-links.active {
    display: flex;
  }

  .nav-login-btn {
    margin-left: 0;
  }
}


/* Pricing Page Styles */
.pricing-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
}

/* Navigation */
.pricing-navigation {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
}

.home-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.home-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.home-button svg {
  font-size: 1rem;
}

/* Scoobs mascot integration */
.pricing-scoobs-mascot {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 80px;
  height: 80px;
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
  z-index: 10;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.pricing-scoobs-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.pricing-scoobs-welcome img {
  width: 60px;
  height: 60px;
  animation: bounce 2s ease-in-out infinite;
}

.pricing-scoobs-welcome .scoobs-message {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.pricing-page.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.pricing-page.loading .spinner {
  font-size: 2rem;
  margin-bottom: 1rem;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

/* Header Section */
.pricing-header {
  text-align: center;
  margin-bottom: 4rem;
  color: white;
}

.pricing-header h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pricing-subtitle {
  font-size: 1.25rem;
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  color: white;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-message {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  color: #fff;
  font-weight: 500;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Current Plan Info */
.pricing-current-plan-info {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 600px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.current-plan-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.current-plan-badge .plan-icon {
  color: rgb(0, 0, 0);
  font-size: 1.5rem;
}

.usage-summary {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}

.pricing-usage-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pricing-usage-item svg {
  font-size: 1.1rem;
  opacity: 0.9;
}

.pricing-usage-item span {
  font-weight: 500;
}

/* Pricing Plans Grid */
.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Pricing Cards */
.pricing-card {
  background: white;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.pricing-card.current {
  border-color: #28a745;
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2);
}

.pricing-card.pro {
  border-color: #007bff;
  background: linear-gradient(135deg, #4285f4 0%, #667eea 100%);
  color: white;
}

.pricing-card.pro:hover {
  box-shadow: 0 30px 60px rgba(66, 133, 244, 0.3);
}

.pricing-card.plus {
  border-color: #ffd700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
}

.pricing-card.plus:hover {
  box-shadow: 0 30px 60px rgba(118, 75, 162, 0.3);
}

/* Plan Badges */
.plan-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-badge.popular {
  background: orange;
  color: white;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.plan-badge.premium {
  background: linear-gradient(45deg, #ffd700, #ffed4a);
  color: #333;
  font-weight: 700;
}

/* Plan Header */
.plan-header {
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
  position: relative;
}

.plan-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.plan-icon.free {
  color: #28a745;
}

.plan-icon.pro {
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.plan-icon.plus {
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.plan-name {
  color: white;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.plan-price {
  margin-bottom: 1rem;
}

.price-amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

/* Better contrast for price amounts */
.pricing-card:not(.pro):not(.plus) .price-amount {
  color: #2d3748;
  background: rgba(66, 133, 244, 0.1);
}

.pricing-card.pro .price-amount,
.pricing-card.plus .price-amount {
  color: white;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.price-period {
  font-size: 1rem;
  font-weight: 500;
  display: block;
}

.pricing-card:not(.pro):not(.plus) .price-period {
  color: #4a5568;
  opacity: 0.8;
}

.pricing-card.pro .price-period,
.pricing-card.plus .price-period {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-description {
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
}

/* Better contrast for plan descriptions */
.pricing-card:not(.pro):not(.plus) .plan-description {
  color: #4a5568;
}

.pricing-card.pro .plan-description,
.pricing-card.plus .plan-description {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Plan Features */
.plan-features {
  padding: 0 2rem;
}

.feature-group {
  margin-bottom: 2rem;
}

.feature-group h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Better contrast for feature group headers */
.pricing-card:not(.pro):not(.plus) .feature-group h4 {
  color: #2d3748;
}

.pricing-card.pro .feature-group h4,
.pricing-card.plus .feature-group h4 {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
}

/* Better contrast for features */
.pricing-card:not(.pro):not(.plus) .feature {
  color: #4a5568;
}

.pricing-card.pro .feature,
.pricing-card.plus .feature {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.feature-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.feature-icon.enabled {
  color: #28a745;
}

.feature-icon.disabled {
  color: #dc3545;
  opacity: 0.7;
}

.pricing-card.pro .feature-icon.enabled,
.pricing-card.plus .feature-icon.enabled {
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.pricing-card.pro .feature-icon.disabled,
.pricing-card.plus .feature-icon.disabled {
  color: rgba(255, 255, 255, 0.6);
}

/* Plan Action */
.plan-action {
  padding: 1.5rem 2rem 2.5rem;
}

.plan-button {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-button.upgrade {
  background: linear-gradient(45deg, #4285f4, #667eea);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-button.upgrade:hover:not(:disabled) {
  background: linear-gradient(45deg, #3b82f6, #5a67d8);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(66, 133, 244, 0.3);
}

.plan-button.current {
  background: #28a745;
  color: white;
  cursor: default;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-button.downgrade {
  background: #f59e0b;
  color: white;
  border: 2px solid #f59e0b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.plan-button.downgrade:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.plan-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.pricing-card.pro .plan-button.upgrade {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-card.pro .plan-button.upgrade:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.pricing-card.plus .plan-button.upgrade {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-card.plus .plan-button.upgrade:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Footer Section */
.pricing-footer {
  max-width: 1200px;
  margin: 6rem auto 2rem;
  padding: 0 1rem;
  color: white;
}

.pricing-faq {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.pricing-faq h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem 0;
  text-align: center;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  padding: 1rem 2rem;
  display: inline-block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.faq-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.faq-item p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 8px;
  font-weight: 400;
}

.pricing-support {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.pricing-support h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  padding: 0.75rem 1.5rem;
}

.pricing-support p {
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 1rem;
  font-weight: 400;
}

.support-link {
  display: inline-block;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.support-link:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

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

  .pricing-navigation {
    top: 1rem;
    left: 1rem;
  }
  
  .home-button span {
    display: none;
  }
  
  .home-button {
    padding: 0.75rem;
    border-radius: 50%;
  }

  .pricing-scoobs-mascot {
    width: 60px;
    height: 60px;
    top: 1rem;
    right: 1rem;
  }

  .pricing-scoobs-welcome {
    flex-direction: column;
    text-align: center;
  }

  .pricing-scoobs-welcome img {
    width: 50px;
    height: 50px;
  }

  .pricing-scoobs-welcome .scoobs-message {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  .pricing-header h1 {
    font-size: 2.5rem;
  }

  .pricing-subtitle {
    font-size: 1.1rem;
  }

  .pricing-plans {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .current-plan-info {
    padding: 1.5rem;
  }

  .usage-summary {
    flex-direction: column;
    gap: 1rem;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .pricing-faq,
  .pricing-support {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .pricing-header h1 {
    font-size: 2rem;
  }

  .pricing-card {
    margin: 0 0.5rem;
  }

  .plan-header {
    padding: 2rem 1.5rem 1rem;
  }

  .plan-features,
  .plan-action {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .price-amount {
    font-size: 2.5rem;
  }
}

/* Spinner animation defined in main.css */

/* No plans state */
.pricing-no-plans {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.pricing-no-plans p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.pricing-no-plans .retry-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pricing-no-plans .retry-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
} 
.checkout-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-page.loading,
.checkout-page.error {
  align-items: center;
  justify-content: center;
}

.loading-content,
.error-content {
  text-align: center;
  background: white;
  padding: 3rem 2rem;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
}

.loading-content .spinner,
.error-content .error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.loading-content .spinner {
  color: #007bff;
  animation: spin 1s linear infinite;
}

.error-content .error-icon {
  color: #dc3545;
}

.error-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.retry-button,
.cancel-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.retry-button {
  background: #007bff;
  color: white;
}

.retry-button:hover {
  background: #0056b3;
}

.cancel-button {
  background: #6c757d;
  color: white;
}

.cancel-button:hover {
  background: #545b62;
}

.checkout-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 100%;
  overflow: hidden;
}

.checkout-header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 2rem;
  position: relative;
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.checkout-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.checkout-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  padding: 2rem;
}

.plan-summary {
  display: flex;
  flex-direction: column;
}

.plan-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #e9ecef;
  position: relative;
}

.plan-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.plan-card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.plan-price .price {
  font-size: 2.5rem;
  font-weight: 800;
  color: #007bff;
}

.plan-price .period {
  font-size: 1rem;
  color: #6c757d;
}

.plan-benefits {
  text-align: left;
  margin-bottom: 2rem;
}

.plan-benefits h4 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.plan-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-benefits li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.plan-benefits li svg {
  color: #28a745;
  flex-shrink: 0;
}

.current-plan-info {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.current-plan-info p {
  margin: 0;
  color: #1565c0;
  font-size: 0.9rem;
}

.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
}

.checkout-button {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.checkout-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.security-notice {
  text-align: center;
}

.security-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.security-badges .badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #495057;
}

.security-badges .badge svg {
  color: #28a745;
}

.security-notice p {
  font-size: 0.9rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
}

.checkout-footer {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 2rem;
}

.subscription-info {
  text-align: center;
}

.subscription-info h4 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.subscription-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: left;
}

.subscription-info li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .checkout-page {
    padding: 1rem;
  }
  
  .checkout-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .checkout-header {
    padding: 1.5rem;
  }
  
  .checkout-header h1 {
    font-size: 1.5rem;
  }
  
  .plan-card {
    padding: 1.5rem;
  }
  
  .security-badges {
    flex-direction: column;
    align-items: center;
  }
  
  .checkout-footer {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .plan-price .price {
    font-size: 2rem;
  }
  
  .checkout-button {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
  }
}

/* Animations - spin and fadeIn defined in main.css */
.checkout-container {
  animation: fadeIn 0.5s ease-out;
} 
.payment-success-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.payment-success-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.payment-success-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #007bff, #28a745);
}

.payment-success-card.error::before {
  background: linear-gradient(90deg, #dc3545, #fd7e14);
}

/* Success State */
.success-content .success-icon {
  font-size: 4rem;
  color: #28a745;
  margin-bottom: 20px;
  animation: successPulse 2s ease-in-out;
}

@keyframes successPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.success-content h2 {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.success-content p {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* Verification State */
.verification-content .spinner.large {
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 20px;
}

.verification-content h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.verification-content p {
  color: #6c757d;
  margin-bottom: 30px;
}

/* Spin animation defined in main.css */

/* Verification Steps */
.verification-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 30px 0;
  text-align: left;
}

.step {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.step.completed {
  background: #d4edda;
  border-left: 4px solid #28a745;
}

.step.active {
  background: #cce7ff;
  border-left: 4px solid #007bff;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.step.completed .step-icon {
  background: #28a745;
  color: white;
}

.step.active .step-icon {
  background: #007bff;
  color: white;
}

.step:not(.completed):not(.active) .step-icon {
  background: #e9ecef;
  color: #6c757d;
}

.spinner.small {
  animation: spin 1s linear infinite;
}

/* Error State */
.error-content .error-icon {
  font-size: 3rem;
  color: #dc3545;
  margin-bottom: 20px;
}

.error-content h2 {
  color: #dc3545;
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.error-message {
  color: #6c757d;
  margin-bottom: 30px;
  padding: 15px;
  background: #f8d7da;
  border-radius: 8px;
  border-left: 4px solid #dc3545;
}

.error-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Subscription Details */
.subscription-details {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
  margin: 30px 0;
  text-align: left;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e9ecef;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item.trial {
  background: #fff3cd;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
  margin-top: 15px;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.detail-item strong {
  color: #2c3e50;
  font-weight: 600;
}

/* Next Steps */
.next-steps {
  background: #e8f5e8;
  border-radius: 12px;
  padding: 25px;
  margin: 30px 0;
  text-align: left;
}

.next-steps h3 {
  color: #28a745;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.next-steps ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.next-steps li {
  padding: 8px 0;
  color: #2c3e50;
  font-weight: 500;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.primary-button {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}

.secondary-button {
  background: white;
  color: #007bff;
  border: 2px solid #007bff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

.secondary-button:hover {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
}

/* Session Info - Only for Payment Success Page */
.payment-success-container .session-info {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.payment-success-container .session-info p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #6c757d;
}

.payment-success-container .session-info strong {
  color: #2c3e50;
}

.payment-success-container .session-info small {
  font-style: italic;
  color: #868e96;
}

/* Responsive Design */
@media (max-width: 768px) {
  .payment-success-container {
    padding: 15px;
  }

  .payment-success-card {
    padding: 30px 20px;
  }

  .success-content h2,
  .verification-content h2,
  .error-content h2 {
    font-size: 1.5rem;
  }

  .success-content .success-icon,
  .verification-content .spinner.large,
  .error-content .error-icon {
    font-size: 2.5rem;
  }

  .action-buttons,
  .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
    max-width: 280px;
  }

  .verification-steps {
    text-align: center;
  }

  .step {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .payment-success-card {
    padding: 25px 15px;
  }

  .subscription-details,
  .next-steps {
    padding: 20px 15px;
  }

  .payment-success-container .session-info {
    padding: 15px;
  }

  .payment-success-container .session-info p {
    font-size: 0.8rem;
    word-break: break-all;
  }
} 
.payment-cancel-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  padding: 20px;
}

.payment-cancel-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  width: 100%;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.payment-cancel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ee5a24);
}

/* Cancel State */
.cancel-content .cancel-icon {
  font-size: 4rem;
  color: #ff6b6b;
  margin-bottom: 20px;
  animation: cancelPulse 2s ease-in-out;
}

@keyframes cancelPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.cancel-content h2 {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.cancel-content > p {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* Cancel Details */
.cancel-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  margin: 30px 0;
  text-align: left;
}

.detail-section,
.help-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 25px;
}

.detail-section {
  border-left: 4px solid #28a745;
}

.help-section {
  border-left: 4px solid #ffc107;
}

.detail-section h3,
.help-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.detail-section h3 {
  color: #28a745;
}

.help-section h3 {
  color: #f39c12;
}

.detail-section ul,
.help-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-section li,
.help-section li {
  padding: 8px 0;
  color: #2c3e50;
  font-weight: 500;
}

.help-section p {
  color: #6c757d;
  margin-bottom: 15px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.primary-button {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}

.secondary-button {
  background: white;
  color: #6c757d;
  border: 2px solid #6c757d;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

.secondary-button:hover {
  background: #6c757d;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2);
}

.support-button {
  background: white;
  color: #ffc107;
  border: 2px solid #ffc107;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: center;
}

.support-button:hover {
  background: #ffc107;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}

/* Auto Redirect */
.auto-redirect {
  background: #e3f2fd;
  border-radius: 12px;
  padding: 20px;
  margin: 30px 0;
  border-left: 4px solid #2196f3;
}

.auto-redirect p {
  color: #1976d2;
  margin: 0 0 15px 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.redirect-icon {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
  40% { transform: translateX(-5px); }
  60% { transform: translateX(-3px); }
}

.redirect-now-button {
  background: #2196f3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.redirect-now-button:hover {
  background: #1976d2;
  transform: translateY(-1px);
}

/* Session Info - Only for Payment Cancel Page */
.payment-cancel-container .session-info {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.payment-cancel-container .session-info p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #6c757d;
}

.payment-cancel-container .session-info strong {
  color: #2c3e50;
}

.payment-cancel-container .session-info small {
  font-style: italic;
  color: #868e96;
}

/* Responsive Design */
@media (max-width: 768px) {
  .payment-cancel-container {
    padding: 15px;
  }

  .payment-cancel-card {
    padding: 30px 20px;
  }

  .cancel-content h2 {
    font-size: 1.5rem;
  }

  .cancel-content .cancel-icon {
    font-size: 2.5rem;
  }

  .cancel-details {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .primary-button,
  .secondary-button,
  .support-button {
    width: 100%;
    max-width: 280px;
  }

  .auto-redirect p {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .payment-cancel-card {
    padding: 25px 15px;
  }

  .detail-section,
  .help-section {
    padding: 20px 15px;
  }

  .auto-redirect {
    padding: 15px;
  }

  .payment-cancel-container .session-info {
    padding: 15px;
  }

  .payment-cancel-container .session-info p {
    font-size: 0.8rem;
    word-break: break-all;
  }
} 
.context-setup {
  max-width: 600px;
  margin: 0 auto;
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border-radius: 12px;
  padding: 32px;
  color: #333333;
  color: var(--text-color-primary, #333333);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: var(--card-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
}

.setup-header {
  text-align: center;
  margin-bottom: 32px;
}

.setup-header h2 {
  margin: 0 0 16px 0;
  color: #4285f4;
  color: var(--primary-color, #4285f4);
  font-size: 1.8rem;
  font-weight: 600;
}

.setup-intro {
  background: #f1f3f4;
  background: var(--bg-color-tertiary, #f1f3f4);
  border: 1px solid #dadce0;
  border: 1px solid var(--border-color, #dadce0);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}

.setup-intro svg {
  color: #4285f4;
  color: var(--info-color, #4285f4);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.setup-intro p {
  margin: 0;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
  font-size: 0.95rem;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-size: 0.95rem;
}

.form-group label svg {
  color: #4285f4;
  color: var(--primary-color, #4285f4);
  font-size: 1rem;
}

.form-group select,
.form-group textarea {
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  border: 2px solid #dadce0;
  border: 2px solid var(--border-color, #dadce0);
  border-radius: 8px;
  padding: 12px;
  color: #333333;
  color: var(--text-color-primary, #333333);
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  resize: vertical;
}

.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4285f4;
  border-color: var(--primary-color, #4285f4);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.form-group select:hover,
.form-group textarea:hover {
  border-color: #4285f4;
  border-color: var(--primary-color, #4285f4);
}

.form-group textarea {
  min-height: 60px;
}

.setup-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.save-btn,
.skip-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
  justify-content: center;
}

.save-btn {
  background: #4285f4;
  background: var(--primary-color, #4285f4);
  color: white;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
}

.save-btn:hover:not(:disabled) {
  background: #3367d6;
  background: var(--primary-color-dark, #3367d6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.save-btn:disabled {
  background: #9e9e9e;
  background: var(--disabled-color, #9e9e9e);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.skip-btn {
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  color: #666666;
  color: var(--text-color-secondary, #666666);
  border: 2px solid #dadce0;
  border: 2px solid var(--border-color, #dadce0);
}

.skip-btn:hover:not(:disabled) {
  background: #e8eaed;
  background: var(--bg-color-hover, #e8eaed);
  color: #333333;
  color: var(--text-color-primary, #333333);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Loading and success states */
.saving-state {
  opacity: 0.7;
  pointer-events: none;
}

.success-message {
  background: rgba(52, 168, 83, 0.1);
  border: 1px solid #34a853;
  border: 1px solid var(--success-color, #34a853);
  color: #34a853;
  color: var(--success-color, #34a853);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  justify-content: center;
}

.error-message {
  background: rgba(234, 67, 53, 0.1);
  border: 1px solid #ea4335;
  border: 1px solid var(--error-color, #ea4335);
  color: #ea4335;
  color: var(--error-color, #ea4335);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  justify-content: center;
}

/* Responsive design */
@media (max-width: 768px) {
  .context-setup {
    margin: 16px;
    padding: 24px;
    border-radius: 8px;
  }
  
  .setup-header h2 {
    font-size: 1.5rem;
  }
  
  .setup-actions {
    flex-direction: column;
  }
  
  .save-btn,
  .skip-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .context-setup {
    margin: 12px;
    padding: 20px;
  }
  
  .setup-header h2 {
    font-size: 1.3rem;
  }
  
  .setup-intro {
    padding: 12px;
  }
  
  .setup-intro p {
    font-size: 0.9rem;
  }
}

/* Dark mode support */
.dark-mode .context-setup {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .setup-intro {
  background: var(--bg-color-tertiary);
  border-color: var(--border-color);
}

.dark-mode .form-group select,
.dark-mode .form-group textarea {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color-primary);
}

.dark-mode .skip-btn {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
  color: var(--text-color-secondary);
}

.dark-mode .skip-btn:hover:not(:disabled) {
  background: var(--bg-color-hover);
  color: var(--text-color-primary);
} 
.user-context-page {
  min-height: 100vh;
  background: #ffffff;
  background: var(--bg-color, #ffffff);
  color: #333333;
  color: var(--text-color-primary, #333333);
  padding: 0;
  margin: 0;
}

.context-page-header {
  background: #f8f9fa;
  background: var(--bg-color-secondary, #f8f9fa);
  border-bottom: 1px solid #dadce0;
  border-bottom: 1px solid var(--border-color, #dadce0);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-navigation {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.home-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #4285f4;
  background: var(--primary-color, #4285f4);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
}

.home-button:hover {
  background: #3367d6;
  background: var(--primary-color-dark, #3367d6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.home-button:active {
  transform: translateY(0);
}

.page-title h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #333333;
  color: var(--text-color-primary, #333333);
  background: linear-gradient(135deg, #4285f4 0%, #ff9800 100%);
  background: linear-gradient(135deg, var(--primary-color, #4285f4) 0%, var(--accent-color, #ff9800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title p {
  font-size: 1.1rem;
  color: #666666;
  color: var(--text-color-secondary, #666666);
  margin: 0;
  line-height: 1.5;
}

.context-page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .context-page-header {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .header-navigation {
    flex-direction: column;
    gap: 8px;
  }
  
  .home-button {
    width: -webkit-fit-content;
    width: fit-content;
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  
  .page-title h1 {
    font-size: 1.6rem;
  }
  
  .page-title p {
    font-size: 1rem;
  }
  
  .context-page-content {
    padding: 0 16px 20px;
  }
}

@media (max-width: 480px) {
  .context-page-header {
    padding: 12px;
  }
  
  .page-title h1 {
    font-size: 1.4rem;
  }
  
  .page-title p {
    font-size: 0.9rem;
  }
  
  .context-page-content {
    padding: 0 12px 16px;
  }
}

/* Dark mode support */
.dark-mode .user-context-page {
  background: var(--bg-color);
  color: var(--text-color-primary);
}

.dark-mode .context-page-header {
  background: var(--bg-color-secondary);
  border-bottom-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode .home-button {
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.4);
}

.dark-mode .home-button:hover {
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.5);
}