/**
 * Forum Responsive Styles
 * 
 * Responsive CSS for forum pages (category, forum, thread views).
 * Always loaded for forum pages.
 * 
 * This file now includes both:
 * - Legacy Jive-based styles (for compatibility with existing forum pages)
 * - Modern responsive layout styles
 * 
 * Breakpoints:
 * - Mobile: <768px (single column, rail below)
 * - Tablet: 768-1024px (two columns, rail beside)
 * - Desktop: >1024px (two columns, full width - identical to current)
 */

/* Hide section-bar (board submenu) on mobile for forum category + thread pages */
/*
@media (max-width: 768px) {
    body.forum-layout #section-bar {
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
    body.forum-layout {
        padding-top: 110px !important; /* topbar + navbar only; no section-bar */
    /*}
    body.forum-layout.forum-message-hash {
        padding-top: 110px !important;
    }
}
*/
/* ===========================================
   LEGACY JIVE STYLES
   Migrated from forum.css for compatibility
   =========================================== */

/* ===========================================
   BASE TABLE STYLES
   =========================================== */

.border {
    border: 1px solid var(--color-border);
}

table.border {
    background: var(--color-bg-light);
}

table.border th {
    border-width: 0 0 1px;
}

table.border th.border {
    border-width: 1px;
}

th.border {
    padding: 0.1cm;
}

.border th,
.border th a:link,
.border th a:visited,
.border th a:hover {
    background-color: var(--color-bg-light);
    padding: 0.05cm;
    font-family: Verdana, Arial, Helvetica;
    font-size: 0.9em;
    font-weight: 700;
}

.border th.post-links,
.border th.post-links a:link,
.post-links {
    font-size: 0.9em;
}

th img {
    margin: 0;
}


/* ===========================================
   ROW ALTERNATING BACKGROUNDS
   =========================================== */

.o {
    background-color: var(--color-bg-row-odd);
}

.e {
    background-color: var(--color-bg-row-even);
}


/* ===========================================
   JIVE HEADER & NAVIGATION
   =========================================== */

.jive-header table {
    border: 1px var(--color-border) solid;
    background-color: var(--color-bg-th);
}

.jive-breadcrumbs,
.jive-breadcrumbs a {
    color: var(--site-primary) !important;
    font-weight: 700;
}

.jive-breadcrumbs a:hover {
    color: var(--site-secondary-dark) !important;
}

.jive-page-title {
    font-size: 1.2em;
    font-weight: 700;
    box-sizing: unset !important;
}


/* ===========================================
   FORUM LINK COLORS (Site-Specific)
   Override Jive defaults with CSS variables
   =========================================== */

/* Topic/thread title links in the message board index */
.jive-subject a,
.jive-subject a:link {
    color: var(--site-primary) !important;
    text-decoration: none;
}

.jive-subject a:visited {
    color: #b26b41 !important;
}

/* Dark mode: visited forum index thread titles use muted orange. */
html.dark-mode .jive-subject a:visited {
    color: #b26b41 !important;
}

.jive-subject a:hover,
.jive-subject a:focus {
    color: var(--site-secondary-dark, var(--site-secondary)) !important;
    text-decoration: underline;
}

/* General forum links */
.jive-list a,
.jive-list a:link,
.jive-message-list a,
.jive-message-list a:link {
    color: var(--site-primary);
}

.jive-list a:hover,
.jive-list a:focus,
.jive-message-list a:hover,
.jive-message-list a:focus {
    color: var(--site-secondary-dark, var(--site-secondary));
    text-decoration: underline;
}

/* Author/username links in forum list */
.jive-author a,
.jive-author a:link,
.jive-author a:visited {
    color: var(--color-text-secondary);
    text-decoration: none;
}

html.dark-mode .jive-author a:link,
html.dark-mode .jive-author a:visited {
    color: var(--dm-text-muted) !important;
}

.jive-author a:hover,
.jive-author a:focus {
    color: var(--site-primary);
    text-decoration: underline;
}

/* Category/forum name links */
.jive-category-name a,
.jive-category-name a:link,
.jive-category-name a:visited {
    color: var(--site-primary) !important;
    text-decoration: none;
}

.jive-category-name a:hover,
.jive-category-name a:focus {
    color: var(--site-secondary) !important;
    text-decoration: underline;
}

/* ===========================================
   THREAD HEADER LINKS (thread-header-responsive.jspf; legacy thread-header.jspf in WEB-INF/archive)
   =========================================== */

/* Breadcrumb-style links in the header bar table */
.border th a,
.border th a:link {
    color: var(--site-primary) !important;
    text-decoration: none;
}

.border th a:visited {
    color: var(--site-secondary) !important;
}

.border th a:hover,
.border th a:focus {
    color: var(--site-secondary-dark, var(--site-secondary)) !important;
    text-decoration: underline;
}

/* Labels that wrap header links */
.jive-button-label a,
.jive-button-label a:link {
    color: var(--site-primary) !important;
    text-decoration: none;
}

.jive-button-label a:visited {
    color: var(--site-secondary) !important;
}

.jive-button-label a:hover,
.jive-button-label a:focus {
    color: var(--site-secondary-dark, var(--site-secondary)) !important;
    text-decoration: underline;
}

.topics-next-prev {
    color: var(--color-text);
}

.topics-next-prev a,
.topics-next-prev a:link {
    color: var(--site-primary) !important;
    text-decoration: none;
}

.topics-next-prev a:visited {
    color: var(--site-secondary) !important;
}

.topics-next-prev a:hover,
.topics-next-prev a:focus {
    color: var(--site-secondary-dark, var(--site-secondary)) !important;
    text-decoration: underline;
}


/* ===========================================
   JIVE LIST TABLES
   =========================================== */

.jive-list {
    border: 1px var(--color-border) solid;
}

.jive-list th {
    background-color: var(--color-bg-th);
    color: var(--color-text-on-secondary);
}

.jive-list td {
    vertical-align: middle;
}

.jive-list .jive-counts {
    text-align: center;
}

.jive-list .jive-date,
.jive-list .d,
.jive-list .jive-author {
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}

.jive-bullet,
.b {
    text-align: center;
}


/* ===========================================
   JIVE CATEGORY/FORUM LIST
   =========================================== */

#jive-cat-forum-list .jive-category-name {
    background-color: var(--color-bg-light);
}

#jive-cat-forum-list th {
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}

#jive-cat-forum-list .e,
#jive-cat-forum-list .o {
    background-color: var(--color-bg-row-even);
}

.jive-category-name {
    font-weight: 700;
    font-size: 18px;
}

.jive-description {
    font-family: verdana, arial, sans-serif;
    font-weight: 400;
    font-size: 11px;
}


/* ===========================================
   JIVE MESSAGE LIST
   =========================================== */

.jive-message-list th,
.jive-message th {
    padding-left: 5px;
    background-color: var(--color-bg-th-accent);
    text-align: left;
    color: var(--color-text-on-primary);
}

.jive-message-list .o,
.jive-message {
    background-color: var(--color-bg-row-odd);
}

.jive-message-list .e {
    background-color: var(--color-bg-row-even);
}

.jive-subject {
    font-weight: 700;
    font-size: 17px;
}

.jive-message-content .jive-subject-row {
    border-bottom: 1px var(--color-border) solid;
}


/* ===========================================
   JIVE REPLY TREE
   =========================================== */

#jive-reply-tree {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Tree view, no replies yet: lone “Reply to this message” below root post */
ul.jive-reply-tree-empty {
    list-style: none;
    margin: 12px 0 8px;
    padding: 0;
}
ul.jive-reply-tree-empty > li {
    margin: 0;
    padding: 0;
}

.tree-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
}

.tree-row:last-child {
    border-bottom: none;
}

/* Tree: single row background (borders separate rows; alternating colors removed) */
.tree-row--odd,
.tree-row--even {
    background-color: var(--color-bg-row-even);
}

.tree-subject {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: calc(var(--tree-depth, 0) * 20px);
}

.tree-subject a,
.tree-subject b {
    overflow-wrap: break-word;
    word-break: break-word;
    font-family: verdana, sans-serif;
    font-size: 14px;
}

/* Unvisited = site secondary; visited = muted orange so they're clearly distinct */
.tree-subject a:link {
    color: var(--site-secondary);
}
.tree-subject a:visited {
    color: #b26b41 !important;
}
html.dark-mode #jive-reply-tree .tree-subject a:link {
    color: rgba(255, 255, 255, 0.92) !important;
}
html.dark-mode #jive-reply-tree .tree-subject a:visited {
    color: #b26b41 !important;
}

/* Tree row hover: avoid purple in dark mode — use subtle bg + primary-colored link for readability */
.tree-row:hover {
    background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05)) !important;
}
/* Locked tree rows (no href in premium preview): do not look clickable */
#jive-reply-tree .tree-row[data-href=""] {
    cursor: default;
}
/* Subtle dimming for locked rows while keeping text readable */
#jive-reply-tree .tree-row[data-href=""]:not(.tree-row--current) .tree-subject,
#jive-reply-tree .tree-row[data-href=""]:not(.tree-row--current) .tree-meta {
    opacity: 0.78;
}
#jive-reply-tree .tree-row[data-href=""]:hover {
    background-color: var(--color-bg-row-even) !important;
}
.tree-subject a:hover,
.tree-subject a:focus {
    color: var(--site-primary) !important;
    text-decoration: underline;
}
html.dark-mode #jive-reply-tree .tree-row:hover {
    background-color: var(--color-bg-hover, rgba(255, 143, 66, 0.12)) !important;
}
html.dark-mode #jive-reply-tree .tree-row[data-href=""]:hover {
    background-color: var(--color-bg-row-even) !important;
}
html.dark-mode #jive-reply-tree .tree-subject a:hover,
html.dark-mode #jive-reply-tree .tree-subject a:focus {
    color: var(--site-primary-light, var(--site-primary, #ff8f42)) !important;
    text-decoration: underline;
}
/* Currently viewing post in tree — strong highlight */
#jive-reply-tree .tree-row--current {
    background-color: rgba(var(--site-primary-rgb, 82, 45, 128), 0.15);
    background-image: linear-gradient(90deg, rgba(var(--site-primary-rgb, 82, 45, 128), 0.25) 0%, transparent 100%);
    border-left: 4px solid var(--site-primary-dark, var(--site-primary));
    padding-left: 6px;
}
#jive-reply-tree .tree-row--current .tree-subject b {
    color: var(--site-primary-dark, var(--site-primary)) !important;
}
html.dark-mode #jive-reply-tree .tree-row--current {
    background-color: rgba(var(--site-primary-rgb, 255, 143, 66), 0.2);
    background-image: linear-gradient(90deg, rgba(var(--site-primary-rgb, 255, 143, 66), 0.35) 0%, transparent 100%);
    border-left-color: var(--site-primary);
}
html.dark-mode #jive-reply-tree .tree-row--current .tree-subject b {
    color: var(--site-primary-light, var(--site-primary, #ff8f42)) !important;
}

.tree-status-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tree-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#jive-reply-tree .tree-meta .tree-author:link,
#jive-reply-tree .tree-meta .tree-author:visited {
    color: var(--color-text-secondary);
    text-decoration: none;
}

html.dark-mode #jive-reply-tree .tree-meta .tree-author:link,
html.dark-mode #jive-reply-tree .tree-meta .tree-author:visited {
    color: var(--dm-text-muted) !important;
}

.tree-date {
    color: var(--color-text-muted);
}


/* ===========================================
   JIVE BUTTONS & LABELS
   =========================================== */

.jive-button .jive-button-label {
    padding-right: 5px;
}

.jive-label {
    text-align: right;
}

/* Postform (new topic / reply): no visited style; hover = primary bg + white text.
   Only :visited gets inherit so list links don't show purple; current-board link keeps inline white. */
#main-content .jive-postform-board-chooser a:visited {
    color: inherit !important;
}
/* Links with primary background (current board in sentence) = white text in all modes */
#main-content .jive-postform-board-chooser a[style*="background-color"] {
    color: #fff !important;
}
#main-content .jive-postform-board-chooser a:hover,
#main-content .jive-postform-board-chooser a:focus,
#main-content .jive-postform-board-chooser a:visited:hover,
#main-content .jive-postform-board-chooser a:visited:focus {
    background-color: var(--site-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Dark mode: override header's html.dark-mode a:hover so board chooser links stay white on hover */
html.dark-mode #main-content .jive-postform-board-chooser a:hover,
html.dark-mode #main-content .jive-postform-board-chooser a:focus,
html.dark-mode #main-content .jive-postform-board-chooser a:visited:hover,
html.dark-mode #main-content .jive-postform-board-chooser a:visited:focus {
    background-color: var(--site-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Dark mode: Post Message button — primary CTA stands out on dark background */
html.dark-mode .jive-post-form input.tn-btn--primary,
html.dark-mode .jive-post-form input[name="doPost"] {
    background: var(--site-primary) !important;
    color: var(--color-text-on-primary) !important;
    border: 2px solid var(--site-primary);
}
html.dark-mode .jive-post-form input.tn-btn--primary:hover,
html.dark-mode .jive-post-form input.tn-btn--primary:active,
html.dark-mode .jive-post-form input[name="doPost"]:hover,
html.dark-mode .jive-post-form input[name="doPost"]:active {
    background: var(--site-primary-dark, var(--site-primary)) !important;
    color: var(--color-text-on-primary) !important;
    border-color: var(--site-primary-dark, var(--site-primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Disabled submit buttons (e.g. forum not chosen yet) — must override doPost !important rules above */
.jive-post-form input.tn-btn:disabled,
.jive-post-form input.tn-btn--primary:disabled,
.jive-post-form input.tn-btn--secondary:disabled,
.jive-post-form input[name="doPost"]:disabled,
.jive-post-form input[name="doPreview"]:disabled,
.jive-post-form input[name="doAttach"]:disabled,
.jive-post-form .jive-post-form__poll-btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
.jive-post-form input.tn-btn--primary:disabled,
.jive-post-form input[name="doPost"]:disabled {
    background: #c8c8d0 !important;
    color: #666 !important;
    border: 2px solid #b0b0b8 !important;
}
html.dark-mode .jive-post-form input.tn-btn--primary:disabled,
html.dark-mode .jive-post-form input[name="doPost"]:disabled {
    background: #3d3d48 !important;
    color: #9a9aa8 !important;
    border-color: #555 !important;
    opacity: 0.85 !important;
}
.jive-post-form input.tn-btn--primary:disabled:hover,
.jive-post-form input.tn-btn--primary:disabled:active,
.jive-post-form input[name="doPost"]:disabled:hover,
.jive-post-form input[name="doPost"]:disabled:active {
    background: #c8c8d0 !important;
    color: #666 !important;
    border-color: #b0b0b8 !important;
    box-shadow: none !important;
}
html.dark-mode .jive-post-form input.tn-btn--primary:disabled:hover,
html.dark-mode .jive-post-form input.tn-btn--primary:disabled:active,
html.dark-mode .jive-post-form input[name="doPost"]:disabled:hover,
html.dark-mode .jive-post-form input[name="doPost"]:disabled:active {
    background: #3d3d48 !important;
    color: #9a9aa8 !important;
    border-color: #555 !important;
    box-shadow: none !important;
}
.jive-post-form input.tn-btn--secondary:disabled,
.jive-post-form input[name="doPreview"]:disabled {
    background: #f0f0f2 !important;
    color: #888 !important;
    border-color: #c8c8d0 !important;
}
html.dark-mode .jive-post-form input.tn-btn--secondary:disabled,
html.dark-mode .jive-post-form input[name="doPreview"]:disabled {
    background: #2a2a32 !important;
    color: #777 !important;
    border-color: #444 !important;
}
.jive-post-form input.jive-attach-item:disabled,
.jive-post-form input[name="doAttach"]:disabled,
.jive-post-form .jive-post-form__poll-btn:disabled {
    background: #f0f0f2 !important;
    color: #888 !important;
    border: 1px solid #c8c8d0 !important;
}
html.dark-mode .jive-post-form input.jive-attach-item:disabled,
html.dark-mode .jive-post-form input[name="doAttach"]:disabled,
html.dark-mode .jive-post-form .jive-post-form__poll-btn:disabled {
    background: #2a2a32 !important;
    color: #777 !important;
    border-color: #444 !important;
}

/* Postform page: base styles (moved from inline for maintainability) */
.jive-postform-board-chooser {
    font-size: 22px;
    margin-left: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top:0;
}
.jive-postform-board-chooser.jive-page-title {
    font-weight: normal;
}
.jive-postform-board-chooser__label {
    font-size: inherit;
    white-space: nowrap;
}
.jive-postform-board-link {
    padding: 0 5px;
}
.jive-postform-board-select {
    font-size: 0.85em;
    padding: 4px 8px;
    border: 2px solid var(--color-border);
    border-radius: 3px;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    cursor: pointer;
    max-width: 100%;
}
/* Groups &lt;select&gt; + hint so they align (avoids outer-flex baseline quirks with native selects) */
.jive-postform-board-chooser__select-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    max-width: 100%;
    min-width: 0;
}
/* Amphitheatre / helper line: same row as select, vertically centered with the dropdown */
.jive-postform-board-chooser__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 0.64em;
    line-height: 1.35;
    max-width: 100%;
}
.jive-postform-board-chooser__hint .material-icons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Full-width note below the label/select/hint row */
.jive-postform-board-chooser__select-note {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.64em;
    line-height: 1.4;
    color: var(--color-text-muted, #666);
    box-sizing: border-box;
}
.jive-postform-help-text {
    font-size: 1.2em;
    margin-left: 0;
}
/* Post form alert messages (error / info / warning) */
.jive-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.jive-msg .material-icons {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1.35;
}
.jive-msg__text {
    flex: 1;
    min-width: 0;
}
.jive-msg--error {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}
.jive-msg--info {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.jive-msg--warn {
    background: rgba(234, 179, 8, 0.08);
    color: #b45309;
    border: 1px solid rgba(234, 179, 8, 0.2);
}
html.dark-mode .jive-msg--error {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.35);
}
html.dark-mode .jive-msg--info {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.35);
}
html.dark-mode .jive-msg--warn {
    background: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
    border-color: rgba(234, 179, 8, 0.35);
}

.jive-post-form {
    margin-left: 0;
    margin-top: 10px;
}
/* Dim the form body when no forum has been chosen yet */
.jive-post-form--needs-forum-pick .jive-post-form__body {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
/* Category landing: subject/body visible before forum pick — light separator from board row */
.postform-page .jive-post-form--needs-forum-pick {
    border-top: 1px solid var(--color-border, #ccc);
    padding-top: 12px;
    margin-top: 8px;
}
/* Category landing: emphasize board row until a forum is chosen */
.postform-page .jive-postform-board-chooser--step-1 {
    background: var(--color-bg-light, #f5f5f8);
    border: 1px solid var(--color-border, #ccc);
    border-radius: 6px;
    padding: 10px 12px;
    box-sizing: border-box;
}
html.dark-mode .postform-page .jive-postform-board-chooser--step-1 {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border, #444);
}
.postform-page .jive-postform-forum-not-ready {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text-muted, #666);
}
.postform-page .jive-postform-forum-not-ready-row .jive-post-form__field {
    padding-bottom: 4px;
}

/* Edit form page */
body.editform-page .board-opt.choose-position,
body.editform-page #board-jump,
body.editform-page .board-jump {
    display: none !important;
}

.editform-page .forum-main-content {
    padding: 18px 20px 28px;
    box-sizing: border-box;
}

.editform-page .jive-editform-header {
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    background: var(--color-bg-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.editform-page .jive-editform-header .jive-page-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.1;
}

.editform-page .jive-editform-context {
    margin-bottom: 6px;
    font-size: 1.5em;
    line-height: 1.45;
}

.editform-page .jive-editform-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.editform-page .jive-editform-meta-row:last-child {
    margin-bottom: 6px;
}

.editform-page .jive-editform-meta-label {
    font-size: 0.86em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.editform-page .jive-editform-header__actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
}

.editform-page .jive-editform-header__actions a .material-icons {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.editform-page .jive-editform-header__actions a:hover,
.editform-page .jive-editform-header__actions a:focus {
    text-decoration: underline;
}

.editform-page .jive-editform-context a,
.editform-page .jive-editform-context a:link,
.editform-page .jive-editform-context a:visited,
.editform-page .jive-editform-context a:active {
    color: var(--site-primary, #F56600) !important;
}

.editform-page .jive-editform-context a:hover,
.editform-page .jive-editform-context a:focus,
.editform-page .jive-editform-context a:visited:hover,
.editform-page .jive-editform-context a:visited:focus {
    color: var(--site-primary-dark, #d85a00) !important;
}

.jive-edit-form .jive-post-form__field #subject01,
.jive-edit-form .jive-post-form__field #body01,
.jive-edit-form .jive-post-form__field #comment01 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 18px !important;
    line-height: 1.45;
}

.jive-edit-form .jive-post-form__field input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.4;
}

.jive-edit-form .jive-post-form__field #body01 {
    min-height: 17em;
    height: 17em;
}

.jive-edit-form .jive-post-form__field #comment01 {
    min-height: 3.2em;
    font-size: 16px !important;
}

.jive-edit-form .jive-post-form__row--buttons .jive-post-form__field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jive-edit-form .jive-post-form__row {
    align-items: start;
}

.jive-edit-form .jive-post-form__label {
    padding-top: 0;
    align-self: start;
}

.jive-edit-form .jive-post-form__row--align-top .jive-post-form__label {
    padding-top: 0;
}

.jive-edit-form .jive-post-form__label--message {
    justify-content: flex-start;
    gap: 6px;
}

.jive-edit-form__inline-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.jive-edit-form__subtext {
    display: inline-block;
    margin-left: 8px;
    color: var(--color-text-secondary);
}

.jive-edit-move-section {
    margin-top: 14px;
    padding: 14px 14px 12px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.jive-edit-move-section__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.jive-edit-move-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.jive-edit-move-form__label {
    font-size: 16px;
    font-weight: 700;
}

.jive-edit-move-form .jive-postform-board-select {
    min-width: 280px;
    flex: 1;
    font-size: 19px;
    line-height: 1.35;
    padding: 10px 12px;
}

.jive-edit-move-form .jive-postform-board-select option {
    font-size: 17px;
    line-height: 1.35;
}

html .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary,
html.dark-mode .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary {
    min-height: 46px;
    background: var(--site-primary, #F56600) !important;
    color: #fff !important;
    border: 2px solid var(--site-primary, #F56600) !important;
}

html .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:hover,
html .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:active,
html .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:focus,
html.dark-mode .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:hover,
html.dark-mode .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:active,
html.dark-mode .editform-page .jive-edit-move-form input.jive-edit-move-form__submit.tn-btn--primary:focus {
    background: var(--site-primary-dark, #d85a00) !important;
    color: #fff !important;
    border-color: var(--site-primary-dark, #d85a00) !important;
}

html.dark-mode .jive-edit-move-form .jive-postform-board-select {
    background-color: #2a2a3a !important;
    color: #f0f0f0 !important;
    border: 2px solid var(--site-primary, #F56600) !important;
}

.jive-edit-move-form__empty {
    color: var(--color-text-secondary);
}

/* Postform page: padding for tablet and desktop */
@media (min-width: 768px) {
    .forum-main-layout.postform-page .forum-main-content {
        padding: 24px 28px;
    }
}

.jive-postform-original-heading {
    font-size: 22px;
    margin: 15px 0 10px 5px;
    font-weight: bold;
}

.jive-info-text {
    color: var(--site-secondary);
}

.jive-error-text {
    color: var(--color-danger);
}


/* ===========================================
   JIVE BOX & SIDEBAR
   =========================================== */

.jive-box {
    border: 1px var(--color-border) solid;
    border-radius: 4px;
}

.jive-message .jive-box {
    border: 1px var(--color-border) solid;
}

.jive-message .jive-box td {
    background-color: var(--color-bg-light);
}

.jive-sidebar .jive-box th {
    text-align: left;
    padding-left: 6px;
    background-color: var(--color-bg-light);
    border-bottom: 1px var(--color-border-light) solid;
}

.jive-sidebar .jive-box {
    border: 1px var(--color-border) solid;
}


/* ===========================================
   JIVE TABS
   =========================================== */

.jive-selected-tab,
.jive-tab,
.jive-tab-spacer,
.jive-tab-spring,
.jive-tab-bar {
    border-color: var(--color-border);
    border-style: solid;
}

.jive-selected-tab {
    border-width: 1px 1px 0;
    background-color: var(--color-bg-surface);
}

.jive-tab {
    border-width: 2px 1px 1px;
    background-color: var(--color-border);
}

.jive-tab:hover {
    background-color: var(--color-border-light);
    border-top: 2px var(--color-text-placeholder) solid;
}

.jive-tab,
.jive-selected-tab {
    padding: 4px 10px;
    font-family: tahoma;
    font-size: 0.7em;
}

.jive-selected-tab a {
    color: var(--color-text) !important;
    text-decoration: none;
    font-weight: 700;
}

.jive-tab a {
    color: var(--color-text) !important;
    text-decoration: none;
    font-weight: 700;
}

.jive-tab a:hover,
.jive-selected-tab a:hover {
    text-decoration: none !important;
}

.jive-tab-spacer,
.jive-tab-spring {
    border-width: 0 0 1px;
}

.jive-tab-bar {
    background-color: var(--color-bg-surface);
    border-width: 0 1px 1px;
}

.jive-tab-bar td {
    font-family: tahoma;
    font-weight: 700;
}

.jive-tab-bar a {
    color: var(--color-text);
    text-decoration: none;
}

.jive-tab-bar a:hover {
    text-decoration: underline;
}

.jive-tab-section td {
    font-weight: 400;
    font-family: verdana;
    font-size: 0.7em;
}

.jive-tab-section a {
    color: var(--color-text) !important;
    padding-right: 6px;
    font-weight: 400;
}

.jive-tab-spring,
.jive-tab-logout {
    font-size: 0.7em;
}


/* ===========================================
   JIVE PAGINATOR
   =========================================== */

.jive-paginator .jive-current,
.jive-message-list-footer .jive-paginator .jive-current {
    background-color: var(--color-bg-light);
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text) !important;
}

.jive-message-list .jive-paginator a {
    color: var(--color-text-on-secondary);
    background-color: var(--site-secondary);
}

.jive-footer .jive-paginator .jive-current {
    background-color: var(--color-bg-light);
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text) !important;
}

.jive-message-list .jive-footer .jive-paginator a {
    color: var(--color-text);
}

.jive-paginator-bottom .jive-paginator .jive-current {
    background-color: var(--color-bg-light);
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text) !important;
}

.jive-paginator-bottom .jive-paginator a {
    background-color: var(--color-bg-surface);
    color: var(--color-text) !important;
}


/* ===========================================
   JIVE FOOTER
   =========================================== */

#jive-footer td {
    font-size: 0.7em;
    font-weight: 700;
    text-align: center;
    border-top: 1px var(--color-border) solid;
    padding-top: 5px;
}

#jive-footer td a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

#jive-footer td a:hover {
    text-decoration: underline;
}


/* ===========================================
   JIVE ACCOUNT & FORMS
   =========================================== */

.jive-account-box .jive-box {
    border: 0 !important;
}

.jive-account-box .jive-box td {
    padding-bottom: 6px;
}

.jive-account-box .jive-box th {
    text-align: left;
    border-bottom: 1px var(--color-border) solid;
}

.jive-account-form .jive-required {
    font-weight: 700;
}

.jive-account-form .jive-label {
    text-align: left;
}

.jive-post-form .jive-font-buttons input {
    background-color: var(--color-bg-light);
    font-size: 0.8em;
    font-family: verdana;
    border-width: 2px;
    border-top-color: var(--color-border);
    border-right-color: var(--color-border);
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-border);
}

/* Post form action buttons: use site tn-btn styles (match rest of site) */
.jive-post-form input.tn-btn {
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Vertically center button text: symmetric padding + line-height (inputs don't get flex centering) */
    padding-top: var(--tn-space-sm);
    padding-bottom: var(--tn-space-sm);
    line-height: 1.2;
    vertical-align: middle;
    box-sizing: border-box;
}
/* Same total height as secondary (2px border) so label alignment matches across the row */
.jive-post-form input.tn-btn--primary {
    border: 2px solid transparent;
}
.jive-post-form input.tn-btn:focus,
.jive-post-form input.jive-attach-item:focus,
.jive-post-form .jive-post-form__poll-btn:focus,
.jive-post-form .jive-post-form__cancel-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--site-primary-rgb), 0.2);
}
.jive-post-form input.tn-btn--primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--site-primary-rgb), 0.5);
}

/* Postform div-based layout: labels on top, full-width fields */
.jive-post-form__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.jive-post-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 0;
    margin-bottom: 5px;
    margin-top: 5px;
}
.jive-post-form__row--buttons {
    align-items: center;
}
.jive-post-form__label {
    text-align: left;
    font-size: 18px;
}
.jive-post-form__label label {
    font-size: inherit;
    font-weight: bold;
}
/* Helper hint sits inline next to the label text */
.jive-post-form__label-hint {
    display: inline;
    font-size: 13px;
    font-weight: normal;
    color: var(--color-text-muted, #888);
    margin-left: 6px;
}
/* Message label: "Message" + B/I/U on the same row */
.jive-post-form__label--message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.jive-post-form__font-btns {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}
.jive-post-form__font-btns span {
    display: inline-flex;
    align-items: center;
}
.jive-post-form__field {
    min-width: 0;
}
/* Preview + Post Message grouped side-by-side */
.jive-post-form__btn-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.jive-post-form__field #subject01,
.jive-post-form__field #body01 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 18px !important;
    line-height: 1.45;
}
/* Message textarea: slightly shorter on desktop (was rows="20") */
.jive-post-form__field #body01 {
    height: 14em;
}
/* Second "Post Message" button above message box: hidden on desktop, shown on mobile only when textarea has content */
.jive-post-form__post-above-mobile {
    display: none;
}
.jive-post-form__post-above-mobile--visible {
    display: none; /* overridden in mobile media query */
}
/* Expand/collapse message box: inline with the Message label */
.jive-post-form__message-expand-toggle {
    display: inline-flex;
    align-items: center;
}
.jive-post-form__message-expand-toggle .jive-post-form__expand-link,
.jive-post-form__message-expand-toggle .jive-post-form__collapse-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--site-primary, #F56600);
    cursor: pointer;
    text-decoration: none;
}
.jive-post-form__message-expand-toggle .jive-post-form__expand-link:hover,
.jive-post-form__message-expand-toggle .jive-post-form__collapse-link:hover {
    text-decoration: underline;
}
.jive-post-form__message-expand-toggle .material-icons {
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}
/* When not expanded: hide Collapse link */
.jive-post-form__message-expand-toggle .jive-post-form__collapse-link {
    display: none;
}
/* When expanded: hide Expand, show Collapse */
.jive-post-form__message-expanded .jive-post-form__expand-link {
    display: none;
}
.jive-post-form__message-expanded .jive-post-form__message-expand-toggle .jive-post-form__collapse-link {
    display: inline-flex;
}
/* Expanded: message box fills most of viewport height */
.jive-post-form__field .jive-post-form__message-expanded #body01 {
    min-height: calc(100vh - 200px);
    height: calc(100vh - 200px);
}
.jive-post-form__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.jive-post-form__toolbar span {
    display: inline-flex;
    align-items: center;
}
.jive-post-form__toolbar input[type="submit"],
.jive-post-form__toolbar input[type="button"] {
    background-color: var(--color-bg-light);
    font-size: 12px;
    font-family: verdana;
    font-weight: bold;
    padding: 4px 10px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-border);
    cursor: pointer;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
}
.jive-post-form__toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: var(--color-border);
    margin: 0 4px;
    align-self: center;
}
.jive-post-form__row--buttons .jive-post-form__field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
/* Cancel: lightweight text-only style so it doesn't compete with Preview/Post */
.jive-post-form .jive-post-form__cancel-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-text-secondary, #888) !important;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    cursor: pointer;
}
.jive-post-form .jive-post-form__cancel-btn:hover {
    color: var(--color-text-primary, #ccc) !important;
    text-decoration: underline;
}

.jive-post-form__attach-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}
.jive-post-form__attach-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Inline poll section on postform */
.jive-post-form__poll-section {
    border-top: 2px solid var(--site-primary, #333);
    border-bottom: 2px solid var(--site-primary, #333);
    background: var(--color-bg-light, #f8f8fa);
    padding: 12px 14px 14px;
    margin: 8px 0;
    border-radius: 6px;
}
html.dark-mode .jive-post-form__poll-section {
    background: var(--color-bg-card, #1e1e24);
}
.jive-post-form__poll-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
}
.jive-post-form__poll-icon {
    font-size: 22px;
    color: var(--site-primary, #333);
}
.jive-post-form__poll-title {
    flex: 1;
}
.jive-post-form__poll-remove {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted, #888);
    opacity: 0.7;
    transition: opacity 0.15s;
}
.jive-post-form__poll-remove:hover {
    opacity: 1;
    color: var(--color-danger, #c00);
}
.jive-post-form__poll-section .jive-post-form__row {
    margin-top: 0;
    margin-bottom: 8px;
}
.jive-post-form__poll-section .jive-post-form__field input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
}
.jive-post-form__poll-answers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jive-post-form__poll-answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.jive-post-form__poll-answer-label {
    min-width: 70px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary, #555);
    white-space: nowrap;
}
.jive-post-form__poll-answer-row input[type="text"] {
    flex: 1;
    font-size: 15px;
    padding: 5px 8px;
    box-sizing: border-box;
}
.jive-post-form__poll-add-wrap {
    margin-top: 8px;
}
.jive-post-form__poll-add-choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--site-primary, #333);
    font-weight: 600;
    cursor: pointer;
}
.jive-post-form__poll-add-choice .material-icons {
    font-size: 18px;
    vertical-align: middle;
}
.jive-post-form__poll-add-choice:hover {
    text-decoration: underline;
}

.jive-preview-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Thread list poll indicator icon */
.board-poll-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--site-primary, #555);
}


/* ===========================================
   JIVE PROFILE
   =========================================== */

.jive-profile th {
    text-align: left;
    border-bottom: 1px var(--color-border) solid;
}

.jive-profile .jive-label {
    text-align: left;
}

.jive-cp-formbox table {
    padding-left: 25px;
}

.jive-cp-header {
    font-weight: 700;
}

.jive-cp-formbox .jive-label {
    text-align: left;
    padding-top: 5px;
}


/* ===========================================
   JIVE SEARCH
   =========================================== */

.jive-search-form th {
    text-align: left;
    border-bottom: 1px var(--color-border) solid;
}

.jive-search-result .jive-info {
    color: var(--color-text-placeholder);
}

.jive-search-result .jive-hilite {
    background-color: #ff0;
    font-weight: 700;
}


/* ===========================================
   JIVE WATCH LIST
   =========================================== */

.jive-watch-list th {
    background-color: var(--color-bg-th);
    color: var(--color-text-on-secondary);
}

.jive-watch-list .jive-name {
    text-align: left;
}

.jive-watch-list .jive-delete,
.jive-watch-list .jive-delete-button {
    background-color: var(--color-bg-light);
}

.jive-watch-list .e {
    background-color: var(--color-bg-row-even);
}

.jive-watch-list .o {
    background-color: var(--color-bg-row-odd);
}


/* ===========================================
   JIVE ATTACHMENTS
   =========================================== */

.jive-attachment-list td {
    font-size: 0.7em !important;
}

.jive-edit-attach-list th {
    background-color: var(--color-bg-th);
    color: var(--color-text-on-secondary);
    padding-left: 10px;
    padding-right: 10px;
}


/* ===========================================
   JIVE SPELL CHECK
   =========================================== */

.jive-spell-error-current,
.jive-spell-error {
    color: var(--color-danger);
    border-bottom: var(--color-danger) 2px dotted;
}

.jive-spell-error-current {
    background-color: var(--color-bg-light);
    font-weight: 700;
}

.jive-spell-form .jive-spell-button {
    background-color: var(--color-bg-light);
    font-size: 0.8em;
    font-family: verdana, arial, helvetica, sans-serif;
    padding: 2px 6px;
}

.jive-spell-form .jive-box th {
    background-color: var(--color-bg-th);
    color: var(--color-text-on-secondary);
}


/* ===========================================
   JIVE MISC
   =========================================== */

.jive-guest {
    font-style: italic !important;
}

.jive-faq-answer {
    font-weight: 700;
}

.jive-top-users-box .jive-box th {
    text-align: left;
    background-color: var(--color-bg-th);
    color: var(--color-text-on-secondary);
}

.jlp {
    font-family: verdana;
    font-weight: 400;
    font-size: 0.8em;
}


/* ===========================================
   FORUM REPLY BUTTON
   =========================================== */

a.forum-reply {
    display: inline-block;
    font-size: 1.3em;
    background-color: var(--site-primary);
    color: var(--color-text-on-primary) !important;
    padding: 5px;
    border-radius: 10px;
}

a.forum-reply .material-icons {
    color: var(--color-text-on-primary) !important;
    /* Vertically center icon with text (Material Icons glyph sits slightly high in em box) */
    transform: translateY(0.06em);
}

a.forum-reply:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

a.forum-reply:link,
a.forum-reply:hover,
a.forum-reply:focus,
a.forum-reply:active {
    color: var(--color-text-on-primary) !important;
}

/* Reply buttons should never show browser visited styling anywhere in thread UI. */
.forum-main-content a.forum-reply {
    color: var(--color-text-on-primary) !important;
    text-decoration: none !important;
}

.forum-main-content a.forum-reply .material-icons {
    color: var(--color-text-on-primary) !important;
}

html.dark-mode a.forum-reply:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.82);
}


