:root {
    --bg: #0b0d12;
    --bg-alt: #111826;
    --panel: #121720;
    --panel-strong: rgba(15, 23, 35, 0.92);
    --panel-soft: #171d28;
    --border: #252d3b;
    --border-strong: rgba(162, 194, 245, 0.3);
    --text: #f3f5f8;
    --muted: #97a3b6;
    --muted-soft: #7f95b6;
    --radius: 16px;
    --radius-soft: 12px;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    --glass: saturate(140%) blur(14px);
    /* Button tokens */
    --btn-radius: 12px; /* modern rounded rectangle */
    --btn-radius-pill: 999px; /* for compact pills */
    --btn-padding: 10px 14px;
    --accent-600: #2563eb; /* strong blue */
    --accent-500: #3b82f6;
    --accent-400: #60a5fa;
    --accent-shadow: 0 10px 24px rgba(59,130,246,0.18);
    --danger-500: #ef4444;
    --ghost: rgba(255,255,255,0.04);
    --btn-glow: 0 8px 24px rgba(59,130,246,0.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Inter, Segoe UI, Roboto, system-ui, sans-serif;
}

body {
    background: radial-gradient(circle at 20% 0%, #131824 0%, #0b0d12 45%, #090b0f 100%);
    color: var(--text);
    min-height: 100vh;
    padding: 24px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.blitz-header,
.panel {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: var(--glass);
}



.blitz-header {
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

h1 {
    font-family: Inter, Segoe UI, Roboto, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subtitle {
    display: inline-flex;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--muted-soft);
    border: 1px solid var(--border);
    font-size: 0.82rem;
}

.panel {
    padding: 18px;
    margin-bottom: 14px;
}

h2 {
    margin-bottom: 10px;
    font-size: 1.08rem;
    font-weight: 700;
}

.feedback-form-grid {
    display: grid;
    gap: 10px;
}

/* Make the short title input occupy one third of the form width on desktop
   while allowing it to collapse to full width on narrow viewports. */
#feedbackTitleInput {
    width: 33.3333%;
    max-width: 100%;
    min-width: 180px;
}

@media (max-width: 760px) {
    #feedbackTitleInput { width: 100%; min-width: 0; }
}

.feedback-form-grid > button,
.feedback-form-grid > .primary-btn {
    justify-self: start;
    width: auto;
    min-width: 140px;
}

input,
textarea,
select {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-strong);
    color: var(--text);
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Show restricted cursor when controls are disabled to match disabled buttons */
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(121, 175, 255, 0.14);
}

textarea {
    resize: vertical;
}

.primary-btn,
.action-btn {
    border: 0;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
    background: linear-gradient(180deg, var(--accent-500), var(--accent-600));
    color: #fff;
    box-shadow: var(--accent-shadow);
}

.action-btn {
    padding: 8px 10px;
    font-size: 0.88rem;
}

.action-btn.danger {
    background: linear-gradient(180deg, #ff7a7a, #ef4444);
    color: #fff;
    box-shadow: 0 10px 20px rgba(239,68,68,0.14);
}

.action-btn.ghost {
    background: var(--ghost);
    color: var(--muted-soft);
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: none;
}

.action-btn.ghost:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    transform: translateY(-1px);
}

.action-btn.danger:hover {
    transform: translateY(-1px);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-glow);
}

.primary-btn:focus-visible,
.action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

.reaction-popover {
    /* absolutely positioned to the right of the toggle so it overlays content */
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: 0;
    background: var(--panel-strong);
    border: 1px solid var(--border);
    padding: 6px 8px;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.36);
    opacity: 0;
    transform: translateX(-6px) translateY(-50%) scale(0.99);
    transform-origin: left center;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 1050;
    min-width: 140px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: visible;
}
    .feedback-reactions.open .reaction-popover { opacity: 1; transform: translateX(0) translateY(-50%) scale(1); visibility: visible; pointer-events: auto; }
    .reaction-list { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }

    /* Ensure compact horizontal layout for the popover buttons */
    .feedback-reactions .reaction-popover .reaction-list { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; }
    .feedback-reactions .reaction-popover .reaction-btn { padding: 6px 6px; min-width: 36px; height: 36px; border-radius: 8px; justify-content: center; }
    .feedback-reactions .reaction-popover .reaction-btn .reaction-emoji { font-size: 18px; display: inline-block; line-height: 1; }


