@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Tinos:ital,wght@0,400;0,700;1,400&family=Inter+Tight:wght@500;600;700&display=swap');

:root {
  --bg:            #2b2d31;
  --bg-panel:      #232428;
  --bg-post:       #2e3035;
  --bg-op:         #35373d;
  --bg-admin:      #1a1b1e;
  --border:        #3c3e44;
  --border-strong: #4e505a;
  --text:          #e8eaed;
  --text-dim:      #8d9099;
  --link:          #c8a858;
  --link-hover:    #e0c478;
  --greentext:     #909048;
  --pinktext:      #b08870;
  --redtext:       #bc4838;
  --accent:        #b89848;
  --warn:          #c8a858;
  --danger:        #bc4838;
  --spoiler-bg:    #111214;
  --mono: 'IBM Plex Mono', Consolas, Menlo, monospace;
  --serif: Tinos, 'Times New Roman', Times, serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;

  /* ── Extended palette ── */
  --bg-reply:          #2b2d32;
  --bg-thread-preview: #2a2c31;
  --bg-card:           #2e3035;
  --bg-input:          #1e1f22;
  --bg-warn:           #2a2410;
  --bg-hover:          #35373d;
  --accent-deep:       #5a4c20;
  --accent-deeper:     #7a6830;

  /* ── Editor toolbar ── */
  --bg-toolbar:        #252628;
  --border-toolbar:    #1a1b1e;
  --bg-toolbar-hover:  #35373d;
  --bg-toolbar-danger: #2a1208;
  --toolbar-clear:     #a87860;

  /* ── Keeplang ── */
  --keeplang-color:    #c8a858;
  --moe-color:         #a87848;
  --toolbar-prefix:    #c8a858;
  --toolbar-settings:  #b89848;

  /* ── Anatase gold extras ── */
  --an-gold-hi:  #e0c478;
  --an-gold-mid: #b89848;
  --an-gold-dim: #5a4c20;
}

* { box-sizing: border-box; }

