/* ==========================================================
   SOCIALBURRACO RESPONSIVE FOUNDATION · 2026
   Caricato per ultimo: protegge tutte le pagine da overflow,
   controlli troppo piccoli e layout rigidi sui dispositivi mobili.
   ========================================================== */

html {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

p,
li,
dd,
td,
th {
    overflow-wrap: anywhere;
}

[hidden] {
    display: none !important;
}

.utility-dock {
    width: min(760px, calc(100% - 36px));
    margin: 0 auto 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(18, 24, 20, .82);
}

.utility-dock > :where(
    .notifications-shortcut,
    .social-shortcut,
    .moderation-shortcut,
    .history-shortcut,
    .rankings-shortcut,
    .vip-shortcut,
    .tournaments-shortcut,
    .marketplace-shortcut,
    .appeals-shortcut,
    .administration-shortcut,
    .release-shortcut,
    .about-shortcut
) {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
}

/* Tabelle e blocchi tecnici non devono allargare l'intera pagina. */
table {
    max-width: 100%;
}

.table-wrap,
.data-table-wrap,
.responsive-table,
.audit-table,
.admin-table,
.rules-table {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .primary-button,
    .secondary-button,
    .primary-action,
    .secondary-action,
    .danger-action,
    button.primary {
        min-height: 44px;
    }
}

@media (max-width: 1024px) {
    :where(
        .about-shell,
        .admin-shell,
        .test-shell,
        .beta-shell,
        .diag-shell,
        .history-shell,
        .moderation-shell,
        .notifications-shell,
        .private-shell,
        .profile-shell,
        .release-shell,
        .rules-shell,
        .social-shell,
        body > main.shell
    ) {
        width: min(100% - 24px, 960px) !important;
        margin-inline: auto !important;
    }

    .admin-layout,
    .history-layout,
    .test-layout,
    .profile-layout,
    .rules-grid,
    .release-grid,
    .social-layout,
    .private-layout,
    .notifications-layout,
    body > main.shell > .layout,
    body > main.shell > .grid {
        gap: 14px !important;
    }
}

/* Lobby desktop: colonne vere, senza pannelli che invadono il centro. */
@media (min-width: 821px) {
    .app-shell .lobby-grid {
        width: min(1540px, calc(100% - 36px)) !important;
        grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 310px) !important;
        gap: 18px !important;
    }

    .app-shell .left-column,
    .app-shell .center-column,
    .app-shell .right-column,
    .app-shell .panel,
    .app-shell .hero-strip {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-shell .left-column > *,
    .app-shell .right-column > * {
        width: 100% !important;
    }

    .app-shell .hero-strip {
        overflow: visible !important;
    }

    .app-shell .hero-strip h1 {
        max-width: 12ch;
        text-wrap: balance;
    }
}

@media (min-width: 821px) and (max-width: 1280px) {
    .app-shell .lobby-grid {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr) !important;
    }

    .app-shell .right-column {
        position: static !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 16px !important;
    }
}

/* Notebook e desktop medi: alleggerisce proporzioni e pannelli laterali. */
@media (min-width: 1281px) and (max-width: 1440px) {
    .lobby-grid {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 300px) !important;
        gap: 16px !important;
    }

    .left-column {
        min-width: 0;
    }

    .center-column {
        min-width: 0;
    }

    .right-column {
        position: static !important;
        grid-column: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
        gap: 16px !important;
    }

    .right-column > .panel {
        min-width: 0;
        height: 100%;
    }

    .hero-strip {
        padding: 24px !important;
    }

    .hero-strip h1 {
        max-width: 13ch;
        font-size: clamp(2.25rem, 4vw, 3.05rem) !important;
    }

    .premium-table-toolbar {
        flex-wrap: wrap;
    }

    .premium-table-search {
        flex: 1 1 190px;
    }
}

