/* Import premium reading fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700&family=Crimson+Text:wght@400;600;700&family=Roboto:wght@400;500;700&family=Lora:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ... (skipping unchanged content) ... */

[data-font="default"] .roguescribe-reader-body {
  font-family: 'Merriweather', 'Georgia', serif;
}

[data-font="dyslexic"] .roguescribe-reader-body {
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif !important; /* Fallback for dyslexic */
  letter-spacing: 0.5px;
  line-height: 2 !important;
}

[data-font="roboto"] .roguescribe-reader-body {
  font-family: 'Roboto', sans-serif;
}

[data-font="lora"] .roguescribe-reader-body {
  font-family: 'Lora', serif;
}

[data-font="georgia"] .roguescribe-reader-body {
  font-family: 'Georgia', serif;
}

/* Content script styles */
.roguescribe-highlight {
  background-color: rgba(99, 102, 241, 0.2);
  cursor: pointer;
}

/* Error Notification */
.roguescribe-error-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483646;
  max-width: 400px;
  animation: roguescribe-slide-in 0.3s ease-out;
}

@keyframes roguescribe-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes roguescribe-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.roguescribe-error-content {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 2px solid #ef4444;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.roguescribe-error-icon {
  flex-shrink: 0;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roguescribe-error-text {
  flex: 1;
  min-width: 0;
}

.roguescribe-error-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.roguescribe-error-message {
  font-size: 14px;
  color: #d4d4d4;
  line-height: 1.5;
}

.roguescribe-error-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roguescribe-error-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Global Body Lock - NUCLEAR OPTION */
/* When reader is active, disable ALL interaction with the underlying page */
body.roguescribe-active {
  pointer-events: none !important; /* Site cannot be clicked */
  overflow: hidden !important;     /* Site cannot be scrolled */
  /* touch-action: none !important;  - REMOVED: Breaks scrolling on overlay */
  user-select: none !important;    /* Selection disabled */
  -webkit-user-select: none !important;
}

/* Ensure our overlay is the ONLY thing clickable */
#roguescribe-reader-overlay {
  pointer-events: auto !important; /* Re-enable for us */
}

/* Reader Overlay */
.roguescribe-reader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Max z-index supported by most browsers */
  z-index: 2147483647; 
  display: flex;
  flex-direction: column;
  font-family: 'Merriweather', serif;
  /* Reset global styles that might bleed in */
  line-height: normal;
  text-align: left;
  box-sizing: border-box;
  opacity: 0;
  animation: roguescribe-fade-in 0.3s ease-out forwards;
  
  /* Default Theme Variables (Dark Mode) */
  --bg-backdrop: #000000;
  --bg-container: linear-gradient(to bottom, #0a0a0a 0%, #000000 100%);
  --text-primary: #d4d4d4;
  --text-secondary: #a3a3a3;
  --text-tertiary: #666666;
  --accent-color: #ef4444;
  --border-color: #333333;
  --scrollbar-track: #0a0a0a;
  --scrollbar-thumb: #333333;
  /* Block all pointer events to underlying page */
  pointer-events: auto;
  /* Force LTR to prevent flipping on RTL sites (Arabic, Hebrew, etc.) */
  direction: ltr;
  text-align: left;
  
  /* Ensure scrolling works */
  touch-action: pan-y;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  /* Enhanced isolation to prevent site popups from covering reader */
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* When reader is active, make the page body non-interactive */
/* When reader is active, hide everything else visually but keep layout */
body:has(.roguescribe-reader-overlay:not(.roguescribe-minimized)) {
  overflow: hidden !important;
}

body:has(.roguescribe-reader-overlay:not(.roguescribe-minimized)) > *:not(.roguescribe-reader-overlay):not(.roguescribe-restore-btn):not(.roguescribe-error-notification) {
  pointer-events: none !important;
  user-select: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease-out;
  /* Force all site content below reader */
  z-index: -1 !important;
  position: relative !important;
}

/* Ensure our overlay is always visible and on top */
.roguescribe-reader-overlay {
  visibility: visible !important;
  opacity: 1 !important;
  isolation: isolate;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 2147483647 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

@keyframes roguescribe-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.roguescribe-reader-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-backdrop);
  /* Ensure backdrop captures all events and blocks site popups */
  pointer-events: auto;
  cursor: default;
  /* Capture all events to prevent site popups */
  touch-action: none;
  user-select: none;
}

.roguescribe-reader-container {
  position: relative;
  width: 100%; /* FORCE FULL WIDTH up to max-width */
  max-width: 800px;
  height: 100%;
  margin: 0 auto;
  background: var(--bg-container);
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.3);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  animation: roguescribe-slide-up 0.3s ease-out;
}

