:root{
  --bg:#0b0f14;
  --panel:#121825;
  --panel2:#0f1520;
  --text:#e8eef7;
  --muted:#a8b3c7;
  --line:#243047;
  --accent:#3b82f6;
  --danger:#ef4444;
  /* User content color palette */
  --user-text-post: #ffffff; /* main post text (bright for readability) */
  --user-text-comment-odd: #f0f6ff; /* top-level comment odd */
  --user-text-comment-even: #e6eefb; /* top-level comment even */
  --user-bg-comment-odd: rgba(255,255,255,0.02);
  --user-bg-comment-even: rgba(255,255,255,0.01);
  --user-bg-reply-odd: rgba(99,102,241,0.02); /* subtle bluish tint for nested replies */
  --user-bg-reply-even: rgba(255,255,255,0.006);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:18px}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(11,15,20,.92);backdrop-filter: blur(8px);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:38px;height:38px;object-fit:contain}
.brand .title{font-weight:700;letter-spacing:.2px; max-width:none; white-space:normal;}

/* Header tweaks: allow the full site title to wrap instead of truncating */
header .text-lg {
  max-width: none;
  display: inline-block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Ensure header action buttons shrink on small screens */
@media (max-width: 480px) {
  header .px-4 { padding-left: 8px; padding-right: 8px; }
  a#loginLink, a#registerLink, .rounded-md { padding-left: 8px !important; padding-right: 8px !important; }
  .rounded-md { font-size: 0.9rem; }
  /* allow right-side controls to wrap instead of overflow */
  header .mx-auto { flex-wrap: wrap; gap: 6px; }
}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  border:1px solid var(--line);background:var(--panel);
  color:var(--text);padding:9px 12px;border-radius:10px;cursor:pointer;
}
.btn.primary{background:var(--accent);border-color:transparent;color:white}
.btn.danger{background:transparent;border-color:rgba(239,68,68,.45);color:#fecaca}
.btn:disabled{opacity:.6;cursor:not-allowed}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:16px;
}
.grid{display:grid;gap:14px}
.grid.cols2{grid-template-columns: 1.1fr .9fr}
@media (max-width: 900px){.grid.cols2{grid-template-columns:1fr}}
.input, textarea{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:#0b1220;color:var(--text);
  outline:none;
}
@media (max-width: 768px) {
  body {
    background-position: center top;
    background-size: 70vw auto;
  }
}

/* Ensure main layout remains centered and cannot expand past the intended content width.
   This prevents late-loading media or injected content from widening the page. */
main.mx-auto, .container, .grid.max-w-6xl, main {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Extra guard: constrain the posts list column so long titles or content don't push layout */
#postsList, #postsList > div, #postsList a {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

/* Constrain header/slot video to a fixed area to avoid layout reflow when it loads */
#ad-slot video, .ad-stub video, #ad-slot > div > video {
  width: 100% !important;
  height: 180px !important;
  max-height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure ad containers reserve space and don't push layout when media loads */
#ad-slot, #ad-slot .ad-stub, .ad-slot { 
  min-height: 180px; 
  box-sizing: border-box; 
}

label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.small{color:var(--muted);font-size:13px;line-height:1.35}
.h1{font-size:28px;margin:10px 0 6px}
.h2{font-size:18px;margin:8px 0 6px}

/* Thread / Post title styling */
#postTitle {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 700;
  margin: 8px 0 6px;
  color: var(--text) !important;
}

@media (max-width: 640px) {
  #postTitle { font-size: 22px; }
}
.hr{height:1px;background:var(--line);margin:14px 0}
.postList{display:grid;gap:12px}
.postItem{padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(18,24,37,.55)}
.postItem .meta{color:var(--muted);font-size:13px;margin-top:6px}
.tag{display:inline-block;border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:12px}
.error{color:#fecaca;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);padding:10px 12px;border-radius:12px}
.ok{color:#bbf7d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);padding:10px 12px;border-radius:12px}
.anon-notice{
  color:var(--danger);
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.18);
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight:600;
}
.anon-notice.small{font-weight:500;padding:6px 8px;font-size:0.92rem}
.fileRow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(18,24,37,.35)}
.fileRow a{word-break:break-all}