/* ===========================================
   POST STYLES
   =========================================== */

.post-body {
    border-top: 1px var(--color-border) solid;
    overflow-wrap: anywhere; /* break long URLs/tokens at any point so they never overflow the container */
    word-break: break-word;  /* fallback for older WebKit (iOS Safari < 15) */
    /* Ensure body text is never invisible (e.g. inherited white on white); dark mode uses --color-text */
    color: var(--color-text, #333);
}

.post-body a {
    text-decoration: underline;
}

.post-body img,
.post-body video {
    max-width: 100%;
    height: auto;
}

/* Embeds/iframes (e.g. X/Twitter) must not overflow on mobile */
.post-body iframe,
.post-body embed,
.post-body object {
    max-width: 100%;
}

.post-username {
    padding: 0 5px;
    color: var(--color-text-on-primary) !important;
    font-size: 16px;
    font-weight: 700;
    font-family: Tahoma, Arial, sans-serif;
    text-shadow: 0 -1px 0 #668337;
}

/* OP badge: small inline pill marking replies authored by the thread's original poster.
   Rendered next to the username in both desktop sidebar (.logo-area.desktop-user-info)
   and mobile header (.mobile-user-line1) by message-user-info.jspf. Passive label;
   the adjacent username link already navigates to the profile.

   Color is themed per-site via inline CSS custom properties set in the JSPF:
     --op-bg       = Config.COLOR2 (site secondary)
     --op-bg-dark  = Config.COLOR2_LIGHT (40% lighter; pops on dark backgrounds)
   Hardcoded fallbacks are TigerNet purple in case the inline style is missing. */
.post-op-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-right: 2px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--op-bg, #522D80);
    border-radius: 9px;
    vertical-align: middle;
    cursor: help;
    text-shadow: none;
}