@keyframes roguescribe-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Floating Controls - Replaces the Header */
/* Float Controls Removed - Replaced by Header */
/* .roguescribe-floating-controls { removed } */

.roguescribe-control-btn, 
.roguescribe-reader-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roguescribe-control-btn:hover,
.roguescribe-reader-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.roguescribe-reader-header {
  display: flex !important;
  justify-content: center; /* Center the inner content */
  align-items: center;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: 100%;
  max-width: 800px;
  height: 60px;
  padding: 0; /* Remove padding from outer container */
  padding-top: env(safe-area-inset-top);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  z-index: 2147483649;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* shadow to separate header from content */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.roguescribe-header-inner {
  width: 100%;
  max-width: 800px; /* Match reader container */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 100%;
}

.roguescribe-reader-header.roguescribe-header-hidden {
  transform: translateX(-50%) translateY(-100%);
}

.roguescribe-reader-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0; /* Prevent title from shrinking */
}

.roguescribe-logo-text {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif; /* Modern font */
  letter-spacing: -0.5px;
}

/* Logo styling - Rogue (text-primary) + Scribe (accent) */
.roguescribe-text-rogue {
  color: var(--text-primary);
}

.roguescribe-text-scribe {
  color: var(--accent-color);
}

.roguescribe-reader-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0; /* Prevent actions from shrinking */
}

.roguescribe-discord-link {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  opacity: 0.9;
}

.roguescribe-discord-link:hover {
  color: #5865F2;
  opacity: 1;
}

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

/* AI Toggle in Header */
.roguescribe-ai-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Increased gap */
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.roguescribe-ai-toggle-container:hover {
  background: rgba(239, 68, 68, 0.1);
}

.roguescribe-ai-label {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  letter-spacing: 0.5px;
}

.roguescribe-toggle-switch:has(input:checked) ~ .roguescribe-ai-label {
  color: var(--accent-color);
}

.roguescribe-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin: 0;
}

.roguescribe-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.roguescribe-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--text-tertiary); /* Better visibility in both modes */
  opacity: 0.3;
  transition: all 0.3s ease;
  border-radius: 22px;
}

.roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider {
  background: var(--accent-color);
  opacity: 1;
}

.roguescribe-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider {
  background: var(--accent-color);
}

.roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider:before {
  transform: translateX(18px);
}

.roguescribe-reader-logo svg {
  color: #ef4444;
}

.roguescribe-reader-close {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roguescribe-reader-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.1);
}

.roguescribe-reader-content {
  flex: 1;
  overflow-y: auto;
  padding: 100px 24px 64px; /* Matches header inner padding (24px) */
  color: var(--text-primary);
}

.roguescribe-reader-content::-webkit-scrollbar {
  width: 8px;
}

.roguescribe-reader-content::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.roguescribe-reader-content::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.roguescribe-reader-content::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}

.roguescribe-reader-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 16px 0;
  color: #ffffff;
  letter-spacing: -1px;
}

.roguescribe-reader-meta {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid #1a1a1a;
}

.roguescribe-reader-source {
  font-size: 13px;
  color: #666;
  font-style: italic;
}