body {
  margin: 0;
  min-height: 100vh;

  /* Base site background */
  background-color: #0b0f1a;

  /* Image layer */
  /*background-image: url("../assets/ladyjusticebribed.png");
  background-repeat: no-repeat; */

  /* Position: center vertically, right horizontally */
  background-position: right center;

  /* Resize image */
  background-size: 40vw auto;
  /* Prevent horizontal page shifting from visual overflow */
  overflow-x: hidden;
}



body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}


/* Legal pages + consent UI */
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 20px; }
.legal h3 { margin-top: 16px; }
.legal blockquote {
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}

.legal-consent { margin: 14px 0 10px; padding: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.03); }
.checkrow { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; user-select: none; }
.checkrow input { margin-top: 3px; }
.small { font-size: .92rem; }

.btn.disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Replies toggle styling (distinct, with arrow icon) */
.reply-toggle-text {
  color: var(--accent); /* use site accent (blue) */
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  opacity: 0.98;
}
.reply-toggle-text:hover { color: color-mix(in srgb, var(--accent) 85%, white); }
.reply-toggle-icon {
  color: var(--accent);
  font-weight: 700;
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

/* Make the toggle arrow match the visual weight/size of the reply arrow */
.reply-toggle-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin-right: 0 !important;
}

/* Force larger arrow inside comment boxes (high specificity to override other rules) */
#comments .item .reply-toggle-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}
#comments .item .reply-toggle-label { color: var(--accent) !important; font-weight:600 !important; font-size:0.95rem !important; }
.reply-toggle-label { color: inherit; }

/* ===== Under Construction Overlay ===== */
.uc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    linear-gradient(
      rgba(15, 18, 22, 0.92),
      rgba(15, 18, 22, 0.92)
    ),
    url("./under-construction-bg.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uc-card {
  max-width: 520px;
  padding: 2.5rem;
  border-radius: 14px;
  background: #0f1216;
  border: 1px solid #1f2933;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.uc-card h1 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.uc-card p {
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ===== Under Construction Gate ===== */
.uc-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(15, 18, 22, 0.82), rgba(15, 18, 22, 0.82)),
    url("./under-construction-bg.jpg") center / cover no-repeat;
}

.uc-gate-card {
  width: min(720px, 100%);
  padding: 2.25rem;
  border-radius: 16px;
  background: #0f1216;
  border: 1px solid #1f2933;
  box-shadow: 0 20px 70px rgba(0,0,0,0.65);
  text-align: center;
}

.uc-gate-card h1 {
  font-size: 2rem;
  margin: 0 0 0.75rem 0;
}

.uc-gate-sub {
  margin: 0 0 1rem 0;
  color: #cbd5e1;
  line-height: 1.5;
}

.uc-gate-cta {
  margin: 0 0 1.25rem 0;
  color: #93c5fd;
  font-weight: 600;
}

