/*
  Book Recommender - Dark Mode Additions
  Add this to the END of your existing dark-mode.css file
  © 2025 Milos Saric. All rights reserved.
*/

/* ====================== */
/* BOOK RECOMMENDER DARK MODE */
/* ====================== */

/* ChatGPT Section */
.dark-mode .chatgpt-section {
  background: var(--primary-bg);
}

/* Search Input Container */
.dark-mode .search-input-container {
  background: var(--card-bg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.dark-mode .search-input-container:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.dark-mode .minimal-search-input {
  color: var(--text-primary);
  background: transparent;
}

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

/* Send Button */
.dark-mode .send-button {
  background: var(--button-disabled);
}

.dark-mode .send-button:not(:disabled) {
  background: var(--accent);
}

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

/* Dropdown */
.dark-mode .minimal-dropdown {
  background: var(--card-bg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}

.dark-mode .autocomplete-item {
  color: var(--text-primary);
  border-bottom-color: var(--border-light);
}

.dark-mode .autocomplete-item:hover,
.dark-mode .autocomplete-item.selected {
  background: var(--glass-hover);
}

.dark-mode .autocomplete-item mark {
  background: rgba(10, 132, 255, 0.2);
  color: var(--text-primary);
}

/* Loading State */
.dark-mode .loading-spinner {
  border-color: var(--border-light);
  border-top-color: var(--accent);
}

.dark-mode .minimal-loading p {
  color: var(--text-secondary);
}

/* Error State */
.dark-mode .minimal-error h3 {
  color: var(--text-primary);
}

.dark-mode .minimal-error p {
  color: var(--text-secondary);
}

.dark-mode .retry-button {
  background: var(--accent);
}

.dark-mode .retry-button:hover {
  background: var(--accent-hover);
}

/* Results Section */
.dark-mode #resultsSection {
  background: var(--primary-bg);
}

.dark-mode .results-subtitle {
  color: var(--text-secondary);
}

/* Book Cards */
.dark-mode .book-card {
  background: var(--card-bg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

.dark-mode .book-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.dark-mode .book-title {
  color: var(--text-primary);
}

.dark-mode .similarity-badge {
  background: rgba(10, 132, 255, 0.15);
  color: var(--accent);
  border-color: rgba(10, 132, 255, 0.3);
}

/* Author Section - CRITICAL FIX */
/*
  Book Recommender - Dark Mode Additions - FIXED
  Replace the Author Section in your book-recommender-dark.css with this
  © 2025 Miloš Sarić. All rights reserved.
*/

/* Author Section - FIXED */
.dark-mode .author-card {
  background: rgba(28, 28, 30, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-lg) !important;
  /* CRITICAL FIX: Maintain the same layout structure */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.dark-mode .author-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(10, 132, 255, 0.25) !important;
}

/* CRITICAL FIX: Ensure image container maintains size */
.dark-mode .author-image {
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.dark-mode .author-image img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--secondary-bg) !important;
  background: var(--secondary-bg);
  display: block !important;
}

/* Author info section */
.dark-mode .author-info {
  text-align: center !important;
  width: 100% !important;
}

.dark-mode .author-info h3 {
  color: var(--text-secondary) !important;
  font-size: 0.625rem !important;
  margin: 0 0 0.25rem 0 !important;
}

.dark-mode .author-info h2 {
  color: var(--text-primary) !important;
  font-size: 1rem !important;
  margin: 0 0 0.25rem 0 !important;
}

.dark-mode .author-title {
  color: var(--text-secondary) !important;
  font-size: 0.7rem !important;
  margin: 0 0 1rem 0 !important;
}

/* Social icons */
.dark-mode .author-socials {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  width: 100% !important;
}

.dark-mode .author-socials a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--secondary-bg) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.dark-mode .author-socials a:hover {
  color: white !important;
  box-shadow: 0 8px 16px rgba(10, 132, 255, 0.4);
}

.dark-mode .author-socials svg {
  width: 16px !important;
  height: 16px !important;
}

/* Close Button */
.dark-mode .close-results-btn {
  background: #ef4444;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.dark-mode .close-results-btn:hover {
  background: #dc2626;
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.6);
}