@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merriweather&display=swap');

/* Palette variables removed (now sourced exclusively from base.css).
   If you need page-specific overrides, declare ONLY the differing tokens here. */

html { scroll-behavior: smooth; }
/* Global reset to prevent unexpected overflow */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

/* --- COLOURS BASED ON YOUR USE CASE --- */
body {
  margin: 0;
  padding: 0;
  background: var(--bg) url('../../dark paper.jpg') center center/cover no-repeat;
  font-family: 'Merriweather', serif;
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body img,
body video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scroll banner container */
/* Header: tabs on top, title just underneath */
#header {
  width: 100%;
  position: relative;
  padding: 16px clamp(18px, 5vw, 60px) 0;
  box-sizing: border-box;
  z-index: 10;
}

/* Title container sits below the tab bar */
#scroll {
  width: 100%;
  background: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ink);
  text-align: center;
  user-select: none;
  position: relative;
  overflow: visible;
  z-index: 2;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
}

#scroll h1 {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2.2rem, 1.8rem + 2.2vw, 3.4rem);
  margin: 0;
  user-select: none;
  text-shadow: 2px 2px 8px var(--surface), 0 2px 12px var(--border);
  color: #000;
  position: relative;
  z-index: 10;
  pointer-events: none;
  border-bottom: 3px solid var(--border);
  padding-bottom: 3px;
  /* Animation */
  transform-origin: center;
  animation: scrollTitleUnroll 0.8s 0s cubic-bezier(0.8,0,0.2,1) forwards;
}

@keyframes scrollTitleUnroll {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  10% {
    opacity: 1;
    transform: scaleX(0.1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

#scroll p {
  margin: 4px 0 0 0;
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  text-shadow: 1px 1px 0 var(--border);
  opacity: 0;
  transform: translateY(20px);
  animation: revealSubtitle 1.2s 1.2s forwards cubic-bezier(0.7,0,0.3,1);
  color: var(--ink);
  position: relative;
  z-index: 3;
}

@media (max-width: 1024px) {
  #header {
    padding-top: 40px;
  }
  #scroll {
    margin-top: 46px;
  }
  #scroll h1 {
    font-size: clamp(1.3rem, 1.1rem + 1.4vw, 1.9rem);
  }
}

@keyframes revealSubtitle {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- BANNER BUTTONS TO CORNERS --- */
/* Banner buttons now participate directly in header grid */
.banner-buttons {
  display: contents; /* Allow child cols to occupy grid cells */
}
.banner-buttons-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  pointer-events: auto;
  margin: 0 8px;
}
.banner-buttons-col.left { grid-area: left; justify-self: start; align-items: center; }
.banner-buttons-col.right { grid-area: right; justify-self: end; align-items: center; }
.banner-buttons .pen-link-banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  transition: color 0.2s;
  margin: 0;
  padding: 0;
}
.banner-buttons .pen-link-banner span {
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 1px 2px 4px var(--border);
  margin-left: 0;
  margin-right: 0;
  display: inline-block;
  color: var(--ink);
}
/* Comments & reply interface */
#right-sidebar {
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 2px 8px var(--shadow-soft), inset 0 0 8px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#right-sidebar h3 {
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
  font-family: 'Great Vibes', cursive;
  font-size: 1.9rem;
  margin: 0;
}
#comments {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border-radius: 12px;
  padding: 8px 6px 12px;
}