.uc-gate-btn {
  display: inline-block;
  border: 1px solid #334155;
  background: #0b1220;
  color: #e2e8f0;
  padding: 0.9rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.uc-gate-btn:hover {
  background: #0a162a;
}

.uc-gate-note {
  margin: 1.25rem 0 0 0;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.4;
}
/* Right-side widget image sizing fix */
.logo {
  width: 100%;
  max-width: 560px;   /* matches widget width */
  height: 320px;      /* matches widget height */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Light container used inside cards (prevents "card inside card" double styling) */
.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

/* =========================================================
   Global Author Display
   ========================================================= */

.author-name {
  margin-left: 0.5rem;
  color: #e5e7eb; /* slate-200 */
  font-weight: 600;
}

/* Explicit anonymity indicator */
.author-name:empty::after {
  content: "Chose Anonymity";
  color: #cbd5e1; /* slate-300 */
  font-style: italic;
  font-weight: 500;
}

/* Small inline spinner for loading counts */
.count-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: rgba(99,102,241,0.95); /* indigo-500 */
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  vertical-align: text-bottom;
  margin-right: 6px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Skeleton loading lines used while counts fetch (subtle, low-contrast)
   Use width inline styles to vary length. */
.skeleton-line {
  display: inline-block;
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
  border-radius: 6px;
  animation: shimmer 1200ms linear infinite;
  vertical-align: text-bottom;
  margin-right: 8px;
}
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* ===== Mobile-friendly fixes ===== */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Ad stub styling (visible in dev when ads are disabled) */
.ad-slot {
  display: block;
  width: 100%;
}
.ad-stub{
  min-height: 90px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #a8b3c7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.95rem;
}

@media (min-width: 1024px) {
  .ad-stub.sidebar { min-height: 250px; }
}

/* Reduce heavy background / image footprint on small screens */
@media (max-width: 640px) {
  body {
    /* remove large decorative background on small devices to improve readability and save bandwidth */
    background-image: none;
    background-size: auto;
    background-position: center top;
  }

  .container { padding-left: 12px; padding-right: 12px; }

  /* Slightly tighter cards and overlays on small screens */
  .uc-gate-card, .uc-card { padding: 1rem; }

  /* Ensure header elements scale comfortably */
  .brand .title { font-size: 1rem; }
}

/* ===== File modal viewer ===== */
.file-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  padding: 20px;
}

/* Media overflow guard: prevent late-loading media from widening the page */
/* Media overflow guard (scoped): prevent late-loading media inside posts/ads
   from widening the page while leaving header/brand images alone. */
.postItem img, .postItem video, .postItem iframe,
.post-content img, #postsList img, #postsList video, #postsList iframe,
#ad-slot img, #ad-slot video, .ad-stub img, .ad-stub video {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Stronger defaults for ad/header videos inside ad-slot only */
#ad-slot video, .ad-stub video, #postsList video, .postItem video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  min-width: 0 !important;
  display: block !important;
}

/* Generic guard for flex/overflow: allow brand/header images to keep their intended sizes */
*:where(:not(.brand *) ) { min-width: 0; }

/* If a widening issue remains, next step: add a MutationObserver in `js/index.js`
   to detect and log elements whose scrollWidth > clientWidth as they change. */
.file-modal{
  max-width: 980px;
  width: 100%;
  max-height: 94vh;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
.file-modal-close{align-self:flex-end}
.file-modal-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:6px}
.file-modal-image{max-width:100%;max-height:88vh;object-fit:contain}
.file-modal-iframe{width:100%;height:88vh;border:0;background:white}

@media (max-width:640px){
  .file-modal{border-radius:8px;padding:8px}
  .file-modal-iframe{height:82vh}
}

/* Comments: make each comment visually distinct for readability */
#comments .item {
  /* stronger off-white border and soft panel background for readability */
  border: 1px solid rgba(255,255,240,0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,240,0.03), rgba(255,255,240,0.015)) !important;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* DEBUG outline removed */

#comments .item .muted {
  color: var(--muted);
}

/* User content readability tweaks: clearer text color for post body and
   alternating colors for comments + nested replies for visual separation */
#postContent .prose { color: var(--user-text-post) !important; }
#postContent .prose a { color: var(--accent) !important; }
#postBody, #postBody * { color: var(--user-text-post) !important; }

/* Top-level comments alternate background + text color */
#comments > .item:nth-child(odd) { background: var(--user-bg-comment-odd) !important; }
#comments > .item:nth-child(even) { background: var(--user-bg-comment-even) !important; }
#comments > .item:nth-child(odd), #comments > .item:nth-child(odd) * { color: var(--user-text-comment-odd) !important; }
#comments > .item:nth-child(even), #comments > .item:nth-child(even) * { color: var(--user-text-comment-even) !important; }

