/* TextReader Component Styles */

.text-reader {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

/* Settings Bar */
.text-reader-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: #F2F0E5; /* flexoki-base-50 */
  border-bottom: 1px solid #DAD8CE; /* flexoki-base-150 */
  align-items: center;
}

.text-reader-settings-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.text-reader-label {
  font-size: 0.875rem;
  color: #6F6E69; /* flexoki-base-600 */
  font-weight: 500;
}

.text-reader-select {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid #CECDC3; /* flexoki-base-200 */
  background-color: white;
  color: #100F0F; /* flexoki-black */
}

.text-reader-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.375rem;
  border: 1px solid #CECDC3;
  background-color: white;
  color: #6F6E69;
  cursor: pointer;
  transition: all 0.15s ease;
}

.text-reader-btn:hover {
  background-color: #F2F0E5;
  color: #100F0F;
}

.text-reader-font-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.text-reader-font-size {
  font-size: 0.875rem;
  color: #575653;
  min-width: 3rem;
  text-align: center;
}

.text-reader-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #CECDC3;
  accent-color: #5065a8; /* primary-500 */
}

/* Text Content Container */
.text-reader-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  line-height: 1.8;
  font-family: Georgia, 'Times New Roman', serif;
  scroll-behavior: smooth;
}

/* Theme: Light (Default) */
.text-reader-content.theme-light {
  background-color: #FFFCF0; /* flexoki-paper */
  color: #100F0F; /* flexoki-black */
}

.theme-light .text-reader-highlight {
  background-color: #F6E2A0; /* flexoki-yellow-100 */
  color: #100F0F;
  border-radius: 2px;
}

/* Theme: Dark */
.text-reader-content.theme-dark {
  background-color: #1C1B1A; /* flexoki-base-950 */
  color: #E6E4D9; /* flexoki-base-100 */
}

.theme-dark .text-reader-highlight {
  background-color: #3A2D04; /* flexoki-yellow-900 */
  color: #FAEEC6; /* flexoki-yellow-50 */
  border-radius: 2px;
}

/* Theme: Sepia */
.text-reader-content.theme-sepia {
  background-color: #f2eee4; /* cream-200 */
  color: #3c444e; /* charcoal-800 */
}

.theme-sepia .text-reader-highlight {
  background-color: #F1D67E; /* flexoki-yellow-150 */
  color: #3c444e;
  border-radius: 2px;
}

/* Text Segments */
.text-reader-segment {
  cursor: pointer;
  transition: background-color 0.15s ease;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 2px;
}

.text-reader-segment:hover {
  background-color: rgba(80, 101, 168, 0.1); /* primary-500 with opacity */
}

.text-reader-prose {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Empty State */
.text-reader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  padding: 2rem;
  text-align: center;
  color: #6F6E69; /* flexoki-base-600 */
}

.text-reader-empty svg {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.text-reader-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #100F0F;
  margin-bottom: 0.5rem;
}

.text-reader-empty-message {
  font-size: 0.875rem;
  color: #878580; /* flexoki-base-500 */
}

/* Scrollbar Styling */
.text-reader-content::-webkit-scrollbar {
  width: 8px;
}

.text-reader-content::-webkit-scrollbar-track {
  background: transparent;
}

.text-reader-content::-webkit-scrollbar-thumb {
  background-color: #B7B5AC; /* flexoki-base-300 */
  border-radius: 4px;
}

.text-reader-content::-webkit-scrollbar-thumb:hover {
  background-color: #9F9D96; /* flexoki-base-400 */
}

/* Dark theme scrollbar */
.text-reader-content.theme-dark::-webkit-scrollbar-thumb {
  background-color: #403E3C; /* flexoki-base-800 */
}

.text-reader-content.theme-dark::-webkit-scrollbar-thumb:hover {
  background-color: #575653; /* flexoki-base-700 */
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .text-reader-settings {
    justify-content: center;
  }

  .text-reader-content {
    padding: 1rem;
  }
}