/* Mobile comments card wrapper to cover any artifacts above the title */
@media (max-width: 600px) {
  #right-sidebar {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  #comments {
    background: var(--surface);
    border-radius: 16px;
    padding: 12px 10px 14px;
    margin-top: 8px;
    box-shadow: 0 2px 8px var(--shadow-soft);
  }

  #sidebar-title {
    margin: 0 4px -6px;
    padding: 10px 10px 0;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
  }
}
.comment {
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 1px 3px var(--shadow-soft);
  border-left: 4px solid var(--border);
  max-width: 90%;
  transition: all 0.2s ease;
}
.comment:hover {
  box-shadow: 0 2px 6px var(--shadow-med);
  transform: translateY(-1px);
}
.comment.highlighted {
  background: var(--accent-contrast);
  box-shadow: 0 0 12px var(--shadow-med), 0 2px 8px var(--shadow-soft);
  border-left-color: var(--accent);
  transform: scale(1.02);
}
.comment.me {
  align-self: flex-end;
  background: var(--accent-contrast);
  border-left-color: var(--accent);
}
.comment-author {
  font-weight: 700;
  margin-bottom: 6px;
  color: #a0522d;
  font-size: 0.95rem;
}
.comment-text {
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.5;
}
.reply-box { margin-top: 10px; display: grid; gap: 8px; }

/* Hide full comments sidebar on Suggested and Settings pages for tablets/phones */
@media (max-width: 1024px) {
  body.suggested-page #right-sidebar,
  body.settings-page #right-sidebar {
    display: none;
  }
  body.suggested-page #content-area,
  body.settings-page #content-area {
    display: block;
    grid-template-columns: 1fr !important;
  }
}
.reply-row { display: flex; gap: 8px; min-width: 0; align-items: stretch; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.reply-input-wrap { position: relative; flex: 1; display: flex; align-items: stretch; min-width: 0; }
.reply-input-wrap input[id^="reply"] {
  flex: 1;
  padding: 11px 45px 11px 14px;
  border-radius: 25px 0 0 25px;
  border: 2px solid #bfa97c;
  background: #fff9f0;
  font-family: 'Merriweather', serif;
  color: var(--ink);
  min-width: 0;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.reply-input-wrap input[id^="reply"]:focus {
  outline: none;
  border-color: #a0522d;
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1);
  background: #fff;
}
[id^="reply-toggle"] {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #ede2c7;
  color: #3e2f20;
  border: 2px solid #bfa97c;
  border-radius: 8px;
  padding: 4px 10px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(191, 169, 124, 0.3);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}
[id^="reply-toggle"]:hover {
  background: #a0522d;
  color: var(--accent-contrast);
  border-color: #8b5e3c;
  transform: translateY(-50%) scale(1.05);
}
[id^="reply-send"] {
  padding: 11px 26px;
  background: #a0522d;
  border: none;
  color: var(--accent-contrast);
  font-weight: 700;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  font-family: 'Merriweather', serif;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(112, 90, 58, 0.3);
  font-size: 0.95rem;
}
[id^="reply-send"]:hover {
  background: #b8774d;
  color: var(--accent-contrast);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(112, 90, 58, 0.4);
}
[id^="reply-send"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(112, 90, 58, 0.3);
}
[id^="reply-suggestions"] {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #f5f0e6;
  border: 2px solid #a39363;
  border-radius: 10px;
  box-shadow: inset 0 0 6px #bfa97c, 0 4px 12px rgba(0,0,0,0.15);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}
[id^="reply-suggestions"][hidden] { display: none; }
[id^="reply-suggestions"] .option { padding: 8px 10px; cursor: pointer; border-bottom: 1px dotted #bfa97c; }
[id^="reply-suggestions"] .option:last-child { border-bottom: none; }
[id^="reply-suggestions"] .option[aria-selected="true"],
[id^="reply-suggestions"] .option:hover { background: #f3e9d2; }
[id^="reply-suggestions"] { scrollbar-width: thin; scrollbar-color: #a39363 #f5f0e6; }
[id^="reply-suggestions"]::-webkit-scrollbar { width: 8px; }
[id^="reply-suggestions"]::-webkit-scrollbar-track { background: #f5f0e6; border-radius: 8px; box-shadow: inset 0 0 4px #bfa97c; }
[id^="reply-suggestions"]::-webkit-scrollbar-thumb { background: #a39363; border-radius: 8px; border: 2px solid #f5f0e6; }
[id^="reply-suggestions"]::-webkit-scrollbar-thumb:hover { background: #8e7e56; }
.banner-buttons .pen-link-banner:hover span {
  color: var(--accent-contrast);
  background: #a0522d;
}
.pen-link-banner .pen-icon {
  font-size: 1.3em;
  margin-right: 6px;
  vertical-align: middle;
}

/* Floating quick navigation (bottom-left) */
.quick-nav { position: fixed; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.quick-nav a { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
background: var(--surface); color: var(--ink); border: 2px solid var(--border); border-radius: 50%; box-shadow: 1px 2px 4px var(--shadow-soft); font-size: 22px; }
.quick-nav a:hover { background: #a0522d; color: #fdf8ef; }

/* --- SEARCH BAR --- */
#search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 32px 0;
  background: var(--surface-2);
  border-radius: 32px;
  box-shadow: 0 2px 8px var(--shadow-soft);
  padding: 10px 18px;
  /* Wider on desktop, fluid on smaller screens */
  width: min(640px, 92vw);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--border);
}
#search-bar:hover,
#search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--shadow-med), 0 0 0 3px rgba(160,82,45,0.15);
  background: var(--surface);
}
#search-bar input[type="text"] {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: var(--ink);
  font-family: 'Merriweather', serif;
  padding: 8px 12px;
  outline: none;
  flex: 1;
}
#search-bar button {
  border-radius: 20px;
  margin-left: 8px;
  padding: 8px 20px;
  font-size: 1.1rem;
  background: var(--accent);
  color: var(--accent-contrast);
}
#search-bar button:hover { filter: brightness(1.05); }
#search-bar button:active { transform: translateY(1px); filter: brightness(0.95); }

@media (max-width: 1024px) {
  #search-bar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 24px;
    padding: 10px 14px;
  }
}

/* --- MAIN CONTENT --- */
#main {
  background: var(--surface);
  border-radius: 12px;
  padding: 15px 25px;
  box-shadow: inset 0 0 10px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink);
}
#main, #latest-submissions, #news {
  background: var(--surface);
  color: var(--ink);
}

#home-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#about-view { display: none; flex-direction: column; gap: 20px; }
#about-view.active { display: flex; }
.hidden-section { display: none !important; }

#about-view section {
  background: #f5f0e6;
  border-radius: 12px;
  box-shadow: inset 0 0 8px #bfa97c;
  padding: 16px 20px;
}
#about-view h2 {
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  margin: 0 0 10px;
  text-align: center;
  color: #2f3e46;
  border-bottom: 2px solid #bfa97c;
  padding-bottom: 4px;
}
#about-view details {
  background: #fff9f0;
  border: 1px solid #d8c9a4;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