/* Replies inside .comment-children also alternate to help trace threads */
#comments .comment-children > .item:nth-child(odd) { background: var(--user-bg-reply-odd) !important; }
#comments .comment-children > .item:nth-child(even) { background: var(--user-bg-reply-even) !important; }
#comments .comment-children > .item:nth-child(odd), #comments .comment-children > .item:nth-child(odd) * { color: var(--user-text-comment-odd) !important; }
#comments .comment-children > .item:nth-child(even), #comments .comment-children > .item:nth-child(even) * { color: var(--user-text-comment-even) !important; }

/* Stronger accents and clearer text for comments and replies */
#comments > .item { border-left: 6px solid rgba(255,255,240,0.12) !important; }
#comments .item.reply, #comments .comment-children > .item { border-left: 6px solid rgba(59,130,246,0.14) !important; }
#comments .item, #comments .item * { color: var(--text) !important; }
#comments .item .prose a { color: var(--accent) !important; }
#comments .item { background-clip: padding-box; }


/* Small label indicating a reply (nested comment) */
.reply-label {
  display: inline-block;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 2px 8px;
  margin: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Ensure inline reply toggle is visibly blue inside comment boxes (override global comment color) */
#comments .item .reply-toggle-text,
#comments .item .reply-toggle-text .reply-toggle-icon,
#comments .item .reply-toggle-text .reply-toggle-label {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
#comments .item .reply-toggle-text:hover { color: color-mix(in srgb, var(--accent) 85%, white) !important; }

/* Reply arrow toggle for collapsing/expanding child replies */
.reply-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-right: 6px;
  border-radius: 4px;
}

.comment-children { margin-top: 8px; margin-left: 12px; border-left: 2px solid rgba(255,255,255,0.02); padding-left: 10px; }

.reply-arrow .reply-count { display: inline-block; margin-left: 6px; background: rgba(255,255,255,0.02); padding: 2px 6px; border-radius: 999px; font-size: 0.75rem; color: var(--muted); }
.reply-arrow .arrow-symbol { font-weight: 600; }

/* Author badge specific background to make info stand out slightly */
.author-badge {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.06);
  padding: 12px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  position: relative;
  z-index: 1;
}

/* Attachments: center the list and give each attachment a bordered card */
#attachments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#attachments .item {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 8px;
}

/* Comment file entries should visually match attachment cards (hidden filename/info still used) */
.comment-files > div {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
  margin-top: 6px;
}

/* Smooth reveal for file info */
.file-info { transition: max-height 220ms ease, opacity 180ms ease; overflow: hidden; }
.file-info[style*="display:none"] { max-height: 0; opacity: 0; }
.file-info[style*="display:block"] { max-height: 240px; opacity: 1; }

#attachments .item a { color: var(--accent); }

/* Center file input and upload controls inside attachment area */
#attachments input[type="file"],
#attachments .input { display: block; margin-left: auto; margin-right: auto; }

/* Make buttons visually separated and centered */
#attachments .item .btn { margin: 6px 6px 0 6px; }

/* Ensure preview blocks and metadata align center */
#attachments .item .muted { color: var(--muted); text-align: center; }

/* Compose (write) page attachments box - center and border the input/helper */
#composeAttachments {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#composeAttachments #files {
  width: 100%;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
}

#composeAttachments #filesHelp { max-width: 760px; text-align: center; }

/* Attachment box wrapper to ensure consistent card appearance */
.attachment-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.attachment-box input[type="file"] {
  width: 100%;
  max-width: 760px;
  background: transparent;
  border: none; /* outer wrapper supplies border */
  padding: 8px 6px;
}

/* Style native file selector button for modern browsers */
.attachment-box input[type="file"]::file-selector-button,
.attachment-box input[type="file"]::-webkit-file-upload-button {
  margin: 0 6px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--text);
  cursor: pointer;
}