html.dark-mode .post-op-badge {
    background: var(--op-bg-dark, #7a4cb8);
}

/* OP corner medal: desktop-only avatar overlay marking replies by the thread's
   original poster. Mirrors the .mobile-premium-medal pattern (absolute-positioned
   inside .message-box__user-logo-inner) but anchored top-right so it doesn't
   collide with the premium medal at bottom-right. Mobile keeps the inline pill in
   .mobile-user-line1 instead and hides this. */
.post-op-corner-medal {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(28%, -28%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--op-bg, #522D80);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30),
                0 0 0 2px var(--color-bg, #fff);
    cursor: help;
    pointer-events: auto;
}

html.dark-mode .post-op-corner-medal {
    background: var(--op-bg-dark, #7a4cb8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55),
                0 0 0 2px var(--dm-bg-card, #1f1f24);
}

@media (max-width: 480px) {
    .post-op-corner-medal { display: none; }
}

/* Shared username length sizing (used by thread-messagebox-responsive.jspf on board + embeds). */
.post-username--medium {
    font-size: 12px;
}

.post-username--long {
    font-size: 11px;
}

/* Username links: never apply visited style in any mode — always looks unvisited */
a.post-username:link,
a.post-username:visited,
html.dark-mode a.post-username:link,
html.dark-mode a.post-username:visited {
    color: var(--color-text-on-primary) !important;
}

/* Normal members render username on a light background via header.jsp overrides.
   Avoid hardcoded colors and keep it readable. */
/* Member role (basic users) - lighter styling */
.member .logo-area {
    background: none !important;
    border-right: none;
    padding-top: 0;
}

.member a.post-username,
.member a.post-username:link,
.member a.post-username:visited {
    color: var(--site-primary) !important;
    text-shadow: none !important;
}

html.dark-mode .member a.post-username,
html.dark-mode .member a.post-username:link,
html.dark-mode .member a.post-username:visited {
    color: var(--forum-user-dark-text, var(--site-primary)) !important;
    text-shadow: none !important;
}

.member a.post-username:hover,
.member a.post-username:focus {
    color: var(--site-secondary-dark, var(--site-secondary)) !important;
    text-decoration: underline;
}

html.dark-mode .member a.post-username:hover,
html.dark-mode .member a.post-username:focus {
    color: var(--forum-user-dark-text-hover, var(--site-primary)) !important;
}

/* Mentions inside post body: no badge shadow (avoids chromatic fringing in dark mode), body-appropriate colors */
.post-body .post-username,
.post-body a.post-username:link,
.post-body a.post-username:visited {
    text-shadow: none !important;
}
.post-body .post-username,
.post-body a.post-username:link,
.post-body a.post-username:visited {
    color: var(--site-primary) !important;
}

html.dark-mode .post-body .post-username,
html.dark-mode .post-body a.post-username:link,
html.dark-mode .post-body a.post-username:visited,
html.dark-mode .post-body .member a.post-username,
html.dark-mode .post-body .member a.post-username:link,
html.dark-mode .post-body .member a.post-username:visited {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: none !important;
}

/* Mention chip in post body: scope .logo-area so it doesn't get sidebar width:100% and collapse the post layout */
.post-body .logo-area {
    width: auto !important;
    display: inline-block !important;
    border-right: none !important;
    vertical-align: baseline;
}
/* Mention chip in post body: in dark mode the default .logo-area elevated bg blends with page — give it visible contrast */
html.dark-mode .post-body .logo-area.utip {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px;
}

/* Light mode: text on orange (mention chip, premium sidebar) must be white for readability */
html:not(.dark-mode) .post-body .logo-area.utip .post-username,
html:not(.dark-mode) .post-body .logo-area.utip a.post-username:link,
html:not(.dark-mode) .post-body .logo-area.utip a.post-username:visited {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.member .logo {
    max-width: 50px;
    max-height: 50px;
}

.member .user-logo-c {
    padding-bottom: 0 !important;
    height: 75px !important;
}

/* Premium/Special role logo areas */
.white .logo-area,
.purple .logo-area,
.orange .logo-area,
.military .logo-area,
.admin .logo-area {
    border-top: 1px solid var(--color-border);
}

.pls-cnt {
    vertical-align: middle;
    font-size: 0.7em;
}

.last-post {
    font-family: verdana;
    font-size: 0.7em;
}


/* ===========================================
   USER INFO SIDEBAR
   =========================================== */

.user-info {
    border-right: 1px solid var(--color-border);
}

.user-logo-c {
    padding: 5px 0;
    vertical-align: middle;
    text-align: center;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: unset !important;
}

.user-info-table,
.user-logo-c {
    width: 115px;
}

.user-info-table {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-spacing: 0;
}

.user-rank {
    padding: 3px 0;
    text-align: center;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: var(--site-secondary);
    border-bottom: 1px solid var(--color-border);
}

.user-rank-number {
    display: inline-block;
    border-radius: 50%;
    padding: 3px 5px;
    font-size: var(--font-size-small);
    font-weight: bold;
    border: 2px solid var(--site-primary);
    background-color: var(--color-bg-surface);
    color: var(--site-primary);
    min-width: 15px;
    text-align: center;
}

html.dark-mode .user-rank-number {
    border-color: var(--forum-user-dark-badge-border, var(--site-primary));
    background-color: var(--forum-user-dark-badge-bg, var(--color-bg-surface));
    color: var(--forum-user-dark-text, var(--site-primary));
}

.desktop-user-meta-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    width: auto;
    margin: 0 auto;
    white-space: nowrap;
}

.desktop-user-meta-row .user-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.desktop-user-meta-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    vertical-align: middle;
}

.message-box__user-logo-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.message-box__user-logo-inner > a {
    display: inline-block;
    line-height: 0;
}

/* Desktop/tablet premium-style author cards should crop modern logos to the full 100x100 logo box. */
.message-box__user-info:not(.member) .message-box__user-logo .message-box__user-logo-inner > a {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.message-box__user-info:not(.member) .message-box__user-logo .logo,
.message-box__user-info:not(.member) .message-box__user-logo img.logo {
    display: block;
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

@media (min-width: 481px) {
    .message-box__user-info--premium-mobile {
        background: var(--color-bg-hover);
        background-image: none !important;
    }

    .message-box__user-info--premium-mobile .logo-area {
        background: none !important;
        background-image: none !important;
        border-right: none;
        padding-top: 0;
    }

    .message-box__user-info--premium-mobile .desktop-user-info.logo-area .post-username,
    .message-box__user-info--premium-mobile .desktop-user-info.logo-area a.post-username:link,
    .message-box__user-info--premium-mobile .desktop-user-info.logo-area a.post-username:visited {
        color: var(--site-primary-dark, #c45500) !important;
        text-shadow: none !important;
    }

    html.dark-mode .message-box__user-info--premium-mobile .desktop-user-info.logo-area .post-username,
    html.dark-mode .message-box__user-info--premium-mobile .desktop-user-info.logo-area a.post-username:link,
    html.dark-mode .message-box__user-info--premium-mobile .desktop-user-info.logo-area a.post-username:visited {
        color: var(--forum-user-dark-text, var(--site-primary)) !important;
        text-shadow: none !important;
    }

    .message-box__user-logo--premium-mobile {
        position: relative;
        overflow: visible;
        border-radius: 10px;
        background: transparent !important;
        box-shadow: none;
    }

    .message-box__user-logo--premium-mobile .message-box__user-logo-inner > a {
        border-radius: 8px;
        border: 3px solid rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.6);
        box-sizing: border-box;
    }

    .message-box__user-logo--premium-mobile .logo,
    .message-box__user-logo--premium-mobile img.logo {
        border-radius: 5px;
    }

    .message-box__user-logo--premium-mobile .mobile-premium-medal {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translate(32%, 32%);
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.72);
        z-index: 1;
    }

    .message-box__user-logo--premium-mobile .mobile-premium-medal__icon {
        color: var(--forum-premium-accent, var(--site-primary));
        font-size: 12px;
        line-height: 1;
    }

    html.dark-mode .message-box__user-logo--premium-mobile .mobile-premium-medal {
        background: linear-gradient(135deg, color-mix(in srgb, var(--forum-premium-accent, var(--site-primary)) 58%, #ffffff), var(--forum-premium-accent, var(--site-primary))) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.72) !important;
        text-shadow: none !important;
    }

    html.dark-mode .message-box__user-logo--premium-mobile .mobile-premium-medal__icon {
        color: #fff4ea !important;
        font-size: 12px !important;
        line-height: 1 !important;
        text-shadow: none !important;
    }
}

.logo {
    width: 100px;
    height: 100px;
}

#logo-area,
.logo-area {
    border-right: 1px solid var(--color-border);
    width: 100%;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align: center;
    font-weight: 700;
    background-image: linear-gradient(var(--site-primary-dark), var(--site-primary));
}

/* Desktop thread sidebar: keep long usernames on one line with ellipsis (avoid wrap in narrow column) */
.user-info .logo-area .utip {
    min-width: 0;
    overflow: hidden;
}
.user-info .logo-area a.post-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}


/* ===========================================
   USER ACTIONS
   =========================================== */

.action-ignore,
.action-tmail,
.action-follow {
    cursor: pointer;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
}

.action-tmail {
    background-image: url(https://2cic.nyc3.digitaloceanspaces.com/ts/images/forum/mail_write_20.png);
}


/* ===========================================
   PULSE RATING
   =========================================== */

.pulse-table {
    border-bottom: solid 1px var(--color-border);
    margin: 0;
    width: 100%;
}

.pulse-text {
    padding: 3px 0;
    text-align: center !important;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: var(--site-primary);
    padding-bottom: 0;
}

html.dark-mode .pulse-text {
    color: var(--forum-user-dark-text, var(--site-primary)) !important;
    text-shadow: none !important;
}

html:not(.dark-mode) .message-box__user-info.white .pulse-text,
html:not(.dark-mode) .message-box__user-info.purple .pulse-text,
html:not(.dark-mode) .message-box__user-info.orange .pulse-text,
html:not(.dark-mode) .message-box__user-info.premium .pulse-text,
html:not(.dark-mode) .message-box__user-info.ultimate .pulse-text,
html:not(.dark-mode) .message-box__user-info.free_orange .pulse-text,
html:not(.dark-mode) .message-box__user-info.certified_seller .pulse-text,
html:not(.dark-mode) .message-box__user-info.editor .pulse-text,
html:not(.dark-mode) .message-box__user-info.military .pulse-text,
html:not(.dark-mode) .message-box__user-info.admin .pulse-text {
    color: var(--site-primary-dark, #c45500) !important;
    font-weight: 700;
    text-shadow: none !important;
}

.pulse-image {
    text-align: right;
    width: 100px;
    height: 28px;
    background-image: url(https://2cic.nyc3.digitaloceanspaces.com/ts/images/forum/rate_percent.png);
    background-repeat: no-repeat;
    color: var(--color-text-on-primary);
}

/* ===========================================
   MESSAGE FOOTER BAR (Thread Messagebox)
   Used by: /forums/thread-messagebox.jsp
   =========================================== */

.message-footer-bar td {
    vertical-align: middle;
}

/* Icon buttons (desktop thread footer only; replaces legacy jQueryUI .button styling) */
.message-footer-bar .btn-message {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 0;
    border-radius: 4px;
    background-color: var(--site-primary);
    color: var(--color-text-on-primary) !important;
    text-decoration: none !important;
    border: 1px solid var(--gloss-highlight);
    box-shadow: 0 1px 2px var(--shadow-color-md);
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

.message-footer-bar .btn-message--glass {
    background: linear-gradient(var(--color-bg-surface), var(--color-bg-muted));
    border: 1px solid var(--color-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 1px var(--shadow-color-md);
    color: var(--color-text) !important;
}

.message-footer-bar .btn-message--glass:hover,
.message-footer-bar .btn-message--glass:focus {
    filter: none;
    background: linear-gradient(var(--color-bg-surface), var(--color-bg-muted));
}

.message-footer-bar .btn-message--glass:active {
    background: linear-gradient(var(--color-bg-muted), var(--color-bg-surface));
}

.message-footer-bar .btn-message--glass .material-icons {
    color: var(--site-featured-bg, var(--site-secondary, #e96f26)) !important; /* matches "award/share" icon tone */
}

.message-footer-bar .btn-message:hover,
.message-footer-bar .btn-message:focus {
    filter: brightness(1.06);
}

.message-footer-bar .btn-message:active {
    transform: translateY(1px);
}

.message-footer-bar .btn-message:focus-visible {
    outline: 2px solid var(--shadow-color-heavy);
    outline-offset: 2px;
}

.message-footer-bar .btn-message .material-icons {
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-on-primary) !important;
}

/* Clean icon button style - subtle background with active icons */
.message-footer-bar .btn-message--icon-only {
    background: var(--color-bg-light) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: none !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0 3px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.message-footer-bar .btn-message--icon-only:hover,
.message-footer-bar .btn-message--icon-only:focus {
    background: var(--color-bg-muted) !important;
    border-color: var(--color-border) !important;
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--shadow-color) !important;
}

.message-footer-bar .btn-message--icon-only:active {
    background: var(--color-bg-muted) !important;
    transform: translateY(0);
    box-shadow: none !important;
}

.message-footer-bar .btn-message--icon-only .material-icons {
    font-size: 28px;
    line-height: 1;
    color: var(--site-primary) !important;
    transition: color 0.15s ease;
}

.message-footer-bar .btn-message--icon-only:hover .material-icons,
.message-footer-bar .btn-message--icon-only:focus .material-icons {
    color: var(--site-secondary-dark, var(--site-primary)) !important;
}

/* Keep the icon/action area on one line */
.message-footer-bar .message-footer-actions {
    white-space: nowrap;
}

/* Prevent pulse controls from collapsing and wrapping */
.message-footer-bar .message-footer-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    min-width: 105px;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link,
.message-footer-bar .message-footer-pulse .message-footer-pulse-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    vertical-align: middle;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link {
    min-width: 28px;
    min-height: 28px;
    text-decoration: none !important;
    border-radius: 999px;
    color: var(--site-primary, #F56600) !important;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link .material-icons,
.message-footer-bar .message-footer-pulse .pulse-vote-link img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link:visited {
    color: var(--site-primary, #F56600) !important;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link.is-pressing {
    transform: scale(0.92);
}

.message-footer-bar .message-footer-pulse .pulse-vote-link.is-click-pop {
    animation: pulseVoteClickPop 0.18s ease-out;
}

/* Touch devices use long-press (450ms) to vote so a scroll-graze cannot misfire.
   This radial fill grows during the hold so the user sees the press progressing. */
@media (hover: none) and (pointer: coarse) {
    .message-footer-bar .message-footer-pulse .pulse-vote-link {
        position: relative;
        overflow: hidden;
    }
    .message-footer-bar .message-footer-pulse .pulse-vote-link::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: radial-gradient(circle at center,
            rgba(245, 102, 0, 0.45) 0%,
            rgba(245, 102, 0, 0.15) 60%,
            rgba(245, 102, 0, 0) 80%);
        transform: scale(0);
        transform-origin: center center;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }
    .message-footer-bar .message-footer-pulse .pulse-vote-link.is-pressing::before {
        animation: pulseVoteHoldFill 450ms ease-out forwards;
    }
    .message-footer-bar .message-footer-pulse .pulse-vote-link .material-icons {
        position: relative;
        z-index: 1;
    }
}

@keyframes pulseVoteHoldFill {
    0% {
        transform: scale(0);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Center-screen "Hold to vote" indicator. The thumb covers the button itself,
   so we mirror the press progress in the middle of the viewport where it's
   always visible. Created/managed by tnetForum.js (see showPulseHoldOverlay). */
.pulse-hold-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2147483600;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.pulse-hold-overlay.is-active {
    opacity: 1;
}

.pulse-hold-overlay__badge {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.82);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-hold-overlay__ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pulse-hold-overlay__ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 6;
}

.pulse-hold-overlay__ring-progress {
    fill: none;
    stroke: var(--site-primary, #f56600);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
}

.pulse-hold-overlay.is-active .pulse-hold-overlay__ring-progress {
    animation: pulseHoldRingFill var(--pulse-hold-fill-duration, 310ms) linear forwards;
}

.pulse-hold-overlay.is-complete .pulse-hold-overlay__ring-progress {
    stroke-dashoffset: 0;
}

/* Downvote — static color differentiation only (no animation cost).
   Red ring + soft red-tinted icon so the down overlay clearly reads
   "negative" vs the orange "affirmative" upvote. */
.pulse-hold-overlay.is-down .pulse-hold-overlay__ring-progress {
    stroke: #e74c3c;
}

.pulse-hold-overlay.is-down .pulse-hold-overlay__icon .material-icons {
    color: #ffd6d0;
}

.pulse-hold-overlay.is-down .pulse-hold-overlay__badge {
    background: rgba(48, 18, 18, 0.85);
}

/* Removal mode — user is undoing an existing vote. Ring starts FULL and
   drains to empty during the hold, visually reversing the cast animation. */
.pulse-hold-overlay.is-removing .pulse-hold-overlay__ring-progress {
    stroke-dashoffset: 0;
    stroke: rgba(255, 255, 255, 0.55);
}

.pulse-hold-overlay.is-active.is-removing .pulse-hold-overlay__ring-progress {
    animation: pulseHoldRingUnfill var(--pulse-hold-fill-duration, 310ms) linear forwards;
}

.pulse-hold-overlay.is-complete.is-removing .pulse-hold-overlay__ring-progress {
    stroke-dashoffset: 283;
}

.pulse-hold-overlay.is-removing .pulse-hold-overlay__icon .material-icons {
    opacity: 0.6;
    transition: opacity 0.18s ease;
}

.pulse-hold-overlay__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-hold-overlay__icon .material-icons {
    font-size: 44px;
    color: #fff;
    line-height: 1;
}

/* All completion flair (scale pops, icon pops, head-shake, color shifts,
   particle bursts, glows) was removed to confirm Chrome can run the
   long-press flow without any post-vote animation work backing up the
   rAF queue. Up/down differentiation now comes only from the icon
   itself (thumb_up vs thumb_down). */

.pulse-hold-overlay__label {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    background: rgba(20, 20, 20, 0.82);
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    white-space: nowrap;
}

@keyframes pulseHoldRingFill {
    0% { stroke-dashoffset: 283; }
    100% { stroke-dashoffset: 0; }
}

@keyframes pulseHoldRingUnfill {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 283; }
}

/* Pulse vote toast. Shared element used for two messages:
   - "Press & hold to vote" — when the user taps a vote button without
     holding long enough (educational prompt to teach the gesture).
   - "Please log in to vote" — when a logged-out user taps a vote button.
   getPulseTapToast() creates it; showPulseToastMessage(icon, msg) drives it. */
.pulse-tap-toast {
    position: fixed;
    bottom: calc(132px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translate(-50%, 18px);
    z-index: 2147483600;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 10px 16px 10px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pulse-tap-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pulse-tap-toast__icon {
    font-size: 18px !important;
    color: var(--site-primary, #f56600) !important;
    line-height: 1 !important;
}

.pulse-tap-toast__text {
    line-height: 1;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link .material-icons {
    color: inherit !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

.message-footer-bar .message-footer-pulse .pulse-vote-link.is-active .material-icons {
    color: var(--site-secondary-dark, var(--site-primary)) !important;
}

@media (hover: hover) and (pointer: fine) {
    .message-footer-bar .message-footer-pulse .pulse-vote-link:hover,
    .message-footer-bar .message-footer-pulse .pulse-vote-link:focus-visible {
        background: rgba(245, 102, 0, 0.10);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    }

    .message-footer-bar .message-footer-pulse .pulse-vote-link:hover .material-icons,
    .message-footer-bar .message-footer-pulse .pulse-vote-link:focus-visible .material-icons {
        color: var(--site-secondary-dark, var(--site-primary)) !important;
        transform: scale(1.05);
    }
}

.message-footer-bar .message-footer-pulse .message-footer-pulse-summary {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
}

@keyframes pulseVoteClickPop {
    0% {
        transform: scale(0.92);
    }
    55% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* Tap pulse area on touch devices to show who gave thumbs up/down (no hover on iPad) */
.message-footer-bar .js-pulse-tu-tip {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Pulse icon + percent: use inline-block so vertical-align applies (table-cell layout) */
.message-footer-bar .message-footer-pulse.aaapulse-image img,
.message-footer-bar .message-footer-pulse.aaapulse-image span[id^="pls-pct-"] {
    display: inline-block;
    vertical-align: middle;
}

.message-footer-bar .message-footer-pulse span[id^="pls-pct-"] {
    font-size: 18px;
}


/* ===========================================
   READ/UNREAD INDICATORS
   =========================================== */

.read,
.unread,
.updated {
    height: 9px;
    width: 9px;
    display: inline-block;
    margin-right: 3px;
}

.read {
    background: url(https://2cic.nyc3.digitaloceanspaces.com/ts/images/forum/r.gif) no-repeat 0;
}

.unread {
    background: url(https://2cic.nyc3.digitaloceanspaces.com/ts/images/forum/u.gif) no-repeat 0;
}

.updated {
    background: url(https://2cic.nyc3.digitaloceanspaces.com/ts/images/forum/up.gif) no-repeat 0;
}


/* ===========================================
   BOARD TOOLS
   =========================================== */

#board-tools {
    margin-top: 10px;
    margin-bottom: 10px;
}

.board-opt {
    display: inline-block;
    vertical-align: middle;
}

.board-opt > form {
    margin-bottom: 0;
}

.bj-cat,
.opt-heading {
    font-weight: 700;
    font-size: 1.2em;
    background-color: var(--site-primary);
    color: var(--color-text-on-primary);
    display: block;
    padding: 10px 16px;
    margin: 0;
    text-align: center;
}


.bj-forum {
    font-size: 1.1em;
}


/* ===========================================
   SCROLL PANES
   =========================================== */

.scroll-pane {
    width: 100%;
    overflow: auto;
    padding: 0;
    border-top: 1px solid var(--color-border);
    text-align: left;
    max-height: 150px;
}

.signature-scroll-pane {
    width: 100%;
    min-width: 0;
    max-height: 100px;
    overflow: hidden;
    box-sizing: border-box;
}

.signature {
    font-size: 1em;
    color: var(--color-text-secondary);
    border-top: 1px dashed var(--color-border);
    margin-top: 10px;
    padding-top: 5px;
}

.signature a {
    cursor: pointer;
    text-decoration: underline;
}

.signature p {
    margin: 0;
}


/* ===========================================
   AWARDS LIST
   =========================================== */

.awards-list {
    display: inline;
    vertical-align: middle;
}

.awards-list img {
    vertical-align: middle;
    height: 25px;
}

.full-awards {
    display: block;
    padding: 5px 0;
}

.full-awards img {
    vertical-align: middle;
    margin: 2px;
}


/* ===========================================
   MISC FORUM STYLES
   =========================================== */

.preview-container {
    margin-top: 10px;
}

.post-body .preview-container {
    max-width: 640px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.post-body .preview-container > a {
    display: block;
    background: #f8fafc;
    color: #1e293b;
}

.post-body .preview-container > a:hover,
.post-body .preview-container > a:focus {
    text-decoration: none;
    color: #0f172a;
}

.post-body .link-preview-img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    background: #0f172a;
}

.post-body .link-prev-body {
    padding: 12px 14px 14px;
}

.post-body .preview-container--compact .link-prev-body {
    padding-top: 14px;
}

.post-body .link-prev-site-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.post-body .link-prev-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex: 0 0 auto;
    background: #fff;
}

.post-body .link-prev-site {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #64748b;
}

.post-body .link-prev-title {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 1.08em;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.post-body .link-prev-desc {
    padding: 0;
    margin-top: 6px;
    font-size: 0.95em;
    line-height: 1.45;
    color: #475569;
}

/* URL / Open Graph link preview (JiveUtils.buildUrlPreview) — dark mode readability */
html.dark-mode .preview-container {
    border-color: var(--color-border, rgba(255, 255, 255, 0.14));
}
html.dark-mode .preview-container > a {
    background-color: var(--color-bg-card, #1e1e24);
    color: var(--color-text, #e2e8f0);
}
html.dark-mode .preview-container > a:hover,
html.dark-mode .preview-container > a:focus {
    color: var(--dm-text-secondary, #f1f5f9);
}
html.dark-mode .preview-container .link-prev-title {
    color: var(--color-text, #e2e8f0);
}
html.dark-mode .preview-container .link-prev-desc {
    color: var(--color-text-muted, rgba(226, 232, 240, 0.88));
}
html.dark-mode .post-body .preview-container {
    background: #1e1e24;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
html.dark-mode .post-body .preview-container > a {
    background: #1e1e24;
}
html.dark-mode .post-body .link-prev-site {
    color: rgba(226, 232, 240, 0.65);
}
html.dark-mode .post-body .link-prev-title {
    color: #f8fafc;
}
html.dark-mode .post-body .link-prev-desc {
    color: rgba(226, 232, 240, 0.82);
}

.poll {
    background-color: var(--site-secondary);
}

/* Board poll (view message page) — modern div-based layout */
.board-poll {
    border: 2px solid var(--site-primary, #333);
    border-radius: 6px;
    overflow: hidden;
    margin: 16px 0;
    max-width: 600px;
}
.board-poll__header {
    background: var(--site-primary, #333);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.board-poll__icon {
    font-size: 22px;
    color: var(--color-text-on-primary, #fff);
}
.board-poll__question {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-on-primary, #fff) !important;
    flex: 1;
}
.board-poll__results-link {
    font-size: 14px;
    color: var(--color-text-on-primary, #fff) !important;
    opacity: 0.85;
    white-space: nowrap;
}
.board-poll__results-link:hover {
    opacity: 1;
    text-decoration: underline;
}
.board-poll__options {
    padding: 10px 14px;
    background: var(--color-bg-light, #f8f8fa);
}
html.dark-mode .board-poll__options {
    background: var(--color-bg-card, #1e1e24);
}
/* Voting mode */
.board-poll__options--vote {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.board-poll__choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 16px;
}
.board-poll__choice:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.04));
}
html.dark-mode .board-poll__choice:hover {
    background: rgba(255,255,255,0.06);
}
.board-poll__choice input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--site-primary, #333);
    flex-shrink: 0;
}
.board-poll__choice .board-poll__choice-text {
    color: var(--color-text, #333);
    font-weight: 600;
}
.board-poll__actions {
    padding: 8px 14px 12px;
    background: var(--color-bg-light, #f8f8fa);
}
html.dark-mode .board-poll__actions {
    background: var(--color-bg-card, #1e1e24);
}
.board-poll__vote-btn {
    font-size: 15px;
    padding: 6px 20px;
}
/* Results mode */
.board-poll__options--results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.board-poll__result-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.board-poll__result-row .board-poll__choice-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #333);
}
.board-poll__bar-wrap {
    height: 22px;
    background: var(--color-border, #ddd);
    border-radius: 4px;
    overflow: hidden;
}
html.dark-mode .board-poll__bar-wrap {
    background: #333;
}
.board-poll__bar {
    height: 100%;
    background: var(--site-primary, #555);
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.4s ease;
}
.board-poll__vote-count {
    font-size: 13px;
    color: var(--color-text-secondary, #666);
}
.board-poll__total {
    font-size: 13px;
    color: var(--color-text-muted, #888);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border, #ddd);
}

.chatters,
a.chatters:link,
a.chatters:visited {
    font-family: Arial, Helvetica;
    font-size: 13px;
    color: var(--color-text-on-secondary);
    font-weight: 700;
    text-decoration: none;
}

a.chatters:hover {
    text-decoration: underline;
}

.hf {
    font-family: verdana, arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
}

.btn-small {
    padding: 0.2em 0.8em !important;
}

/* ===========================================
   POPULAR BOARD POSTS (Thread Footer Widget)
   Used by: /tiles/misc/front_popular_threads.jsp
   =========================================== */

.board-section-header {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%);
    color: var(--color-text-on-primary);
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.board-section-header a,
.board-section-header a:link,
.board-section-header a:visited {
    color: var(--color-text-on-primary) !important;
    text-decoration: none;
}

.board-section-header a:hover,
.board-section-header a:focus {
    text-decoration: underline;
}

/* Thread pages: Popular Threads widget
   Do not allow flex collapse on desktop when parent height is constrained. */
.popular-threads-widget-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 10px;
    margin-bottom: 15px;
}
.forum-main-content #board-messages.board-messages-popular-threads.scroll-pane-board {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
}

.forum-main-content #board-messages {
    background: var(--color-bg-surface);
    border-left: 1px solid var(--shadow-color);
    border-right: 1px solid var(--shadow-color);
    border-bottom: 1px solid var(--shadow-color);
    box-shadow: inset 0 2px 8px var(--shadow-color);
}

.forum-main-content #board-messages-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-bg-surface);
}

.forum-main-content #board-messages-list li {
    padding: 0;
    border-bottom: 1px solid var(--shadow-color);
    line-height: 1.4;
    background: var(--color-bg-surface);
}

/* Whole row clickable: link fills the list item */
.forum-main-content #board-messages-list li .board-messages-row-link {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}
.forum-main-content #board-messages-list li .board-messages-row-link:hover,
.forum-main-content #board-messages-list li .board-messages-row-link:focus {
    background-color: rgba(0, 0, 0, 0.03);
    text-decoration: none;
}
.forum-main-content #board-messages-list li.board-more-posts {
    padding: 10px 12px;
    cursor: pointer;
}
.forum-main-content #board-messages-list li.board-more-posts a:hover,
.forum-main-content #board-messages-list li.board-more-posts a:focus {
    cursor: pointer;
}

.forum-main-content #board-messages-list li:nth-child(odd) {
    background: var(--color-bg-hover);
}

.forum-main-content #board-messages-list li:last-child {
    border-bottom: none;
}

.forum-main-content #board-messages-list li:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Primary link (thread title) styling inside widget */
.forum-main-content #board-messages-list a,
.forum-main-content #board-messages-list a:link {
    color: var(--site-secondary);
    text-decoration: none;
}

.forum-main-content #board-messages-list > li > a:visited {
    color: #b26b41 !important;
}

.forum-main-content #board-messages-list a:hover,
.forum-main-content #board-messages-list a:focus {
    color: var(--site-secondary-dark, var(--site-secondary));
    text-decoration: underline;
}

/* Whole-row link: title uses link color, author uses secondary */
.forum-main-content #board-messages-list .board-messages-row-link .board-messages-title {
    color: var(--site-secondary);
}
.forum-main-content #board-messages-list .board-messages-row-link:visited .board-messages-title {
    color: #b26b41 !important;
}
.forum-main-content #board-messages-list .board-messages-row-link:hover .board-messages-title,
.forum-main-content #board-messages-list .board-messages-row-link:focus .board-messages-title {
    color: var(--site-secondary-dark, var(--site-secondary));
    text-decoration: underline;
}
.forum-main-content #board-messages-list .board-messages-row-link .front_author {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.forum-main-content #board-messages-list .front_author {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.forum-main-content #board-messages-list .front_author a,
.forum-main-content #board-messages-list .front_author a:link,
.forum-main-content #board-messages-list .front_author a:visited {
    color: inherit !important;
    text-decoration: none;
}

.forum-main-content #board-messages-list .front_author a:hover,
.forum-main-content #board-messages-list .front_author a:focus {
    text-decoration: underline;
}

/* Dark mode: keep board links readable (avoid site-brand red/orange combinations) */
html.dark-mode .forum-main-content #board-messages-list a,
html.dark-mode .forum-main-content #board-messages-list a:link {
    color: var(--color-text) !important;
}

html.dark-mode .forum-main-content #board-messages-list > li > a:visited {
    color: #b26b41 !important;
}

html.dark-mode .forum-main-content #board-messages-list a:hover,
html.dark-mode .forum-main-content #board-messages-list a:focus {
    color: #fff !important;
}

html.dark-mode .forum-main-content #board-messages-list .board-messages-row-link .board-messages-title {
    color: var(--color-text) !important;
}

html.dark-mode .forum-main-content #board-messages-list .board-messages-row-link:visited .board-messages-title {
    color: #b26b41 !important;
}

html.dark-mode .forum-main-content #board-messages-list .board-messages-row-link:hover .board-messages-title,
html.dark-mode .forum-main-content #board-messages-list .board-messages-row-link:focus .board-messages-title {
    color: #fff !important;
}


/* ===========================================
   END LEGACY JIVE STYLES
   =========================================== */

 .material-icons {
    width: unset;
    height: unset;
 }

/* ===========================================
   FORUM HEADER CONTROLS (Board Header)
   Ensures proper spacing and responsive behavior
   =========================================== */

#board-header {
    position: relative;
    z-index: 200;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    overflow: visible; /* Allow Forum Filter .MultiCheckBoxDetail dropdown to show below header */
}

/* On smaller screens, remove min-width and allow full responsiveness */
@media (max-width: 1024px) {
    #board-header {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Forum Filter dropdown must not be clipped */
    }
    
    #board-header-inner {
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Forum Filter dropdown must not be clipped */
    }
}

@media (max-width: 767px) {
    .jive-post-form__row {
        margin-bottom:0;
        margin-top:0;
    }

    /* iOS Safari zooms in on any input < 16px — set all post form interactive
       fields to exactly 16px so the zoom never fires */
    .jive-post-form__field #subject01,
    .jive-post-form__field #body01,
    .jive-postform-board-select {
        font-size: 22px !important;
    }

    /* Inline poll: full-width on mobile */
    .jive-post-form__poll-section {
        padding: 10px;
    }
    .jive-post-form__poll-section .jive-post-form__row {
        grid-template-columns: 1fr;
    }
    .jive-post-form__poll-section .jive-post-form__label {
        text-align: left;
    }
    .jive-post-form__poll-answer-row {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .jive-post-form__poll-answer-label {
        text-align: left;
        min-width: auto;
    }
    .jive-post-form__poll-answer-row input[type="text"] {
        font-size: 16px !important;
    }
    /* Board poll display: full width on mobile */
    .board-poll {
        max-width: 100%;
    }
    /* Preview buttons: stack on mobile */
    .jive-preview-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .jive-preview-buttons input {
        width: 100%;
    }

    #board-header {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #board-header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Two stripes: (1) New Topic + sort + gear  (2) board jump + forum filter
       Wrappers use display:contents so sort sits on row 1 without DOM changes. */
    #board-header-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 10px 8px !important;
        justify-items: start !important;
        align-items: center !important;
    }
    #board-header-inner .board-header__new-topic-link {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #board-header-inner .sort-by-form {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    #board-header-inner .sort-by-form .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #board-header-inner .settings-gear-mobile-top {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }
    #board-header-inner .board-header__index-mid {
        display: contents !important;
    }
    #board-header-inner .filter-sort-row {
        display: contents !important;
    }
    /* Category index without the Amphitheatre toggle: 6 equal tracks — row 2 is
       50% board jump | 50% Forums. */
    #board-header-inner:has(.forum-filter-container) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    #board-header-inner:has(.forum-filter-container) .board-header__new-topic-link {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container) .sort-by-form {
        grid-column: 3 / 6 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container) .settings-gear-mobile-top {
        grid-column: 6 / 7 !important;
        grid-row: 1 !important;
    }
    /* When the Amphitheatre toggle is present we switch to a 12-col grid so we
       can do a clean 50/25/25 split on row 2: board-jump gets enough room to
       show "Tiger Boards" un-truncated, forum filter gets enough room for
       "Forums ▼" without abbreviating to "For…", and the toggle pill (now a
       chip-style light-up, no checkbox, "Amphitheatre" only on mobile) gets
       a comfortable 25%. Row 1 placements are scaled to keep the same visual
       proportions (33/50/17 → 4/12, 6/12, 2/12). The double-:has() selector
       outweighs the single-:has() rule above so we don't need !important wars. */
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .board-header__new-topic-link {
        grid-column: 1 / 5 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .sort-by-form {
        grid-column: 5 / 11 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .settings-gear-mobile-top {
        grid-column: 11 / 13 !important;
        grid-row: 1 !important;
    }
    /* Row 2 split refined: board-opt gives back one column (~14px on a 360px
       viewport) so the Forums filter cell has room to render its label
       without truncation. Was 50/25/25 (6/3/3 of 12), now ~42/33/25 (5/4/3). */
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .board-opt {
        grid-column: 1 / 6 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .forum-filter-container {
        grid-row: 2 !important;
        grid-column: 6 / 10 !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .mix-amph-container {
        grid-row: 2 !important;
        grid-column: 10 / 13 !important;
        justify-self: stretch !important;
        align-self: center !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Original 50/50 row 2 split for non-college sites or any cat-index page
       that doesn't render the Amphitheatre toggle (still on the 6-col grid). */
    #board-header-inner:has(.forum-filter-container):not(:has(.mix-amph-container)) .board-opt {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
    }
    #board-header-inner:has(.forum-filter-container):not(:has(.mix-amph-container)) .forum-filter-container {
        grid-row: 2 !important;
        grid-column: 4 / 7 !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #board-header-inner:not(:has(.forum-filter-container)) .board-opt {
        grid-column: 1 / -1 !important;
    }

    #board-header-inner .board-header__new-topic-link {
        display: inline-flex !important;
        align-items: center !important;
    }
    
    #board-header-inner #new-topic-btn {
        width: auto !important;
        text-align: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 20px !important;
        height: 30px;
    }

    #board-header-inner #new-topic-btn .material-icons {
        font-size: 22px !important;
    }
    
    #board-header-inner .board-opt {
        grid-row: 2 !important;
        grid-column: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    #board-header-inner .board-opt select,
    #board-header-inner .board-opt .select2-container {
        width: 100% !important;
        max-width: none !important;
        font-size: 18px !important;
    }
    
    /* Board switcher: larger trigger and dropdown options on mobile */
    #board-header-inner .board-opt .select2-container--default .select2-selection--single {
        height: 56px !important;
        min-height: 56px !important;
        line-height: 56px !important;
        padding: 0 40px !important;
        font-size: 18px !important;
    }
    #board-header-inner .board-opt .select2-selection__rendered {
        font-size: 18px !important;
        line-height: 56px !important;
    }
    #board-header-inner .board-opt .select2-results__option {
        padding: 14px 16px !important;
        font-size: 20px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Hide top pager on message board index at mobile size */
    .responsive-pagination {
        display: none !important;
    }
    
    /* Forum filter + sort row (centered); ensure filter box stays visible and doesn't collapse */
    .forum-filter-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 10px !important;
    }
    
    .forum-filter-container form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .forum-filter-container select,
    .forum-filter-container .MultiCheckBox {
        min-width: 80px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }
    
    .forum-filter-container select {
        width: 100% !important;
    }
    
    /* Sort by form — #board-header-inner .sort-by-form overrides width for mobile grid row 1 */
    .sort-by-form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        gap: 8px !important;
    }

    .sort-by-form select {
        flex: 1 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .sort-by-form span {
        font-size: 16px !important;
    }
    
    /* Only the mobile top-row gear shows on mobile */
    #board-header-inner .settings-gear-desktop {
        display: none !important;
    }

    #board-header-inner .settings-gear-mobile-top {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
    }
    
    /* Fix forum filter dropdown being cut off */
    #board-header {
        overflow: visible !important;
    }
    
    #board-header-inner {
        overflow: visible !important;
    }
}

/* ===========================================
   MAIN LAYOUT WRAPPER
   Desktop: matches original table-based 2-column layout
   Mobile: stacks content above rail
   =========================================== */

.forum-main-layout {
    display: flex;
    width: 100%;
    margin-top: 0;
    padding-left: 0;
    gap: 16px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.forum-main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Modern card styling */
    background: var(--color-bg-column);
    border-radius: 8px;
    padding: 5px;
    box-shadow: var(--shadow-card);
    overflow: hidden; /* Clip children to rounded corners */
}

.forum-right-rail {
    flex: 0 0 320px;
    min-width: 300px;
    max-width: 320px;
    /* Use flexbox for widget spacing */
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--color-bg-column);
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--shadow-card);
}

/* Right rail content should be max 300px and centered */
.forum-right-rail > * {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* Hide legacy spacer divs - gap handles spacing now */
.forum-right-rail .spacer {
    display: none;
}

/* Ad spacing - smaller gap (10px) around ad elements */
.forum-right-rail .ad-spacing,
.forum-right-rail .col2-fanatics-ad {
    margin-top: -10px !important;
    margin-bottom: -10px !important;
}

/* Normalize widget container margins - let gap handle spacing */
.forum-right-rail .widget-container,
.forum-right-rail .updates-widget-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 300px !important;
}