#about-view details summary { cursor: pointer; font-weight: 700; color: #3e2f20; }
#about-view details summary::-webkit-details-marker { color: #a0522d; }
#about-view details p { margin: 8px 0 0 0; padding-left: 18px; color: #4b3b2b; }
#about-view ul { margin: 8px 0 0 0; padding-left: 24px; }
#about-view li { margin-bottom: 6px; }

/* --- BUTTONS --- */
#search-bar button,
#chatbot button {
  padding: 12px 24px;
  background: #8b5e3c;
  border: none;
  color: #fdf8ef;
  font-weight: 700;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  font-family: 'Merriweather', serif;
  transition: background 0.3s ease;
  box-shadow: 2px 2px 5px #705a3a;
}
#search-bar button:hover,
#chatbot button:hover { background: #a0522d; color: #fdf8ef; }

/* --- LATEST SUBMISSIONS --- */
#latest-submissions {
  background: var(--surface);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 8px var(--shadow-soft);
  color: var(--ink);
}
#latest-submissions h2 {
  margin-top: 0;
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  text-align: center;
  color: var(--ink);
  border-bottom: 2px solid #bfa97c;
  padding-bottom: 4px;
}
#latest-submissions ul { list-style: none; padding-left: 0; font-family: 'Merriweather', serif; color: #4b3b2b; }
#latest-submissions li { padding: 6px 0; cursor: pointer; border-bottom: 1px dotted #a39363; }
#latest-submissions li:hover { color: #a39363; }
#latest-submissions .excerpt { font-size: 1rem; color: #7c8b62; font-style: italic; margin-top: 2px; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid #a39363; }

