/* ===== BASE RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  background: #FDFBF7;          /* Warm cream page background */
  color: #141313;
  font-size: 16px;
  line-height: 1.6;
}

/* ===============================
   MOBILE TYPOGRAPHY BASELINE
   =============================== */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* MOBILE: Maintain 16px for body text */
    line-height: 1.6; /* MOBILE: Maintain comfortable reading */
  }
}

.main-app-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1rem;
}

/* OLD HEADER STYLES REMOVED - Now using unified styles/header.css */

.hidden {
  display: none;
}
/* ===== MAIN CONTAINER ===== */
main {
  max-width: 960px;
  margin: 28px auto;
  padding: 0 20px;
}

/* ===== ARTICLES CONTAINER ===== */
#articles-container {
  width: 100%;
  max-width: 960px; /* Match main container width */
  margin: 0 auto;

}

/* ===== DATE DIVIDER (Between Article Groups) ===== */
/* Visual separator when articles span multiple publish dates */
.date-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 28px 0;
  padding: 0 4px;
}

.date-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #C4B5A0 20%, #C4B5A0 80%, transparent 100%);
}

.date-divider-label {
  font-family: "Source Serif 4", "Noto Serif Devanagari", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6B5A45;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 6px 16px;
  background: #F5F0E6;
  border-radius: 20px;
  border: 1px solid #D9CDB8;
}

/* First date divider at top of list - less top margin */
.date-divider:first-child {
  margin-top: 8px;
}

/* Dark mode support */
body.dark-mode .date-divider-line {
  background: linear-gradient(90deg, transparent 0%, #4A4A4A 20%, #4A4A4A 80%, transparent 100%);
}

body.dark-mode .date-divider-label {
  color: #B8A88A;
  background: #2A2A2A;
  border-color: #3D3D3D;
}

/* ===== ACTIVITY DIVIDER (Your Activity sorting) ===== */
/* Divider between "With Activity" and "Without Activity" article groups */
.activity-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 24px 0;
  padding: 0 4px;
}

.activity-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #8B7355 20%, #8B7355 80%, transparent 100%);
}

.activity-divider-label {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B5A45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 14px;
  background: #EDE6D9;
  border-radius: 16px;
  border: 1px solid #C4B5A0;
}

/* Dark mode for activity divider */
body.dark-mode .activity-divider-line {
  background: linear-gradient(90deg, transparent 0%, #5A5A5A 20%, #5A5A5A 80%, transparent 100%);
}

body.dark-mode .activity-divider-label {
  color: #A89880;
  background: #333333;
  border-color: #4A4A4A;
}

@media (max-width: 768px) {
  #articles-container {
    width: 100%;
    max-width: 100%;
  }
}

/* ===== LANDSCAPE MODE (768-1024px): TEXT MARGIN FOR REFERRAL SIDEBAR ===== */
/* Add right margin to prevent text overlap with referral sidebar */
/* Applies to ALL landscape devices: phones (6"+) and tablets (8", 10.2") */
/* Trade-off accepted: Slightly narrower text width for clean referral UX */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Push article text away from right edge (sidebar is ~80px on phones, 72px on tablets) */
  .highlight-zone p {
    margin-right: 90px !important;
  }

  /* Also add margin to other text elements when tile is expanded */
  .article-tile.expanded .article-title {
    margin-right: 90px !important;
  }

  .article-tile.expanded .tags {
    margin-right: 90px !important;
  }

  .article-tile.expanded .prelude-section {
    margin-right: 90px !important;
  }

  /* Fix question text in content area */
  .highlight-zone .question {
    margin-right: 90px !important;
  }
}

/* ===== TRIAL COMPLETED: RESTORE FULL TEXT WIDTH ===== */
/* When user completes trial, sidebar is removed on phones/small tablets */
/* Text margin no longer needed - restore full width */
@media (min-width: 768px) and (max-width: 850px) and (orientation: landscape) {
  body.trial-completed.device-phone .highlight-zone p,
  body.trial-completed.device-small-tablet .highlight-zone p,
  body.trial-completed.device-phone .article-tile.expanded .article-title,
  body.trial-completed.device-small-tablet .article-tile.expanded .article-title,
  body.trial-completed.device-phone .article-tile.expanded .tags,
  body.trial-completed.device-small-tablet .article-tile.expanded .tags,
  body.trial-completed.device-phone .article-tile.expanded .prelude-section,
  body.trial-completed.device-small-tablet .article-tile.expanded .prelude-section,
  body.trial-completed.device-phone .highlight-zone .question,
  body.trial-completed.device-small-tablet .highlight-zone .question {
    margin-right: 0 !important; /* Restore full width when sidebar removed */
  }
}
/* ===== PREMIUM DESIGN SYSTEM (Article Tiles) ===== */
/* Variables moved to dark-mode.css for theme switching */

