:root {
            /* -----------------------------------------
               Typography
            ----------------------------------------- */

            --chat-font-family:
                Arial,
                Helvetica,
                sans-serif;

            --chat-font-size: 15px;
            --chat-font-size-small: 12px;
            --chat-font-size-large: 17px;
            --chat-title-size: 20px;
            --chat-line-height: 1.5;

            /* -----------------------------------------
               Main colours
            ----------------------------------------- */

            --chat-page-background: #0f172a;
            --chat-panel-background: #162032;
            --chat-panel-alt-background: #1b293d;
            --chat-sidebar-background: #131d2d;
            --chat-input-background: #101a2a;

            --chat-primary: #4ea3ff;
            --chat-primary-hover: #348ee8;
            --chat-primary-text: #ffffff;

            --chat-text: #e5edf5;
            --chat-text-muted: #91a4b8;
            --chat-placeholder: #718399;

            --chat-border: #2d425f;
            --chat-border-light: #395473;

            --chat-success: #63c58b;
            --chat-warning: #e5b65d;
            --chat-danger: #e66f6f;

            /* -----------------------------------------
               Role colours
            ----------------------------------------- */

            --chat-owner-colour: #f2c96d;
            --chat-host-colour: #76b7ff;
            --chat-guest-colour: #d9e2ec;
            --chat-system-colour: #9eaec0;

            --chat-owner-background:
                rgba(242, 201, 109, 0.12);

            --chat-host-background:
                rgba(118, 183, 255, 0.12);

            --chat-guest-background:
                rgba(217, 226, 236, 0.08);

            --chat-system-background:
                rgba(158, 174, 192, 0.09);

            /* -----------------------------------------
               Messages
            ----------------------------------------- */

            --chat-message-background: transparent;

            --chat-message-hover-background:
                rgba(255, 255, 255, 0.025);

            --chat-own-message-background:
                rgba(78, 163, 255, 0.06);

            --chat-system-message-background:
                rgba(158, 174, 192, 0.07);

            --chat-link-colour: #74b8ff;
            --chat-link-hover-colour: #a1d0ff;

            /* -----------------------------------------
               Online status
            ----------------------------------------- */

            --chat-online-colour: #63c58b;
            --chat-offline-colour: #718399;

            /* -----------------------------------------
               Layout
            ----------------------------------------- */

            --chat-page-max-width: 1400px;
            --chat-page-height: 760px;
            --chat-sidebar-width: 270px;
            --chat-header-height: 70px;
            --chat-message-form-height: 84px;

            --chat-spacing-xs: 5px;
            --chat-spacing-sm: 10px;
            --chat-spacing-md: 16px;
            --chat-spacing-lg: 24px;
            --chat-spacing-xl: 32px;

            /* -----------------------------------------
               Borders
            ----------------------------------------- */

            --chat-border-width: 1px;
            --chat-radius-small: 3px;
            --chat-radius: 4px;
            --chat-radius-large: 6px;

            /* -----------------------------------------
               Effects
            ----------------------------------------- */

            --chat-transition-speed: 160ms;
            --chat-shadow: none;

            /* -----------------------------------------
               Mobile
            ----------------------------------------- */

            --chat-mobile-sidebar-height: 190px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
        }

        body {
            margin: 0;
            min-height: 100vh;
            padding: var(--chat-spacing-lg);
            background: var(--chat-page-background);
            color: var(--chat-text);
            font-family: var(--chat-font-family);
            font-size: var(--chat-font-size);
            line-height: var(--chat-line-height);
        }

        button,
        input,
        textarea {
            font: inherit;
        }

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }

        a {
            color: var(--chat-link-colour);
        }

        a:hover {
            color: var(--chat-link-hover-colour);
        }

        .chat-shell {
    display: flex;
    width: min(
        var(--chat-page-max-width),
        100%
    );
    height: min(
        var(--chat-page-height),
        calc(100dvh - 48px)
    );
    min-height: 560px;
    flex-direction: column;
    margin: 0 auto;
    overflow: hidden;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-background);
    box-shadow: var(--chat-shadow);
}

        .chat-header {
    display: flex;
    min-height: var(--chat-header-height);
    flex: 0 0 var(--chat-header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-md);
    padding:
        var(--chat-spacing-md)
        var(--chat-spacing-lg);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-panel-alt-background);
}

        .chat-room-heading {
            min-width: 0;
        }

        .chat-room-heading h1 {
            margin: 0;
            overflow: hidden;
            color: var(--chat-text);
            font-size: var(--chat-title-size);
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .chat-room-heading p {
            margin:
                var(--chat-spacing-xs)
                0
                0;
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-header-actions {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: var(--chat-spacing-sm);
        }

        .chat-online-summary {
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-online-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--chat-online-colour);
        }

        .chat-button {
            display: inline-flex;
            min-height: 38px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 8px 14px;
            border:
                var(--chat-border-width)
                solid
                transparent;
            border-radius: var(--chat-radius);
            background: var(--chat-primary);
            color: var(--chat-primary-text);
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition:
                background
                var(--chat-transition-speed)
                ease;
        }

        .chat-button:hover {
            background: var(--chat-primary-hover);
            color: var(--chat-primary-text);
        }

        .chat-button-secondary {
            border-color: var(--chat-border);
            background: transparent;
            color: var(--chat-text-muted);
        }

        .chat-button-secondary:hover {
            border-color: var(--chat-border-light);
            background: var(--chat-panel-background);
            color: var(--chat-text);
        }

        .chat-layout {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns:
        minmax(0, 1fr)
        var(--chat-sidebar-width);
    overflow: hidden;
}

        .chat-main {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

        .chat-messages {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding:
        var(--chat-spacing-md)
        0;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-color:
        var(--chat-border-light)
        var(--chat-panel-background);
    scrollbar-width: thin;
}

.chat-message {
    display: block;
    padding:
        8px
        var(--chat-spacing-lg);
    background: var(--chat-message-background);
    transition:
        background
        var(--chat-transition-speed)
        ease;
}

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

.chat-message.is-own-message {
    background:
        var(--chat-own-message-background);
}

.chat-message-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

        .chat-message.is-system {
            display: block;
            margin:
                5px
                var(--chat-spacing-lg);
            padding: 8px 12px;
            border-left:
                3px
                solid
                var(--chat-system-colour);
            background:
                var(--chat-system-message-background);
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-avatar {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            flex-shrink: 0;
            border:
                var(--chat-border-width)
                solid
                var(--chat-border);
            border-radius: 50%;
            background:
                var(--chat-panel-alt-background);
            color: var(--chat-text);
            font-weight: 700;
            text-transform: uppercase;
        }

        .chat-message-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 7px;
            margin-bottom: 2px;
        }

.chat-nickname {
    flex-shrink: 0;
    font-weight: 700;
}

        .chat-nickname.role-owner {
            color: var(--chat-owner-colour);
        }

        .chat-nickname.role-host {
            color: var(--chat-host-colour);
        }

        .chat-nickname.role-guest {
            color: var(--chat-guest-colour);
        }

        .chat-role-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: var(--chat-radius-small);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.3;
            text-transform: uppercase;
        }

        .chat-role-badge.role-owner {
            background: var(--chat-owner-background);
            color: var(--chat-owner-colour);
        }

        .chat-role-badge.role-host {
            background: var(--chat-host-background);
            color: var(--chat-host-colour);
        }

        .chat-role-badge.role-guest {
            background: var(--chat-guest-background);
            color: var(--chat-guest-colour);
        }

.chat-message-time {
    margin-left: 3px;
    flex-shrink: 0;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}
.chat-message-text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--chat-text);
    white-space: pre-line;
}

        .chat-compose {
    display: flex;
    min-height: var(--chat-message-form-height);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--chat-spacing-sm);
    padding:
        var(--chat-spacing-md)
        var(--chat-spacing-lg);
    border-top:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-panel-alt-background);
}

        .chat-message-input {
            width: 100%;
            min-width: 0;
            height: 44px;
            padding: 10px 13px;
            border:
                var(--chat-border-width)
                solid
                var(--chat-border);
            border-radius: var(--chat-radius);
            outline: none;
            background: var(--chat-input-background);
            color: var(--chat-text);
            transition:
                border-color
                var(--chat-transition-speed)
                ease;
        }

        .chat-message-input::placeholder {
            color: var(--chat-placeholder);
        }

        .chat-message-input:focus {
            border-color: var(--chat-primary);
        }

        .chat-send-button {
            min-width: 90px;
            height: 44px;
            border: 0;
        }

        .chat-sidebar {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-left:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-sidebar-background);
}

        .chat-sidebar-header {
    display: flex;
    min-height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-sm);
    padding: var(--chat-spacing-md);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
}

        .chat-sidebar-header h2 {
            margin: 0;
            font-size: var(--chat-font-size-large);
        }

        .chat-user-count {
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-user-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--chat-spacing-sm);
    overscroll-behavior: contain;
    scrollbar-color:
        var(--chat-border-light)
        var(--chat-sidebar-background);
    scrollbar-width: thin;
}

        .chat-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: var(--chat-radius);
        }

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

        .chat-user-avatar {
            position: relative;
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            flex-shrink: 0;
            border:
                var(--chat-border-width)
                solid
                var(--chat-border);
            border-radius: 50%;
            background:
                var(--chat-panel-alt-background);
            color: var(--chat-text);
            font-size: var(--chat-font-size-small);
            font-weight: 700;
            text-transform: uppercase;
        }

        .chat-user-avatar::after {
            position: absolute;
            right: -1px;
            bottom: -1px;
            width: 9px;
            height: 9px;
            content: "";
            border: 2px solid var(--chat-sidebar-background);
            border-radius: 50%;
            background: var(--chat-online-colour);
        }

        .chat-user-details {
            min-width: 0;
        }

        .chat-user-name {
            overflow: hidden;
            font-size: 13px;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .chat-user-role {
            color: var(--chat-text-muted);
            font-size: 11px;
            text-transform: capitalize;
        }

        .chat-entry {
            display: grid;
            min-height: calc(
                100vh - 48px
            );
            place-items: center;
        }

        .chat-entry-card {
            width: min(480px, 100%);
            overflow: hidden;
            border:
                var(--chat-border-width)
                solid
                var(--chat-border);
            border-radius: var(--chat-radius);
            background: var(--chat-panel-background);
        }

        .chat-entry-header,
        .chat-entry-content,
        .chat-entry-footer {
            padding: var(--chat-spacing-lg);
        }

        .chat-entry-header {
            border-bottom:
                var(--chat-border-width)
                solid
                var(--chat-border);
            background: var(--chat-panel-alt-background);
        }

        .chat-entry-header h1 {
            margin: 0;
            font-size: 24px;
        }

        .chat-entry-header p {
            margin: 8px 0 0;
            color: var(--chat-text-muted);
        }

        .chat-entry-content label {
            display: block;
            margin-bottom: 7px;
            font-weight: 700;
        }

        .chat-entry-input {
            width: 100%;
            height: 46px;
            padding: 10px 13px;
            border:
                var(--chat-border-width)
                solid
                var(--chat-border);
            border-radius: var(--chat-radius);
            outline: none;
            background: var(--chat-input-background);
            color: var(--chat-text);
        }

        .chat-entry-input:focus {
            border-color: var(--chat-primary);
        }

        .chat-entry-help {
            margin: 8px 0 0;
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-alert {
            margin-bottom: var(--chat-spacing-md);
            padding: 11px 13px;
            border:
                var(--chat-border-width)
                solid
                var(--chat-danger);
            border-radius: var(--chat-radius);
            background: rgba(230, 111, 111, 0.08);
            color: #f4b3b3;
        }

        .chat-closed {
            padding:
                var(--chat-spacing-lg);
            border:
                var(--chat-border-width)
                solid
                var(--chat-warning);
            border-radius: var(--chat-radius);
            background: rgba(229, 182, 93, 0.08);
            color: var(--chat-warning);
            text-align: center;
        }

        .chat-entry-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--chat-spacing-md);
            border-top:
                var(--chat-border-width)
                solid
                var(--chat-border);
            background: var(--chat-panel-alt-background);
        }

        .chat-brand {
            color: var(--chat-text-muted);
            font-size: var(--chat-font-size-small);
        }

        .chat-empty {
            padding: var(--chat-spacing-xl);
            color: var(--chat-text-muted);
            text-align: center;
        }

        .chat-status-message {
            display: none;
            padding:
                7px
                var(--chat-spacing-lg);
            border-top:
                var(--chat-border-width)
                solid
                var(--chat-border);
            background: var(--chat-panel-alt-background);
            color: var(--chat-danger);
            font-size: var(--chat-font-size-small);
        }

        .chat-status-message.is-visible {
            display: block;
        }

        @media (max-width: 850px) {
            body {
                padding: 0;
            }

            .chat-shell {
                width: 100%;
                height: 100dvh;
                min-height: 100dvh;
                border: 0;
                border-radius: 0;
            }

            .chat-header {
                padding:
                    var(--chat-spacing-sm)
                    var(--chat-spacing-md);
            }

            .chat-online-summary {
                display: none;
            }

            .chat-layout {
                grid-template-columns: 1fr;
                grid-template-rows:
                    minmax(0, 1fr)
                    var(--chat-mobile-sidebar-height);
            }

            .chat-main {
                min-height: 0;
            }

            .chat-sidebar {
                border-top:
                    var(--chat-border-width)
                    solid
                    var(--chat-border);
                border-left: 0;
            }

            .chat-user-list {
                display: flex;
                min-height: 0;
                height: auto;
                flex: 1 1 auto;
                overflow-x: auto;
                overflow-y: hidden;
            }

            .chat-user {
                min-width: 150px;
            }

            .chat-message {
                padding:
                    9px
                    var(--chat-spacing-md);
            }

            .chat-compose {
                padding:
                    var(--chat-spacing-sm)
                    var(--chat-spacing-md);
            }
        }

        @media (max-width: 520px) {
            .chat-header-actions .chat-button {
                padding: 8px 10px;
            }

            .chat-room-heading p {
                display: none;
            }

            .chat-message {
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 9px;
            }

            .chat-avatar {
                width: 34px;
                height: 34px;
                font-size: 12px;
            }

            .chat-send-button {
                min-width: 66px;
            }

            .chat-entry-footer {
                flex-direction: column;
                align-items: stretch;
            }

            .chat-entry-footer .chat-button {
                width: 100%;
            }
        }