@media (min-width: 821px) and (max-height: 700px) {
    .lobby-grid {
        margin-top: 14px;
    }

    .left-column {
        top: 92px;
    }

    .hero-strip {
        min-height: 150px !important;
    }

    .hero-strip h1 {
        font-size: clamp(2.15rem, 3.6vw, 2.85rem) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --bs-mobile-gutter: 12px;
    }

    :where(
        .about-shell,
        .admin-shell,
        .test-shell,
        .beta-shell,
        .diag-shell,
        .history-shell,
        .moderation-shell,
        .notifications-shell,
        .private-shell,
        .profile-shell,
        .release-shell,
        .rules-shell,
        .social-shell,
        body > main.shell
    ) {
        width: calc(100% - (var(--bs-mobile-gutter) * 2)) !important;
        padding-inline: 0 !important;
    }

    :where(
        .about-shell,
        .admin-shell,
        .test-shell,
        .beta-shell,
        .diag-shell,
        .moderation-shell,
        .release-shell,
        .social-shell,
        body > main.shell
    ) > header,
    :where(
        .history-header,
        .notifications-header,
        .private-header,
        .profile-topbar,
        .rules-header
    ) {
        min-height: 68px !important;
        height: auto !important;
        padding-block: 12px !important;
        gap: 10px !important;
    }

    :where(
        .admin-layout,
        .history-layout,
        .test-layout,
        .profile-layout,
        .rules-grid,
        .release-grid,
        .social-layout,
        .private-layout,
        .notifications-layout,
        body > main.shell > .layout,
        body > main.shell > .grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.panel, .settings-card, .side-card) {
        border-radius: 16px;
    }

    .drawer,
    .modal,
    [class$="-modal"] {
        max-width: 100vw;
        max-height: 100dvh;
    }

    .drawer {
        width: min(100%, 440px) !important;
        padding: 20px 16px !important;
    }

    .toast-region {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        left: 10px !important;
    }

    .toast {
        width: 100%;
        max-width: none !important;
    }

    /* Lobby: prima i tavoli, poi community e strumenti sociali. */
    .topbar {
        min-height: 66px;
        height: auto !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .profile-menu {
        min-width: 0;
        gap: 5px !important;
    }

    .lobby-grid {
        width: calc(100% - 20px) !important;
        margin: 10px auto 82px !important;
        gap: 12px !important;
    }

    .hero-strip {
        min-height: 0 !important;
        padding: 20px 18px !important;
        gap: 18px !important;
    }

    .hero-strip h1 {
        font-size: clamp(1.9rem, 9vw, 2.7rem) !important;
    }

    .panel {
        padding: 16px !important;
    }

    .panel-heading {
        align-items: flex-start;
        gap: 10px !important;
    }

    .premium-table-filters,
    .notification-filters,
    .filter-row {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .premium-table-filters > *,
    .notification-filters > *,
    .filter-row > * {
        flex: 0 0 auto;
    }

    .users-list,
    .notifications-list,
    .chat-list {
        min-height: 0 !important;
        max-height: 420px !important;
    }

    /* Le scorciatoie diventano una barra mobile, senza coprire contenuti. */
    :where(
        .notifications-shortcut,
        .social-shortcut,
        .moderation-shortcut,
        .history-shortcut,
        .rankings-shortcut,
        .vip-shortcut,
        .tournaments-shortcut,
        .marketplace-shortcut,
        .appeals-shortcut,
        .administration-shortcut,
        .release-shortcut,
        .about-shortcut
    ) {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px;
    }

    .app-shell {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .utility-dock {
        position: fixed;
        z-index: 250;
        right: 8px;
        bottom: max(7px, env(safe-area-inset-bottom));
        left: 8px;
        display: flex;
        gap: 8px;
        padding: 7px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
        background: rgba(18, 24, 20, .96);
        box-shadow: 0 14px 38px rgba(0, 0, 0, .38);
        scrollbar-width: none;
        backdrop-filter: blur(16px);
        -webkit-overflow-scrolling: touch;
    }

    .utility-dock::-webkit-scrollbar {
        display: none;
    }

    /* Profilo: moduli leggibili e pulsanti utilizzabili col pollice. */
    .identity-card {
        position: static !important;
        padding: 22px 18px !important;
    }

    .settings-card {
        padding: 20px 16px !important;
    }

    .card-heading,
    .panel-head,
    .heading,
    .actions {
        flex-wrap: wrap;
    }

    .avatar-position-grid {
        width: 100%;
    }

    /* Tavolo: il piano resta protagonista e la sidebar scende sotto. */
    .table-topbar {
        min-height: 64px;
        height: auto !important;
        padding: 9px 10px !important;
        gap: 7px !important;
    }

    .table-live {
        gap: 4px !important;
    }

    .table-layout {
        padding: 8px !important;
        gap: 10px !important;
    }

    .table-sidebar {
        max-height: none !important;
    }

    .hand-header {
        flex-wrap: wrap;
        gap: 7px !important;
    }

    .my-hand {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    :root {
        --bs-mobile-gutter: 8px;
    }

    .brand-name,
    .profile-copy {
        display: none !important;
    }

    .panel,
    .settings-card,
    .side-card {
        padding: 14px !important;
    }

    .profile-topbar > div strong,
    .table-title strong {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-profile-stats,
    .profile-metrics,
    .stats-grid {
        gap: 5px !important;
    }
}

/* Telefoni in orizzontale: preserva spazio verticale e aree sicure. */
@media (max-height: 540px) and (orientation: landscape) and (pointer: coarse) {
    .topbar,
    .table-topbar,
    .profile-topbar {
        position: relative !important;
        min-height: 56px !important;
    }

    .lobby-grid {
        margin-top: 8px !important;
    }

    .drawer {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}


/* R192 - two-table center with expanded social space */
.app-shell .lobby-left-hidden {
    display: none !important;
}

@media (min-width: 1180px) {
    .app-shell .lobby-grid {
        grid-template-columns: minmax(560px, 680px) minmax(380px, 1fr) !important;
    }

    .app-shell .center-column {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .app-shell .right-column {
        grid-column: 2 !important;
        position: static !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        min-width: 0 !important;
    }
}

@media (min-width: 821px) and (max-width: 1179px) {
    .app-shell .lobby-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app-shell .center-column,
    .app-shell .right-column {
        grid-column: 1 !important;
        position: static !important;
        min-width: 0 !important;
    }
}


/* R193 - hide lobby hero safely */
.app-shell .center-column > .hero-strip {
    display: none !important;
}


/* R194 - chat first and taller social panel */
@media (min-width: 1180px) {
    .app-shell .chat-panel {
        min-height: calc(100vh - 142px) !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(360px, 1fr) auto !important;
    }

    .app-shell .chat-list {
        height: auto !important;
        min-height: 360px !important;
        max-height: none !important;
    }

    .app-shell .notifications-panel {
        min-height: 190px !important;
    }

    .app-shell .notifications-list {
        max-height: 96px !important;
    }
}

@media (min-width: 821px) and (max-width: 1179px) {
    .app-shell .chat-panel {
        min-height: 460px !important;
    }

    .app-shell .chat-list {
        height: 310px !important;
        max-height: none !important;
    }
}


/* R195 - inline readable chat messages */
.app-shell .chat-message {
    margin-bottom: 5px !important;
    padding: 7px 9px !important;
    border-color: rgba(234, 215, 170, .10) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .018) !important;
}

.app-shell .chat-message.mine {
    border-color: rgba(200, 170, 109, .18) !important;
    background: rgba(200, 170, 109, .045) !important;
}

.app-shell .chat-message .chat-line {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: .78rem !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere !important;
}

.app-shell .chat-message time {
    display: inline !important;
    margin-right: 7px !important;
    color: #9fd6a7 !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
}

.app-shell .chat-message strong {
    color: var(--gold-light) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

.app-shell .chat-separator {
    margin: 0 5px 0 1px !important;
    color: rgba(234, 215, 170, .72) !important;
    font-weight: 850 !important;
}

.app-shell .chat-text {
    color: var(--text) !important;
}


/* R196 - softer chat bubbles */
.app-shell .chat-list {
    padding: 2px 6px 8px 0 !important;
}

.app-shell .chat-message {
    margin-bottom: 6px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(234, 215, 170, .075) !important;
    border-radius: 13px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, .012)) !important;
    box-shadow: none !important;
}

.app-shell .chat-message.mine {
    border-color: rgba(200, 170, 109, .15) !important;
    background:
        linear-gradient(135deg, rgba(200, 170, 109, .07), rgba(200, 170, 109, .028)) !important;
}

.app-shell .chat-message .chat-line {
    font-size: .82rem !important;
    line-height: 1.48 !important;
}

.app-shell .chat-message time {
    margin-right: 8px !important;
    color: #86d79b !important;
    font-size: .7rem !important;
    font-weight: 780 !important;
}

.app-shell .chat-message strong {
    color: #ead7aa !important;
    font-size: .82rem !important;
    font-weight: 860 !important;
}

.app-shell .chat-separator {
    margin: 0 6px 0 2px !important;
    color: rgba(234, 215, 170, .62) !important;
}

.app-shell .chat-text {
    color: #f4f1e8 !important;
    font-weight: 500 !important;
}

.app-shell .chat-message-actions {
    margin-top: 4px !important;
    padding-left: 2px !important;
    opacity: .44 !important;
}

.app-shell .chat-message:hover .chat-message-actions {
    opacity: .78 !important;
}


/* R197 - compact lobby chat log */
.app-shell .chat-list {
    padding: 0 6px 6px 0 !important;
}

.app-shell .chat-message {
    position: relative !important;
    margin: 0 !important;
    padding: 3px 8px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(234, 215, 170, .055) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .chat-message.mine {
    border-color: rgba(200, 170, 109, .08) !important;
    background: rgba(200, 170, 109, .018) !important;
}

.app-shell .chat-message:hover {
    background: rgba(255, 255, 255, .025) !important;
}

.app-shell .chat-message .chat-line {
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
}

.app-shell .chat-message time {
    margin-right: 6px !important;
    color: #76c98c !important;
    font-size: .64rem !important;
    font-weight: 760 !important;
    font-variant-numeric: tabular-nums !important;
}

.app-shell .chat-message strong {
    color: #ead7aa !important;
    font-size: .76rem !important;
    font-weight: 830 !important;
}

.app-shell .chat-separator {
    margin: 0 4px 0 1px !important;
    color: rgba(234, 215, 170, .52) !important;
    font-weight: 800 !important;
}

.app-shell .chat-text {
    color: #f4f1e8 !important;
    font-weight: 470 !important;
}

.app-shell .chat-message-actions {
    position: absolute !important;
    right: 8px !important;
    top: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.app-shell .chat-message:hover .chat-message-actions {
    opacity: .72 !important;
    pointer-events: auto !important;
}

.app-shell .chat-message-actions button {
    font-size: .56rem !important;
    background: rgba(13, 17, 14, .88) !important;
    border-radius: 6px !important;
    padding: 1px 4px !important;
}


/* R198 - readable social chat */
.app-shell .chat-list {
    padding: 2px 8px 8px 0 !important;
}

.app-shell .chat-message {
    position: relative !important;
    margin: 0 !important;
    padding: 4px 9px 5px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(234, 215, 170, .06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .chat-message.mine {
    border-color: rgba(200, 170, 109, .10) !important;
    background: rgba(200, 170, 109, .022) !important;
}

.app-shell .chat-message:hover {
    background: rgba(255, 255, 255, .028) !important;
}

.app-shell .chat-message .chat-line {
    margin: 0 !important;
    font-size: .9rem !important;
    line-height: 1.34 !important;
    overflow-wrap: anywhere !important;
}

.app-shell .chat-message time {
    margin-right: 7px !important;
    color: #74d38d !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
}

.app-shell .chat-message strong {
    color: #ead7aa !important;
    font-size: .9rem !important;
    font-weight: 880 !important;
}

.app-shell .chat-separator {
    margin: 0 5px 0 2px !important;
    color: rgba(234, 215, 170, .62) !important;
    font-weight: 900 !important;
}

.app-shell .chat-text {
    color: #fffaf0 !important;
    font-weight: 520 !important;
}

.app-shell .chat-message-actions {
    position: absolute !important;
    right: 8px !important;
    top: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.app-shell .chat-message:hover .chat-message-actions {
    opacity: .72 !important;
    pointer-events: auto !important;
}

.app-shell .chat-message-actions button {
    font-size: .58rem !important;
    background: rgba(13, 17, 14, .92) !important;
    border-radius: 6px !important;
    padding: 1px 5px !important;
}


/* R199 - fixed visible chat composer and Enter-to-send support */
.app-shell .right-column {
    min-height: 0 !important;
}

.app-shell .chat-panel {
    overflow: hidden !important;
}

@media (min-width: 821px) {
    .app-shell .chat-panel {
        height: calc(100dvh - 142px) !important;
        min-height: 520px !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    .app-shell .chat-list {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}

.app-shell .chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.app-shell .chat-form textarea {
    grid-column: 1 !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    resize: none !important;
    line-height: 20px !important;
    border-radius: 10px !important;
    font-size: .86rem !important;
}

.app-shell .chat-form-footer {
    grid-column: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
}

.app-shell .chat-form-footer small {
    display: none !important;
}

.app-shell .chat-form-footer button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
}

@media (max-width: 820px) {
    .app-shell .chat-panel {
        min-height: min(620px, calc(100dvh - 110px)) !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(240px, 1fr) auto !important;
        overflow: hidden !important;
    }

    .app-shell .chat-list {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 430px) {
    .app-shell .chat-form {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    .app-shell .chat-form-footer button {
        padding: 0 12px !important;
    }
}


/* R200 - compact chat header: keep only "Chat Lobby" visible */
.app-shell .chat-panel .panel-heading.compact {
    margin-bottom: 8px !important;
}

.app-shell .chat-panel .panel-heading .eyebrow,
.app-shell .chat-panel .chat-status {
    display: none !important;
}

.app-shell .chat-panel .panel-heading h2 {
    margin-top: 0 !important;
}


/* R201 - restore three-row chat layout after hiding status label */
@media (min-width: 821px) {
    .app-shell .chat-panel {
        height: calc(100dvh - 142px) !important;
        min-height: 520px !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 820px) {
    .app-shell .chat-panel {
        min-height: min(620px, calc(100dvh - 110px)) !important;
        grid-template-rows: auto minmax(240px, 1fr) auto !important;
    }
}

.app-shell .chat-panel .chat-list {
    min-height: 0 !important;
    overflow-y: auto !important;
}

.app-shell .chat-panel .chat-form {
    align-self: end !important;
}


/* R202 - local lobby chat filters */
.app-shell .chat-panel .chat-heading {
    margin-bottom: 7px !important;
}

.app-shell .chat-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, 1.25fr) !important;
    gap: 7px !important;
    margin: 0 0 8px !important;
}

.app-shell .chat-filters button,
.app-shell .chat-filters label {
    min-width: 0 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(234, 215, 170, .13) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .025) !important;
    color: var(--muted) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.app-shell .chat-filters button.active {
    border-color: rgba(200, 170, 109, .46) !important;
    background: rgba(200, 170, 109, .12) !important;
    color: var(--gold-light) !important;
}

.app-shell .chat-filters label {
    justify-content: flex-start !important;
    padding-right: 9px !important;
}

.app-shell .chat-filters label span {
    flex: 0 0 auto !important;
    color: var(--gold-light) !important;
}

.app-shell .chat-filters input {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: .72rem !important;
}

@media (min-width: 821px) {
    .app-shell .chat-panel {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 820px) {
    .app-shell .chat-panel {
        grid-template-rows: auto auto minmax(220px, 1fr) auto !important;
    }

    .app-shell .chat-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .app-shell .chat-filters label {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 430px) {
    .app-shell .chat-filters {
        gap: 6px !important;
    }

    .app-shell .chat-filters button,
    .app-shell .chat-filters label {
        min-height: 32px !important;
        padding-inline: 8px !important;
        font-size: .68rem !important;
    }
}



/* R205 - nickname filter as inline pill input */
.app-shell .chat-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(118px, 1fr) !important;
}

.app-shell .chat-filter-nickname {
    min-width: 0 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid rgba(234, 215, 170, .13) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .025) !important;
}

.app-shell .chat-filter-nickname:focus-within {
    border-color: rgba(200, 170, 109, .46) !important;
    background: rgba(200, 170, 109, .12) !important;
}

.app-shell .chat-filter-nickname input {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--gold-light) !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.app-shell .chat-filter-nickname input::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}

@media (min-width: 821px) {
    .app-shell .chat-panel {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 820px) {
    .app-shell .chat-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .app-shell .chat-filter-nickname {
        grid-column: 1 / -1 !important;
    }
}