/* ===== ARTICLE TILE ===== */
.article-tile {
  background: #FDFBF7;          /* Warm cream - same as page */
  padding: 18px 22px;
  margin-bottom: 24px;
  border: 1.5px solid #D1D1D1; /* Gray border */
  border-radius: 12px;          /* Rounded corners */
  box-shadow: none;             /* No shadow */
  transition: all 0.25s ease;
  overflow: visible;
  position: relative;
}

/* ===== EXPANDED TILE STYLING ===== */
/* Keep borders and rounded corners even when expanded */
.article-tile.expanded {
  background: #FDFBF7;          /* Warm cream - same as page */
  border: 1.5px solid #D1D1D1;  /* Keep gray border */
  box-shadow: none;             /* No shadow */
  padding: 18px 22px;           /* Keep padding */
  margin-bottom: 3rem;          /* Spacing between expanded tiles */
  border-radius: 12px;          /* Keep rounded corners */
}

/* Content spans full tile width (respects existing page margins) */
.article-tile.expanded .article-title,
.article-tile.expanded .tags,
.article-tile.expanded .eeat-container,
.article-tile.expanded .prelude-section,
.article-tile.expanded .content-area,
.article-tile.expanded .end-content-ribbons,
.article-tile.expanded .button-row {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;              /* Use full available width */
}

/* Divider line removed - no line below expanded article */
.article-tile.expanded::after {
  display: none; /* Completely hide divider line */
}

/* ===== ALWAYS-VISIBLE READ STATUS BUTTON (REWARD + FEEDBACK SYSTEM) ===== */
/* Show Read button on ALL tiles (collapsed or expanded) for complete progress visibility */

/* COLLAPSED TILES: Show Read button at bottom-left, ALWAYS visible */
.article-tile:not(.expanded) .button-row {
  display: flex !important; /* Always show, even when collapsed */
  position: absolute;
  left: 15px;
  bottom: 12px;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 100;
}

/* Hide all buttons EXCEPT Read button when collapsed */
.article-tile:not(.expanded) .button-row > .button-wrapper:not(:has(.mark-read-wrapper)),
.article-tile:not(.expanded) .button-row > .action-btn,
.article-tile:not(.expanded) .button-row > .share-btn-wrapper {
  display: none !important;
}

/* Keep Read button wrapper visible */
.article-tile:not(.expanded) .button-row > .button-wrapper:has(.mark-read-wrapper) {
  display: flex !important;
}

/* Keep mark-read-wrapper visible */
.article-tile:not(.expanded) .mark-read-wrapper {
  display: flex !important;
}

/* Hide info icon when collapsed */
.article-tile:not(.expanded) .button-row .info-container {
  display: none !important;
}

/* COLLAPSED + NOT CLICKED: Red "Read?" button - DISABLED (visual only) */
.article-tile:not(.expanded) .read-button:not(.read-done) {
  pointer-events: none !important; /* Disable clicks */
  cursor: not-allowed !important;
  opacity: 0.7 !important; /* Slightly faded to show disabled state */
}

/* COLLAPSED + CLICKED: Green "Read ✓" button - ENABLED (shows completion) */
.article-tile:not(.expanded) .read-button.read-done {
  background-color: rgba(46, 204, 113, 0.12) !important;
  border: 2px solid #2ecc71 !important;
  color: #2ecc71 !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(46, 204, 113, 0.25) !important;
  border-radius: 18px !important;
  pointer-events: none !important; /* Already completed, no need to click again */
  opacity: 1 !important; /* Full opacity for green checkmark */
}

/* Ensure SVG icon visible on green button */
.article-tile:not(.expanded) .read-button.read-done .read-icon {
  stroke: #2ecc71 !important;
  fill: none !important;
}

/* Ensure text visible on green button */
.article-tile:not(.expanded) .read-button.read-done .read-text {
  color: #2ecc71 !important;
}

/* EXPANDED TILES: Read button fully functional */
.article-tile.expanded .read-button {
  pointer-events: auto !important; /* Enable clicks */
  cursor: pointer !important;
  opacity: 1 !important;
}