/* -------------------------------------------------
   Chat scrollbars
------------------------------------------------- */

.chat-messages::-webkit-scrollbar,
.chat-user-list::-webkit-scrollbar,
.staff-panel-content::-webkit-scrollbar,
.staff-navigation::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--chat-panel-background);
}

.chat-user-list::-webkit-scrollbar-track {
    background: var(--chat-sidebar-background);
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-user-list::-webkit-scrollbar-thumb,
.staff-panel-content::-webkit-scrollbar-thumb,
.staff-navigation::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        var(--chat-border-light)
        padding-box;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-user-list::-webkit-scrollbar-thumb:hover,
.staff-panel-content::-webkit-scrollbar-thumb:hover,
.staff-navigation::-webkit-scrollbar-thumb:hover {
    background:
        var(--chat-primary)
        padding-box;
}

/* -------------------------------------------------
   Staff dashboard
------------------------------------------------- */

.staff-page {
    width: min(
        var(--chat-page-max-width),
        100%
    );
    min-height: calc(
        100vh - 48px
    );
    margin: 0 auto;
    overflow: hidden;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-background);
}

.staff-topbar {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-lg);
    padding:
        var(--chat-spacing-lg)
        var(--chat-spacing-xl);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-panel-alt-background);
}

.staff-heading {
    min-width: 0;
}

