/* ==========================================================
   Otakul Community 2.0
   PART 1B
   Foundation
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Montserrat",sans-serif;

    background:#0b1016;

    color:#eef2f7;

    overflow-x:hidden;

}


/* ==========================================================
   ROOT COLORS
========================================================== */

:root{

    --bg:#0b1016;

    --bg-secondary:#111827;

    --surface:#18222f;

    --surface-light:#223142;

    --glass:rgba(255,255,255,.05);

    --glass-border:rgba(255,255,255,.08);

    --green:#27d07d;

    --green-hover:#32e58d;

    --green-dark:#179a5c;

    --white:#ffffff;

    --text:#eef2f7;

    --muted:#9ca9ba;

    --danger:#ff6464;

    --radius:22px;

    --shadow:

        0 20px 60px rgba(0,0,0,.35);

}


/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

}


/* ==========================================================
   BUTTONS
========================================================== */

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    outline:none;

    transition:.25s;

}


/* ==========================================================
   IMAGES
========================================================== */

img{

    width:100%;

    display:block;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

    background:

        radial-gradient(circle at top,#163a32 0%,#0b1016 60%);

}


/* ==========================================================
   FLOATING CIRCLES
========================================================== */

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

}

.bg-one{

    width:420px;

    height:420px;

    background:#27d07d;

    top:-120px;

    left:-120px;

}

.bg-two{

    width:500px;

    height:500px;

    background:#235eff;

    right:-180px;

    top:180px;

}

.bg-three{

    width:360px;

    height:360px;

    background:#b84cff;

    bottom:-100px;

    left:35%;

}


/* ==========================================================
   PAGE
========================================================== */

.community-page{

    width:min(1700px,94%);

    margin:auto;

    padding:30px 0 80px;

}


/* ==========================================================
   GLASS CARD
========================================================== */

.sidebar-card,
.chat-container,
.hero-content,
.info-card{

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(20px);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#10161d;

}

::-webkit-scrollbar-thumb{

    background:#2a3949;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--green);

}


/* ==========================================================
   TEXT
========================================================== */

h1{

    font-size:58px;

    font-weight:800;

    line-height:1.1;

}

h2{

    font-size:34px;

    font-weight:700;

}

h3{

    font-size:20px;

    font-weight:700;

}

p{

    color:var(--muted);

    line-height:1.7;

}


/* ==========================================================
   UTILITIES
========================================================== */

.primary-button{

    background:var(--green);

    color:white;

    padding:15px 30px;

    border-radius:16px;

    font-weight:700;

}

.primary-button:hover{

    background:var(--green-hover);

    transform:translateY(-2px);

}

.secondary-button{

    background:transparent;

    border:1px solid rgba(255,255,255,.15);

    color:white;

    padding:15px 30px;

    border-radius:16px;

}

.secondary-button:hover{

    border-color:var(--green);

    color:var(--green);

}


/* ==========================================================
   SECTION SPACING
========================================================== */

section{

    margin-top:45px;

}

/* ==========================================================
   TOP NAVIGATION
========================================================== */

.topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 34px;

    margin-bottom:35px;

    background:rgba(18,24,34,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.35);

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--white);

    font-size:28px;

    font-weight:800;

    letter-spacing:.5px;

    text-decoration:none;

}

.logo i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(39,208,125,.12);

    color:var(--green);

    transition:.3s;

}

.logo:hover i{

    transform:translateX(-4px);

    background:rgba(39,208,125,.22);

}


/* ==========================================================
   USER CARD
========================================================== */

.user-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:8px 18px 8px 8px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

}

.user-avatar{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:700;

    color:#fff;

    flex-shrink:0;

}

.user-information{

    display:flex;

    flex-direction:column;

}

.user-information span{

    color:var(--white);

    font-weight:700;

    font-size:15px;

}

.user-information small{

    color:var(--green);

    font-size:12px;

    margin-top:3px;

}


/* ==========================================================
   LOGIN / LOGOUT
========================================================== */

.login-button,
.logout-button{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:120px;

    height:46px;

    padding:0 24px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.login-button{

    background:var(--green);

    color:#fff;

}

.login-button:hover{

    background:var(--green-hover);

    transform:translateY(-2px);

}

.logout-button{

    border:1px solid rgba(255,255,255,.12);

    color:var(--white);

    background:transparent;

}

.logout-button:hover{

    border-color:var(--green);

    color:var(--green);

}


/* ==========================================================
   NAV HOVER
========================================================== */

.logo,
.login-button,
.logout-button,
.user-card{

    transition:.25s;

}

.user-card:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.08);

}


/* ==========================================================
   RESPONSIVE NAV
========================================================== */

@media(max-width:900px){

    .topbar{

        flex-direction:column;

        gap:22px;

        padding:24px;

    }

    .topbar-left,
    .topbar-right{

        width:100%;

        justify-content:center;

    }

}

/* ==========================================================
   COMMUNITY HERO
========================================================== */

.community-hero{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    min-height:520px;

    margin-bottom:55px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

}


/* ==========================================================
   HERO IMAGE
========================================================== */

.hero-banner{

    position:absolute;

    inset:0;

}

.hero-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.03);

}


/* ==========================================================
   HERO OVERLAY
========================================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(10,16,24,.96) 8%,
            rgba(10,16,24,.80) 42%,
            rgba(10,16,24,.55) 70%,
            rgba(10,16,24,.25) 100%
        );

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content{

    position:relative;

    z-index:5;

    min-height:520px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:70px;

    gap:60px;

}


/* ==========================================================
   HERO LEFT
========================================================== */

.hero-left{

    width:min(650px,100%);

}

.community-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:22px;

    border-radius:999px;

    background:rgba(39,208,125,.12);

    border:1px solid rgba(39,208,125,.25);

    color:var(--green);

    font-size:14px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

}

.hero-left h1{

    margin-bottom:18px;

    text-shadow:0 8px 20px rgba(0,0,0,.45);

}

.hero-left p{

    max-width:560px;

    margin-bottom:35px;

    font-size:17px;

    color:#d7dee8;

}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.hero-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


/* ==========================================================
   HERO RIGHT
========================================================== */

.hero-right{

    width:360px;

}


