/* ============================================
   JP Workplace - Design System
   WCAG AA compliant colour contrasts
   ============================================ */

:root {
    /* John Pye Brand (immutable) */
    --jp-red: #ba141a;
    --jp-red-dark: #8e0f13;
    --jp-red-light: #d94449;

    /* Accent color (user-selectable, defaults to brand red) */
    --accent: #ba141a;
    --accent-dark: #8e0f13;
    --accent-light: #f87171;
    --accent-rgb: 186, 20, 26;

    /* Danger / destructive actions — follows accent theme */
    --danger: var(--accent);
    --danger-hover: var(--accent-dark);

    /* Light Mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f3f5;
    --bg-header: #ba141a;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8f9fa;

    --text-primary: #1a1a1a;
    --text-secondary: #3f454b;    /* darkened from #495057 for WCAG AA compliance at small sizes */
    --text-muted: #595f65;        /* darkened from #6c757d — was 4.54:1 on white, now 5.7:1 (passes AA with margin) */
    --text-on-red: #ffffff;
    --text-link: var(--accent);

    --border-color: #dee2e6;
    --border-light: #e9ecef;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    --btn-primary-bg: var(--accent);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--accent-dark);
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;

    --logo-image: url('/images/logo-red.png');

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* ============================================
   Accent Color Themes
   ============================================ */
[data-accent="teal"]  { --accent: #5fada5; --accent-dark: #4a9690; --accent-light: #8ccac4; --accent-rgb: 95, 173, 165; }
[data-accent="blue"]  { --accent: #5b8ad4; --accent-dark: #4572b8; --accent-light: #89b0e8; --accent-rgb: 91, 138, 212; }
[data-accent="purple"]{ --accent: #9b7bd4; --accent-dark: #7f5dbf; --accent-light: #bda4e4; --accent-rgb: 155, 123, 212; }
[data-accent="green"] { --accent: #5cb87a; --accent-dark: #48a066; --accent-light: #85d09c; --accent-rgb: 92, 184, 122; }
[data-accent="orange"]{ --accent: #e08850; --accent-dark: #c97040; --accent-light: #eba678; --accent-rgb: 224, 136, 80; }
[data-accent="pink"]  { --accent: #d87da0; --accent-dark: #c4648a; --accent-light: #e8a3bc; --accent-rgb: 216, 125, 160; }
[data-accent="slate"] { --accent: #7a8a98; --accent-dark: #64747f; --accent-light: #a0adb8; --accent-rgb: 122, 138, 152; }
[data-accent="steel"] { --accent: #6a9daa; --accent-dark: #558892; --accent-light: #92bcc6; --accent-rgb: 106, 157, 170; }
[data-accent="gold"]  { --accent: #c9a84c; --accent-dark: #b5933a; --accent-light: #dcc07a; --accent-rgb: 201, 168, 76; }

/* Non-default themes: tint UI chrome (scrollbars, borders, muted text) with accent.
   Red (default) stays neutral grey so the site feels professional by default. */
html:not([data-accent="red"]) {
    --text-muted: color-mix(in srgb, var(--accent) 30%, #6c757d);
    --text-secondary: color-mix(in srgb, var(--accent) 15%, #495057);
    --border-color: color-mix(in srgb, var(--accent) 12%, #dee2e6);
    --border-light: color-mix(in srgb, var(--accent) 8%, #e9ecef);
}

html:not([data-accent="red"])[data-theme="dark"] {
    --text-muted: color-mix(in srgb, var(--accent-light) 30%, #6b6f82);
    --text-secondary: color-mix(in srgb, var(--accent-light) 15%, #a8abbe);
    --border-color: color-mix(in srgb, var(--accent) 15%, #282b3a);
    --border-light: color-mix(in srgb, var(--accent) 10%, #1e2130);
}

[data-theme="dark"] {
    /* Modern neutral dark — slate/charcoal palette */
    --bg-primary: #0f1117;
    --bg-secondary: #161921;
    --bg-tertiary: #1e2130;
    --bg-header: #161921;
    --bg-sidebar: #12141c;
    --bg-card: #1a1d2b;
    --bg-input: #1e2130;
    --bg-hover: #252838;

    --text-primary: #e4e6ef;
    --text-secondary: #a8abbe;
    --text-muted: #6b6f82;
    --text-on-red: #ffffff;
    --text-link: var(--accent-light);

    --border-color: #282b3a;
    --border-light: #1e2130;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    --btn-primary-bg: var(--accent);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--accent-dark);
    --btn-secondary-bg: #282b3a;
    --btn-secondary-text: #e4e6ef;

    /* Follows accent theme — lighter variant for readability on dark backgrounds */
    --danger: var(--accent-light);
    --danger-hover: var(--accent);

    --logo-image: url('/images/logo-white.png');
}

/* ============================================
   Base
   ============================================ */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    /* Prevent elastic overscroll that flashes the body background above the header */
    overscroll-behavior-y: none;
    /* Prevent long content (e.g. 600-char URLs) from creating horizontal scroll.
       Use `clip` rather than `hidden`: both block horizontal overflow, but `hidden`
       would create a new scrolling containing block that breaks position: sticky on
       descendants (the sidebar and members panel). `clip` has no such side-effect. */
    overflow-x: hidden; /* fallback for very old browsers */
    overflow-x: clip;
}

*, *::before, *::after {
    touch-action: manipulation;
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport — doesn't shift when mobile address bar hides */
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Defense in depth: html already clips x-overflow, but some mobile browsers
       still create body-level horizontal scroll from fixed/absolute children.
       Use `clip` (not `hidden`) so position: sticky descendants keep working;
       use 100% (not 100vw) so we don't fight the scrollbar gutter width. */
    overflow-x: hidden; /* fallback for very old browsers */
    overflow-x: clip;
    max-width: 100%;
}

main {
    flex: 1;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--btn-primary-hover);
}

::selection {
    background: var(--accent);
    color: #fff;
}

/* ============================================
   Header / Navbar
   ============================================ */
.jp-header {
    background-color: var(--bg-header);
    padding: 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.jp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 46px;
}

.jp-logo img {
    height: 38px;
    width: auto;
    max-width: 220px;
}

@media (max-width: 576px) {
    .jp-logo img { height: 32px; max-width: 180px; }
}

@media (min-width: 992px) {
    .jp-logo img { height: 42px; max-width: 260px; }
}

/* Light mode: red header → show white logo, hide red logo */
.jp-logo .logo-light { display: inline; }
.jp-logo .logo-dark { display: none; }

/* Dark mode: dark header → show red logo, hide white logo */
[data-theme="dark"] .jp-logo .logo-light { display: none; }
[data-theme="dark"] .jp-logo .logo-dark { display: inline; }

.jp-nav {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jp-nav a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    color: var(--text-on-red);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.jp-nav a:hover,
.jp-nav a.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #ffffff;
}

.jp-nav a i {
    font-size: 0.85rem;
}

/* Dark mode header override */
[data-theme="dark"] .jp-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .jp-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--accent) 100%);
    opacity: 0.6;
}

/* User dropdown in header */
.jp-user-menu {
    position: relative;
}

.jp-user-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.jp-user-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.jp-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Theme toggle */
.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.75rem;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile */
.jp-mobile-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.4rem;
}

.jp-mobile-search {
    padding: 0.5rem 1rem;
    background: var(--bg-header);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.jp-mobile-menu {
    display: none;
    background: var(--bg-header);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0;
}

.jp-mobile-menu.show {
    display: block;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
}

.mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Search bar in header */
.jp-search-wrapper {
    position: relative;
    flex: 0 1 320px;
}

.jp-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0 0.75rem;
    transition: all 0.2s;
}

.jp-search-form:focus-within {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.jp-search-form i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.jp-search-form input {
    background: none;
    border: none;
    color: #fff;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    width: 100%;
    outline: none;
}

.jp-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Search results dropdown */
.jp-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1050;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.1s;
}

.search-result-item:hover {
    background: var(--bg-hover);
}

.search-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.search-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.15s;
}

.search-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.search-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.search-tab-count {
    background: var(--bg-tertiary);
    border-radius: 50px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.search-results-body {
    max-height: 340px;
    overflow-y: auto;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .jp-search-wrapper {
        flex: 1;
        margin: 0 0.5rem;
    }
}

/* Emoji picker dropdown */
.emoji-picker-menu.show {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: auto;
    width: 200px;
    padding: 0.5rem;
}

.emoji-pick-btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 1.2rem !important;
    width: auto !important;
}

/* Mention tag in posts */
.mention-tag {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    /* Lighthouse target-size: WCAG 2.5.5 requires min 24×24px tap target.
       Inline-block + vertical padding gives it enough clickable area. */
    display: inline-block;
    padding: 0.15rem 0.1rem;
    min-height: 24px;
    line-height: 1.5;
}

.mention-tag:hover {
    text-decoration: underline;
}

/* Mention autocomplete dropdown */
.mention-dropdown {
    display: none;
    position: absolute;
    z-index: 1060;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 250px;
    overflow-y: auto;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.mention-item:hover,
.mention-item.active {
    background: var(--bg-hover);
}

/* Nav tabs override */
.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    border-bottom-color: var(--border-color);
}

.nav-tabs {
    border-bottom-color: var(--border-color);
}

.jp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ============================================
   Cards
   ============================================ */
.jp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.jp-card:hover {
    box-shadow: var(--shadow-md);
}

.jp-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jp-card-body {
    padding: 1.25rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.jp-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   Stat Cards
   ============================================ */
.jp-stat-card {
    text-align: center;
    padding: 1.5rem;
}

.jp-stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 0.75rem;
}

.jp-stat-card .stat-icon.red { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.jp-stat-card .stat-icon.green { background: rgba(25, 135, 84, 0.1); color: #198754; }
.jp-stat-card .stat-icon.blue { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.jp-stat-card .stat-icon.amber { background: rgba(255, 193, 7, 0.1); color: #cc9a06; }

[data-theme="dark"] .jp-stat-card .stat-icon.red { background: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .jp-stat-card .stat-icon.green { background: rgba(34, 197, 94, 0.12); }
[data-theme="dark"] .jp-stat-card .stat-icon.blue { background: rgba(var(--accent-rgb), 0.12); }
[data-theme="dark"] .jp-stat-card .stat-icon.amber { background: rgba(250, 204, 21, 0.12); }

.jp-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.jp-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ============================================
   Buttons
   ============================================ */
.btn-jp {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-jp:hover {
    background-color: var(--btn-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-jp-outline {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-jp-outline:hover {
    background: var(--accent);
    color: #fff;
}

.btn-jp-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ============================================
   Forms
   ============================================ */
.jp-input {
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.jp-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.jp-input::placeholder {
    color: var(--text-muted);
}

.jp-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    display: block;
}

/* ============================================
   Tables
   ============================================ */
.jp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.jp-table thead th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-color);
}

.jp-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    vertical-align: middle;
}

.jp-table tbody tr:hover {
    background: var(--bg-hover);
}

/* ============================================
   Badges
   ============================================ */
.jp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.jp-badge-red { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.jp-badge-green { background: rgba(25, 135, 84, 0.1); color: #198754; }
.jp-badge-blue { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.jp-badge-gray { background: rgba(108, 117, 125, 0.1); color: var(--text-muted); }
.jp-badge-purple { background: rgba(111, 66, 193, 0.1); color: #6f42c1; }

[data-theme="dark"] .jp-badge-red { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-light); }
[data-theme="dark"] .jp-badge-green { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .jp-badge-blue { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-light); }
[data-theme="dark"] .jp-badge-gray { background: rgba(107, 111, 130, 0.2); color: #8b8fa4; }
[data-theme="dark"] .jp-badge-purple { background: rgba(139, 92, 246, 0.15); color: #b197fc; }

[data-theme="dark"] .post-unread {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, var(--bg-card) 40%);
}

/* ============================================
   Dark Mode — Component Overrides
   Modern neutral dark theme
   ============================================ */

/* Selection color in dark mode */
[data-theme="dark"] ::selection {
    background: var(--accent);
    color: #fff;
}

/* Cards get subtle glow on hover */
[data-theme="dark"] .jp-card {
    border-color: var(--border-color);
}

[data-theme="dark"] .jp-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.05);
}

/* Primary button — blue accent in dark mode */
[data-theme="dark"] .btn-jp {
    background: var(--accent);
    color: #fff;
}

[data-theme="dark"] .btn-jp:hover {
    background: var(--accent-dark);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

/* Outline button — uses accent in dark mode */
[data-theme="dark"] .btn-jp-outline {
    color: var(--accent-light);
    border-color: #3d4259;
}

[data-theme="dark"] .btn-jp-outline:hover {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-light);
    border-color: var(--accent);
}

[data-theme="dark"] .btn-jp-outline.active {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-light);
    border-color: var(--accent);
}

/* Input focus glow — accent */
[data-theme="dark"] .jp-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Sidebar active state — accent */
[data-theme="dark"] .sidebar-link.active {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent-light);
    border-left-color: var(--accent);
}

[data-theme="dark"] .sidebar-link:hover {
    background: var(--bg-hover);
    border-left-color: #3d4259;
}

/* Chat avatar — accent-tinted in dark mode */
[data-theme="dark"] .chat-avatar {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent-light);
}

/* Scrollbar — subtle in dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Post reactions — softer bg */
[data-theme="dark"] .chat-reaction-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .chat-reaction-btn:hover {
    background: var(--bg-hover);
    border-color: #3d4259;
}

[data-theme="dark"] .post-card .reacted {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

/* Text on red for header nav links */
[data-theme="dark"] .jp-nav a {
    color: #c1c5d6;
}

[data-theme="dark"] .jp-nav a:hover,
[data-theme="dark"] .jp-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: var(--accent);
}

/* User button in header */
[data-theme="dark"] .jp-user-btn {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .jp-user-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Unread banner */
[data-theme="dark"] .unread-banner {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
    color: var(--accent-light);
}

/* DM unread card */
[data-theme="dark"] .dm-card-unread {
    border-left-color: var(--accent) !important;
}

/* Locked section styling */
[data-theme="dark"] .locked-link {
    color: var(--text-muted) !important;
}

/* Table styling */
[data-theme="dark"] .jp-table tr:hover td {
    background: var(--bg-hover);
}

/* Text accent class */
[data-theme="dark"] .text-jp-red {
    color: var(--accent-light) !important;
}

/* Bootstrap form controls in dark mode */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Pagination active in dark mode */
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-hover);
}

/* Auth pages / Login forms */
[data-theme="dark"] .jp-auth-banner-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

[data-theme="dark"] .jp-auth-banner-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* Checkbox / switch accent */
[data-theme="dark"] input[type="checkbox"]:checked {
    accent-color: var(--accent);
}

/* ============================================
   Chat / Messages
   ============================================ */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.chat-message:hover {
    background: var(--bg-hover);
}

.chat-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.chat-content {
    flex: 1;
    min-width: 0;
}

.chat-author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.chat-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.chat-text {
    margin: 0.2rem 0 0.3rem;
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

.chat-reactions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.chat-reaction-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
}

.chat-reaction-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}

.chat-reaction-btn.reacted {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.reaction-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.reaction-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.new-post-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastSlideIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.new-post-toast:hover {
    background: var(--accent);
    color: #fff;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.reaction-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.chat-input-area form {
    display: flex;
    gap: 0.5rem;
}

#typing-indicator {
    padding: 0 1rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
    min-height: 1.5em;
}

/* ============================================
   Channel Cards
   ============================================ */
.channel-card {
    cursor: pointer;
    transition: all 0.2s;
}

.channel-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.channel-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.channel-icon.public { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.channel-icon.private { background: rgba(108, 117, 125, 0.1); color: #6c757d; }
.channel-icon.announcements { background: rgba(255, 193, 7, 0.1); color: #cc9a06; }

/* ============================================
   Auth Pages (Login / Register)
   ============================================ */
.auth-page {
    min-height: 100vh;
    /* 100dvh avoids the iOS URL-bar resize jump in Safari, and — combined
       with the safe-area padding below — keeps the centred content clear of
       the iOS status bar / home indicator in standalone PWA mode where
       100vh otherwise extends under both. */
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: flex;
    /* `safe center` falls back to flex-start when the card is taller than the
       viewport (login on a small iPhone in standalone mode) — plain `center`
       would overflow out of the top, clipping the logo. */
    align-items: safe center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
}

.auth-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-logo img {
    height: 40px;
    max-width: 100%;
}

.auth-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* ============================================
   Page Layout
   ============================================ */
.jp-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

.jp-layout-row {
    flex-wrap: nowrap;
}

.jp-main-content {
    min-width: 0;
}

/* Feed column must shrink below content size so long posts don't push siblings out. */
.feed-column {
    min-width: 0;
}

/* Persistent sticky sidebar */
.jp-sidebar-sticky {
    position: sticky;
    top: 60px; /* below header */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    /* When the wheel reaches the sidebar's own scroll end, don't propagate the
       wheel event to the window — otherwise scrolling the nav suddenly starts
       scrolling the feed, which feels buggy. */
    overscroll-behavior: contain;
}

.jp-sidebar-sticky::-webkit-scrollbar {
    width: 4px;
}

.jp-sidebar-sticky::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* ============================================
   Mobile Bottom Navigation
   ============================================ */
.jp-mobile-nav {
    display: none;
}

/* Tablet: collapsed icon-only sidebar (768-991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .jp-sidebar-col {
        width: 60px !important;
        flex: 0 0 60px !important;
        max-width: 60px !important;
    }

    .jp-sidebar-col .jp-sidebar-sticky {
        overflow: hidden;
    }

    .jp-sidebar-col .sidebar-link {
        justify-content: center;
        padding: 0.6rem 0;
        gap: 0;
        border-left: none;
    }

    .jp-sidebar-col .sidebar-link span:not(.jp-badge),
    .jp-sidebar-col .sidebar-section-header span,
    .jp-sidebar-col .jp-card-header span,
    .jp-sidebar-col .jp-card-header small,
    .jp-sidebar-col .sidebar-link .sidebar-link-text {
        display: none;
    }

    .jp-sidebar-col .sidebar-link i {
        font-size: 1.1rem;
        width: auto;
    }

    .jp-sidebar-col .sidebar-link .jp-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 0.55rem;
        padding: 0.1rem 0.25rem;
        min-width: 14px;
    }

    .jp-sidebar-col .sidebar-link {
        position: relative;
    }

    /* Hide non-essential sidebar sections on tablet */
    .jp-sidebar-col .jp-card-header,
    .jp-sidebar-col .sidebar-section-toggle,
    .jp-sidebar-col .sidebar-admin-panel,
    .jp-sidebar-col .sidebar-profile-card {
        display: none;
    }

    .jp-sidebar-col .jp-card {
        border: none;
        background: none;
        box-shadow: none;
    }

    .jp-sidebar-col .jp-card-body {
        padding: 0;
    }

    .jp-sidebar-col .sidebar-link:hover::after {
        content: attr(title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        white-space: nowrap;
        z-index: 1050;
        box-shadow: var(--shadow-md);
        color: var(--text-primary);
    }
}

@media (max-width: 767.98px) {
    .jp-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: var(--bg-card);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 0.4rem 0;
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0.4rem));
    }

    .jp-mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.5rem 0;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        transition: color 0.15s;
    }

    .jp-mobile-nav-item i {
        font-size: 1.3rem;
    }

    .jp-mobile-nav-item.active {
        color: var(--accent);
    }

    .jp-mobile-nav-item:hover {
        color: var(--text-primary);
    }

    /* Prevent iOS Safari auto-zoom on focus.
       Safari zooms in when an input's computed font-size is < 16px.
       Use px (not rem) so the font-size preference system can't push it below 16. */
    .jp-input,
    .jp-search-form input,
    .rich-editor,
    .comment-edit-rich,
    .comment-input,
    textarea,
    select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    [contenteditable="true"] {
        font-size: 16px !important;
    }

    /* Fixed header on mobile — position:fixed is compositor-driven and
       doesn't jitter like position:sticky on mobile browsers */
    .jp-header {
        position: fixed;
        left: 0;
        right: 0;
    }

    /* Padding so content isn't hidden behind the fixed header + feed switcher (top)
       and bottom nav (bottom). --top-offset is header + feed-switcher combined. */
    body {
        padding-top: var(--top-offset, 90px);
        padding-bottom: 80px;
    }

    .jp-footer {
        margin-bottom: 70px;
    }
}

/* Standalone web app (Add to Home Screen) — extra padding for home indicator */
@media (display-mode: standalone) {
    /* Push the header's inner row down below the iOS status bar. The red
       background still extends all the way up (header bg fills the padded
       area), so the status bar sits on a solid-red backdrop rather than
       overlapping the logo. --top-offset auto-updates because the JS in
       site.js measures .jp-header.offsetHeight after CSS is applied. */
    .jp-header {
        padding-top: env(safe-area-inset-top, 0);
    }

    .jp-mobile-nav {
        padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 1.2rem));
    }

    body {
        padding-bottom: 100px;
    }
}

/* Page title header — attaches to card below */
.jp-card.page-title-card {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}
.jp-card.page-title-card + .jp-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Member inline action icons — show on hover */
.member-item .member-actions { display: none !important; }
.member-item:hover .member-actions { display: flex !important; }
.member-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.15s;
}
.member-action-btn:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
}

/* Right members panel — mirrors sidebar sticky behaviour */
.jp-members-sticky {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    scrollbar-width: thin;
    /* Same as the left sidebar: once the wheel hits the top/bottom of this panel,
       don't pass the remaining scroll through to the feed behind it. */
    overscroll-behavior: contain;
}

.jp-members-sticky::-webkit-scrollbar {
    width: 4px;
}

.jp-members-sticky::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.jp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.jp-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jp-page-title i {
    color: var(--accent);
}

/* ============================================
   Welcome / Landing
   ============================================ */
.welcome-hero {
    text-align: center;
    padding: 4rem 1rem;
}

.welcome-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.welcome-hero h1 span {
    color: var(--accent);
}

.welcome-hero p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 1rem auto;
}

/* ============================================
   Accent Color Picker
   ============================================ */
.accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
    position: relative;
}

.accent-swatch:hover {
    transform: scale(1.15);
}

.accent-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card);
}

.accent-swatch.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.55rem;
}

/* Revert/Keep bar (slides in from bottom) */
.accent-revert-bar {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1090;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: bottom 0.3s ease;
    white-space: nowrap;
}

.accent-revert-bar.show {
    bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .accent-revert-bar.show {
        bottom: 5.5rem; /* above mobile nav */
    }
}

.accent-revert-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.accent-revert-btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.accent-revert-btn.keep {
    background: var(--accent);
    color: #fff;
}

.accent-revert-btn.keep:hover {
    background: var(--accent-dark);
}

.accent-revert-btn.revert {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.accent-revert-btn.revert:hover {
    background: var(--bg-hover);
}

/* Mobile accent modal */
.accent-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1070;
    align-items: center;
    justify-content: center;
}

.accent-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    width: 88%;
    max-width: 340px;
    box-shadow: var(--shadow-lg);
}

/* Grid layout for swatches inside the modal */
.accent-picker-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem !important;
    justify-items: center;
}

.accent-picker-grid .accent-swatch {
    width: 36px;
    height: 36px;
}

.accent-picker-grid .accent-swatch.active::after {
    font-size: 0.7rem;
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Non-red themes: accent-tinted scrollbar */
html:not([data-accent="red"]) ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); }
html:not([data-accent="red"]) ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.4); }
html:not([data-accent="red"]) { scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent; }