.staff-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--chat-primary);
    font-size: var(--chat-font-size-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.staff-heading h1 {
    margin: 0;
    overflow: hidden;
    color: var(--chat-text);
    font-size: var(--chat-title-size);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-heading p {
    margin: 5px 0 0;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-topbar-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--chat-spacing-sm);
}

.staff-layout {
    display: grid;
    grid-template-columns:
        var(--chat-sidebar-width)
        minmax(0, 1fr);
    min-height: calc(
        100vh - 139px
    );
}

.staff-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-sidebar-background);
}

.staff-navigation {
    display: grid;
    gap: 4px;
    padding: var(--chat-spacing-md);
}

.staff-navigation-link {
    display: block;
    padding: 11px 13px;
    border:
        var(--chat-border-width)
        solid
        transparent;
    border-radius: var(--chat-radius);
    color: var(--chat-text-muted);
    font-weight: 700;
    text-decoration: none;
    transition:
        background
        var(--chat-transition-speed)
        ease,
        color
        var(--chat-transition-speed)
        ease,
        border-color
        var(--chat-transition-speed)
        ease;
}

.staff-navigation-link:hover {
    border-color: var(--chat-border);
    background: var(--chat-panel-alt-background);
    color: var(--chat-text);
}

.staff-navigation-link.is-active {
    border-color: var(--chat-border-light);
    background: var(--chat-panel-alt-background);
    color: var(--chat-primary);
}