/* ==========================================================
   STATS GRID
========================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.stat-card{

    padding:28px;

    border-radius:22px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

    border-color:rgba(39,208,125,.35);

    background:rgba(39,208,125,.08);

}

.stat-number{

    display:block;

    font-size:34px;

    font-weight:800;

    color:var(--white);

    margin-bottom:10px;

}

.stat-label{

    color:var(--muted);

    font-size:14px;

    letter-spacing:.5px;

}


/* ==========================================================
   HERO RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .hero-content{

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

    }

    .hero-right{

        width:100%;

    }

    .stats-grid{

        width:100%;

    }

}

@media(max-width:768px){

    .hero-content{

        padding:40px 28px;

    }

    .hero-left h1{

        font-size:42px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   APP SHELL
========================================================== */

.app-shell{

    display:grid;

    grid-template-columns:minmax(0,1fr) 300px;

    gap:28px;

    align-items:start;

    margin-top:50px;

}


/* ==========================================================
   SIDEBARS
========================================================== */

.left-sidebar,
.right-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/* ==========================================================
   CHAT AREA
========================================================== */

.chat-area{

    width:100%;

    min-width:0;

}

.chat-container{

    display:flex;

    flex-direction:column;

    height:520px;

    overflow:hidden;

}


/* ==========================================================
   SIDEBAR CARD
========================================================== */

.sidebar-card{

    padding:24px;

}

.sidebar-card h3{

    margin-bottom:18px;

    color:var(--white);

}

.sidebar-card p{

    font-size:15px;

    color:var(--muted);

}


/* ==========================================================
   SIDEBAR MENU
========================================================== */

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.sidebar-item{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:15px 18px;

    background:transparent;

    border-radius:14px;

    color:var(--muted);

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.sidebar-item i{

    width:22px;

    text-align:center;

    color:var(--green);

}

.sidebar-item:hover{

    background:rgba(39,208,125,.08);

    color:var(--white);

    transform:translateX(6px);

}

.sidebar-item.active{

    background:rgba(39,208,125,.12);

    color:var(--white);

    border:1px solid rgba(39,208,125,.20);

}


/* ==========================================================
   CHAT HEADER
========================================================== */

.chat-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:26px 30px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.chat-header h2{

    font-size:28px;

    margin-bottom:5px;

}

.chat-header span{

    color:var(--muted);

    font-size:14px;

}


/* ==========================================================
   ONLINE BADGE
========================================================== */

.chat-status{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(39,208,125,.08);

    border:1px solid rgba(39,208,125,.20);

    color:var(--white);

    font-weight:700;

}

.pulse-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--green);

    box-shadow:none;

}


/* ==========================================================
   MEMBER LIST
========================================================== */

.member-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:18px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1400px){

    .app-shell{

        grid-template-columns:1fr;

    }

    .right-sidebar{

        display:none;

    }

}

@media(max-width:1000px){

    .app-shell{

        grid-template-columns:1fr;

    }

    .left-sidebar{

        order:2;

    }

    .chat-area{

        order:1;

    }

}

/* ==========================================================
   CHAT FEED
========================================================== */

.chat-feed{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:28px;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:0;

}


/* ==========================================================
   WELCOME SCREEN
========================================================== */

.welcome-box{

    width:min(650px,100%);

    margin:auto;

    text-align:center;

    padding:55px 45px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.welcome-icon{

    width:90px;

    height:90px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    border-radius:50%;

    background:rgba(39,208,125,.12);

    color:var(--green);

}

.welcome-box h2{

    margin-bottom:16px;

    color:var(--white);

}

.welcome-box p{

    max-width:420px;

    margin:auto;

}


/* ==========================================================
   MESSAGE GROUP
========================================================== */

.message{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    border-radius:20px;

    transition:.25s;

}

.message:hover{

    background:rgba(255,255,255,.04);

}


/* ==========================================================
   AVATAR
========================================================== */

.message-avatar{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:#fff;

    flex-shrink:0;

}


/* ==========================================================
   MESSAGE CONTENT
========================================================== */

.message-content{

    flex:1;

}

.message-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

}

.message-user{

    color:var(--white);

    font-weight:700;

}

.message-time{

    color:var(--muted);

    font-size:13px;

}

.message-text{

    line-height:1.8;

    color:#dbe5ef;

    word-break:break-word;

}


/* ==========================================================
   GIF MESSAGE
========================================================== */

.message-gif{

    margin-top:12px;

    width:fit-content;

    max-width:420px;

    border-radius:18px;

    overflow:hidden;

    background:transparent;

}

.message-gif img{

    display:block;

    width:auto;

    max-width:420px;

    max-height:260px;

    height:auto;

    object-fit:contain;

    border-radius:18px;

    transition:.25s;

}

.message-gif img:hover{

    transform:scale(1.02);

}


/* ==========================================================
   SENT GIF ATTACHMENT (JS renders .gif-attachment)
========================================================== */

.gif-attachment{

    margin-top:6px;

    width:fit-content;

    max-width:300px;

    border-radius:14px;

    overflow:hidden;

    background:transparent;

}

.gif-attachment img{

    display:block;

    width:auto;

    max-width:300px;

    max-height:190px;

    height:auto;

    object-fit:contain;

    border-radius:14px;

    transition:.25s;

}

.gif-attachment img:hover{

    transform:scale(1.03);

}


/* ==========================================================
   MESSAGE GROUPS (JS renders .msg-group / .msg-line)
========================================================== */

.msg-group{

    display:flex;

    flex-direction:column;

    gap:2px;

    margin-bottom:6px;

}

.msg-group-head{

    display:flex;

    align-items:center;

    gap:10px;

}

.msg-group-head .avatar{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

    color:#fff;

    flex-shrink:0;

    overflow:hidden;

}

.avatar-img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    display:block;

    flex:none;

}

.member-item{

    display:flex;

    align-items:center;

    gap:10px;

}

.member-avatar{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

    color:#fff;

    flex-shrink:0;

    overflow:hidden;

}

.msg-group-name{

    font-weight:700;

    font-size:15px;

}

.msg-group-time{

    color:var(--muted);

    font-size:12px;

    margin-left:4px;

}

.msg-lines{

    display:flex;

    flex-direction:column;

    gap:2px;

    padding-left:46px;

}

