*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
:root{
    --bg-main:#080b12;
    --bg-card:rgba(18,24,42,.92);
    --bg-glass:rgba(255,255,255,.04);
    --border-glass:rgba(255,255,255,.08);
    --accent-blue:#00d4ff;
    --accent-purple:#a855f7;
    --accent-green:#10b981;
    --accent-orange:#fb923c;
    --text-main:#f8fafc;
    --text-sub:#94a3b8;
    --bubble-me:linear-gradient(135deg,#00d4ff,#0099cc);
    --bubble-other:linear-gradient(135deg,#1e293b,#334155);
}
html,body{
    height:100%;
    width:100%;
    background:
        radial-gradient(circle at 12% 12%, rgba(0,212,255,.14) 0%, transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(168,85,247,.14) 0%, transparent 28%),
        linear-gradient(180deg,#080b12 0%,#05070a 100%);
    color:var(--text-main);
    overflow:hidden;
    touch-action:none;
}

.launch-loader{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:#060910;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:opacity .55s ease,visibility .55s ease;
}
.launch-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.launch-logo{
    width:90px;height:90px;
    border-radius:24px;
    background:linear-gradient(135deg,#00d4ff,#a855f7);
    display:flex;
    align-items:center;justify-content:center;
    font-weight:800;font-size:32px;color:#070a12;
    margin-bottom:26px;
    animation:launchRotate 2.4s ease-in-out infinite;
    box-shadow:0 0 30px rgba(0,212,255,.5);
}
@keyframes launchRotate{
    0%{transform:rotate(0deg) scale(1)}
    50%{transform:rotate(8deg) scale(1.06)}
    100%{transform:rotate(0deg) scale(1)}
}
.launch-text{
    font-size:15px;color:#cbd5e1;
    margin-bottom:22px;
    letter-spacing:2px;
}
.launch-bar{
    width:240px;height:6px;
    background:rgba(255,255,255,.06);
    border-radius:6px;
    overflow:hidden;
}
.launch-progress{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00d4ff,#a855f7);
    border-radius:6px;
    transition:width .18s linear;
    box-shadow:0 0 12px rgba(0,212,255,.6);
}

.wrap{
    opacity:0;
    transform:translateY(18px) scale(.985);
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    background:transparent;
}
.wrap.show{
    animation:wrapIn .75s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes wrapIn{
    to{opacity:1;transform:translateY(0) scale(1)}
}

.topbar{
    height:60px;
    background:var(--bg-card);
    border-bottom:1px solid var(--border-glass);
    display:flex;
    align-items:center;
    padding:0 12px;
    gap:10px;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 0 18px rgba(0,0,0,.35);
}
.avatar{
    width:40px;
    height:40px;
    border-radius:12px;
    background:linear-gradient(135deg,#00d4ff,#a855f7);
    color:#080b12;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:17px;
    box-shadow:0 0 12px rgba(0,212,255,.55);
    flex-shrink:0;
}
.top-info{
    flex:1;
    min-width:0;
}
.top-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    color:var(--text-main);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.top-sub{
    font-size:11px;
    color:var(--text-sub);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.points-tag{
    flex-shrink:0;
    background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(16,185,129,.12));
    border:1px solid rgba(16,185,129,.35);
    color:#34d399;
    padding:6px 10px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.menu-btn{
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.04);
    color:#fff;
    font-size:18px;
    flex-shrink:0;
    cursor:pointer;
}

.drawer-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:120;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}
.drawer-mask.open{
    opacity:1;
    pointer-events:auto;
}
.drawer{
    position:fixed;
    top:0;right:0;
    width:82%;
    max-width:320px;
    height:100%;
    background:var(--bg-card);
    border-left:1px solid var(--border-glass);
    z-index:121;
    padding:20px 16px;
    transform:translateX(100%);
    transition:.3s cubic-bezier(.2,.9,.2,1);
    overflow-y:auto;
}
.drawer.open{
    transform:translateX(0);
}
.drawer-group-title{
    font-size:12px;
    color:var(--text-sub);
    margin:14px 4px 8px;
}
.drawer-item{
    width:100%;
    text-align:left;
    padding:12px 14px;
    margin-bottom:8px;
    border-radius:12px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.04);
    color:var(--text-main);
    font-size:14px;
    cursor:pointer;
}
.drawer-item:hover{
    border-color:var(--accent-blue);
    background:rgba(0,212,255,.07);
}
.drawer-search{
    width:100%;
    border:1px solid var(--border-glass);
    border-radius:12px;
    padding:11px 14px;
    font-size:14px;
    outline:none;
    background:rgba(255,255,255,.04);
    color:var(--text-main);
}
.friend-title{
    font-size:12px;
    color:var(--text-sub);
    margin:16px 4px 8px;
}
.friend-link{
    display:block;
    text-align:center;
    padding:11px;
    margin-bottom:8px;
    border-radius:12px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.04);
    color:var(--text-main);
    text-decoration:none;
    font-size:14px;
}
.friend-link:hover{
    border-color:var(--accent-blue);
    background:rgba(0,212,255,.08);
}

.chat{
    flex:1;
    overflow-y:auto;
    padding:14px 14px 10px 14px;
}
.chat::-webkit-scrollbar{width:6px}
.chat::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#00d4ff,#a855f7);
    border-radius:3px;
}
.msg-row{
    display:flex;
    margin:10px 0;
    animation:slideIn .28s cubic-bezier(.2,.9,.2,1);
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(14px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.msg-row.me{justify-content:flex-end}
.bubble{
    max-width:84%;
    padding:12px 15px;
    border-radius:16px;
    font-size:14px;
    line-height:1.7;
    word-break:break-word;
    white-space:pre-wrap;
    position:relative;
    overflow:hidden;
}
.msg-row.other .bubble{
    background:var(--bubble-other);
    color:var(--text-main);
    border-bottom-left-radius:6px;
    border:1px solid var(--border-glass);
    box-shadow:0 0 18px rgba(0,0,0,.45);
}
.msg-row.me .bubble{
    background:var(--bubble-me);
    color:#080b12;
    border-bottom-right-radius:6px;
    box-shadow:0 0 18px rgba(0,212,255,.45);
}
.time{
    font-size:11px;
    opacity:.72;
    text-align:right;
    margin-top:6px;
}
.download-link{
    color:#00d4ff;
    text-decoration:underline;
    cursor:pointer;
    font-weight:600;
}
.page-controls{
    margin-top:10px;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.page-btn{
    padding:6px 12px;
    border-radius:10px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.05);
    color:var(--text-main);
    cursor:pointer;
    font-size:13px;
}
.page-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}
.page-info{
    font-size:12px;
    color:var(--text-sub);
    padding:0 6px;
}

.quick-bar{
    background:transparent;
    padding:8px 14px;
    display:flex;
    gap:8px;
    overflow-x:auto;
}
.quick-bar::-webkit-scrollbar{display:none}
.quick-btn{
    background:var(--bg-glass);
    border:1px solid var(--border-glass);
    color:var(--text-main);
    padding:9px 14px;
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
}
.quick-btn.del{
    border-color:rgba(239,68,68,.25);
    color:#fca5a5;
}

.input-bar{
    background:var(--bg-card);
    border-top:1px solid var(--border-glass);
    padding:12px 14px;
    box-shadow:0 -8px 22px rgba(0,0,0,.35);
}
.format-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-size:13px;
    color:var(--text-sub);
}
.format-line select{
    border:1px solid var(--border-glass);
    border-radius:10px;
    padding:7px 10px;
    outline:none;
    background:rgba(255,255,255,.04);
    color:var(--text-main);
    font-size:13px;
}
.send-row{
    display:flex;
    gap:10px;
    align-items:center;
}
.send-row input{
    flex:1;
    border:1px solid var(--border-glass);
    border-radius:24px;
    padding:13px 18px;
    font-size:15px;
    outline:none;
    background:rgba(255,255,255,.04);
    color:var(--text-main);
}
.send-row button{
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg,#00d4ff,#a855f7);
    color:#080b12;
    font-size:19px;
    cursor:pointer;
    box-shadow:0 0 12px rgba(0,212,255,.55);
}

.info-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}
.info-mask.show{
    opacity:1;
    pointer-events:auto;
}
.info-modal{
    width:min(92%,420px);
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:18px;
    padding:22px;
    transform:scale(.85) translateY(10px);
    transition:transform .3s cubic-bezier(.2,.9,.2,1);
}
.info-mask.show .info-modal{
    transform:scale(1) translateY(0);
}
.info-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:16px;
    color:var(--text-main);
}
.info-row{
    display:flex;
    justify-content:space-between;
    padding:11px 0;
    border-bottom:1px solid var(--border-glass);
    font-size:14px;
}
.info-row:last-of-type{border-bottom:none}
.info-label{color:var(--text-sub)}
.info-value{
    color:var(--text-main);
    word-break:break-all;
    max-width:60%;
    text-align:right;
}
.info-close{
    margin-top:18px;
    width:100%;
    padding:11px;
    border-radius:12px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.04);
    color:var(--text-main);
    cursor:pointer;
    font-size:14px;
}

.typing{
    display:inline-flex;
    gap:4px;
    align-items:center;
}
.typing span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent-blue);
    animation:bounce 1.4s ease-in-out infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}
.load-shimmer{
    position:relative;
    overflow:hidden;
}
.load-shimmer::after{
    content:"";
    position:absolute;
    top:0;left:-120%;
    width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    animation:shimmer 1.4s infinite;
}
@keyframes shimmer{
    to{left:120%}
}