.staff-room-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--chat-spacing-md);
    border-top:
        var(--chat-border-width)
        solid
        var(--chat-border);
}

.staff-status-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
}

.staff-status-dot.is-online {
    background: var(--chat-online-colour);
}

.staff-status-dot.is-closed {
    background: var(--chat-danger);
}

.staff-room-status div {
    display: grid;
}

.staff-room-status strong {
    color: var(--chat-text);
    font-size: var(--chat-font-size-small);
}

.staff-room-status span {
    color: var(--chat-text-muted);
    font-size: 11px;
}

.staff-content {
    min-width: 0;
    padding: var(--chat-spacing-xl);
}

.staff-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-md);
    margin-bottom: var(--chat-spacing-lg);
}

.staff-section-heading h2 {
    margin: 0;
    font-size: 24px;
}

.staff-section-heading p {
    margin: 5px 0 0;
    color: var(--chat-text-muted);
}

.staff-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );
    gap: var(--chat-spacing-md);
    margin-bottom: var(--chat-spacing-lg);
}

.staff-stat-card {
    display: grid;
    gap: 4px;
    padding: var(--chat-spacing-lg);
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-alt-background);
}

.staff-stat-label {
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
    font-weight: 700;
    text-transform: uppercase;
}

.staff-stat-value {
    color: var(--chat-text);
    font-size: 28px;
    line-height: 1.2;
}