.roguescribe-reader-body {
  font-size: var(--reader-font-size, 19px);
  line-height: 1.8;
  color: var(--text-primary);
  max-width: 100%; /* Fill container (minus padding) */
  /* Prevent mid-word line breaks */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.roguescribe-reader-body p {
  margin: 0 0 28px 0;
  text-align: left;
  text-indent: 0; /* Reset any inherited indentation */
  /* Ensure proper word wrapping within paragraphs */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* IMPORTANT: Use CSS variable for font size to make slider work */
  font-size: var(--reader-font-size, 19px);
}

/* Override site-specific indentation (e.g., laowang.vip) */
.roguescribe-reader-body p:first-line {
  text-indent: 0 !important;
}

.roguescribe-reader-body p:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .roguescribe-reader-container {
    max-width: 100%;
  }
  
  .roguescribe-reader-header {
    padding-top: calc(8px + env(safe-area-inset-top));
    flex-wrap: nowrap;
    overflow: hidden;
    /* On mobile, reset to space-between with padding if needed, 
       but container approach usually handles it. 
       Let's ensure the inner container accounts for mobile */
  }

  .roguescribe-header-inner {
    padding: 0 16px;
  }
  
  /* Hide theme button on mobile - it's in settings panel */
  #roguescribe-theme-btn {
    display: none !important;
  }
  
  /* Keep Discord icon visible on mobile */
  /* .roguescribe-discord-link { display: none !important; } */
  
  .roguescribe-reader-header-title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 6px;
    /* Allow shrinking but try to keep visible */
    flex-shrink: 1;
    min-width: 0;
  }
  
  /* Make logo text BIGGER on mobile now that we have space */
  .roguescribe-logo-text {
    font-size: 18px !important;
    font-weight: 700;
  }
  
  /* Hide "RogueScribe" text on mobile, keep only logo */
  .roguescribe-reader-header-title .roguescribe-logo {
    font-size: 14px;
  }
  
  .roguescribe-reader-header-actions {
    gap: 8px; /* Optimized gap for mobile */
    margin-left: auto; /* Push to right */
    flex-shrink: 0;
  }
  
  /* Smaller Discord icon on mobile */
  .roguescribe-discord-link svg {
    width: 18px;
    height: 18px;
  }
  
  .roguescribe-ai-toggle-container {
    padding: 2px 6px;
    gap: 4px;
  }
  
  .roguescribe-ai-label {
    font-size: 10px;
  }
  
  /* Smaller toggle switch on mobile */
  .roguescribe-toggle-switch {
    width: 32px;
    height: 18px;
  }
  
  .roguescribe-toggle-slider:before {
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
  }
  
  .roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider:before {
    transform: translateX(14px);
  }
  
  /* Smaller control buttons */
  .roguescribe-control-btn {
    padding: 6px;
  }
  
  .roguescribe-control-btn svg,
  .roguescribe-reader-close svg {
    width: 18px;
    height: 18px;
  }
  
  .roguescribe-reader-content {
    padding: 100px 16px 48px; /* Matches mobile header padding */
  }
  
  .roguescribe-reader-title {
    font-size: 28px;
  }
  
  .roguescribe-reader-body {
    font-size: var(--reader-font-size, 17px);
  }
}


/* Theme Variables */
.roguescribe-reader-overlay[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #d4d4d4;
  --text-tertiary: #999;
  --border-color: #1a1a1a;
  --accent-color: #ef4444;
}

.roguescribe-reader-overlay[data-theme="light"] {
  --bg-backdrop: #f5f5f5;
  --bg-primary: #ffffff;
  --bg-secondary: rgba(255, 255, 255, 0.98); /* High opacity to prevent text bleed */
  --bg-tertiary: #f3f4f6;
  --text-primary: #1a1a1a;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  --border-color: #e5e5e5;
  --accent-color: #ef4444;
  --scrollbar-track: #f5f5f5;
  --scrollbar-thumb: #d1d5db;
}

/* Font Families - Premium reading fonts from Google Fonts */
[data-font="georgia"] .roguescribe-reader-body {
  font-family: Georgia, 'Times New Roman', serif;
}

[data-font="helvetica"] .roguescribe-reader-body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

[data-font="courier"] .roguescribe-reader-body {
  font-family: 'Courier New', Courier, monospace;
}

[data-font="palatino"] .roguescribe-reader-body {
  font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;
}

.roguescribe-reader-overlay[data-font="crimson"] .roguescribe-reader-body {
  font-family: 'Crimson Text', 'Crimson Pro', Georgia, serif;
  letter-spacing: 0.008em;
}

/* Update existing styles to use CSS variables */
.roguescribe-reader-container {
  background: var(--bg-primary);
}

.roguescribe-reader-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.roguescribe-reader-logo {
  color: var(--accent-color);
}

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

/* AI Toggle in Header */
.roguescribe-ai-toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.roguescribe-ai-toggle-container:hover {
  background: rgba(239, 68, 68, 0.1);
}

.roguescribe-ai-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  letter-spacing: 0.5px;
}

.roguescribe-toggle-switch:has(input:checked) ~ .roguescribe-ai-label {
  color: var(--accent-color);
}

.roguescribe-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin: 0;
}

.roguescribe-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.roguescribe-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--text-tertiary); /* Better visibility in both modes */
  opacity: 0.3;
  transition: all 0.3s ease;
  border-radius: 22px;
}

.roguescribe-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider {
  background: var(--accent-color);
}

.roguescribe-toggle-switch input:checked + .roguescribe-toggle-slider:before {
  transform: translateX(18px);
}

.roguescribe-control-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.roguescribe-control-btn:hover {
  background: rgba(128, 128, 128, 0.1);
  color: var(--text-primary);
  opacity: 1;
}

.roguescribe-control-btn.active {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-color);
  opacity: 1;
}

/* Side Navigation Buttons Removed per user request */

.roguescribe-reader-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  opacity: 0.9;
}

.roguescribe-reader-close:hover {
  background: rgba(128, 128, 128, 0.1);
  color: var(--text-primary);
  opacity: 1;
  transform: scale(1.1);
}

.roguescribe-reader-title {
  color: var(--text-primary);
}

.roguescribe-reader-meta {
  border-bottom: 2px solid var(--border-color);
}