.msg-line{

    display:flex;

    align-items:flex-start;

    gap:8px;

}

.msg-line-time{

    color:var(--muted);

    font-size:11px;

    min-width:44px;

    padding-top:2px;

    text-align:right;

    opacity:.7;

}

.msg-line p{

    color:#e6ecf4;

    font-size:15px;

    line-height:1.6;

    word-break:break-word;

}

.vote-row{

    display:flex;

    gap:10px;

    margin-top:4px;

    padding-left:46px;

}

.vote-pill,
.add-reaction-pill{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:var(--muted);

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.vote-pill:hover,
.add-reaction-pill:hover{

    background:rgba(39,208,125,.12);

    border-color:rgba(39,208,125,.30);

    color:var(--green);

}

.vote-pill.upvoted{

    background:rgba(39,208,125,.15);

    border-color:rgba(39,208,125,.35);

    color:var(--green);

}

.date-divider{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--muted);

    font-size:12px;

    font-weight:600;

    margin:14px 0 6px;

}

.date-divider::before,
.date-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,.07);

}

/* ==========================================================
   TYPING INDICATOR
========================================================== */

.typing-indicator{

    display:none;

    align-items:center;

    gap:12px;

    padding:18px 28px;

    border-top:1px solid rgba(255,255,255,.06);

    color:var(--muted);

}

.typing-dots{

    display:flex;

    gap:6px;

}

.typing-dots span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--green);

    animation:typingBounce 1.2s infinite;

}

.typing-dots span:nth-child(2){

    animation-delay:.2s;

}

.typing-dots span:nth-child(3){

    animation-delay:.4s;

}


/* ==========================================================
   MESSAGE ANIMATION
========================================================== */

.message{

    animation:messageAppear .25s ease;

}

@keyframes messageAppear{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   TYPING ANIMATION
========================================================== */

@keyframes typingBounce{

    0%,80%,100%{

        transform:scale(.8);

        opacity:.4;

    }

    40%{

        transform:scale(1.3);

        opacity:1;

    }

}

/* ==========================================================
   COMPOSER SECTION
========================================================== */

/* Composer now lives inside .chat-container (attached to the chat box) */


/* ==========================================================
   MAIN COMPOSER
========================================================== */

.composer{

    display:flex;

    align-items:flex-end;

    gap:12px;

    padding:12px 16px;

    background:rgba(18,25,35,.96);

    backdrop-filter:blur(22px);

    border-top:1px solid rgba(255,255,255,.08);

}


/* ==========================================================
   TOOL BUTTONS
========================================================== */

.composer-tools{

    display:flex;

    gap:12px;

    align-items:center;

}

.tool-btn{

    width:44px;

    height:44px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--white);

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.tool-btn:hover{

    background:rgba(39,208,125,.15);

    border-color:rgba(39,208,125,.35);

    color:var(--green);

    transform:translateY(-3px);

}

.gif-btn{

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==========================================================
   INPUT
========================================================== */

.composer-input{

    flex:1;

}

.composer-input textarea{

    width:100%;

    min-height:44px;

    max-height:120px;

    resize:none;

    border:none;

    outline:none;

    background:rgba(255,255,255,.04);

    border-radius:14px;

    padding:12px 16px;

    color:var(--white);

    font-size:15px;

    line-height:1.6;

    font-family:inherit;

    transition:.25s;

}

.composer-input textarea::placeholder{

    color:var(--muted);

}

.composer-input textarea:focus{

    border:1px solid rgba(39,208,125,.35);

    box-shadow:
        0 0 20px rgba(39,208,125,.12);

}


/* ==========================================================
   SEND BUTTON
========================================================== */

.send-btn{

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px 20px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--green),
        #1bbf70
    );

    color:white;

    font-weight:700;

    font-size:15px;

    transition:.25s;

}

.send-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(39,208,125,.30);

}

.send-btn i{

    font-size:15px;

}


/* ==========================================================
   LOGIN NOTICE
========================================================== */

.login-notice{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:20px;

    border-radius:20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--muted);

}

.login-notice a{

    color:var(--green);

    font-weight:700;

}

.login-notice a:hover{

    text-decoration:underline;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .composer{

        flex-direction:column;

        align-items:stretch;

    }

    .composer-tools{

        justify-content:flex-start;

    }

    .send-btn{

        width:100%;

        justify-content:center;

    }

}

/* ==========================================================
   PICKER PANELS
========================================================== */

.picker-panel{

    display:none;

    margin-bottom:20px;

    background:rgba(20,28,38,.95);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    backdrop-filter:blur(24px);

    overflow:hidden;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}

.picker-panel.active,
.picker-panel.show{

    display:block;

    animation:pickerFade .25s ease;

}


/* ==========================================================
   PICKER HEADER
========================================================== */

.picker-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.picker-header h3{

    font-size:17px;

    color:var(--white);

}


/* ==========================================================
   GIF SEARCH
========================================================== */

.gif-search{

    width:calc(100% - 36px);

    margin:18px;

    padding:15px 18px;

    border:none;

    outline:none;

    border-radius:16px;

    background:rgba(255,255,255,.05);

    color:white;

    font-size:15px;

    transition:.25s;

}

.gif-search::placeholder{

    color:var(--muted);

}

.gif-search:focus{

    background:rgba(255,255,255,.08);

    box-shadow:0 0 18px rgba(39,208,125,.15);

}


/* ==========================================================
   GIF GRID
========================================================== */

.gif-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));

    gap:14px;

    max-height:420px;

    overflow-y:auto;

    padding:18px;

}

.gif-grid img{

    width:100%;

    border-radius:16px;

    cursor:pointer;

    transition:.25s;

}

.gif-grid img:hover{

    transform:scale(1.05);

    box-shadow:
        0 12px 30px rgba(39,208,125,.25);

}


/* ==========================================================
   EMOJI GRID
========================================================== */

.emoji-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(52px,1fr));

    gap:12px;

    padding:18px;

    max-height:350px;

    overflow-y:auto;

}

.emoji-grid button{

    width:52px;

    height:52px;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    border:1px solid transparent;

    font-size:26px;

    transition:.2s;

}

