.trollbox-messages .message.admin-message {
    background: rgba(251, 191, 36, 0.08);   /* --warning at 8% */
    border-left: 2px solid var(--warning);
    padding: 7px 10px;
    margin: 0;
}

.trollbox-messages .message-author.admin-author {
    color: var(--warning) !important;
    font-weight: 700;
}

.trollbox-messages .message-author.admin-author::before {
    content: '📢 ';
    margin-right: 2px;
    font-size: var(--fs-micro);
    opacity: 0.7;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--warning);
    font-size: var(--fs-micro);
}

.admin-badge i {
    animation: adminGlow 2s ease-in-out infinite alternate;
}

@keyframes adminGlow {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}

.trollbox-messages .message.admin-message .message-content {
    font-weight: 500;
    color: var(--text-primary);
}

/* Emoji Reaction System Styles */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.message-reactions:empty {
    display: none;
    margin-top: 0;
}

.reaction-item {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
    padding: 1px 7px;
    font-size: var(--fs-micro);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease,
                transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .reaction-item:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: var(--border-light);
        transform: scale(1.05);
    }
}

.reaction-item:active {
    transform: scale(0.94);
}

.reaction-item.user-reacted {
    background: rgba(125, 211, 252, 0.16);   /* --primary at 16% */
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.reaction-item.user-reacted:hover {
    background: rgba(125, 211, 252, 0.24);
    border-color: var(--primary-dark);
}

.emoji-picker {
    position: absolute;
    z-index: 1000;
    background: var(--panel-sunken);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    /* The picker is placed above the message's left edge, so it grows FROM
       that corner. A centre origin makes it look like it arrived from
       somewhere else on the page. */
    transform-origin: bottom left;
    animation: emojiPickerFadeIn 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* 0.96, never 0. A thing that scales up from nothing has no body. */
@keyframes emojiPickerFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.emoji-picker-content {
    display: flex;
    gap: 4px;
}

.emoji-button {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    padding: 8px;
    font-size: var(--fs-fig);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease,
                transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

@media (hover: hover) and (pointer: fine) {
    .emoji-button:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--border-light);
        transform: scale(1.08);
    }
}

.emoji-button:active {
    transform: scale(0.94);
}

/* Message content hover effect for reactions */
.trollbox-messages .message .message-content[title]:hover {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--r-input);
    padding: 2px 4px;
    margin: -2px -4px;
}

/* The ✨ that used to be appended on hover is gone. The cursor and the
   hover surface already say the row is pressable, and a sparkle glued to
   the end of a stranger's sentence reads as part of the message. */

/* Reaction animations */
.reaction-item {
    animation: reactionAppear 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes reactionAppear {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile responsive adjustments for reactions */
@media (max-width: 768px) {
    .emoji-picker {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    
    .emoji-picker-content {
        justify-content: space-around;
    }
    
    .emoji-button {
        min-width: 36px;
        min-height: 36px;
        font-size: var(--fs-title);
    }
    
    .reaction-item {
        font-size: var(--fs-micro);
        padding: 1px 5px;
    }
}

/* Ensure reactions don't break message layout */
.trollbox-messages .message {
    overflow: visible;
}

.trollbox-messages {
    position: relative;
}

/* Trollbox Drag-to-Resize Functionality */
.trollbox-widget {
    min-height: 300px;
    max-height: 80vh;
    resize: none; /* Disable default browser resize */
}

/* Override height when minimized - use !important to override inline styles */
.trollbox-widget.minimized {
    height: auto !important;
    min-height: auto !important;
}

.trollbox-widget.minimized .trollbox-content {
    display: none;
}

.trollbox-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: transparent;
    cursor: ns-resize;
    z-index: 10;
    transition: background-color 150ms ease;
}

.trollbox-resize-handle:hover {
    background: rgba(125, 211, 252, 0.22);   /* --primary at 22% */
}

.trollbox-resize-handle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--border-light);
    border-radius: var(--r-pill);
    opacity: 0;
    transition: opacity 150ms ease;
}

.trollbox-resize-handle:hover::before {
    opacity: 1;
}