/* Mobile: Stack content vertically, rail below */
@media (max-width: 767px) {
    .forum-main-layout {
        display: flex;
        flex-direction: column;
        padding: 0 5px 0 0;
        gap: 16px;
    }
    
    .forum-main-content {
        display: block;
        order: 1;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Popular Threads: on mobile parent is block so flex: 1 1 0 gives the list box 0 height.
       Size the wrapper and scroll pane to content so all messages are visible. */
    .forum-main-content .popular-threads-widget-wrapper {
        flex: none !important;
        min-height: 0;
    }
    .forum-main-content #board-messages.board-messages-popular-threads.scroll-pane-board {
        flex: none !important;
        height: auto !important;
        min-height: 0;
        overflow-y: visible !important;
    }

    .forum-right-rail {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        order: 2;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 12px 10px 14px;
    }

    .forum-right-rail > * {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .forum-right-rail .widget-container,
    .forum-right-rail .updates-widget-container {
        max-width: none !important;
    }

    .forum-right-rail .widget-divider-gradient {
        width: calc(100% - 28px) !important;
        margin: 0 auto;
    }
}

/* Tablet: Keep side-by-side layout with smaller rail */
@media (min-width: 768px) and (max-width: 1024px) {
    .forum-main-layout {
        gap: 16px;
        padding: 0 10px;
    }
    
    .forum-right-rail {
        width: 280px;
    }
    
    .thread-row__date .last-post {
        font-size: 10px;
    }
    
    .message-box__user-info {
        width: 100px;
    }
}

/* ===========================================
   THREAD LIST ROW (Category/Forum View)
   Desktop (768px+): table layout. Mobile: grid in @media (max-width: 767px) below.
   =========================================== */

@media (min-width: 768px) {
.thread-list-responsive {
    display: block;
    width: 100%;
    border: none;
    background: var(--color-bg-surface);
    min-width: 600px;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
}

.thread-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 130px 40px 114px;
    align-items: center;
    cursor: pointer;
}

.thread-row:hover {
    background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05)) !important;
}

html.dark-mode .thread-row:hover {
    background-color: var(--color-bg-hover, rgba(255, 143, 66, 0.08)) !important;
}

.thread-row.o {
    background-color: var(--color-bg-row-odd);
}

.thread-row.e {
    background-color: var(--color-bg-row-even);
}

/* Sticky posts & premium boards — gradient with site-colored left border accent.
   Premium styling scoped to category-view so it doesn't apply when viewing the forum itself. */
.thread-row.sticky,
.category-view .thread-row.premium-forum {
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.09) 0%, rgba(var(--site-primary-rgb), 0.035) 42%, var(--color-bg-surface) 100%) !important;
    border-left: 4px solid var(--site-primary);
}

/* Desktop board index: sticky/highlight rows should read as one full-width row. */
.thread-list-responsive .thread-row.sticky {
    display: block;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.thread-list-responsive .thread-row.sticky .thread-row__status,
.thread-list-responsive .thread-row.sticky .thread-row__avatar,
.thread-list-responsive .thread-row.sticky .thread-row__author,
.thread-list-responsive .thread-row.sticky .thread-row__replies,
.thread-list-responsive .thread-row.sticky .thread-row__date,
.thread-list-responsive .thread-row.sticky .awards-list,
.thread-list-responsive .thread-row.sticky .pls-cnt {
    display: none;
}

.thread-list-responsive .thread-row.sticky .thread-row__title {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 6px 12px;
    padding-left: 22px;
    margin: 0;
    box-sizing: border-box;
}

.thread-list-responsive .thread-row.sticky .thread-row__title .t-sub {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

/* All Messages (index mode) uses legacy .tree-table rows.
   Apply premium/sticky styling to root row only, not replies. */
.category-view .thread-list-responsive .tree-table.premium-forum > tbody > tr.root-message-row > td,
.thread-list-responsive .tree-table > tbody > tr.root-message-row.sticky > td {
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.09) 0%, rgba(var(--site-primary-rgb), 0.035) 42%, var(--color-bg-surface) 100%) !important;
    box-shadow: inset 4px 0 0 var(--site-primary);
}

/* All Messages root rows: subtle tint so top-level posts stand out from replies. */
.thread-list-responsive .tree-table > tbody > tr.root-message-row > td {
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.08) 0%, rgba(var(--site-primary-rgb), 0.03) 38%, var(--color-bg-surface) 100%);
    box-shadow: inset 3px 0 0 rgba(var(--site-primary-rgb), 0.65);
}

/* Fallback for pages where .thread-list-responsive or direct tbody structure differs.
   Also tint inner cells so nested table layout does not mask the row highlight. */
.tree-table tr.root-message-row > td,
.tree-table tr.root-message-row > td > table > tbody > tr > td {
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.08) 0%, rgba(var(--site-primary-rgb), 0.03) 38%, var(--color-bg-surface) 100%) !important;
}

/* Dark mode: use sticky vars so dark theme gradient applies */
html.dark-mode .thread-row.sticky,
html.dark-mode .category-view .thread-row.premium-forum {
    background: linear-gradient(90deg, var(--color-bg-sticky-start) 0%, var(--color-bg-sticky-mid) 40%, var(--color-bg-sticky-end) 100%) !important;
}

html.dark-mode .category-view .thread-list-responsive .tree-table.premium-forum > tbody > tr.root-message-row > td,
html.dark-mode .thread-list-responsive .tree-table > tbody > tr.root-message-row.sticky > td {
    background: linear-gradient(90deg, var(--color-bg-sticky-start) 0%, var(--color-bg-sticky-mid) 40%, var(--color-bg-sticky-end) 100%) !important;
}

html.dark-mode .thread-list-responsive .tree-table > tbody > tr.root-message-row > td {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, var(--color-bg-surface) 100%);
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.18);
}

html.dark-mode .tree-table tr.root-message-row > td,
html.dark-mode .tree-table tr.root-message-row > td > table > tbody > tr > td {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, var(--color-bg-surface) 100%) !important;
}

/* Sticky/premium post links: site-primary for contrast on tinted background; no visited style */
.jive-list tr.sticky a,
.jive-list tr.sticky a:link,
.jive-list tr.sticky a:visited,
.jive-list tr.sticky .jive-subject a,
.jive-list tr.sticky .jive-subject a:link,
.jive-list tr.sticky .jive-subject a:visited,
.thread-row.sticky a,
.thread-row.sticky a:link,
.thread-row.sticky a:visited,
.category-view .thread-row.premium-forum a,
.category-view .thread-row.premium-forum a:link,
.category-view .thread-row.premium-forum a:visited {
    color: var(--site-primary) !important;
}

.category-view .thread-list-responsive .tree-table.premium-forum > tbody > tr.root-message-row > td a,
.category-view .thread-list-responsive .tree-table.premium-forum > tbody > tr.root-message-row > td a:link,
.category-view .thread-list-responsive .tree-table.premium-forum > tbody > tr.root-message-row > td a:visited,
.thread-list-responsive .tree-table > tbody > tr.root-message-row.sticky > td a,
.thread-list-responsive .tree-table > tbody > tr.root-message-row.sticky > td a:link,
.thread-list-responsive .tree-table > tbody > tr.root-message-row.sticky > td a:visited {
    color: var(--site-primary) !important;
}

/* All Messages mode readability tune: slightly larger subject + roomier metadata line rhythm. */
.thread-list-responsive .tree-table .jive-author {
    font-size: 12px;
    line-height: 1.6;
}

.thread-list-responsive .tree-table .jive-author .tree-subject-link {
    color: var(--site-secondary) !important;
    font-size: 16px;
    line-height: 1.6;
    text-decoration: none;
}

.thread-list-responsive .tree-table .jive-author .tree-subject-link:visited,
html.dark-mode .thread-list-responsive .tree-table .jive-author .tree-subject-link:visited {
    color: #b26b41 !important;
}

.thread-list-responsive .tree-table .jive-author .jlp {
    font-size: 12px;
}

@media (max-width: 767px) {
    /* Mobile: increase contrast so root posts are easier to scan in long mixed threads. */
    .thread-list-responsive .tree-table > tbody > tr.root-message-row > td {
        background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.14) 0%, rgba(var(--site-primary-rgb), 0.05) 52%, var(--color-bg-surface) 100%);
        box-shadow: inset 4px 0 0 var(--site-primary);
    }

    .tree-table tr.root-message-row > td,
    .tree-table tr.root-message-row > td > table > tbody > tr > td {
        background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.14) 0%, rgba(var(--site-primary-rgb), 0.05) 52%, var(--color-bg-surface) 100%) !important;
    }

    html.dark-mode .thread-list-responsive .tree-table > tbody > tr.root-message-row > td {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 52%, var(--color-bg-surface) 100%);
        box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.28);
    }

    html.dark-mode .tree-table tr.root-message-row > td,
    html.dark-mode .tree-table tr.root-message-row > td > table > tbody > tr > td {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 52%, var(--color-bg-surface) 100%) !important;
    }
}

/* Status icon column - matches original td.b */
.thread-row__status {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    white-space: nowrap;
    padding: 10px 8px;
    text-align: center;
}

/* ===========================================
   GLOSSY ORB STATUS INDICATORS
   - Unread: Primary site color with shine
   - Read: Gray with shine
   - Updated: Diagonal split (gray/primary) with shine
   =========================================== */

/* Base orb styling */
.forum-orb {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px var(--shadow-color-heavy);
}

/* Glossy shine overlay - positioned at top */
.forum-orb::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 5px;
    height: 4px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50%;
}