/* --- NEWS SECTION --- */
#news {
  background: var(--surface);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 8px var(--shadow-soft);
  font-family: 'Merriweather', serif;
  color: var(--ink);
}
#news h2 { font-family: 'Great Vibes', cursive; font-size: 2rem; margin-top: 0; text-align: center; color: var(--ink); border-bottom: 2px solid #bfa97c; padding-bottom: 4px; }
/* Submit CTA at bottom-right of competition section */
#news .news-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
/* Unified action button style */
.action-btn {
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--submit-btn-color);
  background: var(--submit-btn-bg);
  padding: 8px 16px;
  border-radius: 10px;
  box-shadow: 1px 2px 4px var(--submit-btn-shadow);
  border: 2px solid var(--submit-btn-border);
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.action-btn:focus { outline: 3px solid var(--focus-ring); outline-offset:3px; }
.action-btn:hover { background: var(--submit-btn-hover-bg); color: var(--submit-btn-hover-color); transform: translateY(-2px); box-shadow: 2px 4px 10px rgba(0,0,0,0.32); }
.action-btn:active { transform: translateY(0); box-shadow: 1px 2px 4px var(--submit-btn-shadow); }
.action-btn .badge-tag { font-size: .65rem; font-weight: 800; background: #a0522d; color: #fff; padding: 2px 6px; border-radius: 6px; letter-spacing: .5px; text-transform: uppercase; }
/* Generic action container */
.news-actions { display:flex; justify-content:center; gap:10px; }
@media (max-width:600px){ .action-btn { padding: 6px 12px; font-size: .85rem; border-radius: 8px; } .action-btn .badge-tag { display:none; } }

/* --- CHATBOT --- */
#chatbot-messages { flex: 1; background: #ede2c7; border-radius: 8px; padding: 10px; overflow-y: auto; font-size: 0.9rem; margin-bottom: 10px; box-shadow: inset 2px 2px 5px #bfa97c; color: #3e2f20; }
#chatbot input[type="text"] { border: none; padding: 10px; font-size: 1rem; border-radius: 8px; outline: none; font-family: 'Merriweather', serif; background: #fdf8ef; color: #3e2f20; }

/* --- TAB SWITCHER (from userpage.html) --- */
#tab-switcher {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 2px 5px var(--shadow-soft);
  margin-top: 12px;
}
.tab-btn {
  flex: 1;
  background: var(--surface-2);
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  font-family: var(--font-serif);
  cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.tab-btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px var(--shadow-mid);
}
.tab-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  box-shadow: 0 2px 6px var(--shadow-mid);
}
.tab-btn .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  display: none;
  box-shadow: 0 1px 3px var(--shadow-soft);
}
.tab-btn.active .badge { background: var(--danger); }