/* Non-red themes: tint card borders and hover glow */
html:not([data-accent="red"]) .jp-card:hover {
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.08);
}

html:not([data-accent="red"]) .sidebar-link:hover {
    border-left-color: rgba(var(--accent-rgb), 0.3);
}

html:not([data-accent="red"]) .jp-mobile-nav-item.active {
    color: var(--accent);
}

/* ============================================
   Utility
   ============================================ */
.text-jp-red { color: var(--accent) !important; }
.bg-jp-red { background-color: var(--accent) !important; }
.border-jp { border-color: var(--border-color) !important; }

/* Bootstrap overrides for theme compatibility */
.form-control, .form-select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.table { color: var(--text-primary); }

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

.dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.list-group-item {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Pagination */
.pagination .page-link {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ============================================
   Sidebar Links
   ============================================ */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}

.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--border-color);
}

.sidebar-link.active {
    background: rgba(var(--accent-rgb), 0.05);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

/* ============================================
   Post card
   ============================================ */
.post-card .reacted {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}

/* ============================================
   Profile images — always center-top crop for faces
   ============================================ */
img[src*="/uploads/profile-"] {
    object-position: center top;
}

/* ============================================
   Post toolbar — desktop vs mobile
   ============================================ */
.post-extras-desktop { display: contents; }
.post-extras-mobile { display: none !important; }

/* Post composer footer layout */
.post-composer-footer {
    margin-top: 0.5rem;
}

/* Accent-tinted action buttons (Attach, GIF, Poll, Event, etc.) */
.post-composer-footer .post-actions-row label,
.post-composer-footer .post-actions-row button,
.post-composer-footer .post-actions-row .post-extras-desktop button {
    color: var(--accent) !important;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.post-composer-footer .post-actions-row label:hover,
.post-composer-footer .post-actions-row button:hover,
.post-composer-footer .post-actions-row .post-extras-desktop button:hover {
    opacity: 1;
}

.post-composer-footer .post-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Mobile: inline Post button hidden on desktop, Save Draft row shown on desktop */
.post-composer-footer .post-submit-btn { display: none; }
.post-composer-footer .post-submit-desktop { display: flex; }

@media (max-width: 800px) {
    .post-extras-desktop { display: none !important; }
    .post-extras-mobile { display: inline-block !important; }

    /* On mobile: show inline Post, hide desktop submit row */
    .post-composer-footer .post-submit-btn { display: inline-flex !important; }
    .post-composer-footer .post-submit-desktop { display: none !important; }

    /* Compact actions row — single line */
    .post-composer-footer .post-actions-row {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    /* Icon-only action buttons on mobile */
    .post-action-label { display: none; }

    .post-composer-footer .post-actions-row label,
    .post-composer-footer .post-actions-row > button[data-gif-picker] {
        font-size: 1rem;
        padding: 0.3rem 0.5rem;
        min-height: auto;
    }

    .post-composer-footer .post-submit-btn {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ============================================
   Jump to Post overlay (profile/search pages)
   ============================================ */
.post-jump-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
}

.post-context:hover .post-jump-overlay {
    display: flex;
}

.post-jump-btn {
    background: #fff;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.15s;
}

.post-jump-btn:hover {
    transform: scale(1.05);
}

[data-theme="dark"] .post-jump-overlay {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .post-jump-btn {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ============================================
   Like button + hover emoji picker
   ============================================ */
/* Facebook-style flat action buttons */
.post-action-btn-fb {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}

.post-action-btn-fb:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.post-action-btn-fb.liked {
    color: var(--accent);
}

.post-action-btn-fb.liked:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.like-btn-emoji {
    font-size: 1.05rem;
    line-height: 1;
}


/* Emoji picker — floats above the Like button on hover (desktop) or long-press (mobile) */
.like-wrapper {
    position: relative;
}

/* On the like buttons (post + comment): suppress iOS text-selection callout /
   magnifier so the long-press gesture feels like opening a picker, not selecting
   UI text. Applied to both so the gesture behaves identically in either context. */
.like-btn,
.comment-like-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.like-wrapper .emoji-long-press {
    display: none !important;
    position: absolute;
    bottom: 100%;
    left: 0;
    padding-bottom: 6px;
    z-index: 100;
    animation: emoji-popup-in 0.22s cubic-bezier(0.22, 1.25, 0.5, 1) both;
    transform-origin: 20% 100%;
}

/* Mobile browsers can fire :hover on first tap (iOS Safari sticky hover),
   which would open the picker when the user only meant to tap-to-like.
   Gate the hover affordance to real pointer devices. */
@media (hover: hover) and (pointer: fine) {
    .like-wrapper:hover .emoji-long-press {
        display: block !important;
    }
}

/* Button pulse while the long-press picker is opening — gives clear tactile feedback
   that the hold gesture was recognised, even without device vibration. */
@keyframes like-btn-long-press-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
    45%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.12); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.like-btn.long-press-pulse,
.comment-like-btn.long-press-pulse {
    animation: like-btn-long-press-pulse 0.36s ease-out;
}

.emoji-picker-bar {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.3rem 0.4rem;
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
}

.emoji-quick-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: 50%;
    transition: transform 0.1s;
    line-height: 1;
}

@keyframes emoji-popup-in {
    0%   { opacity: 0; transform: translateY(8px) scale(0.6); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tap-toggled emoji popup (mobile long-press + desktop fallback) */
.like-wrapper .emoji-long-press.mobile-show {
    display: flex !important;
}

/* Facebook-style modal picker: while the reaction picker is open, the like
   button underneath is inert — tapping/lifting on it neither fires toggleLike
   nor triggers the floating-thumb animation in site.js. The user either picks
   a reaction or taps outside the wrapper to dismiss. */
.like-wrapper:has(.emoji-long-press.mobile-show) .like-btn {
    pointer-events: none;
}

/* Staggered FB-style entrance animation: each emoji pops in one after another
   whenever the popup becomes visible (display changes from none → flex/block,
   which restarts child animations). */
@keyframes emoji-pop-in {
    0%   { opacity: 0; transform: scale(0.2) translateY(10px); }
    60%  { opacity: 1; transform: scale(1.2) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.emoji-picker-bar .emoji-quick-btn {
    animation: emoji-pop-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.emoji-picker-bar .emoji-quick-btn:nth-child(1)  { animation-delay: 30ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(2)  { animation-delay: 60ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(3)  { animation-delay: 90ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(4)  { animation-delay: 120ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(5)  { animation-delay: 150ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(6)  { animation-delay: 180ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(7)  { animation-delay: 210ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(8)  { animation-delay: 240ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(9)  { animation-delay: 270ms; }
.emoji-picker-bar .emoji-quick-btn:nth-child(10) { animation-delay: 300ms; }

/* Mobile emoji picker: full-width fixed popup pinned near the button that was
   long-pressed. Going `position: fixed` (rather than staying absolute inside the
   like-wrapper) lets the bar span the whole viewport width regardless of where
   the button sits on screen, so the scrollable track is long and the swipe
   gesture feels natural. The vertical `top` is set inline by JS when the popup
   opens. overscroll-behavior keeps the swipe contained — the page never pulls
   sideways. */
@media (max-width: 600px) {
    .like-wrapper .emoji-long-press.mobile-show,
    .comment-like-wrapper .comment-emoji-picker.mobile-show {
        position: fixed;
        left: 0.5rem;
        right: 0.5rem;
        bottom: auto;
        /* JS sets --popup-top via style.setProperty when it measures the
           button's position. When .mobile-show is removed the whole rule
           stops matching, so the popup cleanly reverts to the desktop
           absolute/bottom positioning — no inline-style cleanup needed. */
        top: var(--popup-top, 30%);
        width: auto;
        max-width: none;
        padding: 0;
        z-index: 1080;
    }

    .emoji-picker-bar {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        width: min(320px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        padding: 0.4rem 0.5rem;
    }

    /* When the popup is in mobile-show mode, let the bar fill the popup's
       full width so it stretches edge-to-edge with the viewport. */
    .like-wrapper .emoji-long-press.mobile-show .emoji-picker-bar,
    .comment-like-wrapper .comment-emoji-picker.mobile-show .emoji-picker-bar {
        width: 100%;
        max-width: none;
        padding: 0.55rem 2rem 0.55rem 0.75rem; /* right padding reserves space for the chevron */
    }

    /* Bigger emojis on mobile so the content overflows a typical phone viewport,
       forcing the scroll bar to appear and proving the popup is scrollable. Also
       makes the bar ~70px tall so a thumb has somewhere to land without slipping
       off the top/bottom edges. */
    .emoji-picker-bar .emoji-quick-btn {
        font-size: 1.75rem;
        padding: 0.35rem 0.5rem;
        flex-shrink: 0;
    }

    /* Thicker red accent track so the scroll capability is unmistakable on
       platforms that render custom scrollbars (Android Chrome, desktop). */
    .emoji-picker-bar::-webkit-scrollbar { height: 4px; }
    .emoji-picker-bar::-webkit-scrollbar-track { background: transparent; }
    .emoji-picker-bar::-webkit-scrollbar-thumb {
        background: rgba(var(--accent-rgb), 0.55);
        border-radius: 2px;
    }

    /* Dynamic edge fades driven by the data-scroll attribute that JS sets when
       the popup opens and on every scroll event. Gives an immediate read on
       whether there's more content left, right, or you've hit either end. */
    .emoji-picker-bar[data-scroll="start"] {
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
                mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
    }
    .emoji-picker-bar[data-scroll="middle"] {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%);
    }
    .emoji-picker-bar[data-scroll="end"] {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
    }

    /* Pulsing chevron on the right edge — screams "swipe right". It sits on the
       popup wrapper so it stays put while the bar scrolls under it. Tapping it
       scrolls the bar forward by roughly a page-width rather than closing the
       popup. Hidden at the end of scroll so absence itself says "you've reached
       the end". */
    .emoji-picker-scroll-hint {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border: none;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 0.75rem;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        animation: scroll-hint-bob 1.1s ease-in-out infinite;
        transition: opacity 0.18s ease, transform 0.1s ease;
        z-index: 2;
        -webkit-tap-highlight-color: transparent;
    }
    .emoji-picker-scroll-hint:active {
        transform: translateY(-50%) scale(0.88);
    }
    .emoji-picker-bar[data-scroll="end"] + .emoji-picker-scroll-hint {
        opacity: 0;
    }

    @keyframes scroll-hint-bob {
        0%, 100% { transform: translate(0, -50%); }
        50%      { transform: translate(4px, -50%); }
    }

    /* End-of-scroll flash: a brief accent pulse on the popup the moment you hit
       the right end, so it's unmistakable you've seen everything. */
    .emoji-picker-bar[data-scroll="end"] {
        animation: emoji-bar-end-flash 0.5s ease-out;
    }

    @keyframes emoji-bar-end-flash {
        0%   { box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0); }
        40%  { box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.5); }
        100% { box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0); }
    }
}

.emoji-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================
   Admin nav cards
   ============================================ */
.admin-nav-card {
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border: 1px solid var(--border-color);
}

.admin-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* ============================================
   Events
   ============================================ */
.event-card {
    transition: border-color 0.2s;
}

.rsvp-btn {
    transition: all 0.2s;
    font-family: inherit;
}

.rsvp-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .event-card {
    background: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .rsvp-btn {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   Kudos
   ============================================ */
.kudos-banner {
    transition: background 0.3s;
}

[data-theme="dark"] .kudos-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.06));
}

/* ============================================
   Acknowledgment
   ============================================ */
.ack-banner {
    transition: all 0.3s;
}

/* ============================================
   Save/Bookmark
   ============================================ */
.save-post-btn {
    transition: color 0.2s, transform 0.15s;
}

.save-post-btn:hover {
    transform: scale(1.2);
    color: var(--accent) !important;
}

/* ============================================
   Polls
   ============================================ */
.poll-option {
    font-family: inherit;
    color: var(--text-primary);
}

.poll-option:hover:not([disabled]) {
    border-color: var(--accent) !important;
    transform: translateX(2px);
}

.poll-option:hover:not([disabled]) .poll-bar {
    background: rgba(var(--accent-rgb), 0.06) !important;
}

.poll-voted {
    border-color: var(--accent) !important;
    background: var(--bg-card);
}

.poll-option[disabled] {
    cursor: default;
    opacity: 0.85;
}

[data-theme="dark"] .poll-option {
    background: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .poll-option:hover:not([disabled]) {
    border-color: var(--accent) !important;
}

[data-theme="dark"] .poll-voted .poll-bar {
    background: rgba(var(--accent-rgb), 0.15) !important;
}

[data-theme="dark"] .poll-container {
    background: var(--bg-input);
    border-color: var(--border-color);
}

/* Unread post indicator */
.post-unread {
    border-left: 4px solid var(--accent);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 0%, var(--bg-card) 40%);
    animation: post-unread-pulse 2s ease-in-out;
}

.post-unread:hover {
    border-left-color: var(--accent);
}

.post-new-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border-radius: 3px;
    line-height: 1;
    animation: post-badge-glow 2s ease-in-out;
}

@keyframes post-unread-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.15); }
    50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08); }
    100% { box-shadow: var(--shadow-sm); }
}

@keyframes post-badge-glow {
    0% { opacity: 0.7; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Transition for when post becomes read */
.post-card {
    transition: border-left-color 0.5s ease, background 0.5s ease, box-shadow 0.3s ease;
}

/* ============================================
   Messages / DM
   ============================================ */
.dm-user-option {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.dm-user-option:hover {
    background: var(--bg-hover);
    color: inherit;
    text-decoration: none;
}

.dm-user-option.dm-user-hidden {
    display: none !important;
}

.dm-card-unread {
    border-left: 3px solid var(--accent) !important;
}

.dm-bubble {
    max-width: 70%;
    word-break: break-word;
    padding: 0.6rem 1rem;
    border-radius: 12px;
}

.dm-mine {
    background: var(--accent);
    color: #fff;
}

.dm-theirs {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .dm-mine {
    background: var(--accent);
    color: #fff;
}

[data-theme="dark"] .dm-theirs {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (max-width: 576px) {
    .dm-bubble {
        max-width: 85%;
    }
}

.dm-conversation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.dm-conversation:hover {
    background: var(--bg-hover);
}

.dm-conversation.unread {
    background: rgba(186, 20, 26, 0.03);
}

.dm-conversation.unread .dm-name {
    font-weight: 700;
}

.dm-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.dm-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================
   Toast Animations
   ============================================ */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   GIF Picker
   ============================================ */
.gif-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1070;
    justify-content: center;
    align-items: center;
}

.gif-picker-overlay.show {
    display: flex;
}

.gif-picker {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gif-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.gif-picker-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.gif-picker-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.gif-picker-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0.75rem;
    overflow-y: auto;
    flex: 1;
}

.gif-picker-results img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.gif-picker-results img:hover {
    transform: scale(1.03);
    opacity: 0.85;
}

@media (max-width: 576px) {
    .gif-picker-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Profile Photo
   ============================================ */
.profile-photo-upload {
    position: relative;
    display: inline-block;
}

.profile-photo-upload .photo-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    color: #fff;
}

.profile-photo-upload:hover .photo-overlay {
    opacity: 1;
}

/* ============================================
   User Status Indicator
   ============================================ */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid var(--bg-card);
}

.status-dot.available { background: #198754; }
.status-dot.busy { background: var(--danger); }
.status-dot.away { background: #ffc107; }

/* ============================================
   Onboarding
   ============================================ */
.onboarding-step-panel {
    animation: stepFadeIn 0.3s ease;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stepper-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.stepper-dot.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.stepper-dot.completed {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

.stepper-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    align-self: center;
    transition: background 0.3s ease;
}

.stepper-line.completed {
    background: #198754;
}

/* ============================================
   Mobile Sidebar Collapsible
   ============================================ */
@media (max-width: 991px) {
    .sidebar-section-title {
        cursor: pointer;
        user-select: none;
    }

    .sidebar-section-title::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.6rem;
        margin-left: auto;
    }

    .sidebar-section-title.collapsed::after {
        content: '\f054';
    }

    .sidebar-section-body.collapsed {
        display: none;
    }
}

/* Locked sidebar sections */
.post-placeholder {
    margin-bottom: 1rem;
}

.locked-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-top: 1px solid var(--border-light);
    margin-top: 0.25rem;
    transition: color 0.15s;
}

.locked-section-toggle:hover {
    color: var(--text-primary);
}

.locked-section-body {
    display: none;
}

.locked-section-body.show {
    display: block;
}

.locked-link {
    opacity: 0.5;
}

.locked-link:hover {
    opacity: 0.75;
}

/* Notification bell */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.4rem;
    transition: color 0.3s;
    opacity: 0.5;
}

.notification-bell:hover {
    color: var(--text-primary);
    opacity: 0.8;
}

.notification-bell.has-unread {
    color: #fff;
    opacity: 1;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: -2px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    max-height: 450px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1060;
    display: none;
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
}

.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.notification-dropdown-body {
    overflow-y: auto;
    max-height: 380px;
}

.notification-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.unread {
    background: rgba(var(--accent-rgb), 0.04);
}

.notification-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.notification-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.notif-section-label {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ============================================
   Unread Banner
   ============================================ */
.unread-banner {
    background: rgba(186, 20, 26, 0.08);
    border: 1px solid rgba(186, 20, 26, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 500;
}

/* ============================================
   Bootstrap Override - Identity UI Pages
   Catches any un-scaffolded Identity pages
   ============================================ */
.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15) !important;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-radius: var(--radius-sm);
}

.btn-danger {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-sm);
}

.btn-warning, .btn-info, .btn-success, .btn-outline-primary {
    border-radius: var(--radius-sm);
}

.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-outline-primary:hover {
    background-color: var(--accent) !important;
    color: #fff !important;
}

/* Override Identity UI nav */
.nav-pills .nav-link.active {
    background-color: var(--accent) !important;
}

.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.nav-pills .nav-link:hover {
    color: var(--accent);
}

/* Alert styling */
.alert-success {
    background: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
    color: #198754;
    border-radius: var(--radius-sm);
}

.alert-danger {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(186, 20, 26, 0.2);
    color: var(--accent);
    border-radius: var(--radius-sm);
}

/* ============================================
   Live Validation - Auth Pages
   ============================================ */
.jp-input-error {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(186, 20, 26, 0.12) !important;
}

.jp-input-success {
    border-color: #198754 !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12) !important;
}

.jp-field-error {
    color: var(--accent);
    font-size: 0.78rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Password requirements checklist */
.pw-requirements {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.pw-req-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pw-req-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

.pw-req-item.passed {
    color: #198754;
}

.pw-req-item.failed {
    color: var(--text-muted);
}

.pw-req-icon {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
}

.pw-req-icon.fail {
    color: var(--border-color);
}

.pw-req-icon.pass {
    color: #198754;
}

/* Auth banner (success/error) */
.jp-auth-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
    animation: bannerSlideIn 0.3s ease;
}

.jp-auth-banner-success {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.25);
    color: #198754;
}

.jp-auth-banner-error {
    background: rgba(186, 20, 26, 0.08);
    border: 1px solid rgba(186, 20, 26, 0.2);
    color: var(--accent);
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.jp-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
}

/* ============================================
   Mobile User Avatar Button (header)
   ============================================ */
.jp-mobile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.jp-mobile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.jp-mobile-avatar .initials {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.jp-mobile-avatar-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg-header);
}

.jp-mobile-dropdown {
    min-width: 260px;
}

/* Mobile notification modal */
.mobile-notif-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.mobile-notif-list {
    overflow-y: auto;
    max-height: 320px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Fade hint at bottom to indicate scrollability */
.mobile-notif-list::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 24px;
    background: linear-gradient(transparent, var(--bg-card));
    pointer-events: none;
}

.jp-mobile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

/* ============================================
   Mobile Feed Switcher
   ============================================ */
.mobile-feed-switcher {
    position: fixed;
    top: var(--header-height, 90px);
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.5rem 0 0.25rem;
    background: var(--bg-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Sidebar Mobile Accordion
   ============================================ */
.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.sidebar-collapse-toggle:hover {
    background: var(--bg-hover);
}

.sidebar-collapse-icon {
    margin-left: auto;
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.sidebar-collapse-toggle.open .sidebar-collapse-icon {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    .sidebar-collapsible-group {
        display: none;
    }
    .sidebar-collapsible-group.show {
        display: block;
    }
}

/* ============================================
   Responsive — Tablet (max 767px)
   ============================================ */
@media (max-width: 767px) {
    .jp-page {
        padding: 1rem;
    }

    .chat-container {
        height: calc(100vh - 260px);
        min-height: 300px;
    }

    .chat-messages {
        padding: 0.5rem;
    }

    .chat-input-area {
        padding: 0.5rem;
    }

    .chat-message {
        gap: 0.5rem;
        padding: 0.3rem 0.5rem;
    }

    .jp-table thead th,
    .jp-table tbody td {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    .jp-table thead th {
        font-size: 0.7rem;
    }

    .jp-page-title {
        font-size: 1.25rem;
    }
}

/* ============================================
   Responsive — Small phones (max 576px)
   ============================================ */
@media (max-width: 576px) {
    .jp-page {
        padding: 0.75rem;
    }

    .jp-card-body {
        padding: 0.75rem;
    }

    .jp-card-header {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .jp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .jp-page-title {
        font-size: 1.15rem;
    }

    .auth-card {
        padding: 1.5rem;
        margin: 0 0.5rem;
        border-radius: var(--radius-md);
    }

    .notification-dropdown {
        position: fixed;
        top: 52px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: 70vh;
    }

    .jp-stat-card {
        padding: 1rem;
    }

    .jp-stat-card .stat-icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .welcome-hero {
        padding: 2rem 0.5rem;
    }

    .welcome-hero h1 {
        font-size: 1.5rem;
    }

    .welcome-hero p {
        font-size: 0.95rem;
    }

    .jp-table thead th,
    .jp-table tbody td {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }

    .channel-header-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .chat-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.7rem;
    }

    /* Global minimum touch targets */
    .btn-jp, .btn-jp-outline, .btn-jp-secondary,
    button[type="submit"], .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Profile page — stack vertically */
    .profile-header-flex {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem !important;
    }

    .profile-header-flex .profile-info {
        min-width: 0 !important;
    }

    .profile-header-flex .profile-stats {
        justify-content: center;
        gap: 1rem !important;
    }

    .profile-header-flex .profile-actions {
        justify-content: center;
    }

    /* DM bubbles wider on mobile */
    .chat-message > div[style*="max-width: 70%"] {
        max-width: 85% !important;
    }

    /* Channel card tighter gap */
    .channel-card .jp-card-body {
        gap: 0.6rem !important;
    }

    /* Post creation — compact on small screens */
    .post-actions-row {
        gap: 0.25rem;
    }

    .post-actions-row label,
    .post-actions-row > button[data-gif-picker] {
        min-height: auto;
        padding: 0.3rem 0.4rem;
        display: inline-flex;
        align-items: center;
    }

    /* Hide composer avatar on mobile for more space */
    .post-composer-avatar { display: none !important; }

    /* Hide formatting toolbar on small screens */
    .post-format-toolbar { display: none !important; }

    /* Admin table action buttons bigger */
    .jp-table .btn-jp,
    .jp-table .btn-jp-outline,
    .jp-table .btn-jp-secondary {
        min-height: 36px;
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   Responsive — Very narrow (max 374px)
   ============================================ */
@media (max-width: 374px) {
    .jp-header-inner {
        padding: 0 0.5rem;
    }

    .jp-header-actions {
        gap: 0.35rem;
    }

    .jp-logo img {
        height: 30px;
    }

    .theme-toggle {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    .notification-bell {
        font-size: 0.95rem;
        padding: 0.3rem;
    }

    .jp-mobile-avatar {
        width: 36px;
        height: 36px;
    }

    .jp-mobile-search {
        padding: 0.4rem 0.5rem;
    }

    .jp-page {
        padding: 0.5rem;
    }
}

/* ==========================================
   Scroll to Top Button
   ========================================== */
.scroll-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1020;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

@media (max-width: 767.98px) {
    .scroll-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 38px;
        height: 38px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   Comments System
   ========================================== */

/* Comment input at top of section */
.post-comments-section .comment-input-wrapper {
    padding: 0.6rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

/* Container that holds all comments under a post */
.comments-container {
    padding: 0 1.5rem;
}

/* "View more comments" link */
.view-all-comments-btn {
    display: block;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 1.5rem;
    cursor: pointer;
    text-align: left;
}

.view-all-comments-btn:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Single comment row — wraps so below-bubble content goes underneath */
.comment-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-light);
}

.comment-item:first-child {
    border-top: none;
}

/* Below-bubble takes full width on its own line */
.comment-below-bubble {
    flex-basis: 100%;
}

/* Nested replies */
.comment-item.comment-reply {
    margin-left: 2.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-light);
}

/* Avatar — larger on desktop */
.comment-avatar-link {
    text-decoration: none;
    flex-shrink: 0;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.7rem;
    object-fit: cover;
}

/* Comment body — everything to the right of the avatar */
.comment-body {
    flex: 1;
    min-width: 0;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
}

.comment-body.comment-own {
    background: rgba(var(--accent-rgb), 0.08);
    border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}

/* Name + time row */
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.comment-author {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    /* Ensure min 24×24 tap target for WCAG / Lighthouse target-size audit. */
    display: inline-block;
    padding: 0.2rem 0;
    min-height: 24px;
    line-height: 1.4;
}

.comment-author:hover {
    text-decoration: underline;
}

.comment-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.comment-edited-tag {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Reply-to indicator */
.comment-reply-indicator {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.comment-reply-indicator i {
    font-size: 0.6rem;
}

/* Comment text content */
.comment-text {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

/* Attachments */
.comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.comment-attachment-img {
    max-width: 220px;
    max-height: 160px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.comment-attachment-file {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

/* ---- Actions row (Like · Reply · Edit · Delete) ---- */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.15rem 0.25rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.comment-action-btn:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.comment-action-btn.active {
    color: var(--accent);
}

.comment-action-btn.active i {
    color: var(--accent);
}

.comment-action-danger {
    color: var(--text-muted);
}

.comment-action-danger:hover {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.08);
}

/* Delete form sits inline inside the actions row */
.comment-delete-form {
    display: inline-flex;
}

/* Emoji reaction wrapper */
.comment-react-wrapper {
    position: relative;
    display: inline-flex;
}

/* Emoji picker bar (the popup) */
.comment-emoji-bar {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.2rem 0.3rem;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}

.comment-emoji-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.1rem 0.15rem;
    border-radius: 50%;
    transition: transform 0.1s;
}

.comment-emoji-btn:hover {
    transform: scale(1.3);
}

/* Below-bubble — time on the left, reaction icons + action links follow */
.comment-below-bubble {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0 0 calc(36px + 0.75rem);
    flex-wrap: wrap;
}

.comment-below-bubble > .comment-time,
.comment-below-bubble > .comment-edited-tag {
    flex-shrink: 0;
}

.comment-reaction-summary {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.comment-reaction-summary:hover .comment-like-count {
    text-decoration: underline;
}

.comment-like-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    margin-left: 0.25rem;
}

/* Comment like hover emoji picker */
.comment-like-wrapper {
    position: relative;
}

.comment-emoji-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 100;
    padding-bottom: 4px;
}

/* Hover picker only on real pointer devices — mobile browsers can fire
   :hover on first tap, which would open the picker when the user only
   meant to tap-to-like. Long-press still opens it via .mobile-show. */
@media (hover: hover) and (pointer: fine) {
    .comment-like-wrapper:hover .comment-emoji-picker {
        display: block !important;
    }
}

/* Tap-toggled emoji popup (mobile long-press) — mirrors .emoji-long-press.mobile-show
   so the same long-press gesture can open either a post or comment picker. */
.comment-like-wrapper .comment-emoji-picker.mobile-show {
    display: flex !important;
}

/* Same Facebook-style modal behaviour for comment likes — the comment like
   button is inert while its picker is open. */
.comment-like-wrapper:has(.comment-emoji-picker.mobile-show) .comment-like-btn {
    pointer-events: none;
}

.comment-like-emoji {
    font-size: 0.85rem;
}

.comment-like-label {
    font-size: inherit;
}

/* Dot separator between action links */
.comment-action-dot {
    color: var(--text-muted);
    font-size: 0.6rem;
    user-select: none;
}

/* ---- Collapsible replies ---- */
.replies-section {
    flex-basis: 100%;
}

.show-replies-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    padding: 0.25rem 0.5rem;
    margin-left: 2.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.show-replies-btn:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent-dark);
}

.show-replies-btn .show-replies-icon {
    font-size: 0.72rem;
}

.show-replies-btn .show-replies-chevron {
    font-size: 0.55rem;
    transition: transform 0.2s ease;
}

.show-replies-btn.expanded .show-replies-chevron {
    transform: rotate(180deg);
}

.replies-container {
    padding-top: 0.15rem;
}

/* ---- Floating emoji reaction animation ---- */
@keyframes emojiFloat {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    50%  { opacity: 0.8; transform: translateY(-20px) scale(1.4); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

.emoji-float {
    position: fixed;
    pointer-events: none;
    font-size: 1.4rem;
    z-index: 200;
    animation: emojiFloat 0.6s ease-out forwards;
}

/* ---- Reply typing indicator ---- */
.reply-typing-indicator {
    margin-left: 2.5rem;
    padding: 0.15rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: italic;
}

/* ---- Link preview card ---- */
.link-preview-card {
    display: flex;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: 0.4rem;
    background: var(--bg-secondary);
    text-decoration: none;
    color: inherit;
    max-width: 400px;
    transition: border-color 0.15s ease;
}

.link-preview-card:hover {
    border-color: var(--accent);
}

.link-preview-img {
    width: 80px;
    min-height: 60px;
    object-fit: cover;
    flex-shrink: 0;
}

.link-preview-body {
    padding: 0.4rem 0.6rem;
    min-width: 0;
    overflow: hidden;
}

.link-preview-site {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.link-preview-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-preview-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Comment seen-by indicator ---- */
.comment-seen-by {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
}

.seen-by-avatars {
    display: inline-flex;
}

.seen-by-avatars img,
.seen-by-avatars .seen-by-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-card);
    margin-left: -4px;
    object-fit: cover;
}

.seen-by-avatars > :first-child {
    margin-left: 0;
}

.seen-by-dot {
    background: var(--bg-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    font-weight: 700;
    color: var(--text-muted);
}

.seen-by-count {
    font-size: 0.65rem;
    color: var(--text-muted);
    cursor: default;
}

/* ---- Input areas (add comment + reply forms) ---- */

/* Typing indicator */
.comment-typing-indicator {
    padding-left: 3.25rem;
    display: none;
    padding-top: 0.3rem;
}

/* Add-comment input at bottom of post */
.comment-input-wrapper {
    padding-left: 3.25rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

.comment-input-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.comment-input-row .comment-input {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.comment-attach-btn {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}

.comment-attach-btn:hover {
    color: var(--text-secondary);
}

.comment-gif-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}

.comment-gif-btn:hover {
    color: var(--text-secondary);
}

.comment-submit-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.comment-attach-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

/* Reply form (inside a comment) */
.comment-reply-form {
    margin-top: 0.4rem;
}

.comment-reply-input-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

/* Edit form (inside a comment) */
.comment-edit-form {
    margin-top: 0.35rem;
}

.comment-edit-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

/* ============================================
   Edit Modal (post + comment edit lightbox)
   Themed with the active --accent CSS var so whichever colour the user has
   selected via [data-accent="…"] automatically carries through.
   ============================================ */
.jp-edit-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1070;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    animation: jp-edit-modal-overlay-in 0.18s ease-out;
}

@keyframes jp-edit-modal-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.jp-edit-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
    width: 100%;
    max-width: 680px;
    /* Cap height so the modal never exceeds the viewport — internal body
       scrolls instead. Combined with flex centering this keeps the card
       perfectly centered regardless of content length. */
    max-height: calc(100vh - 3rem);
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: jp-edit-modal-in 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes jp-edit-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.jp-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07) 0%, rgba(var(--accent-rgb), 0.02) 100%);
}

.jp-edit-modal-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.jp-edit-modal-title i {
    color: var(--accent);
    font-size: 0.95rem;
}

.jp-edit-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.jp-edit-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.jp-edit-modal-body {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    max-height: min(70vh, 600px);
}

.jp-edit-modal-body .rich-editor,
.jp-edit-modal-body .comment-edit-rich {
    min-height: 6rem;
    max-height: 40vh;
    font-size: 0.95rem;
    padding: 0.65rem 0.8rem;
    line-height: 1.55;
}

.jp-edit-modal-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-tertiary);
}

.jp-edit-modal-footer .btn-jp,
.jp-edit-modal-footer .btn-jp-outline {
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
}

/* Prevent the page scrolling behind the modal when open */
body.jp-modal-open {
    overflow: hidden;
}

/* Mobile: still vertically centered (or top-aligned via safe center when tall). */
@media (max-width: 600px) {
    .jp-edit-modal-overlay {
        padding: 1rem 0.5rem;
    }
    .jp-edit-modal-content {
        max-width: 100%;
    }
    .jp-edit-modal-header {
        padding: 0.8rem 1rem;
    }
    .jp-edit-modal-body {
        padding: 0.9rem 1rem;
        max-height: none;
    }
    .jp-edit-modal-footer {
        padding: 0.75rem 1rem;
    }
}

/* ---- Comment Reply Modal ---- */
.reply-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.reply-modal-content {
    width: 90%;
    max-width: 520px;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    animation: replyModalIn 0.2s ease-out;
}

@keyframes replyModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.reply-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.95rem;
}

.reply-modal-title {
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.reply-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}

.reply-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.reply-modal-body {
    padding: 1rem 1.1rem;
}

.reply-modal-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.reply-modal-input-row .jp-input {
    flex: 1;
}

.reply-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-light);
}

.reply-modal-toolbar .comment-attach-btn,
.reply-modal-toolbar .comment-gif-btn {
    transition: color 0.15s;
}

.reply-modal-toolbar .comment-attach-btn:hover,
.reply-modal-toolbar .comment-gif-btn:hover {
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .reply-modal-content {
        width: 95%;
        max-width: none;
    }
}

/* ---- Mobile comment adjustments ---- */
@media (max-width: 767.98px) {
    .comments-container {
        padding: 0 1rem;
    }

    .comment-typing-indicator,
    .comment-input-wrapper {
        padding-left: 1rem;
    }

    .comment-item {
        gap: 0.5rem;
        padding: 0.5rem 0;
    }

    .comment-item.comment-reply {
        margin-left: 1rem;
    }

    .show-replies-btn,
    .reply-typing-indicator {
        margin-left: 1rem;
    }

    .comment-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.6rem;
    }

    .comment-body {
        padding: 0.4rem 0.6rem;
    }

    .comment-author { font-size: 0.8rem; }
    .comment-text { font-size: 0.85rem; }

    .comment-below-bubble {
        padding-left: calc(28px + 0.5rem) !important;
    }

    .comment-attachment-img {
        max-width: 180px;
        max-height: 130px;
    }
}

/* ==========================================
   Post Card Layout & Spacing
   ========================================== */

/* More generous card body padding */
.post-card .jp-card-body {
    padding: 1.4rem 1.5rem;
}

/* Post reactions / action bar area */
.post-card .post-reactions {
    padding: 0.6rem 1.5rem 0.75rem;
    border-top: 1px solid var(--border-light);
}

/* ── Reaction summary row (Facebook-style) ── */
.post-reaction-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
}

.reaction-emoji-stack {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.reaction-emoji-stack:hover .like-count {
    text-decoration: underline;
}

/* Reaction emoji in summary stack */
.reaction-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.85rem;
    line-height: 1;
    margin-right: -2px;
    position: relative;
}

/* Like icon: accent circle with white thumbs-up */
.reaction-summary-icon.like-icon {
    width: 22px;
    height: 22px;
    background: var(--accent);
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    font-size: 0;
}
.reaction-summary-icon.like-icon::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f164';
    font-size: 0.6rem;
    color: #fff;
}

.reaction-summary-icon:first-child { z-index: 3; }
.reaction-summary-icon:nth-child(2) { z-index: 2; }
.reaction-summary-icon:nth-child(3) { z-index: 1; }

.post-reaction-summary .like-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-left: 0.5rem;
}

.reaction-meta-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reaction-comment-count,
.reaction-seen-count {
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.reaction-comment-count:hover,
.reaction-seen-count:hover {
    text-decoration: underline;
}

/* ── Action bar (Like, Save, Comment — flat text buttons) ── */
/* Horizontal padding = card edge (1.5rem) minus the child button's own 0.75rem padding,
   so the visible icon aligns with the reaction emoji and comment input edge. */
.post-action-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-light);
    padding: 0.2rem 0.75rem;
    margin-bottom: 0.4rem;
}

/* Post owner action buttons (Edit / Delete / Pin) — placed below content,
   aligned flush with the interaction zone so edges line up uniformly. */
.post-owner-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Reaction pills row (always rendered) */
.post-reaction-pills {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.post-reaction-pills:not(:has(.reaction-btn)) {
    margin-top: 0;
}

/* Comment section spacing from reactions */
.post-card .comments-container {
    padding: 0 1.5rem;
    margin-top: 0;
    padding-top: 0.5rem;
}

.post-card .comment-typing-indicator {
    padding-left: 1.5rem;
    padding-bottom: 0.75rem;
}

/* Drag-and-drop active highlight on forms */
.jp-drop-active {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: rgba(var(--accent-rgb), 0.04) !important;
    border-radius: var(--radius-md);
    transition: outline 0.15s, background 0.15s;
}

/* Post attachment preview (used in post creation form) */
.post-attach-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.post-attach-preview-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.post-attach-preview-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.post-attach-preview-item .remove-attach {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.1rem 0.2rem;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}

.post-attach-preview-item .remove-attach:hover {
    color: var(--danger);
}

/* ---- Rich text editor (contenteditable) ---- */
.rich-editor {
    line-height: 1.6;
    font-size: 0.95rem;
    word-break: break-word;
}

/* Toolbar button active state — shows which formatting is applied at the cursor */
.post-format-toolbar button.format-active {
    background: rgba(var(--accent-rgb), 0.15) !important;
    color: var(--accent) !important;
}

.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.rich-editor:focus,
.comment-edit-rich:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

.rich-editor img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    display: block;
    margin: 0.25rem 0;
}

/* Post content text — break long URLs/words so they don't blow out the layout */
.post-content-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---- "See more" post truncation ---- */
.post-content-wrapper.truncated .post-content-text {
    max-height: 12em; /* ~8 lines */
    overflow: hidden;
    position: relative;
}

.post-content-wrapper.truncated .post-content-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.post-see-more {
    display: inline-block;
    margin-top: 0.25rem;
    background: none;
    border: none;
    color: var(--text-link);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.post-see-more:hover {
    text-decoration: underline;
}

/* ---- Mobile post adjustments ---- */
@media (max-width: 767.98px) {
    .post-card .jp-card-body {
        padding: 1rem;
    }

    .post-card .post-reactions {
        padding: 0.5rem 1rem 0.6rem;
    }

    .post-card .comments-container {
        padding: 0 1rem;
    }

    .post-card .comment-typing-indicator {
        padding-left: 1rem;
        padding-bottom: 0.6rem;
    }

    .post-reaction-summary {
        padding: 0.5rem 1rem;
    }

    .post-action-bar {
        padding: 0.2rem 0.25rem;
    }

    .post-comments-section .comment-input-wrapper {
        padding: 0.6rem 1rem;
    }

    .view-all-comments-btn {
        padding: 0.4rem 1rem;
    }
}

/* ============================================
   Channel Members Panel
   ============================================ */
.channel-members-panel {
    display: none;
    transition: width 0.2s ease;
}

.channel-members-panel.show {
    display: block;
}

@media (max-width: 991px) {
    .channel-members-panel {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        z-index: 1050;
        width: 260px !important;
        border-radius: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .channel-members-panel .jp-card-body {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }
}

/* ── Accessibility: larger touch targets (44x44px minimum) ── */
.comment-action-btn,
.comment-emoji-btn,
.comment-like-btn,
.comment-emoji-picker .comment-emoji-btn,
.emoji-long-press button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Font size preference ── */
html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="medium"] { font-size: 16px; }
html[data-font-size="large"] { font-size: 18px; }

/* ── Former Employee badge ── */
.badge-former-employee {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 600;
}

/* ── Post category badges ── */
.post-category-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ---- Pull-to-refresh indicator (mobile) ---- */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0;
    transform: translate(-50%, -50px);
    z-index: 1090;
    pointer-events: none;
}

.ptr-indicator .ptr-arrow {
    transition: transform 0.2s ease, opacity 0.15s;
}

.ptr-indicator .ptr-spin {
    position: absolute;
    opacity: 0;
    animation: ptr-spin 0.8s linear infinite;
    animation-play-state: paused;
}

.ptr-indicator.ready {
    color: var(--accent);
}

.ptr-indicator.ready .ptr-arrow {
    transform: rotate(180deg);
}

.ptr-indicator.refreshing .ptr-arrow {
    opacity: 0;
}

.ptr-indicator.refreshing .ptr-spin {
    opacity: 1;
    animation-play-state: running;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

/* Prevent Chrome/Android's native pull-to-refresh from racing ours on small
   screens. We still let the page bounce horizontally and allow normal vertical
   scrolling — only the top-edge overscroll is intercepted. */
@media (max-width: 900px) {
    html, body {
        overscroll-behavior-y: contain;
    }
}