.roguescribe-reader-source {
  color: var(--text-tertiary);
}

.roguescribe-reader-body {
  color: var(--text-secondary);
  font-size: var(--reader-font-size, 19px) !important;
}

.roguescribe-reader-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.roguescribe-reader-content::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
}

/* Settings Panel */
.roguescribe-settings-panel {
  position: fixed;
  top: 60px; /* Header height */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  z-index: 2147483648;
  background: var(--bg-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  padding: 0;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.roguescribe-settings-panel.open {
  max-height: 400px;
  opacity: 1;
  visibility: visible;
  padding: 24px 32px;
}

/* Ensure settings panel moves down when floating nav is active is too complex, 
   instead let's make the settings panel always attach to the top or be independent.
   Actually, let's keep it simple: if nav floats, settings panel might look weird if it stays at top:60px.
   Let's make sure settings panel also looks good in light mode. */
.roguescribe-reader-overlay[data-theme="light"] .roguescribe-settings-panel {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.roguescribe-setting {
  margin-bottom: 20px;
}

.roguescribe-setting:last-child {
  margin-bottom: 0;
}

.roguescribe-setting label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

.roguescribe-font-options {
  display: flex;
  gap: 8px;
}

.roguescribe-font-btn {
  flex: 1;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  color: var(--text-secondary);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roguescribe-font-btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent-color);
}

.roguescribe-font-btn.active {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* Theme Options (same style as font options) */
.roguescribe-theme-options {
  display: flex;
  gap: 8px;
}

.roguescribe-theme-btn {
  flex: 1;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  color: var(--text-secondary);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.roguescribe-theme-btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent-color);
}

.roguescribe-theme-btn.active {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.roguescribe-theme-btn svg {
  flex-shrink: 0;
}

#roguescribe-font-size-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--text-tertiary); /* Use text color for better contrast in light mode */
  opacity: 0.3;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#roguescribe-font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

#roguescribe-font-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

#roguescribe-font-size-value {
  color: var(--accent-color);
  font-weight: 700;
}

/* Skeleton Loaders */
.roguescribe-skeleton-container {
  margin-top: 28px;
}

.roguescribe-skeleton {
  padding: 20px 0;
  width: 100%;
  /* max-width removed to ensure it fills padded container */
  box-sizing: border-box;
}

.roguescribe-skeleton-line {
  width: 100%; /* Explicitly fill width */
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-secondary) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: roguescribe-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 16px;
}

.roguescribe-skeleton-line.short {
  width: 60%;
}

@keyframes roguescribe-skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* AI Continue Section - Hidden by default */
.roguescribe-ai-continue-section {
  display: none; /* Hidden by default */
  margin-top: 60px;
  padding: 32px;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 2px solid var(--border-color);
}

/* Show AI section only when enabled */
.roguescribe-reader-overlay.roguescribe-ai-enabled .roguescribe-ai-continue-section {
  display: block;
}

.roguescribe-ai-header h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.roguescribe-ai-prompt {
  width: 100%;
  padding: 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.roguescribe-ai-prompt:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.roguescribe-ai-char-count {
  text-align: right;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
  margin-bottom: 16px;
}

.roguescribe-ai-char-count span {
  color: var(--accent-color);
  font-weight: 600;
}

.roguescribe-ai-continue-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.roguescribe-ai-continue-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(239, 68, 68, 0.6);
}

.roguescribe-ai-continue-btn:active:not(:disabled) {
  transform: translateY(0);
}

.roguescribe-ai-continue-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.roguescribe-spinner {
  animation: roguescribe-spin 1s linear infinite;
}

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

.roguescribe-ai-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 48px 0 32px 0;
  padding: 16px 0;
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  color: var(--accent-color);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roguescribe-ai-divider svg {
  color: var(--accent-color);
}

.roguescribe-ai-content {
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: var(--reader-font-size, 19px);
  line-height: 1.8;
}

.roguescribe-ai-content p {
  margin-bottom: 24px;
}

.roguescribe-ai-content p:last-child {
  margin-bottom: 0;
}

/* Chapter Navigation */
.roguescribe-chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--border-color);
}