/* AI messages list styled like comments */
#ai-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { background: #f5f0e6; padding: 12px 16px; border-radius: 16px; box-shadow: 0 1px 3px rgba(191, 169, 124, 0.3); border-left: 4px solid #bfa97c; max-width: 90%; transition: all 0.2s ease; }
.ai-msg:hover { box-shadow: 0 2px 6px rgba(160, 82, 45, 0.25); transform: translateY(-1px); }
.ai-msg.me { align-self: flex-end; background: #fff9f0; border-left-color: #a0522d; }
.ai-author { font-weight: 700; margin-bottom: 6px; color: #a0522d; font-size: 0.95rem; }
.ai-text { font-style: italic; color: #705a3a; line-height: 1.5; }

/* AI input styling */
#ai-input { flex: 1; padding: 11px 14px; border-radius: 25px 0 0 25px; border: 2px solid #bfa97c; background: #fff9f0; font-family: 'Merriweather', serif; color: #3e2f20; min-width: 0; font-size: 0.95rem; transition: all 0.2s ease; }
#ai-input::placeholder { color: #8e7e56; opacity: 1; }
#ai-input:focus { outline: none; border-color: #a0522d; box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.1); background: #fff; }
#ai-send { padding: 11px 26px; background: #a0522d; border: none; color: #fdf8ef; font-weight: 700; border-radius: 0 25px 25px 0; cursor: pointer; font-family: 'Merriweather', serif; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(112, 90, 58, 0.3); font-size: 0.95rem; }
#ai-send:hover { background: #b8774d; color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(112, 90, 58, 0.4); }
#ai-send:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(112, 90, 58, 0.3); }

/* Scrollbar for AI messages */
#ai-messages { scrollbar-width: thin; scrollbar-color: #bfa97c #ede2c7; }
#ai-messages::-webkit-scrollbar { width: 10px; }
#ai-messages::-webkit-scrollbar-track { background: #ede2c7; border-radius: 10px; }
#ai-messages::-webkit-scrollbar-thumb { background-color: #bfa97c; border-radius: 10px; border: 2px solid #ede2c7; }
#ai-messages::-webkit-scrollbar-thumb:hover { background-color: #a0522d; }

/* --- SCROLLBAR --- */
#latest-submissions ul::-webkit-scrollbar,
#chatbot-messages::-webkit-scrollbar { width: 6px; }
#latest-submissions ul::-webkit-scrollbar-thumb,
#chatbot-messages::-webkit-scrollbar-thumb { background-color: #a39363; border-radius: 3px; }

/* --- GRID LAYOUT FOR CONTENT AREA --- */
#content-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4px clamp(14px, 4vw, 34px) 24px;
  width: 100%;
  align-items: stretch; /* ensure equal-height columns */
  min-height: 0;
}


/* Phone-specific polish for comments/AI area to prevent crumbling */
@media (max-width: 600px) {
  /* Keep sidebar as a single joined card */
  #right-sidebar {
    padding: 12px 10px;
    width: 100%;
    border-radius: 18px;
  }

  /* Let the existing desktop card styling for #comments provide the background */
  #sidebar-title { background: transparent; }

  .reply-row { gap: 6px; }
  .reply-input-wrap input[id^="reply"] { padding: 10px 38px 10px 12px; font-size: 0.9rem; }
  [id^="reply-send"] { padding: 10px 14px; }

  #comments .comment,
  #ai-messages .ai-msg {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }

  .reply-row {
    flex-direction: column;
    align-items: stretch;
  }

  [id^="reply-send"],
  #ai-send {
    width: 100%;
    border-radius: 22px;
  }
}

/* Fluid base typography for better scaling */
body { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem); }

/* Single-column layout when right sidebar is removed */
body.no-right-sidebar #content-area { grid-template-columns: 1fr !important; }

