/* Forum-specific CSS — overrides and extends /css/styles.css on forum pages only. */

/* Form-width override — global form{width:300px} breaks vote stacks + comment forms. */
.vote-stack         { width: auto; }
.comment-form       { width: auto; }
.comment-reply-form { width: auto; }
.comment-edit-form  { width: auto; }

/* Read-only vote stacks (logged out / no write permission): visibly inert. */
.vote-stack-readonly { opacity: 0.55; }

/* @mention of a real user inside rendered post/comment text. */
.forum-mention { color: var(--color-primary); font-weight: 600; }

/* Pinned-post badge (post page + category cards) */
.cat-badge-pinned {
    background: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

/* "NEW" unread-thread badge (category + index listings) */
.cat-badge-new {
    background: var(--color-primary);
    color: var(--text-inverse);
    border: 1px solid var(--color-primary);
    font-weight: 600;
}
/* The "Comment" toggle sits in .comments-header (a flex column, so children
 * stretch full-width by default). Keep it a normal content-width button. */
.comments-header > [data-reply-toggle] { width: auto; align-self: flex-start; }
.comments-sort      { width: auto; margin: 0 0 0 auto; padding: 0; background: transparent; border: 0; }

/* Post-card visual hierarchy (category + index search): title > author > time > stats. */
.post              { margin-bottom: 12px; padding: 12px; }
.post-card-title   { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.post-card-meta    { margin: 0; font-size: 13px; color: var(--text-secondary); }
.post-card-author  { font-weight: 600; font-size: 14px; color: var(--text-primary); text-decoration: none; }
.post-card-author:hover { text-decoration: underline; }
.post-card-time    { font-size: 12px; color: var(--text-muted); }
.post-card-stats   { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* Single post: vote column | meta; title below. post-content is the absolute-position context. */
.post-content { padding: 16px; position: relative; }

/* Vote column + meta sit close together (minimal gap). */
.post-header { display: flex; gap: 8px; align-items: flex-start; }
.post-header.has-actions { padding-right: 132px; } /* reserve > action-corner width so meta never slides under it */
.post-aside  { align-items: center; gap: 4px; }

.post-meta-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
.post-meta-top {
    margin: 0; font-size: 13px; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.post-cat-link { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.post-cat-link:hover { text-decoration: underline; }
.post-meta-dot, .post-date { color: var(--text-muted); }
.post-byline { margin: 0; font-size: 13px; color: var(--text-secondary); }
.post-byline a { font-weight: 600; color: var(--text-primary); text-decoration: none; }
.post-byline a:hover { text-decoration: underline; }

/* Title: its own centered row below the vote/meta row. */
.post-title { margin: 12px 0 14px; font-size: 22px; line-height: 1.3; text-align: left; }

/* Edit/Delete pinned top-right, out of flow (never pushes the votes/meta). */
.post-actions-corner {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: flex; align-items: center; gap: 6px;
}
.post-actions-corner form { width: auto; margin: 0; padding: 0; background: none; border: 0; display: inline; }

/* ── Threaded comments: tighter row, vote sits flush against the colored bar */
.comment-row { gap: 8px; padding: 6px 10px 6px 6px; }

/* Mobile: show post content first (.forum-main order:1), sidebar after (order:2). */
@media (max-width: 720px) {
    .forum-main  { order: 1; }
    .forum-aside { order: 2; max-height: none; }
    /* Stack Edit above Delete in the top-right corner on mobile. */
    .post-actions-corner { top: 10px; right: 10px; gap: 4px; flex-direction: column; align-items: flex-end; }
    .post-actions-corner .btn-sm { padding: 4px 9px; font-size: 12px; }
    .post-header.has-actions { padding-right: 84px; }
    .post-title { font-size: 19px; }
    /* Mobile vote-button touch targets (base .vote-btn 28x22px in css/styles.css is too small to tap). */
    .vote-btn   { width: 44px; height: 44px; font-size: 16px; }
    .vote-stack { min-width: 44px; }
    .vote-score { font-size: 15px; }

}

/* Image composer: invisible until an image is added; previews appear below textarea. */
.forum-compose { width: auto; }
/* Drag-over highlight on the reply/post textarea itself. */
textarea.is-dragover { outline: 2px dashed var(--color-primary, #007bff); outline-offset: 2px; }

/* Textarea + pinned "add image" placeholder share this positioned wrapper. */
.forum-compose-field { position: relative; }
.forum-compose-add {
    position: absolute; right: 10px; bottom: 10px;
    width: 60px; height: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0; margin: 10px; cursor: pointer;
    color: var(--text-secondary, #4a5970);
    background: var(--bg-surface-alt, #f0f4fa);
    border: 1px dashed var(--border-strong, #b9c5d6);
    border-radius: 8px;
    opacity: 0.92;
}
.forum-compose-add:hover {
    color: var(--color-primary, #007bff);
    border-color: var(--color-primary, #007bff);
    background: #fff;
    opacity: 1;
}
.forum-compose-add[hidden] { display: none; }
.forum-compose-add-icon { font-size: 20px; line-height: 1; font-weight: 600; }
.forum-compose-add-label { font-size: 9px; line-height: 1.1; text-align: center; }
.forum-compose-error { margin: 6px 0 10px; font-size: 13px; color: var(--color-danger); }
.forum-compose-previews:empty { display: none; }
.forum-compose-previews { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
/* Thumbnail + its optional description input, stacked. */
.forum-compose-item { display: flex; flex-direction: column; gap: 4px; width: 84px; }
.forum-compose-desc {
    width: 100%; box-sizing: border-box;
    font-size: 11px; line-height: 1.35; padding: 4px 5px;
    border: 1px solid var(--border-soft, #dbe3ee); border-radius: 4px;
    background: var(--bg-surface, #fff); color: var(--text-primary, #1c2733);
    resize: vertical; min-height: 2.6em;
}
.forum-compose-desc::placeholder { color: #b0bcc9; opacity: 1; }
.forum-compose-thumb {
    position: relative;
    width: 84px; height: 84px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border-soft, #dbe3ee);
    background: var(--bg-surface-alt, #f0f4fa);
}
.forum-compose-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Uploading: preview is shown instantly from the local file, dimmed with a spinner. */
.forum-compose-thumb.is-pending img { opacity: 0.45; }
.forum-compose-thumb.is-pending::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.55);
    border-top-color: var(--color-primary, #007bff);
    animation: forum-compose-spin 0.7s linear infinite;
}
@keyframes forum-compose-spin { to { transform: rotate(360deg); } }
/* Close (×) top-right absolute — sitewide convention. */
.forum-compose-remove {
    position: absolute; top: 2px; right: 2px;
    width: 22px; height: 22px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1; cursor: pointer;
    color: #fff; background: rgba(0, 0, 0, 0.6);
    border: 0; border-radius: 50%;
}
.forum-compose-remove:hover { background: rgba(0, 0, 0, 0.85); }

/* Post image gallery: single = natural size; multiple = scroll-snap carousel. */
.forum-gallery { margin: 12px 0 4px; display: flex; gap: 8px; }

/* Single image: just the image (thin border, no surface box / no carousel chrome). */
.forum-gallery:not(.is-carousel) .forum-gallery-item {
    display: inline-flex; max-width: 100%;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border-soft, #dbe3ee);
    cursor: pointer;
}
.forum-gallery:not(.is-carousel) .forum-gallery-item img {
    display: block; max-width: 100%; max-height: 480px;
    width: auto; height: auto; object-fit: contain;
}

/* Carousel (2+ images): horizontal scroll-snap strip, image contained (never cropped). */
.forum-gallery.is-carousel {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-soft, #dbe3ee);
    background: var(--bg-surface-alt, #f0f4fa);
}
.forum-gallery.is-carousel .forum-gallery-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    height: 300px; min-width: 120px; max-width: 480px;
    padding: 10px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #dbe3ee);
    border-radius: 6px; overflow: hidden;
    cursor: pointer;
}
.forum-gallery.is-carousel .forum-gallery-item img {
    display: block;
    max-height: 100%; max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
}

/* ── Single comment image (inline under the comment text) ───────────────── */
.comment-image-wrap { margin: 6px 0 2px; }
.comment-image {
    display: inline-block; max-width: 100%; box-sizing: border-box;
    padding: 6px; cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border-soft, #dbe3ee);
    background: var(--bg-surface-alt, #f0f4fa);
}
.comment-image img {
    display: block;
    max-width: 308px; max-height: 240px;
    width: auto; height: auto;
    object-fit: contain; border-radius: 5px;
}

/* Missing attachment file (js/forum_media.js marks the tile): placeholder, no dead-end lightbox. */
.forum-media-missing { pointer-events: none; text-decoration: none; }
.forum-media-missing img { display: none; }
.forum-media-missing::after {
    content: 'image unavailable';
    display: block; padding: 14px 18px;
    font-size: 0.85em; color: var(--text-muted);
    background: var(--bg-surface-alt);
}

/* ── YouTube embed (responsive 16:9) ────────────────────────────────────── */
.forum-video-embed {
    display: block;
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 10px 0 4px;
    padding-top: min(56.25%, 360px);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.forum-video-embed iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ── Lightbox overlay ───────────────────────────────────────────────────── */
.forum-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    padding: 24px;
    cursor: zoom-out;
}
.forum-lightbox-img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 4px; }
.forum-lightbox-close {
    position: absolute; top: 12px; right: 16px;
    width: 40px; height: 40px; padding: 0; margin: 0;
    font-size: 28px; line-height: 1; cursor: pointer;
    color: #fff; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 50%;
}
.forum-lightbox-close:hover { background: rgba(0, 0, 0, 0.8); }

@media (max-width: 720px) {
    /* Carousel cards: max ~75vw so full image stays visible without overflowing. */
    .forum-gallery.is-carousel .forum-gallery-item { max-width: 75vw; height: 240px; }
    .forum-gallery:not(.is-carousel) .forum-gallery-item { max-width: 75vw; }
    .forum-gallery:not(.is-carousel) .forum-gallery-item img { max-height: 320px; }
    .comment-image { max-width: 75vw; }
    .comment-image img { max-width: 100%; max-height: 240px; }
    .forum-compose-item { width: 72px; }
    .forum-compose-thumb { width: 72px; height: 72px; }
    .forum-compose-add { width: 46px; height: 46px; right: 8px; bottom: 8px; }
    .forum-compose-add-icon { font-size: 16px; }
    .forum-compose-add-label { font-size: 8px; }
}

/* Edited indicator on posts and comments. */
.edited-label { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* Category last-active line (index + categories listing). */
.cat-last-active { margin: 2px 0 6px; font-size: 12px; color: var(--text-muted); }

/* New/edit post + create-category forms: roomy desktop area (65vw, max 1100px). */
@media (min-width: 721px) {
    .forum-wide-form { width: 65vw; max-width: 1100px; }
    .forum-wide-form > button { width: auto; min-width: 220px; }
    /* Roomy body editor on desktop (~15 lines). Mobile keeps the rows="8"
     * default (~8 lines); both stay user-resizable via the global resize rule. */
    .forum-wide-form textarea { min-height: 16rem; }
    /* Comment + reply composers feel cramped on desktop — +20% taller here only
     * (mobile keeps the global 70/80px). */
    .comment-reply-form textarea,
    .comment-edit-form textarea { min-height: 84px; }
    .comment-form textarea       { min-height: 96px; }
}

/* ── Emoji reactions (post body + each comment) ─────────────── */
/* Lives inside .comment-actions / .post-action-bar; auto left margin pushes it to the row's right. */
.reaction-bar   { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 0 auto; }
.reaction-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.reaction-pill {
    display: inline-flex; align-items: center; gap: 5px;
    width: auto; margin: 0; padding: 2px 9px;
    font-size: 13px; line-height: 1.6; cursor: pointer;
    color: var(--text-primary); background: var(--color-secondary);
    border: 1px solid var(--border-soft, #dbe3ee); border-radius: var(--radius-pill);
}
button.reaction-pill:hover { border-color: var(--color-primary); }
.reaction-pill.is-mine {
    color: var(--color-primary-hover); background: var(--color-primary-soft); border-color: var(--color-primary);
}
span.reaction-pill { cursor: default; }
.reaction-emoji { font-size: 14px; line-height: 1; }
.reaction-count { font-weight: 600; font-variant-numeric: tabular-nums; }

.reaction-add     { position: relative; }
.reaction-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; margin: 0; padding: 3px 9px;
    font-size: 13px; line-height: 1.6; cursor: pointer;
    color: var(--text-secondary); background: transparent;
    border: 1px dashed var(--border-strong, #b9c5d6); border-radius: var(--radius-pill);
}
.reaction-add-icon { display: block; }
.reaction-add-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.reaction-picker {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    display: flex; gap: 2px; padding: 6px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #dbe3ee); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.reaction-picker[hidden] { display: none; }
.reaction-option {
    width: auto; margin: 0; padding: 4px 6px;
    font-size: 18px; line-height: 1; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
}
.reaction-option:hover { background: var(--color-secondary); }
.reaction-option.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* ── Report/flag button + modal ─────────────────────────────── */
.report-btn {
    width: auto; margin: 0; padding: 2px 8px;
    font-size: 12px; line-height: 1.6; cursor: pointer;
    color: var(--text-muted); background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-pill);
}
.report-btn:hover { color: var(--text-inverse); background: var(--color-danger); border-color: var(--color-danger); }
.report-btn-inline { font-size: 12px; }
/* Post action row: "Comment" on the left, Report pushed to the right. */
.post-action-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.post-action-bar .report-btn { margin-left: auto; }
/* When the reaction bar shares the row, IT carries the margin-left:auto — Report just trails it. */
.comment-actions .reaction-bar ~ .report-btn,
.post-action-bar .reaction-bar ~ .report-btn { margin-left: 0; }
/* Crowded rows (Reply/Edit/Delete + pills + Report) wrap instead of overflowing on narrow screens. */
.comment-actions { flex-wrap: wrap; }

.report-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); padding: 20px;
}
.report-modal[hidden] { display: none; }
.report-modal-box {
    position: relative; width: 100%; max-width: 440px;
    padding: 20px; box-sizing: border-box;
    background: var(--bg-surface, #fff);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.report-modal-box h3 { margin: 0 0 12px; }
.report-modal-close {
    position: absolute; top: 8px; right: 10px;
    width: 28px; height: 28px; padding: 0; margin: 0;
    font-size: 20px; line-height: 1; cursor: pointer;
    color: var(--text-secondary); background: transparent; border: 0; border-radius: 50%;
}
.report-modal-close:hover { background: var(--color-secondary); }
.report-form { width: auto; }
.report-form label { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 600; }
.report-form select, .report-form textarea { width: 100%; box-sizing: border-box; }
.report-form-actions { display: flex; gap: 8px; margin-top: 14px; }
.report-form-msg { margin: 10px 0 0; font-size: 13px; color: var(--color-success); }
.report-form-msg.is-error { color: var(--color-danger); }

/* ── Manage: reports queue ──────────────────────────────────── */
.report-group {
    padding: 12px; margin-bottom: 12px;
    border: 1px solid var(--border-soft, #dbe3ee); border-radius: var(--radius-md);
    background: var(--bg-surface-alt, #f0f4fa);
}
.report-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.report-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-danger); }
.report-list { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.report-list li { margin-bottom: 6px; }
.report-time { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.report-note {
    margin: 3px 0 0; padding: 6px 8px;
    font-style: italic; color: var(--text-secondary);
    background: var(--bg-surface, #fff); border-radius: var(--radius-sm);
}
.report-actions { display: flex; gap: 8px; width: auto; margin: 0; padding: 0; background: none; border: 0; }

/* ── Tags / thread prefixes ─────────────────────────────────── */
.forum-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.forum-tag {
    display: inline-block; padding: 2px 10px;
    font-size: 12px; line-height: 1.6; text-decoration: none;
    color: var(--color-primary-hover); background: var(--color-primary-soft);
    border: 1px solid var(--color-primary); border-radius: var(--radius-pill);
}
.forum-tag:hover { background: var(--color-primary); color: var(--text-inverse); }
.form-hint { font-weight: 400; font-size: 12px; color: var(--text-muted); }