.feedback-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-row { display: inline-flex; gap: 8px; align-items: center; }

/* Hide select controls by default; show when toolbar is in selection-mode */
.feedback-toolbar .select-controls {
    display: none;
}
.feedback-toolbar.selection-mode .select-controls {
    display: inline-flex;
}

.search-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(15, 23, 35, 0.88);
    padding: 2px 10px;
    min-width: 280px;
}

.search-icon {
    opacity: 0.75;
    font-size: 0.85rem;
}

.search-wrap #feedbackSearchInput {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 10px 4px;
    min-width: 0;
    width: 100%;
}

.pill-select {
    border-radius: 999px;
    padding-right: 30px;
}

/* Styled status dropdown for feedback items (Open / Fixed / Ignored) */
.feedback-status-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-strong), var(--panel));
    color: var(--text);
    padding: 8px 36px 8px 12px; /* room for custom arrow */
    border-radius: 10px;
    min-width: 92px;
    height: 36px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%2397a3b6" d="M5 7l5 5 5-5z"/></svg>');
}

.feedback-status-select:hover {
    box-shadow: var(--btn-glow);
    transform: translateY(-1px);
}

.feedback-status-select:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 4px rgba(121, 175, 255, 0.14);
}

.feedback-status-select option {
    background: var(--panel);
    color: var(--text);
}

/* When used inside the feedback card controls, keep spacing tidy */
.feedback-head-right .feedback-status-select {
    margin-left: 8px;
}

#feedbackSearchInput {
    min-width: 260px;
}

.feedback-list,
.activity-list {
    display: grid;
    gap: 10px;
}

.feedback-list {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}

.activity-list {
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 4px;
}

.feedback-card {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(25, 37, 57, 0.58), rgba(17, 25, 38, 0.42));
    border-radius: 16px;
    padding: 14px 14px 14px 36px; /* reserve smaller space for checkbox */
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.feedback-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.feedback-head {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.feedback-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feedback-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.feedback-select-wrap {
    /* Hidden by default on desktop (no reserved space). On hover
       the checkbox is shown and positioned absolutely so it doesn't
       shift the title. On small screens the control becomes static
       and inline again. */
    display: none;
    position: absolute;
    left: 12px; /* place inside card (closer to title) */
    top: 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
    z-index: 8;
}

.feedback-select-wrap input {
    width: 16px;
    height: 16px;
    accent-color: #6ea8fe;
}

.feedback-select-wrap span { display: none; }

.feedback-card:hover .feedback-select-wrap,
.feedback-card:focus-within .feedback-select-wrap {
    display: inline-flex;
}

/* Mobile: hide select / three-dot controls by default and show
   them only when the card is tapped. When visible they overlay
   the card content so no layout space is needed. */
@media (max-width: 760px) {
    .feedback-select-wrap,
    .more-menu-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide the status select (Open/Fixed/Ignored) by default on mobile */
    .feedback-status-select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* When a card has the explicit control class, reveal controls
       and position them absolutely so they overlay the text. */
    .feedback-card.show-more-controls .feedback-select-wrap,
    .feedback-card.show-more-controls .more-menu-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        right: 12px;
        top: 10px;
        z-index: 60;
    }

    .feedback-card.show-more-controls .feedback-status-select {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        right: 56px; /* place to the left of the three-dot button */
        top: 10px;
        z-index: 60;
    }

    /* Ensure the popup panel also overlays the card content */
    .feedback-card.show-more-controls .more-menu-panel {
        position: absolute !important;
        right: 12px !important;
        top: 40px !important;
        left: auto !important;
        width: auto !important;
        min-width: 140px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.36);
    }

    /* When controls are revealed, ensure they are absolutely positioned
       and do not affect layout or header height. */
    .feedback-card.show-more-controls .feedback-head-right {
        position: absolute !important;
        right: 12px !important;
        top: 8px !important;
        z-index: 65 !important;
        display: flex !important;
        align-items: center !important;
    }
}