/* Keep the filename text centered */
.attachment-box input[type="file"]::-webkit-file-upload-text,
.attachment-box input[type="file"]::file-selector-button {
  text-align: center;
}

/* Hide native input visually but keep it accessible to screen readers */
.native-file-input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Custom file control styling */
.custom-file-control { display:flex; align-items:center; justify-content:center; gap:8px; }
.custom-file-control .btn { padding: 8px 12px; border-radius: 10px; }
.custom-file-control .small.muted { color: var(--muted); }

/* Ensure the main authorBadge gets the same treatment even if placed outside comment list */
#authorBadge.author-badge {
  padding: 12px;
}

/* Right-align badges inside comments */
#comments .item { display: flex; flex-direction: column; }
#comments .item .author-badge { align-self: flex-end; max-width: 40%; text-align: right; }
/* Ensure badges sit inside their comment card and don't overlap neighbors */
#comments .item .author-badge { margin-top: 8px; }

/* Main post badge: float right so it sits to the right of post content */
#authorBadge.author-badge { float: right; max-width: 38%; text-align: right; margin-left: 12px; }

/* Ensure elements following a floated badge clear it so ads or footer cards don't overlap */
#postFooterAd { clear: both; }
.card + .card { clear: both; }

/* On narrow screens do not float the badge (stack below content) */
@media (max-width: 900px) {
  #authorBadge.author-badge { float: none; max-width: 100%; text-align: left; margin-left: 0; }
  /* Make comment badges stack and wrap cleanly on narrow screens */
  #comments .item .author-badge { align-self: stretch; max-width: 100%; width: 100%; text-align: left; margin-left: 0; }
  #comments .item.reply .author-badge { max-width: 100%; width: 100%; }
  /* Give reply badges a little separation so they can't visually collide with parent content */
  #comments .item.reply .author-badge { margin-top: 6px; padding-left: 8px; }
}

/* Ensure header actions (login/register/display name/logout) wrap on narrow viewports */
@media (max-width: 520px) {
  header .mx-auto { flex-wrap: wrap; gap: 6px; }
  header .flex.items-center.gap-3 { flex-wrap: wrap; }
  /* Truncate the display name in the header so it doesn't push buttons off-screen */
  #userMenuBtn { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  /* Reduce padding on header action buttons to save horizontal space */
  a#loginLink, a#registerLink, #logoutBtn, .rounded-md {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Strong mobile override: force badges to full width on very narrow viewports */
@media (max-width: 480px) {
  #comments .item .author-badge,
  #authorBadge.author-badge {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Reduce left indent on deep replies so content remains readable */
  #comments .item { margin-left: 0 !important; }
  #comments .item .item { margin-left: 0 !important; }
}

/* Replies styling: slightly lighter background and left accent to distinguish */
.reply { background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.004)); border-color: rgba(255,255,255,0.02); }
.reply { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01); }
.reply { border-left: 3px solid rgba(99,102,241,0.08); }

/* Slightly smaller badge for replies */
#comments .item.reply .author-badge { max-width: 34%; font-size: 0.95rem; }

/* Replies toggle and nested children */
.replies-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92em;
  padding: 0;
}
.replies-toggle:focus { outline: none; }

.comment-children {
  margin-left: 12px;
  border-left: 2px solid rgba(255,255,255,0.02);
  padding-left: 12px;
}

/* =========================================================
   Additional responsive tweaks to prevent overflow on small screens
   ========================================================= */