.staff-stat-detail {
    color: var(--chat-text-muted);
    font-size: 11px;
}

.staff-dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--chat-spacing-lg);
}

.staff-panel {
    min-width: 0;
    overflow: hidden;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-alt-background);
}

.staff-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-md);
    padding: var(--chat-spacing-md);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
}

.staff-panel-header h3 {
    margin: 0;
    font-size: var(--chat-font-size-large);
}

.staff-panel-header p {
    margin: 4px 0 0;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-panel-link {
    flex-shrink: 0;
    color: var(--chat-primary);
    font-size: var(--chat-font-size-small);
    font-weight: 700;
    text-decoration: none;
}

.staff-panel-content {
    max-height: 480px;
    overflow-y: auto;
}

.staff-empty-state {
    padding: var(--chat-spacing-xl);
    color: var(--chat-text-muted);
    text-align: center;
}

.staff-user-list,
.staff-message-list {
    display: grid;
}

.staff-user-row {
    display: grid;
    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;
    gap: 10px;
    align-items: center;
    padding: 11px var(--chat-spacing-md);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
}

.staff-user-row:last-child {
    border-bottom: 0;
}

.staff-user-main {
    display: grid;
    min-width: 0;
}

.staff-user-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-user-main span,
.staff-user-time {
    color: var(--chat-text-muted);
    font-size: 11px;
}

.staff-message-row {
    padding: 12px var(--chat-spacing-md);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
}

.staff-message-row:last-child {
    border-bottom: 0;
}

.staff-message-row.is-system {
    background:
        var(--chat-system-message-background);
}

.staff-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.staff-message-meta span,
.staff-message-meta time {
    color: var(--chat-text-muted);
    font-size: 11px;
}

.staff-message-row p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--chat-text);
}