.roguescribe-chapter-btn {
  padding: 16px 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif; /* Modern font */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.roguescribe-chapter-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.roguescribe-chapter-btn:active {
  transform: translateY(0);
}

.roguescribe-prev-chapter {
  justify-content: flex-start;
}

.roguescribe-next-chapter {
  justify-content: flex-end;
}

/* Reader Images */
.roguescribe-reader-image {
  margin: 32px 0;
  text-align: center;
}

.roguescribe-reader-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.roguescribe-reader-image figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .roguescribe-ai-continue-section {
    padding: 24px;
    margin-top: 40px;
  }

  .roguescribe-chapter-nav {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .roguescribe-prev-chapter,
  .roguescribe-next-chapter {
    justify-content: center;
  }
  
  .roguescribe-reader-image {
    margin: 24px 0;
  }
}


/* Minimized State */
.roguescribe-reader-overlay.roguescribe-minimized {
  animation: roguescribe-slide-down 0.3s ease-out forwards;
}

@keyframes roguescribe-slide-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* Selection Mode - Scribe Selection Button */
#roguescribe-translate-selection-btn {
  position: fixed;
  z-index: 2147483646;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 
    0 8px 32px rgba(239, 68, 68, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  letter-spacing: 0.3px;
  animation: roguescribe-float-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#roguescribe-translate-selection-btn::before {
  content: '✨';
  font-size: 18px;
  animation: roguescribe-sparkle 2s ease-in-out infinite;
}

#roguescribe-translate-selection-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 12px 40px rgba(239, 68, 68, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

#roguescribe-translate-selection-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 
    0 4px 16px rgba(239, 68, 68, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.1);
}

@keyframes roguescribe-float-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes roguescribe-sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
    opacity: 0.8;
  }
}
/* Restore Button */
.roguescribe-restore-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2147483646;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  animation: roguescribe-bounce-in 0.4s ease-out;
}

.roguescribe-restore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
}

.roguescribe-restore-btn:active {
  transform: translateY(0);
}