.feedback-title {
    font-weight: 700;
    font-size: 1rem;
}

/* Mobile: ensure titles start from the card's top-left in all scenarios */
@media (max-width: 760px) {
    /* Remove the desktop reserved left gutter so the title is flush */
    .feedback-card {
        padding-left: 14px; /* match horizontal padding used elsewhere */
    }

    /* When the compact/no-title variants are used, keep consistent left padding */
    .feedback-card.no-title {
        padding-left: 14px;
    }

    /* Make sure the head row doesn't vertically center the title (keep it at top) */
    .feedback-head {
        align-items: flex-start;
        position: relative; /* container for absolute title */
        padding-top: 6px; /* small reserve so title doesn't overlap content */
        min-height: 36px; /* stable header height so overlays don't shift content */
    }

    /* Ensure the visible title always sits at the card's top-left, above overlays */
    .feedback-title {
        display: block;
        margin: 0;
        padding: 0;
        left: 14px;
        top: 6px;
        position: absolute;
        right: 64px; /* leave room for overlayed controls on the right */
        z-index: 70; /* sit above any overlayed controls */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Prevent the left-side content group from forcing the title to the center */
    .feedback-head-left {
        min-width: 0;
        align-items: flex-start;
        gap: 8px;
    }

    /* If select wrap is shown overlayed, keep it positioned without pushing content */
    .feedback-select-wrap {
        position: absolute;
        left: 12px;
        top: 8px;
    }

    /* Mobile: compact controls — show checkbox and menu side-by-side on the right.
       Controls are absolutely positioned and given higher z-index so they can
       sit over the title if necessary. */
    .more-menu-trigger {
        width: 26px;
        height: 26px;
        padding: 3px;
        border-radius: 8px;
        font-size: 0.95rem;
        line-height: 1;
    }

    .feedback-select-wrap {
        width: 28px;
        height: 28px;
        left: 4px; /* move closer to left edge */
        right: auto;
        top: 2px; /* move controls upward */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .feedback-select-wrap input {
        width: 14px !important;
        height: 14px !important;
    }

    /* When controls are revealed, arrange them side-by-side to the right */
    .feedback-card.show-more-controls .feedback-select-wrap {
        position: absolute !important;
        left: -15px !important; /* checkbox stays at top-left */
        right: auto !important;
        top: -6px !important; /* raised */
        z-index: 95 !important;
    }

    .feedback-card.show-more-controls .more-menu-trigger {
        position: absolute !important;
        right: -13px !important; /* snug to rightmost card edge */
        top: 2px !important; /* raised */
        z-index: 95 !important;
    }

    .feedback-card.show-more-controls .feedback-status-select {
        position: absolute !important;
        right: 20px !important; /* place just left of the menu trigger */
        top: 2px !important;
        z-index: 95 !important;
    }

    /* Allow controls to overlap the title by ensuring they sit above it */
    .feedback-title {
        z-index: 50 !important;
        right: 48px; /* keep space so title doesn't overlap controls */
    }
}

/* Compact spacing when a feedback item has no title */
.feedback-card.no-title {
    padding-top: 14px; /* reduce top gutter when there's no visible title */
}
.feedback-card.no-title .feedback-head {
    margin-bottom: 0;
    min-height: 0;
    padding: 0;
}
.feedback-card.no-title .feedback-body { margin-top: 0; }
.feedback-card.no-title .feedback-select-wrap {
    top: 8px;
    left: 12px; /* ensure it stays at the card's left edge when title is absent */
}
/* Position right-side controls into the top-right corner when title absent */
.feedback-card.no-title .feedback-head-right {
    position: absolute;
    top: 8px;
    right: 12px;
}
.feedback-card.no-title .feedback-head-left { gap: 6px; }

.feedback-meta {
    color: var(--muted);
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-history,
.activity-item {
    color: var(--muted);
    font-size: 0.74rem;
}

.feedback-body {
    margin: 10px 0 12px;
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 0.92rem;
}

/* Mobile: ensure no-title cards reserve header space so controls don't shift content */
@media (max-width: 760px) {
    .feedback-card.no-title {
        padding-top: 4px !important;
    }
    .feedback-card.no-title .feedback-head {
        min-height: 22px !important;
        padding-top: 2px !important;
    }
    .feedback-card.no-title .feedback-body {
        margin-top: 6px !important;
    }
    .feedback-card.no-title .feedback-head-right {
        position: absolute !important;
        top: 4px !important;
        right: 10px !important;
        z-index: 65 !important;
        display: flex !important;
        align-items: center !important;
    }
}

.feedback-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
}

/* Make inline handle links appear interactive on hover */
a.feedback-handle {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.feedback-handle:hover {
    text-decoration: underline;
}

/* Remove underlines for links inside feedback UI */
.feedback-card a,
.feedback-body a,
.feedback-reply-body a,
.feedback-reply-item a,
.reaction-modal a,
.reaction-modal-list a,
.reaction-modal-sub a {
    text-decoration: none;
    color: inherit;
}
.feedback-card a:hover,
.feedback-body a:hover,
.feedback-reply-body a:hover,
.reaction-modal a:hover {
    text-decoration: none;
    color: var(--muted-soft);
}

.author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(129, 183, 255, 0.9), rgba(78, 118, 192, 0.9));
    color: #071325;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(191, 217, 255, 0.4);
    text-transform: uppercase;
}

img.author-avatar {
    object-fit: cover;
    background: #0f1826;
    display: inline-block;
}

.reply-avatar {
    width: 20px;
    height: 20px;
}

.reply-author-chip {
    gap: 6px;
}

.more-menu {
    position: relative;
}

.more-menu > summary {
    list-style: none;
}

.more-menu > summary::-webkit-details-marker {
    display: none;
}

.more-menu-trigger {
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: rgba(255,255,255,0.02);
    color: var(--muted);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.more-menu[open] .more-menu-trigger,
.more-menu-trigger:hover {
    color: var(--text);
    background: linear-gradient(90deg, rgba(59,130,246,0.08), rgba(96,165,250,0.06));
    box-shadow: var(--btn-glow);
}

.more-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    width: max-content;
    min-width: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.more-menu-panel .action-btn {
    width: auto;
    max-width: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

/* Ensure action buttons inside the more-menu do not break text into vertical stacks
   and keep reasonable sizing on narrow viewports */
.more-menu-panel .action-btn {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 560px) {
    /* Prevent the popup from going off-screen on small devices */
    .more-menu-panel {
        left: 8px;
        right: 8px;
        top: calc(100% + 6px);
        min-width: auto;
    }
}

/* Prefer showing the popup to the left of the trigger when there's
   risk of overflowing to the right on narrow screens. This shifts the
   panel left of the trigger; keep it constrained so it doesn't grow
   wider than the viewport. */
@media (max-width: 520px) {
    .more-menu-panel {
        /* keep the popup inset from the viewport edges on very small screens */
        left: 8px !important;
        right: 8px !important;
        top: calc(100% + 6px) !important;
        min-width: auto !important;
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
}

.reply-more-menu .more-menu-panel {
    min-width: 140px;
}

.feedback-reply-block {
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 12px;
    display: grid;
    gap: 10px;
}

.feedback-reply-title {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.feedback-reply-title:hover {
    color: var(--text);
}

.feedback-reply-title:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(94, 156, 255, 0.12);
    border-radius: 4px;
}

.feedback-reply-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.feedback-reply-footer {
    display: flex;
    justify-content: flex-start;
}

.feedback-reply-content {
    display: grid;
    gap: 8px;
    border-left: 1px solid rgba(162, 194, 245, 0.22);
    padding-left: 12px;
    margin-left: 6px;
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
}

.feedback-reply-content.is-hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

.feedback-replies {
    display: grid;
    gap: 8px;
}

.feedback-reply-item {
    border: 1px solid rgba(162, 194, 245, 0.2);
    border-radius: 12px;
    padding: 10px;
    background: rgba(17, 29, 46, 0.76);
    position: relative;
    margin-left: 8px;
}

.feedback-reply-item::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 15px;
    width: 10px;
    border-top: 1px solid rgba(162, 194, 245, 0.28);
}

.feedback-reply-meta,
.feedback-replies-empty {
    color: var(--muted);
    font-size: 0.8rem;
}

.feedback-reply-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.feedback-reply-body {
    margin-top: 4px;
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.45;
}

.feedback-reply-compose {
    display: grid;
    gap: 8px;
}

.feedback-reply-compose > .action-btn {
    justify-self: start;
    width: auto;
    min-width: 120px;
}

.feedback-reply-compose.is-hidden {
    display: none;
}

.action-btn.mini {
    padding: 5px 9px;
    font-size: 0.74rem;
}

.action-btn:disabled,
.primary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.feedback-reply-input {
    width: 100%;
}

.status-badge {
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.03);
}

.status-open { color: #99c7ff; }
.status-fixed { color: #63d49f; }
.status-ignored { color: #f7c66f; }

.history-timeline {
    border: 1px dashed rgba(162, 194, 245, 0.24);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(12, 20, 31, 0.48);
    margin-bottom: 10px;
}

.history-timeline > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--muted);
    user-select: none;
}

.history-timeline-list {
    list-style: none;
    margin-top: 10px;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid rgba(162, 194, 245, 0.3);
    display: grid;
    gap: 10px;
}

.history-timeline-item {
    position: relative;
    padding-left: 10px;
}

.history-timeline-item::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 0.4rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #8ab9ff;
    box-shadow: 0 0 0 3px rgba(138, 185, 255, 0.2);
}

.history-line-main {
    font-size: 0.8rem;
    color: #d8e7ff;
}

.history-line-meta {
    font-size: 0.72rem;
    color: var(--muted-soft);
}

.global-handle-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #252d3b;
    border-radius: 999px;
    padding: 8px 12px;
    background: transparent;
    color: #f3f5f8;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    font-family: Inter, Segoe UI, Roboto, system-ui, sans-serif;
}

html:not([data-auth-chip-ready="1"]) .global-handle-chip[data-global-handle-chip] {
    visibility: hidden;
}

.global-handle-chip.not-verified {
    display: inline-block;
    background: linear-gradient(180deg, var(--accent-400), var(--accent-500));
    color: #071325;
    border-color: rgba(59,130,246,0.28);
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13.3333px;
    line-height: normal;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.global-handle-chip.not-verified:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-glow);
}