.trollbox-widget.resizing {
    user-select: none;
}

.trollbox-widget.resizing .trollbox-resize-handle {
    background: rgba(125, 211, 252, 0.4);
}

.trollbox-widget.resizing .trollbox-resize-handle::before {
    opacity: 1;
    background: var(--primary);
}

/* Hide resize handle on mobile and when minimized */
@media (max-width: 768px) {
    .trollbox-resize-handle {
        display: none;
    }
}

.trollbox-widget.minimized .trollbox-resize-handle {
    display: none;
}

/* Adjust content to account for resize handle */
.trollbox-content {
    margin-top: 6px;
}

/* Ensure minimized trollbox has proper styling */
.trollbox-widget.minimized .trollbox-header {
    border-bottom: none;
}
/* ==========================================================================
   Trollbox enhancements (2026-07): display names, mentions, stickers
   ========================================================================== */

/* Set / change display-name button next to the user badge */
.trollbox-set-name-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-micro);
    line-height: 1;
    margin-left: 6px;
    padding: 2px 6px;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease,
                transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.trollbox-set-name-btn:active { transform: scale(0.94); }
.trollbox-set-name-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
    background: rgba(255, 255, 255, 0.05);
}

/* @mentions in rendered messages */
.trollbox-messages .mention {
    color: var(--primary);
    background: rgba(125, 211, 252, 0.12);   /* --primary at 12% */
    border-radius: var(--r-xs);
    padding: 0 3px;
    font-weight: 600;
}
.trollbox-messages .mention-admin {
    color: var(--warning);
    background: rgba(251, 191, 36, 0.14);    /* --warning at 14% */
}
.trollbox-messages .mention-self {
    color: var(--positive);
    background: rgba(134, 239, 172, 0.16);   /* --positive at 16% */
}

/* @mention autocomplete dropdown */
.trollbox-input-wrapper { position: relative; }
.trollbox-mention-list {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    min-width: 160px;
    max-height: 180px;
    overflow-y: auto;
    background: var(--panel-sunken);
    border: 1px solid var(--border-light);
    border-radius: var(--r-input);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    z-index: 30;
    display: none;
}
.trollbox-mention-list .mention-item {
    padding: 6px 10px;
    font-size: var(--fs-ui);
    color: var(--text-secondary);
    cursor: pointer;
}
.trollbox-mention-list .mention-item.active,
.trollbox-mention-list .mention-item:hover {
    background: rgba(125, 211, 252, 0.16);
    color: var(--text-primary);
}

/* Sticker + emoji composer buttons */
.trollbox-tray-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-title);
    padding: 0 6px;
    transition: color 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
    .trollbox-tray-btn:hover:not(:disabled) { color: var(--text-primary); }
}
.trollbox-tray-btn:active:not(:disabled) { transform: scale(0.9); }
.trollbox-tray-btn:disabled { opacity: 0.4; cursor: default; }

/* Sticker tray */
.trollbox-sticker-tray,
.trollbox-emoji-tray {
    transform-origin: bottom center;
}

/* The tray is ALWAYS rendered — never `display: none` — because a box the
   browser has removed cannot animate, which is why these trays used to unfold
   on open and vanish on close. `.is-open` (written by trollbox.js) carries the
   state, and the same transition runs backwards on the way out.

   These two sit IN the flow above the composer, so what collapses is the box
   itself: `max-height`, the padding and the margin all go to 0. The open cap
   is generous and paired with `overflow-y: auto`, so the tray can never clip
   its own contents even if the sticker set grows. */
.trollbox-sticker-tray {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
}

.trollbox-sticker-tray { --tray-open-h: 260px; padding-inline: 10px; }
.trollbox-emoji-tray   { --tray-open-h: 120px; padding-inline: 8px; }

.trollbox-sticker-tray,
.trollbox-emoji-tray {
    overflow: hidden;
    transition: max-height 160ms cubic-bezier(0.23, 1, 0.32, 1),
                opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
                padding-block 160ms cubic-bezier(0.23, 1, 0.32, 1),
                margin-bottom 160ms cubic-bezier(0.23, 1, 0.32, 1),
                visibility 160ms;
}