/* Dark mode: delegate to CSS variables for consistency across pages */
body.dark-mode { background: var(--bg) url('../../dark paper.jpg') center center/cover no-repeat; color: var(--ink); }
/* Cards/sections */
body.dark-mode #main,
body.dark-mode #latest-submissions,
body.dark-mode #news,
body.dark-mode #right-sidebar {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px var(--shadow-soft), inset 0 0 8px var(--shadow-soft);
  border-color: var(--border);
}
/* Header/title/buttons */
body.dark-mode #scroll h1 { color: #000; border-bottom-color: var(--border); text-shadow: 1px 1px 6px rgba(0,0,0,0.35); }
body.dark-mode .banner-buttons .pen-link-banner span { background: var(--surface); color: var(--ink); box-shadow: 1px 2px 4px var(--shadow-soft); border: 1px solid var(--border); }
body.dark-mode .banner-buttons .pen-link-banner:hover span { background: var(--accent); color: var(--accent-contrast); }
/* Search bar */
body.dark-mode #search-bar { background: var(--surface-2); border-color: var(--border); box-shadow: 0 2px 8px var(--shadow-soft); }
body.dark-mode #search-bar input[type="text"] { color: var(--ink); }
body.dark-mode #search-bar button { background: var(--accent); color: var(--accent-contrast); }
/* Lists and text blocks */
body.dark-mode #latest-submissions li { border-bottom-color: var(--border); }
body.dark-mode #latest-submissions .excerpt { color: var(--ink-muted); border-left-color: var(--border); }
/* Comments/AI */
body.dark-mode .comment, body.dark-mode .ai-msg { background: var(--surface-2); color: var(--ink); border-left-color: var(--accent); }
body.dark-mode .ai-author, body.dark-mode .comment-author { color: var(--accent); }
/* Inputs and buttons */
body.dark-mode #ai-input, body.dark-mode .reply-input-wrap input[id^="reply"] { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
body.dark-mode #ai-send, body.dark-mode [id^="reply-send"] { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 2px 5px var(--shadow-soft); }
body.dark-mode [id^="reply-toggle"] { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
/* Tabs */
body.dark-mode .tab-btn { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
body.dark-mode .tab-btn:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
body.dark-mode .tab-btn.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* Footer */
body.dark-mode footer { background: var(--surface); color: var(--ink); border-top-color: var(--border); }
/* Quick nav */
body.dark-mode .quick-nav a { background: var(--surface-2); color: var(--ink); border-color: var(--border); box-shadow: none; }

/* Ensure all columns fill available height */
#main, #right-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

/* Make sidebars fill the height of the main section */
#right-sidebar {
  justify-content: stretch;
  flex: 1 1 0;
  height: 100%;
}

/* Make main section grow to fit content */
#main { flex: 1 1 auto; }

/* Footer styling */
footer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
  background: #ede2c7;
  color: #4b3b2b;
  font-size: 0.9rem;
  border-top: 2px solid #bfa97c;
  border-radius: 12px;
  box-shadow: 0 -2px 8px rgba(191, 169, 124, 0.2);
  user-select: none;
  margin: 40px auto 24px;
  width: calc(100% - 40px);
  max-width: 1200px;
}

@media (max-width: 1280px) {
  #content-area { gap: 20px; margin-top: 16px; padding: 0 3vw; }
  #main { padding: 14px 18px; gap: 18px; }
  #right-sidebar { padding: 20px 18px; gap: 14px; }
}

/* Responsive: stack columns on small screens */
@media (max-width: 1024px) {
  #content-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 96vw;
    margin: 8px auto 0;
    padding: 0;
  }
  #right-sidebar,
  #main {
    max-width: 100%;
    height: auto;
    min-height: 0;
  }
  #main { padding: 12px 14px; gap: 16px; }
  #right-sidebar {
    padding: 16px 14px;
    gap: 12px;
    height: auto;
    max-height: none;
    overflow: visible;
    position: relative;
    isolation: isolate;
    z-index: 1;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
  }
  /* Force comments to take up space */
  #comments, #ai-messages { 
    flex: none; 
    height: auto; 
    min-height: auto; 
    max-height: none; 
    overflow: visible; 
  }
  
  #sidebar-title { order: 1; }
  #comments { order: 2; }
  #ai-messages { order: 3; }
  #reply-box { order: 4; }
  #ai-input-box { order: 5; }
  #tab-switcher { order: 6; }
  
  #scroll { width: 100%; min-width: 0; max-width: 100vw; }
}