@keyframes roguescribe-bounce-in {
  0% {
    transform: scale(0) translateY(100px);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablets and smaller (< 768px) */
@media (max-width: 768px) {
  .roguescribe-reader-container {
    max-width: 100%;
    border-radius: 0;
  }

  .roguescribe-reader-header {
    padding: 12px 16px;
  }

  .roguescribe-reader-logo {
    font-size: 16px;
    gap: 8px;
  }

  .roguescribe-reader-logo img {
    width: 20px;
    height: 20px;
  }

  .roguescribe-reader-content {
    padding: 100px 16px 48px; /* Correct padding since settings is now fixed */
  }

  .roguescribe-reader-title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .roguescribe-reader-meta {
    font-size: 12px;
  }

  .roguescribe-reader-body {
    font-size: 17px !important;
    line-height: 1.7;
  }

  .roguescribe-reader-body p {
    margin-bottom: 20px;
  }

  /* Settings panel */
  .roguescribe-settings-panel {
    padding: 16px;
  }

  .roguescribe-font-options {
    flex-wrap: wrap;
    gap: 8px;
  }

  .roguescribe-font-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* AI Continue section */
  .roguescribe-ai-continue-section {
    padding: 20px;
    margin: 32px 0;
  }

  .roguescribe-ai-header h3 {
    font-size: 18px;
  }

  .roguescribe-ai-prompt {
    font-size: 14px;
  }

  .roguescribe-ai-continue-btn {
    font-size: 14px;
    padding: 12px 20px;
  }

  /* Chapter navigation */
  .roguescribe-chapter-nav {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Force side-by-side */
    gap: 12px;
    align-items: center;
  }

  .roguescribe-chapter-btn {
    flex: 1; /* Equal width */
    width: auto; /* Allow shrink */
    padding: 12px 8px; /* Compact padding */
    font-size: 14px; /* Smaller text */
    justify-content: center;
    white-space: nowrap; /* Prevent wrapping */
  }
  
  /* Hide icons if screen is VERY small to save space, otherwise keep them */
  .roguescribe-chapter-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Restore button */
  .roguescribe-restore-btn {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* Error notification */
  .roguescribe-error-notification {
    top: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .roguescribe-error-content {
    padding: 16px;
  }
}

/* Mobile devices (Phones & Small Tablets) */
@media (max-width: 768px) {
  .roguescribe-reader-header {
    padding: 12px 8px; /* Minimal padding */
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .roguescribe-reader-logo {
    font-size: 14px;
    gap: 6px;
  }

  /* Maximize space for content on small screens */
  .roguescribe-reader-content {
    /* 8px side padding is very minimal, leaving just enough to not touch edge */
    padding: 90px 8px 64px !important; 
    width: 100% !important;
    font-size: 17px !important; /* Slightly larger text for readability if needed, or keep standard */
  }
  
  /* Ensure container fills screen */
  .roguescribe-reader-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
  }
}

/* Very small screens (< 360px) */
@media (max-width: 360px) {
  /* Hide text, only show icon if possible or truncated */
  .roguescribe-text-rogue,
  .roguescribe-text-scribe {
    display: none;
  }
  
  /* Show a shorthand or just logo icon */
  .roguescribe-logo-text::after {
    content: "RS";
    color: var(--accent-color);
  }
}

  .roguescribe-reader-logo img {
    width: 18px;
    height: 18px;
  }

  .roguescribe-reader-header-actions {
    gap: 8px;
  }

  .roguescribe-control-btn,
  .roguescribe-reader-close,
  .roguescribe-discord-link {
    padding: 6px;
  }

  .roguescribe-control-btn svg,
  .roguescribe-reader-close svg,
  .roguescribe-discord-link svg {
    width: 18px;
    height: 18px;
  }

  .roguescribe-reader-content {
    padding: 24px 16px 40px;
  }

  .roguescribe-reader-title {
    font-size: 24px;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
  }

  .roguescribe-reader-meta {
    font-size: 11px;
  }

  .roguescribe-reader-body {
    font-size: 16px !important;
    line-height: 1.65;
  }

  .roguescribe-reader-body p {
    margin-bottom: 18px;
  }

  /* Settings panel */
  .roguescribe-settings-panel {
    padding: 12px;
  }

  .roguescribe-setting {
    margin-bottom: 16px;
  }

  .roguescribe-setting label {
    font-size: 13px;
  }

  .roguescribe-font-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* AI Continue section */
  .roguescribe-ai-continue-section {
    padding: 16px;
    margin: 24px 0;
  }

  .roguescribe-ai-header h3 {
    font-size: 16px;
  }

  .roguescribe-ai-prompt {
    font-size: 13px;
    padding: 10px;
  }

  .roguescribe-ai-continue-btn {
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Chapter navigation */
  .roguescribe-chapter-btn {
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Restore button */
  .roguescribe-restore-btn {
    bottom: 12px;
    right: 12px;
    padding: 10px 14px;
    font-size: 13px;
    gap: 8px;
  }

  /* Error notification */
  .roguescribe-error-notification {
    top: 12px;
    right: 12px;
    left: 12px;
  }

  .roguescribe-error-content {
    padding: 14px;
    gap: 12px;
  }

  .roguescribe-error-title {
    font-size: 14px;
  }

  .roguescribe-error-message {
    font-size: 13px;
  }
}

/* Landscape mobile (height < 500px) */
@media (max-height: 500px) and (orientation: landscape) {
  .roguescribe-reader-header {
    padding: 10px 16px;
  }

  .roguescribe-reader-content {
    padding: 20px 24px 32px;
  }

  .roguescribe-reader-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .roguescribe-reader-body {
    font-size: 15px;
  }

  .roguescribe-ai-continue-section {
    padding: 14px;
    margin: 20px 0;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .roguescribe-control-btn,
  .roguescribe-reader-close,
  .roguescribe-discord-link {
    min-width: 44px;
    min-height: 44px;
  }

  .roguescribe-font-btn {
    min-height: 44px;
  }

  .roguescribe-chapter-btn {
    min-height: 48px;
  }

  .roguescribe-ai-continue-btn {
    min-height: 48px;
  }

  /* Disable hover effects on touch devices */
  .roguescribe-control-btn:hover,
  .roguescribe-reader-close:hover,
  .roguescribe-discord-link:hover,
  .roguescribe-font-btn:hover,
  .roguescribe-chapter-btn:hover {
    transform: none;
  }

  /* Active states for touch feedback */
  .roguescribe-control-btn:active,
  .roguescribe-reader-close:active,
  .roguescribe-discord-link:active {
    transform: scale(0.95);
  }

  .roguescribe-font-btn:active,
  .roguescribe-chapter-btn:active,
  .roguescribe-ai-continue-btn:active {
    transform: scale(0.98);
  }
}

/* ========================================
   SELECTION MODE - TRANSLATE SELECTION
   ======================================== */

/* Floating translate button that appears on text selection */
#roguescribe-translate-selection-btn {
  position: absolute;
  z-index: 2147483645;
  background: rgba(26, 26, 26, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
  display: none;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  pointer-events: auto;
  user-select: none;
  backdrop-filter: blur(10px);
  letter-spacing: 0.3px;
}

#roguescribe-translate-selection-btn:hover {
  background: rgba(0, 0, 0, 0.98);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#roguescribe-translate-selection-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#roguescribe-translate-selection-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

#roguescribe-translate-selection-btn.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: roguescribe-spin 0.6s linear infinite;
}

/* Selection mode badge in reader */
.roguescribe-selection-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 12px;
}

.roguescribe-selection-badge svg {
  width: 14px;
  height: 14px;
}

/* Character count display */
.roguescribe-selection-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.roguescribe-selection-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.roguescribe-selection-info-item svg {
  width: 16px;
  height: 16px;
  color: #667eea;
}

.roguescribe-selection-info-value {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Full page translate button in selection mode */
.roguescribe-full-page-btn {
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.roguescribe-full-page-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.roguescribe-full-page-btn svg {
  width: 18px;
  height: 18px;
}

/* Mobile adjustments for selection button */
@media (max-width: 768px) {
  #roguescribe-translate-selection-btn {
    font-size: 13px;
    padding: 10px 16px;
  }
  
  .roguescribe-selection-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
  
  .roguescribe-selection-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  #roguescribe-translate-selection-btn {
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* Touch device - larger button */
@media (hover: none) and (pointer: coarse) {
  #roguescribe-translate-selection-btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* Bypass text selection disabling - allow highlighting on all sites */
* {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Line breaks within paragraphs */
.roguescribe-reader-body p br {
  display: block;
  content: "";
  margin-top: 0.5em;
}
/* Website adaptation of the original RogueScribe reader. */
.rs-page{margin:0;overflow:hidden}.rs-page #wpadminbar{display:none}html:has(body.rs-page){margin-top:0!important}.rs-page #ims-rs{background:var(--bg-primary);opacity:1;animation:none;overflow:hidden;--bg-primary:#fff;--bg-secondary:#f8f8f8;--bg-tertiary:#f1f1f1;--text-primary:#222;--text-secondary:#555;--text-tertiary:#777;--border-color:#e5e5e5;--accent-color:#ef4444;font-family:system-ui,sans-serif}.rs-page #ims-rs[data-theme=dark]{--bg-primary:#171719;--bg-secondary:#1c1c1f;--bg-tertiary:#252528;--text-primary:#ededed;--text-secondary:#bdbdc2;--text-tertiary:#999;--border-color:#303034}.rs-page #ims-rs[data-theme=midnight]{--bg-primary:#08090d;--bg-secondary:#101119;--bg-tertiary:#191b25;--text-primary:#dce1ef;--text-secondary:#a8b0c4;--text-tertiary:#929bb0;--border-color:#272a38}.rs-page #ims-rs[data-theme=sepia]{--bg-primary:#f4ecd9;--bg-secondary:#eee3cb;--bg-tertiary:#e8dcc4;--text-primary:#493b2c;--text-secondary:#66533d;--text-tertiary:#79664e;--border-color:#d9cbb0}.rs-page .roguescribe-reader-container{max-width:864px;box-shadow:none;animation:none}.rs-page .roguescribe-reader-header{position:relative;left:auto;top:auto;transform:none;max-width:none;flex-shrink:0;height:60px;box-shadow:none}.rs-page .roguescribe-header-inner{max-width:none;position:relative;padding:0 24px}.rs-page .roguescribe-reader-header-title{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.1}.rs-page .roguescribe-logo-text{font-size:17px}.rs-powered{font:10px system-ui;color:var(--text-tertiary)}#rs-progress{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;color:var(--text-tertiary)}.rs-page .roguescribe-reader-header-actions{gap:8px}.rs-page .roguescribe-control-btn,.rs-page .roguescribe-reader-close{font-size:22px;line-height:1;padding:8px;color:var(--text-secondary);background:transparent}.rs-page #rs-settings{color:var(--accent-color);background:#ef44441a}.rs-page button:disabled{opacity:.45;cursor:not-allowed}.rs-page .roguescribe-reader-content{padding:58px clamp(24px,6vw,86px) 64px;min-height:0;overflow:auto}.rs-page .roguescribe-reader-title{font:700 34px/1.25 Georgia,serif;color:var(--text-primary);letter-spacing:0;margin:0 0 12px}.rs-page .roguescribe-reader-meta{font:13px/1.8 system-ui;color:var(--text-secondary);border-bottom:1px solid var(--border-color);margin-bottom:44px;padding-bottom:28px}.rs-page .roguescribe-reader-meta a{color:var(--accent-color)}.rs-page .roguescribe-reader-body,.rs-page .roguescribe-reader-body p{font-size:var(--reader-font-size,22px)!important;line-height:var(--rs-spacing,1.9)!important;color:var(--text-primary)}.rs-page .roguescribe-reader-body img{max-width:100%;height:auto}.rs-page [data-font=charter] .roguescribe-reader-body{font-family:Charter,'Bitstream Charter',Georgia,serif}.rs-page [data-font=legible] .roguescribe-reader-body{font-family:Arial,Verdana,sans-serif;letter-spacing:.025em}.rs-page .roguescribe-chapter-nav{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border-color);padding-top:28px;margin-top:70px}.rs-page .roguescribe-chapter-btn{font:600 14px system-ui;padding:12px 20px;border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);background:transparent}.rs-page .roguescribe-next-chapter{color:var(--accent-color);border-color:var(--accent-color);background:#ef44440d}.rs-disabled{opacity:.45}.rs-page #rs-shade{position:absolute;inset:0;background:#0008;z-index:2147483647}.rs-page #rs-panel{position:absolute;top:0;right:0;left:auto;transform:translateX(100%);width:min(344px,100%);height:100%;max-height:none;overflow-y:auto;visibility:hidden;opacity:1;border-radius:0;border:0;border-left:1px solid var(--border-color);background:var(--bg-secondary);padding:22px;z-index:2147483647;box-shadow:none;transition:transform .2s,visibility .2s}.rs-page #rs-panel.open{transform:none;visibility:visible}.rs-panel-title{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--text-primary);margin-bottom:24px}.rs-page .roguescribe-setting{margin-bottom:24px}.rs-page .roguescribe-setting label{text-transform:none;letter-spacing:0;border:0;padding:0;font-size:11px;margin-bottom:10px}.rs-page .roguescribe-theme-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rs-page .roguescribe-theme-btn{display:flex;flex-direction:column;gap:8px;padding:12px 2px;font-size:11px;border:1px solid var(--border-color);background:transparent;border-radius:10px;min-height:66px}.rs-page .roguescribe-theme-btn span{font-size:16px}.rs-page .roguescribe-font-options{display:grid;gap:6px}.rs-page .roguescribe-font-btn{display:flex;justify-content:space-between;align-items:center;text-align:left;font:600 14px Georgia,serif;padding:9px 12px;background:transparent;border:1px solid var(--border-color)}.rs-page .roguescribe-font-btn small{font:10px system-ui;background:var(--bg-tertiary);padding:3px 5px;border-radius:4px;color:var(--text-tertiary)}.rs-page .roguescribe-theme-btn.active,.rs-page .roguescribe-font-btn.active{border-color:var(--accent-color);background:#ef44441a;color:var(--text-primary)}.rs-spacing-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rs-spacing-options button{padding:7px 0;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:7px}.rs-spacing-options button.active{background:var(--accent-color);color:#fff}.rs-page #roguescribe-font-size-slider{opacity:1;accent-color:var(--accent-color)}.rs-page .locked h2{color:var(--text-primary)}@media(max-width:480px){.rs-page .roguescribe-header-inner{padding:0 12px}.rs-page .roguescribe-reader-header-actions{gap:2px}.rs-page .roguescribe-reader-title{font-size:28px}.rs-page .roguescribe-reader-content{padding:35px 20px}.rs-page .roguescribe-chapter-btn{padding:10px}.rs-page .roguescribe-logo-text{font-size:15px}}

/* v0.5.1: aligned wordmark and consistent chapter navigation */
.rs-page .roguescribe-logo-text{display:inline-block;white-space:nowrap;font-family:system-ui,sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.04em;vertical-align:baseline}
.rs-page .roguescribe-logo-text .roguescribe-text-rogue,.rs-page .roguescribe-logo-text .roguescribe-text-scribe{display:inline;position:static;transform:none;font:inherit;letter-spacing:inherit;vertical-align:baseline;margin:0;padding:0}
.rs-page .roguescribe-logo-text .roguescribe-text-rogue{color:var(--text-primary)}
.rs-page .roguescribe-logo-text .roguescribe-text-scribe{color:var(--accent-color)}
.rs-page .roguescribe-logo-text::after{content:none}
.rs-page a.roguescribe-chapter-btn{color:var(--accent-color);border:1px solid var(--accent-color);background:transparent;text-decoration:none}
.rs-page a.roguescribe-chapter-btn:hover{color:var(--accent-color);border-color:var(--accent-color);background:#ef44441a}
.rs-page a.roguescribe-chapter-btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}
.rs-page .roguescribe-chapter-btn.rs-disabled{color:var(--text-secondary);border-color:var(--border-color);background:transparent;opacity:.45;cursor:default}

/* Optical alignment: compensate for the rounded capital S overshoot. */
.rs-page .roguescribe-logo-text .roguescribe-text-scribe{position:relative;top:0.055em;vertical-align:baseline;transform:none;}

/* v0.5.3: matching outlined navigation, including unavailable chapters. */
.rs-page .roguescribe-chapter-btn.rs-disabled{color:var(--accent-color);border:1px solid var(--accent-color);background:transparent;opacity:1;cursor:not-allowed}

/* Mobile reader: fit the visible viewport and keep every setting reachable. */
@media (max-width: 768px), (max-height: 600px) {
  .rs-page #ims-rs { height: 100vh !important; height: 100dvh !important; }
  .rs-page #rs-panel {
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .rs-page #rs-panel .roguescribe-setting { flex-shrink: 0; }
  .rs-page #ims-rs:has(#rs-panel.open) #rs-scroll { overflow: hidden; }
  .rs-page #rs-shade { touch-action: none; }
}