/* Unread: Solid primary site color */
.forum-orb--unread {
    background: var(--site-primary, #F56600);
    background: radial-gradient(
        circle at 30% 30%,
        var(--site-primary-light, #ff8533) 0%,
        var(--site-primary, #F56600) 50%,
        var(--site-primary-dark, #cc5500) 100%
    );
}

/* Read: Solid gray */
.forum-orb--read {
    background: var(--color-orb-read);
    background: radial-gradient(
        circle at 30% 30%,
        var(--color-orb-read-light) 0%,
        var(--color-orb-read) 50%,
        var(--color-orb-read-dark) 100%
    );
}

/* Updated: Diagonal split - gray on top, primary color on bottom */
.forum-orb--updated {
    background: linear-gradient(
        60deg,
        var(--site-primary) 0%,
        var(--site-primary) 50%,
        var(--color-orb-read) 50%,
        var(--color-orb-read) 100%
    );
    position: relative;
}

/* Add subtle 3D depth to all orbs */
.forum-orb::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1px;
    right: 1px;
    height: 3px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
    border-radius: 0 0 50% 50%;
}

/* Legacy support - keep old classes working */
.thread-row__status .material-icons,
.thread-row__status .forum-status,
.forum-status.material-icons {
    font-size: 10px;
    width: 10px;
    height: 10px;
    line-height: 10px;
    vertical-align: middle;
}

.forum-status--unread {
    color: var(--site-primary, #F56600);
}

.forum-status--updated {
    color: var(--site-primary, #F56600);
}

.forum-status--read {
    color: var(--color-text-placeholder);
}

.forum-status {
    color: var(--color-text-placeholder);
}

/* Title column - matches original td.td-sub (flexible width) */
.thread-row__title {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}

.thread-row__title .t-sub {
    font-size: 18px;
    vertical-align: middle;
}

/* Link colors for thread list - matches .jive-list a styles */
.thread-list-responsive .thread-row__title .t-sub,
.thread-list-responsive .thread-row__title .t-sub:link {
    color: var(--site-secondary);
    text-decoration: none;
}

.thread-list-responsive .thread-row__title .t-sub:hover,
.thread-list-responsive .thread-row__title .t-sub:focus {
    color: var(--site-secondary-dark, var(--site-secondary));
    text-decoration: underline;
}

/* Author links - matches .jive-author a styles */
.thread-row__author a,
.thread-row__author a:link,
.thread-row__author a:visited {
    color: var(--color-text-secondary) !important;
    text-decoration: none;
}

html.dark-mode .thread-row__author a:link,
html.dark-mode .thread-row__author a:visited {
    color: var(--dm-text-muted) !important;
}

.thread-row__author a:hover,
.thread-row__author a:focus {
    color: var(--site-primary);
    text-decoration: underline;
}

/* Author column - matches original td.jive-author */
.thread-row__author {
    display: table-cell;
    vertical-align: middle;
    width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 6px;
    padding-right: 6px;
}

/* Replies count column - matches original td.jive-counts */
.thread-row__replies {
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}

/* Date column - matches original td.d */
.thread-row__date {
    display: table-cell;
    vertical-align: middle;
    width: 114px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 6px;
}

/* Last post info - smaller font size */
.thread-row__date .last-post {
    font-size: 10px;
    font-family: verdana;
    /*line-height: 1.4;*/
}

.thread-row__date .last-post a {
    white-space: nowrap;
}

/* No visited dimming on last-poster username links in thread list */
.thread-row__date .last-post a[id^="lpu-"]:link,
.thread-row__date .last-post a[id^="lpu-"]:visited {
    color: inherit !important;
}

/* Ensure date column has proper width */
.thread-row__date {
    min-width: 114px;
}

/* ===========================================
   MOBILE-ONLY ELEMENTS (hidden on desktop)
   =========================================== */

/* Avatar - hidden on desktop by default */
.thread-row__avatar {
    display: none;
}

/* Inline reply count in date row - hidden on desktop, shown on mobile */
.thread-row__meta-replies {
    display: none;
}

/* "Created by" label - hidden on desktop */
.created-by-label {
    display: none;
}

/* Last reply label - hidden on desktop (shows full info) */
.last-reply-by {
    display: inline;
}

} /* end @media (min-width: 768px) - desktop thread list */

/* ===========================================
   MOBILE: Card-style layout
   Uses CSS Grid: avatar left (col 1), title/author/date+replies center (col 2)
   Reply count is shown inline in the date row: "💬 N · date by: user"
   !important used so this layout wins over any other stylesheet or legacy table rules.
   =========================================== */
@media (max-width: 767px) {
    .thread-list-responsive .tree-table .jive-author .tree-subject-link {
        font-size: 16px;
        line-height: 1.6;
    }

    .forum-index-ad-placeholder {
        display: none;
    }

    .forum-main-content .thread-list-responsive,
    .thread-list-responsive {
        display: block !important;
        min-width: 0 !important;
        border: none;
        background: var(--color-bg-base);
        border: 1px solid var(--color-border);
        border-radius: 0 0 8px 8px;
    }
    
    /* Row: grid layout - must override table-row/table-cell from any source */
    .forum-main-content .thread-list-responsive .thread-row,
    .thread-list-responsive .thread-row,
    .thread-row {
        display: grid !important;
        grid-template-columns: 50px 1fr !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        gap: 2px 10px;
        padding: 14px 8px;
        min-height: 72px;
        border-bottom: 1px solid var(--color-border-light);
        background: var(--color-bg-surface);
        box-sizing: border-box;
    }
    
    .thread-row:last-child {
        border-bottom: none;
    }
    
    .thread-row.o {
        background: var(--color-bg-light);
    }
    
    .thread-row.sticky,
    .category-view .thread-row.premium-forum {
        background: linear-gradient(90deg, rgba(var(--site-primary-rgb), 0.09) 0%, rgba(var(--site-primary-rgb), 0.035) 42%, var(--color-bg-surface) 100%) !important;
        border-left: 4px solid var(--site-primary);
    }

    html.dark-mode .thread-row.sticky,
    html.dark-mode .category-view .thread-row.premium-forum {
        background: linear-gradient(90deg, var(--color-bg-sticky-start) 0%, var(--color-bg-sticky-mid) 40%, var(--color-bg-sticky-end) 100%) !important;
    }

    .thread-row.sticky .thread-row__title .t-sub,
    .thread-row.sticky .thread-row__title .t-sub:visited,
    .category-view .thread-row.premium-forum .thread-row__title .t-sub,
    .category-view .thread-row.premium-forum .thread-row__title .t-sub:visited {
        color: var(--site-primary) !important;
    }

    .thread-row.sticky {
        padding: 6px 16px !important;
        min-height: 0 !important;
        align-items: start;
        gap: 0 12px;
        grid-template-columns: 1fr !important;
    }

    .thread-row.sticky .thread-row__author,
    .thread-row.sticky .thread-row__date,
    .thread-row.sticky .awards-list,
    .thread-row.sticky .pls-cnt {
        display: none !important;
    }

    .thread-row.sticky .thread-row__avatar {
        display: none !important;
    }

    .thread-row.sticky .thread-row__title {
        grid-column: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0;
    }

    .thread-row.sticky .thread-row__title .t-sub {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word;
        line-height: 1.35;
    }
    
    .thread-row__status {
        display: none !important;
    }

    .news-thread-container .jive-message-list .post-body {
        font-size: 17px !important;
        line-height: 1.5;
    }
    
    .thread-row__avatar {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        align-self: start !important;
        padding-top: 0;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    
    .thread-row__avatar a {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .thread-row__avatar .thread-avatar {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 6px;
        object-fit: cover;
        background: var(--color-bg-muted);
        display: block;
    }
    
    .thread-row__meta-replies {
        display: flex !important;
        align-items: center;
        gap: 2px;
        color: var(--site-primary, #F56600);
        font-weight: bold;
        font-size: 13px;
        line-height: 1;
        flex-shrink: 0;
    }

    .thread-row__meta-replies .thread-meta-icon {
        font-size: 13px;
        line-height: 1;
        flex: 0 0 auto;
    }

    .thread-row__meta-replies .thread-meta-count {
        line-height: 1;
    }

    .thread-row__meta-replies .thread-meta-sep {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.9;
        margin: 0 4px 0 2px;
        flex: 0 0 auto;
    }
    
    .thread-row__title {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0;
        padding: 0;
        margin-bottom: 4px;
    }
    
    /* Subject link takes space and wraps; awards stay on same line as subject */
    .thread-row__title .t-sub {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.35;
        color: var(--color-text) !important;
        text-decoration: none;
        word-break: break-word;
        flex: 1 1 auto;
        min-width: 0;
    }

.thread-row:not(.sticky) .thread-row__title .t-sub:visited {
        color: #b26b41 !important;
    }
    
    .thread-row__title .t-sub:hover {
        text-decoration: underline;
    }
    
    /* Awards and pulse inline right after subject on first line */
    .thread-row__title .awards-list,
    .thread-row__title .pls-cnt {
        flex: 0 0 auto;
    }

    /* Hide awards container if it rendered no actual award images */
    .thread-row__title .awards-list:not(:has(img)) {
        display: none !important;
    }
    
    .thread-row__author {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0;
        padding: 0;
        font-size: 14px;
        color: var(--color-text-secondary);
        margin-bottom: 2px;
    }
    
    .thread-row__author::after {
        display: none;
    }
    
    .created-by-label {
        display: inline !important;
        color: var(--color-text-placeholder);
    }
    
    .thread-row__author a {
        color: var(--site-primary, #F56600) !important;
        font-weight: bold;
    }
    
    .thread-row__replies {
        display: none !important;
    }
    
    .thread-row__date {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
        grid-column: 2 !important;
        grid-row: 3 !important;
        min-width: 0;
        padding: 0;
        font-size: 13px;
        line-height: 1;
        color: var(--color-text-placeholder);
    }
    
    .thread-row__date .last-post {
        display: inline;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1;
        font-family: inherit;
    }
    
    .thread-row__date .last-post br {
        display: none;
    }
    
    .thread-row__date .last-post a {
        color: var(--color-text-placeholder);
    }
    
    .thread-row__date .last-post a:last-child {
        color: var(--color-text-placeholder);
    }
    
    .thread-row__date .last-post a:hover {
        color: var(--site-primary);
        text-decoration: underline;
    }
    
    .forum-right-rail > * {
        max-width: 100%;
    }
    
}

/* ===========================================
   MESSAGE BOX (Thread View)
   =========================================== */

/* Scroll offset so #messageID (after thumbs up/down) clears fixed header + Quick Links + board sub menu */
.message-box[id],
table.jive-box tr[id] {
    scroll-margin-top: 155px;
}

.message-box {
    display: flex;
    border: 1px solid var(--color-border);
    margin-bottom: 16px;
    background: var(--color-bg-surface);
}

.message-box__user-info {
    width: 115px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-hover);
}

.message-box__content {
    flex: 1;
    min-width: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.message-box__content .post-body {
    flex: 1;
    font-size: 18px;
    line-height: 1.55;
}

/* Embedded story thread: keep embed-specific thread styles centralized here (not in view-story.css). */
.news-thread-container .thread-embed-top-cta {
    background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%);
    border-radius: 8px 8px 0 0;
}

.news-thread-container .thread-embed-top-cta a {
    padding: 16px 20px;
    text-align: center;
    color: var(--color-text-on-primary) !important;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
    cursor: pointer;
}

.news-thread-container .thread-embed-top-cta a:hover {
    opacity: 0.9;
    text-decoration: none;
}

.news-thread-container .thread-embed-scroll {
    max-height: 1050px;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg-surface);
    padding-bottom: 8px;
}

.news-thread-container .thread-embed-bottom-affordance {
    margin-top: -58px;
    height: 58px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(44, 44, 44, 0.14) 45%, rgba(19, 19, 19, 0.38) 100%);
    box-shadow: inset 0 -14px 24px rgba(0, 0, 0, 0.28);
}

.news-thread-container .thread-embed-bottom-affordance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #f5f7fa;
    background: rgba(14, 14, 14, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.news-thread-container .thread-embed-bottom-affordance .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

html.dark-mode .news-thread-container .thread-embed-bottom-affordance {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(4, 4, 4, 0.36) 45%, rgba(0, 0, 0, 0.72) 100%);
    box-shadow: inset 0 -14px 24px rgba(0, 0, 0, 0.45);
}

html.dark-mode .news-thread-container .thread-embed-bottom-affordance-pill {
    background: rgba(10, 10, 10, 0.78);
    border-color: rgba(255, 255, 255, 0.24);
}

/* Story embed typography parity with board thread view. */
.news-thread-container .jive-message-list .jive-subject,
.news-thread-container .jive-message-list .jive-subject a,
.news-thread-container .jive-message-list .jive-subject a:link,
.news-thread-container .jive-message-list .jive-subject a:visited {
    font-family: Georgia, "Times New Roman", serif;
}

.news-thread-container .jive-message-list .post-body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px !important;
    line-height: 1.55;
}

/* In embedded thread mode, first visible reply should sit flush under the top CTA bar. */
.news-thread-container .thread-embed-scroll .jive-message-list:first-child .message-box {
    margin-top: 0 !important;
}

/* Root header-only card should not leave a gap before first visible reply. */
.news-thread-container .thread-embed-scroll .message-box--root {
    margin-bottom: 0 !important;
}

.news-thread-container .thread-embed-scroll .message-box--root + .jive-message-list .message-box,
.news-thread-container .thread-embed-scroll .message-box--root + .thread-indent .jive-message-list .message-box {
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------------------
   Threaded-view horizontal scroll wrapper.
   Deeply-indented replies in the threaded board view can exceed the visible
   width of the main content column (e.g. depth*30px of indent on desktop or
   depth*18px of margin on mobile). Without a scroll container, subject lines,
   post bodies and embeds get clipped at the right edge. This wrapper lets
   users swipe/scroll sideways instead. overflow-y stays visible so tooltips,
   emoji pickers and dropdowns inside messages are not clipped vertically.
   ------------------------------------------------------------------------- */
.thread-threaded-scroll {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* tabindex=0 makes this focusable so arrow keys scroll it; suppress the
       default focus outline on mouse clicks but keep a visible ring for
       keyboard users via :focus-visible. */
    outline: none;
}

/* Click-and-drag scroll: while a drag is in progress the JS adds
   .is-drag-scrolling to the container and .is-drag-scrolling-active to
   <body> so we can swap the cursor and suppress text selection for the
   duration of the drag (text regions like .post-body are already excluded
   in JS). */
.thread-threaded-scroll.is-drag-scrolling,
.news-thread-container .thread-embed-scroll.is-drag-scrolling {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

body.is-drag-scrolling-active {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

.thread-threaded-scroll:focus-visible,
.news-thread-container .thread-embed-scroll:focus-visible {
    outline: 2px solid #E87722;
    outline-offset: -2px;
    border-radius: 4px;
}

.news-thread-container .thread-embed-scroll {
    outline: none;
}

/* Desktop: the .thread-indent tables use width="100%" so content naturally
   squeezes as the indent spacer grows. Giving indented message lists a
   minimum readable width forces the table (and therefore the scroll wrapper)
   to overflow horizontally at deep nesting instead of crushing the post.
   Scoped to >=768px so the mobile min-width (280px) on .jive-message-list
   wins on narrow viewports. */
@media (min-width: 768px) {
    .thread-indent .jive-message-list {
        min-width: 480px;
    }
}

/* View-news embed: regular members use compact logos like normal thread view. */
.news-thread-container .message-box__user-info.member .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.member .message-box__user-logo .framed-box {
    width: 50px !important;
    height: 50px !important;
    overflow: hidden;
}

.news-thread-container .message-box__user-info.member .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.member .message-box__user-logo img.logo {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: cover;
}

/* Premium roles keep larger logos on desktop/threaded embed (same intent as main thread view). */
.news-thread-container .message-box__user-info.white .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.white .message-box__user-logo .framed-box,
.news-thread-container .message-box__user-info.purple .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.purple .message-box__user-logo .framed-box,
.news-thread-container .message-box__user-info.orange .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.orange .message-box__user-logo .framed-box,
.news-thread-container .message-box__user-info.military .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.military .message-box__user-logo .framed-box,
.news-thread-container .message-box__user-info.admin .message-box__user-logo .user-logo-c,
.news-thread-container .message-box__user-info.admin .message-box__user-logo .framed-box {
    width: 100px !important;
    height: 100px !important;
    overflow: hidden;
}

.news-thread-container .message-box__user-info.white .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.white .message-box__user-logo img.logo,
.news-thread-container .message-box__user-info.purple .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.purple .message-box__user-logo img.logo,
.news-thread-container .message-box__user-info.orange .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.orange .message-box__user-logo img.logo,
.news-thread-container .message-box__user-info.military .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.military .message-box__user-logo img.logo,
.news-thread-container .message-box__user-info.admin .message-box__user-logo .logo,
.news-thread-container .message-box__user-info.admin .message-box__user-logo img.logo {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: cover;
}

/* View-news embed author card: keep a single deep panel (avoid split/maroon block in dark mode). */
html.dark-mode .news-thread-container .message-box__user-info.member {
    background: var(--dm-bg-card) !important;
    border-right-color: var(--dm-border) !important;
}

/* Preserve premium-member styling in the embedded view-news thread. */
html.dark-mode .news-thread-container .message-box__user-info.white,
html.dark-mode .news-thread-container .message-box__user-info.purple,
html.dark-mode .news-thread-container .message-box__user-info.orange,
html.dark-mode .news-thread-container .message-box__user-info.military,
html.dark-mode .news-thread-container .message-box__user-info.admin {
    background: var(--dm-premium-bg) !important;
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.member .logo-area {
    background: var(--dm-bg-elevated) !important;
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.white .logo-area,
html.dark-mode .news-thread-container .message-box__user-info.purple .logo-area,
html.dark-mode .news-thread-container .message-box__user-info.orange .logo-area,
html.dark-mode .news-thread-container .message-box__user-info.military .logo-area,
html.dark-mode .news-thread-container .message-box__user-info.admin .logo-area {
    background: transparent !important;
    border-top-color: rgba(245, 102, 0, 0.45) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.member .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.member .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.member .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.member .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.member .user-info-table div {
    background: transparent !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.white .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.white .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.white .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.white .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.white .user-info-table div,
html.dark-mode .news-thread-container .message-box__user-info.purple .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.purple .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.purple .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.purple .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.purple .user-info-table div,
html.dark-mode .news-thread-container .message-box__user-info.orange .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.orange .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.orange .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.orange .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.orange .user-info-table div,
html.dark-mode .news-thread-container .message-box__user-info.military .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.military .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.military .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.military .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.military .user-info-table div,
html.dark-mode .news-thread-container .message-box__user-info.admin .user-info-table,
html.dark-mode .news-thread-container .message-box__user-info.admin .user-rank,
html.dark-mode .news-thread-container .message-box__user-info.admin .pulse-table,
html.dark-mode .news-thread-container .message-box__user-info.admin .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.admin .user-info-table div {
    background: transparent !important;
    border-color: rgba(245, 102, 0, 0.45) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.member .post-username,
html.dark-mode .news-thread-container .message-box__user-info.member a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.member a.post-username:visited {
    color: var(--forum-user-dark-text, var(--site-primary)) !important;
}

html.dark-mode .news-thread-container .message-box__user-info.white .post-username,
html.dark-mode .news-thread-container .message-box__user-info.white a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.white a.post-username:visited,
html.dark-mode .news-thread-container .message-box__user-info.purple .post-username,
html.dark-mode .news-thread-container .message-box__user-info.purple a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.purple a.post-username:visited,
html.dark-mode .news-thread-container .message-box__user-info.orange .post-username,
html.dark-mode .news-thread-container .message-box__user-info.orange a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.orange a.post-username:visited,
html.dark-mode .news-thread-container .message-box__user-info.military .post-username,
html.dark-mode .news-thread-container .message-box__user-info.military a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.military a.post-username:visited,
html.dark-mode .news-thread-container .message-box__user-info.admin .post-username,
html.dark-mode .news-thread-container .message-box__user-info.admin a.post-username:link,
html.dark-mode .news-thread-container .message-box__user-info.admin a.post-username:visited {
    color: #fff !important;
}

html.dark-mode .news-thread-container .message-box__user-info .desktop-user-info .user-rank {
    color: #fff !important;
    text-shadow: none !important;
}

html.dark-mode .news-thread-container .message-box__user-info.white .desktop-user-info .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.purple .desktop-user-info .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.orange .desktop-user-info .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.military .desktop-user-info .jive-description,
html.dark-mode .news-thread-container .message-box__user-info.admin .desktop-user-info .jive-description {
    color: #fff !important;
}

/* Desktop date/meta below subject — readable size, muted color */
.message-box__date-meta {
    font-size: 13px;
    color: var(--color-text-secondary, var(--site-secondary));
}

/* Desktop footer bar - proper padding and alignment */
.message-footer-bar {
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border-light);
    padding: 8px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.message-footer-bar .message-footer__left,
.message-footer-bar .message-footer__right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.message-footer-bar .message-footer__left {
    flex-wrap: wrap;
}

.message-footer-bar .message-footer__right {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Keep forum and news-embed footer bars visually consistent in dark mode. */
html.dark-mode .message-footer-bar {
    background: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .message-footer-bar td {
    background: transparent !important;
    color: var(--dm-text-secondary) !important;
}

/* ===========================================
   ROOT MESSAGE SPECIAL STYLING
   Differentiates the original post from replies
   Desktop: Just larger subject, no background change
   Mobile: Orange background with white text (handled in mobile section)
   =========================================== */

/* Root message - flex-wrap so title banner spans full width; rounded top so actions row + banner sit inside one card */
.message-box--root {
    flex-wrap: wrap;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

/* Actions row (New Topic, Watch Topic, Prev/Next) — first row inside root card */
.root-message-actions {
    flex: 0 0 100%;
    padding: 10px 12px 10px 10px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
html.dark-mode .root-message-actions {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.root-message-actions a,
.root-message-actions a:link,
.root-message-actions a:visited,
.root-message-actions .topics-next-prev {
    color: var(--color-text);
}

/* Root message title banner - full-width strip below actions row (no top radius; parent has it) */
.root-thread-title-banner {
    flex: 0 0 100%;
    background: linear-gradient(135deg, var(--site-primary-dark, #c45500) 0%, var(--site-primary, #F56600) 60%, #ff8f42 100%);
    padding: 10px 20px 10px 20px;
    border-radius: 0;
    border-bottom: 3px solid rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

/* Subtle diagonal-stripe texture overlay on the banner */
.root-thread-title-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -52deg,
        transparent,
        transparent 18px,
        rgba(255, 255, 255, 0.045) 18px,
        rgba(255, 255, 255, 0.045) 36px
    );
    pointer-events: none;
}

/* Title row wrapper — flex so subject and award pill align vertically centered */
.root-thread-title-banner__title-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
}

/* h1 as inline so the awards sibling flows right after the title text.
   Both h1 and .root-awards-list live inside a block .root-thread-title-banner__title-row,
   so inline h1 + inline awards = one continuous inline run. */
.root-thread-title-banner .jive-subject {
    display: inline;
    font-size: 28px;
    color: #fff;
    margin: 0;
    line-height: 1.6;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.3px;
}

/* Awards: follow right after the title; flex + align-items:center on parent handles vertical alignment */
.root-thread-title-banner .root-awards-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.root-thread-title-banner .root-awards-list img {
    vertical-align: middle;
}

/* Awards in banner: site secondary pill — anchors icon + count, contrasts with orange award icon */
.root-thread-title-banner .award-container {
    background: var(--site-secondary, #522D80);
    border-radius: 20px;
    padding: 2px 6px;
}
.root-thread-title-banner .award-static-image {
    background: none;
    border-radius: 0;
    padding: 0;
}
.root-thread-title-banner .award-count {
    color: rgba(255, 255, 255, 0.9);
}

/* Stats row: replies | views — second line of banner */
.root-thread-title-banner__stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.root-stats-icon {
    font-size: 16px !important;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 0.9;
}

.root-stats-sep {
    margin: 0 4px;
    opacity: 0.6;
}

/* HOF "View Original Thread" link inside the root banner stats row */
a.hof-original-link,
a.hof-original-link:link,
a.hof-original-link:visited {
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}
a.hof-original-link:hover,
a.hof-original-link:focus {
    color: #fff !important;
    text-decoration: underline;
    opacity: 1;
}

/* Reply button inside the root banner stats row — pushed right, secondary color.
   .jive-reply-tree-empty-root: same look for “Reply to this message” when the tree has no rows yet. */
a.forum-reply.root-stats-reply,
a.forum-reply.jive-reply-tree-empty-root,
a.forum-reply.root-stats-reply:link,
a.forum-reply.jive-reply-tree-empty-root:link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background-color: var(--site-secondary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: filter 0.15s ease;
}
a.forum-reply.root-stats-reply {
    margin-left: auto;
}
a.forum-reply.root-stats-reply:hover,
a.forum-reply.root-stats-reply:focus,
a.forum-reply.jive-reply-tree-empty-root:hover,
a.forum-reply.jive-reply-tree-empty-root:focus {
    filter: brightness(1.12);
    color: #fff !important;
    background-color: var(--site-secondary) !important;
}
a.forum-reply.root-stats-reply .material-icons,
a.forum-reply.jive-reply-tree-empty-root .material-icons {
    font-size: 17px !important;
    color: #fff !important;
    vertical-align: middle;
    transform: translateY(0.06em);
}

/* Root message subject bar is empty on desktop (title in banner, reply moved to stats row) — hide it */
@media (min-width: 768px) {
    .message-box--root .message-box__subject-bar {
        display: none !important;
    }
}

/* Root stats reply button is desktop-only — footer has its own reply button on mobile */
@media (max-width: 767px) {
    a.forum-reply.root-stats-reply,
    a.forum-reply.root-stats-reply:link,
    a.forum-reply.root-stats-reply:hover,
    a.forum-reply.root-stats-reply:focus {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .news-thread-container .thread-embed-top-cta a {
        font-size: 16px;
    }

    .news-thread-container .thread-embed-scroll {
        max-height: 75vh;
    }

    /* View-news embed mobile: premium user logos should be 50x50 (match thread mobile). */
    .news-thread-container .message-box__user-info.white .message-box__user-logo .user-logo-c,
    .news-thread-container .message-box__user-info.white .message-box__user-logo .framed-box,
    .news-thread-container .message-box__user-info.purple .message-box__user-logo .user-logo-c,
    .news-thread-container .message-box__user-info.purple .message-box__user-logo .framed-box,
    .news-thread-container .message-box__user-info.orange .message-box__user-logo .user-logo-c,
    .news-thread-container .message-box__user-info.orange .message-box__user-logo .framed-box,
    .news-thread-container .message-box__user-info.military .message-box__user-logo .user-logo-c,
    .news-thread-container .message-box__user-info.military .message-box__user-logo .framed-box,
    .news-thread-container .message-box__user-info.admin .message-box__user-logo .user-logo-c,
    .news-thread-container .message-box__user-info.admin .message-box__user-logo .framed-box {
        width: 50px !important;
        height: 50px !important;
    }

    .news-thread-container .message-box__user-info.white .message-box__user-logo .logo,
    .news-thread-container .message-box__user-info.white .message-box__user-logo img.logo,
    .news-thread-container .message-box__user-info.purple .message-box__user-logo .logo,
    .news-thread-container .message-box__user-info.purple .message-box__user-logo img.logo,
    .news-thread-container .message-box__user-info.orange .message-box__user-logo .logo,
    .news-thread-container .message-box__user-info.orange .message-box__user-logo img.logo,
    .news-thread-container .message-box__user-info.military .message-box__user-logo .logo,
    .news-thread-container .message-box__user-info.military .message-box__user-logo img.logo,
    .news-thread-container .message-box__user-info.admin .message-box__user-logo .logo,
    .news-thread-container .message-box__user-info.admin .message-box__user-logo img.logo {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
}

/* Watch button text: full label on desktop, short label on mobile */
.watch-btn-short { display: none; }

/* Watch Topic button — styled to match new-topic-btn area (same height as #new-topic-btn) */
.watch-topic-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    border: 2px solid var(--site-primary, #F56600);
    color: var(--site-primary, #F56600);
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
    min-height: 38px;
}

.watch-topic-btn:hover,
.watch-topic-btn:focus {
    background: var(--site-primary, #F56600);
    color: #fff;
    text-decoration: none;
}

.watch-topic-btn--watching {
    background: var(--site-primary, #F56600);
    color: #fff;
}

.watch-topic-btn--watching:hover,
.watch-topic-btn--watching:focus {
    background: var(--site-primary-dark, #c45500);
    border-color: var(--site-primary-dark, #c45500);
}

/* Icon always matches button text (visible in light and dark) */
.watch-topic-btn .material-icons,
.watch-topic-btn--watching .material-icons {
    color: inherit !important;
}

/* Light mode: actions row may have light background — ensure watch button icon is visible */
html:not(.dark-mode) .root-message-actions .watch-topic-btn {
    color: var(--site-primary, #F56600) !important;
    border-color: var(--site-primary, #F56600) !important;
}
html:not(.dark-mode) .root-message-actions .watch-topic-btn .material-icons {
    color: var(--site-primary, #F56600) !important;
}
html:not(.dark-mode) .root-message-actions .watch-topic-btn--watching {
    background: var(--site-primary, #F56600) !important;
    color: #fff !important;
    border-color: var(--site-primary, #F56600) !important;
}
html:not(.dark-mode) .root-message-actions .watch-topic-btn--watching .material-icons {
    color: #fff !important;
}

html.dark-mode .watch-topic-btn {
    border-color: var(--dm-premium-bg-end);
    color: var(--dm-premium-bg-end);
}
html.dark-mode .watch-topic-btn:hover,
html.dark-mode .watch-topic-btn:focus {
    background: var(--dm-premium-bg) !important;
    border-color: var(--dm-premium-bg-end) !important;
    color: #fff;
}

html.dark-mode .watch-topic-btn--watching {
    background: var(--dm-premium-bg) !important;
    border-color: var(--dm-premium-bg-end) !important;
    color: #fff;
}
html.dark-mode .watch-topic-btn--watching:hover,
html.dark-mode .watch-topic-btn--watching:focus {
    background: var(--dm-premium-bg-end) !important;
    border-color: var(--dm-premium-bg-end) !important;
}

/* Dark mode: New Topic button — override inline background with dm-premium-bg */
html.dark-mode #new-topic-btn {
    background: var(--dm-premium-bg) !important;
    border-color: transparent !important;
    color: #fff !important;
}
html.dark-mode #new-topic-btn:hover,
html.dark-mode #new-topic-btn:focus {
    background: var(--dm-premium-bg-end) !important;
}
html.dark-mode #new-topic-btn .material-icons,
html.dark-mode #new-topic-btn span {
    color: #fff !important;
}

/* Dark mode: mobile Reply button */
html.dark-mode .forum-reply--mobile {
    background: var(--dm-premium-bg) !important;
}
html.dark-mode .forum-reply--mobile:hover,
html.dark-mode .forum-reply--mobile:focus {
    background: var(--dm-premium-bg-end) !important;
}

/* Dark mode: same gradient looks fine; just ensure text stays crisp */
html.dark-mode .root-thread-title-banner {
    border-bottom-color: rgba(0, 0, 0, 0.35);
}

/* Desktop subject bar: base layout */
.message-box__subject-bar {
    gap: 12px;
}

/* Reply (non-root) subject bar — light gray so header reads vs white body */
.message-box:not(.message-box--root) .message-box__subject-bar {
    background-color: #efefef;
    padding: 8px 12px;
    border-radius: 5px 5px 0 0;
}

@media (min-width: 768px) {
    /* Desktop reply header: subject on row one, then date -> awards -> Reply on row two. */
    .message-box:not(.message-box--root) .message-box__subject-bar > div:first-child {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject {
        font-size: 20px;
        margin: 0;
        width: auto;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Flatten the wrapper so its children can occupy their own grid cells. */
    .message-box:not(.message-box--root) .message-box__subject-bar .message-box__date-meta {
        display: contents;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .message-box__date-text {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        white-space: nowrap;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .awards-list {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        max-width: none;
        padding: 0;
        margin: 0;
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    /* Tighten reply-header award pills a bit without affecting awards elsewhere. */
    .message-box:not(.message-box--root) .message-box__subject-bar .award-container {
        display: inline-flex;
        align-items: center;
        padding: 2px 3px;
        margin-top: 0;
        border-radius: 8px;
        line-height: 1;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .award-static-image {
        width: 21px !important;
        height: 21px !important;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .award-count {
        font-size: 13px;
        line-height: 1;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar:not(:has(.awards-list)) .message-box__date-text {
        grid-column: 1 / 4;
    }

    .message-box:not(.message-box--root) .message-box__subject-bar .message-box__date-meta .forum-reply--desktop {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
        align-self: center;
    }
}

/* "In reply to" jump link: make intent obvious and keep it compact. */
.message-box__date-text .message-box__reply-to-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}
.message-box__date-text .message-box__reply-to-subject {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 19em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 102, 0, 0.45);
    background: rgba(245, 102, 0, 0.08);
    color: var(--site-primary, #F56600);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: bottom;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.message-box__date-text .message-box__reply-to-subject .material-icons {
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}
.message-box__date-text .message-box__reply-to-label {
    display: inline-block;
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message-box__date-text .message-box__reply-to-subject:hover,
.message-box__date-text .message-box__reply-to-subject:focus {
    background: rgba(245, 102, 0, 0.16);
    border-color: rgba(245, 102, 0, 0.72);
    box-shadow: 0 0 0 2px rgba(245, 102, 0, 0.18);
    outline: none;
}

/* Briefly highlight a jumped-to reply. */
.message-box.message-box--reply-jump-highlight {
    box-shadow: 0 0 0 3px rgba(245, 102, 0, 0.62), 0 10px 28px rgba(245, 102, 0, 0.24);
    background: linear-gradient(0deg, rgba(245, 102, 0, 0.08), rgba(245, 102, 0, 0.08)), var(--color-bg-surface, transparent);
    transition: box-shadow 0.28s ease, background-color 0.28s ease;
}

/* Floating affordance to return to the prior reading position after a parent jump. */
.reply-jump-back-affordance {
    position: fixed;
    right: 12px;
    /* Keep above desktop adhesion ad (90px) with breathing room */
    bottom: 102px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(245, 102, 0, 0.74);
    background: rgba(22, 22, 26, 0.95);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}
.reply-jump-back-affordance .material-icons {
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}
.reply-jump-back-affordance:hover,
.reply-jump-back-affordance:focus {
    border-color: rgba(245, 102, 0, 0.95);
    box-shadow: 0 0 0 2px rgba(245, 102, 0, 0.24), 0 8px 26px rgba(0, 0, 0, 0.34);
    outline: none;
}
html.dark-mode .reply-jump-back-affordance {
    background: rgba(8, 8, 12, 0.96);
}

@media (max-width: 767px) {
    .reply-jump-back-affordance {
        right: 10px;
        /* Keep above tallest (100px) mobile adhesion ad + iOS safe area inset */
        bottom: calc(env(safe-area-inset-bottom, 20px) + 108px);
        padding: 6px 10px;
    }
}

/* Root message - larger subject on desktop (for non-root h1/h2 subject lines) */
.message-box--root .jive-subject {
    font-size: 22px;
}

.message-box--root .message-box__subject-bar {
    background: var(--site-primary, #F56600);
    padding: 8px 12px;
    margin-bottom: 0;
    border-radius: 0;
}

.message-box--root .message-box__subject-bar .jive-subject {
    font-size: 19px;
    color: var(--color-text-on-primary);
    line-height: 1.3;
}

.message-box--root .message-box__subject-bar .award-static-image {
    background-color: var(--color-bg-surface);
    border-radius: 4px;
    padding: 1px;
}

.message-box--root .message-box__subject-bar .awards-list, .message-box--root .message-box__date-meta, .message-box--root .award-count {
    color: var(--color-text-on-primary);
}

/* Root message date is shown in the title banner stats row — hide the duplicate in the subject bar */
.message-box--root .message-box__subject-bar .message-box__date-meta {
    display: none;
}

/* Award count number sits inside light gray .award-container in light mode — keep it dark for contrast on #eee */
.message-box--root .message-box__subject-bar .award-container .award-count {
    color: #333 !important;
}
/* Dark mode: award-container background is now dark, so award-count must be light */
html.dark-mode .message-box--root .message-box__subject-bar .award-container .award-count {
    color: var(--dm-text-primary) !important;
}

/* Dark mode: thread header — award-count (thumbs up/down, awards number) and date use light text */
html.dark-mode .message-box--root .message-box__subject-bar .awards-list,
html.dark-mode .message-box--root .message-box__subject-bar .awards-list .material-icons,
html.dark-mode .message-box--root .message-box__subject-bar .message-box__date-meta {
    color: var(--dm-text-primary) !important;
}
/* Override awards.css .award-count { color: #555 } so counts are readable in dark mode */
html.dark-mode .award-count {
    color: var(--dm-text-primary) !important;
}

/* Dark mode: reply (non-root) subject bar — use dark background so subject/date stay readable */
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar {
    background-color: var(--color-bg-surface);
}
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject,
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject a,
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject a:link,
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject a:visited,
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .message-box__date-meta {
    color: var(--dm-text-primary) !important;
}
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject a:hover,
html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject a:focus {
    color: var(--dm-text-secondary, var(--dm-text-primary)) !important;
    text-decoration: underline;
}

/* Dark mode: use same (lighter) background for all thread post bodies — no alternating stripe */
html.dark-mode .jive-message-list .e {
    background-color: var(--color-bg-row-odd);
}

/* Dark mode: post card borders — --dm-border is nearly invisible against the dark card
   background. Use border-light for all sides and a faint orange left-edge accent so
   cards feel grounded instead of floating.
   !important needed to beat html.dark-mode .jive-box { border-color: !important }
   in header.jsp (inline style, same specificity, loaded before this file). */
html.dark-mode .message-box {
    border-color: var(--dm-border-light) !important;
    border-left: 2px solid rgba(var(--site-primary-rgb), 0.4) !important;
}

/* Suppress tr:hover td row-hover from common.css on the layout tables that wrap message
   cards (.thread-indent) AND on any child tables inside .message-box (polls, awards, etc.). */
.thread-indent > tbody > tr:hover > td,
.message-box tr:hover td {
    background-color: transparent !important;
}

/* Reply button: never use visited style (all modes + dark) */
.reply-button {
    color: #fff !important;
}
.reply-button .material-icons {
    color: #fff !important;
}

/* Reply button icon: ensure visible in dark mode (fixes orange-on-orange in thread footer) */
html.dark-mode a.forum-reply .material-icons,
html.dark-mode a.forum-reply:hover .material-icons,
html.dark-mode a.forum-reply:focus .material-icons {
    color: #fff !important;
}
html.dark-mode .reply-button .material-icons {
    color: #fff !important;
}

/* Reply button in subject bar - purple with white text (matches root post Reply) */
.message-box__subject-bar a.forum-reply {
    background-color: var(--site-secondary-dark, var(--site-secondary, #522D80)) !important;
    color: #fff !important;
    padding: 6px 12px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}
/* Match root-stats-reply icon size and vertical alignment so subject-bar Reply looks identical */
.message-box__subject-bar a.forum-reply .material-icons {
    color: #fff !important;
    font-size: 17px !important;
    transform: translateY(0.06em);
}
.message-box__subject-bar a.forum-reply:hover,
.message-box__subject-bar a.forum-reply:focus {
    background-color: var(--site-secondary-dark, var(--site-secondary, #522D80)) !important;
    color: #fff !important;
    filter: brightness(1.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.message-box__subject-bar a.forum-reply:hover .material-icons,
.message-box__subject-bar a.forum-reply:focus .material-icons {
    color: #fff !important;
}

/* Subject bar reply: dark mode — same purple + white, brighter hover */
html.dark-mode .message-box__subject-bar a.forum-reply {
    background-color: var(--site-secondary-dark, var(--site-secondary, #522D80)) !important;
    color: #fff !important;
}
html.dark-mode .message-box__subject-bar a.forum-reply .material-icons {
    color: #fff !important;
}
html.dark-mode .message-box__subject-bar a.forum-reply:hover,
html.dark-mode .message-box__subject-bar a.forum-reply:focus {
    background-color: var(--site-secondary-dark, var(--site-secondary, #522D80)) !important;
    color: #fff !important;
    filter: brightness(1.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.dark-mode .message-box__subject-bar a.forum-reply:hover .material-icons,
html.dark-mode .message-box__subject-bar a.forum-reply:focus .material-icons {
    color: #fff !important;
}

/* Hide mobile-only elements on desktop/tablet */
@media (min-width: 768px) {
    .forum-reply--mobile,
    a.forum-reply--mobile,
    a.forum-reply.forum-reply--mobile,
    .message-footer-bar .forum-reply--mobile,
    .message-footer__left .forum-reply--mobile {
        display: none !important;
    }
}

/* Show desktop reply button on desktop/tablet */
.forum-reply--desktop {
    display: inline-flex;
    align-items: center;
}

.forum-reply--desktop .material-icons {
    color: var(--color-text-on-primary);
    transform: translateY(0.06em);
}

.message-box__thread-stats {
    display: none; /* Hidden on desktop, shown on mobile */
}

.message-box__edit-icon {
    display: none; /* Hidden on desktop, shown on mobile */
}

/* Hide mobile user info layout on desktop */
.mobile-user-line1,
.mobile-user-line2 {
    display: none;
}

/* ===========================================
   MOBILE: Legacy-style Thread Message Layout
   Matches old mobile forum structure exactly
   Uses display:contents + order to reorder: Subject → User Strip → Body → Footer
   =========================================== */
@media (max-width: 767px) {
    /* Main container - card style.
       overflow: visible lets any overflow propagate up to .forum-main-content (overflow-x:auto)
       so users can swipe horizontally on deeply nested replies. Border-radius still renders
       visually via the border itself; only corner-clipping of content is lost (negligible). */
    .forum-main-content {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .message-box {
        display: flex;
        flex-direction: column;
        border: 2px solid var(--color-border);
        border-radius: 8px;
        overflow: visible;
        margin-bottom: 10px;
        background: var(--color-bg-surface);
        box-shadow: 0 1px 3px var(--shadow-color);
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Threaded view: collapse the table-based indent on mobile and use CSS margin instead.
       20px per nesting level (vs 30px desktop) keeps replies readable on narrow screens. */
    .thread-indent,
    .thread-indent > tbody,
    .thread-indent > tbody > tr {
        display: block !important;
        width: 100% !important;
    }
    .thread-indent > tbody > tr > td:first-child {
        display: none !important;
    }
    .thread-indent > tbody > tr > td:last-child {
        display: block !important;
        width: 100% !important;
    }
    /* Indented replies keep a readable minimum width and overflow to the right
       instead of shrinking; .forum-main-content has overflow-x:auto so users
       can swipe horizontally at deep nesting levels. */
    .jive-message-list {
        margin-left: calc(var(--depth, 0) * 18px);
        width: auto !important;
        min-width: 280px;
        max-width: none !important;
        overflow: visible !important;
    }
    
    /* Let content children participate directly in flex ordering */
    .message-box__content {
        display: contents;
    }
    
    /* ----- SUBJECT HEADER BAR ----- */
    .message-box__subject-bar {
        order: 1;
        padding: 5px 5px 0 5px;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid var(--color-border-light);
        display: block !important;
        margin: 0 !important;
    }
    .message-box:not(.message-box--root) .message-box__subject-bar {
        background: #efefef !important;
    }
    html.dark-mode .message-box:not(.message-box--root) .message-box__subject-bar {
        background: var(--color-bg-surface) !important;
    }
    
    /* Single-line layout: subject then awards (override desktop flex + width:100% that put awards on own row) */
    .message-box:not(.message-box--root) .message-box__subject-bar > div:first-child {
        display: block;
    }
    .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject {
        width: auto;
    }
    html:not(.dark-mode) .message-box:not(.message-box--root) .message-box__subject-bar .jive-subject {
        color: var(--color-text) !important;
    }
    .message-box__subject-bar .jive-subject {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: bold;
        color: var(--site-primary, #F56600);
        text-shadow: none;
        line-height: 1.4;
        word-break: break-word;
    }

    .message-box__subject-bar .jive-subject.jive-subject--reply-default {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    .message-box__subject-bar .jive-subject a {
        color: var(--color-text-on-primary);
    }
    
    /* Awards list on same line as subject, right after it */
    .message-box__subject-bar .awards-list {
        display: inline;
        vertical-align: middle;
        margin-left: 6px;
    }
    .message-box__subject-bar .awards-list:empty {
        display: none !important;
    }
    
    /* Edit icon - shown on mobile for author's posts */
    .message-box__edit-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        color: var(--color-text-on-primary);
        vertical-align: middle;
    }
    
    .message-box__edit-icon .material-icons {
        font-size: 18px;
        color: var(--color-text-on-primary);
    }
    
    /* Thread stats line (views | replies | watch) - shown on mobile for root message */
    .message-box__thread-stats {
        display: block;
        padding: 5px 0;
        color: var(--site-secondary);
        font-size: 12px;
    }
    
    .message-box__thread-stats a {
        color: var(--color-text-on-primary);
        text-decoration: underline;
    }
    
    /* On mobile hide only the date (shown in user strip); keep "in reply to" visible for context */
    .message-box__subject-bar .message-box__date-only {
        display: none !important;
    }
    
    /* Hide desktop (purple) reply button on mobile — selector must match or beat .message-box__subject-bar a.forum-reply { display: inline-flex !important } */
    .message-box__subject-bar a.forum-reply.forum-reply--desktop,
    .forum-reply--desktop {
        display: none !important;
    }
    
    /* Read status icons */
    .message-box__subject-bar .img {
        vertical-align: middle;
    }
    
    /* ----- USER INFO STRIP ----- */
    /* Positioned below subject bar via order */
    .message-box__user-info {
        order: 2;
        width: 100%;
        border-right: none;
        border-bottom: none;
        background: var(--color-bg-surface);
        padding: 5px;
        padding-bottom: 3px;
        display: flex;
        align-items: flex-start;
        gap: 6px;   
    }
    
    /* Avatar styling - tight to left edge */
    .message-box__user-logo {
        flex-shrink: 0;
        width: 50px !important;
        margin: 0;
        padding: 0;
    }
    
    .message-box__user-logo .logo,
    .message-box__user-logo img.logo {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px;
        max-height: 50px;
        object-fit: cover;
    }
    
    .message-box__user-logo .message-box__user-logo-inner > a {
        width: 50px !important;
        height: 50px !important;
        overflow: hidden;
    }
    
    .message-box__user-logo .user-logo-c,
    .message-box__user-logo .framed-box,
    .message-box__user-info .user-logo-c {
        width: 50px !important;
        height: 50px !important;
        padding: 0;
        margin: 0;
    }
    
    /* Override desktop 115px rule */
    .message-box__user-info .user-info-table,
    .message-box__user-info .user-logo-c {
        width: auto !important;
    }
    
    /* User details beside avatar - two stacked rows */
    .message-box__user-details {
        flex: 1;
        min-width: 0;
        text-align: left;
        padding-left: 3px;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    /* Hide desktop user info on mobile */
    .message-box__user-details .desktop-user-info {
        display: none !important;
    }
    
    /* Row 1: username + date */
    .mobile-user-line1 {
        display: flex;
        align-items: baseline;
        gap: 4px;
        flex-wrap: wrap;
    }
    
    .mobile-user-line1 .post-username,
    .mobile-user-line1 a.post-username:link,
    .mobile-user-line1 a.post-username:visited {
        color: var(--site-primary, #F56600) !important;
        font-size: 18px;
        font-weight: bold;
        text-shadow: none;
        padding-left: 0;
    }

    html.dark-mode .mobile-user-line1 .post-username,
    html.dark-mode .mobile-user-line1 a.post-username:link,
    html.dark-mode .mobile-user-line1 a.post-username:visited {
        color: var(--forum-user-dark-text, var(--site-primary)) !important;
    }
    
    /* Keep long usernames on one line on mobile (no wrap); ellipsize if needed — commented out for now (space + long usernames) */
    /*
    .mobile-user-line1 .utip {
        min-width: 0;
        overflow: hidden;
    }
    .mobile-user-line1 a.post-username {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    */
    
    .mobile-user-line1 .mobile-user-date {
        color: var(--text-muted);
        font-size: 12px;
    }
    
    /* Row 2: XP level badge + rank name */
    .mobile-user-line2 {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .mobile-user-line2 .user-rank-number {
        font-size: 12px;
    }
    
    .mobile-user-line2 .mobile-rank-name {
        font-size: 12px;
        color: var(--text-muted);
    }

    .message-box__user-logo--premium-mobile {
        position: relative;
        overflow: visible;
        border-radius: 8px;
        background: transparent !important;
        box-shadow: none;
    }

    .message-box__user-logo--premium-mobile .message-box__user-logo-inner > a {
        border-radius: 7px;
        border: 2px solid rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.58);
        box-sizing: border-box;
    }

    .message-box__user-logo--premium-mobile .logo,
    .message-box__user-logo--premium-mobile img.logo {
        border-radius: 5px;
    }

    .mobile-premium-medal {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translate(32%, 32%);
        width: 15px;
        height: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.72);
        z-index: 1;
    }

    .mobile-premium-medal__icon {
        color: var(--forum-premium-accent, var(--site-primary));
        font-size: 10px;
        line-height: 1;
    }

    html.dark-mode .mobile-premium-medal {
        background: linear-gradient(135deg, color-mix(in srgb, var(--forum-premium-accent, var(--site-primary)) 58%, #ffffff), var(--forum-premium-accent, var(--site-primary))) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(var(--forum-premium-accent-rgb, var(--site-primary-rgb)), 0.72) !important;
        text-shadow: none !important;
    }

    html.dark-mode .mobile-premium-medal__icon {
        color: #fff4ea !important;
        font-size: 10px !important;
        line-height: 1 !important;
        text-shadow: none !important;
    }
    
    /* Hide the utip wrapper styling issues */
    .message-box__user-details .utip {
        display: inline;
    }
    
    /* ----- POST BODY & REMAINING CONTENT ----- */
    .message-box .post-body {
        order: 3;
        flex: 0 0 auto;
        display: flow-root;
        background: var(--color-bg-surface);
        padding: 7px 12px 0;
        font-size: 17px !important; /* override inline style in thread-messagebox-responsive.jspf */
        line-height: 1.5;
        margin-bottom: 0;
        min-width: 0; /* allow flex child to shrink below content size */
        overflow-x: hidden;
        overflow-y: visible;
        border-top: 1px solid var(--color-border-light);
    }

    .message-box .post-body .youtube-facade,
    .message-box .post-body .youtube-facade-player {
        display: block;
        clear: both;
    }

    .message-box .post-body img,
    .message-box .post-body video,
    .forum-main-content .jive-message-list .post-body img,
    .forum-main-content .jive-message-list .post-body video {
        max-width: 100% !important;
        height: auto !important;
    }

    .message-box .post-body iframe,
    .message-box .post-body embed,
    .message-box .post-body object,
    .forum-main-content .jive-message-list .post-body iframe,
    .forum-main-content .jive-message-list .post-body embed,
    .forum-main-content .jive-message-list .post-body object {
        max-width: 100% !important;
    }
    
    /* Attachments */
    .message-box .jive-attachment-list {
        order: 3;
        padding: 0 12px;
        background: var(--color-bg-surface);
    }
    
    /* ----- MESSAGE FOOTER ----- */
    /* Single row on mobile: tight padding/margin so Reply + Flag + Share + Award + Pulse fit */
    .message-box .message-footer-bar {
        order: 4;
        flex: 0 0 auto;
        background: var(--color-bg-surface);
        padding: 6px 4px !important;
        height: auto !important;
        min-height: 44px !important;
        margin-top: 0;
        border-top: 1px solid var(--color-border-light);
        border-radius: 0 0 8px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        overflow: visible;
        box-sizing: border-box;
    }

    html.dark-mode .message-box .message-footer-bar {
        background: none !important;
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border) !important;
    }
    
    .message-box .message-footer-bar .message-footer__left {
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }
    
    /* Right group fills remaining space so we can center share buttons between Flag and Award */
    .message-box .message-footer-bar .message-footer__right {
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin-right: 0 !important;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    
    /* Spacer so share buttons can sit in the middle */
    .message-box .message-footer-bar .message-footer__right::before {
        content: '';
        flex: 1;
        min-width: 0;
    }

    /* Reply footers do not have the centered share cluster, so the right side
       should size to content and not reserve extra centering space. */
    .message-box:not(.message-box--root) .message-footer-bar .message-footer__right {
        flex: 0 0 auto;
        width: auto;
    }

    .message-box:not(.message-box--root) .message-footer-bar .message-footer__right::before {
        display: none;
    }

    .message-box--root .message-footer-bar .message-footer__right::before {
        display: none;
    }

    .message-box--root .message-footer-bar .message-footer__right {
        gap: clamp(3px, 1.6vw, 8px) !important;
    }
    
    /* Push Award/Pulse to the right; with ::before this centers the share buttons between Flag and Award */
    .message-box .message-footer-bar .message-footer__right .sharethis-inline-share-buttons {
        margin-right: auto !important;
    }
    
    /* Signature goes after body, before footer visually but order puts it after */
    .message-box .signature {
        order: 5;
        padding: 8px 12px;
        font-size: 12px;
        border-top: 1px solid var(--color-border-light);
        background: var(--color-bg-hover);
    }
    
    /* ----- ROOT MESSAGE MOBILE STYLING ----- */
    /* Root message title banner: order 0 so it appears first in flex-column layout */
    .root-thread-title-banner {
        order: 0;
        flex: none;
        border-radius: 8px 8px 0 0;
        padding: 5px 10px 10px 10px;
    }

    /* Mobile: switch title-row to block so h1 + awards render as inline text flow.
       Awards appear right after the last word of the title on the same line. */
    .root-thread-title-banner__title-row {
        display: block;
    }
    .root-thread-title-banner .jive-subject {
        font-size: 22px;
        display: inline;
    }
    .root-thread-title-banner .root-awards-list {
        display: inline-flex;
        vertical-align: middle;
        margin-left: 4px;
    }

    .root-thread-title-banner__stats-row {
        font-size: 13px;
        gap: 5px;
        margin-top: 6px;
    }

    .watch-topic-btn {
        font-size: 14px;
        padding: 8px 12px; /* match #new-topic-btn height */
        min-height: 38px;
    }

    /* Mobile: shorter label text on watch button */
    .watch-btn-full { display: none; }
    .watch-btn-short { display: inline; }

    /* Mobile: hide the + icon in New Topic button */
    #new-topic-btn .material-icons { display: none !important; }

    /* Root message subject bar hidden on mobile — title is shown in root-thread-title-banner.
       !important needed to override the display:block !important on .message-box__subject-bar above. */
    .message-box--root .message-box__subject-bar {
        display: none !important;
    }

    .award-static-image {
        width: 20px;
        height: 20px;
    }
    .message-box--root .award-static-image {
        background-color: var(--color-bg-surface);
        border-radius: 4px;
        padding: 1px;
    }


    /*.message-box--root .award-count {
        color: white;
    }*/
    
    /* ----- PREMIUM MEMBER MOBILE STYLING ----- */
    /* Donor-only mobile premium highlight keeps the same base surface as regular members. */
    .message-box__user-info.member,
    .message-box__user-info--premium-mobile {
        background: var(--color-bg-surface);
    }

    .message-box__user-info.member .post-username {
        color: var(--site-primary, #F56600) !important;
        text-shadow: none;
    }

    html.dark-mode .message-box__user-info.member .post-username {
        color: var(--forum-user-dark-text, var(--site-primary)) !important;
    }

    .message-box__user-info--premium-mobile .mobile-user-line1 .post-username,
    .message-box__user-info--premium-mobile .mobile-user-line1 a.post-username:link,
    .message-box__user-info--premium-mobile .mobile-user-line1 a.post-username:visited {
        color: var(--site-primary, #F56600) !important;
        text-shadow: none;
    }

    html.dark-mode .message-box__user-info--premium-mobile .mobile-user-line1 .post-username,
    html.dark-mode .message-box__user-info--premium-mobile .mobile-user-line1 a.post-username:link,
    html.dark-mode .message-box__user-info--premium-mobile .mobile-user-line1 a.post-username:visited {
        color: var(--forum-user-dark-text, var(--site-primary)) !important;
    }

    .message-box__user-info--premium-mobile {
        background-image: none !important;
    }

    /* Root message + regular member / premium donor - same neutral background */
    .message-box--root .message-box__user-info.member,
    .message-box--root .message-box__user-info--premium-mobile {
        background: var(--color-bg-surface);
    }
    
    /* Left group: Reply, Flag, Share */
    .message-footer__left {
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }

    .message-box:not(.message-box--root) .message-footer-bar .message-footer__left {
        gap: clamp(3px, calc(8px - (var(--depth, 0) * 2px)), 8px) !important;
    }
    
    /* Hide profile logos on mobile to save space */
    .message-footer__left > div:nth-child(2) {
        display: none;
    }

    a.forum-reply { font-size:14px !important; }
    
    /* Show mobile Reply button - compact so footer fits one row */
    .forum-reply--mobile {
        display: inline-flex !important;
        align-items: center;
        gap: 3px;
        background-color: var(--site-primary, #F56600);
        color: var(--color-text-on-primary) !important;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        margin-right: 0;
        min-height: 36px;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    
    .forum-reply--mobile .material-icons {
        display: none;
    }
    
    /* Footer icons - compact touch targets so one row fits */
    .message-footer__left .btn-message--icon-only,
    .message-footer__left .message-footer-actions .btn-message--icon-only {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        margin: 0 1px;
        padding: 4px;
    }
    
    .message-footer__left .btn-message--icon-only .material-icons,
    .message-footer__left .material-icons {
        font-size: 26px;
        color: var(--site-primary, #F56600);
        vertical-align: middle;
        line-height: 1;
    }
    
    /* Hide permalink on mobile */
    .message-footer__left .message-footer-actions .btn-message--icon-only:last-child {
        display: none;
    }
    
    /* Share button - minimal spacing so one row fits */
    .message-footer__left .sharethis-inline-share-buttons,
    .message-footer-bar .sharethis-inline-share-buttons {
        margin: 0 1px !important;
        margin-left: 4px !important;
        margin-right: 1px !important;
        gap: 0 !important;
    }
    
    .message-footer-bar .sharethis-inline-share-buttons .st-btn {
        margin: 0 1px !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
    }
    
    /* Right group: fills space, share centered via ::before + margin-right auto, then Award + Pulse */
    .message-footer__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
    }
    
    /* Award icon - compact for one row */
    .message-footer__right .btn-message--icon-only {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        margin: 0 1px 0 10px;
        padding: 4px;
    }

    .message-box:not(.message-box--root) .message-footer__right .btn-message--icon-only {
        margin-left: 4px;
    }

    .message-box--root .message-footer__right .btn-message--icon-only {
        margin: 0;
    }
    
    .message-footer__right .btn-message--icon-only .material-icons {
        font-size: 26px;
        color: var(--site-primary, #F56600);
        line-height: 1;
    }
    
    /* Pulse voting section - give each control a distinct touch target */
    .message-footer__right .message-footer-pulse {
        display: inline-grid !important;
        align-items: center !important;
        grid-template-columns: minmax(38px, auto) minmax(40px, auto) minmax(38px, auto);
        justify-content: end;
        gap: 6px !important;
        margin-left: auto;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap;
    }

    .message-box:not(.message-box--root) .message-footer__right .message-footer-pulse {
        margin-left: 0;
        min-width: 0;
    }

    .message-box:not(.message-box--root) .message-footer__right .message-footer-pulse.is-summary-collapsed {
        grid-template-columns: minmax(38px, auto) minmax(38px, auto);
    }

    .message-box:not(.message-box--root) .message-footer__right .message-footer-pulse.is-summary-collapsed .message-footer-pulse-summary {
        display: none;
    }

    .message-box--root .message-footer__right .message-footer-pulse {
        margin-left: 0;
    }
    
    .message-footer__right .message-footer-pulse img {
        height: 26px;
        vertical-align: middle;
        margin: 0;
    }
    
    .message-footer__right .message-footer-pulse a,
    .message-footer__right .message-footer-pulse .message-footer-pulse-summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0 4px;
        line-height: 1;
        text-decoration: none !important;
        border-radius: 11px;
        background: var(--color-bg-light);
        border: 1px solid var(--color-border-light);
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
    
    .message-footer__right .message-footer-pulse .material-icons {
        font-size: 21px !important;
        color: var(--site-primary, #F56600);
        vertical-align: middle;
        line-height: 1;
        margin-top: 0 !important;
    }

    .message-footer__right .message-footer-pulse .message-footer-pulse-summary {
        min-width: 52px;
        padding: 0 5px;
        border-radius: 9px;
    }

    .message-footer__right .message-footer-pulse .message-footer-pulse-summary.is-heart-only {
        min-width: 38px;
        padding: 0 4px;
    }

    .message-footer__right .message-footer-pulse .message-footer-pulse-summary.is-heart-only span[id^="pls-pct-"] {
        display: none !important;
    }
    
    /* Percent text: center within flex row and center text inside span (line-height/baseline often sink text) */
    .message-footer__right .message-footer-pulse span[id^="pls-pct-"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        font-size: 14px;
        line-height: 1;
        margin-top: 0;
        min-width: 2.7ch;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    
    /* On mobile: show only the universal share button; hide individual network buttons */
    .message-footer__right .sharethis-inline-share-buttons .st-btn[data-network='facebook'],
    .message-footer__right .sharethis-inline-share-buttons .st-btn[data-network='twitter'],
    .message-footer__right .sharethis-inline-share-buttons .st-btn[data-network='x'],
    .message-footer__right .sharethis-inline-share-buttons .st-btn[data-network='email'] {
        display: none !important;
    }
    
    /* Edit/Delete buttons for author - larger touch targets */
    .message-footer__left a .material-icons {
        font-size: 24px;
    }
    
    /* ──────────────────────────────────────────────────────────────────
       Admin menu button on mobile: pulled OUT of the footer flow so the
       footer lays out byte-identical to the regular (non-admin) user view.
       Floats into the top-right corner of each .message-box instead.
       Regular users never render this button at all (server-side gated by
       <c:if test="${user.isEditor}">), so this only affects admins.
       ────────────────────────────────────────────────────────────────── */
    .message-box {
        position: relative;
    }
    .message-footer__left .admin-menu-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 5;
        height: 28px;
        min-width: 28px;
        padding: 0 6px;
        opacity: 0.85;
    }
    .message-footer__left .admin-menu-btn .material-icons {
        font-size: 16px !important;
    }
}

/* ===========================================
   TABLET PORTRAIT (481px–767px)
   Keep message boxes side-by-side at all times.
   User info column is always LEFT of post body —
   never stacked above it.
   Overrides the mobile column layout above.
   =========================================== */
@media (min-width: 481px) and (max-width: 767px) {

    /* Revert column → row so user info stays on the left */
    .message-box {
        flex-direction: row !important;
        border-radius: 4px !important;
    }

    /* Restore .message-box__content as a normal flex column
       (mobile sets it to display:contents to allow reordering via `order`) */
    .message-box__content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* User info: desktop-width sidebar column, not a full-width horizontal strip */
    .message-box__user-info {
        order: unset !important;
        width: 115px !important;
        border-right: 1px solid var(--color-border) !important;
        border-bottom: none !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 5px !important;
        display: flex !important;
    }

    /* Root-message title banner: restore full-width first row */
    .root-thread-title-banner {
        flex: 0 0 100% !important;
        order: 0 !important;
    }

    /* Show desktop-style sidebar user info */
    .message-box__user-details .desktop-user-info {
        display: block !important;
    }

    /* Hide mobile-only compact strip lines (username+date / level+rank inline) */
    .mobile-user-line1,
    .mobile-user-line2 {
        display: none !important;
    }

    /* Tablet range hides the mobile user strip, so show reply date/time in the subject bar. */
    .message-box:not(.message-box--root) .message-box__subject-bar .message-box__date-only {
        display: inline !important;
    }

    /* Tablet: sidebar details now sit on a neutral light surface, so keep pulse text dark in light mode. */
    html:not(.dark-mode) .message-box__user-info:not(.member) .desktop-user-info .pulse-text {
        color: var(--site-primary-dark, #c45500) !important;
        text-shadow: none;
        font-weight: 700;
    }

    /* Tablet dark mode: premium/special sidebar details stay light on the darker desktop-style sidebar treatment. */
    html.dark-mode .message-box__user-info.white .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.military .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .user-rank,
    html.dark-mode .message-box__user-info.white .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.military .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .pulse-text,
    html.dark-mode .message-box__user-info.white .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.military .desktop-user-info .jive-description,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .jive-description {
        color: var(--color-text-on-primary, #fff) !important;
    }
    html.dark-mode .message-box__user-info.white .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.white .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.white .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.premium .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.ultimate .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.free_orange .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.certified_seller .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.editor .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.military .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.military .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.military .desktop-user-info .logo-area a.post-username:visited,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .logo-area .post-username,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .logo-area a.post-username:link,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .logo-area a.post-username:visited {
        color: var(--color-text-on-primary, #fff) !important;
    }
    /* Tablet dark mode: keep the level badge readable on the darker premium sidebar treatment. */
    html.dark-mode .message-box__user-info.white .desktop-user-info .user-rank-number,
    html.dark-mode .message-box__user-info.purple .desktop-user-info .user-rank-number,
    html.dark-mode .message-box__user-info.orange .desktop-user-info .user-rank-number,
    html.dark-mode .message-box__user-info.military .desktop-user-info .user-rank-number,
    html.dark-mode .message-box__user-info.admin .desktop-user-info .user-rank-number {
        color: var(--color-text-on-primary, #fff) !important;
        border-color: rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Tablet portrait: regular members stay compact, but premium/special roles keep the larger desktop-style logo. */
    .message-box__user-info.member .message-box__user-logo {
        width: 50px !important;
    }
    .message-box__user-info.member .message-box__user-logo .logo,
    .message-box__user-info.member .message-box__user-logo img.logo {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        object-fit: cover !important;
    }
    .message-box__user-info.member .message-box__user-logo .message-box__user-logo-inner > a {
        width: 50px !important;
        height: 50px !important;
        overflow: hidden;
    }
    .message-box__user-info.member .message-box__user-logo .user-logo-c,
    .message-box__user-info.member .message-box__user-logo .framed-box,
    .message-box__user-info.member .user-logo-c {
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
    }
    .message-box__user-info:not(.member) .message-box__user-logo {
        width: 100px !important;
    }
    .message-box__user-info:not(.member) .message-box__user-logo .logo,
    .message-box__user-info:not(.member) .message-box__user-logo img.logo {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        object-fit: cover !important;
    }
    .message-box__user-info:not(.member) .message-box__user-logo .message-box__user-logo-inner > a {
        width: 100px !important;
        height: 100px !important;
        overflow: hidden;
    }
    .message-box__user-info:not(.member) .message-box__user-logo .user-logo-c,
    .message-box__user-info:not(.member) .message-box__user-logo .framed-box,
    .message-box__user-info:not(.member) .user-logo-c {
        width: 100px !important;
        height: 100px !important;
        min-height: 100px !important;
        padding: 5px 0 !important;
    }
}

/* ===========================================
   INDEX HEADER (Filters/Pagination)
   =========================================== */

.forum-index-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--color-bg-hover);
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    margin-bottom: 0;
}

.forum-index-header__new-topic {
    flex-shrink: 0;
}

.forum-index-header__board-jump {
    flex: 1;
    min-width: 150px;
}

.forum-index-header__pagination {
    flex-shrink: 0;
}

.forum-index-header__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

/* Mobile: Stack all controls */
@media (max-width: 767px) {
    .forum-index-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    
    .forum-index-header #board-header {
        min-width: auto !important;
        width: 100% !important;
    }
    
    .forum-index-header__new-topic {
        width: 100%;
    }
    
    .forum-index-header__new-topic #new-topic-btn {
        width: 100%;
        text-align: center;
    }
    
    .forum-index-header__board-jump {
        width: 100%;
        margin-right: 0 !important;
        margin-top: 8px !important;
    }
    
    .forum-index-header__pagination {
        width: 100%;
        text-align: center;
        margin-top: 8px !important;
        margin-right: 0 !important;
    }
    
    .forum-index-header__filters {
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
    }
    
    .forum-index-header__filters form {
        width: 100%;
    }
}

/* Forum/category index: in-list ad placeholder (desktop only; hidden on mobile).
   Rendered as a block between two .thread-list-responsive tables so column layout is unaffected.
   No height reserved until ads are activated; add min-height when ready. */
.forum-index-ad-placeholder {
    min-height: 0;
    margin: 0;
}

/* Test banner in first placeholder only (728x90) — centered block, no table involvement */
.forum-index-ad-placeholder__test-banner {
    width: 728px;
    max-width: 100%;
    height: 90px;
    margin: 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border: 1px dashed #999;
    font-size: 14px;
    color: #666;
    box-sizing: border-box;
}

/* Index pager at bottom of thread list (forum/category index) */
.index-pager-bottom {
    font-size: 18px;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 10px 0;
}

.index-pager-bottom .jive-paginator a,
.index-pager-bottom .jive-paginator a:link,
.index-pager-bottom .jive-paginator a:visited {
    color: var(--site-secondary);
}

.index-pager-bottom .jive-paginator a:hover,
.index-pager-bottom .jive-paginator a:focus {
    text-decoration: underline;
}

/* ===========================================
   THREAD HEADER (Thread View Navigation)
   =========================================== */

/* Breadcrumbs bar — dark surface bg with orange text links */
.thread-breadcrumbs-bar {
    font-size: 18px;
    font-family: Arial, sans-serif;
    background: #efefef;
    color: var(--color-text-secondary, #999);
    border-left: 3px solid var(--site-primary, #F56600);
    margin-bottom: 8px;
}

.thread-breadcrumbs-bar a,
.thread-breadcrumbs-bar a:link,
.thread-breadcrumbs-bar a:visited {
    color: var(--site-primary, #F56600);
    text-decoration: none;
    font-weight: 600;
}

.thread-breadcrumbs-bar a:hover {
    text-decoration: underline;
    color: var(--site-primary-light, #ff8f42);
}

/* Dark mode: breadcrumb hover should use primary (orange), not purple */
html.dark-mode .jive-breadcrumbs a:hover,
html.dark-mode .thread-breadcrumbs-bar a:hover {
    color: var(--site-primary-light, var(--site-primary, #ff8f42)) !important;
}

/* Dark mode: breadcrumb bar (top and bottom) — transparent so body gradient shows through, matches #main-content */
html.dark-mode .thread-breadcrumbs-bar {
    background: transparent;
    color: var(--color-text);
    border-left-color: var(--site-primary-light, var(--site-primary));
}

html.dark-mode .thread-breadcrumbs-bar a,
html.dark-mode .thread-breadcrumbs-bar a:link,
html.dark-mode .thread-breadcrumbs-bar a:visited {
    color: var(--site-primary-light, var(--site-primary, #ff8f42));
}

html.dark-mode .thread-breadcrumbs-bar a:hover {
    color: var(--site-primary, #F56600);
}

.thread-breadcrumbs-text {
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    /* Separators are .thread-breadcrumbs-sep (not raw » + spaces) so flex does not swallow gaps */
    column-gap: 0.4em;
}

.thread-breadcrumbs-sep {
    flex-shrink: 0;
    font-weight: 600;
    opacity: 0.92;
}

.thread-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--color-bg-surface);
    border: none;
    margin-bottom: 10px;
}

.thread-header a,
.thread-header a:link,
.thread-header a:visited,
.thread-header .topics-next-prev {
    color: var(--color-text);
}

.thread-header__breadcrumbs {
    flex: 1;
    min-width: 0;
}

.thread-header__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Thread pagination bar (Replies/Views) */
.thread-header__pagination {
    background: var(--color-bg-light);
    color: var(--color-text);
}

/* Mobile: Compact header - breadcrumbs on top, new topic + prev/next on same line */
@media (max-width: 767px) {
    /* Breadcrumbs bar */
    .thread-breadcrumbs-bar {
        font-size: 18px;
        padding: 12px 14px;
    }

    .thread-breadcrumbs-bar--footer {
        display: block;
    }

    .thread-pager-bottom .thread-breadcrumbs-bar {
        display: none;
    }
    
    .thread-header {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 10px 10px 0;
        gap: 10px;
    }
    
    /* Breadcrumbs at very top */
    .thread-header__breadcrumbs {
        width: 100%;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1.5;
    }
    
    .thread-header__breadcrumbs .jive-button-label {
        font-size: 18px !important;
    }
    
    /* Actions row - horizontal layout */
    .thread-header__actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .thread-header__actions > * {
        width: auto;
    }
    
    /* New Topic button - good touch target */
    .thread-header__actions > a:first-child {
        flex-shrink: 0;
    }
    
    .thread-header__actions #new-topic-btn {
        width: auto;
        text-align: center;
        padding: 8px 12px !important;
        font-size: 15px;
        min-height: 40px;
        box-sizing: border-box;
        background: var(--site-primary, #F56600) !important;
        border: 2px solid transparent !important;
        border-radius: 6px;
    }
    
    /* Light mode: white text on solid orange bg */
    html:not(.dark-mode) .thread-header__actions #new-topic-btn span,
    html:not(.dark-mode) .thread-header__actions #new-topic-btn .material-icons {
        font-size: 15px !important;
        color: #fff !important;
    }
    html:not(.dark-mode) .thread-header__actions #new-topic-btn .material-icons {
        font-size: 18px !important;
    }
    
    /* Dark mode: filled dm-premium-bg (override transparent outline style) */
    html.dark-mode .thread-header__actions #new-topic-btn {
        background: var(--dm-premium-bg) !important;
        border-color: transparent !important;
    }
    html.dark-mode .thread-header__actions #new-topic-btn:hover,
    html.dark-mode .thread-header__actions #new-topic-btn:focus {
        background: var(--dm-premium-bg-end) !important;
    }
    /* Dark mode: white text on filled bg */
    html.dark-mode .thread-header__actions #new-topic-btn span,
    html.dark-mode .thread-header__actions #new-topic-btn .material-icons {
        font-size: 15px !important;
        color: #fff !important;
    }
    html.dark-mode .thread-header__actions #new-topic-btn .material-icons {
        font-size: 18px !important;
    }
    
    /* Prev/Next topics - keep visible, align right */
    .thread-header__actions .topics-next-prev {
        display: inline-block !important;
        margin-left: auto !important;
        font-size: 14px;
    }
    
    .thread-header__actions .topics-next-prev a {
        padding: 8px 4px;
    }
    
    /* Pagination bar - replies/views */
    .thread-header__pagination {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px !important;
        font-size: 14px;
    }
    
    .thread-header__pagination span {
        font-size: 14px;
    }
    
    .thread-header__pagination > div {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .thread-header__pagination form {
        width: auto;
    }
}

/* ===========================================
   TREE TABLE (Thread Tree View) - Mobile
   =========================================== */

@media (max-width: 767px) {
    .tree-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        padding: 8px;
    }

    .tree-subject {
        flex: 1 1 100%;
        padding-left: min(calc(var(--tree-depth, 0) * 14px), 56px);
        padding-bottom: 4px;
    }

    .tree-meta {
        flex: 1 1 100%;
        font-size: 0.8em;
        padding-left: 16px;
    }
}

/* ===========================================
   THREAD LIST CONTAINER - Additional styles
   =========================================== */

/* Desktop: Keep table-like appearance */
@media (min-width: 768px) {
    .thread-list-responsive .thread-row:last-child {
        border-bottom: none;
    }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.forum-mobile-only {
    display: none;
}

.forum-desktop-only {
    display: block;
}

@media (max-width: 767px) {
    .forum-mobile-only {
        display: block;
    }
    
    .forum-desktop-only {
        display: none;
    }
}


/* ===========================================
   SHARETHIS OVERRIDES (Thread Messagebox)
   Moved from thread-messagebox-responsive.jspf
   to avoid duplicating per message
   =========================================== */

.st-btn { display: inline-block !important; }
.sharethis-inline-share-buttons {
  margin-left: 8px;
  margin-right: 8px;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  z-index: 1 !important;
}
.sharethis-inline-share-buttons .st-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  position: relative !important;
}
.sharethis-inline-share-buttons .st-btn svg,
.sharethis-inline-share-buttons .st-btn img,
.sharethis-inline-share-buttons .st-btn .st-svg,
.sharethis-inline-share-buttons .st-btn .st-logo,
.sharethis-inline-share-buttons .st-btn .st-logo-inner {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.sharethis-inline-share-buttons .st-label { display: none !important; }
.sharethis-inline-share-buttons .st-total,
.sharethis-inline-share-buttons .st-count,
.st-total, .st-count { display:none !important; }

/* Dark mode: root message share buttons — dm-premium-bg instead of bright orange */
html.dark-mode .sharethis-inline-share-buttons .st-btn {
    background: var(--dm-premium-bg) !important;
}
html.dark-mode .sharethis-inline-share-buttons .st-btn:hover,
html.dark-mode .sharethis-inline-share-buttons .st-btn:focus {
    background: var(--dm-premium-bg-end) !important;
}

/* Dark mode: Flag, Award, Pulse — new orange instead of bright orange */
html.dark-mode .message-footer-bar .btn-message--icon-only {
    border-color: var(--dm-premium-bg-end) !important;
}
html.dark-mode .message-footer-bar .btn-message--icon-only .material-icons {
    color: var(--dm-premium-bg-end) !important;
}
html.dark-mode .message-footer-bar .btn-message--icon-only:hover,
html.dark-mode .message-footer-bar .btn-message--icon-only:focus {
    background: var(--dm-premium-bg) !important;
    border-color: var(--dm-premium-bg-end) !important;
}
html.dark-mode .message-footer-bar .btn-message--icon-only:hover .material-icons,
html.dark-mode .message-footer-bar .btn-message--icon-only:focus .material-icons {
    color: #fff !important;
}
html.dark-mode .message-footer-bar .message-footer-pulse .material-icons {
    color: var(--dm-premium-bg-end) !important;
}
html.dark-mode .message-footer-bar .message-footer-pulse .pulse-vote-link {
    color: var(--site-primary-light, #ffb36b) !important;
}
html.dark-mode .message-footer-bar .message-footer-pulse .pulse-vote-link.is-active .material-icons {
    color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
    html.dark-mode .message-footer-bar .message-footer-pulse .pulse-vote-link:hover .material-icons,
    html.dark-mode .message-footer-bar .message-footer-pulse .pulse-vote-link:focus-visible .material-icons {
        color: #fff !important;
    }
}
html.dark-mode .message-footer-bar .message-footer-pulse img[src*="pulse"],
html.dark-mode .message-footer-bar .message-footer-pulse img[src*="heart-beat"] {
    filter: brightness(0.75) saturate(1.2);
}


/* ===========================================
   ADMIN MENU (Thread Messagebox)
   Moved from thread-messagebox-responsive.jspf
   Uses CSS variable --site-featured-bg instead of Config.COLOR_FEATURED_BG
   =========================================== */

.admin-menu-btn {
  width: auto !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: var(--site-featured-bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}
.admin-menu-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.4) !important;
  filter: brightness(1.1) !important;
}
.admin-menu-btn:active {
  transform: translateY(0) !important;
}
.admin-menu-btn .material-icons {
  font-size: 20px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
.admin-menu-btn .material-icons:empty::before {
  content: 'ADMIN';
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
}

.admin-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  animation: adminMenuFadeIn 0.2s ease;
}
.admin-menu-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  animation: adminMenuPopIn 0.3s ease;
  max-width: 400px;
  min-width: 320px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 10000;
}
.admin-menu-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--site-featured-bg);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}
.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  margin: 5px 0;
  background: #f5f5f5;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s;
  cursor: pointer;
}
.admin-menu-item:visited {
  color: #333;
}
.admin-menu-item:hover {
  background: #e0e0e0;
}
.admin-menu-item .material-icons {
  font-size: 24px;
  color: var(--site-featured-bg);
}
.admin-menu-item-text {
  font-size: 16px;
  font-weight: 500;
}
.admin-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 15px;
  padding: 12px;
  background: var(--site-featured-bg);
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}
@keyframes adminMenuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes adminMenuPopIn {
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

html.dark-mode .admin-menu-overlay {
  background: rgba(0, 0, 0, 0.78);
}

html.dark-mode .admin-menu-popup {
  background: var(--dm-bg-elevated, #252525) !important;
  border-color: var(--dm-border, rgba(255, 255, 255, 0.16)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

html.dark-mode .admin-menu-header {
  color: var(--dm-text-primary, #f5f5f5) !important;
  border-bottom-color: var(--dm-border-light, rgba(255, 255, 255, 0.18)) !important;
}

html.dark-mode .admin-menu-item,
html.dark-mode .admin-menu-item:visited {
  background: var(--dm-bg-card, #1e1e1e) !important;
  color: var(--dm-text-primary, #f0f0f0) !important;
  border: 1px solid transparent;
}

html.dark-mode .admin-menu-item:hover,
html.dark-mode .admin-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--dm-border-light, rgba(255, 255, 255, 0.18));
}

html.dark-mode .admin-menu-item .material-icons {
  color: var(--dm-text-link, var(--site-primary)) !important;
}

html.dark-mode .admin-menu-close {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}


/* ===========================================
   INDEX HEADER STYLES (Category/Forum View)
   Moved from index-header-responsive.jspf
   Uses CSS variables instead of JSP Config refs
   =========================================== */

.header-top {
  margin: 0;
}

.jive-list tr.sticky { display: table-row; }
.mulinput { vertical-align: top; margin-top: 4px; }

/* Select2 styling for board jump */
.choose-position .select2-container {
  width: 100% !important;
}
.choose-position .select2-container--default .select2-selection--single {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  background-color: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 25px;
  transition: 0.1s;
}
.choose-position .select2-search {
  display: none;
}
/* Taller dropdown so more boards visible without scrolling */
.select2-results {
  max-height: 340px !important;
}
/* Select2 v3 board-jump dropdown: dropdownCssClass "board-jump-drop" set in tnetForum.js
   The drop container is appended to body so ancestor selectors don't work —
   target via the custom class instead. */
.board-jump-drop .select2-result-label {
    font-size: 20px !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
}

.board-jump-drop .bj-forum {
    padding: 5px 16px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.board-jump-drop .bj-cat {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px 16px !important;
    margin: 0 !important;
}

/* Desktop/tablet: padding on the selected value + smaller choice font */
@media (min-width: 768px) {
    /* Select2 v3: .select2-choice is the trigger box, .select2-chosen is the text inside */
    .choose-position .select2-choice {
        padding: 0 30px 0 10px !important;
    }
    .choose-position .select2-choice > .select2-chosen {
        text-align: center !important;
        margin-right: 0 !important;
        display: block !important;
        width: 100% !important;
    }
    /* Smaller font for dropdown choice rows */
    .board-jump-drop .select2-result-label {
        font-size: 14px !important;
    }
    .board-jump-drop .bj-forum {
        font-size: 15px !important;
        min-height: 34px !important;
        padding: 4px 14px !important;
    }
    .board-jump-drop .bj-cat {
        font-size: 18px !important;
        padding: 4px 14px !important;
    }
}
.choose-position .select2-results__option {
  display: flex;
  align-items: center;
  font-size: 20px;
}
.choose-position .select2-results__option .img-flag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
.choose-position .select2-container--default.select2-container--focus .select2-selection--single {
  border: 1px solid #c9c9c9 !important;
  outline: 0;
}
.choose-position span.select2-selection.select2-selection--single {
  outline: none;
}
.choose-position .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 35px;
  background-color: var(--color-bg-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(35, 49, 45, 0.14);
}
.select2-arrow {
    float: right;
    display: inline-block;
    width: 18px;
    height: 26px;
    position: relative;
    right: 0;
    border-left: 1px solid #aaa;
    border-radius: 0 4px 2px 0;
    background-clip: padding-box;
    background: #ccc;
    background-image: linear-gradient(to top, #cccccc 0%, #eeeeee 60%);
}
.select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    background: url("https://2cic.b-cdn.net/ts/css/bimg/select2.png") no-repeat 0 1px;
}
.select2-drop {
    color: var(--site-secondary) !important;
}

/* Index header element overrides */
.index-header .t-sub { font-size: 14px; }
.index-header svg { color: var(--site-featured-bg); }
.index-header .jive-list th { font-size: 12px; padding: 3px 0; }

#new-topic-btn .ui-button-text { padding: .1em 1em .2em 0.6em; }
#new-topic-btn { border-radius: 4px; }
.jive-paginator a { color: var(--site-secondary) !important; font-size: 18px; }
.jive-paginator .jive-current { color: white !important; padding: 0 3px; background-color: var(--site-featured-bg); }
.select2-container .select2-choice { font-size: 16px; height: 30px; color: var(--site-secondary); }
.search-widget { margin-top: 0 !important; }
#award-popup-inner { top: 58%; left: 50%; }

/* Normalize filter and sort dropdowns */
#forumFilterSelect,
#sort-mode,
#sort-mode2 {
    height: 28px;
    padding: 2px 8px;
    font-size: 16px;
    font-weight: normal;
    color: var(--site-secondary);
    border: 1px solid #aaa;
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--color-bg-surface) 0%, #f8f8f8 100%);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 20px;
    padding-right: 28px;
    cursor: pointer;
}

#sort-mode option {
    color: var(--site-secondary);
}

#select2-sort-mode-container,
#select2-sort-mode2-container,
.sort-by-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.sort-by-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--site-secondary) !important;
}

#forumFilterSelect:hover,
#sort-mode:hover {
    border-color: #888;
}

#forumFilterSelect:focus,
#sort-mode:focus {
    outline: none;
    border-color: var(--site-primary);
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 14l5-5 5 5z'/%3e%3c/svg%3e");
}

/* Desktop styles for New Topic button */
#new-topic-btn {
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

#new-topic-btn .material-icons {
    width:20px;
    margin-top: 0 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
}

#new-topic-btn span:not(.material-icons) {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* Gear icon positioning */
.settings-gear-mobile-top {
    display: none;
}

/* Header rhythm: every major desktop control gets ~22px of horizontal breathing room
   from its predecessor. The pagination already supplies its own 22px margin-right, so
   the forum filter pill sits flush; the toggle pill (mix-amph) supplies its own 10px
   left margin; sort-by-form keeps a slightly larger 18px so it visually separates from
   the toggle pill. Combined effect: New Topic | Tiger Boards | Pages | Show Forums |
   The Amphitheatre | Sort By all fit on one row at desktop widths. */
.forum-filter-container {
    margin-left: 0;
}

.sort-by-form {
    margin-left: 18px;
}

.filter-sort-row {
    display: inline;
}

/* Desktop: restore original inline/float layout - grid only applies on mobile */
@media (min-width: 768px) {
    #board-header-inner {
        display: block !important;
    }
    /* Wrapper is layout-transparent on desktop so board jump / pager / filter order is unchanged */
    .board-header__index-mid {
        display: contents;
    }
    #board-header-inner .board-header__new-topic-link {
        display: inline-block !important;
        float: left !important;
    }
    #board-header-inner .filter-sort-row {
        display: inline !important;
    }
    #board-header-inner .settings-gear-mobile-top {
        display: none !important;
    }
    #board-header-inner .settings-gear-desktop {
        display: inline-block !important;
    }
}

.settings-gear-desktop {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Index header responsive - tablet */
@media (max-width: 1024px) {
    #board-header-inner {
        box-sizing: border-box !important;
    }
}

/* Index header responsive - mobile */
@media (max-width: 767px) {
    #board-header {
        padding: 0 !important;
        overflow: visible !important;
    }
    
    #board-header-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px 8px !important;
        justify-items: start !important;
        align-items: center !important;
        padding: 10px 10px 10px 5px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #board-header-inner .board-header__new-topic-link {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #board-header-inner .sort-by-form {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    #board-header-inner .sort-by-form .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #board-header-inner .settings-gear-mobile-top {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }
    #board-header-inner .board-header__index-mid {
        display: contents !important;
    }
    #board-header-inner .filter-sort-row {
        display: contents !important;
    }
    /* Category index without the Amphitheatre toggle: 6 equal tracks — row 2 is
       50% board jump | 50% Forums. */
    #board-header-inner:has(.forum-filter-container) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    #board-header-inner:has(.forum-filter-container) .board-header__new-topic-link {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container) .sort-by-form {
        grid-column: 3 / 6 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container) .settings-gear-mobile-top {
        grid-column: 6 / 7 !important;
        grid-row: 1 !important;
    }
    /* When the Amphitheatre toggle is present we switch to a 12-col grid so we
       can do a clean 50/25/25 split on row 2: board-jump gets enough room to
       show "Tiger Boards" un-truncated, forum filter gets enough room for
       "Forums ▼" without abbreviating to "For…", and the toggle pill (now a
       chip-style light-up, no checkbox, "Amphitheatre" only on mobile) gets
       a comfortable 25%. Row 1 placements are scaled to keep the same visual
       proportions (33/50/17 → 4/12, 6/12, 2/12). The double-:has() selector
       outweighs the single-:has() rule above so we don't need !important wars. */
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .board-header__new-topic-link {
        grid-column: 1 / 5 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .sort-by-form {
        grid-column: 5 / 11 !important;
        grid-row: 1 !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .settings-gear-mobile-top {
        grid-column: 11 / 13 !important;
        grid-row: 1 !important;
    }
    /* Row 2 split refined: board-opt gives back one column (~14px on a 360px
       viewport) so the Forums filter cell has room to render its label
       without truncation. Was 50/25/25 (6/3/3 of 12), now ~42/33/25 (5/4/3). */
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .board-opt {
        grid-column: 1 / 6 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .forum-filter-container {
        grid-row: 2 !important;
        grid-column: 6 / 10 !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #board-header-inner:has(.forum-filter-container):has(.mix-amph-container) .mix-amph-container {
        grid-row: 2 !important;
        grid-column: 10 / 13 !important;
        justify-self: stretch !important;
        align-self: center !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Original 50/50 row 2 split for non-college sites or any cat-index page
       that doesn't render the Amphitheatre toggle (still on the 6-col grid). */
    #board-header-inner:has(.forum-filter-container):not(:has(.mix-amph-container)) .board-opt {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
    }
    #board-header-inner:has(.forum-filter-container):not(:has(.mix-amph-container)) .forum-filter-container {
        grid-row: 2 !important;
        grid-column: 4 / 7 !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #board-header-inner:not(:has(.forum-filter-container)) .board-opt {
        grid-column: 1 / -1 !important;
    }

    .board-header__new-topic-link {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .settings-gear-desktop {
        display: none !important;
    }

    .settings-gear-mobile-top {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #new-topic-btn {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        box-sizing: border-box !important;
    }
    
    #new-topic-btn span {
        font-size: 14px !important;
    }
    
    #new-topic-btn span.material-icons {
        font-size: 16px !important;
        margin-right: 2px !important;
        margin-top: 0 !important;
    }
    
    #board-header-inner .board-opt {
        grid-row: 2 !important;
        grid-column: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        gap: 3px !important;
    }
    
    .board-opt select,
    .board-opt .select2-container {
        width: 100% !important;
        max-width: none !important;
        font-size: 18px !important;
    }
    
    /* Board switcher: larger trigger and dropdown options on mobile */
    .board-opt .select2-container--default .select2-selection--single {
        height: 56px !important;
        min-height: 56px !important;
        line-height: 56px !important;
        padding: 0 40px !important;
        font-size: 18px !important;
    }
    .board-opt .select2-selection__rendered {
        font-size: 18px !important;
        line-height: 56px !important;
    }
    .board-opt .select2-results__option {
        padding: 14px 16px !important;
        font-size: 20px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .settings-gear .material-icons {
        margin: 0 !important;
        font-size: 20px !important;
    }
    
    /* Hide top pager on message board index at mobile size */
    .responsive-pagination {
        display: none !important;
    }
    
    /* filter-sort-row is display:contents — only forum-filter + sort are grid items */
    .filter-sort-row .forum-filter-container {
        min-width: 0 !important;
    }
    
    .forum-filter-container {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    .forum-filter-container form {
        display: flex !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    .forum-filter-container select,
    .forum-filter-container .MultiCheckBox {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .forum-filter-container .MultiCheckBox {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        white-space: nowrap !important;
        gap: 4px !important;
        height: 28px !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        padding: 2px 6px !important;
        border: 1px solid #aaa !important;
        border-radius: 4px !important;
        background: linear-gradient(to bottom, var(--color-bg-surface) 0%, #f8f8f8 100%) !important;
        color: var(--site-secondary) !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        z-index: 1 !important;
    }

    .forum-filter-container .forum-filter-mobile-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        line-height: 1 !important;
    }

    /* Hidden on mobile: with the Amphitheatre toggle sharing row 2, the filter
       pill is squeezed to ~17% of viewport width. Dropping the filter_list icon
       saves ~19px (icon + gap) so "Forums ▼" actually fits in the cell, freeing
       up width for the board-jump select to show "Tiger Boards" without truncating
       to "Tiger Boa…". The icon is purely decorative — "Forums" + the dropdown
       caret is unambiguous on its own at this width. */
    .forum-filter-container .forum-filter-mobile-icon {
        display: none !important;
    }

    .forum-filter-container .forum-filter-mobile-text {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .forum-filter-container .MultiCheckBox .select2-arrow {
        display: none !important;
    }

    /* Mirror the Tiger Boards (.board-jump-drop) approach: the dropdown panel
       anchors to #board-header-inner (which has inline position:relative and
       spans the full row width on mobile) and centers itself horizontally on
       the viewport via left:50% + translateX(-50%). This is identical to how
       Select2 v3's body-attached drop handles the Tiger Boards dropdown — we
       just achieve the same visual via the inline positioned ancestor instead
       of body, since MultiCheckBoxDetail is built into the form. The vertical
       anchor (top: calc(100% + 2px)) drops the panel right below the header. */
    .forum-filter-container .MultiCheckBoxDetail {
        top: calc(100% + 2px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        border-radius: 4px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
        z-index: 2000 !important;
    }

    .forum-filter-container .MultiCheckBoxDetail .cont > div:last-child {
        white-space: nowrap !important;
    }
    
    .forum-filter-container select {
        width: auto !important;
    }
    
    /* Hide Sort By label on mobile */
    .sort-by-form > span:first-child {
        display: none !important;
    }
    
    .sort-by-form select {
        box-sizing: border-box !important;
    }
    
    #forumFilterSelect,
    #sort-mode {
        max-width: none !important;
    }

    #board-header-inner .sort-by-form .select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #board-header-inner .sort-by-form #sort-mode {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===========================================
   THREAD BOTTOM PAGER (MOBILE ONLY)
   New Topic / Prev | Next at bottom shows only on mobile
   =========================================== */

.thread-pager-bottom--mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .thread-pager-bottom--mobile-only {
        display: block;
    }

    /* Flat view: hide top Pages bar on mobile so only bottom pagination shows */
    .thread-view-flat .thread-header__pagination--top {
        display: none;
    }
}

/* ===========================================
   POSTFORM (POST MESSAGE) PAGE - MOBILE/TABLET
   =========================================== */

@media (max-width: 1024px) {
    /* Page title and board chooser (new-topic: label + select stacked) */
    .forum-main-content .jive-postform-board-chooser {
        font-size: 16px;
        margin-left: 0;
        padding-left: 6px;
        line-height: 1.4;
        word-break: break-word;
    }
    .forum-main-content .jive-postform-board-chooser:not(.jive-page-title) {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .forum-main-content .jive-postform-board-chooser__select-wrap {
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    /* Reply sentence: single flowing line, wraps naturally on narrow screens */
    .forum-main-content .jive-postform-board-chooser.jive-page-title {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4em 0.35em;
        line-height: 1.55;
    }
    .forum-main-content .jive-postform-board-select {
        width: 100%;
        max-width: 96%;
        box-sizing: border-box;
        font-size: 1em;
        margin-left: auto;
        margin-right: auto;
    }
    .forum-main-content .jive-postform-board-chooser__hint,
    .forum-main-content .jive-postform-board-chooser__select-note {
        font-size: 0.92em;
        line-height: 1.45;
    }

    /* Help text */
    .forum-main-content .jive-postform-help-text {
        font-size: 1em;
        margin-left: 0;
        margin-bottom: 12px;
    }

    /* Error / info / warning message tables */
    .forum-main-content .jive-error-message,
    .forum-main-content .jive-info-message,
    .forum-main-content .jive-warning-message {
        max-width: 100%;
        width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }

    /* Postform page: minimal left padding so content is left-aligned */
    .forum-main-layout.postform-page {
        padding-left: 0;
        padding-right: 8px;
    }
    .forum-main-layout.editform-page {
        padding-left: 0;
        padding-right: 8px;
    }
    .editform-page .forum-main-content {
        padding: 10px 8px 18px 0;
    }
    .editform-page .jive-editform-header {
        margin-top: 0;
        margin-bottom: 12px;
        padding: 10px 12px;
    }
    .editform-page .jive-editform-header .jive-page-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .editform-page .jive-editform-context {
        font-size: 17px;
        line-height: 1.4;
    }
    .editform-page .jive-editform-meta-row {
        gap: 6px;
        margin-bottom: 10px;
    }
    .editform-page .jive-editform-meta-row:last-child {
        margin-bottom: 8px;
    }
    .editform-page .jive-editform-meta-label {
        font-size: 0.76em;
    }
    .editform-page .jive-editform-header__actions a {
        font-size: 1.18em;
    }
    .editform-page .jive-editform-header__actions a .material-icons {
        font-size: 22px;
    }
    .editform-page .jive-error-message,
    .editform-page .jive-info-message,
    .editform-page .jive-warning-message {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }
    .jive-edit-form .jive-post-form__field #subject01,
    .jive-edit-form .jive-post-form__field #body01,
    .jive-edit-form .jive-post-form__field #comment01 {
        font-size: 19px !important;
    }
    .jive-edit-form .jive-post-form__field #body01 {
        min-height: 9.5em;
        height: 9.5em;
    }
    .jive-edit-form .jive-post-form__field #comment01 {
        min-height: 4em;
        font-size: 16px !important;
    }
    .jive-edit-form .jive-post-form__row--buttons .jive-post-form__field {
        flex-direction: column;
        align-items: stretch;
    }
    .jive-edit-form .jive-post-form__btn-group {
        width: 100%;
    }
    .jive-edit-form .jive-post-form__btn-group input.tn-btn {
        flex: 1;
    }
    .jive-edit-form .jive-post-form__label {
        padding-top: 0;
    }
    .jive-edit-form__inline-option {
        display: flex;
        margin-top: 8px;
    }
    .jive-edit-form__subtext {
        display: block;
        margin-left: 0;
        margin-top: 3px;
    }
    .jive-edit-move-section {
        margin-top: 24px;
        padding: 14px 12px;
        border-width: 2px;
        border-color: var(--site-primary, #F56600);
    }
    .jive-edit-move-section__title {
        font-size: 22px;
        margin-bottom: 8px;
    }
    .jive-edit-move-form {
        flex-direction: column;
        align-items: stretch;
    }
    .jive-edit-move-form .jive-postform-board-select {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        padding: 10px 12px;
    }
    .jive-edit-move-form .jive-postform-board-select option {
        font-size: 16px;
    }
    .jive-edit-move-form input.tn-btn {
        width: 100%;
    }
    .jive-edit-move-form .jive-edit-move-form__submit {
        font-size: 18px;
        padding-top: 12px;
        padding-bottom: 12px;
        min-height: 56px;
    }
    /* Form: mobile overrides (labels-on-top is now the base; these are mobile sizing tweaks) */
    .forum-main-content .jive-post-form {
        margin-left: 0;
        padding: 5px 0 0 0;
        box-sizing: border-box;
        max-width: 100%;
    }
    .forum-main-content .jive-post-form__body {
        width: 100%;
        max-width: 100%;
    }
    .forum-main-content .jive-post-form__row {
        width: 100%;
        max-width: 100%;
    }
    .forum-main-content .jive-post-form__label {
        font-size: 16px;
    }
    .forum-main-content .jive-post-form__field {
        width: 100%;
        max-width: 100%;
    }
    .forum-main-content .jive-post-form__field #subject01,
    .forum-main-content .jive-post-form__field #body01 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        font-size: 20px !important;
        line-height: 1.45;
    }
    .forum-main-content .jive-post-form__field #body01 {
        min-height: 11em;
        height: 11em;
    }
    .forum-main-content .jive-post-form__field #body01::placeholder {
        color: rgba(170, 170, 178, 0.78);
    }
    /* Mobile expand toggle: slightly larger text */
    .forum-main-content .jive-post-form__message-expand-toggle .jive-post-form__expand-link,
    .forum-main-content .jive-post-form__message-expand-toggle .jive-post-form__collapse-link {
        font-size: 15px;
    }
    .forum-main-content .jive-post-form__message-expand-toggle .material-icons {
        font-size: 20px;
    }
    /* Second "Post Message" button above message box: visible on mobile only once user starts typing */
    .forum-main-content .jive-post-form__post-above-mobile--visible {
        display: block;
        margin-bottom: 12px;
    }
    .forum-main-content .jive-post-form__post-above-mobile input.tn-btn {
        width: 100%;
        box-sizing: border-box;
        padding-top: 14px;
        padding-bottom: 14px;
    }
    /* Toolbar: force every span + input to the same explicit height so nothing floats */
    .forum-main-content .jive-post-form__toolbar span {
        display: flex;
        align-items: center;
        line-height: 0;
    }
    .forum-main-content .jive-post-form__toolbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
    }
    .forum-main-content .jive-post-form__toolbar input[type="submit"],
    .forum-main-content .jive-post-form__toolbar input[type="button"] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        min-width: 36px;
        padding: 0 12px;
        margin: 0;
        box-sizing: border-box;
        line-height: normal;
        transform: none;
    }
    .forum-main-content .jive-post-form #s2id_mentions,
    .forum-main-content .jive-post-form .select2-container {
        width: 100% !important;
        max-width: 100%;
    }
    .forum-main-content .jive-post-form input[name="mentions"] {
        width: 100% !important;
    }
    .forum-main-content .jive-post-form__row--buttons {
        margin-top: 2px;
    }
    .forum-main-content .jive-post-form__row--buttons .jive-post-form__field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .forum-main-content .jive-post-form__row--buttons .jive-post-form__field input.tn-btn {
        width: 100%;
        box-sizing: border-box;
    }
    /* Preview + Post Message side-by-side on mobile */
    .forum-main-content .jive-post-form__btn-group {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .forum-main-content .jive-post-form__btn-group input.tn-btn {
        flex: 1;
        width: auto;
    }
    .forum-main-content .jive-post-form__row--buttons .jive-post-form__field input[name="doPost"] {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    /* Center all post form buttons on mobile, except toolbar items (Attach Files, Add Poll). */
    .forum-main-content .jive-post-form input[type="submit"]:not([name="doAttach"]),
    .forum-main-content .jive-post-form input[type="button"]:not(.jive-post-form__poll-btn) {
        margin-left: auto;
        margin-right: auto;
    }
    /* Toolbar inputs stay left-aligned (override the centering rule above) */
    .forum-main-content .jive-post-form .jive-post-form__toolbar input[type="submit"],
    .forum-main-content .jive-post-form .jive-post-form__toolbar input[type="button"] {
        margin-left: 0;
        margin-right: 0;
    }
    /* Message label: ensure full width on mobile so B/I/U can push right */
    .forum-main-content .jive-post-form__label--message {
        width: 100%;
    }
    .forum-main-content .jive-post-form__font-btns span a img {
        width: 28px;
        height: 30px;
    }
    .forum-main-content .jive-post-form__attach-item {
        display: block;
        margin-top: 4px;
    }
    /* Compact toolbar action buttons: small visual footprint, 44px touch target */
    .forum-main-content .jive-post-form input[name="doAttach"],
    .forum-main-content .jive-post-form .jive-post-form__poll-btn {
        height: 44px;
        min-height: 44px;
        font-size: 11px;
        padding: 0 10px;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        line-height: 44px;
    }

    /* Toolbar checkboxes: large enough tap target */
    .forum-main-content .jive-post-form .jive-post-form__toolbar-check {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 6px 0;
        font-size: 14px;
        cursor: pointer;
    }
    .forum-main-content .jive-post-form .jive-post-form__toolbar-check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    /* B/I/U anchor touch targets: 44px minimum */
    .forum-main-content .jive-post-form__toolbar a {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: var(--color-bg-light, rgba(255, 255, 255, 0.06));
    }

    /* Reply view: Original Message block */
    .forum-main-content .jive-postform-original-heading {
        font-size: 16px;
        margin: 12px 0 8px 0;
    }
    .forum-main-content .jive-message-list {
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }
    /* .message-box also carries .jive-box — exclude it so display:flex is not clobbered */
    .forum-main-content .jive-message-list .jive-box:not(.message-box) {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .forum-main-content .jive-message-list .jive-box:not(.message-box) tbody,
    .forum-main-content .jive-message-list .jive-box:not(.message-box) tr {
        display: block;
    }
    .forum-main-content .jive-message-list .jive-box:not(.message-box) td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .forum-main-content .jive-message-list .jive-box:not(.message-box) tr td:first-child {
        padding: 8px;
        border-bottom: 1px solid var(--color-border);
    }
    .forum-main-content .jive-message-list .jive-box:not(.message-box) tr td:last-child {
        padding: 8px;
    }
    .forum-main-content .jive-message-list .jive-subject {
        font-size: 20px;
        word-break: break-word;
        vertical-align: middle;
    }
    .forum-main-content .jive-message-list .post-body {
        font-size: 17px !important; /* override inline style in thread templates */
    }
}

/* ============================================
   DARK MODE OVERRIDES — inline style fixes
   These use !important to override hardcoded inline background-color values
   that have higher specificity than normal class selectors.
   ============================================ */

/* #board-header-inner has inline style="background-color:#fff" in index-header-responsive.jspf */
html.dark-mode #board-header-inner {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}

/* Dark mode + mobile: board selector (Tiger Boards) — premium orange to match New Topic button */
/* The board-jump select uses Select2 v3: .select2-choice is the trigger, .select2-chosen is the label.
   NOTE: --dm-premium-bg is a linear-gradient, so use background-image (not the background shorthand)
   to avoid accidentally wiping it with a subsequent background-image declaration. */
@media (max-width: 767px) {
    html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice,
    html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice {
        background-image: var(--dm-premium-bg) !important;
        background-color: var(--dm-premium-bg-end) !important;
        border-color: transparent !important;
        color: #fff !important;
        text-shadow: none !important;
    }
    html.dark-mode #board-header-inner .board-opt .select2-container.select2-dropdown-open .select2-choice,
    html.dark-mode #board-header-inner .board-opt .select2-container-active .select2-choice,
    html.dark-mode #board-header-inner .board-opt .select2-container:hover .select2-choice,
    html.dark-mode #board-header-inner .sort-by-form .select2-container.select2-dropdown-open .select2-choice,
    html.dark-mode #board-header-inner .sort-by-form .select2-container-active .select2-choice,
    html.dark-mode #board-header-inner .sort-by-form .select2-container:hover .select2-choice {
        background-image: none !important;
        background-color: var(--dm-premium-bg-end) !important;
        border-color: transparent !important;
    }
    html.dark-mode #board-header-inner .board-opt .select2-container .select2-chosen,
    html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-chosen {
        color: #fff !important;
    }
    html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-arrow,
    html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow {
        background-image: none !important;
        background-color: transparent !important;
        border-left-color: rgba(255, 255, 255, 0.3) !important;
    }
    html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-arrow b,
    html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow b {
        filter: brightness(0) invert(1);
    }
}

/* #main-content has conditional inline background-color:white in header.jsp for light mode */
html.dark-mode #main-content {
    background-color: transparent !important;
}

/* ============================================
   LIGHT MODE — Forum post mentions (Select2)
   Make the mentions field feel like part of the composer, not stock Select2.
   ============================================ */
html:not(.dark-mode) #s2id_mentions.select2-container-multi .select2-choices {
    min-height: 42px;
    padding: 4px 6px;
    border: 1px solid #d7dce5;
    border-radius: 10px;
    background: #fff;
    background-image: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html:not(.dark-mode) #s2id_mentions.select2-container-multi.select2-container-active .select2-choices,
html:not(.dark-mode) #s2id_mentions.select2-container-multi.select2-dropdown-open .select2-choices {
    border-color: var(--site-secondary, #F56600);
    box-shadow: 0 0 0 3px rgba(245, 102, 0, 0.12);
}

html:not(.dark-mode) #s2id_mentions .select2-choices .select2-search-field {
    margin: 0;
    padding: 0;
}

html:not(.dark-mode) #s2id_mentions .select2-choices .select2-search-field input {
    min-height: 32px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--color-text);
    font-size: 14px;
}

html:not(.dark-mode) #s2id_mentions .select2-choices .select2-search-choice {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 4px 4px 4px 0;
    padding: 4px 10px 4px 22px;
    border: 1px solid rgba(245, 102, 0, 0.22);
    border-radius: 999px;
    background: #fff5eb;
    background-image: none;
    box-shadow: none;
    color: #8a430d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

html:not(.dark-mode) #s2id_mentions .select2-choices .select2-search-choice-focus {
    background: #ffe9d7;
}

html:not(.dark-mode) #s2id_mentions .select2-search-choice-close {
    top: 8px;
    left: 7px;
    opacity: 0.72;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions,
html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions.select2-drop-active {
    margin-left: 0;
    margin-top: 6px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-search {
    padding: 8px 8px 4px;
    background: #fff;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-search input {
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d7dce5;
    border-radius: 8px;
    background: #f8fafc !important;
    box-shadow: none !important;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results {
    padding: 4px 8px 8px;
    background: #fff;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results .select2-result-selectable {
    margin: 0;
    border-radius: 10px;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-result-label {
    padding: 0;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result td {
    padding: 8px 10px;
    vertical-align: middle;
    background: transparent;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-image {
    width: 40px;
    padding-right: 0;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-image img {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 50%;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-info {
    border: none !important;
    background: transparent !important;
    padding-left: 8px;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-title,
html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-info {
    color: #1f2937 !important;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .user-result .user-title {
    font-size: 15px !important;
    font-weight: 700;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results .select2-highlighted {
    background: #fff2e8;
    background-image: none;
    color: #44210a;
}

html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results .select2-highlighted .select2-result-label,
html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results .select2-highlighted .user-title,
html:not(.dark-mode) .select2-drop.bigdrop--forum-mentions .select2-results .select2-highlighted .user-info {
    color: #44210a !important;
}

@media (max-width: 767px) {
    .forum-main-content .jive-post-form #s2id_mentions.select2-container-multi .select2-choices {
        max-height: 148px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .forum-main-content .jive-post-form #s2id_mentions .select2-choices .select2-search-field {
        clear: both;
        display: block;
        float: left;
        width: 100%;
        white-space: normal;
    }

    .forum-main-content .jive-post-form #s2id_mentions .select2-choices .select2-search-field input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .select2-drop.bigdrop--forum-mentions {
        max-width: calc(100vw - 24px);
    }

    .select2-drop.bigdrop--forum-mentions .select2-results {
        max-height: 45vh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* ============================================
   DARK MODE — Post form Mentions (Select2)
   Input and username suggestions were unreadable (white bg + light text).
   ============================================ */

/* Mentions box container: dark surface, single border (no double border when active) */
html.dark-mode .jive-post-form .select2-container-multi .select2-choices {
    min-height: 42px;
    padding: 4px 8px;
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    background-image: none !important;
    border: 1px solid var(--dm-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
}

/* When dropdown is open / active: keep same single border, no orange second border */
html.dark-mode .jive-post-form .select2-container-multi.select2-container-active .select2-choices,
html.dark-mode .jive-post-form .select2-container-multi.select2-dropdown-open .select2-choices {
    border: 1px solid var(--dm-border, rgba(255, 255, 255, 0.2)) !important;
    box-shadow: none !important;
}

/* No border around the inner "blank" (search field wrapper and input) */
html.dark-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-field {
    border: none !important;
    box-shadow: none !important;
}

/* Typed text in the Mentions input: match container bg so no inner box; no border */
html.dark-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-field input {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Placeholder in Mentions input */
html.dark-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Selected mention chips in dark mode: readable text */
html.dark-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-choice {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 4px 4px 4px 0;
    padding: 4px 10px 4px 22px;
    border-radius: 999px;
    background: #4f3473 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 184, 112, 0.8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(28, 17, 42, 0.35) !important;
    color: #fff8f1 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

html.dark-mode .jive-post-form .select2-container-multi .select2-choices .select2-search-choice-focus {
    background: #62428d !important;
    border-color: rgba(255, 205, 145, 0.95) !important;
}

html.dark-mode .jive-post-form .select2-container-multi .select2-search-choice-close {
    top: 8px;
    left: 7px;
    opacity: 0.9;
    filter: brightness(1.7) contrast(1.15);
}

html.dark-mode .jive-post-form .select2-container-multi .select2-search-choice .select2-chosen {
    color: inherit !important;
}

/* Username suggestions dropdown: dark background, single border on all sides (no orange/red right edge) */
html.dark-mode .select2-drop.bigdrop,
html.dark-mode .select2-drop.bigdrop.select2-drop-active {
    background: var(--dm-bg-card, #1e1e1e) !important;
    border: 1px solid var(--dm-border, rgba(255, 255, 255, 0.2)) !important;
    border-right: 1px solid var(--dm-border, rgba(255, 255, 255, 0.2)) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* No red/orange border on the right of the results list or any result row */
html.dark-mode .select2-drop.bigdrop .select2-results,
html.dark-mode .select2-drop.bigdrop .select2-results li {
    border-right: none !important;
    border-left: none !important;
}

html.dark-mode .select2-drop.bigdrop .select2-results {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html.dark-mode .select2-drop.bigdrop .select2-result-label,
html.dark-mode .select2-drop.bigdrop .user-result .user-title,
html.dark-mode .select2-drop.bigdrop .user-result .user-info {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* No border on .user-info in suggestions (global .user-info has border-right; remove it here) */
html.dark-mode .select2-drop.bigdrop .user-result .user-info,
.select2-drop.bigdrop .user-result .user-info {
    border: none !important;
    border-right: none !important;
}

/* Blank "enter 2+ characters" / searching row: dark background so it's not a white strip */
html.dark-mode .select2-drop.bigdrop .select2-results .select2-no-results,
html.dark-mode .select2-drop.bigdrop .select2-results .select2-searching,
html.dark-mode .select2-drop.bigdrop .select2-results .select2-ajax-error,
html.dark-mode .select2-drop.bigdrop .select2-results .select2-selection-limit {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Search area inside dropdown (e.g. "Please enter 2 or more characters"): dark, not white */
html.dark-mode .select2-drop.bigdrop .select2-search {
    background: var(--dm-bg-card, #1e1e1e) !important;
}
html.dark-mode .select2-drop.bigdrop .select2-search input {
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--dm-border, rgba(255, 255, 255, 0.2)) !important;
}

/* Softer highlight in dark mode: slightly elevated background only (no orange bar) */
html.dark-mode .select2-drop.bigdrop .select2-results .select2-highlighted {
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    border-left: none !important;
    box-shadow: none !important;
}

html.dark-mode .select2-drop.bigdrop .select2-results .select2-highlighted .select2-result-label,
html.dark-mode .select2-drop.bigdrop .select2-results .select2-highlighted .user-title,
html.dark-mode .select2-drop.bigdrop .select2-results .select2-highlighted .user-info {
    color: rgba(255, 255, 255, 0.96) !important;
}

/* ===========================================
   MOBILE STICKY ROW HARD OVERRIDES
   Keep sticky titles full-width and naturally wrapping
   (placed at end of file to win against earlier mobile rules)
   =========================================== */
@media (max-width: 767px) {
    .forum-main-content .thread-list-responsive .thread-row.sticky,
    .thread-list-responsive .thread-row.sticky,
    .thread-row.sticky {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
    }

    .forum-main-content .thread-list-responsive .thread-row.sticky .thread-row__reply-badge,
    .thread-list-responsive .thread-row.sticky .thread-row__reply-badge,
    .thread-row.sticky .thread-row__reply-badge {
        display: none !important;
    }

    .forum-main-content .thread-list-responsive .thread-row.sticky .thread-row__title,
    .thread-list-responsive .thread-row.sticky .thread-row__title,
    .thread-row.sticky .thread-row__title {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .forum-main-content .thread-list-responsive .thread-row.sticky .thread-row__title .t-sub,
    .thread-list-responsive .thread-row.sticky .thread-row__title .t-sub,
    .thread-row.sticky .thread-row__title .t-sub {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.35 !important;
    }
}

/* ===========================================
   PREMIUM PREVIEW — Thread-level preview for non-donors
   =========================================== */

/* Gradient fade on the last visible message in preview mode.
   Explicitly marked with .premium-preview-last-msg rather than :last-of-type
   because threaded mode nests messages in separate table cells,
   making :last-of-type match every reply instead of just the last one. */
.premium-preview-last-msg {
    position: relative;
}
.premium-preview-last-msg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--color-bg-surface));
    pointer-events: none;
    z-index: 1;
}

/* Post body truncation for preview replies (not root — root shows fully) */

/* Locked section CTA */
.premium-locked-section {
    background: var(--color-bg-surface);
    border: 2px solid var(--color-border);
    border-top: 4px solid var(--site-primary, #f60);
    border-radius: 8px;
    margin: 8px 5px 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
html.dark-mode .premium-locked-section {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.premium-locked-icon {
    font-size: 44px !important;
    color: var(--site-primary, #f60);
    display: block;
    margin-bottom: 12px;
    vertical-align: middle;
}

.premium-locked-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text, #333);
    margin-bottom: 8px;
}

.premium-locked-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary, #666);
    margin-bottom: 6px;
}

.premium-locked-desc {
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    margin-bottom: 20px;
}

.premium-upgrade-btn {
    display: inline-block;
    background: var(--site-gradient, linear-gradient(135deg, var(--site-secondary, #ff8c00) 0%, var(--site-primary, #f60) 100%));
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.premium-upgrade-btn:hover {
    background: #7b2d8b;
    color: #fff !important;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
}
.premium-upgrade-btn:active {
    transform: translateY(0);
    opacity: 1;
}

.premium-locked-login {
    margin-top: 14px;
    font-size: 13px;
    color: var(--color-text-secondary, #666);
}
.premium-locked-login a {
    color: var(--site-primary, #f60);
    text-decoration: underline;
}

/* Premium Discussion banner shown inside thread views (flat/threaded/tree) */
.thread-premium-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--site-primary, #f60);
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb, 255, 102, 0), 0.1) 0%, transparent 100%);
    border-left: 3px solid var(--site-primary, #f60);
    border-radius: 0 4px 4px 0;
    padding: 8px 14px;
    margin: 0 0 8px 0;
}
html.dark-mode .thread-premium-banner {
    color: var(--dm-accent-text, var(--site-primary));
    background: linear-gradient(90deg, rgba(var(--site-primary-rgb, 255, 102, 0), 0.15) 0%, transparent 100%);
    border-left-color: var(--dm-accent-text, var(--site-primary));
}

/* Tree mode: locked reply subjects */
.tree-subject-locked {
    color: var(--color-text-secondary, #666);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
}
html.dark-mode .tree-subject-locked {
    color: var(--color-text-secondary);
}

/* ============================================================
   "The Amphitheatre" toggle (Tiger Boards filter row).
   Compact pill-style checkbox that sits next to the existing
   Forum Filter / Sort By controls. Default-on (opt-out model).
   ============================================================ */
.mix-amph-container {
    /* Match neighbors: forum-filter-container is `height:30px; vertical-align:baseline`,
       sort-by-form is `vertical-align:top`. We use vertical-align:top so the pill's TOP
       edge sits on the same line-box top as the sort-by-form, then a 30px height + 0
       margin-top puts the bottom edge level with the 30px-tall forum-filter dropdown. */
    vertical-align: top !important;
    line-height: 1.2;
}
.mix-amph-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    /* Match the neighboring forum-filter dropdown height exactly so the pill, the
       Show forums select, and the Sort By select all share the same top + bottom edge. */
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    background: #fff;
    color: var(--site-secondary, #4a3a8a);
    font-weight: 500;
    transition: background 120ms ease, border-color 120ms ease;
}
.mix-amph-toggle:hover,
.mix-amph-toggle:focus-within {
    background: #f5f0fa;
    border-color: var(--site-primary, #522d80);
}
/* Desktop: the native checkbox is visible inside the pill — clear, classic
   toggle affordance with plenty of horizontal room. Mobile hides it and lights
   up the pill instead (see media query below). */
.mix-amph-toggle__input {
    accent-color: var(--site-primary, #522d80);
    margin: 0;
    cursor: pointer;
}
.mix-amph-toggle__label {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.2;
}
html.dark-mode .mix-amph-toggle {
    background: var(--dm-bg-elevated, rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}
html.dark-mode .mix-amph-toggle:hover,
html.dark-mode .mix-amph-toggle:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--site-primary, #ff7a1a);
}
@media (max-width: 767px) {
    /* Mobile: the toggle sits on row 2 of the header grid alongside the board jump
       and forum filter (see #board-header-inner:has(.forum-filter-container):has(.mix-amph-container)
       rules above, now in a 12-col grid with 50/25/25 split). Width:100% lets the
       pill fill its grid cell; flex layout centers the label inside the pill. */
    .mix-amph-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
    .mix-amph-toggle {
        width: 100%;
        justify-content: center;
        padding: 0 8px !important;
        gap: 0 !important;
    }
    /* Mobile-only: visually hide the checkbox (kept in DOM for state + a11y) and
       let the pill itself "light up" with --site-featured-bg when active. Desktop
       keeps the visible checkbox since space isn't at a premium there. */
    .mix-amph-toggle__input {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .mix-amph-toggle:has(.mix-amph-toggle__input:checked) {
        background: var(--site-featured-bg, #e96f26) !important;
        border-color: var(--site-featured-bg, #e96f26) !important;
        color: #fff !important;
    }
    .mix-amph-toggle:has(.mix-amph-toggle__input:checked):hover,
    .mix-amph-toggle:has(.mix-amph-toggle__input:checked):focus-within {
        filter: brightness(0.92);
    }
    html.dark-mode .mix-amph-toggle:has(.mix-amph-toggle__input:checked) {
        background: var(--site-featured-bg, #e96f26) !important;
        border-color: var(--site-featured-bg, #e96f26) !important;
        color: #fff !important;
    }
    html.dark-mode .mix-amph-toggle:has(.mix-amph-toggle__input:checked):hover,
    html.dark-mode .mix-amph-toggle:has(.mix-amph-toggle__input:checked):focus-within {
        filter: brightness(1.08);
    }
    /* Drop the "The " article on mobile — pill width is at a premium and
       "Amphitheatre" alone reads cleanly. The space is still in the desktop label. */
    .mix-amph-toggle__article {
        display: none !important;
    }
    .mix-amph-toggle__label {
        /* With the checkbox visually gone and "The " hidden, "Amphitheatre" (12 chars)
           comfortably fits a 25%-of-viewport cell at 13px. white-space:nowrap prevents
           an awkward wrap that would push the pill height past the neighboring
           28px-tall MultiCheckBox filter. */
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}

/* ----------------------------------------------------------------------------
   Segmented Sort By control (replaces the legacy "Sort By: <select>" dropdown
   in the responsive header). Two-option mutually-exclusive pill, modeled on
   the .mix-amph-toggle aesthetic so the filter row reads as a coherent set
   of pill-style controls.
   ---------------------------------------------------------------------------- */
.sort-segment {
    box-sizing: border-box;
    display: inline-flex;
    height: 30px;
    padding: 2px;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 999px;
    line-height: 1;
    vertical-align: top;
}
.sort-segment__btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--site-secondary, #4a3a8a);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    justify-content: center;
    line-height: 1;
    padding: 0 12px;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
    white-space: nowrap;
}
.sort-segment__btn:hover {
    color: var(--site-primary, #522d80);
}
.sort-segment__btn.is-active {
    background: #fff;
    color: var(--site-primary, #522d80);
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    font-weight: 600;
}
.sort-segment__btn:focus-visible {
    outline: 2px solid var(--site-primary, #522d80);
    outline-offset: 1px;
}
html.dark-mode .sort-segment {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
}
html.dark-mode .sort-segment__btn {
    color: rgba(255,255,255,0.78);
}
html.dark-mode .sort-segment__btn:hover {
    color: #fff;
}
html.dark-mode .sort-segment__btn.is-active {
    background: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.40);
}
@media (max-width: 767px) {
    /* On mobile the form already stretches via the existing .sort-by-form grid
       rule; let the segment grow to fill the row so each button is a comfortable
       tap target. */
    .sort-by-form--segment {
        justify-content: stretch !important;
    }
    .sort-by-form--segment .sort-segment {
        flex: 1 1 auto;
        height: 29px;
    }
    .sort-by-form--segment .sort-segment__btn {
        flex: 1 1 0;
        font-size: 14px;
        padding: 0 14px;
    }
}

/* Reserve right-edge real-estate for the absolute-positioned settings gear so
   the Sort By dropdown can't slide underneath it on busy rows (which started
   happening once the Amphitheatre toggle stretched the inline content). */
@media (min-width: 768px) {
    #board-header-inner {
        padding-right: 50px !important;
    }
}