.trollbox-sticker-tray.is-open,
.trollbox-emoji-tray.is-open {
    max-height: var(--tray-open-h);
    overflow-y: auto;
    padding-block: 10px;
    margin-bottom: 6px;
}

/* `:not(.is-open)`, not a plain closed-state rule. The two trays declare
   their own `border` and `padding` further down this sheet, so a bare
   `.trollbox-*-tray` closed rule loses to whichever is written last —
   which left the emoji tray a 2px border sliver above the composer while
   the sticker tray collapsed to 0. Matching on the class instead puts the
   closed state a specificity step above every base rule, whatever the
   order. The border goes with the rest: a collapsed tray must occupy NO
   height, or it reserves a gap the composer has to sit under. */
.trollbox-sticker-tray:not(.is-open),
.trollbox-emoji-tray:not(.is-open) {
    visibility: hidden;
    max-height: 0;
    padding-block: 0;
    margin-bottom: 0;
    border-width: 0;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
}
.sticker-choice {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    padding: 4px;
    cursor: pointer;
    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .sticker-choice:hover { transform: scale(1.05); border-color: var(--primary); }
}
.sticker-choice:active { transform: scale(0.94); }
.sticker-choice img { width: 100%; height: auto; display: block; }

/* Sticker in a message */
.message-content .trollbox-sticker { width: 96px; height: 96px; display: block; }
.sticker-missing { color: var(--text-muted); font-style: italic; }

/* In-message emoji tray */
.trollbox-emoji-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
}
.emoji-choice {
    background: transparent;
    border: none;
    font-size: var(--fs-fig);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--r-input);
}
.emoji-choice {
    transition: background 150ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
    .emoji-choice:hover { background: rgba(255, 255, 255, 0.08); }
}
.emoji-choice:active { transform: scale(0.88); }


/* ==========================================================================
   Reduced motion. Not "no motion": the fades and the colour changes carry
   meaning and stay. What goes is movement — the entry throws, the scale
   pops, the two forever-loops (the admin badge and the unread pulse), and
   the smooth scroll, which under this setting is the most nauseating thing
   the widget does.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .trollbox-messages {
        scroll-behavior: auto;
    }

    /* Same trade the position modal makes: the scale goes, the cross-fade
       stays, and `display` keeps `allow-discrete` so the close still has a
       frame to fade in. */
    .trollbox-widget,
    .trollbox-widget.hidden,
    .trollbox-toggle,
    .trollbox-toggle[style*="display: none"] {
        transform: none;
    }

    .trollbox-widget {
        transition: opacity 0.15s ease, display 0.15s allow-discrete;
    }

    .trollbox-toggle {
        transition: background-color 0.15s ease, opacity 0.15s ease,
                    display 0.15s allow-discrete;
    }

    .message.new-message,
    .reaction-item,
    .system-message.loading-more {
        animation: none;
    }

    /* The trays keep the collapse — it is what makes room for them — and
       lose only the travel. */
    .trollbox-sticker-tray,
    .trollbox-emoji-tray,
    .trollbox-sticker-tray:not(.is-open),
    .trollbox-emoji-tray:not(.is-open) { transform: none; }

    .emoji-picker {
        animation: emojiPickerFade 120ms ease-out;
    }

    @keyframes emojiPickerFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .admin-badge i,
    .trollbox-toggle {
        animation: none !important;
    }

    .trollbox-controls .btn,
    .trollbox-send-btn,
    .trollbox-tray-btn,
    .trollbox-set-name-btn,
    .reaction-item,
    .emoji-button,
    .emoji-choice,
    .sticker-choice {
        transition-property: background-color, border-color, color, opacity;
    }

    .trollbox-controls .btn:active,
    .trollbox-send-btn:active:not(:disabled),
    .trollbox-toggle:active,
    .trollbox-tray-btn:active:not(:disabled),
    .trollbox-set-name-btn:active,
    .reaction-item:active,
    .emoji-button:active,
    .emoji-choice:active,
    .sticker-choice:active {
        transform: none;
    }
}