/* Make container fully fluid on very small viewports */
@media (max-width: 520px) {
  .container { max-width: 100%; padding-left: 12px; padding-right: 12px; }
  .nav { padding-left: 8px; padding-right: 8px; }
  .brand .title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  .nav { flex-wrap: wrap; align-items: center; gap:8px; }
  .nav .brand { flex: 1 1 auto; min-width: 0; }
  .nav .actions { flex: 0 1 auto; }

  /* Prevent buttons from overflowing; allow them to wrap on multiple lines */
  .actions, .row { flex-wrap: wrap; }
  .btn { box-sizing: border-box; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Reduce padding to save space on tiny screens */
  .btn, .rounded-md { padding-left: 8px !important; padding-right: 8px !important; }

  /* Ensure cards and badges break long words and do not overflow */
  .card, .author-badge, .postItem, .fileRow, .panel, #comments .item { overflow-wrap: break-word; word-break: break-word; }

  /* Make sure floated badges stack below content */
  #authorBadge.author-badge { float: none; display:block; width:100%; box-sizing:border-box; }
}

/* Slightly larger phones/tablets: ensure two-column grids collapse cleanly */
@media (max-width: 900px) {
  .grid.cols2 { grid-template-columns: 1fr; }
  .logo { height: auto; max-width: 100%; }
}

/* Force Tailwind containers used in headers/main to be fluid on very small screens
   This avoids inner scrollbars when devices report very small widths */
@media (max-width: 420px) {
  .mx-auto.max-w-6xl, main.mx-auto.max-w-6xl, header .mx-auto.max-w-6xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }

  /* Prevent any element from causing horizontal overflow */
  html, body { overflow-x: hidden; min-width: 0; }
}

/* File preview styles for write page */
.file-preview-card { border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.file-preview-content { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; }
.file-preview-content canvas, .file-preview-content img, .file-preview-content video { max-width: 100%; height: auto; display: block; }
/* Ensure all preview child elements are centered even if they set width:100% */
.file-preview-content > * { margin-left: auto; margin-right: auto; text-align: center; }
.file-preview-img { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* Page header cards: stack title and controls on small screens to avoid overflow */
@media (max-width: 520px) {
  /* Target the generic card header pattern used on list pages (new posts, unanswered, etc.) */
  .rounded-lg > .flex.items-center.justify-between,
  .card > .flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Make search input and action buttons full-width and wrap neatly */
  .rounded-lg .flex.items-center.gap-3,
  .card .flex.items-center.gap-3 {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .rounded-lg .flex.items-center.gap-3 input[type="search"],
  .rounded-lg .flex.items-center.gap-3 input,
  .card .flex.items-center.gap-3 input[type="search"],
  .card .flex.items-center.gap-3 input {
    flex: 1 1 100%;
    min-width: 0; /* avoid input forcing overflow */
  }

  .rounded-lg .flex.items-center.gap-3 button,
  .card .flex.items-center.gap-3 button {
    flex: 0 0 auto;
  }

  /* Header tweaks: allow the full site title to wrap instead of truncating */
  header .text-lg {
}

/* Strong wrapping rules for thread titles and metadata to prevent horizontal overflow */
.postList .postItem .title,
.postList .postItem a,
.postList .postItem .meta,
.postList .postItem h3,
    max-width: none;
    display: inline-block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
/* Ensure inline anchors inside titles can wrap */
.postList .postItem a { display: inline; word-break: break-word; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .postList .postItem { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .postList .postItem .title { font-size: 0.95rem; }
  .recent-threads, .sidebar { max-width: 100%; width: 100%; }
  .grid.cols2 { grid-template-columns: 1fr !important; }
}

/* Prevent any element from creating horizontal overflow via long unbroken strings */
* { min-width: 0; }

/* Override Tailwind's .truncate for post list titles so they wrap on small screens */
#postsList a .truncate,
#postsList a .post-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  display: block;
}

/* Ensure the anchor card uses full width and doesn't shrink on tiny viewports */
#postsList a {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  #postsList a .truncate { font-size: 0.95rem; }
}


/* Make inline previews responsive on small screens */
@media (max-width: 640px) {
  .file-modal-iframe { height: 360px; }
  .file-preview-content canvas, .file-preview-content img, .file-preview-content video, .file-modal-iframe { width: 100%; height: auto; }
}