.role-owner {
    color: var(--chat-owner-colour);
}

.role-host {
    color: var(--chat-host-colour);
}

.role-guest {
    color: var(--chat-guest-colour);
}

.role-system {
    color: var(--chat-system-colour);
}

@media (max-width: 950px) {
    .staff-layout {
        grid-template-columns: 1fr;
    }

    .staff-sidebar {
        border-right: 0;
        border-bottom:
            var(--chat-border-width)
            solid
            var(--chat-border);
    }

    .staff-navigation {
        display: flex;
        overflow-x: auto;
    }

    .staff-navigation-link {
        flex-shrink: 0;
    }

    .staff-room-status {
        display: none;
    }

    .staff-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .staff-page {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .staff-topbar {
        align-items: flex-start;
        padding: var(--chat-spacing-md);
    }

    .staff-topbar-actions {
        flex-direction: column;
    }

    .staff-content {
        padding: var(--chat-spacing-md);
    }

    .staff-stat-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 430px) {
    .staff-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------
   Staff settings
------------------------------------------------- */

.staff-settings-form {
    display: grid;
    gap: var(--chat-spacing-lg);
}

.staff-settings-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--chat-spacing-lg);
    align-items: start;
}

.staff-settings-status-panel {
    grid-column: 1 / -1;
}

.staff-settings-panel-content {
    padding: var(--chat-spacing-lg);
}

.staff-settings-panel-content
.staff-form-group:last-child {
    margin-bottom: 0;
}

.staff-form-row {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--chat-spacing-md);
}

.staff-textarea,
.staff-select {
    width: 100%;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    outline: none;
    background: var(--chat-input-background);
    color: var(--chat-text);
    font: inherit;
    transition:
        border-color
        var(--chat-transition-speed)
        ease;
}

.staff-textarea {
    min-height: 130px;
    padding: 11px 13px;
    line-height: var(--chat-line-height);
    resize: vertical;
}

.staff-select {
    height: 46px;
    padding: 9px 38px 9px 13px;
    cursor: pointer;
}

.staff-textarea:focus,
.staff-select:focus {
    border-color: var(--chat-primary);
}

.staff-field-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--chat-spacing-sm);
    margin-top: 7px;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-input-suffix {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    overflow: hidden;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-input-background);
}

.staff-input-suffix:focus-within {
    border-color: var(--chat-primary);
}

.staff-input-suffix
.chat-entry-input {
    border: 0;
    border-radius: 0;
}

.staff-input-suffix
.chat-entry-input:focus {
    border-color: transparent;
}

.staff-input-suffix span {
    display: flex;
    align-items: center;
    padding: 0 13px;
    border-left:
        var(--chat-border-width)
        solid
        var(--chat-border);
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
    white-space: nowrap;
}

.staff-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-lg);
    padding: var(--chat-spacing-md);
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-alt-background);
    cursor: pointer;
}

.staff-toggle-copy {
    display: grid;
    gap: 3px;
}

.staff-toggle-copy strong {
    color: var(--chat-text);
}

.staff-toggle-copy > span {
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-toggle {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 28px;
    flex: 0 0 52px;
}

.staff-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.staff-toggle-slider {
    position: absolute;
    inset: 0;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border-light);
    border-radius: 20px;
    background: var(--chat-sidebar-background);
    transition:
        background
        var(--chat-transition-speed)
        ease;
}

.staff-toggle-slider::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    content: "";
    border-radius: 50%;
    background: var(--chat-text-muted);
    transition:
        transform
        var(--chat-transition-speed)
        ease,
        background
        var(--chat-transition-speed)
        ease;
}