.emoji-grid button:hover{

    background:rgba(39,208,125,.10);

    border-color:rgba(39,208,125,.30);

    transform:scale(1.12);

}


/* ==========================================================
   GIF EMPTY STATE
========================================================== */

.gif-empty{

    text-align:center;

    padding:50px 20px;

    color:var(--muted);

    font-size:15px;

}


/* ==========================================================
   PICKER SCROLLBAR
========================================================== */

.gif-grid::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar{

    width:8px;

}

.gif-grid::-webkit-scrollbar-thumb,
.emoji-grid::-webkit-scrollbar-thumb{

    background:rgba(39,208,125,.25);

    border-radius:20px;

}

.gif-grid::-webkit-scrollbar-thumb:hover,
.emoji-grid::-webkit-scrollbar-thumb:hover{

    background:var(--green);

}


/* ==========================================================
   PICKER ANIMATION
========================================================== */

@keyframes pickerFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   COMMUNITY INFO
========================================================== */

.community-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:60px;

}

.info-card{

    padding:32px;

    transition:.3s;

    cursor:default;

}

.info-card:hover{

    transform:translateY(-8px);

    border-color:rgba(39,208,125,.25);

    background:rgba(39,208,125,.06);

}

.info-card i{

    font-size:34px;

    color:var(--green);

    margin-bottom:22px;

}

.info-card h3{

    margin-bottom:16px;

    color:var(--white);

}

.info-card p{

    color:var(--muted);

    line-height:1.8;

}


/* ==========================================================
   FOOTER
========================================================== */

.footer{

    margin-top:70px;

    padding:40px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer h2{

    color:var(--white);

    margin-bottom:12px;

}

.footer p{

    color:var(--muted);

    font-size:15px;

}


/* ==========================================================
   GLOBAL HOVER EFFECTS
========================================================== */

.sidebar-card,
.chat-container,
.info-card,
.stat-card{

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;

}

.sidebar-card:hover,
.chat-container:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 50px rgba(0,0,0,.35);

}


/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--green);

    color:#fff;

}


/* ==========================================================
   FOCUS STATES
========================================================== */

button:focus-visible,
textarea:focus-visible,
input:focus-visible{

    outline:2px solid rgba(39,208,125,.5);

    outline-offset:2px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .community-info{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .community-info{

        grid-template-columns:1fr;

    }

    .community-page{

        width:96%;

    }

    .hero-content{

        padding:32px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:26px;

    }

    .chat-feed{

        padding:18px;

    }

    .sidebar-card{

        padding:18px;

    }

    .footer{

        padding:30px 16px;

    }

}

@media(max-width:480px){

    .topbar{

        padding:16px;

    }

    .logo{

        font-size:18px;

    }

    .user-card{

        width:100%;

        justify-content:center;

    }

    .composer{

        padding:14px;

    }

    .tool-btn{

        width:46px;

        height:46px;

    }

    .send-btn{

        padding:14px;

        font-size:14px;

    }

}


/* ==========================================================
   SMOOTH TRANSITIONS
========================================================== */

*{

    transition:
        background-color .25s,
        color .25s,
        border-color .25s;

}

/* ==========================================================
   SIDEBAR TABS / PANELS
========================================================== */

.tab-panel[hidden]{

    display:none;

}

.gallery-panel{

    background:#151a2d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    height:520px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.gallery-head{

    padding:20px 24px 14px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.gallery-head h2{

    font-size:22px;

    font-weight:800;

    color:white;

    margin-bottom:2px;

}

.gallery-head span{

    color:#8f94b0;

    font-size:13.5px;

}

.gallery-grid{

    flex:1;

    overflow-y:auto;

    columns:3;

    column-gap:12px;

    padding:16px 18px;

}

.gallery-item{

    break-inside:avoid;

    margin-bottom:12px;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    transition:transform .25s, box-shadow .25s, border-color .25s;

}

.gallery-item img{

    width:100%;

    display:block;

}

.gallery-item:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(143,91,255,.4);

    border-color:rgba(143,91,255,.5);

}

.gallery-empty{

    text-align:center;

    color:#8f94b0;

    padding:60px 20px;

    font-size:14.5px;

    line-height:1.6;

}

.panel-placeholder{

    height:520px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    background:#151a2d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    text-align:center;

    padding:40px;

}

.panel-placeholder i{

    font-size:44px;

    color:#8F5BFF;

}

.panel-placeholder h2{

    color:white;

    font-size:24px;

    font-weight:800;

}

.panel-placeholder p{

    color:#8f94b0;

    max-width:380px;

    font-size:14.5px;

    line-height:1.6;

}

/* ==========================================================
   REPLY PREVIEW (composer quote bar)
========================================================== */

.reply-preview{

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(143,91,255,.1);

    border:1px solid rgba(143,91,255,.3);

    border-bottom:none;

    border-radius:14px 14px 0 0;

    padding:10px 16px;

    font-size:13px;

    color:#c9c9d8;

}

.reply-preview[hidden]{

    display:none;

}

.reply-preview-label{

    color:#b78cff;

    font-weight:700;

    white-space:nowrap;

    flex-shrink:0;

}

.reply-preview-label i{

    margin-right:6px;

}

.reply-preview-text{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.reply-preview-cancel{

    width:26px;

    height:26px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.08);

    color:#d8d8d8;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:background-color .2s, color .2s, transform .2s;

}

.reply-preview-cancel:hover{

    background:#ff3b6b;

    color:white;

    transform:rotate(90deg);

}

.modal-x{

    position:relative;

    width:12px;

    height:12px;

    display:block;

}

.modal-x::before,
.modal-x::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:12px;

    height:2px;

    border-radius:2px;

    background:currentColor;

    transform:translate(-50%,-50%) rotate(45deg);

}

.modal-x::after{

    transform:translate(-50%,-50%) rotate(-45deg);

}

/* ==========================================================
   MESSAGE LINES: replies, reactions, quick-react
========================================================== */

.msg-line{

    position:relative;

}

.msg-line-body{

    flex:1;

    min-width:0;

}

