:root{
    --tab-bg:#f5f8ff;
    --tab-border:#dfe6f5;
    --tab-text:#7b8198;
    --tab-primary:#8b43f6;
    --tab-primary-light:#aa5cff;
    --tab-primary-dark:#7527e8;
    --tab-active-bg:rgba(139,67,246,.10);
    --tab-badge:#ff4554;

    --room-bg:#fff;
    --room-text:#252631;
    --room-sub:#888b98;
    --room-input:#f4f5f8;
    --room-tag:#f4f5f8;
    --room-overlay:rgba(0,0,0,.48);
}

html.dark,body.dark{
    --tab-bg:#07102b;
    --tab-border:rgba(255,255,255,.10);
    --tab-text:#9a9db0;
    --tab-primary:#a86bff;
    --tab-primary-light:#bd80ff;
    --tab-primary-dark:#8d4dff;
    --tab-active-bg:rgba(168,107,255,.16);
    --tab-badge:#ff5468;

    --room-bg:#0b1430;
    --room-text:#fff;
    --room-sub:#9ca2b7;
    --room-input:#151f40;
    --room-tag:#151f40;
    --room-overlay:rgba(0,0,0,.65);
}

/* ===== Bottom tab bar (native Android style) =====
   Lives for the whole app session (data-turbo-permanent in includes/tabbar.php),
   so it never re-renders / blinks on a page change.
   Nothing sticks out above the bar: the "My Room" button is a pill inside the
   bar, so it never covers page content. */
:root{
    --gc-tabbar-h:68px;
    --gc-tabbar-total:calc(var(--gc-tabbar-h) + env(safe-area-inset-bottom,0px));
}

.tabbar{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translate3d(-50%,0,0)!important;
    width:100%!important;
    max-width:var(--device-width,430px)!important;
    height:var(--gc-tabbar-total)!important;
    margin:0!important;
    padding:0 0 env(safe-area-inset-bottom,0px)!important;
    z-index:9999!important;
    background:var(--tab-bg)!important;
    border-top:1px solid var(--tab-border)!important;
    border-radius:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    contain:layout style;
}

.tabbar-inner{
    position:relative!important;
    width:100%!important;
    height:var(--gc-tabbar-h)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    background:none!important;
    border:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
}

.tabbar .tab{
    position:relative!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:0!important;
    margin:0!important;
    color:var(--tab-text)!important;
    text-decoration:none!important;
    font-size:12.5px!important;
    gap:4px!important;
    font-weight:500!important;
    line-height:1!important;
    box-sizing:border-box!important;
    transform:none!important;
    -webkit-tap-highlight-color:transparent;
}

.tabbar button.tab{
    width:100%;
    border:0!important;
    outline:0!important;
    background:none!important;
    font-family:inherit!important;
    cursor:pointer!important;
}

.tabbar .tab-ico{
    position:relative!important;
    width:60px!important;
    height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-shrink:0!important;
    border-radius:17px!important;
    color:inherit!important;
    background:transparent;
    transition:background-color .2s ease,transform .15s ease!important;
}

.tabbar .tab-ico svg{
    width:26px!important;
    height:26px!important;
    display:block!important;
    flex-shrink:0!important;
    color:inherit!important;
}

.tabbar .tab-label{
    position:static!important;
    display:block!important;
    width:auto!important;
    transform:none!important;
    white-space:nowrap!important;
    color:inherit!important;
    line-height:1!important;
}

.tabbar .tab.active{
    color:var(--tab-primary)!important;
    font-weight:600!important;
}

.tabbar .tab.active:not(.tab-center) .tab-ico{
    background:var(--tab-active-bg)!important;
}

/* press feedback: instant, no lag */
.tabbar .tab:active .tab-ico{
    transform:scale(.92)!important;
}

/* My Room: gradient pill inside the bar (does not stick out) */
.tabbar .tab-center .tab-ico{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    width:46px!important;
    height:46px!important;
    margin-top:-4px!important;
    border-radius:50%!important;
    color:#fff!important;
    background:linear-gradient(145deg,var(--tab-primary-light),var(--tab-primary) 55%,var(--tab-primary-dark))!important;
    box-shadow:0 3px 10px rgba(139,67,246,.30)!important;
}
.tabbar .tab-center:active .tab-ico{
    transform:scale(.94)!important;
}
.tabbar .tab-center .tab-ico svg{
    width:21px!important;
    height:21px!important;
    overflow:visible!important;
    margin:0!important;
}
.tabbar .tab-center .tab-ico svg line{
    transform-box:fill-box;
    transform-origin:center;
}
.tabbar .tab-center.room-animate .tab-ico svg line:nth-child(1){animation:roomWave1 .65s ease-in-out infinite alternate;}
.tabbar .tab-center.room-animate .tab-ico svg line:nth-child(2){animation:roomWave2 .48s ease-in-out infinite alternate;}
.tabbar .tab-center.room-animate .tab-ico svg line:nth-child(3){animation:roomWave3 .70s ease-in-out infinite alternate;}
.tabbar .tab-center.room-animate .tab-ico svg line:nth-child(4){animation:roomWave4 .52s ease-in-out infinite alternate;}
.tabbar .tab-center.room-animate .tab-ico svg line:nth-child(5){animation:roomWave5 .62s ease-in-out infinite alternate;}