.staff-toggle input:checked
+ .staff-toggle-slider {
    border-color: var(--chat-success);
    background: rgba(99, 197, 139, 0.16);
}

.staff-toggle input:checked
+ .staff-toggle-slider::before {
    transform: translateX(24px);
    background: var(--chat-success);
}

.staff-toggle input:focus-visible
+ .staff-toggle-slider {
    outline:
        2px
        solid
        var(--chat-primary);
    outline-offset: 2px;
}

.staff-settings-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--chat-spacing-md);
    color: var(--chat-text-muted);
}

.staff-status-open {
    color: var(--chat-success);
    font-weight: 700;
}

.staff-status-closed {
    color: var(--chat-danger);
    font-weight: 700;
}

.staff-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--chat-spacing-sm);
    padding: var(--chat-spacing-md);
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-alt-background);
}

@media (max-width: 950px) {
    .staff-settings-grid {
        grid-template-columns: 1fr;
    }

    .staff-settings-status-panel {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .staff-form-row {
        grid-template-columns: 1fr;
    }

    .staff-toggle-row {
        align-items: flex-start;
    }

    .staff-settings-actions {
        flex-direction: column-reverse;
    }

    .staff-settings-actions
    .chat-button {
        width: 100%;
    }
}

/* -------------------------------------------------
   Ban management
------------------------------------------------- */

.staff-filter-header {
    align-items: flex-end;
}

.staff-search-form {
    display: flex;
    gap: var(--chat-spacing-sm);
    align-items: center;
}

.staff-search-form
.chat-entry-input {
    width: 240px;
}

.staff-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--chat-spacing-md);
    padding: var(--chat-spacing-md);
    border-top:
        var(--chat-border-width)
        solid
        var(--chat-border);
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-pagination a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    color: var(--chat-text);
    text-decoration: none;
}

.staff-pagination a:hover {
    border-color: var(--chat-border-light);
    background:
        var(--chat-panel-background);
}

.staff-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--chat-spacing-sm);
    padding: var(--chat-spacing-md);
    border-top:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background:
        var(--chat-panel-alt-background);
}

@media (max-width: 760px) {
    .staff-filter-header {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-search-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .staff-search-form
    .chat-entry-input {
        width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 520px) {
    .staff-modal-actions {
        flex-direction: column-reverse;
    }

    .staff-modal-actions
    .chat-button {
        width: 100%;
    }
}

/* -------------------------------------------------
   Host management
------------------------------------------------- */

.staff-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chat-spacing-xs);
    align-items: center;
}

.staff-inline-actions form {
    margin: 0;
}

.staff-account-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
    font-weight: 700;
}

.staff-account-status::before {
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 50%;
    background: var(--chat-offline-colour);
}

.staff-account-status.is-online {
    color: var(--chat-success);
}

.staff-account-status.is-online::before {
    background: var(--chat-online-colour);
}

.staff-password-copy {
    margin:
        0
        0
        var(--chat-spacing-lg);
    color: var(--chat-text-muted);
}

.staff-password-copy strong {
    color: var(--chat-text);
}

@media (max-width: 760px) {
    .staff-inline-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .staff-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .staff-inline-actions form,
    .staff-inline-actions .chat-button {
        width: 100%;
    }
}
/* -------------------------------------------------
   Staff alerts
------------------------------------------------- */

.staff-alert {
    margin-bottom: var(--chat-spacing-lg);
    padding: 12px 14px;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
}

.staff-alert-success {
    border-color: var(--chat-success);
    background: rgba(99, 197, 139, 0.08);
    color: var(--chat-success);
}

.staff-alert-error {
    border-color: var(--chat-danger);
    background: rgba(230, 111, 111, 0.08);
    color: var(--chat-danger);
}

/* -------------------------------------------------
   Staff tables
------------------------------------------------- */

.staff-table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-table th,
.staff-table td {
    padding: 12px var(--chat-spacing-md);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
    text-align: left;
    vertical-align: middle;
}