/* Hover effect only when tile is not expanded */
.article-tile:not(.expanded):hover {
  /* No hover effect for now */
  transform: none;
  box-shadow: none;
}
/* ===== ARTICLE TITLE ===== */
.article-title {
  font-size: 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600 !important; /* Semibold */
  color: var(--sg-text-primary, var(--text-primary));
  text-align: center;
  margin-top: 24px;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* ===== E-E-A-T METADATA (SCROLLABLE WITH ARROW) ===== */
.eeat-container {
  position: relative;
  max-width: 100%;
  margin: 12px auto 16px;
  padding: 0 40px 0 0; /* Right padding for arrow button */
  text-align: center; /* Center alignment */
}

.eeat-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  scroll-behavior: smooth;
  text-align: center; /* Center content */
}

.eeat-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.eeat-content {
  display: inline-block;
  font-size: 13px; /* FIXED: Was 0.8rem (~12.8px), now 13px minimum */
  font-style: italic;
  color: var(--sg-text-muted, #666);
  line-height: 1.5; /* IMPROVED: Was 1.4, now 1.5 for better readability */
  padding: 4px 8px;
}

.eeat-content a {
  color: var(--brand-blue, #004AAD);
  text-decoration: none;
  transition: color 0.2s ease;
}

.eeat-content a:hover {
  color: var(--brand-blue-hover, #0066CC);
  text-decoration: underline;
}

.eeat-separator {
  margin: 0 8px;
  color: var(--sg-text-light, #999);
}

.eeat-scroll-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  border-radius: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.2s ease;
  font-size: 13px; /* FIXED: Was 11px, now 13px minimum */
  color: var(--sg-text-light, #999);
  font-weight: normal;
  opacity: 0.5;
}

.eeat-scroll-btn:hover {
  opacity: 0.8;
  transform: translateY(-50%);
}

.eeat-scroll-btn:active {
  opacity: 1;
  transform: translateY(-50%);
}

/* Hide scroll button when content fits (no overflow) */
.eeat-container.no-overflow .eeat-scroll-btn {
  display: none;
}


/* Collapse logic */
.article-tile:not(.expanded) .content-area,
.article-tile:not(.expanded) .end-content-ribbons,
.article-tile:not(.expanded) .sub-tile,
.article-tile:not(.expanded) .section-ribbon,
.article-tile:not(.expanded) .usability-ribbon {
  display: none !important;
}

/* ===== ENHANCED UX: SHOW PROGRESS ON COMPLETED TILES ===== */
/* When tile is collapsed AND marked as read: Keep title + tags + green button visible */
.article-tile:not(.expanded).read-completed .article-title,
.article-tile:not(.expanded).read-completed .tags {
  display: block !important;
}

/* Reduce title size for collapsed completed tiles for compactness */
.article-tile:not(.expanded).read-completed .article-title {
  font-size: 1.35rem;
  margin-top: 18px;
  margin-bottom: 4px;
}

.article-tile:not(.expanded).read-completed .tags {
  font-size: 0.8rem;
  margin-bottom: 12px;
}
/* ===== RIBBONS ===== */
.source-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 14px; /* Slightly tighter for better fit */
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  z-index: 2;
  border-radius: 8px; /* Rounded corners on all sides */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  line-height: 1.4;
  margin: 8px; /* Prevent overflow from tile edges */
}
.usability-ribbon {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 14px; /* Slightly tighter for better fit */
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background-color: #f4ca16;
  border-radius: 8px; /* Rounded corners on all sides */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
  line-height: 1.4;
  margin: 8px; /* Prevent overflow from tile edges */
}
.article-tile.expanded .usability-ribbon {
  display: block;
}
/* ===== TITLE & TAGS ===== */
.article-title {
  text-align: center;
  font-size: 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600 !important; /* Semibold */
  color: var(--sg-text-primary, var(--text-primary));
  margin-top: 28px;
  margin-bottom: 6px;
  line-height: 1.2;
}
.tags {
  text-align: center;
  font-size: 14px; /* IMPROVED: Was 0.85rem (~13.6px), now clear 14px */
  font-style: italic;
  font-weight: 500;
  color: var(--sg-text-muted);
  margin-bottom: 8px;
  line-height: 1.5; /* IMPROVED: Better readability */
  display: none; /* Hide hashtags when tile is closed */
}

/* ===== ARTICLE DATE ===== */
.article-date {
  text-align: left;
  font-size: 14px; /* IMPROVED: Was 0.9rem (~14.4px), now explicit 14px */
  font-weight: 700; /* Bold */
  color: var(--sg-text-primary, var(--text-primary));
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 16px;
  line-height: 1.5; /* IMPROVED: Better readability */
}

/* ===== PRELUDE ===== */
.prelude-section {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 4px 16px;
  line-height: 1.5;
}
.prelude-section .prelude-title {
  display: block;
  font-size: 1.18rem;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  color: var(--sg-text-primary);
  margin-bottom: 4px;
}
.prelude-section .prelude-body {
  display: block;
  font-size: 15px; /* IMPROVED: Was 0.96rem (~15.4px), now explicit 15px */
  font-style: italic;
  color: var(--sg-text-muted);
  text-align: center;
  line-height: 1.5; /* IMPROVED: Better readability */
}

/* ===== Q/A CONTENT ===== */
.content-area {
  margin-top: 10px;
  display: none;
}
.highlight-zone p {
  font-size: 1.18rem;
  color: var(--sg-text-light);
  text-align: justify;
  margin: 0 0 14px;
  padding: 0 10px;
  line-height: 1.625;
  hyphens: auto;
  text-justify: inter-word;
}
.highlight-zone .question {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sg-text-primary);
  text-align: left;
  margin-bottom: 0;
  text-shadow: none;
}
/* ===== END CONTENT RIBBONS ===== */
.end-content-ribbon-item {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
}

.end-content-ribbons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.end-content-ribbon-item {
  font-size: 13px; /* FIXED: Was 0.8rem (~12.8px), now 13px minimum */
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  line-height: 1.4; /* IMPROVED: Better readability */
}
.end-content-ribbon-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.ribbon-visual {
  background: #ff9800;
}
.ribbon-prelims {
  background: #673ab7;
}
/* ===== SUBTILE DISPLAY CONTENT ===== */
.sub-tile {
  display: none;
  background: var(--sg-soft-bg);
  border: 1.5px solid var(--sg-border-light);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
  font-size: 15px; /* IMPROVED: Was 0.95rem (~15.2px), now explicit 15px */
  color: var(--sg-text-primary);
  line-height: 1.5; /* IMPROVED: Better readability */
}
.sub-tile ul {
  padding-left: 20px;
}
.sub-tile li {
  margin-bottom: 8px;
  line-height: 1.6; /* IMPROVED: Was 1.45, now 1.6 for better readability */
}
/* ===== ARROW TOGGLE ===== */
.arrow-container {
  margin-top: 16px;
  margin-bottom: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.main-arrow-btn {
  background-color: transparent; /* Transparent background */
  border: 2px solid #6B6B6B; /* Dark gray border */
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease; /* Only transform on hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.main-arrow-btn:hover {
  /* No color change on hover */
  transform: scale(1.1);
}
.main-arrow-btn:hover .css-arrow {
  /* No color change on hover */
}
.css-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #6B6B6B; /* Dark gray arrow - always */
  transition: transform 0.3s ease-in-out;
}
.main-arrow-btn.rotated .css-arrow {
  transform: rotate(180deg);
}
.article-tile:not(.expanded) .prelude-section {
  display: none;
}
.article-tile.expanded .article-title {
  font-size: 1.65rem;
}

.article-tile.expanded .tags {
  font-size: 0.88rem;
  display: block; /* Show hashtags when tile is expanded */
}
.tile-separator {
    display: none; /* Completely hide separator */
}

/* Sara Button Yahin hai


/* ===== MAIN TILE: QUESTIONS & ANSWERS ===== */
.highlight-zone .question {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--font-weight-heading);
  color: var(--text-primary, #000);
  text-align: left;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); /* subtle shadow */
  margin: 12px 0 4px;
}


.highlight-zone p {
  /* Font styling now controlled by accordion-typography.css */
  color: var(--text-secondary, #555);
  text-align: justify;
  margin: 0 0 14px;
  padding: 0 10px;
  line-height: 1.6;
  hyphens: auto;
  text-justify: inter-word;
}

/* Mobile: remove justify for better readability on narrow screens */
@media (max-width: 768px) {
  .highlight-zone p {
    text-align: left;
    hyphens: none;
    text-justify: auto;
  }
}
/* ===== PRELIMS SUB-TILE DESIGN ===== */
/* ===== PRELIMS SUB-TILE DESIGN ===== */

/* Prelims Container */
.prelims-content-wrapper {
    background-color: #f3e5f5;
    border-left: 4px solid #7e57c2;
    border-radius: 8px;
    padding: 16px;
    margin-top: 10px; /* Adjust this value if you want more/less space above the box */

    /* Properties for scrolling */
    max-height: 200px; /* IMPORTANT: Adjust this value (e.g., 150px, 250px) to control the visible height of the scrollable area */
    overflow-y: auto; /* Adds a vertical scrollbar if content exceeds max-height */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #7e57c2 #f3e5f5; /* For Firefox (thumb color, track color) */
}

/* For Webkit browsers (Chrome, Safari, new Edge, Brave) scrollbar styling */
.prelims-content-wrapper::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.prelims-content-wrapper::-webkit-scrollbar-track {
    background: #f3e5f5; /* Color of the scrollbar track */
    border-radius: 10px; /* Makes the track rounded */
}

.prelims-content-wrapper::-webkit-scrollbar-thumb {
    background-color: #7e57c2; /* Color of the scrollbar thumb (the part you drag) */
    border-radius: 10px; /* Makes the thumb rounded */
    border: 2px solid #f3e5f5; /* Creates a small border around the thumb, matching track color */
}


/* Prelims Question Style */
.prelims-question {
    font-family: Arial, sans-serif;
    font-size: 14px; /* OK: Clear readable size */
    font-weight: bold; /* Makes the question text bold */
    color: #4A148C; /* Dark purple color for questions */
    text-align: center; /* Centers the question text */
    margin-top: 12px; /* Space above the question */
    margin-bottom: 4px; /* Space below the question */
    line-height: 1.5; /* IMPROVED: Better readability */
}

/* Prelims Answer Style */
.prelims-answer {
    font-family: Arial, sans-serif;
    font-size: 13px; /* FIXED: Was 12px, now 13px minimum */
    color: #333; /* Dark grey color for answers */
    text-align: justify; /* Makes text align to both left and right edges (like newspaper text) */
    text-justify: inter-word; /* Helps with justification in some browsers */
    text-align-last: left; /* Ensures the last line of justified text aligns left */
    line-height: 1.6; /* IMPROVED: Was 1.5, now 1.6 for better readability */
    margin: 0 12px 12px; /* Margin: Top 0, Left/Right 12px, Bottom 12px */
}
/* === Floating Image Viewer === */ .floating-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }



.floating-container { position: relative; background: var(--sg-card, white); border-radius: 12px; max-width: 90vw; max-height: 90vh; padding: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; align-items: center; overflow: hidden; }


.floating-image { max-width: 100%; max-height: 80vh; border-radius: 8px; object-fit: contain; }


.floating-controls { display: flex; justify-content: space-between; width: 100%; margin-top: 12px; }


.floating-button { font-size: 0.85rem; padding: 6px 12px; border-radius: 6px; background-color: #0d47a1; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; }


.floating-button:hover { background-color: #08306b; }




/* ===== Floating Image Viewer Modal ===== */
.floating-viewer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.floating-viewer.hidden {
  display: none;
}

/* Mindmap Close Button - Floating top-right */
.floating-image-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.floating-image-close:hover {
  background: rgba(255, 80, 80, 0.9);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

/* Save button group - positioned bottom right with hint above */
.viewer-save-group {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto; /* Ensure clickable even when content has pointer-events: none */
}

.viewer-hint {
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.viewer-save-btn {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.viewer-save-btn:hover {
  background: rgba(34, 139, 34, 0.8);
  border-color: rgba(255, 255, 255, 0.7);
}

.viewer-save-btn svg {
  stroke: white;
}

/* Mobile adjustments for viewer */
@media (max-width: 768px) {
  .floating-image-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  .viewer-save-group {
    bottom: 16px;
    right: 16px;
  }

  .viewer-hint {
    font-size: 11px;
    padding: 5px 10px;
  }

  .viewer-save-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Mindmap Image Container - Scroll to zoom, drag to pan */
.floating-image-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: auto; /* Enable for zoom/pan gestures */
}

/* Default cursor - changes based on zoom state via JS */
.floating-image-content.can-pan {
  cursor: grab;
}

.floating-image-content.can-pan:active {
  cursor: grabbing;
}

.floating-image-content img {
  pointer-events: auto; /* Image itself should be interactive for zoom/pan */
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}
/* your existing styles ... */
 
/* Removed CSS for Mark as Read button (goes here) */


/* === Highlight Palette === */
/* Horizontal chip style - consistent on all devices */
.highlight-palette {
  position: absolute;
  z-index: 9999;

  /* Horizontal chip design */
  background: #ffffff;
  border: 1.5px solid #ddd;
  border-radius: 24px; /* Pill shape, not full circle */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 16px;

  /* Horizontal layout */
  display: flex;
  flex-direction: row; /* Always horizontal */
  gap: 10px;
  align-items: center;

  /* Ensure chip stays horizontal */
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
}

/* --- Color Buttons (Consolidated & Minimized) --- */
.highlight-palette .color-btn {
width: 22px; /* Smallest width found */
height: 22px; /* Smallest height found */
border-radius: 50%;
border: none; /* Smallest border found (no border) */
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: inset 0 0 0 1px #444; /* Smallest box-shadow found, for subtle outline */
}

.highlight-palette .color-btn:hover {
transform: scale(1.15); /* Keep the clean hover effect */
box-shadow: inset 0 0 0 1px #444, 0 0 5px rgba(0,0,0,0.2); /* Add a subtle outer glow on hover */
}

/* --- Tick Button (Consolidated & Minimized) --- */
.highlight-palette .tick-btn {
font-size: 16px; /* Smallest font-size found */
padding: 0 10px; /* Smallest padding found */
background-color: #4CAF50;
color: white;
border: none;
border-radius: 6px; /* Smallest border-radius found */
cursor: pointer;
font-weight: 600;
display: none; /* Initially hidden */
transition: background-color 0.2s ease;
}

.highlight-palette .tick-btn:hover {
background-color: #45a049;

}

/* Remove Highlight Button (Old - kept for compatibility) */
.highlight-palette .remove-highlight-btn {
font-size: 20px;
padding: 8px 16px;
background-color: #f44336; /* Red color for remove action */
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
transition: background-color 0.2s ease;
}

.highlight-palette .remove-highlight-btn:hover {
background-color: #d32f2f; /* Darker red on hover */
}

/* ✨ NEW: Remove Button (Click/Long Press on Highlight) - Same size as color palette */
.remove-highlight-button {
  z-index: 10000;
}

.remove-btn-content {
  display: flex;
  align-items: center;
  gap: 4px;                      /* Smaller gap */
  padding: 0 10px;               /* Match tick button padding */
  background-color: #f44336;     /* Red */
  color: white;
  border: none;
  border-radius: 6px;            /* Match tick button radius */
  cursor: pointer;
  font-size: 14px;               /* Smaller font */
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3); /* Smaller shadow */
  transition: all 0.2s ease;
}

.remove-btn-content:hover {
  background-color: #d32f2f;     /* Darker red */
  transform: scale(1.15);        /* Match color button hover */
}

.remove-x {
  font-size: 16px;               /* Smaller X */
  font-weight: 700;
}

.remove-text {
  font-size: 12px;               /* Smaller text */
  font-weight: 600;
}

/* --- The actual highlight span styling --- */

.custom-highlight {
border-radius: 3px;
padding: 0 2px;
cursor: pointer; /* Show it's clickable */
transition: opacity 0.2s ease;
}

.custom-highlight:hover {
opacity: 0.8; /* Subtle feedback on hover */
}

.highlight-yellow { background-color: #ffe082; }  /* Gold */

.highlight-green  { background-color: #c5e1a5; }  /* Sage */

.highlight-blue   { background-color: #d1c4e9; }  /* Lavender */

.highlight-pink   { background-color: #ffccbc; }  /* Peach */

/* Shared highlights from friend - teal/cyan color to distinguish */
.highlight-shared {
  background-color: #b2ebf2;
  border-bottom: 2px dashed #00acc1; /* Dashed border to show it's from someone else */
}


/* === Toast Notifications === */
.toast-container {
  position: fixed;
  top: 80px; /* Below header */
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.toast {
  background: var(--sg-card, #ffffff);
  border: 1.5px solid var(--sg-border, #e0e0e0);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--sg-shadow-card, 0 2px 8px rgba(0, 0, 0, 0.1));
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #141313);
  animation: toast-slide-in 0.3s ease;
  transition: opacity 0.3s ease;
}

.toast-success {
  border-left: 4px solid #4CAF50;
}

.toast-error {
  border-left: 4px solid #f44336;
}

.toast-warning {
  border-left: 4px solid #ff9800;
}

.toast-info {
  border-left: 4px solid #2196F3;
}

.toast-fadeout {
  opacity: 0;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile: Move toast to bottom center */
@media (max-width: 768px) {
  .toast-container {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    max-width: calc(100% - 40px);
  }

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



/* 🔒 Block text selection for all disallowed areas */
body,
.article-title,
.tags,
.prelude-section .prelude-title,
.prelude-section .prelude-body,
.highlight-zone .question,
.source-ribbon,
.usability-ribbon,
.end-content-ribbon-item,
.sub-tile,
.prelims-content-wrapper li strong,
.prelims-content-wrapper li span,
.prelims-question,
.article-date,
.read-button,
.ticks {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

/* ✅ Allow text selection ONLY in these */
.highlight-zone p,
.prelims-answer {
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
}
/* ========== Text Selection CSS ========== */

/* ❌ DEFAULT: Disable selection EVERYWHERE */
* {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
}

/* ✅ EXCEPTION: Allow selection ONLY in answer paragraphs (main content and prelims) */
/* Must also target all child elements (b, i, u, strong, em, span) to override the * rule */
.answer,
.prelims-qa-answer,
.answer *,
.prelims-qa-answer * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
  -moz-user-select: text !important;
}

/* ========== PARAGRAPH IMAGES (Q&A Section Images) ========== */
/* Unified height preview with expand/magnify controls */

/* Center the inline-block wrapper within parent */
.qa-item {
  text-align: center;               /* Center the image wrapper */
}

.qa-item .question,
.qa-item .answer {
  text-align: left;                 /* Keep text left-aligned */
}

.content-image-wrapper {
  display: inline-block;            /* Shrink to fit image width */
  width: auto;                      /* Natural width based on image */
  max-width: 100%;                  /* Don't exceed container */
  margin: 24px auto;                /* Centered with vertical spacing */
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  padding: 8px;
  background: var(--bg-primary, #ffffff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  line-height: 1.5;
  position: relative;
}

.content-image-container {
  position: relative;
  display: block;
  height: 200px;                    /* UNIFIED HEIGHT - cropped preview */
  overflow: hidden;                 /* Hide overflow for cropped view */
  border-radius: 8px;
  transition: height 0.3s ease;     /* Smooth expand animation */
}

/* Expanded state - show full image */
.content-image-container.expanded {
  height: auto;                     /* Full height when expanded */
}

.content-image {
  width: auto;                      /* Natural width of image */
  max-width: 100%;                  /* Don't exceed container */
  height: auto;                     /* Maintain aspect ratio */
  border-radius: 8px;
  display: block;
}

/* Expand button (top-right) */
.image-expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;                     /* Always visible */
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  z-index: 5;
}

.image-expand-btn svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.image-expand-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
  opacity: 1;
}

/* Magnifier icon (bottom-right) */
.image-magnifier {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;                     /* Always visible */
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  z-index: 5;
}

.image-magnifier svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.image-magnifier:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
  opacity: 1;
}

.image-caption {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin-top: 8px;
  font-weight: 500;
  padding: 0 8px;
  line-height: 1.5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .content-image-wrapper {
    width: 95%;
    max-width: none;
    margin: 16px auto;
  }

  .content-image-container {
    height: 150px;                  /* Slightly smaller on mobile */
  }

  .image-expand-btn,
  .image-magnifier {
    width: 32px;
    height: 32px;
    opacity: 0.9;                   /* More visible on mobile */
  }

  .image-expand-btn svg,
  .image-magnifier svg {
    width: 18px;
    height: 18px;
  }
}

/* ========== Block Mobile Print Visibility ========== */
@media print {
  body {
    display: none !important;
  }
}
/* Disable text/image selection globally unless explicitly allowed */
body, img, .no-save {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Block iOS Safari long-press save action */
img, .no-save {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ✅ EXCEPTION: Enable touch/click events on highlighted spans */
.custom-highlight {
  -webkit-touch-callout: auto !important;
  pointer-events: auto !important;
  -webkit-user-drag: auto !important;
}

/* Optional: Allow readable areas only */
.readable-content,
.highlight-zone p,
.prelims-answer {
  user-select: text !important;
  pointer-events: auto;
}
/* Tooltip container inside the read button */
.read-button::after {
  content: "Click this to:\A~ Add Summary\A~ Add Bookmark\A~ Schedule Revision\A~ Vote in for PDF !!";
  white-space: pre; /* Keep newlines */
  position: absolute;
  background: #2c3e50;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px; /* FIXED: Was 10px, now 13px minimum */
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 9999;
  bottom: 120%; /* place above the button */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  line-height: 1.6; /* IMPROVED: Was 1.5, now 1.6 for better readability */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.tile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}
/* Tool Tip for Homepage Tiles */
.tile-tooltip {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fef3c0; /* Mustard Yellow */
  border: 2px solid #a2d2ff; /* Light Blue */
  color: #4b3900; /* Strong readable color */
  padding: 20px 24px;
  border-radius: 10px;
  font-size: 19px; /* IMPROVED: Was 1.2rem (~19.2px), now explicit 19px */
  font-weight: 400;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  text-align: left;
  line-height: 1.6; /* OK: Already good */
}

.tile-tooltip ul {
  list-style-type: disc;
  padding-left: 1.2em;
  margin: 10px 0 0 0;
}

.tile-tooltip li {
  margin-bottom: 8px;
}

/* ===== PRELIMS POINTERS OVERLAY ===== */
.prelims-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(128, 128, 128, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.prelims-overlay.hidden {
  display: none;
}

/* Prelims Overlay Header - Repositioned for close button only */
.prelims-overlay-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10001;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: block;
}

/* Hide title from header (will appear in content instead) */
.prelims-overlay-header .prelims-overlay-title {
  display: none;
}

/* Prelims Close Button - Floating Top-Right Corner */
.prelims-overlay-close {
  position: relative;
  top: 20px;
  right: 20px;
  background: #fc7306;
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.prelims-overlay-close:hover {
  background: #e45e00;
  transform: scale(1.1);
}

/* Prelims Title - Styled for inside content box */
.prelims-overlay-content .prelims-overlay-title {
  font-family: Arial, sans-serif;
  font-size: 21px; /* IMPROVED: Was 1.3rem (~20.8px), now explicit 21px */
  font-weight: bold;
  color: #fc7306;
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(252, 115, 6, 0.2);
  display: block;
  line-height: 1.4; /* IMPROVED: Better readability */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .prelims-overlay-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .prelims-overlay-content .prelims-overlay-title {
    font-size: 18px; /* IMPROVED: Was 1.1rem (~17.6px), now explicit 18px */
    margin-bottom: 20px;
    padding-bottom: 12px;
    line-height: 1.4; /* IMPROVED: Better readability */
  }
}

@media (max-width: 480px) {
  .prelims-overlay-close {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

.prelims-overlay-content {
  background: var(--sg-card, white);
  border-radius: 12px;
  max-width: 900px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  margin-top: 60px; /* Reduced - no header bar needed */
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  .prelims-overlay-content {
    margin-top: 60px;
    width: 95%;
    padding: 24px;
    max-height: 85vh;
  }
}

@media (max-width: 480px) {
  .prelims-overlay-content {
    padding: 20px;
  }
}

.prelims-overlay-content::-webkit-scrollbar {
  width: 8px;
}

.prelims-overlay-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.prelims-overlay-content::-webkit-scrollbar-thumb {
  background-color: #fc7306;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

.prelims-qa-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.prelims-qa-item:last-child {
  border-bottom: none;
}

.prelims-qa-question {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 22px; /* IMPROVED: Was 1.38rem (~22.1px), now explicit 22px */
  font-weight: bold;
  color: #1f2937;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  line-height: 1.4; /* IMPROVED: Better readability */
}

.prelims-qa-answer {
  font-size: 19px; /* IMPROVED: Was 1.20rem (~19.2px), now explicit 19px */
  color: #4b5563;
  text-align: justify;
  margin: 0;
  padding: 0 10px;
  line-height: 1.625; /* OK: Already good */
  hyphens: auto;
  text-justify: inter-word;
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
}

.prelims-scroll-indicator {
  display: none !important;
}

/* Mobile Responsive Adjustments for Prelims */
@media (max-width: 768px) {
  .prelims-overlay-content {
    width: 95%;
    max-height: 70vh;
    padding: 16px;
  }

  .prelims-overlay-title {
    font-size: 1.1rem;
    padding: 6px 12px;
  }

  .prelims-overlay-close {
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
  }

  .prelims-qa-item {
    padding: 12px;
    margin-bottom: 16px;
  }

  .prelims-qa-question {
    font-size: 16px;
    line-height: 1.5;
  }

  .prelims-qa-answer {
    font-size: 14px;
    line-height: 1.6;
  }
}


/* Till here */