.reply-quote{

    display:flex;

    align-items:flex-start;

    gap:8px;

    width:100%;

    text-align:left;

    background:rgba(143,91,255,.08);

    border:1px solid rgba(143,91,255,.2);

    border-left:3px solid #8F5BFF;

    border-radius:10px;

    padding:7px 10px;

    margin-bottom:6px;

    color:#c9c9d8;

    font-size:13px;

    cursor:pointer;

    font-family:'Montserrat',sans-serif;

    transition:background-color .2s, border-color .2s;

}

.reply-quote:hover{

    background:rgba(143,91,255,.16);

    border-color:rgba(143,91,255,.4);

}

.rq-icon{

    color:#8F5BFF;

    font-size:12px;

    padding-top:2px;

    flex-shrink:0;

}

.rq-body{

    overflow:hidden;

    text-overflow:ellipsis;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

}

.rq-body strong{

    color:#b78cff;

    margin-right:4px;

}

.reaction-chips{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:5px;

}

.reaction-chip{

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:4px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.1);

    color:#d8d8d8;

    font-size:12.5px;

    font-weight:600;

    cursor:pointer;

    transition:transform .2s, background-color .2s, border-color .2s, box-shadow .2s;

}

.reaction-chip:hover{

    background:rgba(143,91,255,.14);

    border-color:rgba(143,91,255,.4);

    transform:translateY(-1px);

}

.reaction-chip.mine{

    background:rgba(143,91,255,.2);

    border-color:#8F5BFF;

    color:white;

    box-shadow:0 0 10px rgba(143,91,255,.35);

}

.line-tools{

    display:flex;

    gap:6px;

    align-items:center;

    opacity:0;

    transition:opacity .2s;

    padding-top:2px;

    flex-shrink:0;

}

.msg-line:hover .line-tools{

    opacity:1;

}

.line-tool{

    width:28px;

    height:28px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.05);

    color:#9aa3c0;

    cursor:pointer;

    font-size:12px;

    font-weight:700;

    font-family:'Montserrat',sans-serif;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:background-color .2s, border-color .2s, color .2s;

}

.line-tool:hover{

    background:rgba(143,91,255,.18);

    border-color:#8F5BFF;

    color:white;

}

.quick-react{

    position:absolute;

    right:0;

    bottom:-40px;

    display:none;

    gap:2px;

    background:#1b2138;

    border:1px solid rgba(143,91,255,.35);

    border-radius:999px;

    padding:4px 8px;

    box-shadow:0 8px 24px rgba(0,0,0,.5);

    z-index:6;

    align-items:center;

}

.msg-line:hover .quick-react,
.quick-react:hover,
.quick-react.show{

    display:flex;

}

.qr-btn{

    border:none;

    background:transparent;

    font-size:16px;

    cursor:pointer;

    padding:3px 5px;

    border-radius:50%;

    transition:transform .2s, background-color .2s;

}

.qr-btn:hover{

    transform:scale(1.35);

    background:rgba(255,255,255,.1);

}

/* Spoiler tags */

.spoiler{

    background:#2b3150;

    color:transparent;

    border-radius:6px;

    padding:0 6px;

    cursor:pointer;

    user-select:none;

    transition:background-color .2s, color .2s;

}

.spoiler:hover{

    background:#3a4170;

}

.spoiler.revealed{

    color:inherit;

    background:rgba(255,213,74,.12);

    user-select:text;

}

/* Flash highlight when jumping to a replied message */

.msg-line.flash .msg-line-body{

    animation:msgFlash 1.6s ease;

}

@keyframes msgFlash{

    0%,100%{

        box-shadow:none;

    }

    20%,60%{

        box-shadow:0 0 18px rgba(143,91,255,.6);

        border-radius:10px;

    }

}

/* Toast */

.community-toast{

    position:fixed;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    z-index:5000;

    background:#241543;

    border:1px solid rgba(143,91,255,.5);

    color:white;

    padding:11px 22px;

    border-radius:40px;

    font-size:13.5px;

    font-weight:700;

    font-family:'Montserrat',sans-serif;

    box-shadow:0 12px 34px rgba(0,0,0,.55);

    animation:toastUp .25s ease;

    transition:opacity .3s;

}

.community-toast.out{

    opacity:0;

}

@keyframes toastUp{

    from{

        opacity:0;

        transform:translate(-50%,12px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

@media (hover:none){

    .line-tools{

        opacity:1;

    }

}

@media (max-width:900px){

    .gallery-grid{

        columns:2;

    }

}

@media (max-width:600px){

    .gallery-grid{

        columns:1;

    }

    .reply-preview{

        flex-wrap:wrap;

    }

    .reply-preview-text{

        flex-basis:100%;

        order:3;

        white-space:normal;

    }

}

/* ==========================================
   PLUS BUTTON + ANIME PICKER
   ========================================== */

.plus-btn {
    font-size: 24px !important;
    font-weight: 700 !important;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(39,208,125,0.12);
    border: 1px solid rgba(39,208,125,0.3);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s, border-radius 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.plus-btn i, .plus-btn .fa-plus {
    color: inherit;
}
.plus-btn:hover {
    transform: scale(1.08);
    background: rgba(39,208,125,0.2);
    color: #32e88a;
    border-radius: 18px;
}
.plus-btn.active {
    transform: rotate(45deg);
    border-radius: 50%;
    background: rgba(255,100,100,0.15);
    border-color: rgba(255,100,100,0.3);
    color: #ff6464;
}

.plus-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: #1e1b2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    min-width: 140px;
}
.plus-menu.hidden { display: none; }

.plus-menu-item {
    background: none;
    border: none;
    color: #e2e0f0;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: background 0.12s;
    white-space: nowrap;
}
.plus-menu-item:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #fff;
}

.composer-tools {
    position: relative;
}

/* ---- Anime search panel ---- */

.anime-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: #1a1730;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    z-index: 90;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
.anime-panel.hidden { display: none; }

.anime-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.anime-panel-head input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.anime-panel-head input:focus {
    border-color: rgba(124, 58, 237, 0.5);
}

.anime-panel-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    transition: color 0.15s, background 0.15s;
}
.anime-panel-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.anime-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}

.anime-result-loading {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 13px;
}

.anime-result-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.anime-result-card:hover {
    background: rgba(124, 58, 237, 0.15);
}

.anime-result-card img {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #2a2540;
}

.anime-result-info {
    flex: 1;
    min-width: 0;
}