.staff-table th {
    background: var(--chat-sidebar-background);
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.staff-table tbody tr:last-child td {
    border-bottom: 0;
}

.staff-table tbody tr:hover {
    background:
        var(--chat-message-hover-background);
}

.staff-table-user {
    display: flex;
    min-width: 180px;
    align-items: center;
    gap: 10px;
}

.staff-table-user > div:last-child {
    display: grid;
    min-width: 0;
}

.staff-table-user strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-table-user span {
    color: var(--chat-text-muted);
    font-size: 11px;
}

.staff-ip-address {
    color: var(--chat-text-muted);
    font-family:
        Consolas,
        Monaco,
        monospace;
    font-size: var(--chat-font-size-small);
}

.staff-muted-action {
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-action-button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--chat-font-size-small);
}

/* -------------------------------------------------
   Staff forms
------------------------------------------------- */

.staff-form-group {
    margin-bottom: var(--chat-spacing-md);
}

.staff-form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--chat-text);
    font-weight: 700;
}

.staff-form-help {
    margin:
        var(--chat-spacing-md)
        0
        0;
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

.staff-action-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: var(--chat-spacing-sm);
}

.staff-danger-button {
    background: var(--chat-danger);
    color: var(--chat-primary-text);
}

.staff-danger-button:hover {
    background: #ca5959;
}

.staff-danger-button:disabled,
.chat-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* -------------------------------------------------
   Staff modal
------------------------------------------------- */

.staff-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    place-items: center;
    padding: var(--chat-spacing-lg);
}

.staff-modal.is-open {
    display: grid;
}

.staff-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 19, 0.78);
}

.staff-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    overflow: hidden;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border-light);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-background);
}

.staff-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-spacing-md);
    padding: var(--chat-spacing-lg);
    border-bottom:
        var(--chat-border-width)
        solid
        var(--chat-border);
    background: var(--chat-panel-alt-background);
}

.staff-modal-header h2 {
    margin: 0;
    font-size: var(--chat-title-size);
}

.staff-modal-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: transparent;
    color: var(--chat-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.staff-modal-close:hover {
    border-color: var(--chat-border-light);
    color: var(--chat-text);
}

.staff-modal-content {
    padding: var(--chat-spacing-lg);
}

.staff-selected-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--chat-spacing-lg);
    padding: var(--chat-spacing-md);
    border:
        var(--chat-border-width)
        solid
        var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-panel-alt-background);
}

.staff-selected-user > div:last-child {
    display: grid;
}

.staff-selected-user strong {
    color: var(--chat-text);
    font-size: var(--chat-font-size-large);
}

.staff-selected-user span {
    color: var(--chat-text-muted);
    font-size: var(--chat-font-size-small);
}

@media (max-width: 760px) {
    .staff-table,
    .staff-table tbody,
    .staff-table tr,
    .staff-table td {
        display: block;
        width: 100%;
    }

    .staff-table thead {
        display: none;
    }

    .staff-table tr {
        padding:
            var(--chat-spacing-sm)
            var(--chat-spacing-md);
        border-bottom:
            var(--chat-border-width)
            solid
            var(--chat-border);
    }

    .staff-table tr:last-child {
        border-bottom: 0;
    }

    .staff-table td {
        display: grid;
        grid-template-columns:
            minmax(90px, 0.35fr)
            minmax(0, 0.65fr);
        gap: var(--chat-spacing-sm);
        padding: 7px 0;
        border: 0;
    }

    .staff-table td::before {
        content: attr(data-label);
        color: var(--chat-text-muted);
        font-size: var(--chat-font-size-small);
        font-weight: 700;
        text-transform: uppercase;
    }

    .staff-table-user {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .staff-action-grid {
        grid-template-columns: 1fr;
    }

    .staff-modal {
        padding: var(--chat-spacing-sm);
    }

    .staff-table td {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------
   SCS MiniChat emotes
------------------------------------------------- */

.chat-emote {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -2px 2px 0;
    object-fit: contain;
    vertical-align: middle;
    user-select: none;
}

.chat-message-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.chat-message-text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--chat-text);
}