.global-handle-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #252d3b;
    object-fit: cover;
}

.site-footer {
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
    font-size: 0.9rem;
}

.site-footer a {
    color: #9dc4ff;
    text-decoration: none;
}

/* Reaction modal */
.reaction-modal {
    position: fixed;
    display: block;
    z-index: 1200;
    pointer-events: auto;
}
.reaction-modal-inner {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 420px;
    max-width: calc(100% - 24px);
    font-weight: 700;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(3,8,18,0.6);
    transition: transform 180ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease;
}
.reaction-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.reaction-modal-body { display:grid; gap:8px; max-height:60vh; overflow:auto; }
.reaction-modal-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
}
.reaction-modal-close:hover { color: var(--text); }
.reaction-modal-section-header { font-weight:700; display:flex; gap:8px; align-items:center; }
.reaction-modal-list { display:grid; gap:8px; padding:6px 0 8px 0; border-top:1px solid rgba(255,255,255,0.03); }
.reaction-modal-row { display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; background: rgba(0,0,0,0.12); }
.reaction-modal-avatar { width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.reaction-modal-avatar,
.reaction-modal-avatar img.author-avatar {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
.reaction-modal-name { font-weight:700; }
.reaction-modal-sub { color: var(--muted); font-size:0.9rem; }
.reaction-modal-tabs { display:flex; gap:8px; margin-bottom:8px; }
.reaction-tab { background: var(--panel); border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.reaction-tab.active { background: linear-gradient(180deg,#5c95ef,#81b7ff); color:#071325; border-color:#6ea8fe; }
.reaction-tab .reaction-tab-count { background: rgba(0,0,0,0.25); color:#fff; padding:2px 6px; border-radius:999px; font-size:0.8rem; }
.reaction-modal-section { margin-bottom:6px; }
.reaction-modal-list .you-row {
    outline: none;
    box-shadow: none;
    /* keep subtle separation without blue highlight */
    border: 1px solid rgba(255,255,255,0.03);
    background: rgba(255,255,255,0.01);
}

/* total count badge shown next to top reaction toggle on feedback card */
.reaction-total-count {
    display: none;
    margin-left: 8px;
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 0.78rem;
    padding: 2px 6px;
    border-radius: 999px;
}

/* default SVG sizing inside reaction toggle */
.reaction-toggle .default-reaction-svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.reaction-toggle .reaction-emoji { font-size: 18px; line-height: 1; display: inline-block; vertical-align: middle; }
/* make the total count interactive */
.reaction-total-count { cursor: pointer; }
.reaction-total-count:hover { background: rgba(255,255,255,0.06); }

.site-version {
    margin-top: 2px;
    font-size: 0.72rem;
    opacity: 0.78;
    letter-spacing: 0.03em;
}

@media (max-width: 860px) {
    body {
        padding: 14px;
    }

    .blitz-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .feedback-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .feedback-toolbar-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap {
        width: 100%;
        min-width: 0;
    }
    /* Allow the search input to shrink on narrow screens */
    #feedbackSearchInput {
        min-width: 0;
        width: 100%;
    }
    /* Slightly larger checkbox for better touch targets on mobile */
    .feedback-select-wrap input {
        width: 20px !important;
        height: 20px !important;
    }

    #feedbackSearchInput {
        min-width: 0;
        width: 100%;
    }

    .feedback-head {
        align-items: flex-start;
    }

    .feedback-head-right {
        flex-direction: column;
        align-items: flex-end;
    }

    /* Stack toolbar rows on small screens */
    .feedback-toolbar-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    .toolbar-top { justify-content: flex-start; }
    .toolbar-bottom { justify-content: stretch; display: flex; gap: 8px; align-items: center; }
    .toolbar-bottom .search-wrap { flex: 1 1 auto; }

    /* When selection-mode is active, ensure select controls are visible and sit on top row */
    .feedback-toolbar.selection-mode .toolbar-top { display: flex; }
    .feedback-toolbar .toolbar-top { display: flex; }
    .feedback-toolbar .select-controls { display: none; }
    .feedback-toolbar.selection-mode .select-controls { display: inline-flex; }

    /* restore original card padding on small screens so reserved space isn't forced */
    .feedback-card {
        padding-left: 14px !important;
    }
}

/* Reactions UI */
.feedback-reactions {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 4px;
    align-items: center;
    position: relative; /* anchor for absolute popover so it doesn't reserve layout space */
}
.reaction-btn {
    border: 1px solid transparent;
    background: rgba(255,255,255,0.02);
    color: var(--text);
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.reaction-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.28); }
.reaction-btn.active { background: linear-gradient(180deg,#5c95ef,#81b7ff); color: #071325; border-color: #6ea8fe; }

@media (max-width: 560px) {
    .feedback-reactions { gap: 4px; }
    .reaction-btn { padding: 6px; font-size: 0.9rem; }
}

    /* Popover styles */
    .reaction-toggle {
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        padding: 4px 6px; /* reduce vertical space */
        border-radius: 8px;
        cursor: pointer;
        line-height: 1;
        display: inline-flex; /* ensure consistent center alignment */
        align-items: center;
        justify-content: center;
        height: 36px; /* match popover button sizing so vertical centers line up */
        min-width: 36px;
    }
    .reaction-popover {
        /* absolutely positioned to the right of the toggle so it overlays content */
        display: block;
        position: absolute;
        top: 50%;
        left: calc(100% + 8px);
        margin-top: 0;
        background: var(--panel-strong);
        border: 1px solid var(--border);
        padding: 6px;
        border-radius: 8px;
        box-shadow: 0 10px 28px rgba(0,0,0,0.36);
        opacity: 0;
        transform: translateX(0) translateY(-50%) scale(0.99);
        transform-origin: left center;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
        z-index: 1050;
        min-width: 120px;
    }
    .feedback-reactions.open .reaction-popover { opacity: 1; transform: translateX(0) translateY(-50%) scale(1); visibility: visible; pointer-events: auto; }
    .reaction-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
    .reaction-btn { display: inline-flex; align-items: center; gap: 6px; }
    .reaction-label { display: none; font-size: 0.85rem; color: var(--muted); }
    .feedback-reactions.expanded .reaction-label { display: inline-block; }
    .reaction-popover-actions { display: none; }
    /* Hide small per-button counts inside popover (we show counts on top tabs instead) */
    .reaction-popover .reaction-count { display: none !important; }
    .reaction-count {
        display: inline-block;
        background: rgba(0,0,0,0.25);
        color: #fff;
        font-size: 0.75rem;
        padding: 2px 6px;
        border-radius: 999px;
        margin-left: 6px;
    }
    /* Top emojis shown to the right of the total reaction count — tightened and overlapping like the design image */
    .reaction-top-emojis {
        display: inline-flex;
        align-items: center;
        gap: 0; /* we'll overlap siblings */
        margin-left: 2px;
        vertical-align: middle;
        pointer-events: auto; /* enable clicks on the emoji badges */
    }

    .reaction-top-emoji {
        width: 20px;
        height: 20px;
        min-width: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        /* border-radius: 666px;  */
        /* tighter wrapping */
        /* background: var(--panel-strong); */
        color: var(--text);
        border: none;
        box-shadow: none; /* remove extra visual padding */
        margin-left: -10px; /* less overlap so neighboring emoji isn't hidden too much */
        cursor: pointer;
        position: relative;
    }

    /* Ensure left-most emoji renders on top */
    .reaction-top-emojis .reaction-top-emoji:nth-child(1) { z-index: 3; }
    .reaction-top-emojis .reaction-top-emoji:nth-child(2) { z-index: 2; }
    .reaction-top-emojis .reaction-top-emoji:nth-child(3) { z-index: 1; }

    @media (max-width: 560px) {
        .reaction-top-emoji { width: 18px; height: 18px; min-width: 18px; font-size: 12px; margin-left: -8px; border-radius: 5px; }
    }

    /* Positioning for small screens */
    @media (max-width: 560px) {
        .reaction-popover { width: 100%; box-sizing: border-box; position: static; transform: none; top: auto; left: auto; }
        .reaction-list { justify-content: space-between; }
    }

    /* Center and constrain reaction modal on small screens */
    @media (max-width: 560px) {
        .reaction-modal {
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
        }
        .reaction-modal-inner {
            width: 100%;
            max-width: calc(100% - 24px);
            margin: 0 auto;
            box-sizing: border-box;
            transform: none !important;
            font-weight: 700;
        }
    }

    /* Make container fluid on mobile to avoid horizontal gaps */
    @media (max-width: 560px) {
        .reaction-top-emoji { width: 18px; height: 18px; min-width: 18px; font-size: 12px; margin-left: -8px; }
    }

    /* Reduce header size on very small screens to avoid overflow */
        @media (max-width: 420px) {
            .blitz-header h1 { font-size: 1.4rem; }
            .subtitle { font-size: 0.78rem; }
        }

    /* Wider-mobile breakpoint: keep popover within viewport and allow horizontal scrolling if needed */
    @media (max-width: 860px) {
        .reaction-popover {
            position: absolute;
            left: auto;
            right: 0;
            top: 100%;
            transform: translateY(6px) scale(1);
            width: auto;
            max-width: calc(100vw - 16px);
            white-space: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .reaction-list { flex-wrap: nowrap; }
        .feedback-reactions { overflow: visible; }
    }

/* Ensure checkbox reserve behaves naturally on small screens */
@media (max-width: 860px) {
    .feedback-select-wrap {
        display: inline-flex !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 40px !important;
        margin-right: 6px !important;
    }
}

/* Banner for admin-disabled features (centered, reddish warning) */
.public-announcement.feature-disabled-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(980px, calc(100% - 40px));
    z-index: 9999;
    border-radius: 8px;
    text-align: center;
    padding: 12px 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.public-announcement.feature-disabled-banner.is-danger {
    background: linear-gradient(135deg, #831313, #b22222);
    border-color: rgba(120,16,16,0.45);
    color: #fff;
    font-weight: 700;
}

@media (max-width: 520px) {
    .public-announcement.feature-disabled-banner {
        top: 8px;
        padding: 10px 12px;
        width: calc(100% - 24px);
        border-radius: 6px;
        font-size: 0.95rem;
    }
}

/* Push layout variant for feedback page */
.public-announcement.feature-disabled-banner.push {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 12px;
    border-radius: 8px;
    box-shadow: none;
}
.public-announcement.feature-disabled-banner.push .banner-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border:0; background:transparent; color:#fff; cursor:pointer; padding:6px 8px; }
.feature-disabled-banner.slide-up { transition: max-height 260ms ease, padding 200ms ease, margin 200ms ease, opacity 200ms ease; overflow: hidden; }

/* Quick-nav overflow & dropdown menu styles ------------------------------------------------- */
/* Ensure the dropdown menu created by quick-nav-overflow.js is visible and overlays content */
.quick-nav { overflow: visible; }
.quick-nav-more { position: relative; display: inline-flex; align-items: center; }
.quick-nav-more-toggle { cursor: pointer; }
.quick-nav-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 300;
    display: none;
    min-width: 170px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    gap: 6px;
}
.quick-nav-more.open .quick-nav-more-menu { display: grid; }
.quick-nav-more-menu a.quick-nav-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
}
.quick-nav-more-menu a.quick-nav-btn:hover { background: rgba(110,168,254,0.06); color: #f3f5f8; }

/* Make the dropdown adapt on very small screens so it doesn't cause horizontal scrolling */
@media (max-width: 560px) {
    .quick-nav-more-menu {
        left: 8px;
        right: 8px;
        top: calc(100% + 6px);
        width: auto;
    }
}

/* Small helpers to avoid layout overflow from long tokens inside panels */
.panel, .panel * { min-width: 0; }
.panel, td, th { overflow-wrap: anywhere; word-break: break-word; }

/* Stronger override for action buttons inside the more-menu to prevent
   characters from breaking onto separate lines (caused by the generic
   panel word-break rule). This selector is purposefully specific and
   placed after the generic rules to ensure it takes precedence. */
.more-menu-panel .action-btn,
.more-menu-panel button,
.more-menu-panel .action-btn * {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 120px !important;
}

/* Also ensure the popup has a sensible minimum width so it doesn't
   collapse to a very narrow column next to the trigger. */
.more-menu-panel {
    min-width: 120px;
}

/* When user has selected at least one item, force all per-item checkboxes to be visible.
   Use absolute positioning only on wider screens; on small screens the control stays static
   to avoid overlapping or going off-screen. */
@media (min-width: 861px) {
    .selection-mode .feedback-select-wrap {
        display: inline-flex !important;
        position: absolute !important;
        left: 12px !important;
        top: 12px !important;
    }
}