.anime-result-title {
    color: #e2e0f0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anime-result-meta {
    color: #888;
    font-size: 11px;
    margin-top: 2px;
}

.anime-result-send {
    background: rgba(124, 58, 237, 0.2);
    border: none;
    color: #a78bfa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    font-size: 13px;
}
.anime-result-send:hover {
    background: rgba(124, 58, 237, 0.5);
    color: #fff;
}

/* ---- Anime card message in chat ---- */

.anime-card-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    max-width: 360px;
    transition: background 0.15s, border-color 0.15s;
    margin: 4px 0;
}
.anime-card-msg:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
}

.anime-card-msg-img {
    width: 44px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #2a2540;
}
.anime-card-msg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.anime-card-msg-info {
    flex: 1;
    min-width: 0;
}

.anime-card-msg-title {
    font-size: 13px;
    font-weight: 600;
    color: #e2e0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anime-card-msg-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.anime-card-msg-arrow {
    color: #a78bfa;
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.anime-card-msg:hover .anime-card-msg-arrow {
    opacity: 1;
}
/* Chat header with inline tabs */
.chat-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.chat-header-left {
    flex-shrink: 0;
}
.chat-header h2 {
    font-size: 22px;
    margin-bottom: 2px;
}
.chat-header span {
    color: var(--muted);
    font-size: 13px;
}
.chat-header-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.chat-header-tabs .sidebar-item {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--muted);
    transition: all 0.15s;
}
.chat-header-tabs .sidebar-item:hover {
    background: rgba(255,255,255,.08);
    color: var(--white);
}
.chat-header-tabs .sidebar-item.active {
    background: rgba(39,208,125,.12);
    border-color: rgba(39,208,125,.3);
    color: var(--white);
}
.chat-header-tabs .sidebar-item i {
    margin-right: 6px;
    font-size: 12px;
}


/* ============================================================
   FULL-SCREEN CHAT MODAL
   ============================================================ */
.chat-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.chat-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Modal header */
.chat-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(18, 24, 34, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.chat-modal-header h2 {
    font-size: 20px;
    flex: 1;
}
.chat-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.chat-modal-close:hover {
    background: rgba(255,100,100,0.2);
    border-color: rgba(255,100,100,0.4);
    color: #ff6464;
}

/* Modal chat feed — scrollable */
.chat-modal-feed {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    min-height: 0;
}

/* Modal composer — pinned at bottom */
.chat-modal-composer {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(18, 25, 35, 0.96);
    backdrop-filter: blur(22px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   BLUR OVERLAY + ENTER CHAT (CSS-only approach)
   ============================================================ */

/* The chat-container gets a blur when .chat-locked is on the page */
.chat-locked .chat-feed {
    filter: blur(6px);
    pointer-events: none;
    opacity: 0.4;
    transition: filter 0.3s, opacity 0.3s;
}
.chat-locked .composer {
    filter: blur(4px);
    pointer-events: none;
    opacity: 0.4;
}

/* Floating enter button — positioned over the chat area */
.chat-enter-overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
.chat-locked .chat-enter-overlay {
    display: flex;
}
.chat-enter-btn {
    padding: 18px 40px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(18, 25, 35, 0.9);
    backdrop-filter: blur(20px);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    white-space: nowrap;
}
.chat-enter-btn:hover {
    background: rgba(39, 208, 125, 0.15);
    border-color: rgba(39, 208, 125, 0.4);
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(39, 208, 125, 0.25);
}
.chat-enter-btn i {
    font-size: 22px;
    color: var(--green, #27d07d);
}

/* Pending media preview — Discord-style inline thumbnail */
.pending-preview {
    padding: 8px 10px 4px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pending-preview .pending-thumb {
    position: relative;
    flex-shrink: 0;
}
.pending-preview .pending-gif {
    max-height: 80px;
    max-width: 120px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}
.pending-preview .pending-anime {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(124,58,237,0.1);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 8px;
    padding: 6px 10px;
}
.pending-preview .pending-anime img {
    width: 32px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}
.pending-preview .pending-anime-info {
    min-width: 0;
}
.pending-preview .pending-anime-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.pending-preview .pending-anime-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}
.pending-preview .pending-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.5);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
}
.pending-preview .pending-remove:hover {
    background: rgba(239,68,68,0.6);
}

/* ============================================================
   MEMBERS GRID  (tab panel)
   ============================================================ */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 20px 0;
}
.member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s;
}
.member-card:hover {
    background: rgba(255,255,255,0.08);
}
.member-card .member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}
.member-card .member-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.member-card .member-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.member-card .member-joined {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}

/* ============================================================
   JOIN / LEAVED BUTTON STATES
   ============================================================ */
.primary-button.joined {
    background: rgba(39,208,125,0.12) !important;
    border: 1px solid rgba(39,208,125,0.3) !important;
    color: #27d07d !important;
}
.primary-button.joined:hover {
    background: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
}

/* ============================================================
   SYSTEM MESSAGES  (join/leave notifications)
   ============================================================ */
.msg-system {
    text-align: center;
    padding: 14px 24px;
    margin: 12px auto;
    max-width: 480px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    background: linear-gradient(135deg, rgba(39,208,125,0.08), rgba(59,130,246,0.08));
    border-radius: 16px;
    border: 1px solid rgba(39,208,125,0.15);
    line-height: 1.5;
}
.msg-system .sys-icon {
    font-size: 18px;
    margin-right: 6px;
    vertical-align: middle;
}
.msg-system .sys-user {
    color: #27d07d;
    font-weight: 600;
}
.msg-system .sys-action {
    color: rgba(255,255,255,0.45);
}
.msg-system .sys-welcome {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ============================================================
   FIX: Panels share the same visual box, no double-box
   ============================================================ */
.chat-area {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #151a2d;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
/* The header wrapper should blend into the chat-area */
.chat-area > .chat-container:first-child {
    border-radius: 0;
    border: none;
    background: transparent;
    height: auto;
    overflow: visible;
}
/* Both panels share the same space */
.chat-area .tab-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-area .tab-panel#panel-discussion:not([hidden]) .chat-container {
    border-radius: 0;
    border: none;
    height: 500px;
}
/* Members panel fills naturally */
.chat-area .tab-panel#panel-members:not([hidden]) {
    padding: 24px;
    max-height: 500px;
    overflow-y: auto;
}

