:root{
    --bg:#0b0c0f;
    --panel:#13151a;
    --panel2:#1b1e25;
    --line:#2a2e37;
    --text:#f5f6f8;
    --muted:#8b919d;
    --accent:#20c978;
    --bubble:#20242c;
    --mine:#123d2b;
}

*{
    box-sizing:border-box;
}

html,
body{
    height:100%;
    margin:0;
}

body{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    overflow:hidden;
}

button,
input{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

.hidden{
    display:none!important;
}

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

.app{
    height:100vh;

    display:grid;

    grid-template-columns:
        320px 1fr;
}

.sidebar{
    background:
        var(--panel);

    border-right:
        1px solid var(--line);

    display:flex;
    flex-direction:column;

    min-width:0;
}

.side-top{
    display:flex;

    justify-content:
        space-between;

    align-items:center;

    padding:20px;
}

.brand{
    font-size:24px;
    font-weight:800;
}

.me-name{
    font-size:12px;
    color:var(--muted);
    margin-top:3px;
}

.top-actions{
    display:flex;
    gap:7px;
}

.icon-btn,
.tool{
    border:0;

    background:
        var(--panel2);

    color:white;

    cursor:pointer;

    border-radius:12px;
}

.icon-btn{
    width:40px;
    height:40px;
}

.search{
    margin:
        0 14px 14px;

    height:42px;

    background:
        #0e1014;

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

    border-radius:12px;

    display:flex;

    align-items:center;

    padding:0 11px;

    color:var(--muted);
}

.search input{
    width:100%;

    background:none;

    border:0;

    outline:0;

    color:white;

    margin-left:7px;
}

.section-label{
    padding:
        8px 18px;

    color:#666d78;

    font-size:10px;

    letter-spacing:1.3px;
}

.section-head{
    display:flex;

    justify-content:
        space-between;

    align-items:center;

    padding:
        8px 14px 4px 18px;

    color:#666d78;

    font-size:10px;

    letter-spacing:1.3px;
}

.section-head button{
    border:0;

    background:
        var(--panel2);

    color:white;

    border-radius:8px;

    width:28px;
    height:28px;

    font-size:20px;

    cursor:pointer;
}

.users{
    overflow:auto;

    padding-bottom:10px;
}

.user-row{
    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;

    border:0;

    background:transparent;

    color:white;

    padding:
        11px 16px;

    cursor:pointer;
}

.user-row:hover,
.user-row.active{
    background:
        var(--panel2);
}

.avatar{
    width:44px;
    height:44px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#292d36;

    flex:none;

    position:relative;
}

.avatar.small{
    width:42px;
    height:42px;
}

.dot{
    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#5c626d;

    border:
        2px solid var(--panel);

    right:0;
    bottom:0;
}

.dot.on{
    background:#42d37a;
}

.user-copy{
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}

.user-copy strong{
    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.user-copy span{
    font-size:11px;

    color:var(--muted);
}

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

.chat-panel{
    min-width:0;

    display:flex;

    flex-direction:column;

    background:
        var(--bg);

    position:relative;
}

.chat-header{
    height:70px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        0 20px;

    border-bottom:
        1px solid var(--line);

    background:
        #0e1014;

    flex:none;
}

.head-text{
    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;
}

.head-text strong{
    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.head-text span{
    font-size:11px;

    color:var(--muted);
}

.mobile-back{
    display:none;

    border:0;

    background:none;

    color:white;

    font-size:32px;

    cursor:pointer;
}

/* =========================================================
   MESSAGE AREA
========================================================= */

.chat-panel main{
    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

    padding:
        24px 7%;

    display:flex;

    flex-direction:column;

    gap:9px;

    scroll-behavior:auto;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

.empty{
    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:7px;

    color:var(--muted);

    text-align:center;
}

.empty-icon{
    font-size:44px;

    margin-bottom:4px;
}

.empty strong{
    color:#ddd;
}

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

.message{
    max-width:
        min(680px,82%);

    position:relative;

    align-self:flex-start;

    scroll-margin-top:20px;
    scroll-margin-bottom:20px;
}

.message.mine{
    align-self:flex-end;
}

.bubble{
    background:
        var(--bubble);

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

    border-radius:
        16px 16px 16px 5px;

    padding:
        9px 11px;

    overflow:hidden;

    min-width:0;
}

.mine .bubble{
    background:
        var(--mine);

    border-color:
        #1b6b49;

    border-radius:
        16px 16px 5px 16px;
}

.message-text{
    white-space:pre-wrap;

    overflow-wrap:anywhere;

    padding:
        2px 3px;
}

.meta{
    font-size:10px;

    color:#777d88;

    margin:
        4px 7px 0;

    display:flex;

    justify-content:
        flex-end;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;
}

.message:not(.mine)
.meta{
    justify-content:
        flex-start;
}

.message-actions{
    display:flex;

    gap:3px;

    opacity:0;

    position:absolute;

    right:-4px;

    top:-34px;

    background:
        var(--panel2);

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

    padding:4px;

    border-radius:10px;

    z-index:5;
}

.message:hover
.message-actions{
    opacity:1;
}

.message-actions button{
    background:none;

    border:0;

    color:white;

    cursor:pointer;

    padding:
        4px 6px;
}

/* =========================================================
   REPLY
========================================================= */

.reply-preview{
    display:flex;

    flex-direction:column;

    text-align:left;

    width:100%;

    border:0;

    border-left:
        3px solid var(--accent);

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

    color:white;

    padding:
        6px 8px;

    margin-bottom:7px;

    border-radius:6px;

    cursor:pointer;
}

.reply-preview strong{
    font-size:11px;

    color:#42e89a;
}

.reply-preview span{
    font-size:12px;

    color:#bbb;

    margin-top:2px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.message-highlight
.bubble{
    animation:
        messageHighlight
        1.2s ease;
}

@keyframes messageHighlight{

    0%{
        box-shadow:
            0 0 0 0
            rgba(
                32,
                201,
                120,
                0
            );
    }

    30%{
        box-shadow:
            0 0 0 5px
            rgba(
                32,
                201,
                120,
                .4
            );
    }

    100%{
        box-shadow:
            0 0 0 0
            rgba(
                32,
                201,
                120,
                0
            );
    }
}

/* =========================================================
   MEDIA
========================================================= */

.media-preview{
    margin-top:4px;

    max-width:
        420px;
}

.photo{
    display:block;

    max-width:
        min(420px,70vw);

    max-height:
        360px;

    border-radius:10px;

    cursor:pointer;

    object-fit:contain;

    background:#090a0d;
}

.video-preview{
    max-width:
        360px;

    margin-top:4px;

    border-radius:10px;

    overflow:hidden;

    background:#08090b;
}

.chat-video{
    display:block;

    width:100%;

    max-height:220px;

    object-fit:contain;

    background:#08090b;
}

.file{
    display:flex;

    align-items:center;

    gap:8px;

    color:white;

    text-decoration:none;

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

    border-radius:10px;

    padding:9px;

    margin-top:7px;

    min-width:0;
}

.file span:nth-child(2){
    max-width:280px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.file small{
    color:#aaa;

    margin-left:auto;

    white-space:nowrap;
}

/* =========================================================
   REACTIONS
========================================================= */

.reactions{
    display:flex;

    gap:4px;

    flex-wrap:wrap;

    margin:
        3px 6px;
}

.reaction{
    border:
        1px solid var(--line);

    background:
        var(--panel2);

    color:white;

    border-radius:12px;

    padding:
        2px 7px;

    cursor:pointer;

    font-size:12px;
}

.reaction.mine{
    border-color:
        var(--accent);
}

.quick-reactions{
    position:fixed;

    z-index:50;

    background:
        var(--panel2);

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

    border-radius:12px;

    padding:5px;

    display:flex;

    gap:2px;

    box-shadow:
        0 10px 30px #000;
}

.quick-reactions button{
    border:0;

    background:transparent;

    color:white;

    font-size:20px;

    padding:4px;

    cursor:pointer;

    border-radius:7px;
}

.quick-reactions button:hover{
    background:#292d35;
}

/* =========================================================
   READ
========================================================= */

.read-status{
    color:#777d88;

    white-space:nowrap;
}

.read-status.read{
    color:#42e89a;

    font-weight:600;
}

/* =========================================================
   REPLY BAR
========================================================= */

.reply-bar{
    margin:
        0 20px 0;

    background:
        var(--panel2);

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

    border-radius:
        12px 12px 0 0;

    padding:
        8px 12px;

    display:flex;

    justify-content:
        space-between;

    align-items:center;
}

.reply-bar>div{
    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;
}

.reply-bar small{
    color:
        var(--accent);
}

.reply-bar strong{
    color:#eee;

    font-size:13px;
}

.reply-bar span{
    color:#aaa;

    font-size:12px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.reply-bar button{
    border:0;

    background:none;

    color:white;

    font-size:22px;

    cursor:pointer;
}

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

.typing-indicator{
    position:absolute;

    left:22px;

    bottom:76px;

    z-index:8;

    display:flex;

    align-items:center;

    gap:6px;

    background:
        var(--panel2);

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

    border-radius:12px;

    padding:
        6px 10px;

    box-shadow:
        0 5px 20px rgba(
            0,
            0,
            0,
            .35
        );

    color:#aaa;

    font-size:12px;

    pointer-events:none;
}

.typing-dots{
    display:flex;

    gap:3px;

    align-items:center;
}

.typing-dots i{
    width:5px;

    height:5px;

    border-radius:50%;

    background:#42e89a;

    animation:
        typingDot
        1.2s infinite ease-in-out;
}

.typing-dots i:nth-child(2){
    animation-delay:.15s;
}

.typing-dots i:nth-child(3){
    animation-delay:.30s;
}

@keyframes typingDot{

    0%,
    60%,
    100%{
        transform:
            translateY(0);

        opacity:.35;
    }

    30%{
        transform:
            translateY(-4px);

        opacity:1;
    }
}

/* =========================================================
   NEW MESSAGE BUTTON
========================================================= */

.new-message-button{
    position:absolute;

    left:50%;

    bottom:86px;

    transform:
        translateX(-50%);

    z-index:20;

    border:
        1px solid #2d604b;

    background:
        #123d2b;

    color:white;

    border-radius:999px;

    padding:
        9px 16px;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(
            0,
            0,
            0,
            .4
        );

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.new-message-button:hover{
    transform:
        translateX(-50%)
        translateY(-2px);
}

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

.composer{
    display:flex;

    gap:8px;

    padding:
        12px 20px 18px;

    background:
        #0e1014;

    border-top:
        1px solid var(--line);

    flex:none;
}

.composer>input:not(
    [type=file]
){
    flex:1;

    background:
        var(--panel);

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

    border-radius:14px;

    color:white;

    padding:
        0 14px;

    outline:none;

    min-width:0;

    height:48px;
}

.composer>input:not(
    [type=file]
):focus{
    border-color:
        #246b50;
}

.tool,
.send{
    width:48px;

    height:48px;

    flex:none;
}

.send{
    border:0;

    border-radius:14px;

    background:
        var(--accent);

    color:white;

    font-size:20px;

    cursor:pointer;
}

.send:disabled,
.composer input:disabled{
    opacity:.4;
}

/* =========================================================
   UPLOAD
========================================================= */

.upload-progress{
    position:absolute;

    bottom:77px;

    right:20px;

    background:
        var(--panel2);

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

    padding:
        8px 12px;

    border-radius:10px;

    color:#ccc;

    z-index:30;

    width:
        min(320px,90vw);
}

.progress-track{
    width:220px;

    height:6px;

    background:#2a2e37;

    border-radius:99px;

    overflow:hidden;

    margin-top:7px;
}

.progress-bar{
    height:100%;

    width:0;

    background:
        var(--accent);

    transition:
        width .15s;
}

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

.emoji-picker{
    position:fixed;

    background:
        var(--panel2);

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

    padding:8px;

    border-radius:12px;

    display:grid;

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

    gap:4px;

    z-index:10;
}

.emoji-picker button{
    border:0;

    background:transparent;

    font-size:22px;

    cursor:pointer;

    border-radius:8px;

    padding:5px;
}

.emoji-picker button:hover{
    background:#292d35;
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    z-index:100;

    left:50%;

    top:12px;

    transform:
        translateX(-50%);

    width:
        min(92vw,420px);
}

.toast-body{
    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:3px;

    text-align:left;

    background:
        #1b1e25;

    color:#fff;

    border:
        1px solid #343944;

    border-radius:14px;

    padding:
        12px 14px;

    box-shadow:
        0 12px 40px #000;

    cursor:pointer;
}

.toast-body strong{
    font-size:14px;
}

.toast-body span{
    font-size:13px;

    color:#bbb;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:100%;
}

/* =========================================================
   AUTH
========================================================= */

.auth-screen{
    position:fixed;

    inset:0;

    display:grid;

    place-items:center;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(
                32,
                201,
                120,
                .12
            ),
            transparent 35%
        ),
        #08090c;

    z-index:20;
}

.auth-card{
    width:
        min(
            400px,
            calc(100% - 32px)
        );

    background:
        var(--panel);

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

    border-radius:22px;

    padding:32px;

    box-shadow:
        0 20px 70px #000;

    text-align:center;
}

.brand-mark{
    font-size:48px;
}

.auth-card h1{
    margin:
        8px 0 4px;
}

.auth-card p{
    color:
        var(--muted);

    margin:
        0 0 22px;
}

.auth-card form{
    display:flex;

    flex-direction:column;

    gap:11px;
}

.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input:not([type]){
    height:48px;
}

.auth-card input{
    background:
        #0d0f13;

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

    border-radius:12px;

    color:white;

    padding:
        0 13px;

    outline:none;
}

.auth-card input:focus{
    border-color:
        #246b50;
}

.remember{
    display:flex;

    align-items:center;

    gap:8px;

    color:#aaa;

    font-size:13px;

    text-align:left;
}

.remember input{
    width:auto;
}

.auth-card #authSubmit{
    height:48px;

    border:0;

    border-radius:12px;

    background:
        var(--accent);

    color:white;

    font-weight:700;

    cursor:pointer;
}

.link-btn{
    border:0;

    background:none;

    color:#42e89a;

    cursor:pointer;

    padding:7px;
}

.error{
    color:#42e89a;

    min-height:18px;

    font-size:13px;
}

/* =========================================================
   GROUP MODAL
========================================================= */

.modal{
    position:fixed;

    inset:0;

    background:
        rgba(
            0,
            0,
            0,
            .7
        );

    display:grid;

    place-items:center;

    z-index:40;
}

.modal-card{
    width:
        min(
            430px,
            calc(100% - 28px)
        );

    background:
        var(--panel);

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

    border-radius:18px;

    padding:20px;
}

.modal-head{
    display:flex;

    justify-content:
        space-between;

    align-items:center;

    font-size:18px;

    margin-bottom:15px;
}

.modal-head button{
    border:0;

    background:none;

    color:white;

    font-size:25px;

    cursor:pointer;
}

.modal-card>input{
    width:100%;

    height:46px;

    background:#0d0f13;

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

    border-radius:10px;

    color:white;

    padding:
        0 12px;

    outline:0;
}

.modal-label{
    font-size:11px;

    color:#888f99;

    margin:
        16px 0 7px;
}

.member-list{
    max-height:260px;

    overflow:auto;

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

    border-radius:10px;
}

.member-check{
    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px 12px;

    border-bottom:
        1px solid #232730;

    cursor:pointer;
}

.member-check:last-child{
    border-bottom:0;
}

.member-check span{
    color:#eee;
}

.modal-submit{
    width:100%;

    height:46px;

    margin-top:14px;

    border:0;

    border-radius:10px;

    background:
        var(--accent);

    color:white;

    font-weight:700;

    cursor:pointer;
}

/* =========================================================
   MOBILE
========================================================= */

@media(
    max-width:700px
){

    html,
    body{
        height:100%;
        height:100dvh;

        overscroll-behavior:none;
    }

    .app{
        height:100dvh;

        grid-template-columns:
            1fr;
    }

    .sidebar{
        min-height:100dvh;
    }

    .chat-panel{
        height:100dvh;
        min-height:0;
    }

    .app.mobile-chat
    .sidebar{
        display:none;
    }

    .app.mobile-chat
    .chat-panel{
        display:flex;
    }

    .chat-panel{
        display:none;
    }

    .side-top{
        padding:
            12px 12px 8px;
    }

    .brand{
        font-size:21px;
    }

    .search{
        height:46px;

        margin:
            0 10px 8px;
    }

    .user-row{
        min-height:62px;

        padding:
            10px 13px;
    }

    .avatar.small{
        width:46px;
        height:46px;
    }

    .chat-header{
        height:64px;

        min-height:64px;

        padding:
            0 10px;

        position:sticky;

        top:0;

        z-index:3;
    }

    .mobile-back{
        display:block;

        font-size:36px;

        padding:
            0 5px;
    }

    .chat-panel main{
        padding:
            12px 8px 10px;

        gap:8px;

        min-height:0;

        flex:1;
    }

    .composer{
        padding:
            8px 8px
            calc(
                8px +
                env(
                    safe-area-inset-bottom
                )
            );

        gap:6px;

        position:sticky;

        bottom:0;

        z-index:4;
    }

    .composer>
    input:not(
        [type=file]
    ){
        height:50px;

        min-width:0;

        font-size:16px;

        padding:
            0 12px;
    }

    .tool,
    .send{
        width:50px;

        height:50px;

        border-radius:15px;
    }

    .message{
        max-width:94%;
    }

    .bubble{
        padding:
            10px 11px;

        border-radius:
            17px 17px 17px 6px;
    }

    .mine .bubble{
        border-radius:
            17px 17px 6px 17px;
    }

    .message-actions{
        opacity:1;

        position:static;

        background:none;

        border:0;

        padding:0;

        justify-content:
            flex-end;
    }

    .message-actions button{
        font-size:18px;

        padding:
            7px 8px;
    }

    .photo{
        max-width:88vw;

        max-height:48vh;
    }

    /*
       Důležité:
       video je na mobilu
       výrazně menší.
    */

    .video-preview{
        width:
            min(
                260px,
                68vw
            );

        max-width:
            68vw;
    }

    .chat-video{
        width:100%;

        height:auto;

        max-height:
            150px;

        object-fit:contain;
    }

    .file span:nth-child(2){
        max-width:48vw;
    }

    .reply-bar{
        margin:
            0 8px;

        padding:
            8px 10px;
    }

    .emoji-picker{
        bottom:
            72px!important;
    }

    .quick-reactions{
        max-width:94vw;

        left:3vw!important;

        top:auto!important;

        bottom:74px;
    }

    .upload-progress{
        bottom:76px;

        left:10px;

        right:10px;

        width:auto;
    }

    .progress-track{
        width:100%;
    }

    .toast{
        top:8px;
    }

    .auth-card{
        width:
            calc(
                100% - 24px
            );

        padding:
            24px 18px;

        border-radius:18px;
    }

    .auth-card input[type=text],
    .auth-card input[type=password],
    .auth-card input:not([type]),
    .auth-card #authSubmit{
        height:52px;

        font-size:16px;
    }

    .remember{
        font-size:14px;
    }

    .section-head{
        padding:
            6px 12px 3px 14px;
    }

    .section-head button{
        width:34px;
        height:34px;
    }

    .top-actions
    .icon-btn{
        width:42px;
        height:42px;
    }

    .me-name{
        font-size:11px;
    }

    .typing-indicator{
        left:10px;

        bottom:74px;
    }

    .new-message-button{
        bottom:76px;

        font-size:12px;

        padding:
            8px 13px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(
    prefers-reduced-motion:reduce
){

    *{
        scroll-behavior:auto!important;

        animation-duration:
            .01ms!important;

        animation-iteration-count:
            1!important;
    }
}

/* =========================================================
   ICQ NOTIFIKACE
========================================================= */

.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;

    width: min(360px, calc(100vw - 30px));

    background: #15181e;

    border: 1px solid #303640;

    border-left: 4px solid var(--accent);

    border-radius: 14px;

    padding: 12px 14px;

    color: white;

    box-shadow:
        0 12px 40px rgba(0,0,0,.65);

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    animation:
        notificationIn
        .25s ease-out;
}

.notification-toast:hover {
    background: #1b1f26;
}

.notification-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #292d36;

    display: grid;

    place-items: center;

    flex:none;

    font-size: 20px;
}

.notification-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.notification-content strong {
    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.notification-content span {
    font-size: 13px;

    color: #aaa;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.notification-close {
    margin-left: auto;

    width: 28px;
    height: 28px;

    border: 0;

    background: transparent;

    color: #888;

    border-radius: 8px;

    cursor: pointer;

    font-size: 18px;

    flex:none;
}

.notification-close:hover {
    background: #292d35;

    color: white;
}

@keyframes notificationIn {

    from {
        opacity: 0;

        transform:
            translateX(30px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


/* =========================================================
   ICQ UNREAD BADGE
========================================================= */

.unread-badge {
    min-width: 19px;

    height: 19px;

    padding:
        0 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: #ef3f4f;

    color: white;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 2px 8px rgba(
            239,
            63,
            79,
            .35
        );
}


/* =========================================================
   ICQ ONLINE STATUS
========================================================= */

.dot.on {
    background: #42d37a;

    box-shadow:
        0 0 0 3px rgba(
            66,
            211,
            122,
            .10
        );
}


/* =========================================================
   NEW MESSAGE HIGHLIGHT
========================================================= */

.user-row.unread {
    background:
        rgba(
            32,
            201,
            120,
            .06
        );
}

.user-row.unread .user-copy strong {
    color: #fff;

    font-weight: 800;
}

.user-row.unread .user-copy span {
    color: #ccc;
}


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

.message.new-message
.bubble {
    animation:
        newMessagePulse
        .8s ease;
}

@keyframes newMessagePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(
                32,
                201,
                120,
                .55
            );
    }

    50% {
        box-shadow:
            0 0 0 5px
            rgba(
                32,
                201,
                120,
                .18
            );
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(
                32,
                201,
                120,
                0
            );
    }
}


/* =========================================================
   MOBILE NOTIFICATION
========================================================= */

@media (max-width:700px) {

    .notification-toast {
        top:
            calc(
                8px +
                env(safe-area-inset-top)
            );

        left: 10px;

        right: 10px;

        width: auto;

        border-radius: 13px;

        padding: 11px 12px;
    }

    .notification-avatar {
        width: 40px;
        height: 40px;
    }

    .notification-content strong {
        font-size: 13px;
    }

    .notification-content span {
        font-size: 12px;
    }
}


/* =========================================================
   NOTIFICATION DISABLED
========================================================= */

.notifications-disabled {
    opacity: .45;
}

/* =========================================================
   Radar Chat 7.2 - finální opravy
========================================================= */
.user-copy{flex:1;}
.unread-badge{margin-left:auto;flex:none;}
.chat-audio{display:block;width:min(360px,72vw);max-width:100%;margin-top:6px;}
.typing-indicator{pointer-events:none;}
@media(max-width:700px){
  .chat-audio{width:min(260px,68vw);}
  .video-preview{width:min(260px,68vw);max-width:68vw;}
  .chat-video{max-height:150px;}
}


/* =========================================================
   RADAR CHAT 7.3 — VISUAL REFRESH + ADMIN
========================================================= */
:root{
  --bg:#070a0d;
  --panel:#0d1216;
  --panel2:#141b20;
  --line:#243039;
  --text:#f4f8f6;
  --muted:#8c9a94;
  --accent:#20d982;
  --accent-soft:rgba(32,217,130,.13);
  --bubble:#182127;
  --mine:#123d2b;
  --danger:#ff5d68;
  --shadow:0 18px 55px rgba(0,0,0,.34);
}

body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 80% -20%,rgba(32,217,130,.10),transparent 35%),
    radial-gradient(circle at -10% 100%,rgba(25,100,76,.12),transparent 35%),
    var(--bg);
}

.sidebar{
  background:linear-gradient(180deg,rgba(16,22,27,.98),rgba(10,14,18,.98));
  box-shadow:10px 0 35px rgba(0,0,0,.18);
}
.side-top{padding:18px 16px 14px;}
.brand{
  font-size:23px;
  letter-spacing:-.5px;
  background:linear-gradient(90deg,#fff,#9ff2c7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.me-line{display:flex;align-items:center;gap:7px;margin-top:4px;}
.me-name{margin:0;color:#aab7b1;}
.admin-badge{
  padding:2px 6px;border-radius:6px;font-size:8px;font-weight:900;letter-spacing:.8px;
  color:#062014;background:linear-gradient(135deg,#57efa7,#20d982);
  box-shadow:0 0 18px rgba(32,217,130,.20);
}
.icon-btn,.tool{
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#182127,#11181d);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 6px 16px rgba(0,0,0,.16);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.icon-btn:hover,.tool:hover{transform:translateY(-1px);border-color:rgba(32,217,130,.28);background:#19242a;}
.search{
  background:rgba(5,9,12,.72);border-color:#202c33;border-radius:14px;height:44px;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.18);
}
.search:focus-within{border-color:rgba(32,217,130,.55);box-shadow:0 0 0 3px rgba(32,217,130,.08);}
.user-row{margin:2px 8px;border-radius:13px;transition:background .14s ease,transform .14s ease;}
.user-row:hover{background:rgba(255,255,255,.045);transform:translateX(2px);}
.user-row.active{background:linear-gradient(90deg,rgba(32,217,130,.18),rgba(32,217,130,.06));box-shadow:inset 3px 0 var(--accent);}
.user-row.unread{background:linear-gradient(90deg,rgba(32,217,130,.14),rgba(32,217,130,.03));}
.avatar{background:linear-gradient(145deg,#233039,#151d22);border:1px solid rgba(255,255,255,.06);box-shadow:0 8px 22px rgba(0,0,0,.18);}
.dot.on{box-shadow:0 0 0 2px var(--panel),0 0 10px rgba(32,217,130,.65);}
.chat-header{
  background:rgba(11,16,20,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.055);box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.chat-panel main{
  background:
    radial-gradient(circle at 10% 10%,rgba(32,217,130,.035),transparent 28%),
    linear-gradient(180deg,#090d10,#080b0e);
}
.bubble{
  border:1px solid rgba(255,255,255,.045);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.mine .bubble{
  background:linear-gradient(145deg,#174b35,#103526);
  border-color:rgba(51,235,146,.13);
}
.message:not(.mine) .bubble{background:linear-gradient(145deg,#1b252b,#151d22);}
.photo,.chat-video{border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.24);}
.composer{
  background:rgba(10,15,18,.90);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.055);
}
.composer>input:not([type=file]){
  background:#11191e;border:1px solid #25323a;border-radius:16px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.18);transition:border .15s ease,box-shadow .15s ease;
}
.composer>input:not([type=file]):focus{border-color:rgba(32,217,130,.55);box-shadow:0 0 0 3px rgba(32,217,130,.08);}
.send{background:linear-gradient(135deg,#2ae18c,#18b96c);box-shadow:0 8px 24px rgba(32,217,130,.22);}
.send:hover{filter:brightness(1.06);transform:translateY(-1px);}
.toast{box-shadow:0 20px 55px rgba(0,0,0,.35);border:1px solid rgba(32,217,130,.20);}
.unread-badge{box-shadow:0 4px 15px rgba(32,217,130,.25);}

.admin-delete-user{
  width:32px;height:32px;display:grid;place-items:center;flex:none;margin-left:4px;border-radius:10px;
  color:#ff858d;opacity:.68;cursor:pointer;transition:opacity .15s ease,background .15s ease,transform .15s ease;
}
.user-row:hover .admin-delete-user{opacity:1;}
.admin-delete-user:hover,.admin-delete-user:focus{background:rgba(255,93,104,.12);outline:0;transform:scale(1.05);}

.danger-modal{max-width:440px;text-align:center;padding:28px;box-shadow:var(--shadow);border:1px solid rgba(255,93,104,.20);}
.danger-icon{width:62px;height:62px;display:grid;place-items:center;margin:0 auto 14px;border-radius:18px;font-size:28px;background:rgba(255,93,104,.10);border:1px solid rgba(255,93,104,.18);}
.danger-modal h2{margin:0 0 8px;font-size:21px;}
.danger-modal p{margin:0 0 14px;color:var(--muted);}
.danger-note{padding:12px 14px;text-align:left;border-radius:12px;color:#d9c2c4;background:rgba(255,93,104,.07);border:1px solid rgba(255,93,104,.12);font-size:12px;line-height:1.5;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.secondary-btn,.danger-btn{height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line);font-weight:700;cursor:pointer;}
.secondary-btn{background:#151d22;color:#e7ece9;}
.danger-btn{background:linear-gradient(135deg,#ff6973,#e94753);border-color:transparent;color:white;box-shadow:0 8px 22px rgba(255,93,104,.18);}
.danger-btn:disabled{opacity:.55;cursor:wait;}

*{scrollbar-width:thin;scrollbar-color:#35444d transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-thumb{background:#35444d;border-radius:20px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

@media(max-width:700px){
  .user-row{margin:2px 6px;}
  .admin-delete-user{opacity:1;width:34px;height:34px;}
  .danger-modal{width:calc(100% - 24px);padding:22px 18px;}
  .modal-actions{flex-direction:column-reverse;}
  .secondary-btn,.danger-btn{width:100%;height:46px;}
}