input, textarea, select, button { color: inherit; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--serif); font-size: var(--font-size-base, 15px); line-height: 1.5; min-height: 100vh; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* ── Banners ─────────────────────────────── */
.top-banner {
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border-strong);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand a {
  font-family: var(--sans); font-weight: 700; font-size: 1.4667rem;
  color: var(--accent); text-decoration: none; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.navicon {
  height: 28px; width: 28px;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.brand-context {
  font-family: var(--mono); font-size: 0.8667rem;
  color: var(--text-dim); font-weight: normal;
}
.brand-context-sep {
  font-size: 0.8667rem; color: var(--text-dim); opacity: 0.5;
}
.brand-thread-title {
  color: var(--text); font-weight: 600; font-size: 0.8667rem;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tagline { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim); font-style: italic; }

.topnav { font-family: var(--mono); font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.topnav .sep { color: var(--text-dim); }
.topnav a { color: var(--accent); }
.admin-link { color: var(--warn) !important; font-weight: 600; }

.lang-selector { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; }
.lang-selector select {
  font-family: var(--mono); font-size: 0.8rem; padding: 3px 6px;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 0; cursor: pointer;
}

.text-button { background: none; border: none; color: var(--accent); font-family: var(--mono); font-size: 0.7333rem; cursor: pointer; text-decoration: underline; padding: 0; }
.text-button:hover { color: var(--link-hover); }
.text-button.danger { color: var(--danger); }

/* ── Layout (15/70/15) ──────────────────── */
.container { max-width: 1500px; width: 70%; min-width: 320px; margin: 0 auto; padding: 22px 18px 80px; }
@media (max-width: 480px) {
  .boards-rail { width: 85%; }
}

/* Ensure SVG icons inherit explicit button colors instead of theme accent */
.nav-arrow svg,
.open-thread-btn svg,
.post-form button[type="submit"] svg,
.up-btn svg,
.br-item svg {
  stroke: currentColor !important;
}
@media (max-width: 700px)  { .container { width: 100%; padding: 14px 10px 80px; } }

.thread-container { max-width: 1500px; width: 70%; }
@media (max-width: 1100px) { .thread-container { width: 92%; } }
@media (max-width: 700px) { .thread-container { width: 100%; } }

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
h1 { font-size: 1.8667rem; }
h2 { font-size: 1.3333rem; margin-top: 20px; }

/* ── Homepage ─────────────────────────────── */
.welcome { background: var(--bg-panel); border: 1px solid var(--border-strong); padding: 22px 26px; margin-bottom: 28px; }
.welcome h1 { margin-bottom: 8px; }
.welcome p { margin: 0; font-size: 1.0667rem; }
.welcome code { background: var(--bg-post); padding: 1px 4px; border: 1px solid var(--border); font-family: var(--mono); font-size: 0.8667rem; }

.board-list ul { list-style: none; padding: 0; margin: 0; }
.board-list li { border-bottom: 1px dashed var(--border); padding: 12px 0; }
.board-link { text-decoration: none; display: inline-flex; align-items: baseline; gap: 12px; }
.board-id { font-family: var(--mono); font-weight: 600; color: var(--accent); font-size: 1.2rem; }
.board-name { font-family: var(--sans); font-weight: 600; font-size: 1.0667rem; color: var(--text); }
.board-desc { margin: 4px 0 0 0; color: var(--text-dim); font-size: 0.9333rem; font-style: italic; }
.board-sublinks { font-family: var(--mono); font-size: 0.8rem; margin-top: 4px; }
.nsfw-badge { background: var(--danger); color: white; font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; padding: 1px 5px; margin-left: 8px; letter-spacing: 0.05em; }
.overboard-link { margin-top: 20px; font-family: var(--mono); }

/* ── Board page ───────────────────────────── */
.board-header { border-bottom: 2px solid var(--border-strong); padding-bottom: 12px; margin-bottom: 20px; }
.board-nav { font-family: var(--mono); font-size: 0.8667rem; margin-top: 8px; }
.board-nav a { margin-right: 16px; }
.board-nav a.active { font-weight: 700; color: var(--link-hover); }

/* ── Thread previews + posts ──────────────── */
.thread-preview { margin-bottom: 30px; padding: 14px 16px 16px; background: var(--bg-thread-preview); border: 1px solid var(--border-strong); border-radius: 2px; border-bottom: 3px solid var(--accent); }
.thread-flags {
  font-family: var(--mono); font-size: 0.8rem; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.thread-flags > span { font-size: 0.9333rem; }

/* Flags inline en el post-header (board/overboard view): entre subject y name */
.post-flag {
  font-size: 0.7rem;
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

.editor-live-toggle { font-family: monospace; font-size: 11px; padding: 2px 6px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 2px; cursor: pointer; }
.editor-live-toggle.off { opacity: .65; }
.editor-live-toggle.on  { color: var(--accent); border-color: var(--accent); }

/* The prominent open-thread button */
.open-thread-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: white !important;
  font-family: var(--sans); font-weight: 600; font-size: 0.8667rem;
  padding: 5px 14px;
  text-decoration: none !important;
  border: 1px solid var(--accent);
  border-radius: 3px;
  letter-spacing: 0.02em;
  margin-left: auto;
  transition: background 100ms;
}
.open-thread-btn:hover { background: var(--link-hover); border-color: var(--link-hover); color: white !important; }

/* ── Post layout — files ABOVE text ────── */
.post {
  background: var(--bg-post);
  border: 1px solid var(--border);
  padding: 10px 14px;
  margin-bottom: 8px;
  overflow-x: auto;
  position: relative;
}
.post.op { background: var(--bg-op); border-color: var(--border-strong); border-left: 4px solid var(--accent); }
.post.reply { margin-left: 18px; background: var(--bg-reply); }
.thread-replies { margin-top: 4px; }

.post-header {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim);
  margin-bottom: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.post-header .subject { color: var(--link-hover); font-weight: 700; font-family: var(--sans); font-size: 0.9333rem; }
.post-header .name {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.post-header .post-id { font-family: var(--mono); color: var(--text-dim); }
.post-header .post-id:hover { color: var(--link-hover); }

.capcode { font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; padding: 2px 6px; letter-spacing: 0.05em; border-radius: 3px; color: white; border: none; }
.capcode-op    { background: var(--capcode-op, #5c7ec4); }
.capcode-bo    { background: var(--capcode-bo, #c47a1a); }
.capcode-mod   { background: var(--capcode-mod, #2a8a3a); }
.capcode-admin { background: var(--danger); }
.user-id { font-family: var(--mono); font-size: 0.6667rem; font-weight: 600; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.03em; }

/* ── Gem badge ─────────────────────────────────────────────── */
/* ── Gem badge ──────────────────────────────────────────── */
.gem-badge {
  font-family: var(--mono);
  font-size: 0.6667rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 5px rgba(0,0,0,0.5);
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.15);
}
.gem-name  { opacity: 1; }
.gem-suffix { opacity: 0.70; font-size: 0.6rem; margin-left: 1px; font-weight: 600; }

/* Bicolor & special: set inline as background gradient */
.gem-bicolor, .gem-special {}

/* Metallic: single specular sweep */
.gem-metallic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.22) 48%, transparent 70%);
  pointer-events: none;
  animation: gem-specular 3.5s ease-in-out infinite;
}
@keyframes gem-specular {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}

/* Iridescent: color-shift shimmer */
.gem-iridescent {
  background-size: 250% 100% !important;
  animation: gem-shimmer 4s ease-in-out infinite;
}
@keyframes gem-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Fluorescent: soft pulsing outer glow only */
.gem-fluorescent {
  animation: gem-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes gem-glow-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.30), 0 0 5px 1px var(--gem-glow, #00e5ff); }
  50%       { box-shadow: 0 1px 3px rgba(0,0,0,0.30), 0 0 9px 3px var(--gem-glow, #00e5ff); }
}

/* Anatase: gold glow pulse */
.gem-anatase {
  animation: anatase-shimmer 3.5s ease-in-out infinite;
}
@keyframes anatase-shimmer {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.40), 0 0 5px 1px rgba(201,162,39,0.30); }
  50%       { box-shadow: 0 1px 3px rgba(0,0,0,0.40), 0 0 9px 3px rgba(201,162,39,0.55); }
}

.translation-toggle { font-family: var(--mono); font-size: 0.7333rem; background: transparent; border: 1px dashed var(--border-strong); padding: 1px 6px; cursor: pointer; color: var(--text-dim); border-radius: 0; }
.translation-toggle:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.translation-toggle.showing-original { background: var(--bg-warn); border-style: solid; color: var(--warn); }

/* Files — horizontal strip above text */
.files {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 10px 0;
}
.file-fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.file-fig figcaption { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-dim); margin-top: 2px; text-align: center; display: flex; flex-direction: column; }
.thumb { display: block; }
.thumb img { max-width: 200px; max-height: 200px; display: block; border: 1px solid var(--border-strong); background: var(--bg-panel); }
.files.multi .thumb img { max-width: 140px; max-height: 140px; }
.file-generic { display: inline-block; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: 0.8rem; }
.spoiler-thumb { filter: brightness(0.85); transition: filter 100ms; pointer-events: none; }
.video-thumb { display: block; }
.video-thumb video { display: block; max-width: 100%; }
.audio-thumb {
  display: block;
  padding: 4px 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 320px;
  min-height: 44px;  /* prevents collapse when filename is hidden */
  box-sizing: border-box;
}
.audio-thumb audio {
  display: block !important;
  width: 100% !important;
  min-width: 200px;
  accent-color: var(--accent);
  border-radius: 4px;
}
.audio-filename { display: none !important; }
.thumb.spoilered, .thumb.revealed { cursor: pointer; display: block; min-width: 60px; min-height: 60px; }
.thumb.spoilered:hover .spoiler-thumb { filter: brightness(1); }
.fspoiler {
  color: var(--danger); font-weight: 700;
  cursor: pointer;
  /* On revealed strip thumbs this is the only re-spoiler trigger, so it needs
     to read as clickable. We keep it subtle to not draw attention when the
     spoiler is already hidden. */
  text-decoration: underline dotted transparent;
  transition: text-decoration-color 100ms;
}
.fspoiler:hover { text-decoration-color: var(--danger); }

.post-content {
  font-family: var(--serif); font-size: 1rem;
  word-wrap: break-word; overflow-wrap: break-word;
  max-width: 100%;
}

.greentext { color: var(--greentext); }
.pinktext { color: var(--pinktext); }
.redtext { color: var(--redtext); font-weight: 700; font-size: 1.25em; }

/* ── Inside the rich editor, suppress all post-render markup styles. ── */
/* Spoiler en el editor: texto oculto visualmente */
.rich-editor .spoiler { background: #1a1a1a; color: #1a1a1a !important; border-radius: 2px; padding: 0 2px; }
.postref { font-family: var(--mono); font-size: 0.8667rem; }
.postref.crossboard { color: var(--warn); font-weight: 600; }

.spoiler { background: var(--spoiler-bg); color: var(--spoiler-bg); padding: 0 2px; transition: color 100ms; }
.spoiler:hover, .spoiler:focus { color: white; }

.code-block { display: inline-block; background: #2a2f3a; color: #e8e8e8; font-family: var(--mono); font-size: 0.8667rem; padding: 8px 12px; margin: 4px 0; white-space: pre-wrap; border-radius: 2px; }

.dice { display: inline-block; background: var(--bg-input); color: var(--text); font-family: var(--mono); font-size: 0.8667rem; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 4px; }
.dice strong { color: var(--accent); }

/* ── Form (inline) ──────────────────────── */
.post-form-wrap { background: var(--bg-panel); border: 1px solid var(--border-strong); margin-bottom: 20px; }

/* ── New Thread button — prominent, centered ── */
.post-form-wrap summary { list-style: none; cursor: pointer; user-select: none; }
.post-form-wrap summary::-webkit-details-marker { display: none; }

.new-thread-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(184,152,72,0.10) 0%, rgba(184,152,72,0.04) 100%);
  border: 2px dashed var(--border-strong);
  border-radius: 2px;
  transition: background 140ms, border-color 140ms;
  position: relative;
}
.new-thread-summary:hover {
  background: linear-gradient(135deg, rgba(184,152,72,0.20) 0%, rgba(184,152,72,0.10) 100%);
  border-color: var(--accent);
  border-style: solid;
}
.new-thread-icon {
  font-size: 1rem;
  color: var(--accent);
  line-height: 1;
  transition: transform 200ms;
}
.new-thread-summary:hover .new-thread-icon { transform: rotate(90deg) scale(1.2); }
.new-thread-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9333rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.new-thread-chevron {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--accent);
  opacity: 0.7;
  transition: transform 200ms;
}
details[open] .new-thread-chevron { transform: rotate(180deg); }
details[open] .new-thread-summary {
  background: rgba(184,152,72,0.08);
  border-style: solid;
  border-color: var(--accent-deeper);
  border-bottom: 1px solid var(--border-strong);
}

.post-form-wrap[open] summary { border-bottom: 1px solid var(--border-strong); }
.post-form { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-form input[type="text"], .post-form input[type="number"], .post-form textarea {
  font-family: var(--serif); font-size: 1rem; padding: 6px 10px;
  border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text); flex: 1; min-width: 200px; border-radius: 0;
}
.textarea-wrap { position: relative; width: 100%; }
.post-form textarea { resize: vertical; min-height: 100px; width: 100%; padding-bottom: 24px; }
.char-counter {
  position: absolute; right: 8px; bottom: 4px;
  font-family: var(--mono); font-size: 0.6667rem; color: var(--text-dim);
  background: rgba(255,255,255,0.9); padding: 1px 6px; border-radius: 2px;
  pointer-events: none;
}
.char-counter.warn { color: var(--warn); }
.char-counter.over { color: var(--danger); font-weight: 700; }

.post-form input[type="file"] { font-family: var(--mono); font-size: 0.8rem; flex: 1; }
.file-label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); flex: 1; }
.file-label.compact { flex-direction: row; align-items: center; }
.checkbox-row { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); cursor: pointer; }

.post-form button[type="submit"] {
  background: var(--accent); color: white; border: 1px solid var(--accent);
  padding: 7px 18px; font-family: var(--sans); font-weight: 600; font-size: 0.8667rem;
  cursor: pointer; border-radius: 0; letter-spacing: 0.02em;
}
.post-form button[type="submit"]:hover { background: var(--link-hover); border-color: var(--link-hover); }

/* File preview grid */
.file-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.preview-item {
  position: relative;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  padding: 4px; width: 110px; font-family: var(--mono); font-size: 0.6667rem;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.preview-item img { width: 96px; height: 70px; object-fit: cover; background: var(--bg-panel); }
.preview-item .pname { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-item .pspoil { display: flex; align-items: center; gap: 3px; cursor: pointer; }

/* Inline insert button in file previews */
.pinsert { display: flex; align-items: center; gap: 4px; margin-top: 3px; width: 100%; }
.pinsert-side { font-family: var(--mono); font-size: 0.6667rem; padding: 2px; border: 1px solid var(--border); flex: 1; max-width: 54px; }
.pinsert-btn {
  background: var(--accent); color: white; border: none;
  font-family: var(--mono); font-size: 0.6667rem; font-weight: 600;
  padding: 2px 5px; cursor: pointer; border-radius: 2px; white-space: nowrap;
  flex: 1;
}
.pinsert-btn:hover { background: var(--link-hover); }

.preview-item .premove { position: absolute; top: 2px; right: 2px; background: var(--danger); color: white; border: none; width: 18px; height: 18px; cursor: pointer; font-weight: 700; line-height: 1; border-radius: 50%; }

/* ── Floating quick-reply widget ─────────── */
.qr-widget {
  position: absolute;
  top: 100%;
  right: 0; bottom: 20px; right: 20px;
  width: 360px; max-width: calc(100vw - 40px);
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 500; font-family: var(--serif);
}
.qr-widget.collapsed .qr-form { display: none; }
.qr-header {
  background: var(--accent); color: white;
  padding: 6px 10px; cursor: move;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.8rem; user-select: none;
}
.qr-title { font-weight: 600; }
.qr-min { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.5); width: 22px; height: 20px; cursor: pointer; font-size: 0.9333rem; line-height: 1; }
.qr-min:hover { background: rgba(255,255,255,0.2); }
.qr-form { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.qr-form input[type="text"], .qr-form textarea { font-size: 0.9333rem; min-width: 0; }
.qr-form textarea { min-height: 80px; }
.qr-options { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-form button[type="submit"] { padding: 6px 12px; }

/* ── Up/down navigation arrows ───────────── */
/* position:fixed anclado a la esquina inferior. style-shell.css sobrescribe
   el `left` según el modo (boards/threads rails). Forzamos position/bottom
   y reseteamos top/right que la regla buggy anterior dejaba colgando. */
.thread-nav-arrows {
  position: fixed !important;
  bottom: 20px !important;
  top: auto !important;
  right: auto !important;
  left: 20px;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
}
.nav-arrow {
  background: var(--accent); color: white; border: none;
  width: 38px; height: 38px;
  font-size: 0.9333rem; font-weight: 700; cursor: pointer;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.nav-arrow:hover { background: var(--link-hover); }

/* ── Mod toolbar ─────────────────────────── */
.mod-toolbar { background: var(--bg-warn); border: 1px solid var(--warn); padding: 8px 14px; margin-bottom: 16px; font-family: var(--mono); font-size: 0.8rem; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mod-toolbar button { background: var(--bg-input); border: 1px solid var(--warn); color: var(--text); padding: 3px 10px; cursor: pointer; font-family: var(--mono); font-size: 0.8rem; }
.mod-toolbar button:hover { background: var(--warn); color: white; }
.mod-toolbar button.danger { border-color: var(--danger); color: var(--danger); }
.mod-toolbar button.danger:hover { background: var(--danger); color: white; }

.locked-notice { text-align: center; padding: 20px; background: var(--bg-panel); border: 1px dashed var(--border-strong); font-family: var(--mono); font-size: 0.8667rem; color: var(--warn); }

/* ── Pagination ──────────────────────────── */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 30px 0; }
.page { font-family: var(--mono); font-size: 0.9333rem; padding: 4px 10px; border: 1px solid var(--border-strong); background: var(--bg-post); text-decoration: none; color: var(--accent); }
.page.current { background: var(--accent); color: white; font-weight: 700; }
.page:hover:not(.current) { background: var(--bg-panel); }

/* ── Report dialog ───────────────────────── */
.dialog { position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; display: flex; }
.dialog[hidden] { display: none !important; }
.dialog-inner { position: relative; background: var(--bg-panel); border: 1px solid var(--border-strong); padding: 20px; max-width: 500px; width: 90%; }
.dialog-close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--text-dim); line-height: 1; }
.dialog-close:hover { color: var(--danger); }
.dialog textarea { width: 100%; font-family: var(--serif); padding: 6px; }
.dialog button { background: var(--accent); color: white; border: 1px solid var(--accent); padding: 6px 14px; font-family: var(--sans); font-weight: 600; cursor: pointer; margin-top: 8px; }
.dialog button:first-of-type { background: var(--bg-panel); color: var(--text); border-color: var(--border-strong); }

/* ── Catalog ─────────────────────────────── */
/* ── Catalog search ──────────────────────────────────────────── */
.catalog-search-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.catalog-search-input {
  flex: 1; max-width: 360px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  color: var(--text); font-family: var(--mono); font-size: 0.8667rem;
  padding: 6px 10px; outline: none;
  transition: border-color 100ms;
}
.catalog-search-input:focus { border-color: var(--accent); }
.catalog-search-input::placeholder { color: var(--text-dim); }
.catalog-search-count {
  font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim);
  min-width: 3ch;
}

/* ── Catalog grid ────────────────────────────────────────────── */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

/* Cards WITH image */
.catalog-card { background: var(--bg-card); border: 1px solid var(--border); padding: 6px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; transition: border-color 100ms, box-shadow 100ms; }
.catalog-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.catalog-thumb { aspect-ratio: 1; overflow: hidden; background: var(--bg-panel); display: flex; align-items: center; justify-content: center; }
.catalog-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }

/* Cards WITHOUT image — no blank square */
.catalog-card-noimg { border-left: 3px solid var(--border-strong); }
.catalog-card-noimg:hover { border-left-color: var(--accent); }

.catalog-meta { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim); display: flex; gap: 6px; }
.catalog-subject { color: var(--link-hover); font-weight: 700; font-family: var(--sans); font-size: 0.8667rem; }
.catalog-preview {
  color: var(--text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}
.catalog-card-noimg .catalog-preview {
  -webkit-line-clamp: 20;
}

/* ── Overboard ───────────────────────────── */
.overboard-card { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); padding: 10px 14px; margin-bottom: 10px; }
.ob-board-tag { font-family: var(--mono); font-weight: 700; font-size: 0.8667rem; background: var(--bg-panel); padding: 2px 8px; border: 1px solid var(--border-strong); align-self: flex-start; }
.ob-board-tag a { text-decoration: none; }
.ob-body { flex: 1; }
.ob-header { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.ob-header .subject { color: var(--link-hover); font-weight: 700; }
.ob-header .name { color: var(--accent); font-weight: 600; }
.ob-header .reply-link { float: right; }
.ob-content { font-family: var(--serif); max-height: 8em; overflow: hidden; }

/* ── Misc ────────────────────────────────── */
.separator { border: none; border-top: 1px dashed var(--border-strong); margin: 24px 0; }
.breadcrumbs { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.thread-meta { margin-left: auto; }
.thread-subject { color: var(--link-hover); margin-bottom: 16px; }
.empty { text-align: center; color: var(--text-dim); font-style: italic; padding: 40px; }

/* ── OP Settings button & modal ─────────── */
.op-settings-btn {
  background: none; border: 1px solid var(--border-strong); color: var(--text-dim);
  font-size: 0.9333rem; padding: 1px 7px; cursor: pointer; border-radius: 3px;
  line-height: 1; margin-left: 4px;
  transition: background 100ms, color 100ms;
}
.op-settings-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

.op-settings-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.op-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 0.8667rem; cursor: pointer;
}
.op-set-row span { color: var(--text); }
.op-set-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

/* ── Footer ──────────────────────────────── */
.bottom-banner { background: var(--bg-panel); border-top: 2px solid var(--border-strong); padding: 18px 18px; font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim); margin-top: 60px; }
.footer-disclaimer { max-width: 900px; margin: 0 auto 12px; line-height: 1.6; text-align: center; }
.footer-links { text-align: center; }
.footer-links .sep { margin: 0 8px; }

/* ── Admin ───────────────────────────────── */
.admin-banner { background: var(--bg-admin); color: white; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.admin-banner .brand a { color: white; }
.admin-nav { font-family: var(--mono); font-size: 0.8667rem; display: flex; gap: 14px; align-items: center; }
.admin-nav a { color: var(--text-dim); text-decoration: none; }
.admin-nav a:hover { color: white; }
.admin-nav .text-button { color: var(--text-dim); }
.admin-banner .who { font-family: var(--mono); font-size: 0.8rem; color: #aab2c0; }
.admin-container { padding-top: 30px; }
.admin-section { margin: 30px 0; }
.admin-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-form .form-row { gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; }
.admin-form input[type="text"], .admin-form input[type="password"], .admin-form input[type="number"], .admin-form select { padding: 6px 10px; border: 1px solid var(--border-strong); background: var(--bg-input); font-family: var(--serif); }
.admin-form label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.8rem; }
.admin-form button { background: var(--accent); color: white; border: 1px solid var(--accent); padding: 7px 18px; font-family: var(--sans); font-weight: 600; cursor: pointer; }
.admin-form button.danger { background: var(--danger); border-color: var(--danger); }

.board-edit-card { background: var(--bg-post); border: 1px solid var(--border); margin-bottom: 10px; }
.board-edit-card summary { cursor: pointer; padding: 10px 14px; font-family: var(--mono); font-size: 0.8667rem; }
.board-edit-card[open] summary { border-bottom: 1px solid var(--border); }
.board-edit-card .admin-form { padding: 14px; flex-direction: column; align-items: flex-start; }
.dim { color: var(--text-dim); font-size: 0.7333rem; margin-left: 12px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-card { background: var(--bg-panel); border: 1px solid var(--border-strong); padding: 16px; text-align: center; }
.stat-card.warn { background: var(--bg-warn); border-color: var(--warn); }
.stat-num { font-family: var(--sans); font-size: 2.1333rem; font-weight: 700; color: var(--accent); }
.stat-card.warn .stat-num { color: var(--warn); }
.stat-label { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

.admin-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8667rem; }
.admin-table th, .admin-table td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-table th { background: var(--bg-panel); }
.admin-table input[type="text"], .admin-table input[type="password"] { padding: 4px 6px; border: 1px solid var(--border); font-family: var(--serif); width: 100%; }
.admin-table button { padding: 3px 8px; cursor: pointer; }
.admin-table button.danger { background: var(--danger); color: white; border: 1px solid var(--danger); }
.inline-form { display: inline-flex; gap: 4px; align-items: center; }

.role-badge { font-family: var(--mono); font-size: 0.7333rem; padding: 1px 6px; border-radius: 2px; }
.role-admin { background: var(--danger); color: white; }
.role-mod { background: var(--greentext); color: white; }
.role-bo { background: var(--warn); color: white; }

.badge { background: var(--danger); color: white; font-family: var(--mono); font-size: 0.7333rem; padding: 1px 6px; border-radius: 8px; }
.badge.danger { background: var(--danger); }

.report-card { background: var(--bg-post); border: 1px solid var(--border); padding: 12px 16px; margin-bottom: 12px; }
.report-card.post-already-deleted { opacity: 0.5; }
.report-card header { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.report-card blockquote { background: var(--bg-panel); border-left: 3px solid var(--border-strong); padding: 6px 12px; margin: 6px 0; white-space: pre-wrap; }
.report-actions { margin-top: 8px; display: flex; gap: 8px; }

.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { background: var(--bg-panel); border: 1px solid var(--border-strong); padding: 30px; min-width: 320px; }
.login-box h1 { text-align: center; margin-bottom: 16px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input { padding: 8px; font-family: var(--serif); border: 1px solid var(--border-strong); }
.login-box button { background: var(--accent); color: white; border: none; padding: 10px; font-family: var(--sans); font-weight: 600; cursor: pointer; }
.login-box .hint { text-align: center; font-family: var(--mono); font-size: 0.8rem; margin-top: 12px; }
.login-box .error { background: #ffe0e0; color: var(--danger); padding: 8px; font-family: var(--mono); font-size: 0.8667rem; margin-bottom: 12px; border: 1px solid var(--danger); }

@media (max-width: 640px) {
  .post.reply { margin-left: 8px; }
  .thumb img { max-width: 150px; max-height: 150px; }
  .files.multi .thumb img { max-width: 100px; max-height: 100px; }
  .top-banner, .admin-banner { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 1.4667rem; }
  .qr-widget { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  .thread-nav-arrows { left: auto; right: 20px; bottom: 80px; }
  .open-thread-btn { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════
   v2.2 additions — reply widget, inline files, lightbox,
   backlinks, markup extras, post editor, board clamp, errors
   ════════════════════════════════════════════════════════════ */

/* ── Post body / image float so text wraps ─── */
.post-body { overflow-x: auto; }

.post-body::after { content: ""; display: block; clear: both; }

/* "Normal-bucket" file strip above the text.
   Single file → floats left so text wraps to its right (old behavior).
   Multiple   → flow inline horizontally above the text in their natural sizes,
                then text continues underneath. */
.files.single { display: block; float: left; margin: 2px 14px 6px 0; }
.files.single .thumb img { max-width: 220px; max-height: 320px; }

.files.multi {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px;
  margin: 4px 0 10px 0; float: none; clear: both;
  width: max-content;
}
.files.multi .file-fig { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; align-self: center; }
.files.multi .thumb img {
  /* Preserve aspect ratio at a comfortable height. No forced square. */
  max-height: 240px; max-width: 320px; width: auto; height: auto;
  border: 1px solid var(--border-strong); background: var(--bg-panel); display: block;
}
.files.multi .file-fig figcaption {
  font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim);
  text-align: center; line-height: 1.3; margin-top: 2px;
}
.files.multi .file-fig figcaption .fspoiler { display: block; color: var(--redtext); font-weight: 700; }

.file-fig figcaption .fspoiler { display: block; color: var(--redtext); font-weight: 700; }
.file-generic { display: inline-block; padding: 20px; background: var(--bg-panel); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: 0.8rem; }

/* Inline file tokens [file:N] inside the post body.
   "square" (the new default): block, breaks the text above & below.
   Floats keep wrapping behavior. */
.inline-file { display: block; margin: 4px 0; }
.inline-file.square      { display: block; margin: 8px 0; clear: both; }
.inline-file.float-left  { float: left;  display: block; margin: 2px 14px 6px 0; }
.inline-file.float-right { float: right; display: block; margin: 2px 0 6px 14px; }
.inline-file.center      { float: none; display: block; margin: 6px auto; text-align: center; }
.inline-file.inline-flow { display: inline-block; vertical-align: middle; margin: 0 4px; }
.inline-file img { max-width: 100% !important; height: auto !important; border: 1px solid var(--border-strong); background: var(--bg-panel); }

/* ── Image lightbox (inline expand, not new tab) ─── */
.lightbox {
  position: absolute;
  top: 100%;
  right: 0; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center; display: flex;
  cursor: zoom-out; padding: 20px;
}
.lightbox[hidden] { display: none !important; }
.lightbox img { max-width: 96vw; max-height: 94vh; object-fit: contain; box-shadow: 0 0 40px rgba(0,0,0,0.6); }

/* ── Backlinks (reverse refs): bar separator + numbers, no label ─── */
.backlinks {
  margin: 6px 0 0; padding-top: 5px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.backlinks .backlink { color: var(--link); text-decoration: none; }
.backlinks .backlink:hover { color: var(--link-hover); text-decoration: underline; }

/* ── Crossthread / dead refs ─── */
.postref.crossthread { font-weight: 600; }
.postref.crossthread::after { content: " →"; font-size: 0.7333rem; opacity: 0.7; }
.postref.dead { color: var(--text-dim); text-decoration: line-through; }

/* ── Ref flash (jump highlight) ─── */
/* scroll-margin-top keeps the jumped-to post clear of the sticky header
   instead of hiding behind it when centred near the top of the viewport. */
.post { scroll-margin-top: 90px; }

.ref-flash { animation: refflash 1.6s ease-out; }
@keyframes refflash {
  0%   { background: #ffe6a0; box-shadow: 0 0 0 5px #ffe6a0, 0 4px 14px rgba(0,0,0,.18); }
  35%  { background: #fff3d4; box-shadow: 0 0 0 4px #fff3d4, 0 3px 10px rgba(0,0,0,.12); }
  100% { background: transparent; box-shadow: none; }
}

/* Persistent marker on the last post you jumped to — a subtle tint plus a
   left accent bar and slight lift, so you can still spot it after the flash. */
.post.ref-target {
  background: rgba(255, 214, 110, 0.16);
  box-shadow: inset 3px 0 0 var(--accent, #34487a), 0 1px 6px rgba(0,0,0,.10);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ── Translation fade-in ─── */
.post-content.tr-updating {
  opacity: 0;
  transition: opacity 0s;
}
.post-content.tr-visible {
  opacity: 1;
  transition: opacity 0.22s ease;
}
.translation-badge { font-family: var(--mono); font-size: 0.7333rem; cursor: pointer; user-select: none; display:inline-flex; align-items:center; gap:1px; }
.translation-badge:hover { opacity: 0.75; }
.translation-badge.tr-showing { color: var(--accent); }
.tr-provider { margin-left: 4px; opacity: 0.8; font-size: 0.9em; }
.translation-badge.tr-pre-translation { color: #f39c12; }

/* ── Retranslate progress bar (appears in post header next to badge) ── */
.tr-retranslate-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.tr-rp-track {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #444);
  overflow: hidden;
  flex-shrink: 0;
}
.tr-rp-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--accent, #2196f3);
  transition: width 0.3s ease;
}
.tr-rp-label {
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  color: var(--text-dim, #888);
  white-space: nowrap;
}

/* ── Lang picker: single ▾ toggle + checklist dropdown ─── */
.lang-arrow {
  display: none;
  background: none;
  border: none;
  padding: 0 1px 0 2px;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim, #888);
  vertical-align: middle;
}
.translation-badge:hover .lang-arrow { display: inline-block; }
.lang-arrow:hover { color: var(--accent); }

.lang-picker-drop {
  z-index: 9999;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-strong, #bbb);
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  padding: 3px 0;
  font-family: var(--mono, monospace);
  font-size: 0.8rem;
}
.lang-pick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text, #222);
  white-space: nowrap;
}
.lang-pick-row:hover { background: var(--bg-hover, #f0f0f0); }
.lang-pick-row.lang-pick-current { color: var(--accent); }
.lang-pick-check { width: 12px; flex-shrink: 0; font-size: 0.6667rem; }
.lang-pick-code  { min-width: 28px; font-size: 0.7333rem; }
.lang-pick-label { color: var(--text-dim, #888); font-family: var(--sans, sans-serif); font-size: 0.7333rem; }
.tr-spinner { display: inline-block; margin-left: 3px; font-size: 0.85em; opacity: 0.55;
              animation: tr-spin 0.9s linear infinite; vertical-align: middle; }
@keyframes tr-spin { to { transform: rotate(360deg); } }

/* ── Markup: keeplang (preserve original) ─── */
.keeplang {
  color: var(--keeplang-color, #b8860b);
  background: rgba(255, 215, 0, 0.12);
  border-bottom: 1px dashed var(--keeplang-color, #b8860b);
  padding: 0 1px;
  border-radius: 2px;
  font-style: normal;
}

/* ── Markup: moe glow ─── */
.moe {
  color: var(--moe-color, #ff5fa2);
  font-weight: 700;
  animation: moesparkle 4s infinite;
}
@keyframes moesparkle {
  0%, 85%, 100% { text-shadow: none; color: var(--moe-color, #ff5fa2); }
  88% { text-shadow: 0 0 5px #fff, 0 0 10px #ffb3d9, 0 0 20px #ff5fa2; color: #fff; }
  92% { text-shadow: none; color: var(--moe-color, #ff5fa2); }
  96% { text-shadow: 0 0 8px #fff, 0 0 15px #ffb3d9; color: #fff; }
}
  95% { text-shadow: 0 0 4px rgba(255,95,162,0.8), 0 0 8px rgba(255,95,162,0.5), 0 0 14px rgba(150,90,255,0.4); }
}
  50%     { text-shadow: 0 0 6px rgba(255,95,162,1),   0 0 14px rgba(255,95,162,0.7), 0 0 22px rgba(150,90,255,0.6); }
}

/* ── Autolinks ─── */
.autolink { color: var(--link); word-break: break-all; }
.autolink:hover { color: var(--link-hover); }

/* ── YouTube embed ─── */
.ytembed { display: block; margin: 6px 0; }
.ytembed .yt-url { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.8rem; }
.yt-thumb {
  position: relative; display: inline-block; cursor: pointer;
  max-width: 480px; width: 100%; line-height: 0;
  border: 1px solid var(--border-strong);
}
.yt-thumb img { width: 100%; display: block; }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 44px; border-radius: 8px;
  background: rgba(20,20,20,0.8); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4667rem; pointer-events: none; transition: background 120ms;
}
.yt-thumb:hover .yt-play { background: var(--danger); }
.yt-frame { width: 100%; max-width: 560px; aspect-ratio: 16/9; border: 1px solid var(--border-strong); display: block; margin: 6px 0; }

/* ════════════════════════════════════════════════════════════
   Reply panel — deslizable desde cualquier borde
   ════════════════════════════════════════════════════════════ */
.reply-widget {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 600;
  font-family: var(--serif);
  bottom: 0; left: 0; right: 0;
  width: 100%;
  transform: translateY(calc(100% - var(--rw-tab-size)));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --rw-tab-size: 32px;
  --rw-panel-size: 320px;
  display: flex;
  flex-direction: column;
}
.reply-widget.open {
  transform: translateY(0);
}

.reply-widget.edge-bottom {
  bottom: 0; top: auto; left: 0; right: 0;
  width: 100%; height: var(--rw-panel-size);
  flex-direction: column;
  transform: translateY(calc(100% - var(--rw-tab-size)));
  max-width: 100vw;
}
.reply-widget.edge-bottom.open { transform: translateY(0); }
.reply-widget.edge-bottom .rw-tab { order: -1; }
.reply-widget.edge-bottom .rw-resize {
  order: 0; cursor: ns-resize;
  height: 5px; width: 100%;
  background: var(--accent); opacity: 0.4; flex-shrink: 0;
}
.reply-widget.edge-bottom .rw-resize:hover { opacity: 0.8; }
.reply-widget.edge-bottom .rw-body { order: 1; flex: 1; overflow-y: auto; }
.reply-widget.edge-bottom .rw-tab .rw-tab-arrow { content: '▲'; }
.reply-widget.edge-bottom.open .rw-tab .rw-tab-arrow::before { content: '▼'; }
.reply-widget.edge-bottom .rw-tab .rw-tab-arrow::before { content: '▲'; }

.reply-widget.edge-top {
  top: 0; bottom: auto; left: 0; right: 0;
  width: 100%; height: var(--rw-panel-size);
  flex-direction: column-reverse;
  transform: translateY(calc(-100% + var(--rw-tab-size)));
  max-width: 100vw;
}
.reply-widget.edge-top.open { transform: translateY(0); }
.reply-widget.edge-top .rw-tab { order: -1; }
.reply-widget.edge-top .rw-resize {
  order: 0; cursor: ns-resize;
  height: 5px; width: 100%;
  background: var(--accent); opacity: 0.4; flex-shrink: 0;
}
.reply-widget.edge-top .rw-resize:hover { opacity: 0.8; }
.reply-widget.edge-top .rw-body { order: 1; flex: 1; overflow-y: auto; }
.reply-widget.edge-top .rw-tab .rw-tab-arrow::before { content: '▼'; }
.reply-widget.edge-top.open .rw-tab .rw-tab-arrow::before { content: '▲'; }

.reply-widget.edge-right {
  right: 0; left: auto; top: 0; bottom: 0;
  height: 100%; width: var(--rw-panel-size);
  flex-direction: row;
  transform: translateX(calc(100% - var(--rw-tab-size)));
  max-height: 100vh;
}
.reply-widget.edge-right.open { transform: translateX(0); }
.reply-widget.edge-right .rw-resize {
  cursor: ew-resize; width: 5px; height: 100%;
  background: var(--accent); opacity: 0.4; flex-shrink: 0; order: 1;
}
.reply-widget.edge-right .rw-resize:hover { opacity: 0.8; }
.reply-widget.edge-right .rw-tab {
  order: -1;
  width: var(--rw-tab-size); height: 100%;
  flex-direction: column;
  writing-mode: vertical-rl; transform: rotate(180deg);
  border-radius: 6px 0 0 6px;
}
.reply-widget.edge-right .rw-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.reply-widget.edge-right .rw-body { order: 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.reply-widget.edge-right .rw-tab .rw-tab-arrow::before { content: '←'; }
.reply-widget.edge-right.open .rw-tab .rw-tab-arrow::before { content: '→'; }

.reply-widget.edge-left {
  left: 0; right: auto; top: 0; bottom: 0;
  height: 100%; width: var(--rw-panel-size);
  flex-direction: row;
  transform: translateX(calc(-100% + var(--rw-tab-size)));
  max-height: 100vh;
}
.reply-widget.edge-left.open { transform: translateX(0); }
.reply-widget.edge-left .rw-resize {
  cursor: ew-resize; width: 5px; height: 100%;
  background: var(--accent); opacity: 0.4; flex-shrink: 0; order: 1;
}
.reply-widget.edge-left .rw-resize:hover { opacity: 0.8; }
.reply-widget.edge-left .rw-tab {
  order: 99;
  width: var(--rw-tab-size); height: 100%;
  flex-direction: column;
  writing-mode: vertical-rl;
  border-radius: 0 6px 6px 0;
}
.reply-widget.edge-left .rw-tab-label { writing-mode: vertical-rl; }
.reply-widget.edge-left .rw-body { order: 0; flex: 1; overflow-y: auto; overflow-x: hidden; }
.reply-widget.edge-left .rw-tab .rw-tab-arrow::before { content: '←'; }
.reply-widget.edge-left.open .rw-tab .rw-tab-arrow::before { content: '→'; }

.rw-tab {
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 16px;
  height: var(--rw-tab-size);
  flex-shrink: 0;
  user-select: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
.rw-tab:hover { background: var(--accent-deeper); }
.rw-tab-arrow { font-size: 0.6667rem; opacity: 0.8; }

.rw-toolbar {
  background: var(--accent);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.7333rem;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
  order: -1;
}
.reply-widget.edge-bottom .rw-toolbar { order: 99; }

.rw-dock-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-size-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reply-widget.edge-left .rw-size-group  { order: -1; }
.reply-widget.edge-left .rw-dock-group  { order:  1; }
.reply-widget.edge-right .rw-dock-group { order: -1; }
.reply-widget.edge-right .rw-size-group { order:  1; }

.rw-dock-label { margin-right: 4px; }
.rw-dock {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  width: 24px; height: 22px;
  cursor: pointer;
  font-size: 0.8667rem;
  line-height: 1;
  padding: 0;
  transition: background 0.1s;
}
.rw-dock:hover { background: rgba(255,255,255,0.35); }
.rw-dock.active { background: rgba(255,255,255,0.5); }

.rw-body {
  background: var(--bg-post);
  border: 2px solid var(--accent);
  border-top: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.reply-widget.edge-top .rw-body { border-top: 2px solid var(--accent); border-bottom: none; }
.reply-widget.edge-left .rw-body { border-left: none; border-right: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.reply-widget.edge-right .rw-body { border-right: none; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }

.rw-form-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.rw-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.rw-form input[type="text"], .rw-form textarea {
  width: 100%; padding: 6px 8px; font-size: 0.9333rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-input); color: var(--text); font-family: var(--serif);
  box-sizing: border-box;
}
.rw-form input[type="text"] { flex-shrink: 0; padding: 4px 8px; }
.rw-options { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 0.8rem; }
.rw-options .checkbox-row { display: flex; align-items: center; gap: 4px; }
.rw-form .textarea-wrap {
  position: relative;
  width: 100%;
}
.rw-form .textarea-wrap textarea {
  width: 100%;
  resize: vertical;
  min-height: 200px;
  height: 35vh;
  padding-bottom: 22px;
}
.rw-form .file-label {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 4px;
}
.rw-form .file-input { font-family: var(--mono); font-size: 0.7333rem; }

.rw-submit-wrap {
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border-top: 1px solid var(--border);
  width: 100%;
}
.reply-widget .rw-submit-wrap button[type="submit"],
.reply-widget .rw-submit-wrap button.rw-post-btn {
  background: var(--accent-deep); color: white; border: none;
  padding: 13px 0; font-family: var(--sans); font-weight: 700; font-size: 1rem;
  cursor: pointer; letter-spacing: 0.04em; border-radius: 0;
  width: 100%; display: block;
}
.reply-widget .rw-submit-wrap button[type="submit"]:hover,
.reply-widget .rw-submit-wrap button.rw-post-btn:hover { background: var(--accent-deeper); }

.rw-size-btn {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  width: 22px; height: 20px;
  cursor: pointer;
  font-size: 0.9333rem;
  line-height: 1;
  padding: 0;
}
.rw-size-btn:hover { background: rgba(255,255,255,0.35); }
.rw-size-display {
  min-width: 36px;
  text-align: center;
  font-size: 0.7333rem;
  color: rgba(255,255,255,0.95);
  font-family: var(--mono);
}
.rw-size-reset {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 0 6px; height: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--mono);
}
.rw-size-reset:hover { background: rgba(255,255,255,0.28); }

.open-reply-btn {
  display: inline-block; margin: 4px 0 16px;
  background: var(--accent); color: white;
  border: 1px solid var(--accent-deep); padding: 8px 18px;
  font-family: var(--sans); font-weight: 600; font-size: 0.9333rem;
  cursor: pointer; border-radius: 0;
}
.open-reply-btn:hover { background: var(--accent-deeper); }

.hover-preview {
  position: absolute; z-index: 1500;
  max-width: 520px; max-height: 80vh; overflow: auto;
  background: var(--bg-post); border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  padding: 8px 12px; pointer-events: none;
}
.hover-preview .post-content { }
.hover-preview .files { float: left; }

.edited-mark { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   Inline post editor
   ════════════════════════════════════════════════════════════ */
.editor {
  margin: 8px 0 4px; padding: 12px;
  background: var(--bg-op); border: 1px solid var(--accent);
  display: flex; flex-direction: column; gap: 10px;
}
.editor .textarea-wrap { position: relative; }
.editor textarea {
  width: 100%; min-height: 140px; resize: vertical; padding: 8px 8px 22px;
  font-family: var(--serif); font-size: 0.9333rem; color: var(--text); border: 1px solid var(--border-strong);
}
.editor-tools { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; flex-wrap: wrap; }
.editor-hint { color: var(--text-dim); }
.editor-side { font-family: var(--mono); font-size: 0.8rem; padding: 3px 6px; border: 1px solid var(--border-strong); }
.editor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--border-strong); background: var(--bg-input); padding: 4px;
  cursor: grab; font-family: var(--mono); font-size: 0.6667rem;
}
.editor-chip:active { cursor: grabbing; }
.editor-chip img { width: 64px; height: 48px; object-fit: cover; background: var(--bg-panel); }
.editor-actions { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════════════
   Board view: clamp OP height + show-more (vs thread view)
   ════════════════════════════════════════════════════════════ */

.threads .post.op .post-content.clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg-op));
  pointer-events: none;
}

.show-more-btn:hover { background: var(--border); color: var(--link-hover); }

/* ════════════════════════════════════════════════════════════
   Styled error page
   ════════════════════════════════════════════════════════════ */
.error-box {
  max-width: 460px; margin: 60px auto; padding: 28px;
  background: var(--bg-panel); border: 1px solid var(--danger);
  border-left: 4px solid var(--danger); text-align: center;
}
.error-box h1 { color: var(--danger); font-size: 1.3333rem; margin: 0 0 10px; }
.error-box p { color: var(--text); margin: 0 0 18px; }
.error-back {
  display: inline-block; background: var(--accent); color: white;
  border: 1px solid var(--accent-deep); padding: 8px 20px; text-decoration: none;
  font-family: var(--sans); font-weight: 600;
}
.error-back:hover { background: var(--accent-deeper); color: white; }

@media (max-width: 640px) {
  .reply-widget.edge-left,
  .reply-widget.edge-right { --rw-panel-size: 90vw; }
  .inline-file img, .files .thumb img { max-width: 45vw; }
}

/* ── NUEVAS REGLAS PARA OCULTAR METADATOS Y MOSTRAR EN LIGHTBOX ── */
.file-fig figcaption .fsize, 
.file-fig figcaption .fdim {
  display: none;
}

.lightbox-info {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.9333rem;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2001;
}




/* ── Board clamp & Actions Bar ─── */
.op-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  clear: both;
}
.op-actions-left { display: flex; gap: 10px; }
.op-actions-bar .show-more-btn { margin: 0; }
.open-thread-btn { margin-left: auto; }

.threads .post.op .post-content.clamped {
  max-height: 340px !important; overflow: hidden; position: relative; /* needed for ::after fade */
}
.threads .post.op .post-content.clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg-op));
  pointer-events: none;
}

.threads .post.reply .post-content.clamped-reply {
  max-height: 180px !important; overflow: hidden; position: relative; /* needed for ::after fade */
}
.threads .post.reply .post-content.clamped-reply::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg-post));
  pointer-events: none;
}

.show-more-btn {
  display: inline-block; margin: 6px 0 2px;
  background: var(--bg-panel); color: var(--accent);
  border: 1px solid var(--border-strong); padding: 4px 14px;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.show-more-btn:hover { background: var(--border); color: var(--link-hover); }

/* ── Inline file positioning ──────────────── */
.inline-file { display: block; margin: 6px 0; }
.inline-file.float-left  { float: left;  display: block; margin: 4px 14px 4px 0; }
.inline-file.float-right { float: right; display: block; margin: 4px 0 4px 14px; }
.inline-file.center      { float: none; display: block; margin: 8px auto; text-align: center; }
/* Inline flow: stays exactly where the token was in the text (like a word) */
.inline-file.inline-flow {
  display: inline-block; vertical-align: middle;
  margin: 2px 4px;
}
.inline-file img, .inline-file video {
  display: block;
  max-width: 100%;
  height: auto;
}
.inline-file.float-left img,
.inline-file.float-right img { max-width: 100% !important; height: auto !important; }
.inline-file.inline-flow img,
.inline-file.inline-flow video { max-width: 200px; max-height: 200px; display: inline; }
.inline-file.center img,
.inline-file.center video { margin: 0 auto; }

/* Video player */
.inline-video { max-width: 100%; border: 1px solid var(--border-strong); }
.inline-audio-wrap { display: block; clear: both; margin: 6px 0; max-width: 360px; }
.inline-audio-label { display: none; } /* filename hidden — saves space */
.inline-audio {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  accent-color: var(--accent);
}
.post-content::after { content: ''; display: table; clear: both; } /* clear floats */

/* Size inputs in preview items */
.pinsert input[type="number"] { border: 1px solid var(--border-strong); font-family: var(--mono); }


/* ── Rich Editor (WYSIWYG) ──────────────── */
.rich-editor-wrapper { background: var(--bg-panel); border: 1px solid var(--border-strong); padding: 0; margin: 8px 0; }

/* ── Barra fija de formato ──────────────── */
.editor-fixed-bar {
  display: flex; align-items: center; gap: 1px;
  background: var(--bg-toolbar);
  padding: 3px 4px;
  border-bottom: 1px solid var(--border-toolbar);
  border-radius: 0;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;   /* stays above editor content when scrolling */
}
.editor-fixed-bar .sel-tb-btn {
  background: transparent; color: white; border: none;
  padding: 4px 8px; cursor: pointer; font-size: 0.8rem;
  border-radius: 2px; min-width: 26px;
  font-family: var(--mono); font-weight: 600;
}
.editor-fixed-bar .sel-tb-btn:hover { background: var(--bg-toolbar-hover); }
.editor-fixed-bar .sel-tb-sep { width: 1px; background: var(--bg-toolbar-hover); height: 18px; margin: 0 2px; flex-shrink: 0; }
.editor-fixed-bar .sel-tb-clear { color: var(--toolbar-clear); }
.editor-fixed-bar .sel-tb-clear:hover { background: var(--bg-toolbar-danger); color: white; }
.editor-fixed-bar .sel-tb-prefix { color: var(--toolbar-prefix, #aaddff); font-weight: 700; }
.editor-fixed-bar .sel-tb-gtsettings { color: var(--toolbar-settings, #ffdd88); font-size: 0.9333rem; padding: 2px 6px; }

/* Toolbar flotante (aparece al seleccionar texto) */
.sel-toolbar-float {
  position: absolute;
  top: 100%;
  right: 0; z-index: 9000;
  background: var(--bg-toolbar);
  border: 1px solid var(--border-toolbar); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Padding interno del editor (ya no lo da el wrapper) */
.rich-editor {
  padding: 10px 12px !important;
}

.rich-editor {
  min-height: 120px; max-height: 600px; overflow-y: auto;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  padding: 10px 14px;
  font-family: var(--serif); font-size: 1rem; line-height: 1.6;
  word-wrap: break-word; overflow-wrap: break-word;
  outline: none;
  cursor: text;
}
.rich-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(52,72,122,0.15); }

/* Images inside the editor */
.editor-img {
  display: inline-block;
  border: 2px solid transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 100ms;
  max-width: 100%;
}
.editor-img:hover, .editor-img:focus { border-color: var(--accent); }
.editor-img.ed-inline { display: inline-block; vertical-align: middle; margin: 2px 4px; }
.editor-img.ed-float-left { float: left; margin: 4px 14px 4px 0; }
.editor-img.ed-float-right { float: right; margin: 4px 0 4px 14px; }
.editor-img.ed-center { display: block; margin: 8px auto; float: none; }
.rich-editor::after { content: ''; display: table; clear: both; }

/* Gallery row */
.editor-gallery {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 0;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}
.gallery-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  padding: 4px; cursor: pointer; width: 70px;
  font-family: var(--mono); font-size: 0.6667rem; color: var(--text-dim);
  transition: border-color 100ms, box-shadow 100ms;
}
.gallery-chip:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery-chip img { width: 60px; height: 45px; object-fit: cover; background: var(--bg-panel); display: block; }
.gallery-chip span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.gallery-add {
  justify-content: center; border-style: dashed;
  color: var(--accent); font-weight: 700;
}
.gallery-add .add-icon { font-size: 1.6rem; line-height: 45px; }
.gallery-add:hover { background: rgba(52,72,122,0.05); }

/* ── Drag-reorder feedback ─────────────────────────────────── */
/* Source chip while being dragged: dim it so the cursor target is obvious */
.gallery-chip.chip-dragging { opacity: 0.4; }
/* Target chip during dragover: show a colored bar on the side where the
   dragged chip would land. Position relative so the ::before bar anchors. */
.gallery-chip.chip-drop-before,
.gallery-chip.chip-drop-after { position: relative; }
.gallery-chip.chip-drop-before::before,
.gallery-chip.chip-drop-after::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  pointer-events: none;
}
.gallery-chip.chip-drop-before::before { left: -4px; }
.gallery-chip.chip-drop-after::before  { right: -4px; }

/* Image controls popup */
.img-popup {
  font-family: var(--mono); font-size: 0.8rem;
  border-radius: 4px;
}
.img-popup select, .img-popup input { font-family: var(--mono); font-size: 0.8rem; border: 1px solid var(--border-strong); }

/* ════════════════════════════════════════════════════════════
   v2.3 — Rich editor (two buckets, drag handles, toolbar)
   ════════════════════════════════════════════════════════════ */

.editor-normal-row, .editor-extra-row {
  margin: 6px 0;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.editor-bucket-label {
  font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim);
  margin-bottom: 4px;
}
.editor-bucket-label .bk-hint {
  color: var(--text-dim); font-weight: normal; opacity: 0.8;
}

/* Override base .editor-gallery for v2.3 chips */
.editor-gallery { border-top: none; padding: 0; margin: 0; }

/* Gallery chip — taller than v2.0, with spoiler row and X button */
.editor-gallery .gallery-chip {
  position: relative;
  width: 78px; gap: 3px;
  padding: 4px 4px 2px;
}
.editor-gallery .gallery-chip .chip-img {
  width: 70px; height: 52px;
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.editor-gallery .gallery-chip .chip-img img {
  width: 70px; height: 52px; object-fit: cover;
}
.editor-gallery .gallery-chip .chip-label {
  font-family: var(--mono); font-size: 0.6667rem; color: var(--text-dim);
  text-align: center;
}
.editor-gallery .gallery-chip .chip-spoiler {
  display: flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 0.6rem; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.editor-gallery .gallery-chip .chip-spoiler input { transform: scale(0.85); margin: 0; }
.editor-gallery .gallery-chip .chip-remove {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: white;
  border: none; width: 16px; height: 16px;
  font-weight: 700; line-height: 1; cursor: pointer;
  border-radius: 50%; font-size: 0.7333rem;
  display: flex; align-items: center; justify-content: center;
}
.editor-gallery .chip-spoilered .chip-img img {
  filter: brightness(0.55) saturate(0.5);
}

/* Editor body — square is default; clear: both makes text break above and below */
.rich-editor { position: relative; min-height: 140px; }
.rich-editor:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: var(--text-dim); opacity: 0.7; pointer-events: none;
}
.rich-editor .editor-img.ed-square {
  display: block; margin: 8px 0; clear: both; max-width: 100%;
}
.rich-editor .editor-img.ed-inline {
  display: inline-block; vertical-align: middle; margin: 0 4px; clear: none; float: none;
}
.rich-editor .editor-img.ed-float-left  { float: left;  margin: 4px 14px 4px 0; clear: none; }
.rich-editor .editor-img.ed-float-right { float: right; margin: 4px 0 4px 14px; clear: none; }
.rich-editor .editor-img.ed-center      { display: block; margin: 8px auto; float: none; clear: both; }
.rich-editor .editor-img.ed-spoiler     { filter: brightness(0.5) saturate(0.4); }
.rich-editor .editor-img { cursor: pointer; transition: outline 80ms; }
.rich-editor .editor-img:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Floating selection toolbar */
.sel-toolbar {
  position: absolute;
  top: 100%;
  right: 0; z-index: 9000;
  background: var(--bg-toolbar); color: white;
  border: 1px solid var(--border-toolbar); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex; align-items: center; gap: 1px;
  padding: 2px;
  font-family: var(--mono);
}
.sel-tb-btn {
  background: transparent; color: white; border: none;
  padding: 4px 8px; cursor: pointer; font-size: 0.8rem;
  border-radius: 2px; min-width: 26px;
  font-family: var(--mono); font-weight: 600;
}
.sel-tb-btn:hover { background: var(--bg-toolbar-hover); }
.sel-tb-sep { width: 1px; background: var(--bg-toolbar-hover); height: 18px; margin: 0 2px; flex-shrink: 0; }
.sel-tb-clear { color: var(--toolbar-clear); }
.sel-tb-clear:hover { background: var(--bg-toolbar-danger); color: white; }
.sel-tb-prefix { color: var(--toolbar-prefix, #aaddff); font-weight: 700; }
.sel-tb-gtsettings { color: var(--toolbar-settings, #ffdd88); font-size: 0.9333rem; padding: 2px 6px; }

/* ── GT Settings Panel ───────────────────────────── */
.gt-settings-panel {
  position: absolute;
  top: 100%;
  right: 0; z-index: 9100;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  padding: 12px; width: 225px;
  font-family: var(--mono); font-size: 0.8667rem;
}
.gt-panel-title {
  font-weight: 700; font-size: 0.8rem; color: var(--text-dim);
  margin-bottom: 10px; letter-spacing: 0.04em;
}
.gt-swatch-row { display: flex; gap: 6px; margin-bottom: 10px; }
.gt-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color 100ms, transform 100ms;
}
.gt-swatch:hover { transform: scale(1.1); }
.gt-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.gt-preview {
  background: var(--bg); border: 1px solid var(--border);
  padding: 6px 8px; border-radius: 3px; margin-bottom: 10px;
  font-family: var(--serif); font-size: 0.8667rem; line-height: 1.8;
}
.gt-check-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; cursor: pointer; color: var(--text);
}
.gt-check-row input { cursor: pointer; width: 14px; height: 14px; }

/* Image popup (v2.3): denser, with spoiler + remove */
/* Position/coords are set by JS (showImgPopup) inline via cssText — we keep
   only the visual styling here. Setting `right: 0` here was making the popup
   stretch to the viewport edge because JS overrides only `left`/`top`. */
.img-popup {
  z-index: 9500;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  padding: 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 0.8rem;
}
.img-popup .ip-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.img-popup select, .img-popup button {
  font-family: var(--mono); font-size: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-input); padding: 3px 6px; cursor: pointer;
}
.img-popup button:hover { background: var(--bg-panel); }
.img-popup .ip-spoiler { display: flex; align-items: center; gap: 3px; cursor: pointer; }

/* Editor actions */
.editor-actions { display: flex; gap: 8px; margin-top: 0; padding: 8px 10px; border-top: 1px dashed var(--border); background: var(--bg-panel); }
.editor-save {
  background: var(--accent); color: white; border: 1px solid var(--accent);
  padding: 10px 28px; font-family: var(--sans); font-weight: 700; font-size: 0.9333rem;
  cursor: pointer; border-radius: 3px; letter-spacing: 0.03em;
}
.editor-save:hover { background: var(--link-hover); }
.editor-save:disabled { opacity: 0.6; cursor: not-allowed; }
.editor-cancel {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--border-strong);
  padding: 7px 14px; font-family: var(--sans); font-size: 0.8667rem; cursor: pointer;
}
.editor-cancel:hover { background: var(--bg-panel); }

/* Char counter in fixed bar */
.editor-char-counter {
  padding: 2px 8px;
  font-family: var(--mono); font-size: 0.7333rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.editor-char-counter.warn { color: var(--warn); }
.editor-char-counter.over { color: var(--danger); font-weight: 700; }
/* Lang selector in fixed bar */
.editor-lang-sel {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 0.7333rem;
  font-family: var(--mono);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  cursor: pointer;
  max-width: 150px;
  height: 22px;
}

/* Gallery wrap padding fix */
.editor-gallery-wrap {
  padding: 8px 10px 6px;
  background: var(--bg-panel);
  border-top: 1px dashed var(--border);
}
.editor-gallery-label {
  font-family: var(--mono); font-size: 0.7333rem; color: var(--text-dim);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════
   v2.6 — Image flow modes (Free / Left / Right / Center)
   
   Anchor structure:
     <span class="ed-anchor" data-mode="..." style="--ax,--ay,--aw,--ah">
       <span class="ed-shape">            ← float that carves the text exclusion
         <span class="ed-positioned"><img></span>
         <span class="ed-handles">...</span>
       </span>
     </span>
   
   The image and resize handles live INSIDE the shape. The shape is a
   float in the text flow, so the image's `position: absolute` anchors to
   the shape's box — which sits where the user inserted the anchor in
   the text. That means moving the image visually keeps it tied to the
   surrounding text instead of floating as a "sticker" on the editor.
   
   Modes:
     anchor       — drag-to-move; shape-outside polygon = image rect
     float-left   — classic float:left, text wraps right
     float-right  — classic float:right, text wraps left
     center       — two opposing float-shapes, image centered, text wraps both sides
   
   No more "block" or "inline" modes.
   ════════════════════════════════════════════════════════════ */

/* Position context for absolute children inside the editor.
   NOTE: .post-content does NOT get position:relative globally — if it did,
   it would sit above .files.single floats in the Z stacking order and eat
   their click events (spoiler reveal breaks in thread view).
   The clamped variants below add it back only when the fade ::after needs it. */


/* Editor body min-height */
.rich-editor { min-height: 200px; }

/* Mode select inside the image popup */
.img-popup .ip-mode { padding: 3px 6px; font-family: var(--mono); font-size: 0.8rem; }

/* Legacy fallback — old single-img .editor-img / inline-file classes
   are kept rendering for posts saved before v2.6 */
.rich-editor .editor-img.ed-square { clear: both; display: block; margin: 8px 0; max-width: 100%; }

/* ── Simple inline images in the WYSIWYG editor ── */
.ed-img {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 100ms;
  box-sizing: border-box;
}
.ed-img:hover, .ed-img:focus { border-color: var(--accent); }
.ed-img[data-side="left"]  { float: left;  margin: 4px 12px 4px 0; }
.ed-img[data-side="right"] { float: right; margin: 4px 0 4px 12px; }
/* Audio placeholder — fixed height so it doesn't stretch weirdly */
.ed-img-audio { height: 48px !important; width: 280px !important; border-radius: 6px; }
.rich-editor::after { content: ""; display: table; clear: both; }

/* Image popup controls */
.img-popup select, .img-popup input, .img-popup button {
  font-family: monospace; font-size: 0.8rem;
  padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: 2px;
}
.img-popup button { cursor: pointer; background: var(--danger); color: white; border-color: var(--danger); }
.ip-item { display: inline-flex; align-items: center; gap: 3px; }

/* ── Resize handles for ed-img ── */
/* Position/coords are set by JS (repositionResizeHandles) inline. The wrap
   gets a full inline style (position:fixed, left/top/w/h). The handles only
   get left/top inline, so they need `position: fixed` from CSS to interpret
   those coords against the viewport. Setting `top: 100%; right: 0;` here was
   stretching them to the viewport edge. */
.ed-resize-wrap {
  pointer-events: none;
  z-index: 9400;
  outline: 2px solid var(--accent);
}
.ed-rh {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--bg-input);
  border: 2px solid var(--accent);
  border-radius: 2px;
  pointer-events: all;
  z-index: 9450;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   DICE SYSTEM — PANEL (reply form)
   ═══════════════════════════════════════════════ */
.dice-panel {
  border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
  background: var(--bg-op);
  margin-top: 4px;
}
.dice-panel-label { font-size: 0.8rem; color: var(--fg-dim, #666); margin-bottom: 6px; }
.dice-panel-sub { font-size: 0.7333rem; color: var(--fg-dim, #888); font-style: italic; }
.dice-catalogue { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dice-quick-btn {
  font-family: var(--mono); font-size: 0.8rem; padding: 2px 7px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 3px; cursor: pointer; color: var(--fg); transition: background .12s;
}
.dice-quick-btn:hover { background: var(--accent, #34487a); color: white; }
.dice-custom-row { display: flex; gap: 4px; margin-bottom: 6px; }
.dice-custom-input {
  flex: 1; font-family: var(--mono); font-size: 0.8rem; padding: 3px 6px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--bg); color: var(--fg);
}
.dice-custom-add {
  font-size: 0.8rem; padding: 3px 8px;
  background: var(--accent, #34487a); color: white; border: none;
  border-radius: 3px; cursor: pointer;
}
.dice-entry-list { display: flex; flex-direction: column; gap: 4px; }
.dice-entry-empty { font-size: 0.7333rem; color: var(--fg-dim, #999); font-style: italic; padding: 2px 0; }
.dice-entry-row {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 6px;
}
.dice-formula-wrap { display: flex; align-items: center; gap: 3px; }
.dice-count-btn {
  width: 20px; height: 20px; padding: 0; font-size: 0.8667rem; line-height: 1;
  background: var(--bg-op); border: 1px solid var(--border);
  border-radius: 2px; cursor: pointer; color: var(--fg);
}
.dice-count-btn:hover { background: var(--border-strong); }
.dice-formula-tag {
  font-family: var(--mono); font-size: 0.8rem; font-weight: bold;
  color: var(--accent, #34487a); min-width: 48px; text-align: center;
}
.dice-op-sel {
  font-size: 0.8rem; padding: 1px 3px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--fg);
}
.dice-opval-in {
  width: 60px; font-size: 0.8rem; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--fg);
}
.dice-rm-btn {
  margin-left: auto; background: none; border: none;
  color: var(--danger, #c00); cursor: pointer; font-size: 0.8667rem;
  padding: 0 2px; opacity: .6;
}
.dice-rm-btn:hover { opacity: 1; }

/* ── Separator between post content and dice block ── */
.dice-separator {
  border: none; border-top: 1px dashed var(--border-strong, #aaa);
  margin: 8px 0 6px; opacity: .6;
}

/* ── Dice block inside thread/board/overboard ── */
.dice-block { padding: 4px 10px 8px; }
.dice-block-hdr {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 5px;
}
.dice-block-hleft { display: flex; align-items: center; gap: 6px; }
.dice-block-title { font-size: 0.8rem; font-weight: bold; color: var(--fg-dim, #555); }
.dice-reroll-badge {
  font-size: 0.6667rem; font-family: var(--mono);
  background: var(--accent, #34487a); color: white;
  border-radius: 8px; padding: 1px 7px;
}

/* Results: horizontal wrapping pills */
.dice-results { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.dice-pill {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--mono); font-size: 0.8rem;
  background: var(--bg-input, #f5f5f5); border: 1px solid var(--border-strong, #ddd);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.dice-pill-lbl { color: var(--text, #333); }
.dice-pill-eq  { color: var(--text-dim, #999); font-size: 0.7333rem; }
.dice-pill-val { color: var(--accent, #c44); font-weight: bold; font-size: 0.8667rem; }

/* History */
.dice-hist { margin-top: 5px; }
.dice-hist-tog {
  background: none; border: none; cursor: pointer;
  font-size: 0.7333rem; color: var(--fg-dim, #888);
  padding: 0; text-decoration: underline dotted;
}
.dice-hist-tog:hover { color: var(--fg); }
.dice-hist-body { margin-top: 4px; overflow-x: auto; }
.dice-hist-body[hidden] { display: none !important; }
.dice-hist-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.7333rem;
  white-space: nowrap;
}
.dice-hist-th {
  font-size: 0.6667rem;
  color: var(--fg-dim, #999);
  font-weight: normal;
  text-align: right;
  padding: 1px 8px 2px 4px;
  border-bottom: 1px solid var(--border);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dice-hist-lbl {
  font-weight: bold; color: var(--fg-dim, #777);
  padding-right: 10px; text-align: left;
  white-space: nowrap;
}
.dice-hist-val {
  text-align: right;
  padding: 1px 8px 1px 4px;
  color: var(--fg-dim, #999);
}
.dice-hist-row-current .dice-hist-val,
.dice-hist-row-current .dice-hist-lbl {
  color: var(--fg);
  font-weight: bold;
}

/* Reroll button */
.dice-reroll-btn {
  padding: 2px 10px; font-size: 0.7333rem;
  background: var(--accent, #34487a); color: white;
  border: none; border-radius: 3px; cursor: pointer;
  opacity: .85; transition: opacity .15s; flex-shrink: 0;
}
.dice-reroll-btn:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   POLLS — panel de creación (reply form) + bloque en post
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel en el reply form ─────────────────────────────────── */
/* ── Poll panel (editor) ─────────────────────────────────── */
.polls-container { margin-top: 0; }

.polls-panels-wrap { display: flex; flex-direction: column; }

.poll-panel {
  padding: 8px 10px 10px;
}
.poll-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 6px;
}
.poll-panel-hdr-label {
  font-size: 0.8rem; color: var(--fg-dim, #666);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.poll-panel-number {
  font-size: 0.7rem; font-weight: bold; color: var(--fg-dim, #999);
  font-family: var(--mono);
}
.poll-panel-remove {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.72rem; padding: 1px 7px;
  background: none; border: 1px solid var(--border-strong, #bbb);
  border-radius: 3px; cursor: pointer; color: var(--fg-dim, #888);
  transition: color .1s, border-color .1s; line-height: 1.5;
}
.poll-panel-remove:hover { color: var(--danger, #c44); border-color: var(--danger, #c44); }

.poll-panel-sub { font-size: 0.7333rem; color: var(--fg-dim, #999); font-style: italic; }

.poll-add-row {
  padding: 4px 10px 8px;
}
.poll-add-btn {
  font-size: 0.7333rem; padding: 3px 10px;
  background: var(--bg); color: var(--fg-dim, #666);
  border: 1px solid var(--border-strong, #bbb);
  border-radius: 3px; cursor: pointer;
  transition: border-color .1s, color .1s; white-space: nowrap;
}
.poll-add-btn:hover:not(:disabled) { border-color: var(--accent, #34487a); color: var(--accent, #34487a); }
.poll-add-btn:disabled { opacity: .45; cursor: default; }

.poll-inner-sep {
  border: none; border-top: 1px dashed var(--border, #ddd);
  margin: 6px 0;
}

.poll-question-wrap { display: flex; }
.poll-question-input {
  flex: 1; font-size: 0.8rem; padding: 4px 8px;
  border: 1px solid var(--border-strong, #bbb); border-radius: 3px;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
}
.poll-question-input:focus { outline: 1px solid var(--accent, #34487a); border-color: var(--accent, #34487a); }

.poll-options-list { display: flex; flex-direction: column; gap: 3px; }
.poll-option-row {
  display: flex; align-items: center; gap: 5px;
}
.poll-option-handle {
  font-size: 0.7rem; font-weight: bold; color: var(--fg-dim, #999);
  font-family: var(--mono); min-width: 18px; text-align: center;
  flex-shrink: 0;
}
.poll-option-input {
  flex: 1; font-size: 0.8rem; padding: 3px 7px;
  border: 1px solid var(--border, #ddd); border-radius: 3px;
  background: var(--bg); color: var(--fg); font-family: var(--sans);
}
.poll-option-input:focus { outline: 1px solid var(--accent, #34487a); border-color: var(--accent, #34487a); }
.poll-option-rm {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  font-size: 0.8rem; color: var(--fg-dim, #999); line-height: 1;
  flex-shrink: 0; transition: color .1s;
}
.poll-option-rm:hover { color: var(--danger, #c44); }

.poll-options-counter {
  font-size: 0.6667rem; color: var(--fg-dim, #aaa);
  text-align: right; padding-right: 2px;
}
.poll-options-counter.warn { color: var(--warn, #b85c00); font-weight: bold; }

.poll-settings-row {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 0.7333rem; color: var(--fg-dim, #666);
}
.poll-setting { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.poll-setting input[type="checkbox"] { cursor: pointer; }

/* ── Bloque en el post ──────────────────────────────────────── */
.poll-loading {
  font-size: 0.8rem; color: var(--fg-dim, #888); padding: 6px 10px;
  font-style: italic;
}

/* ── Poll blocks grid (inside posts) ────────────────────── */
.poll-blocks-wrap {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  /* Default: 1 poll → centrada, ancha */
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
/* 2 polls → dos columnas iguales */
.poll-blocks-wrap.poll-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}
/* 3 polls → tres columnas */
.poll-blocks-wrap.poll-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
}
/* 4-5 polls → dos filas de 2-3 */
.poll-blocks-wrap.poll-count-4,
.poll-blocks-wrap.poll-count-5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.poll-block {
  padding: 6px 10px 10px;
  border-radius: 4px;
  background: var(--bg-op, #fafafa);
  border: 1px solid var(--border, #e0e0e0);
  min-width: 0;
  width: 100%;
}

.poll-block-hdr {
  display: flex; align-items: flex-start; gap: 7px; margin-bottom: 8px;
}
.poll-block-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.3; }
.poll-block-title-wrap { flex: 1; min-width: 0; }
.poll-block-title {
  font-size: 0.9rem; font-weight: bold; color: var(--fg);
  line-height: 1.3; word-break: break-word;
}
.poll-block-meta {
  font-size: 0.6667rem; color: var(--fg-dim, #999); margin-top: 2px;
}

.poll-block-options { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }

.poll-option-vote {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 7px; border-radius: 3px;
  border: 1px solid var(--border, #e0e0e0);
  background: var(--bg);
  cursor: pointer; transition: border-color .12s, background .12s;
  position: relative;
}
.poll-option-vote:hover:not([data-disabled]) { border-color: var(--accent, #34487a); background: var(--bg-op); }
.poll-option-vote.voted { border-color: var(--accent, #34487a); background: var(--bg-op); }
.poll-option-vote input[type="radio"],
.poll-option-vote input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent, #34487a);
}
.poll-option-vote input:disabled { cursor: default; }

.poll-option-text-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.poll-option-text {
  font-size: 0.8rem; color: var(--fg); line-height: 1.3; word-break: break-word;
}

/* Progress bar */
.poll-option-bar {
  display: block; width: 100%; height: 4px;
  background: var(--border, #e0e0e0); border-radius: 2px; overflow: hidden;
}
.poll-option-bar-fill {
  display: block; height: 100%;
  background: var(--accent, #34487a);
  border-radius: 2px; transition: width .3s ease;
}
.poll-option-pct {
  font-size: 0.6667rem; color: var(--fg-dim, #888);
  font-family: var(--mono); white-space: nowrap;
}

.poll-vote-btn {
  display: block; width: 100%; padding: 5px 0;
  font-size: 0.8rem; font-weight: bold;
  background: var(--accent, #34487a); color: white;
  border: none; border-radius: 3px; cursor: pointer;
  opacity: .9; transition: opacity .15s;
  margin-bottom: 6px;
}
.poll-vote-btn:hover:not(:disabled) { opacity: 1; }
.poll-vote-btn:disabled { opacity: .5; cursor: default; }

.poll-block-footer {
  font-size: 0.7rem; color: var(--fg-dim, #999);
  border-top: 1px solid var(--border, #e8e8e8);
  padding-top: 5px; margin-top: 4px;
  line-height: 1.4;
}

/* On narrow screens, all poll grids collapse to single column */
@media (max-width: 560px) {
  .poll-blocks-wrap,
  .poll-blocks-wrap.poll-count-2,
  .poll-blocks-wrap.poll-count-3,
  .poll-blocks-wrap.poll-count-4,
  .poll-blocks-wrap.poll-count-5 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   STICKY HEADER + BOARDS BAR
   ═══════════════════════════════════════════════ */
.top-banner {
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); padding: 0;
}
.boards-bar {
  display: flex; align-items: center; gap: 0;
  padding: 3px 10px;
  background: var(--accent, #34487a);
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
  white-space: nowrap; font-size: 0.8rem; font-family: var(--mono);
}
.boards-bar::-webkit-scrollbar { height: 3px; }
.boards-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }
.boards-bar-home {
  color: white; font-weight: bold; text-decoration: none;
  margin-right: 4px; flex-shrink: 0;
}
.boards-bar-link {
  color: rgba(255,255,255,.75); text-decoration: none;
  padding: 0 2px; transition: color .1s; flex-shrink: 0;
}
.boards-bar-link:hover, .boards-bar-link.active { color: white; font-weight: bold; }
.boards-bar-sep { color: rgba(255,255,255,.35); padding: 0 1px; flex-shrink: 0; }
.header-main {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; background: var(--bg-op);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.brand-link { font-weight: bold; font-size: 1rem; text-decoration: none; color: var(--fg); white-space: nowrap; }
.tagline { font-size: 0.8rem; color: var(--fg-dim, #888); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board presentation */
.board-presentation {
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-op); line-height: 1.6;
}
.board-presentation img { max-width: 100%; height: auto; }
.board-presentation a { color: var(--accent, #34487a); }

/* Board stats bar */
.board-stats {
  font-size: 0.8rem; color: var(--fg-dim, #888);
  margin-bottom: 8px; display: flex;
  align-items: center; gap: 4px; flex-wrap: wrap;
}
.board-stats-sep { color: var(--border-strong); }
.board-stats-warn { color: var(--warn, #b85c00); font-weight: bold; }
.page-ellipsis { padding: 0 4px; color: var(--fg-dim); }

/* Presentation editor (admin) */
.presentation-editor-wrap { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.presentation-toolbar {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 5px 8px; background: var(--bg-op);
  border-bottom: 1px solid var(--border);
}
.presentation-toolbar button {
  padding: 2px 8px; font-size: 0.8rem; background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 3px;
  cursor: pointer; color: var(--fg);
}
.presentation-toolbar button:hover { background: var(--accent,#34487a); color: white; }
.ptb-sep { color: var(--border-strong); padding: 0 2px; align-self: center; }
.presentation-preview {
  padding: 12px; border-top: 1px solid var(--border);
  background: var(--bg); min-height: 60px;
}
.presentation-preview img { max-width: 100%; }
.form-group { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 0.8667rem; font-weight: bold; color: var(--fg-dim); }

/* ═══════════════════════════════════════════════════════
   Homepage (index.ejs) — new layout
   ═══════════════════════════════════════════════════════ */

.idx-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Links bar ── */
.idx-links-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  padding: 6px 12px;
  background: var(--bg-op);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: var(--mono);
}
.idx-links-bar a { color: var(--link); text-decoration: none; }
.idx-links-bar a:hover { text-decoration: underline; color: var(--link-hover); }
.idx-links-sep { color: var(--border-strong); }

/* ── Welcome ── */
.idx-welcome {
  padding: 18px 20px;
  background: var(--bg-op);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.idx-site-title {
  font-size: 1.4667rem;
  font-weight: bold;
  color: var(--accent);
  margin: 0 0 8px;
}
.idx-site-desc {
  margin: 0;
  font-size: 0.8667rem;
  color: var(--fg);
  line-height: 1.6;
}
.idx-site-desc code {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.8rem;
}

/* ── Stats ── */
.idx-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.idx-stat {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px;
  background: var(--bg-op);
  gap: 3px;
  text-align: center;
}
.idx-stat-val {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent);
  font-family: var(--mono);
  line-height: 1;
}
.idx-stat-lbl {
  font-size: 0.7333rem;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Section wrapper ── */
.idx-section {
  background: var(--bg-op);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.idx-section-title {
  font-size: 0.8667rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 7px 14px;
}

/* ── Boards cloud ── */
.idx-boards-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px;
  align-items: baseline;
}
.idx-board-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-family: var(--mono);
  color: var(--link);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.idx-board-tag:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.idx-board-tag.nsfw {
  border-color: var(--danger);
  color: var(--danger);
}
.idx-board-tag.nsfw:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.idx-board-tag-name { color: inherit; }
.idx-overboard-hint {
  padding: 0 14px 12px;
  font-size: 0.8rem;
  color: var(--fg-dim);
  margin: 0;
}
.idx-overboard-hint a { color: var(--link); }

/* ── Bottom two-column grid ── */
.idx-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .idx-bottom-grid { grid-template-columns: 1fr; }
}

/* ── Latest images ── */
.idx-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 10px;
}
@media (max-width: 600px) {
  .idx-img-grid { grid-template-columns: repeat(3, 1fr); }
}
.idx-img-link {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-panel);
  aspect-ratio: 1;
}
.idx-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 140ms, transform 140ms;
}
.idx-img-link:hover img { filter: brightness(0.85); transform: scale(1.05); }

/* ── Latest posts ── */
.idx-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.idx-post-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  line-height: 1.4;
}
.idx-post-item:last-child { border-bottom: none; }
.idx-post-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  color: var(--fg);
}
.idx-post-link:hover .idx-post-snippet { color: var(--link-hover); }
.idx-post-board {
  font-family: var(--mono);
  font-size: 0.7333rem;
  color: var(--accent);
  flex-shrink: 0;
  font-weight: bold;
}
.idx-post-subject {
  font-size: 0.7333rem;
  color: var(--fg-dim);
  font-style: italic;
  flex-shrink: 0;
}
.idx-post-snippet {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  flex: 1 1 0;
  min-width: 0;
}
.idx-post-time {
  flex-shrink: 0;
  font-size: 0.7333rem;
  font-family: var(--mono);
  color: var(--fg-dim);
}
.idx-empty {
  color: var(--fg-dim);
  font-size: 0.8rem;
  font-style: italic;
  padding: 14px;
}

/* ═══════════════════════════════════════════════════════
   Info pages: /rules  /contact  /donate
   ═══════════════════════════════════════════════════════ */

.info-main {
  max-width: 820px;
  margin: 28px auto 60px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card */
.info-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-op);
}
.info-card-title {
  margin: 0;
  padding: 10px 18px;
  font-size: 0.9333rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  background: var(--accent);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, #000);
}
.info-card-body {
  padding: 20px 22px 24px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--fg);
}
.info-card-body p { margin: 0 0 12px; }
.info-card-body p:last-child { margin-bottom: 0; }

/* Lead paragraph */
.info-lead {
  color: var(--fg);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin-bottom: 20px !important;
}

/* Sub-headings */
.info-subhead {
  font-size: 0.8667rem;
  font-weight: bold;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 22px 0 10px;
}
.info-subhead:first-of-type { margin-top: 16px; }

/* Lists */
.info-rules-list,
.info-list {
  padding-left: 22px;
  margin: 8px 0 14px;
}
.info-rules-list li,
.info-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.info-rules-list li::marker { color: var(--accent); font-weight: bold; }

/* Note / fine print */
.info-note {
  font-size: 0.8rem;
  color: var(--fg-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  margin-top: 16px !important;
}

/* Divider */
.info-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

/* Donate methods */
.donate-methods { list-style: none; padding-left: 0; }
.donate-methods li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}
.donate-method-icon {
  font-size: 1.3333rem;
  line-height: 1.4;
  color: var(--accent);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.donate-addr {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--fg-dim);
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  display: inline-block;
  margin-top: 3px;
}

/* Credits list */
.credits-list { list-style: none; padding-left: 0; }
.credits-list li {
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.8667rem;
}
.credits-list li:last-child { border-bottom: none; }

/* Email link */
.info-email {
  font-family: var(--mono);
  font-size: 0.8667rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 4px;
  color: var(--link);
}
.info-email:hover { color: var(--link-hover); }

/* Back row */
.info-back-row {
  font-size: 0.8rem;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.info-back-row a { color: var(--link); text-decoration: none; }
.info-back-row a:hover { text-decoration: underline; }
.info-sep { color: var(--border-strong); }

/* ── Post actions menu (⋯) ──────────────────────────────────── */
/* Ahora vive DENTRO del .post-header como primer item del flex — el header
   lo ordena junto al checkbox de mod y al nombre, sin overlaps ni paddings. */
.post-actions-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Ocultar el triángulo nativo del <details> */
.post-actions-wrap summary {
  list-style: none;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.0667rem;
  line-height: 1;
  padding: 0 4px;
  color: var(--text-dim);
  letter-spacing: 1px;
  border-radius: 3px;
  transition: background 120ms, color 120ms;
  display: inline-block;
  user-select: none;
}
.post-actions-wrap summary::-webkit-details-marker { display: none; }
.post-actions-wrap summary::marker { display: none; }
.post-actions-wrap summary:hover {
  background: var(--bg-panel);
  color: var(--text);
}

/* Menú original dentro del <details>: siempre oculto.
   app-utils.js siempre crea una copia flotante (.pam-float) posicionada
   con getBoundingClientRect(). Mostrar el original provocaba un menú
   duplicado sin coordenadas correctas (aparecía mal posicionado). */
.post-actions-wrap .post-actions-menu {
  display: none !important;
}

/* El clon flotante (.pam-float) que crea app-utils.js sí se posiciona y muestra.
   Hereda los estilos base de .post-actions-menu vía clase doble en el div. */
.post-actions-menu {
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  padding: 4px 0;
  white-space: nowrap;
  z-index: 9999;
}

.pam-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8667rem;
  color: var(--text);
  font-family: var(--sans);
  transition: background 80ms;
}
.pam-item:hover {
  background: var(--bg-panel);
}
.pam-danger {
  color: var(--warn, #c0392b);
}
.pam-danger:hover {
  background: var(--warn, #c0392b);
  color: white;
}

/* Remove form margin inside menu */
.post-actions-menu form {
  margin: 0;
  padding: 0;
}

/* post-header spacer — pushes ⋯ to far right */
.post-header-spacer {
  flex: 1;
  min-width: 8px;
}

/* ── Bookmark / fire toggle button (added by client JS) ────────── */
.bm-toggle, .bm-btn, .bookmark-btn, .bookmark-toggle,
.post-bookmark-btn, .op-bookmark-btn, .thread-bookmark-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9333rem;
  line-height: 1;
  padding: 2px 6px;
  color: var(--text-dim);
  transition: background 100ms, border-color 100ms, color 100ms;
  vertical-align: middle;
}
.bm-toggle:hover, .bm-btn:hover, .bookmark-btn:hover,
.bookmark-toggle:hover, .post-bookmark-btn:hover,
.op-bookmark-btn:hover, .thread-bookmark-btn:hover {
  background: var(--bg-panel);
  border-color: var(--warn);
  color: var(--warn);
}
.bm-toggle.active, .bm-btn.active, .bookmark-btn.active,
.bookmark-toggle.active, .post-bookmark-btn.active,
.op-bookmark-btn.active, .thread-bookmark-btn.active {
  background: none;
  border-color: var(--warn);
  color: var(--warn);
}

/* Fallback: cualquier button dentro de .post-header que no tenga clase
   conocida (evita que hereden el estilo de botón del browser en blanco) */
.post-header button:not([class]),
.post-header > button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9333rem;
  line-height: 1;
  padding: 2px 6px;
  color: var(--text-dim);
}
.post-header button:not([class]):hover,
.post-header > button:hover {
  background: var(--bg-panel);
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════
   Fase 1 — Quote previews + Adaptive backlinks
   ════════════════════════════════════════════════════════════ */

/* ── Quote block (citas que hace este post) ──────────────────── */
.quote-block {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.quote-block-row   { flex-direction: row; }
.quote-block-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.quote-block-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }

/* ── Quote card ──────────────────────────────────────────────── */
.quote-card {
  display: block;
  padding: 5px 8px;
  border-left: 2px solid var(--accent);
  background: var(--bg-panel);
  border-radius: 2px;
  text-decoration: none;
  color: var(--text);
  transition: background 100ms, border-color 100ms;
  overflow: hidden;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.quote-block-row .quote-card { flex: 0 1 auto; min-width: 160px; max-width: 320px; }
.quote-card:hover { background: var(--bg-hover, var(--bg-panel)); border-color: var(--link-hover); }
.quote-card-compact { padding: 3px 6px; }
.quote-card-missing { border-color: var(--text-dim); opacity: 0.6; }

.qc-id {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 2px;
}
.qc-author {
  font-size: 0.7333rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc-num {
  font-family: var(--mono);
  font-size: 0.6667rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.qc-snippet {
  font-size: 0.7333rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.quote-block-grid5 .qc-snippet { font-size: 0.6667rem; }

/* ── Collapse toggle ─────────────────────────────────────────── */
.quote-block-toggle {
  grid-column: 1 / -1;
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
  color: var(--text-dim);
  font-size: 0.7333rem;
  cursor: pointer;
  padding: 3px 8px;
  text-align: center;
  width: 100%;
  margin-top: 2px;
}
.quote-block-toggle:hover { color: var(--text); border-color: var(--accent); }
.quote-block-hidden { display: contents; }

/* ── Backlinks (te citan a ti) ───────────────────────────────── */
.backlinks {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
.backlinks-row   { flex-direction: row; }
.backlinks-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.backlinks-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }

.backlinks-label {
  font-size: 0.7333rem;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
  align-self: center;
  margin-right: 4px;
  flex-shrink: 0;
  grid-column: 1 / -1; /* spans all columns in grid layouts */
}

/* In grid layouts, label takes full width */
.backlinks-grid3 .backlinks-label,
.backlinks-grid5 .backlinks-label { grid-column: 1 / -1; margin-bottom: 2px; }

/* Backlink cards are slightly more muted than quote cards */
.backlinks .quote-card {
  border-left-color: var(--text-dim);
  font-size: 0.7333rem;
}
.backlinks .quote-card:hover { border-left-color: var(--link-hover); }
/* ── postref-inline: >>N dentro del body cuando ya hay quote-card encima ── */
/* Reemplaza el <a class="postref"> por un span discreto que no compite
   visualmente con las cards. Clickeable pero sin parecer un link. */
.postref-inline {
  font-family: var(--mono);
  font-size: 0.7333rem;
  color: var(--text-dim);
  opacity: 0.55;
  cursor: pointer;
  border-bottom: 1px dotted var(--border);
  user-select: none;
}
.postref-inline:hover {
  opacity: 1;
  color: var(--link);
  border-bottom-color: var(--link);
}

/* ════════════════════════════════════════════════════════════
   Fase 2 — Reply widget flotante libre + typing indicators
   ════════════════════════════════════════════════════════════ */

/* ── Float-free: OCULTAR TODO el chrome del sistema de bordes ── */
/* El rw-tab (lengüeta), rw-resize (barra de resize de borde),
   rw-toolbar (flechas de dock + porcentajes) desaparecen siempre
   que el widget tenga la clase float-free. */
.reply-widget.float-free .rw-tab,
.reply-widget.float-free .rw-resize,
.reply-widget.float-free .rw-toolbar { display: none !important; }

/* ── Ventana flotante libre ──────────────────────────────────── */
.reply-widget.float-free {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 620;
  transform: none !important;
  transition: none !important;
  min-width: 320px; min-height: 300px;
  max-width: 92vw;  max-height: 92vh;
  border: 2px solid var(--accent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  /* posición y tamaño via JS/style inline */
}
.reply-widget.float-free:not(.open) { display: none !important; }
.reply-widget.float-free.open       { display: flex !important; }

/* El rw-body ocupa todo el espacio restante, scrollable */
.reply-widget.float-free .rw-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border: none !important;
  min-height: 0;
}
.reply-widget.float-free .rw-form-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 12px;
}
.reply-widget.float-free .rich-editor-wrapper { width: 100%; }
.reply-widget.float-free .rich-editor         { min-height: 120px; }

/* ── Titlebar arrastrable ────────────────────────────────────── */
.rw-float-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  height: 32px;
  background: var(--accent);
  color: white;
  cursor: move;
  flex-shrink: 0;
  user-select: none;
  border-radius: 4px 4px 0 0;
}
.rw-float-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rw-float-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-float-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  width: 22px; height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.1s;
  font-family: var(--mono);
}
.rw-float-btn:hover { background: rgba(255,255,255,0.35); }

/* ── Handles de resize (8 puntos) ────────────────────────────── */
.rw-resize-handle {
  position: absolute;
  z-index: 10;
  background: transparent;
}
.rw-resize-handle.n  { top:0;    left:8px;   right:8px;  height:5px; cursor:n-resize;  }
.rw-resize-handle.s  { bottom:0; left:8px;   right:8px;  height:5px; cursor:s-resize;  }
.rw-resize-handle.e  { right:0;  top:8px; bottom:8px;    width:5px;  cursor:e-resize;  }
.rw-resize-handle.w  { left:0;   top:8px; bottom:8px;    width:5px;  cursor:w-resize;  }
.rw-resize-handle.nw { top:0;  left:0;   width:12px; height:12px; cursor:nw-resize; }
.rw-resize-handle.ne { top:0;  right:0;  width:12px; height:12px; cursor:ne-resize; }
.rw-resize-handle.sw { bottom:0; left:0; width:12px; height:12px; cursor:sw-resize; }
.rw-resize-handle.se { bottom:0; right:0;width:12px; height:12px; cursor:se-resize; }

/* ── Modo in-post ────────────────────────────────────────────── */
.reply-widget.rw-inpost-mode {
  position: relative !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  border: 2px solid var(--accent);
  border-radius: 4px;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
}
.reply-widget.rw-inpost-mode:not(.open) { display: none !important; }
.reply-widget.rw-inpost-mode.open       { display: flex !important; }

.reply-widget.rw-inpost-mode .rw-tab,
.reply-widget.rw-inpost-mode .rw-resize,
.reply-widget.rw-inpost-mode .rw-toolbar { display: none !important; }

.reply-widget.rw-inpost-mode .rw-resize-handle { display: none !important; }

.reply-widget.rw-inpost-mode .rw-body {
  border: none !important;
  flex: none;
  height: auto;
  overflow: visible;
}
.reply-widget.rw-inpost-mode .rw-form-scroll {
  flex: none;
  height: auto;
  overflow: visible;
  padding: 8px 12px;
}
.reply-widget.rw-inpost-mode .rich-editor {
  min-height: 80px;
  height: auto !important;
}
.reply-widget.rw-inpost-mode .rw-float-titlebar { cursor: default; }

/* ── Ghost post (preview censurado propio) ───────────────────── */
.rw-ghost-post {
  pointer-events: none;
  opacity: 0.65;
  border-left: 3px solid var(--accent) !important;
  animation: none !important; /* sin fade-in */
}
.rw-ghost-post .rw-ghost-name {
  color: var(--accent) !important;
  font-style: normal !important;
}

/* ── Typing indicators (posts de otros) ──────────────────────── */
.typing-indicator {
  opacity: 0.75;
  pointer-events: none;
  animation: typing-fadein 0.3s ease;
}
@keyframes typing-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.75; transform: translateY(0); }
}
.typing-name {
  color: var(--text-dim) !important;
  font-style: italic;
}
.typing-dots {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
}
.typing-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-dim);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%,80%,100% { transform:scale(0.7); opacity:0.4; }
  40%          { transform:scale(1.1); opacity:1; }
}

/* ── Líneas censuradas (shimmer) ─────────────────────────────── */
.typing-lines {
  display: flex; flex-direction: column;
  gap: 7px; padding: 4px 0;
}
.typing-line {
  height: 11px;
  border-radius: 3px;
  background: var(--border);
  position: relative; overflow: hidden;
}
.typing-line::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: typing-shimmer 1.6s ease-in-out infinite;
}
@keyframes typing-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Placeholder imagen en typing/ghost ──────────────────────── */
.typing-img-placeholder {
  float: left;
  width: 80px; height: 80px;
  margin: 2px 14px 6px 0;
  border-radius: 3px;
  background: var(--border);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.typing-img-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: typing-shimmer 1.6s ease-in-out infinite;
}

/* ── Botón toggle de modo ────────────────────────────────────── */
.rw-mode-btn { font-size: 0.7333rem; }


/* ── Modo in-post ──────────────────────────────────────────────
   El widget se inserta en el feed sin sombra ni borde azul fuerte. */
.reply-widget.rw-inpost-mode {
  position: relative !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0;
  margin: 6px 0;
  background: var(--bg-alt, var(--bg));
  display: flex;
  flex-direction: column;
}
.reply-widget.rw-inpost-mode:not(.open) { display: none !important; }
.reply-widget.rw-inpost-mode.open       { display: flex !important; }
.reply-widget.rw-inpost-mode .rw-tab,
.reply-widget.rw-inpost-mode .rw-resize,
.reply-widget.rw-inpost-mode .rw-toolbar { display: none !important; }
.reply-widget.rw-inpost-mode .rw-resize-handle { display: none !important; }
.reply-widget.rw-inpost-mode .rw-body {
  border: none !important;
  background: transparent !important;
  flex: none;
  height: auto;
  overflow: visible;
}
.reply-widget.rw-inpost-mode .rw-form-scroll {
  flex: none;
  height: auto;
  overflow: visible;
  padding: 6px 12px 8px;
}
.reply-widget.rw-inpost-mode .rich-editor { min-height: 80px; height: auto !important; }
/* Titlebar discreta en in-post */
.reply-widget.rw-inpost-mode .rw-float-titlebar {
  background: transparent !important;
  color: var(--text-dim) !important;
  height: 22px; padding: 0 6px;
  border-radius: 0;
  border-bottom: 1px dashed var(--border);
  cursor: default !important;
}
.reply-widget.rw-inpost-mode .rw-float-title {
  color: var(--text-dim) !important; font-size: 0.7333rem; opacity: 0.7;
}
.reply-widget.rw-inpost-mode .rw-float-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  width: 18px; height: 18px; font-size: 0.6667rem;
}
.reply-widget.rw-inpost-mode .rw-float-btn:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* ── Live bar + stats (misma fila) ───────────────────────────── */
#live-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.live-bar-left  { display: flex; align-items: center; gap: 8px; }
.live-bar-stats {
  font-family: var(--mono);
  font-size: 0.7333rem;
  color: var(--text-dim);
  display: flex;
  gap: 14px;
}
.live-bar-stats strong { color: var(--text); font-weight: 700; }

/* ── ID Highlight ─────────────────────────────────────────────── */
article.post.id-hl {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-post));
  position: relative; z-index: 1;
}
article.post.id-dim { opacity: 0.35; transition: opacity 0.15s; }
.user-id[data-uid] { cursor: pointer; }
.user-id[data-uid]:hover { filter: brightness(1.15); }
.id-post-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px;
  background: rgba(0,0,0,0.35); color: white;
  font-size: 0.6667rem; font-family: var(--mono); font-weight: 700;
  border-radius: 8px; line-height: 1; vertical-align: middle;
}

/* ── Cross-thread/board quote cards ──────────────────────────── */
.quote-card-fetched .qc-cross {
  font-family: var(--mono);
  font-size: 0.6667rem;
  color: var(--text-dim);
  margin-bottom: 2px;
  opacity: 0.7;
}
.quote-card.quote-card-loading::after {
  content: '…';
  display: block;
  color: var(--text-dim);
  font-size: 0.7333rem;
  padding: 2px 0;
}

/* ── Hover preview header (cuando se muestra info completa al pasar el mouse) ── */
.hover-preview .hover-board {
  color: var(--accent) !important;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   PARTICIPANTS RAIL — Fase 3
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ───────────────────────────────────────────────────── */
.pr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pr-header-title {
  font-size: 0.7333rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--sans);
}
.pr-count {
  font-size: 0.7333rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  font-family: var(--mono);
}

/* ── Groups ───────────────────────────────────────────────────── */
.pr-group {
  padding: 6px 0 2px;
}
.pr-group + .pr-group {
  border-top: 1px solid var(--border);
}
.pr-group-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 12px 4px;
  font-size: 0.6667rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--sans);
  cursor: default;
  list-style: none;
}
/* Remove default details marker */
.pr-group-offline > summary { list-style: none; cursor: pointer; }
.pr-group-offline > summary::-webkit-details-marker { display: none; }
.pr-group-offline > summary::before { content: '▸ '; font-size: 0.6rem; opacity: 0.6; }
details.pr-group-offline[open] > summary::before { content: '▾ '; }

.pr-group-count {
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 0.6667rem;
  font-weight: 600;
}

/* ── List + items ─────────────────────────────────────────────── */
.pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pr-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-family: var(--sans);
  color: var(--text);
  transition: background 0.12s;
}
.pr-item:hover {
  background: var(--bg-hover);
}
.pr-item-offline {
  opacity: 0.55;
}
.pr-item-away {
  opacity: 0.75;
}

/* Status dot */
.pr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Gem badge (small circle matching the post gem) */
.pr-gem {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Name (used for reader rows + as wrapper class) */
.pr-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}
.pr-name-reader {
  color: var(--text-dim);
  font-style: italic;
}

/* Posters: gem-name + uid stacked vertically in the same flex slot */
.pr-identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;          /* allow ellipsis on children */
  line-height: 1.15;
}
.pr-gem-name {
  font-size: 0.7333rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-uid {
  font-size: 0.6667rem;
  font-family: var(--mono);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "That's you" marker — small dot before the post count */
.pr-item-self {
  background: rgba(255, 80, 80, 0.06);
}
.pr-item-self .pr-gem-name::after {
  content: ' (you)';
  font-weight: 400;
  font-size: 0.6667rem;
  color: var(--text-dim);
  font-style: italic;
}
.pr-self-marker {
  display: none; /* kept in HTML for screen readers; visual marker is via ::after */
}

/* Post count badge */
.pr-post-count {
  font-size: 0.6667rem;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text-dim);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Empty state */
.pr-empty {
  padding: 18px 12px;
}
.pr-empty-text {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-family: var(--sans);
  margin: 0;
  text-align: center;
  opacity: 0.75;
}

/* ── Presence status dot colors ───────────────────────────────── */
.pr-item-active  .pr-dot { background: #4caf50; }
.pr-item-idle    .pr-dot { background: #ffb300; }
.pr-item-away    .pr-dot { background: #9e9e9e; }
.pr-item-offline .pr-dot { background: #555;     opacity: 0.6; }

/* ── User panel: Presence tab ─────────────────────────────────── */
.presence-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.presence-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  padding: 5px 11px;
}
.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.presence-dot-auto       { background: linear-gradient(135deg, #4caf50 50%, #9e9e9e 50%); }
.presence-dot-active     { background: #4caf50; }
.presence-dot-idle       { background: #ffb300; }
.presence-dot-away       { background: #9e9e9e; }
.presence-dot-invisible  { background: transparent; border-color: #888; }


/* ════════════════════════════════════════════════════════════
   MOBILE FIXES — @media (max-width: 900px)
   1. Images/videos: constrained to viewport width
   2. Post padding: proper margins
   3. Reply widget bottom tab: hidden in float-free mode
   4. Text wrapping: no overflow
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 1. Images & videos: max 100% of post width ── */
  /* Thumb images in file strip */
  .files.single .thumb img,
  .files.multi  .thumb img,
  .thumb img {
    max-width: min(280px, 80vw) !important;
    max-height: 60vw !important;
    width: auto !important;
    height: auto !important;
  }

  /* Single file: don't float, go full-width block */
  .files.single {
    float: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
  }
  .files.single .thumb img {
    max-width: 100% !important;
    max-height: 70vw !important;
  }

  /* Multi files: wrap and constrain */
  .files.multi {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .files.multi .thumb img {
    max-width: min(180px, 42vw) !important;
    max-height: 42vw !important;
  }

  /* Video thumbs */
  .video-thumb video,
  .video-thumb {
    max-width: 100% !important;
    max-height: 55vw !important;
    width: 100% !important;
  }

  /* Inline files (editor images) */
  .inline-file img,
  .inline-file video {
    max-width: min(260px, 80vw) !important;
    max-height: 60vw !important;
    height: auto !important;
  }
  /* Inline floats: reduce margin so text has room */
  .inline-file.float-left,
  .inline-file.float-right {
    max-width: 45vw !important;
  }
  .inline-file.float-left img,
  .inline-file.float-right img,
  .inline-file.float-left video,
  .inline-file.float-right video {
    max-width: 100% !important;
    max-height: 50vw !important;
  }

  /* ── 2. Post layout: no left margin on replies, proper padding ── */
  .post {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    overflow-x: hidden !important;
  }
  .post.reply {
    margin-left: 0 !important;  /* no indent on mobile — not enough room */
  }
  .post-content {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow-x: hidden !important;
  }
  .post-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Post body: no horizontal scroll trap */
  .post-body {
    overflow-x: hidden !important;
  }

  /* ── 3. Reply widget: hide the edge-bottom tab strip in mobile
     The float-free mode (app-reply-float.js) handles the widget;
     the old edge-bottom tab peeking at the bottom causes the
     mysterious red bar. Force it fully hidden until opened. ── */
  .reply-widget:not(.open):not(.rw-inpost-mode) {
    transform: translateY(110%) !important;  /* fully off-screen */
  }
  /* The "+ Reply to thread" button is the trigger instead */
  .reply-widget.edge-bottom:not(.open),
  .reply-widget.edge-top:not(.open),
  .reply-widget.edge-left:not(.open),
  .reply-widget.edge-right:not(.open) {
    transform: translateY(110%) !important;
  }
  /* Float-free: centered modal */
  .reply-widget.float-free {
    position: fixed !important;
    top: calc(var(--shell-header-h, 44px) + 8px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(420px, 94vw) !important;
    transform: translateX(-50%) !important;
    max-height: calc(90dvh - var(--shell-header-h, 44px)) !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    display: none;
  }
  .reply-widget.float-free.open {
    display: flex !important;
    transform: translateX(-50%) !important;
  }

  /* ── 4. Main inner: enough bottom padding for the open-reply-btn ── */
  .main-col > .main-inner {
    padding-bottom: 80px !important;
  }

  /* ── 5. Breadcrumbs and headers: no overflow ── */
  .breadcrumbs {
    overflow-x: hidden !important;
    white-space: normal !important;
    font-size: 0.8rem !important;
  }

  /* ── 6. Thread nav arrows: above the reply button ── */
  .thread-nav-arrows {
    bottom: 70px !important;
    right: 12px !important;
    left: auto !important;
  }

  /* ── 7. Open reply button: bottom sticky ── */
  #open-reply-btn {
    position: sticky !important;
    bottom: 12px !important;
    z-index: 50 !important;
    width: auto !important;
    display: inline-block !important;
  }
}

/* Extra small screens */
@media (max-width: 420px) {
  .files.multi .thumb img {
    max-width: 38vw !important;
    max-height: 38vw !important;
  }
  .post {
    padding: 6px 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Reply redesign — extras toggle bar (Roll / Poll)
   Dice & Poll panels start hidden; revealed via these toggles.
   Also: bigger editor area inside the reply widget for comfort.
   ════════════════════════════════════════════════════════════ */

/* Larger editor area in the reply widget so writing feels roomy */
#reply-widget .rich-editor {
  min-height: 260px;
}

/* The toggle bar sits right under the editor wrapper */
.reply-extras-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
  padding: 0;
}

/* Pill-style toggle button, matches the dashed "+ Add poll" look */
.reply-extra-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  min-width: 88px;
  background: transparent;
  color: var(--fg-dim, #888);
  border: 1px dashed var(--border-strong, #504a30);
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
  -webkit-user-select: none;
  user-select: none;
}
.reply-extra-toggle:hover {
  border-color: var(--accent, #b89848);
  color: var(--accent, #b89848);
}
.reply-extra-toggle.active {
  border-style: solid;
  border-color: var(--accent, #b89848);
  color: var(--accent, #b89848);
  background: rgba(184, 152, 72, 0.08);
}

/* When the dice panel is shown via toggle, drop its own internal top margin
   so it sits flush under the toggle bar */
#reply-widget .dice-panel,
#reply-widget .polls-container {
  margin-top: 6px;
}

/* The polls container has an internal <hr class="dice-separator"> meant to
   divide it from the dice block above. With the new toggle UI it's redundant. */
#reply-widget .polls-container > .dice-separator {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   SOFT FRAMES — sin contenedor de hilo + bordes redondeados
   El <article class="thread-preview"> sigue agrupando OP+replies
   en el HTML, pero pierde su marco visual. Los posts ahora
   flotan, separados solo por margen, estilo Discord.
   ════════════════════════════════════════════════════════════ */

/* ── Thread-preview ya no es un cuadro ── */
.thread-preview {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 36px !important;
}

/* Las flags (📌🔒♻⬇) flotan justo encima del primer post */
.thread-flags {
  margin-bottom: 6px;
  padding-left: 4px;
}

/* ── Bordes suaves (Discord-like, 8px) ── */
.post { border-radius: 8px !important; }
.post.op {
  border-left: 1px solid var(--border-strong) !important;
}
.post.reply {
  border-left: 1px solid var(--border) !important;
}

/* ── Inputs, botones, badges: corners suaves ── */
.open-thread-btn,
.post-form button[type="submit"],
.nav-arrow,
.up-btn { border-radius: 8px !important; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select { border-radius: 6px !important; }

.page { border-radius: 6px; }
.dice { border-radius: 4px; }
.thread-preview .open-thread-btn { border-radius: 8px !important; }

/* ─── "Translate now" checkbox inside .editor-actions (edit form) ───
   Sits to the left of [Save] [Cancel]. The label gets a hint title;
   when disabled (quota = 0) it dims but stays visible so the user
   understands their state. */
.editor-translate-now-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  margin-right: auto;          /* pushes Save/Cancel to the right */
  user-select: none;
}
.editor-translate-now-label:hover { color: var(--text); }
.editor-translate-now {
  cursor: pointer;
  accent-color: var(--accent);
}
.editor-translate-now:disabled,
.editor-translate-now:disabled + .editor-translate-now-text {
  opacity: 0.5;
  cursor: not-allowed;
}