@media (min-width: 601px) and (max-width: 1024px) { #content-area { margin-top: 0; } }

@media (max-width: 768px) {
  #content-area {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 10px 16px;
  }
  #main { order: 1; }
  #right-sidebar { 
    order: 2; 
    padding: 16px 12px; 
    gap: 12px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 8px var(--shadow-soft), inset 0 0 6px var(--shadow-soft);
    background: var(--surface);
  }
  #sidebar-title { order: 1; background: transparent !important; }
  #comments { background: transparent !important; padding: 0 !important; border-radius: 0 !important; order: 2; margin-top: 8px; }
  #ai-messages { order: 3; margin-top: 8px; }
  #reply-box { order: 4; margin-top: 10px; }
  #ai-input-box { order: 5; margin-top: 10px; }
  #tab-switcher { 
    order: 6; 
    margin-top: 10px;
    margin-bottom: 6px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  #comments,
  #ai-messages,
  #reply-box,
  #ai-input-box,
  #tab-switcher {
    width: 100%;
    flex: none;
  }
  .tab-btn {
    flex: 1 1 45%;
    min-width: 140px;
  }
}

/* Desktop tightening */
@media (min-width: 1025px) {
  #content-area { margin-top: 0; }
  #search-bar { margin-top: 0; }
  #header { padding-top: 12px; padding-bottom: 4px; }
}

/* Extra mobile optimizations */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  #header { gap: 8px; padding: 10px 12px 8px; grid-template-columns: max-content 1fr max-content; grid-template-areas: 'left center right'; }
  .banner-buttons-col { margin: 0; gap: 0; }
  .banner-buttons .pen-link-banner span { padding: 4px 8px; font-size: 0.8rem; }
  /* Smaller title so it always fits between buttons without horizontal scroll */
  #scroll h1 { font-size: clamp(1.5rem, 1.2rem + 3vw, 2rem); padding-bottom: 2px; margin: 0; }
  #scroll p { font-size: 0.95rem; display: none; }
  #search-bar { flex-direction: row; padding: 8px 12px; max-width: 100%; margin: 8px 0 4px; width: 100%; box-sizing: border-box; }
  #search-bar input[type="text"] { font-size: 0.95rem; padding: 8px 10px; flex: 1; }
  #search-bar button { font-size: 0.9rem; padding: 8px 14px; width: auto; margin-left: 8px; margin-top: 0; border-radius: 10px; }
  #content-area { gap: 10px; padding: 0 10px 16px; margin: 0 auto; }
  #main { padding: 12px 8px; gap: 8px; }
  #latest-submissions { padding: 10px 12px; }
  #latest-submissions h2, #news h2 { font-size: 1.4rem; }
  #news { padding: 10px 12px; }
  #right-sidebar { padding: 16px 10px 18px; position: relative; z-index: 1; isolation: isolate; background: var(--surface); box-shadow: 0 2px 8px var(--shadow-soft); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
  #right-sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--surface); z-index: -1; border-radius: 12px; }
  #right-sidebar #sidebar-title { background: transparent; border-bottom: none; padding: 0; margin: 0 0 8px 0; border: none; box-shadow: none; position: relative; z-index: 2; }
  #comments { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 0; position: relative; z-index: 2; }
  footer { margin: 60px 0 24px; font-size: 0.85rem; width: 100%; padding: 16px 12px; border-radius: 0; border-left: none; border-right: none; }
  #chatbot input[type="text"] { font-size: 0.9rem; padding: 8px 4px; }
  #chatbot button, [id^="reply-send"] { font-size: 0.95rem; padding: 10px 14px; border-radius: 20px; }
}

/* Ultra-narrow screens: stack the button below the input */
@media (max-width: 360px) {
  #search-bar { flex-wrap: wrap; }
  #search-bar input[type="text"] { min-width: 0; flex: 1 1 100%; }
  #search-bar button { width: 100%; margin: 8px 0 0 0; border-radius: 12px; }
}