@keyframes roomWave1{0%{transform:scaleY(.55)}100%{transform:scaleY(1.35)}}
@keyframes roomWave2{0%{transform:scaleY(.70)}100%{transform:scaleY(1.25)}}
@keyframes roomWave3{0%{transform:scaleY(.48)}100%{transform:scaleY(1.15)}}
@keyframes roomWave4{0%{transform:scaleY(.68)}100%{transform:scaleY(1.35)}}
@keyframes roomWave5{0%{transform:scaleY(.55)}100%{transform:scaleY(1.30)}}

.tabbar .tab-badge{
    position:absolute!important;
    top:-4px!important;
    right:5px!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    background:var(--tab-badge)!important;
    border:2px solid var(--tab-bg)!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:700!important;
    box-sizing:border-box!important;
}
.tabbar .tab-badge[hidden]{display:none!important;}
.tabbar .tab-badge[data-dm-unread]{animation:tabBadgePop .35s cubic-bezier(.2,1.4,.4,1)!important;}
@keyframes tabBadgePop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.tabbar .tab-badge.dot{
    top:1px!important;
    right:12px!important;
    width:10px!important;
    min-width:10px!important;
    height:10px!important;
    padding:0!important;
}

.tabbar .me-tab .custom-me-svg{
    width:31px!important;
    height:31px!important;
    overflow:visible!important;
}
.tabbar .me-tab .me-face,
.tabbar .me-tab .me-top{fill:currentColor;}
.tabbar .me-tab .me-eye{fill:var(--tab-bg);}
.tabbar .me-tab .me-mouth{fill:none;stroke:var(--tab-bg);stroke-width:1.5;stroke-linecap:round;}
.tabbar .me-tab .me-cheek{fill:var(--tab-bg);opacity:.55;}

/* page content always ends above the bar (nothing hidden behind it) */
body[data-gc-bar]{
    padding-bottom:var(--gc-tabbar-total)!important;
}

@media(max-width:400px){
    .tabbar .tab{font-size:10.5px!important;}
    .tabbar .tab-ico{width:52px!important;}
    .tabbar .tab-center .tab-ico{width:44px!important;height:44px!important;}
    .tabbar .tab-badge{right:2px!important;}
    .tabbar .tab-badge.dot{right:9px!important;}
}


/* ===== Room create modal ===== */
/* ROOM MODAL */

.room-modal-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:var(--room-overlay);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.room-modal-overlay.show{
    opacity:1;
    visibility:visible;
}

.room-modal{
    width:100%;
    max-width:var(--device-width,430px);
    min-height:56vh;
    max-height:88vh;
    background:var(--room-bg);
    border-radius:28px 28px 0 0;
    padding:28px 20px calc(25px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto;
}

.room-modal-overlay.show .room-modal{
    transform:translateY(0);
}

.room-drag{
    width:42px;
    height:4px;
    border-radius:20px;
    background:rgba(130,130,145,.28);
    margin:-13px auto 25px;
}

.room-heading{
    margin:0 0 17px;
    color:var(--room-text);
    font-size:23px;
    font-weight:800;
}

.room-name-wrap{
    position:relative;
    margin-bottom:31px;
}

.room-name-input{
    width:100%;
    height:58px;
    border:0;
    outline:0;
    box-sizing:border-box;
    border-radius:10px;
    background:var(--room-input);
    color:var(--room-text);
    padding:0 65px 0 16px;
    font-family:inherit;
    font-size:16px;
}

.room-name-input::placeholder{
    color:var(--room-sub);
}

.room-counter{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:var(--room-sub);
    font-size:14px;
}

.room-tag-heading{
    margin:0 0 8px;
    color:var(--room-text);
    font-size:22px;
    font-weight:800;
}

.room-tag-info{
    margin:0 0 23px;
    color:var(--room-sub);
    font-size:14px;
    line-height:1.5;
}

.room-tags{
    display:flex;
    flex-wrap:wrap;
    gap:11px 10px;
    min-height:42px;
    margin-bottom:40px;
}

.room-tag{
    border:0;
    outline:0;
    border-radius:30px;
    padding:10px 18px;
    background:var(--room-tag);
    color:var(--room-sub);
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.room-tag.active{
    color:#fff;
    background:linear-gradient(135deg,var(--tab-primary-light),var(--tab-primary));
}

.room-seat-picker{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:-18px 0 28px;
}

.room-seat-chip{
    min-width:42px;
    height:38px;
    border:0;
    outline:0;
    border-radius:12px;
    background:var(--room-tag);
    color:var(--room-sub);
    font-family:inherit;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
}

.room-seat-chip.active{
    color:#fff;
    background:linear-gradient(135deg,var(--tab-primary-light),var(--tab-primary));
}

.room-tag-loading,
.room-tag-error{
    color:var(--room-sub);
    font-size:14px;
}

.room-tag-error{
    color:#ff5263;
}

.room-message{
    display:none;
    margin:0 0 12px;
    font-size:13px;
    font-weight:600;
    text-align:center;
}

.room-message.error{
    display:block;
    color:#ff5263;
}

.room-message.success{
    display:block;
    color:#22b573;
}

.room-ok-btn{
    width:100%;
    height:55px;
    border:0;
    border-radius:30px;
    background:linear-gradient(90deg,#8c3cff,#7930ff);
    color:#fff;
    font-family:inherit;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}