/* Forum pages - aligned with existing site style */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;overscroll-behavior:contain}
body{padding-left:var(--safe-left);padding-right:var(--safe-right)}

.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top: calc(12px + var(--safe-top));
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}
.navbar a{
  color:#7fff7f;
  text-decoration:none;
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
}
.navbar a:active{opacity:.85}
.navbar .spacer{margin-left:auto}

.container{padding:25px;max-width:1100px;margin:auto;padding-bottom: calc(25px + var(--safe-bottom));}

h1{margin:0 0 12px;color:#c7d5e0}
h2{margin:14px 0 10px}

.muted{opacity:.85}

.btn,button{
  background:#2a475e;border:1px solid #22324a;color:#c7d5e0;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px
}
.btn:hover,button:hover{filter:brightness(1.05)}
.btn:active,button:active{opacity:.85}
.btn.ghost{background:transparent}

.alert{
  background:#1b2838;border:1px solid #3b6ea8;border-radius:12px;
  padding:12px;margin:12px 0;
}

.forum-header{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.forum-actions{display:flex;gap:10px;flex-wrap:wrap}

.forum-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;opacity:.9}
.forum-breadcrumb a{color:#7fff7f;text-decoration:none}

/* Category cards */
.forum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.forum-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.forum-grid{grid-template-columns:1fr}}

.card{
  background:#1b2838;border:1px solid #22324a;border-radius:14px;
  padding:14px;text-decoration:none;color:#c7d5e0;
  display:flex;flex-direction:column;gap:8px;
}
.card:hover{border-color:#3b6ea8;box-shadow:0 0 0 2px rgba(59,110,168,.2)}
.card-title{font-weight:bold;color:#7fff7f}
.card-desc{opacity:.9}
.card-meta{font-size:12px;opacity:.9;display:flex;gap:8px;align-items:center}

/* Thread list */
.thread-list{display:flex;flex-direction:column;gap:10px}
.thread{
  background:#1b2838;border:1px solid #22324a;border-radius:14px;
  padding:12px 14px;text-decoration:none;color:#c7d5e0;
}
.thread:hover{border-color:#3b6ea8;box-shadow:0 0 0 2px rgba(59,110,168,.2)}
.thread-title{font-weight:bold}
.thread-meta{font-size:12px;opacity:.9;margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;border-radius:999px;border:1px solid #22324a;
  background:#0f1a2b;font-size:12px;margin-right:8px
}
.pill.lock{color:#ff7f7f}
.pill.new{color:#7fff7f;border-color:#2a4a2a}

.thread-admin{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.post-actions{display:flex;gap:8px;align-items:center}
.btn.small{padding:6px 10px;min-height:auto;font-size:12px;border-radius:10px}

.empty{background:#1b2838;border:1px dashed #22324a;border-radius:14px;padding:18px;opacity:.85}

/* Thread */
.thread-head{margin-bottom:14px}
.thread-sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.posts{display:flex;flex-direction:column;gap:12px}
.post{background:#1b2838;border:1px solid #22324a;border-radius:14px;padding:14px}
.post-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.post-body{line-height:1.2}
/* Quill output: prevent the "double spaced" look caused by browser default <p> margins */
.post-body p{margin:0 !important;padding:0 !important;line-height:1.2}
/* Quill uses <p> for each new line; keep it tight like the editor */
.post-body p + p{margin-top:0 !important}
.post-body br{line-height:1.2}
.post-body.has-post-bg{
  background: var(--post-bg, #1b2838);
  border-radius: 12px;
  padding: 12px;
}
.post-body img{max-width:100%;border-radius:12px;border:1px solid #22324a}
.post-body iframe{max-width:100%;border-radius:12px;border:1px solid #22324a}
.post-body a{color:#7fff7f}

/* SWF signature transparency (best-effort; true transparency depends on SWF file)
   + cropping: if the SWF stage is larger than the actual banner, we can at least
     hide the excess area by cropping to the configured w/h. */
.sig-swf-wrap{display:inline-block;overflow:hidden;line-height:0;background:transparent !important;position:relative}
.sig-swf-wrap ruffle-player,
.sig-swf-wrap canvas{background:transparent !important}

/* Crop/center: a lot of signatures are authored as a bigger SWF stage (e.g. 500x100)
   but are meant to be shown as 468x60.
   We render the player at its native size and simply center-crop it inside the wrapper. */
.sig-swf-wrap ruffle-player{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.sig-swf-ruffle{display:inline-block;line-height:0;background:transparent !important}
.sig-swf-ruffle ruffle-player,
.sig-swf-ruffle canvas{background:transparent !important}

/* Quotes (Quill blockquote) */
.post-body blockquote{
  margin:10px 0;
  padding:10px 12px;
  border-left:3px solid #7fff7f;
  background:rgba(127, 255, 127, .06);
  border-radius:12px;
}
.post-body blockquote p{margin:0 0 6px}
.post-body blockquote p:last-child{margin-bottom:0}

/* --- Code blocks (Quill code-block) --- */
.post-body pre.ql-syntax{
  background: #0b1320;          /* temnejše kot post */
  color: #e9eef7;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #22324a;
  overflow-x: auto;
  font-family: Consolas, monospace;
  font-size: 14px;
  margin: 10px 0;
}

/* Inline `code` */
.post-body code{
  background: rgba(255,255,255,.06);
  color: #7fff7f;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: Consolas, monospace;
  font-size: 13px;
}

/* Form */
.form{display:flex;flex-direction:column;gap:10px}
label{font-weight:bold;opacity:.95}
input[type="text"],select{
  padding:10px 12px;border-radius:10px;border:1px solid #22324a;
  background:#0f1a2b;color:#c7d5e0;min-height:44px
}
.editor{background:#0f1a2b;border:1px solid #22324a;border-radius:12px;overflow:hidden}

/* Quill tweaks */
.ql-toolbar.ql-snow{background:#ffffff;border:1px solid #d1d5db;border-radius:12px}
.ql-editor{min-height:180px;color:#c7d5e0}

.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pager a{padding:8px 10px;border-radius:10px;border:1px solid #22324a;background:#0f1a2b;color:#c7d5e0;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.pager a:hover{background:#1b2838}
.pager .cur{padding:8px 10px;border-radius:10px;border:1px solid #22324a;background:#101b2d;color:#c7d5e0;min-height:40px;display:inline-flex;align-items:center}
.pager .dim{padding:8px 10px;border-radius:10px;border:1px dashed #22324a;color:#6b7a88;min-height:40px;display:inline-flex;align-items:center}
.page{padding:8px 10px;border-radius:10px;border:1px solid #22324a;background:#0f1a2b;color:#c7d5e0;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.page.active{background:#1b2838;border-color:#3b6ea8}

.reply{margin-top:18px}


/* ------------------------------
   Quill (toolbar white, editor dark)
   - toolbar uses Quill's original Snow icons/styles
   - editor matches site dark background
-------------------------------- */
.forum-editor .ql-toolbar.ql-snow{
  background:#ffffff;
  border:1px solid #d1d5db;
  border-radius:14px;
}
.forum-editor .ql-container.ql-snow{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(255,255,255,.02);
}
.forum-editor .ql-editor{
  min-height:180px;
  color:#c7d5e0;
  line-height:1.4;
}
.forum-editor .ql-editor p{margin:0 !important;padding:0 !important;line-height:1.4}
.forum-editor .ql-editor p + p{margin-top:0 !important}
.forum-editor .ql-editor.ql-blank::before{ color: rgba(199,213,224,.55); }

/* Keep embeds responsive so they don't blow up the layout (and "hide" the reply editor below) */
.post-body iframe,
.post-body video,
.post-body img{ max-width:100%; }

.post-body iframe,
.post-body .ql-video{
  width:100%;
  aspect-ratio: 16/9;
  height:auto;
  max-height:520px;
  border-radius:12px;
}



/* Post meta: avatar + linked username */
.post-meta-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.post-avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #22324a;
  object-fit: cover;
  flex: 0 0 auto;
}
.post-meta-text{ min-width:0; }
.post-author{ font-weight: 700; line-height: 1.1; }
.post-dates{ font-size: 12px; opacity: .92; margin-top: 2px; }

 .user-link{
  color:#7fff7f;
  text-decoration: none;
  font-weight: 700;
 }
 .user-link:hover{ text-decoration: underline; }
 .user-link.inline{ cursor: pointer; }

/* Post action row: keep Edit/Delete inline */
.post-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.post-actions form{ display:inline; margin:0; }



/* Thread admin buttons (pin/lock) a bit tighter */
.thread-admin .btn.small{
  padding:6px 10px;
  min-height: 34px;
  border-radius: 10px;
}

/* Reactions */
.reactions{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.react-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:22px;
  min-width: 46px;
  padding:0 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:#c7d5e0;
  cursor:pointer;
  font-size:13px;
}
.react-btn:hover{ background: rgba(255,255,255,.06); }
.react-btn.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.react-btn .re{ font-size: 13px; line-height: 1; }
.react-btn .rc{
  opacity:.9;
  font-size:11px;
  min-width: 12px;
  text-align:center;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

/* Emoji picker */
.forum-emoji-pop{
  position: absolute;
  display: none;
  width: 260px;
  background: #0f1a2b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.forum-emoji-grid{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.forum-emoji-btn{
  background: rgba(255,255,255,.02);
  border: 0;
  border-radius: 10px;
  width: 100%;
  height: 32px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.forum-emoji-btn:hover{ background: rgba(255,255,255,.07); }

/* Make Quill tooltip look OK on dark */
.ql-tooltip{
  background:#0f1a2b !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#c7d5e0 !important;
  border-radius: 12px !important;
}
.ql-tooltip input[type=text]{
  background:#0b1320 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#c7d5e0 !important;
  border-radius: 10px !important;
}


/* --- Badges --- */
.user-badges { margin-top: 4px; display:flex; flex-wrap:wrap; gap:6px; }
.user-badges .badge{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(127,255,127,.35);
  color: rgba(127,255,127,.9);
  background: rgba(20,83,45,.35);
}

/* --- Mobile tweaks --- */
@media (max-width: 680px){
  /* --- Code blocks (Quill code-block) MOBILE FIX --- */
  .post-body pre.ql-syntax{
    background: #0b1320 !important;
    color: #e9eef7 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid #22324a !important;
    overflow-x: auto !important;
    font-family: Consolas, monospace !important;
    font-size: 14px !important;
    margin: 10px 0 !important;
  }

  .container{ padding-left: 12px; padding-right: 12px; }
  .thread { padding: 12px; }
  .thread-meta { flex-wrap: wrap; gap: 6px; line-height: 1.3; }
  .post-meta-left{ align-items:flex-start; }
  .post-avatar{ width: 40px; height: 40px; }
  .post-actions{ gap: 6px; flex-wrap: wrap; justify-content:flex-end; }
  .pager{ flex-wrap: wrap; }
  .editor-toolbar{ flex-wrap: wrap; gap: 6px; }
  .forum-header{ flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Mobile: force blog images to stack (image on top, text below) */
  .post-body img.blog-left,
  .post-body img.blog-right,
  .post-body img.blog-center,
  .post-body img.blog-full,
  .forum-editor .ql-editor img.blog-left,
  .forum-editor .ql-editor img.blog-right,
  .forum-editor .ql-editor img.blog-center,
  .forum-editor .ql-editor img.blog-full{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
    clear: both !important;
  }
}


/* Role badges */
.user-badges .badge-admin{ border-color: rgba(255,215,0,.45); background: rgba(255,215,0,.10); color:#ffeaa7; }
.user-badges .badge-mod{ border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.10); color:#bfdbfe; }
.user-badges .badge-admin, .user-badges .badge-mod{ cursor: help; }


/* Signatures + arcade medals */
.post-sig{margin-top:10px;padding-top:10px;border-top:1px solid #22324a;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.post-sig .medals{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;flex:1 1 100%}
.post-sig .medals .m{padding:4px 8px;border-radius:999px;border:1px solid #22324a;background:#0f1a2b;color:#c7d5e0;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.post-sig .sig{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;flex:1 1 100%}
.post-sig .sig-html{font-size:12px;opacity:.9}
.post-sig .sig-img{max-width:100%;height:auto;display:block;margin:0 auto}
.post-sig object.sig-swf, .post-sig embed{max-width:100%;display:block;margin:0 auto}

/* Ruffle signatures: keep transparent background (no black box) */
.post-sig .sig-swf-ruffle{background:transparent !important;}
.post-sig .sig-swf-ruffle ruffle-player,
.post-sig .sig-swf-ruffle canvas{background:transparent !important;}

/* Arcade medals inline next to username */
.post-author{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.medals-inline{display:inline-flex;gap:6px;align-items:center}
.medals-inline .m{padding:2px 6px;border-radius:999px;border:1px solid #22324a;background:#0f1a2b;color:#c7d5e0;font-size:12px;display:inline-flex;gap:6px;align-items:center}



/* --- Quill: keep toolbar clean like original Snow (avoid global button styles) --- */
.forum-editor .ql-toolbar.ql-snow {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
}

/* Quill toolbar icons: consistent color + slightly thinner strokes */
.forum-editor .ql-toolbar.ql-snow,
.forum-editor .ql-toolbar.ql-snow button,
.forum-editor .ql-toolbar.ql-snow .ql-picker-label,
.forum-editor .ql-toolbar.ql-snow .ql-picker-item {
  color: #111;
}

/* normalize SVG icon size (Quill mixes different viewBoxes) */
.forum-editor .ql-toolbar.ql-snow button svg,
.forum-editor .ql-toolbar.ql-snow .ql-picker-label svg {
  width: 18px;
  height: 18px;
  opacity: 1;
}

/* Icons: make all non-color pickers use currentColor so everything is uniform.
   IMPORTANT: don't override the color/background pickers' swatch elements. */
.forum-editor .ql-toolbar.ql-snow button .ql-stroke,
.forum-editor .ql-toolbar.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-background) .ql-picker-label .ql-stroke {
  stroke: currentColor !important;
  stroke-width: 1.4 !important;
}
.forum-editor .ql-toolbar.ql-snow button .ql-fill,
.forum-editor .ql-toolbar.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-background) .ql-picker-label .ql-fill {
  fill: currentColor !important;
}

/* For color/background pickers: enforce black icon parts, but keep the swatch itself intact */
.forum-editor .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label .ql-stroke,
.forum-editor .ql-toolbar.ql-snow .ql-background .ql-picker-label .ql-stroke {
  stroke: #111 !important;
  stroke-width: 1.4 !important;
}
.forum-editor .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label .ql-fill:not(.ql-color-label),
.forum-editor .ql-toolbar.ql-snow .ql-background .ql-picker-label .ql-fill:not(.ql-color-label) {
  fill: #111 !important;
}

/* Make ICON pickers look like the other toolbar buttons (no frames/boxes).
   IMPORTANT: do NOT apply this to font/size dropdowns (they need text). */
.forum-editor .ql-toolbar.ql-snow .ql-picker:not(.ql-font):not(.ql-size):not(.ql-blogSize) .ql-picker-label {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  background: transparent !important;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker:not(.ql-font):not(.ql-size):not(.ql-blogSize) .ql-picker-label:hover,
.forum-editor .ql-toolbar.ql-snow .ql-picker:not(.ql-font):not(.ql-size):not(.ql-blogSize) .ql-picker-label.ql-active {
  background: rgba(0,0,0,.06) !important;
}
/* keep font + size dropdowns readable (no forced 28x28 box) */
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label {
  padding: 0 10px !important;
  height: 28px;
  border: 0 !important;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  box-shadow: none !important;
}

/* blog size dropdown behaves like font/size (text label) */
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-label{
  padding: 0 10px !important;
  height: 28px;
  border: 0 !important;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  box-shadow: none !important;
}

/* Mini width picker label + options text (Quill uses ::before) */
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-label::before{
  content: "↔ " attr(data-label) !important;
  color: #111;
  font-weight: 600;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-item::before{
  content: attr(data-value) !important;
  color: #111;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-item[data-value="auto"]::before{
  content: "Auto" !important;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-label:hover,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-blogSize .ql-picker-label.ql-active{
  background: rgba(0,0,0,.07);
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label:hover,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label:hover,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-font .ql-picker-label.ql-active,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label.ql-active {
  background: rgba(0,0,0,.07);
}

/* make picker arrows same color */
.forum-editor .ql-toolbar.ql-snow .ql-picker-label .ql-stroke {
  stroke: currentColor;
}

/* Don't override Quill's selected-color swatch logic.
   Just ensure the swatch is visible with a subtle border. */
.forum-editor .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label .ql-color-label,
.forum-editor .ql-toolbar.ql-snow .ql-background .ql-picker-label .ql-color-label {
  stroke: rgba(0,0,0,.35);
}

/* If Quill hasn't applied a chosen color yet, show a sensible default swatch
   (prevents the "empty white box" look). Works for both SVG and span swatches. */
.forum-editor .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label .ql-color-label:not([style]),
.forum-editor .ql-toolbar.ql-snow .ql-background .ql-picker-label .ql-color-label:not([style]) {
  background-color: #111;
  fill: #111;
}

/* Normalize toolbar buttons, but DON'T wipe background-color from picker items.
   (Color/background pickers rely on background-color to show the swatches.) */
.forum-editor .ql-toolbar.ql-snow button {
  min-height: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

/* Picker items: keep them compact, but allow their own background-color (swatches). */
.forum-editor .ql-toolbar.ql-snow .ql-picker-item {
  min-height: unset !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

/* default quill button size */
.forum-editor .ql-toolbar.ql-snow button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.forum-editor .ql-toolbar.ql-snow button:hover,
.forum-editor .ql-toolbar.ql-snow button.ql-active {
  background: rgba(0,0,0,.06) !important;
}

/* Picker dropdowns (font/size/align etc.)
   Keep them light so the items are always readable. */
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
  color: #111;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover,
.forum-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item.ql-selected {
  background: rgba(0,0,0,0.06) !important;
  border-radius: 8px;
}

/* Keep color/background items as real swatches (don't paint them with our generic hover bg).
   Instead add a subtle outline so they don't look like empty squares. */
.forum-editor .ql-toolbar.ql-snow .ql-color-picker.ql-expanded .ql-picker-options .ql-picker-item:hover,
.forum-editor .ql-toolbar.ql-snow .ql-background.ql-expanded .ql-picker-options .ql-picker-item:hover,
.forum-editor .ql-toolbar.ql-snow .ql-color-picker.ql-expanded .ql-picker-options .ql-picker-item.ql-selected,
.forum-editor .ql-toolbar.ql-snow .ql-background.ql-expanded .ql-picker-options .ql-picker-item.ql-selected {
  background: transparent !important;
}
.forum-editor .ql-toolbar.ql-snow .ql-color-picker.ql-expanded .ql-picker-options .ql-picker-item:hover,
.forum-editor .ql-toolbar.ql-snow .ql-background.ql-expanded .ql-picker-options .ql-picker-item:hover {
  outline: 2px solid rgba(233,238,247,0.35);
  outline-offset: 2px;
}

/* Align icons inside dropdowns: same look as toolbar icons */
.forum-editor .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item svg {
  width: 18px;
  height: 18px;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item .ql-stroke {
  stroke: #111 !important;
  stroke-width: 1.4 !important;
  opacity: 1 !important;
}
.forum-editor .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item .ql-fill {
  fill: #111 !important;
  opacity: 1 !important;
}

/* Dark editor area (match site) */
.forum-editor .ql-container.ql-snow {
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Live preview of per-post background chosen via the PostBG (bucket) tool.
   This is ONLY a preview inside the editor; the saved token is applied on the post view page. */
.forum-editor.has-postbg-preview .ql-container.ql-snow {
  background: var(--postbg-preview) !important;
}
.forum-editor.has-postbg-preview .ql-editor {
  /* keep readability on bright backgrounds */
  color: #0b1220;
}

.forum-editor .ql-editor {
  min-height: 220px;
  color: #e9eef7;
  line-height:1.4;
}
.forum-editor .ql-editor p{margin:0 !important;padding:0 !important;line-height:1.4}
.forum-editor .ql-editor p + p{margin-top:0 !important}

/* Blog image layout preview INSIDE the editor (so the Blog button feels like it works). */
.forum-editor .ql-editor img.blog-left{
  float:left;
  margin:0 14px 10px 0;
  max-width:400px;
}
.forum-editor .ql-editor img.blog-right{
  float:right;
  margin:0 0 10px 14px;
  max-width:400px;
}
.forum-editor .ql-editor img.blog-center{
  display:block;
  margin:10px auto;
  max-width:100%;
}
.forum-editor .ql-editor img.blog-full{
  display:block;
  width:100%;
  max-width:100%;
  margin:10px 0;
}
.forum-editor .ql-editor:after{
  content:"";
  display:block;
  clear:both;
}

.forum-editor .ql-editor.ql-blank::before {
  color: rgba(233,238,247,0.55);
}

/* Ensure the editor div has space even if JS fails */
.forum-editor #editor.editor {
  min-height: 220px;
}

/* Emoji picker */
.emoji-picker{
  position: fixed;
  z-index: 9999;
  display: none;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.emoji-picker .emoji-btn{
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.emoji-picker .emoji-btn:hover{
  background: rgba(0,0,0,.08);
}


/* --- Lightbox for large images in posts --- */
.post-body img.lb-thumb{
  max-width: 400px;
  max-height: 400px;
  cursor: zoom-in;
}

/* Respect explicit width/height set by the editor (BlogSize). Only fall back to auto
   sizing when the image has no explicit width/height attributes. */
.post-body img.lb-thumb:not([width]){ width: auto; }
.post-body img.lb-thumb:not([height]){ height: auto; }

.forum-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100000;
}
.forum-lightbox.open{ display:flex !important; }
.forum-lightbox .lb-img{
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  cursor: zoom-out;
}
.forum-lightbox .lb-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.forum-lightbox .lb-close:hover{ background: rgba(0,0,0,.55); }

/* --- Blog image layout (toggle via toolbar "blog") --- */
.post-body img.blog-left{
  float: left;
  max-width: 100%;
  height: auto;
  margin: 0 14px 10px 0;
}
.post-body img.blog-right{
  float: right;
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 14px;
}
.post-body img.blog-left:not([width]),
.post-body img.blog-right:not([width]){
  /* default blog thumbnail size if user didn't pick one */
  max-width: 400px;
}
.post-body img.blog-center{
  display: block;
  margin: 10px auto;
  max-width: 100%;
  height: auto;
}
.post-body img.blog-full{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
.post-body::after{ content:""; display:block; clear:both; }

/* --- quill-mention dropdown --- */
.ql-mention-list-container{
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.ql-mention-list-container .ql-mention-list{
  margin: 0;
  padding: 6px;
}
.ql-mention-list-container .ql-mention-list-item{
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.ql-mention-list-container .ql-mention-list-item.selected,
.ql-mention-list-container .ql-mention-list-item:hover{
  background: rgba(0,0,0,.08);
}


/* === Compact reactions (override) === */
.react-btn{
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
.react-btn .emoji, .react-btn .reaction-emoji{
  font-size: 16px !important;
  line-height: 1 !important;
}
.react-btn .count, .react-btn .reaction-count{
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Mobile UI: blog images remain stacked (text under image) */