/* =====================================================
   CHAT RANK BADGES
   ===================================================== */

.chat-rank-badge {
    font-size: 0.85rem;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 6px;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    overflow: hidden;
}
/* F rank */
.chat-rank-badge.rank-badge-f {
    background: linear-gradient(135deg, #3a2a1a, #2a1a0a);
    color: #a0845c;
    border: 1px solid rgba(160,132,92,.35);
}
/* D rank - Wind */
.chat-rank-badge.rank-badge-d {
    background: linear-gradient(135deg, #1a2a35, #2a3a4a);
    color: #7ab8d4;
    border: 1px solid rgba(122,184,212,.3);
    box-shadow: 0 0 6px rgba(122,184,212,.1);
}
/* C rank - Earth */
.chat-rank-badge.rank-badge-c {
    background: linear-gradient(135deg, #2a1f14, #3d2b18);
    color: #c49a6c;
    border: 1px solid rgba(196,154,108,.35);
    box-shadow: 0 0 6px rgba(196,154,108,.1);
}
/* B rank - Water */
.chat-rank-badge.rank-badge-b {
    background: linear-gradient(135deg, #0a1e3d, #102e50);
    color: #4fc3f7;
    border: 1px solid rgba(79,195,247,.4);
    box-shadow: 0 0 8px rgba(79,195,247,.15);
}
/* A rank - Lightning */
.chat-rank-badge.rank-badge-a {
    background: linear-gradient(135deg, #1a1a30, #15152a);
    color: #e8d44d;
    border: 1px solid rgba(232,212,77,.35);
    box-shadow: 0 0 8px rgba(232,212,77,.15);
}
/* S rank - Blue Glow */
.chat-rank-badge.rank-badge-s {
    background: linear-gradient(135deg, #0a1628, #0d1f3c);
    color: #60c5ff;
    border: 1px solid rgba(96,197,255,.5);
    box-shadow: 0 0 8px rgba(96,197,255,.3), 0 0 20px rgba(96,197,255,.1);
    text-shadow: 0 0 8px rgba(96,197,255,.5);
    animation: chatRankGlow 3s ease-in-out infinite;
}
/* S+ rank - Galaxy */
.chat-rank-badge.rank-badge-sp {
    background: radial-gradient(circle at 30% 40%, #1a0a30, #0a0020);
    color: #e0c0ff;
    border: 1px solid rgba(224,192,255,.4);
    box-shadow: 0 0 10px rgba(224,192,255,.25), 0 0 25px rgba(200,150,255,.1);
    text-shadow: 0 0 8px rgba(200,150,255,.5);
    animation: chatRankGlow 2s ease-in-out infinite;
}
@keyframes chatRankGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

/* ---- XP badge (matches reviews page exactly) ---- */
.xp-bar {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 4px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    min-width: 80px;
    height: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}
.xp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.7;
    animation: elixirFlow 4s ease-in-out infinite;
}
.xp-bar-fill::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -5%;
    width: 110%;
    height: 8px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: inherit;
    animation: elixirWave 2.5s ease-in-out infinite;
}
.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 10%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    animation: elixirBubble 3s ease-in-out infinite;
}
@keyframes elixirFlow {
    0%, 100% { filter: brightness(1) saturate(1.1); }
    50% { filter: brightness(1.2) saturate(1.3); }
}
@keyframes elixirWave {
    0%, 100% { transform: translateX(-2%) scaleY(1); }
    25% { transform: translateX(1%) scaleY(1.3); }
    50% { transform: translateX(-1%) scaleY(0.8); }
    75% { transform: translateX(2%) scaleY(1.2); }
}
@keyframes elixirBubble {
    0% { opacity: 0; transform: translateY(4px) scale(0.5); }
    20% { opacity: 0.6; transform: translateY(0px) scale(1); }
    100% { opacity: 0; transform: translateY(-12px) scale(0.3); }
}
.xp-bar-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.xp-bar.rank-F { border-color: rgba(239,68,68,.25); }
.xp-bar.rank-F .xp-bar-fill { background: linear-gradient(90deg, #991b1b, #dc2626, #ef4444); }
.xp-bar.rank-F .xp-bar-text { color: #ef4444; }
.xp-bar.rank-D { border-color: rgba(255,255,255,.08); }
.xp-bar.rank-D .xp-bar-fill { background: linear-gradient(90deg, #475569, #64748b, #94a3b8); }
.xp-bar.rank-D .xp-bar-text { color: rgba(255,255,255,.4); }
.xp-bar.rank-C { border-color: rgba(56,189,248,.2); }
.xp-bar.rank-C .xp-bar-fill { background: linear-gradient(90deg, #0369a1, #0ea5e9, #38bdf8); }
.xp-bar.rank-C .xp-bar-text { color: #38bdf8; }
.xp-bar.rank-B { border-color: rgba(167,139,250,.2); }
.xp-bar.rank-B .xp-bar-fill { background: linear-gradient(90deg, #6d28d9, #8b5cf6, #a78bfa); }
.xp-bar.rank-B .xp-bar-text { color: #a78bfa; }
.xp-bar.rank-A { border-color: rgba(232,212,77,.2); }
.xp-bar.rank-A .xp-bar-fill { background: linear-gradient(90deg, #a16207, #eab308, #facc15); }
.xp-bar.rank-A .xp-bar-text { color: #e8d44d; }
.xp-bar.rank-S { border-color: rgba(39,208,125,.25); }
.xp-bar.rank-S .xp-bar-fill { background: linear-gradient(90deg, #15803d, #16a34a, #22c55e); }
.xp-bar.rank-S .xp-bar-text { color: #27d07d; }
.xp-bar.rank-S\+ { border-color: rgba(39,208,125,.35); }
.xp-bar.rank-S\+ .xp-bar-fill { background: linear-gradient(90deg, #27d07d, #22c55e); }
.xp-bar.rank-S\+ .xp-bar-text { color: #27d07d; }


/* ==========================================================
   MOBILE PASS — community + chat sized for phones
   (Discord-style: compact hero, 3-up stats, single-line modal
   header, per-group timestamps, full-width composer)
========================================================== */
@media (max-width: 600px) {

    /* ---- Community hero: tight app card, no towering title ---- */
    .community-hero{
        min-height:0;
        border-radius:22px;
        margin-bottom:24px;
    }
    .hero-content{
        padding:20px 14px 16px !important;
    }
    .hero-left h1{
        font-size:clamp(20px,6vw,27px) !important;
        line-height:1.2;
        overflow-wrap:break-word;
    }
    .hero-left p{
        font-size:13px;
        line-height:1.55;
    }
    .community-tag{
        font-size:10px;
        padding:4px 10px;
        border-radius:999px;
    }
    .hero-actions{
        flex-wrap:wrap;
        gap:8px;
        width:100%;
    }
    .hero-actions .primary-button,
    .hero-actions .secondary-button{
        flex:1 1 100%;
        padding:11px 14px;
        font-size:14px;
        border-radius:12px;
        width:100%;
    }
    .hero-right{
        padding:0 14px 16px;
    }
    .stats-grid{
        grid-template-columns:repeat(3,1fr) !important;
        gap:8px;
    }
    .stat-card{
        padding:14px 6px;
        border-radius:14px;
        text-align:center;
    }
    .stat-number{
        font-size:21px !important;
    }
    .stat-label{
        font-size:11px !important;
        opacity:.8;
    }

    /* ---- Chat modal: fits the phone ---- */
    .chat-modal-header{
        gap:10px;
        padding:10px 12px;
    }
    .chat-modal-header h2{
        font-size:16px;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .chat-status{
        padding:4px 10px !important;
        font-size:11px !important;
        gap:6px !important;
        flex-shrink:0;
        white-space:nowrap;
    }
    .chat-modal-close{
        width:34px;
        height:34px;
        border-radius:10px;
        flex-shrink:0;
    }
    .chat-modal-feed{
        padding:12px 10px;
    }
    .chat-modal-composer{
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
        gap:8px;
    }
    .composer-input textarea{
        font-size:16px;
        padding:10px 14px;
    }

    /* ---- Empty state: compact and centered, not a giant box ---- */
    .welcome-box{
        padding:30px 16px;
        border-radius:18px;
    }
    .welcome-icon{
        width:60px;
        height:60px;
        font-size:26px;
        margin:0 auto 12px;
    }
    .welcome-box h2{
        font-size:19px;
        margin-bottom:8px;
    }
    .welcome-box p{
        font-size:13px;
        line-height:1.5;
    }

    /* ---- Message groups: Discord feel on a phone ---- */
    .msg-group-head .avatar{
        width:34px;
        height:34px;
        font-size:12px;
    }
    .msg-group-name{
        font-size:14px;
    }
    .msg-group-time{
        font-size:11px;
        margin-left:2px;
    }
    .msg-lines{
        padding-left:42px;
    }
    /* Discord shows the clock next to the name only - hide the
       per-line time gutter so message text goes edge-to-edge */
    .msg-line-time{
        display:none;
    }
    .msg-line p{
        font-size:14.5px;
        line-height:1.55;
    }
    .msg-content{
        min-width:0;
    }
    .reply-quote{
        font-size:12.5px;
        padding:6px 9px;
    }
}


/* ---- Community hero buttons: compact app pills (overrides the
   full-width slabs from the earlier mobile pass) ---- */
@media (max-width: 600px){
    .hero-actions{
        gap:8px;
    }
    .hero-actions .primary-button,
    .hero-actions .secondary-button{
        flex:1 1 100%;
        width:100%;
        padding:11px 14px;
        font-size:13.5px;
        border-radius:12px;
        font-weight:700;
        max-height:44px;
    }
    .community-tag{
        margin-bottom:8px;
    }
    .hero-right{
        margin-top:2px;
    }
}


/* ==========================================================
   MOBILE — chat keyboard pass + tap-to-send buttons
   (WhatsApp / Discord feel: composer + latest messages fit
   one screen while typing)
========================================================== */

/* send buttons sit inline after the input, green circles */
.composer .send-btn,
.chat-modal-composer .send-btn{
    flex-shrink:0;
    width:46px;
    height:46px;
    min-width:46px;
    padding:0;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:15px;
    transform:none;
}
.composer .send-btn:hover,
.chat-modal-composer .send-btn:hover{
    transform:scale(1.05);
    box-shadow:0 8px 24px rgba(39,208,125,.35);
}
.composer .send-btn .send-label,
.chat-modal-composer .send-btn .send-label{
    display:none;
}
.composer .send-btn i,
.chat-modal-composer .send-btn i{
    font-size:16px;
    margin:0;
}

@media (max-width: 700px){
    /* dynamic viewport: keyboard pushes the composer up and the feed
       shrinks instead of hiding behind the keys */
    .chat-modal{
        top:0;
        left:0;
        right:0;
        height:100vh;
        height:100dvh;
    }
    .chat-modal-feed{
        min-height:0;
    }
    .chat-modal-composer{
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    }
    /* inline composer on the page: keep the box compact so the whole
       chat + typing row fit one screen */
    .composer{
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    }
    /* Kill the old column stack — one WhatsApp-style row: [+] input [send] */
    .composer{
        flex-direction:row;
        align-items:flex-end;
        flex-wrap:wrap;
        gap:8px;
    }
    .composer .composer-tools{
        order:0;
    }
    .composer .composer-input{
        order:1;
        flex:1 1 150px;
    }
    .composer .send-btn{
        order:2;
        align-self:flex-end;
    }
    .composer .composer-input textarea{
        font-size:16px;
    }
}


/* ---- send button: crisp white glyph with a soft glow ---- */
.composer .send-btn i,
.chat-modal-composer .send-btn i{
    font-size:17px;
    color:#fff;
    margin:0;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.composer .send-btn,
.chat-modal-composer .send-btn{
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 4px 14px rgba(0,200,106,.28);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.composer .send-btn:active,
.chat-modal-composer .send-btn:active{
    transform:scale(.92);
}

/* Tall pixel-art avatars (gyaru / fantasy7, 300x600 full-body art)
   are cropped to the face + upper body EVERYWHERE, matching the
   homepage. Position only - never size. */
img[src*="gyaru"],
img[src*="fantasy7"]{
    object-position: top center;
}