/* The Bates native live chat */
.tb-chat-root,
.tb-chat-users-card,
.tb-chat-login-card{
    font-family:var(--tb-font-content,"ThemeWebfontContent",sans-serif);
}
.tb-chat-login-card[hidden]{display:none !important}
body.tb-chat-session-active .tb-chat-login-card{display:none !important}
body.tb-chat-session-active .tb-next-chat-card,
body.tb-chat-session-active .tb-chat-users-card{display:none !important}

/* While the live chat is active, remove the normal page spacing so the chat
   background starts directly below the fixed header and ends at the footer. */
body.tb-body.tb-chat-session-active .tb-site-main{
    padding-top:var(--tb-header-height-desktop,112px) !important;
    padding-bottom:0 !important;
    background:#070707 !important;
}
body.tb-body.tb-chat-session-active .tb-site-main > article.tb-entry,
body.tb-body.tb-chat-session-active .tb-site-main > .tb-entry,
body.tb-body.tb-chat-session-active .tb-site-main > .tb-page-entry,
body.tb-chat-session-active .tb-site-main > article.tb-chat-path,
body.tb-chat-session-active .tb-chat-path{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
body.tb-body.tb-chat-session-active .tb-site-main > article.tb-entry > .tb-entry-content,
body.tb-body.tb-chat-session-active .tb-site-main > article.tb-page-entry > .tb-entry-content{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
body.tb-chat-session-active .tb-entry-content.tb-chat-path,
body.tb-chat-session-active .entry-content.tb-chat-path,
body.tb-chat-session-active .wp-block-post-content.tb-chat-path{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}
.tb-chat-root *,
.tb-chat-users-card *,
.tb-chat-login-card *{box-sizing:border-box}
.tb-chat-login-card{
    width:100%;
    margin:1.5rem 0;
    display:flex;
    align-items:flex-start;
    gap:1.15rem;
    padding:1.35rem 1.4rem;
    border:1px solid rgba(0,0,0,.22);
    border-radius:22px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 28px rgba(0,0,0,.11);
    color:var(--tb-color-text,#222);
}
.tb-chat-login-card__icon,
.tb-chat-users-card__icon{
    display:inline-flex;
    flex:0 0 4.25rem;
    width:4.25rem;
    height:4.25rem;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#000;
    color:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.tb-chat-login-card__icon svg,
.tb-chat-users-card__icon svg{width:2.45rem;height:2.45rem}
.tb-chat-login-card__content{flex:1 1 auto;min-width:0}
.tb-chat-login-card h3{
    margin:0 0 .9rem;
    font-family:var(--tb-font-content,"ThemeWebfontContent",sans-serif);
    font-size:1.25rem;
    font-weight:700;
}
.tb-chat-login-form{display:grid;gap:.7rem}
.tb-chat-login-form label{
    display:block;
    margin:0;
    font-weight:700;
    font-size:1rem;
}
.tb-chat-login-form input[type="text"],
.tb-chat-login-form input[type="password"]{
    width:100%;
    min-height:48px;
    padding:.65rem .8rem;
    border:1px solid #999;
    border-radius:10px;
    background:#fff;
    color:#111;
    font:inherit;
    outline:none;
}
.tb-chat-login-form input:focus{border-color:#000;box-shadow:0 0 0 2px rgba(0,0,0,.12)}
.tb-chat-password-row{display:grid;gap:.7rem}
.tb-chat-password-row[hidden]{display:none !important}
.tb-chat-form-message{min-height:1.2em;color:#9b111e;font-size:.92rem}
.tb-chat-theme-button,
.tb-chat-action-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    min-height:44px;
    padding:.65rem 1.15rem;
    border:2px solid #000;
    border-radius:20px;
    background:#000;
    color:#fff !important;
    font-family:var(--tb-font-headline,"ThemeWebfontHeadline",sans-serif);
    font-size:1rem;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.tb-chat-theme-button:hover,
.tb-chat-theme-button:focus-visible,
.tb-chat-action-button:hover,
.tb-chat-action-button:focus-visible{background:#fff;color:#000 !important;outline:none}
.tb-chat-login-card--closed{align-items:center;font-size:1.1rem;font-weight:700}
.tb-chat-login-card--closed p{margin:0}

.tb-chat-users-card{
    width:100%;
    margin:1.5rem 0;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.22);
    border-radius:22px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 28px rgba(0,0,0,.11);
    color:var(--tb-color-text,#222);
}
.tb-chat-users-card__body{display:flex;gap:1.15rem;align-items:flex-start;padding:1.35rem 1.4rem}
.tb-chat-users-card__content{min-width:0;flex:1 1 auto}
.tb-chat-users-card__headline{padding-bottom:.55rem;border-bottom:1px solid rgba(0,0,0,.35);font-weight:700}
.tb-chat-users-card ul{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.35rem}
.tb-chat-users-card li{display:flex;align-items:center;gap:.55rem;margin:0;padding:0}
.tb-chat-users-card__dot{width:.7rem;height:.7rem;flex:0 0 .7rem;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.tb-chat-presence-dot{display:inline-block;border-radius:50%;background:#43d17a}
.tb-chat-presence-dot--present{background:#43d17a !important}
.tb-chat-presence-dot--brb{background:#f2c94c !important}
.tb-chat-presence-dot--away{background:#eb5757 !important}
.tb-chat-users-card__mod{margin-left:auto;padding:.12rem .4rem;border-radius:999px;background:#000;color:#fff;font-size:.72rem}
.tb-chat-users-card__empty{opacity:.7}

/* Active chat canvas. */
.tb-chat-app[hidden]{display:none !important}
.tb-chat-root{
    --tb-chat-bg-image:none;
    --tb-chat-bg-position:center center;
    --tb-chat-bg-image-mobile:var(--tb-chat-bg-image);
    --tb-chat-bg-position-mobile:var(--tb-chat-bg-position);
}
.tb-chat-root.tb-chat-root--active{
    position:relative;
    left:50%;
    width:100vw !important;
    max-width:none !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
}
.tb-chat-app{
    position:relative;
    width:100%;
    min-height:calc(100dvh - var(--tb-header-height-desktop,112px));
    margin:0;
    padding:0;
    overflow:visible;
    border-radius:0;
    background:#070707 var(--tb-chat-bg-image) var(--tb-chat-bg-position)/cover no-repeat;
    color:#f8f8f8;
    box-shadow:none;
    isolation:isolate;
}
.tb-chat-app::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(0,0,0,.52);
    pointer-events:none;
}
.tb-chat-shell{
    position:relative;
    z-index:1;
    display:flex;
    width:min(100% - 2rem,var(--tb-site-width,1400px));
    min-height:calc(100dvh - var(--tb-header-height-desktop,112px));
    margin-inline:auto;
    overflow:hidden;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.14);
    border-radius:24px;
    background:rgba(0,0,0,.62);
    box-shadow:0 12px 38px rgba(0,0,0,.32);
}
.tb-chat-topbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:64px;
    gap:.7rem 1rem;
    padding:.75rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.78);
}
.tb-chat-topbar__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;margin-left:auto}
.tb-chat-topbar button{
    min-height:38px;
    padding:.45rem .75rem;
    border:1px solid rgba(255,255,255,.7);
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font:inherit;
    cursor:pointer;
}
.tb-chat-topbar button:hover,.tb-chat-topbar button:focus-visible{background:#fff;color:#000;outline:none}
.tb-chat-status-control{
    display:inline-flex;
    min-height:38px;
    align-items:center;
    gap:.45rem;
    padding:.25rem .55rem;
    border:1px solid rgba(255,255,255,.7);
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
}
.tb-chat-status-dot{width:.68rem;height:.68rem;flex:0 0 .68rem;box-shadow:0 0 0 1px rgba(255,255,255,.38)}
.tb-chat-status-control select{
    max-width:9rem;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font:inherit;
    cursor:pointer;
}
.tb-chat-status-control select option{background:#111;color:#fff}
.tb-screen-reader-text{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}
.tb-chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;flex:1 1 auto;min-height:0}
.tb-chat-main{display:flex;min-width:0;flex-direction:column;min-height:0}
.tb-chat-messages{
    flex:1 1 auto;
    min-height:320px;
    max-height:60vh;
    overflow-y:auto;
    padding:1rem;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
}
.tb-chat-message{margin:0 0 .85rem;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.09);backdrop-filter:blur(2px)}
.tb-chat-message__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;margin-bottom:.28rem;font-size:.78rem;color:rgba(255,255,255,.7)}
.tb-chat-message__name{font-weight:700;color:var(--tb-chat-message-color,#fff);font-size:.95rem}
.tb-chat-message__body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tb-chat-message-color,#fff);font-size:1rem;line-height:1.45}
.tb-chat-message--own{background:rgba(255,255,255,.13)}
.tb-chat-message--moderated{background:rgba(255,255,255,.055)}
.tb-chat-message--moderated .tb-chat-message__body{color:rgba(255,255,255,.68);font-style:italic}
.tb-chat-system-line{margin:.5rem 0;padding:.45rem .7rem;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.76);font-size:.85rem;text-align:center}
.tb-chat-warning{margin:.7rem 1rem 0;padding:.7rem .85rem;border:1px solid #ffd166;border-radius:12px;background:rgba(255,209,102,.15);color:#fff;font-weight:700}
.tb-chat-composer-wrap{border-top:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.78);padding:.8rem}
.tb-chat-composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:stretch}
.tb-chat-composer textarea{
    width:100%;
    min-height:78px;
    max-height:140px;
    resize:vertical;
    padding:.65rem .75rem;
    border:1px solid rgba(255,255,255,.45);
    border-radius:12px;
    background:rgba(255,255,255,.96);
    color:#111;
    font:inherit;
    line-height:1.35;
    outline:none;
}
.tb-chat-composer textarea:focus{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.tb-chat-composer-tools{display:flex;flex-direction:column;align-self:stretch;gap:6px}
.tb-chat-color-button,.tb-chat-emoji-button,.tb-chat-send-button{
    display:inline-flex;
    width:48px;
    min-width:48px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.6);
    border-radius:12px;
    background:#000;
    color:#fff;
    cursor:pointer;
    font:inherit;
}
.tb-chat-color-button,.tb-chat-emoji-button{
    width:38px;
    min-width:38px;
    height:auto;
    min-height:0;
    flex:1 1 0;
}
.tb-chat-send-button{
    height:auto;
    min-height:0;
    align-self:stretch;
}
.tb-chat-emoji-button{font-size:1.2rem}
.tb-chat-color-button{position:relative;font-size:1rem;font-weight:700}
.tb-chat-color-button__letter{position:relative;z-index:1;line-height:1}
.tb-chat-color-button__swatch{
    position:absolute;
    top:-4px;
    right:-4px;
    bottom:auto;
    width:11px;
    height:11px;
    border:1px solid #000;
    border-radius:50%;
    background:var(--tb-chat-current-color,#FFFFFF);
    box-shadow:0 0 0 1px rgba(255,255,255,.85);
}
.tb-chat-send-button svg{display:block;width:1.45rem;height:1.45rem}
.tb-chat-color-button:hover,.tb-chat-emoji-button:hover,.tb-chat-send-button:hover,
.tb-chat-color-button:focus-visible,.tb-chat-emoji-button:focus-visible,.tb-chat-send-button:focus-visible{background:#fff;color:#000;outline:none}
.tb-chat-picker-wrap{position:relative}
.tb-chat-picker-panel{
    position:absolute;
    left:0;
    bottom:calc(100% + .55rem);
    z-index:30;
    max-width:calc(100vw - 2rem);
    padding:.7rem;
    border:1px solid rgba(255,255,255,.3);
    border-radius:14px;
    background:#111;
    box-shadow:0 10px 34px rgba(0,0,0,.55);
}
.tb-chat-picker-panel[hidden]{display:none}
.tb-chat-color-panel{width:300px;max-height:390px;overflow-y:auto;overscroll-behavior:contain}
.tb-chat-emoji-panel{width:min(560px,calc(100vw - 2rem))}
.tb-chat-picker-label{
    margin:0 0 .55rem;
    color:rgba(255,255,255,.82);
    font-size:.82rem;
    font-weight:700;
}
.tb-chat-colors{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    column-gap:.42rem;
    row-gap:.58rem;
    padding:.1rem;
}
.tb-chat-color{
    width:26px;
    height:26px;
    justify-self:center;
    padding:0;
    border:2px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:var(--tb-chat-color);
    cursor:pointer;
}
.tb-chat-color:hover,.tb-chat-color:focus-visible{transform:scale(1.1);border-color:#fff;outline:none}
.tb-chat-color.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.tb-chat-emoji-grid{
    display:grid;
    grid-template-columns:repeat(10,minmax(2.15rem,1fr));
    gap:.18rem;
    max-height:290px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:.05rem .15rem .15rem 0;
    scrollbar-width:thin;
}
.tb-chat-emoji-grid button{
    display:flex;
    width:100%;
    min-width:2.15rem;
    height:2.15rem;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    font-size:1.25rem;
    line-height:1;
    cursor:pointer;
}
.tb-chat-emoji-grid button:hover,.tb-chat-emoji-grid button:focus-visible{background:rgba(255,255,255,.12);outline:none}
.tb-chat-users-panel{min-width:0;border-left:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.64);padding:.9rem}
.tb-chat-users-panel h4{margin:0 0 .65rem;color:#fff;font-family:var(--tb-font-content,"ThemeWebfontContent",sans-serif);font-size:1rem}
.tb-chat-users-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.tb-chat-users-panel li{display:flex;align-items:center;gap:.45rem;min-width:0;margin:0;padding:0;font-size:.9rem}
.tb-chat-users-panel__dot{width:.65rem;height:.65rem;flex:0 0 .65rem;border-radius:50%}
.tb-chat-users-panel__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-chat-users-panel__mod{margin-left:auto;font-size:.65rem;opacity:.75}
.tb-chat-empty{opacity:.7;font-style:italic}

/* Moderator lightbox. */
.tb-chat-modal[hidden]{display:none !important}
.tb-chat-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.78)}
.tb-chat-modal__dialog{width:min(760px,100%);max-height:min(82vh,760px);overflow:auto;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:#111;color:#fff;box-shadow:0 18px 70px rgba(0,0,0,.55)}
.tb-chat-modal__header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.tb-chat-modal__header h3{margin:0 auto 0 0;color:#fff;font-family:var(--tb-font-content,"ThemeWebfontContent",sans-serif);font-size:1.2rem}
.tb-chat-modal__close{width:40px;height:40px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:#fff;font-size:1.25rem;cursor:pointer}
.tb-chat-modal__body{display:grid;gap:1.2rem;padding:1rem}
.tb-chat-moderation-section h4{margin:0 0 .6rem;color:#fff;font-family:var(--tb-font-content,"ThemeWebfontContent",sans-serif);font-size:1rem}
.tb-chat-moderation-list{display:grid;gap:.45rem}
.tb-chat-moderation-row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.55rem .65rem;border-radius:10px;background:rgba(255,255,255,.07)}
.tb-chat-moderation-row__name{margin-right:auto;font-weight:700}
.tb-chat-moderation-messages{max-height:320px;overflow-y:auto;overscroll-behavior-y:auto;padding-right:.2rem}
.tb-chat-moderation-message-row{align-items:flex-start}
.tb-chat-moderation-message-info{display:grid;min-width:min(100%,260px);flex:1 1 300px;gap:.18rem}
.tb-chat-moderation-message-info strong{font-size:.82rem;color:rgba(255,255,255,.8)}
.tb-chat-moderation-message-info span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.tb-chat-moderation-row button[data-tb-moderate-message]{border-color:#ffd166;color:#ffe7a8}
.tb-chat-moderation-row button[data-tb-delete-message]{border-color:#d85a67;color:#ffd6da}
.tb-chat-moderation-row button{min-height:34px;padding:.35rem .6rem;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:#000;color:#fff;cursor:pointer}
.tb-chat-moderation-row button:hover,.tb-chat-moderation-row button:focus-visible{background:#fff;color:#000;outline:none}
.tb-chat-moderation-row button[data-tb-ban]{border-color:#d85a67;color:#ffd6da}
.tb-chat-moderation-row button[data-tb-unban]{border-color:#8fd19e;color:#c9f5d3}
.tb-chat-moderation-note{min-height:1.3em;color:#ffd166;font-size:.9rem}

/* Hide the rest of the Gutenberg page while the active chat is open. */
[data-tb-chat-hidden-by-app="1"]{display:none !important}
.tb-chat-path.wp-block-columns,
.tb-chat-path.wp-block-column{
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    flex-basis:100% !important;
    overflow:visible !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
.tb-chat-path.wp-block-columns{display:block !important;gap:0 !important}
.tb-chat-root.tb-chat-root--active{content-visibility:visible !important;contain:none !important;contain-intrinsic-size:auto !important}
.tb-chat-path{
    content-visibility:visible !important;
    contain:none !important;
    contain-intrinsic-size:auto !important;
}

@media (max-width:767px){
    body.tb-body.tb-chat-session-active .tb-site-main{padding-top:var(--tb-header-height-mobile,82px) !important;padding-bottom:0 !important;background:#070707 !important}
    .tb-chat-app{
        min-height:calc(100dvh - var(--tb-header-height-mobile,82px));
        padding:0;
        background-image:var(--tb-chat-bg-image-mobile);
        background-position:var(--tb-chat-bg-position-mobile);
    }
    .tb-chat-shell{
        width:min(100% - 1rem,var(--tb-site-width,1400px));
        min-height:calc(100dvh - var(--tb-header-height-mobile,82px));
        border-radius:18px;
    }
    .tb-chat-login-card,.tb-chat-users-card__body{gap:.85rem;padding:1.05rem 1rem}
    .tb-chat-login-card__icon,.tb-chat-users-card__icon{flex-basis:3.5rem;width:3.5rem;height:3.5rem}
    .tb-chat-login-card__icon svg,.tb-chat-users-card__icon svg{width:2rem;height:2rem}
    .tb-chat-layout{grid-template-columns:1fr}
    .tb-chat-app,.tb-chat-shell,.tb-chat-layout,.tb-chat-main,.tb-chat-messages{touch-action:pan-y}
    .tb-chat-users-panel{border-left:0;border-top:1px solid rgba(255,255,255,.15);max-height:160px;overflow:auto;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
    .tb-chat-messages{min-height:300px;max-height:50dvh;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
    .tb-chat-topbar{min-height:58px;padding:.65rem .75rem}
    .tb-chat-topbar__actions{width:100%}
    .tb-chat-topbar__actions button{flex:0 1 auto}
    .tb-chat-status-control{margin-left:auto}
    .tb-chat-composer{grid-template-columns:auto minmax(0,1fr) auto}
    .tb-chat-picker-panel{
        position:fixed;
        left:.5rem;
        right:.5rem;
        bottom:.5rem;
        width:auto;
        max-width:none;
        max-height:min(70dvh,520px);
        overflow:hidden;
    }
    .tb-chat-color-panel{max-height:none}
    .tb-chat-emoji-grid{
        grid-template-columns:repeat(7,minmax(2rem,1fr));
        max-height:min(42dvh,300px);
    }
}

/* Chat sound toggle */
.tb-chat-topbar .tb-chat-sound-toggle{
    display:inline-flex;
    align-self:center;
    margin:0;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    align-items:center;
    justify-content:center;
    padding:.45rem;
    line-height:1;
}
.tb-chat-sound-toggle svg{
    display:block;
    width:20px;
    height:20px;
}
.tb-chat-sound-toggle.is-muted{
    color:rgba(255,255,255,.78);
}
.tb-chat-topbar .tb-chat-sound-toggle:hover,
.tb-chat-topbar .tb-chat-sound-toggle:focus-visible{
    color:#000;
}

/* Fullscreen chat session: once a user is inside the chat, the normal theme
   chrome is removed and the chat becomes the entire viewport. */
body.tb-chat-session-active{
    overflow:hidden !important;
    background:#070707 !important;
}
body.tb-chat-session-active .tb-site-header,
body.tb-chat-session-active .tb-site-footer{
    display:none !important;
}
body.tb-body.tb-chat-session-active .tb-site,
body.tb-body.tb-chat-session-active .tb-site-main{
    width:100% !important;
    min-width:0 !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    height:100vh !important;
    height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#070707 !important;
}
body.tb-chat-session-active .tb-chat-root.tb-chat-root--active{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    left:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}
body.tb-chat-session-active .tb-chat-root--active .tb-chat-app,
body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
    width:100% !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
}
body.tb-chat-session-active .tb-chat-root--active .tb-chat-app{
    overflow:hidden !important;
}
body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
    box-shadow:none !important;
    padding-inline:5vw !important;
}
body.tb-chat-session-active .tb-chat-root--active .tb-chat-layout,
body.tb-chat-session-active .tb-chat-root--active .tb-chat-main{
    min-height:0 !important;
    overflow:hidden !important;
}
body.tb-chat-session-active .tb-chat-root--active .tb-chat-messages{
    min-height:0 !important;
    max-height:none !important;
}

@media (max-width:767px){
    body.tb-body.tb-chat-session-active .tb-site-main{
        padding:0 !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-app{
        background-image:var(--tb-chat-bg-image-mobile) !important;
        background-position:var(--tb-chat-bg-position-mobile) !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
        width:100% !important;
        padding-inline:5vw !important;
        border-radius:0 !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-messages{
        min-height:0 !important;
        max-height:none !important;
    }
}

/* Slim chat scrollbars across modern browsers. */
.tb-chat-root *,
.tb-chat-modal *{
    scrollbar-width:thin;
    scrollbar-color:rgba(224,224,224,.72) transparent;
}
.tb-chat-root *::-webkit-scrollbar,
.tb-chat-modal *::-webkit-scrollbar{
    width:5px;
    height:5px;
}
.tb-chat-root *::-webkit-scrollbar-track,
.tb-chat-modal *::-webkit-scrollbar-track{
    background:transparent;
}
.tb-chat-root *::-webkit-scrollbar-thumb,
.tb-chat-modal *::-webkit-scrollbar-thumb{
    border:0;
    border-radius:999px;
    background:rgba(224,224,224,.72);
}
.tb-chat-root *::-webkit-scrollbar-thumb:hover,
.tb-chat-modal *::-webkit-scrollbar-thumb:hover{
    background:rgba(240,240,240,.9);
}
.tb-chat-root *::-webkit-scrollbar-button,
.tb-chat-modal *::-webkit-scrollbar-button{
    display:none;
    width:0;
    height:0;
}

@media (max-width:767px){
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
        padding-inline:3vw !important;
    }

    /* Keep sound, presence and close controls together on one compact row. */
    .tb-chat-topbar{
        align-items:flex-start;
    }
    .tb-chat-topbar__actions{
        display:grid;
        width:100%;
        grid-template-columns:38px minmax(0,1fr) 38px;
        align-items:center;
        justify-content:stretch;
        gap:.45rem;
    }
    .tb-chat-topbar__actions .tb-chat-sound-toggle{
        grid-column:1;
        grid-row:1;
        width:38px;
        min-width:38px;
    }
    .tb-chat-topbar__actions .tb-chat-status-control{
        grid-column:2;
        grid-row:1;
        width:100%;
        min-width:0;
        margin-left:0;
    }
    .tb-chat-topbar__actions .tb-chat-status-control select{
        width:100%;
        min-width:0;
        max-width:none;
    }
    .tb-chat-topbar__actions [data-tb-chat-logout]{
        grid-column:3;
        grid-row:1;
        width:38px;
        min-width:38px;
        height:38px;
        min-height:38px;
        padding:0;
        font-size:0;
        line-height:1;
    }
    .tb-chat-topbar__actions [data-tb-chat-logout]::before{
        content:"\00D7";
        display:block;
        font-size:1.65rem;
        font-weight:400;
        line-height:1;
    }
    .tb-chat-topbar__actions [data-tb-chat-moderation]{
        grid-column:1 / -1;
        grid-row:2;
        justify-self:start;
        width:auto;
        margin:0;
    }
}

/* Toolbar sizing and compact mobile online-user list. */
@media (min-width:768px){
    .tb-chat-topbar__actions [data-tb-chat-logout]{
        height:38px;
        min-height:38px;
        padding:.45rem .75rem;
        line-height:1;
    }
}

@media (max-width:767px){
    .tb-chat-users-panel ul{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:.25rem 0;
    }
    .tb-chat-users-panel li{
        display:inline-flex;
        flex:0 0 auto;
        align-items:center;
        gap:.4rem;
        width:auto;
    }
    .tb-chat-users-panel li:not(:last-child):not(.tb-chat-empty)::after{
        content:",";
        margin-left:-.28rem;
        margin-right:.42rem;
        color:rgba(255,255,255,.78);
    }
    .tb-chat-users-panel__name{
        overflow:visible;
        text-overflow:clip;
        white-space:nowrap;
    }
}

/* Chat viewport refinement: 5% desktop inset, 3% mobile inset. */
body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
    padding-inline:5vw !important;
}

@media (max-width:767px){
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-shell{
        padding-inline:3vw !important;
    }

    /* The main chat uses all remaining viewport height; the online-user area
       only takes the height it actually needs instead of stretching. */
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-layout{
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:minmax(0,1fr) auto !important;
        flex:1 1 0 !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-main{
        min-height:0 !important;
        overflow:hidden !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-messages{
        flex:1 1 0 !important;
        min-height:0 !important;
        max-height:none !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-users-panel{
        flex:none !important;
        max-height:none !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }

    /* Online users stay on one baseline in one horizontal line. */
    .tb-chat-users-panel ul{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:0 !important;
        width:max-content;
        min-width:100%;
        margin:0 !important;
        padding:0 !important;
        white-space:nowrap;
    }
    .tb-chat-users-panel li{
        display:inline-flex !important;
        flex:0 0 auto !important;
        align-items:center !important;
        align-self:center !important;
        gap:.4rem !important;
        width:auto !important;
        margin:0 !important;
        padding:0 !important;
        line-height:1.35 !important;
        vertical-align:middle !important;
    }
    .tb-chat-users-panel li:not(:last-child):not(.tb-chat-empty)::after{
        content:",";
        display:inline-block;
        align-self:center;
        margin:0 .42rem 0 -.28rem !important;
        padding:0 !important;
        line-height:1.35 !important;
        vertical-align:middle !important;
        color:rgba(255,255,255,.78);
    }
    .tb-chat-users-panel__dot{
        align-self:center !important;
        margin:0 !important;
    }
    .tb-chat-users-panel__name{
        display:inline-block;
        align-self:center !important;
        line-height:1.35 !important;
    }
}

/* Highlight the current user in the live chat user list. */
.tb-chat-users-panel__user--own .tb-chat-users-panel__name{
    font-weight:700;
}

/* Mobile online-user list: grow naturally to two rows; from the third row on,
   keep the panel height stable and scroll only the user list. */
@media (max-width:767px){
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-users-panel{
        overflow:hidden !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-users-panel ul{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        align-content:flex-start !important;
        gap:.25rem 0 !important;
        width:100% !important;
        min-width:0 !important;
        max-height:3.35rem;
        margin:0 !important;
        padding:0 .25rem 0 0 !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        white-space:normal !important;
        overscroll-behavior-y:contain;
        -webkit-overflow-scrolling:touch;
    }
}


/* Mobile layout: place the live user list directly below the chat controls
   and above the message window. The existing two-row growth / third-row
   scrolling behavior stays unchanged. */
@media (max-width:767px){
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-layout{
        grid-template-rows:auto minmax(0,1fr) !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-users-panel{
        grid-row:1 !important;
        min-height:0 !important;
    }
    body.tb-chat-session-active .tb-chat-root--active .tb-chat-main{
        grid-row:2 !important;
        min-height:0 !important;
    }
}