/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    min-height: 100vh;
    background-color: #1C1C1C;
    color: #FFFFFF;
    font-family: "Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body {
    overscroll-behavior-y: contain; /* Chrome/Firefox/новый Safari */
}
.chat-screen,
.feed-screen,
.main-screen {
    overscroll-behavior: contain;
}

/* Разрешаем нормальное поведение для текстовых полей */
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ========== SPLASH ========== */
.splash {
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#1C1C1C;
}
.logo {
    width:55vw;
    max-width:280px;
    height:auto;
}

/* ========== WELCOME ========== */
.welcome-screen {
    display:none;
    min-height:100vh;
    padding:0 24px 40px;
    flex-direction:column;
    justify-content:space-between;
    background-color:#1C1C1C;
}
.welcome-content {
    margin-top:120px;
    text-align:center;
}
.welcome-title {
    font-weight:600;
    font-size:24px;
    line-height:1.4;
    margin-bottom:24px;
}
.welcome-title span {
    display:block;
}
.welcome-subtitle {
    font-weight:400;
    font-size:16px;
    line-height:1.6;
}
.welcome-buttons {
    width:100%;
    max-width:360px;
    margin:0 auto;
}

/* BUTTONS */
.btn{
    width:100%;
    padding:14px 24px;
    margin-bottom:16px;
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.15s ease-out, opacity 0.15s ease-out;
}
.btn:last-child {
    margin-bottom:0;
}
.btn-primary {
    background-color:#3F3F3F;
}
.btn:active{
    transform:scale(0.97);
    box-shadow:0 4px 12px rgba(0,0,0,0.6);
}

/* ========== REGISTER / LOGIN SCREENS ========== */
.register-screen,
.parent-screen,
.dancer-screen,
.login-screen {
    display:none;
    min-height:100vh;
    padding:0 24px 40px;
    background-color:#1C1C1C;
    color:#FFFFFF;
    position:relative;
}
.register-header,
.parent-header,
.dancer-header,
.login-header {
    margin-top:96px;
    margin-bottom:40px;
    text-align:center;
}
.register-title {
    font-weight:600;
    font-size:28px;
    margin-bottom:24px;
}
.register-subtitle {
    font-weight:500;
    font-size:16px;
    line-height:1.6;
}

.register-form .field,
.parent-form .field,
.dancer-form .field,
.login-form .field,
.create-group-form .field,
.create-friend-form .field {
    width:100%;
    max-width:360px;
    margin:0 auto 16px;
    border:1px solid rgba(255,255,255,.4);
    height:56px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border-radius:14px;
    background-color:#151515;
}

/* подсветка ошибок в полях */
.field.field-error{
    border-color:#FF3B30 !important;
}

.register-form input,
.parent-form input,
.dancer-form input,
.login-form input,
.create-group-form input,
.create-friend-form input {
    background:transparent;
    border:none;
    outline:none;
    color:#FFFFFF;
    width:100%;
    font-size:16px;
    font-family:inherit;
}
.register-form input::placeholder,
.parent-form input::placeholder,
.dancer-form input::placeholder,
.login-form input::placeholder,
.create-group-form input::placeholder,
.create-friend-form input::placeholder {
    color:rgba(255,255,255,.4);
}

.register-form .btn-primary,
.parent-form .btn-primary,
.dancer-form .btn-primary,
.login-form .btn-primary,
.create-group-form .btn-primary {
    margin-top:40px;
    max-width:360px;
    width:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.create-friend-form .btn-primary{
    max-width:360px;
    width:100%;
    display:block;
    margin:0 auto 8px;
}

/* BACK BUTTON */
.back-btn{
    position:absolute;
    top:48px;
    left:24px;
    width:32px;
    height:32px;
    background:transparent;
    border:none;
    color:#FFFFFF;
    font-size:22px;
    cursor:pointer;
}

/* FIELD NOTES */
.field-note{
    width:100%;
    max-width:360px;
    margin:0 auto 4px;
    font-size:12px;
    color:rgba(255,255,255,.6);
    text-align:left;
}

/* PASSWORD TOGGLE */
.field-password{position:relative;}
.toggle-password{
    position:absolute;
    right:16px;
    width:24px;
    height:24px;
    background:none;
    border:none;
    cursor:pointer;
}
.toggle-password::before{
    content:"👁";
    font-size:18px;
    color:rgba(255,255,255,.8);
}

/* SELECT FIELDS */
.field-select{
    position:relative;
    cursor:pointer;
    user-select:none;
    border-radius:14px;
}
.select-display{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}
.select-arrow{
    width:8px;
    height:8px;
    border-right:2px solid #FFFFFF;
    border-bottom:2px solid #FFFFFF;
    transform:rotate(45deg);
    transition:transform .2s ease;
    margin-left:8px;
}
.select-options{
    position:absolute;
    top:100%;
    left:-1px;
    right:-1px;
    background-color:#1C1C1C;
    border:1px solid rgba(255,255,255,.4);
    border-top:none;
    display:none;
    z-index:10;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
    overflow:hidden;
}
.select-option{
    padding:12px 16px;
    font-size:16px;
}
.select-option:hover{
    background-color:#2A2A2A;
}
.field-select.open{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.field-select.open .select-options{
    display:block;
}
.field-select.open .select-arrow{
    transform:rotate(-135deg);
}

/* DATE FIELD */
.field-date{
    position:relative;
    justify-content:space-between;
}
.field-date span{
    font-size:16px;
    color:rgba(255,255,255,.4);
}
.field-date input[type="date"]{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:auto;
    cursor:pointer;
}
.date-btn{
    width:24px;
    height:24px;
    background:none;
    border:none;
    cursor:pointer;
}
.date-btn::before{
    content:"📅";
    font-size:18px;
    color:rgba(255,255,255,.8);
}

/* ========== MAIN SCREEN (LIST OF CHATS) ========== */
.main-screen{
    display:none;
    min-height:100vh;
    background-color:#1C1C1C;
    padding-bottom:90px;
    color:#FFFFFF;
    flex-direction:column;
}
.chat-search-wrapper{
    padding:72px 16px 8px;
    background-color:#1C1C1C;
}
.chat-search-wrapper input{
    width:100%;
    max-width:400px;
    margin:0 auto;
    display:block;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.2);
    background-color:#111111;
    color:#FFFFFF;
    padding:8px 10px;
    font-size:14px;
    font-family:inherit;
    outline:none;
}
.chat-search-wrapper input::placeholder{
    color:rgba(255,255,255,0.5);
}

/* CHAT LIST */
.chat-list{
    flex:1;
    padding-top:4px;
}
.chat-item{
    display:flex;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.1);
    cursor:pointer;
    transition:transform 0.14s ease-out, filter 0.14s ease-out, background-color 0.14s ease-out;
    position:relative;
}
.chat-item.chat-item-pressed{
    transform:scale(0.97);
    filter:brightness(1.03);
    z-index:101;
}
.chat-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    overflow:hidden;
    margin-right:12px;
    background-color:#2A2A2A;
    flex-shrink:0;
}
.chat-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.chat-body{
    flex:1;
}
.chat-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:4px;
    display:flex;
    align-items:center;
}
.chat-subtitle{
    font-size:13px;
    color:rgba(255,255,255,.6);
}
.chat-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    min-width:32px;
}
.chat-unread-badge{
    min-width:20px;
    height:20px;
    border-radius:999px;
    background-color:#3BA9FF;
    color:#000000;
    font-size:12px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    margin-left:8px;
}

/* иконка mute рядом с названием чата */
.chat-muted-icon{
    width:14px;
    height:14px;
    margin-left:4px;
    vertical-align:middle;
    opacity:0.7;
}

/* закреплённый чат — чуть более светлый фон */
.chat-item.chat-pinned{
    background-color:#2b2b2b;
}

/* ========== BOTTOM NAV ========== */
.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:10px;
    height:72px; /* чуть выше */
    background-color:#111111;
    display:none;
    align-items:center;
    justify-content:space-around;
    border-top-left-radius:24px;
    border-top-right-radius:24px;
    padding:0;
    box-shadow:0 8px 30px rgba(0,0,0,0.7);
    transform:translateY(80px);
    opacity:0;
    transition:
        transform 0.3s cubic-bezier(.2,.8,.2,1),
        opacity 0.25s ease-out;
    z-index:50;
}

.bottom-nav.bottom-nav-visible{
    transform:translateY(0);
    opacity:1;
}

.nav-btn{
    width:56px;   /* больше tap-area */
    height:56px;
    border:none;
    background:transparent;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.nav-btn img{
    width:24px;   /* размер иконки тот же */
    height:24px;
    display:block;
}

.nav-btn-active{
    transform:translateY(-2px) scale(1.05);
}

/* ========== CHAT SCREEN ========== */
.chat-screen{
    position:fixed;
    inset:0;
    display:flex;
    min-height:100vh;
    background-color:rgba(0,0,0,.6);
    background-image:url("/img/chat-bg.png");
    background-size:cover;
    background-repeat:repeat;
    background-blend-mode:multiply;
    color:#FFFFFF;
    padding-top:64px;
    padding-bottom:80px;

    transform:translateX(100%);
    opacity:0;
    pointer-events:none;
    transition:
        transform 0.25s cubic-bezier(.4,0,.2,1),
        opacity 0.2s ease-out;
}
.chat-screen.chat-screen-visible{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
}

.chat-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    background-color:#111111;
    z-index:10;
}
.chat-back{
    background:transparent;
    border:none;
    color:#FFFFFF;
    font-size:20px;
    width:40px;
    text-align:left;
    cursor:pointer;
}
.chat-header-center{
    flex:1;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.chat-header-title{
    font-size:16px;
    font-weight:600;
}
.chat-header-status{
    font-size:12px;
    color:rgba(255,255,255,.6);
    margin-top:2px;
}
.chat-header-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
    background-color:#2A2A2A;
    flex-shrink:0;
}
.chat-header-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CHAT CONTENT */
.chat-content{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    bottom:80px;
    overflow-y:auto;
}

/* LOADER поверх чата (перекрывает и сообщения, и инпут) */
.chat-loading-overlay{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:20;
}
.chat-loading-overlay.show{
    display:flex;
}
.chat-loading-spinner{
    width:32px;
    height:32px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.3);
    border-top-color:#FFFFFF;
    animation:chat-loading-spin 0.7s linear infinite;
}
@keyframes chat-loading-spin{
    to { transform:rotate(360deg); }
}

/* CHAT INPUT BAR */
.chat-input-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding:8px 16px 24px;
    display:flex;
    align-items:center;
    gap:8px;
    background:transparent;
}

/* textarea */
.chat-input-bar textarea{
    flex:1;
    border-radius:12px;
    border:none;
    padding:8px 14px;
    background-color:rgba(63,63,63,.9);
    color:#FFFFFF;
    font-size:16px;
    font-family:inherit;
    line-height:1.3;
    outline:none;
    resize:none;
    height:36px;
    min-height:36px;
    max-height:96px;
    overflow-y:auto;
    scrollbar-width:none;
}
.chat-input-bar textarea::placeholder{
    color:rgba(255,255,255,.6);
}
.chat-input-bar textarea::-webkit-scrollbar{
    display:none;
}

/* ATTACH BUTTON */
.chat-attach-btn{
    width:32px;
    height:32px;
    border:none;
    background:transparent url("icons/attach.png") center/20px 20px no-repeat;
    cursor:pointer;
    flex-shrink:0;
}

/* ========== МИКРОФОН / ОТПРАВКА / ГОЛОСОВЫЕ ========== */

.chat-send-mic-wrapper{
    position:relative;
    width:40px;
    height:40px;
    flex-shrink:0;
}
.chat-mic-btn,
.chat-send-btn{
    position:absolute;
    top:50%;
    left:50%;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#3BA9FF;
    background-position:center;
    background-repeat:no-repeat;
    background-size:18px 18px;
    transform:translate(-50%,-50%);
    opacity:1;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}
.chat-mic-btn{
    background-image:url("icons/mic.png");
}
.chat-send-btn{
    background-image:url("icons/send.png");
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-50%) translateX(-8px);
}

.chat-input-bar.can-send:not(.recording) .chat-mic-btn{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-50%) translateX(8px);
}
.chat-input-bar.can-send:not(.recording) .chat-send-btn{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%);
}

/* микрофон при нажатии */
.chat-mic-btn.mic-pressed{
    transform:translate(-50%,-50%) scale(1.2);
    box-shadow:0 8px 22px rgba(0,0,0,0.7);
}

/* микрофон во время записи: сдвинут, увеличен, пульсирует */
.chat-input-bar.recording .chat-mic-btn{
    opacity:1;
    pointer-events:auto;
    background-color:#FF3B30;
    transform:translate(-50%,-50%) translateX(6px);
    animation:mic-record-pulse 0.9s ease-in-out infinite;
}
.chat-input-bar.recording .chat-send-btn{
    opacity:0;
    pointer-events:none;
}

@keyframes mic-record-pulse{
    0%{
        transform:translate(-50%,-50%) translateX(6px) scale(1.0);
        box-shadow:0 4px 10px rgba(0,0,0,0.4);
    }
    50%{
        transform:translate(-50%,-50%) translateX(6px) scale(1.18);
        box-shadow:0 10px 24px rgba(0,0,0,0.8);
    }
    100%{
        transform:translate(-50%,-50%) translateX(6px) scale(1.0);
        box-shadow:0 4px 10px rgba(0,0,0,0.4);
    }
}

/* панель записи */
.voice-record-ui{
    display:none;
    align-items:center;
    gap:10px;
    flex:1;
    border-radius:12px;
    padding:6px 10px;
    background-color:rgba(63,63,63,0.95);
    opacity:0;
    transform:translateX(12px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}
.chat-input-bar.recording textarea{
    display:none;
}
.chat-input-bar.recording .chat-attach-btn{
    opacity:0;
    pointer-events:none;
}
.chat-input-bar.recording .voice-record-ui{
    display:flex;
    opacity:1;
    transform:translateX(0);
}

/* превью отмены записи */
.chat-input-bar.recording-cancel-preview .voice-record-ui{
    background-color:rgba(255,59,48,0.16);
}
.chat-input-bar.recording-cancel-preview .voice-red-dot{
    animation:voice-cancel-blink 0.5s infinite alternate;
}
@keyframes voice-cancel-blink{
    from { opacity:1; }
    to   { opacity:0.3; }
}

.voice-red-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:#FF3B30;
    flex-shrink:0;
}
.voice-wave-live{
    flex:1;
    display:flex;
    align-items:center;
    gap:2px;
    height:18px;
}
.voice-wave-bar{
    width:3px;
    height:3px;
    border-radius:2px;
    background-color:#FFFFFF;
    opacity:0.9;
    transition:
        height 0.18s ease-out,
        background-color 0.18s linear;
}
.voice-record-hint{
    font-size:11px;
    color:rgba(255,255,255,0.7);
    white-space:nowrap;
}
.voice-timer{
    font-size:13px;
    font-variant-numeric:tabular-nums;
    color:#FFFFFF;
}

/* голосовое в сообщении */
.msg-voice{
    display:flex;
    align-items:center;
    gap:10px;
}
.msg-voice-play{
    width:36px;
    height:36px;
    border-radius:50%;
    border:2px solid #FFFFFF;
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#000000;
    background-image:url("icons/play.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-image 0.15s linear,
        background-color 0.15s linear,
        border-color 0.15s linear;
}
.msg-item.msg-me .msg-voice-play{
    background-color:#FFFFFF;
    border-color:#000000;
}
.msg-voice-play.playing{
    background-image:url("icons/pause.png");
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(0,0,0,0.6);
}
.msg-voice-wave{
    flex:1;
    display:flex;
    align-items:center;
    gap:2px;
    height:20px;
    cursor:pointer;
}
.msg-voice-wave-bar{
    width:3px;
    border-radius:2px;
    background-color:rgba(255,255,255,0.45);
    transition:
        height 0.18s ease-out,
        background-color 0.2s linear;
}
.msg-item.msg-me .msg-voice-wave-bar{
    background-color:rgba(0,0,0,0.35);
}
.msg-voice-wave-bar.played{
    background-color:#FFFFFF;
}
.msg-item.msg-me .msg-voice-wave-bar.played{
    background-color:#000000;
}
.msg-voice-time{
    font-size:12px;
    min-width:38px;
    text-align:right;
    margin-left:4px;
    font-variant-numeric:tabular-nums;
    opacity:0.9;
}

/* ========== PROFILE ========== */
.profile-screen{
    display:none;
    min-height:100vh;
    background-color:#1C1C1C;
    color:#FFFFFF;
    padding:80px 24px 90px;
    box-sizing:border-box;
}
.profile-content{
    max-width:360px;
    margin:0 auto;
    text-align:center;
}
.profile-avatar-wrapper{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 12px;
    background-color:#2A2A2A;
}
.profile-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}
.profile-change-photo{
    margin-bottom:32px;
    padding:6px 16px;
    border-radius:999px;
    border:none;
    background-color:#3F3F3F;
    color:#FFFFFF;
    font-size:14px;
    cursor:pointer;
}
.profile-name{
    font-size:20px;
    font-weight:600;
    margin-bottom:24px;
}
.profile-pill{
    margin:0 auto 16px;
    max-width:260px;
    padding:10px 16px;
    border-radius:999px;
    background-color:#3F3F3F;
    font-size:16px;
}
.profile-logout-btn{
    margin:24px auto 0;
    max-width:260px;
    width:100%;
    padding:10px 0;
    border:none;
    border-radius:999px;
    background-color:#FF3B30;
    color:#FFFFFF;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}
.profile-logout-btn:active{
    opacity:0.85;
}

/* ========== USER / GROUP MODALS (ANIMATED SHEET) ========== */

.chat-user-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    z-index:30;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease-out;
}
.chat-user-modal.visible{
    opacity:1;
    pointer-events:auto;
}
.chat-user-modal-backdrop,
.group-modal-backdrop,
.group-add-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

.chat-user-modal-card,
.group-modal-card{
    position:relative;
    z-index:31;
    width:100vw;
    max-width:100vw;
    height:100vh;
    margin:0;
    padding:32px 24px 24px;
    background-color:#101010;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
    overflow:hidden;
    min-height:0;

    transform:translateX(100%);
    transition:transform 0.25s cubic-bezier(.4,0,.2,1);
}
.chat-user-modal.visible .chat-user-modal-card,
.chat-user-modal.visible .group-modal-card{
    transform:translateX(0);
}

.chat-user-back-btn,
.group-back-btn{
    position:absolute;
    top:12px;
    left:12px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background-color:rgba(0,0,0,0.5);
    color:#FFFFFF;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.chat-user-back-btn:active,
.group-back-btn:active{
    opacity:0.8;
}

.chat-user-avatar-wrapper{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    margin:20px auto 16px;
    background-color:#2A2A2A;
    flex-shrink:0;
}
.chat-user-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}
.chat-user-name{
    font-size:20px;
    font-weight:600;
    margin-bottom:16px;
}
.chat-user-pill{
    margin:0 auto 10px;
    max-width:260px;
    padding:8px 16px;
    border-radius:999px;
    background-color:#3F3F3F;
    font-size:15px;
}
.chat-user-write-btn{
    margin:16px auto 0;
    max-width:260px;
    width:100%;
    padding:10px 0;
    border:none;
    border-radius:999px;
    background-color:#3BA9FF;
    color:#000000;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}
.chat-user-write-btn:active{
    opacity:0.8;
}
.chat-user-remove-btn{
    margin:8px auto 0;
    max-width:260px;
    width:100%;
    padding:10px 0;
    border:none;
    border-radius:999px;
    background-color:#FF3B30;
    color:#FFFFFF;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}
.chat-user-remove-btn:active{
    opacity:0.85;
}

/* GROUP MODAL: avatar + name rows */

.group-avatar-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:12px;
}
.group-avatar-wrapper{
    width:72px;
    height:72px;
    border-radius:50%;
    overflow:hidden;
    background-color:#2A2A2A;
    flex-shrink:0;
}
.group-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}
.group-name-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:8px;
}
.group-name{
    font-size:20px;
    font-weight:600;
}
.edit-icon{
    width:20px;
    height:20px;
    border:none;
    background:transparent url("icons/edit.png") center/16px 16px no-repeat;
    cursor:pointer;
    flex-shrink:0;
}
.group-members-count{
    font-size:13px;
    color:rgba(255,255,255,0.7);
}
.group-members-list{
    margin-top:8px;
    max-height:220px;
    overflow-y:auto;
}
.group-member-item{
    display:flex;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.group-member-avatar-wrapper{
    width:32px;
    height:32px;
    border-radius:50%;
    overflow:hidden;
    margin-right:8px;
    background-color:#2A2A2A;
    flex-shrink:0;
}
.group-member-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}
.group-member-name{
    font-size:14px;
    text-align:left;
}
.group-name-input{
    width:100%;
    margin:4px 0 8px;
    padding:6px 10px;
    border-radius:999px;
    border:none;
    background:#2A2A2A;
    color:#FFFFFF;
    font-size:14px;
    outline:none;
}
.group-name-save-btn{
    width:100%;
    padding:8px 0;
    border:none;
    border-radius:999px;
    background:#3F3F3F;
    color:#FFFFFF;
    font-size:14px;
    margin-bottom:8px;
    cursor:pointer;
}
.group-add-member-btn{
    margin:12px 0;
    padding:8px 0;
    border:none;
    background:transparent;
    color:#FFFFFF;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,.2);
    border-bottom:1px solid rgba(255,255,255,.2);
    cursor:pointer;
}

/* ========== GROUP ADD MODAL ========== */
.group-add-modal-card{
    position:relative;
    z-index:31;
    width:80%;
    max-width:320px;
    padding:24px 24px 24px;
    border-radius:16px;
    background-color:#101010;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    margin:auto;
}
.group-add-label{
    margin:16px 0 8px;
    font-size:14px;
    color:#FFFFFF;
}
.group-add-input-wrapper{
    width:100%;
    max-width:260px;
    margin:0 auto 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.4);
    padding:8px 12px;
    background:transparent;
}
#groupAddUserIdInput{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    color:#FFFFFF;
    font-size:16px;
    text-align:center;
}
#groupAddUserIdInput::placeholder{
    color:rgba(255,255,255,.4);
}
.group-add-submit-btn{
    width:100%;
    max-width:260px;
    margin:0 auto;
    padding:10px 0;
    border:none;
    border-radius:999px;
    background:#3F3F3F;
    color:#FFFFFF;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

/* ========== CREATE GROUP SCREEN ========== */
.create-group-screen{
    display:none;
    position:relative;          /* ВАЖНО: чтобы .back-btn была у верхнего края экрана */
    min-height:100vh;
    padding:0 24px 40px;
    background-color:#1C1C1C;
    color:#FFFFFF;
    box-sizing:border-box;
}

.create-group-header{
    margin-top:96px;
    margin-bottom:32px;
    text-align:center;
}
.create-group-role-label{
    width:100%;
    max-width:360px;
    margin:8px auto 8px;
    font-size:14px;
    color:#FFFFFF;
}
.create-group-role{
    width:100%;
    max-width:360px;
    margin:0 auto 16px;
    display:flex;
    justify-content:space-between;
}
.radio-option{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}
.radio-option input{
    display:none;
}
.radio-circle{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #FFFFFF;
    box-sizing:border-box;
    position:relative;
}
.radio-option input:checked + .radio-circle::after{
    content:'';
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:#FFFFFF;
}
.create-group-age-field{
    width:100%;
    max-width:360px;
    margin:0 auto 24px;
}
.create-group-form .btn-primary{
    max-width:360px;
    width:100%;
    display:block;
    margin:24px auto 0;
}

/* ========== CHAT MESSAGES / MEDIA / REPLY / FILES ========== */
/* Сообщения: мягкий "подъём" и fade-in */
.msg-item{
    display:block;
    padding:2px 12px;
    margin-bottom:4px;
    opacity:0;
    transform:translateY(6px) scale(0.98);
    transition:
        opacity 0.22s ease-out,
        transform 0.22s cubic-bezier(.25,.8,.25,1),
        filter 0.14s ease-out;
}
.msg-item.msg-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}
.msg-item.msg-item-pressed{
    transform:scale(0.97);
    filter:brightness(1.03);
    position:relative;
    z-index:101;
}
.msg-item.msg-me{
    text-align:right;
}
.msg-item.msg-other{
    text-align:left;
}
.msg-col{
    display:inline-block;
    max-width:60vw;
    text-align:left;
}
.msg-bubble{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:12px 14px 6px;
    border-radius:18px;
    font-size:15px;
    background-color:#222222;
    color:#FFFFFF;
}
.msg-item.msg-me .msg-bubble{
    background-color:#3BA9FF;
    color:#000000;
}
/* временное (ещё не подтверждённое сервером) сообщение */
.msg-item.msg-pending .msg-bubble{
    opacity:0.9;
}
.msg-item.msg-pending .msg-meta{
    opacity:0.7;
}

.msg-sender-name{
    font-size:12px;
    font-weight:600;
    margin-bottom:4px;
}
.msg-text{
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
}
.msg-meta{
    margin-top:2px;
    font-size:11px;
    opacity:0.8;
    text-align:right;
}
.msg-edited{
    margin-left:4px;
}
.msg-checks{
    margin-left:4px;
}
.msg-reactions{
    margin-top:4px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    font-size:12px;
}
.msg-reaction{
    padding:2px 6px;
    border-radius:999px;
    background-color:rgba(0,0,0,0.2);
    color:#FFFFFF;
    transition:
        transform 0.12s ease-out,
        background-color 0.12s ease-out,
        box-shadow 0.12s ease-out,
        border-color 0.12s ease-out;
}
.msg-item.msg-me .msg-reaction{
    background-color:rgba(255,255,255,0.5);
    color:#000000;
}
.msg-reaction.my{
    border:1px solid #3BA9FF;
    transform:scale(1.06);
    box-shadow:0 0 0 1px rgba(59,169,255,0.4);
}
.msg-reaction.my:active{
    transform:scale(0.96);
}

/* reply */
.reply-block{
    margin-bottom:4px;
    padding:4px 8px;
    border-radius:10px;
    font-size:12px;
}
.msg-item.msg-other .reply-block{
    background-color:rgba(255,255,255,0.08);
}
.msg-item.msg-me .reply-block{
    background-color:rgba(0,0,0,0.12);
}
.reply-block-title{
    font-weight:600;
    margin-bottom:2px;
    opacity:0.9;
}
.reply-block-text{
    font-size:12px;
    opacity:0.9;
    white-space:normal;
    word-wrap:break-word;
    overflow-wrap:anywhere;
}
.msg-col > .reply-block:first-child{
    width:100%;
    box-sizing:border-box;
    padding:8px 12px;
    margin-bottom:0;
    border-radius:18px 18px 0 0;
    background-color:#000000;
}
.msg-item.msg-me .msg-col > .reply-block:first-child{
    background-color:#3BA9FF;
    color:#000000;
}
.msg-item.msg-me .msg-col > .reply-block:first-child .reply-block-title,
.msg-item.msg-me .msg-col > .reply-block:first-child .reply-block-text{
    color:#000000;
}
.msg-col > .reply-block:first-child + .msg-media-wrapper{
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.msg-col > .reply-block:first-child + .msg-bubble{
    border-top-left-radius:0;
    border-top-right-radius:0;
}

/* подсветка "кирпича" */
.msg-item.msg-highlight .msg-col{
    box-shadow:0 0 0 2px rgba(255,255,255,0.7);
    border-radius:22px;
}

/* "Непрочитанные" */
.msg-unread-separator{
    text-align:center;
    margin:8px 0;
}
.msg-unread-separator span{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    background-color:#2A2A2A;
    font-size:11px;
    color:#FFFFFF;
}

/* файлы в сообщении */
.msg-file-attachment{
    display:inline-block;
    padding:6px 10px;
    border-radius:10px;
    background-color:rgba(0,0,0,0.2);
    color:#FFFFFF;
    font-size:12px;
    margin-bottom:4px;
}
.msg-item.msg-me .msg-file-attachment{
    background-color:rgba(255,255,255,0.5);
    color:#000000;
}
.msg-file-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px;
}
.msg-file-size{
    font-size:11px;
    opacity:0.8;
    margin-top:2px;
}

/* медиа в сообщении */
.msg-media-wrapper{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    overflow:hidden;
    border-radius:18px 18px 0 0;
    border:none;
    background-color:transparent;
}
.msg-media-bg{
    position:absolute;
    inset:0;
    background-position:center;
    background-size:cover;
    filter:blur(18px);
    transform:scale(1.05);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s ease;
}
.msg-media-wrapper.with-blur{
    background-color:#000000;
}
.msg-media-wrapper.with-blur .msg-media-bg{
    opacity:1;
}
.msg-attachment-image,
.msg-attachment-video{
    position:relative;
    z-index:1;
    display:block;
    max-width:100%;
    height:auto;
    max-height:60vh;
    margin:0 auto;
    object-fit:contain;
    background-color:transparent;
}
.msg-col > .msg-media-wrapper + .msg-bubble{
    border-top-left-radius:0;
    border-top-right-radius:0;
}

/* таймер видео */
.msg-video-duration{
    position:absolute;
    left:6px;
    top:6px;
    padding:2px 6px;
    border-radius:8px;
    background:rgba(0,0,0,0.6);
    font-size:11px;
    color:#FFFFFF;
    z-index:2;
    pointer-events:none;
}

/* reply bar */
.reply-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:72px;
    padding:6px 16px;
    display:none;
    align-items:center;
    justify-content:space-between;
    background-color:rgba(0,0,0,0.7);
    backdrop-filter:blur(6px);
    z-index:19;
}
.reply-bar-content{
    max-width:80%;
}
.reply-bar-title{
    font-size:12px;
    font-weight:600;
    margin-bottom:2px;
    color:#3BA9FF;
}
.reply-bar-text{
    font-size:13px;
    color:#FFFFFF;
    opacity:0.9;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.reply-bar-cancel{
    width:24px;
    height:24px;
    border-radius:50%;
    border:none;
    background:none;
    color:#FFFFFF;
    font-size:18px;
    cursor:pointer;
}

/* attach preview */
.attach-preview-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:64px;
    padding:4px 8px;
    display:none;
    gap:6px;
    overflow-x:auto;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
    z-index:18;
}
.attach-preview-item{
    position:relative;
    width:60px;
    height:60px;
    border-radius:10px;
    overflow:hidden;
    background-color:#000000;
    flex-shrink:0;
}
.attach-preview-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.attach-preview-remove{
    position:absolute;
    top:2px;
    right:2px;
    width:18px;
    height:18px;
    border:none;
    border-radius:50%;
    background-color:rgba(0,0,0,0.7);
    color:#FFFFFF;
    font-size:12px;
    cursor:pointer;
}
.attach-preview-item.attach-preview-item-file{
    width:130px;
    height:auto;
    padding:4px 6px;
    border-radius:10px;
    background-color:#000000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}
.attach-preview-file-name{
    font-size:11px;
    color:#FFFFFF;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.attach-preview-file-size{
    font-size:10px;
    color:rgba(255,255,255,0.7);
    margin-top:2px;
}

/* pinned bar */
.pinned-top-bar{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    padding:4px 12px 6px;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    z-index:9;
    display:none;
    opacity:0;
    transform:translateY(-100%);
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}
.pinned-top-bar.pinned-visible{
    display:block;
    opacity:1;
    transform:translateY(0);
}

.pinned-top-label{
    font-size:11px;
    color:rgba(255,255,255,0.6);
    margin-bottom:2px;
}
.pinned-top-text{
    font-size:13px;
    color:#FFFFFF;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* edit message */
.msg-edit-wrapper{
    margin-top:4px;
}
.msg-edit-input{
    width:100%;
    min-height:60px;
    resize:vertical;
    box-sizing:border-box;
    border-radius:12px;
    border:none;
    padding:6px 8px;
    background-color:#1F1F1F;
    color:#FFFFFF;
    font-size:14px;
    font-family:inherit;
    outline:none;
}
.msg-edit-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:4px;
    gap:6px;
}
.msg-edit-btn{
    padding:4px 10px;
    border:none;
    border-radius:999px;
    font-size:12px;
    cursor:pointer;
}
.msg-edit-cancel{
    background-color:#2A2A2A;
    color:#FFFFFF;
}
.msg-edit-save{
    background-color:#3BA9FF;
    color:#000000;
}

/* ========== CONTEXT MENUS: ЧАТЫ / СООБЩЕНИЯ ========== */

/* Чаты: блюр фона + островок справа */
.chat-context-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    background:rgba(0,0,0,0.20);
    backdrop-filter:blur(8px);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease-out;
}
.chat-context-overlay.visible{
    opacity:1;
    pointer-events:auto;
}
.chat-context-menu{
    position:absolute;
    max-width:320px;
    min-width:220px;
    border-radius:16px;
    background-color:rgba(16,16,16,0.96);
    padding:8px 0;
    box-shadow:0 18px 60px rgba(0,0,0,0.7);
    z-index:102;

    transform:translate3d(0,8px,0) scale(0.96);
    transform-origin:top center;
    opacity:0;
    transition:
        transform 0.18s cubic-bezier(.25,.1,.25,1),
        opacity 0.18s ease-out;
}
.chat-context-menu.open{
    transform:translate3d(0,0,0) scale(1);
    opacity:1;
}
.chat-context-btn{
    width:100%;
    padding:12px 16px;
    border:none;
    background:transparent;
    color:#FFFFFF;
    font-size:15px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
}
.chat-context-btn:last-child{
    border-bottom:none;
}
.chat-context-btn-danger{
    color:#FF6B6B;
}
.chat-context-btn:active{
    background-color:#222222;
}

/* Сообщения: затемнение фона под сообщением, но не самого пузыря */
.msg-context-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    background:rgba(0,0,0,0.22);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease-out;
}
.msg-context-overlay.visible{
    opacity:1;
    pointer-events:auto;
}
.msg-context-menu{
    position:absolute;
    max-width:320px;
    min-width:220px;
    border-radius:16px;
    background-color:rgba(16,16,16,0.96);
    padding:8px 0 4px;
    box-shadow:0 18px 60px rgba(0,0,0,0.7);
    z-index:102;

    transform:translate3d(0,8px,0) scale(0.96);
    transform-origin:top right;
    opacity:0;
    transition:
        transform 0.18s cubic-bezier(.25,.1,.25,1),
        opacity 0.18s ease-out;
}
.msg-context-menu.open{
    transform:translate3d(0,0,0) scale(1);
    opacity:1;
}
.msg-context-btn{
    width:100%;
    padding:10px 16px;
    border:none;
    background:transparent;
    color:#FFFFFF;
    font-size:15px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
}
.msg-context-btn:last-of-type{
    border-bottom:none;
}
.msg-context-btn-danger{
    color:#FF6B6B;
}
.msg-context-btn:active{
    background-color:#222222;
}
.msg-context-emoji-row{
    display:flex;
    justify-content:space-around;
    padding:6px 0 4px;
}
.msg-context-emoji{
    font-size:20px;
    cursor:pointer;
}

/* media viewer */
.media-viewer{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.95);
    z-index:100;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}
.media-viewer.visible{
    display:flex;
}
.media-viewer-backdrop{
    position:absolute;
    inset:0;
}
.media-viewer-content{
    position:relative;
    z-index:101;
    max-width:100vw;
    max-height:100vh;
    width:100%;
    height:100%;
    display:flex;
    align-items:stretch;
    justify-content:center;
}
.media-viewer-chrome{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
}
.media-viewer-topbar{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px 0 4px;
    background:linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    z-index:2;
}
.media-viewer-close-btn{
    width:32px;
    height:32px;
    border-radius:16px;
    border:none;
    background:rgba(0,0,0,0.7);
    color:#FFFFFF;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.media-viewer-title{
    flex:1;
    text-align:center;
    font-size:14px;
    color:rgba(255,255,255,0.8);
    margin-right:32px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.media-viewer-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    position:relative; /* важно для лоадера */
}
.media-viewer-img,
.media-viewer-video{
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 140px);
    display:none;
    border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,0.7);
    background-color:#000000;
    object-fit:contain;
}

/* кастомный контролбар как на iOS */
.media-viewer-bottombar{
    height:80px;
    padding:8px 16px 20px;
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    box-sizing:border-box;
    transform:translateY(100%);
    opacity:0;
    pointer-events:none;
    transition:
        transform 0.25s cubic-bezier(.25,.8,.25,1),
        opacity 0.2s ease-out;
}
.media-viewer-bottombar.media-viewer-controls-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.media-viewer-playpause{
    width:40px;
    height:40px;
    border-radius:20px;
    border:none;
    background-color:rgba(0,0,0,0.75); /* тёмный фон */
    background-position:center;
    background-repeat:no-repeat;
    background-size:20px 20px;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.8);
}

/* Используем белые иконки, как в чат-голосовых */
.media-viewer-playpause.play{
    background-image:url("icons/play.png");
}
.media-viewer-playpause.pause{
    background-image:url("icons/pause.png");
}

.media-viewer-timeline{
    flex:1;
    display:flex;
    align-items:center;
}
.media-viewer-timeline-track{
    position:relative;
    width:100%;
    height:4px;
    border-radius:999px;
    background-color:rgba(255,255,255,0.25);
}
.media-viewer-timeline-fill{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    border-radius:999px;
    background-color:#FFFFFF;
}
.media-viewer-timeline-thumb{
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#FFFFFF;
    box-shadow:0 0 0 4px rgba(255,255,255,0.2);
}

.media-viewer-time{
    font-size:11px;
    color:rgba(255,255,255,0.8);
    font-variant-numeric:tabular-nums;
    margin-left:6px;
    min-width:78px;
    text-align:right;
}
.media-viewer-time span:first-child{
    margin-right:4px;
}

/* forward modal */
.forward-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
}
.forward-modal.visible{
    display:flex;
}
.forward-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}
.forward-card{
    position:relative;
    z-index:61;
    width:90%;
    max-width:360px;
    max-height:70vh;
    padding:16px 16px 12px;
    border-radius:16px;
    background-color:#101010;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
}
.forward-title{
    font-size:16px;
    font-weight:600;
    text-align:center;
    margin-bottom:8px;
}
.forward-list{
    flex:1;
    overflow-y:auto;
    margin-bottom:8px;
}
.forward-item{
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.1);
    margin-bottom:6px;
    cursor:pointer;
}
.forward-item-title{
    font-size:14px;
    font-weight:600;
}
.forward-item-subtitle{
    font-size:12px;
    color:rgba(255,255,255,0.6);
    margin-top:2px;
}
.forward-item.selected{
    border-color:#3BA9FF;
    background-color:rgba(59,169,255,0.12);
}
.forward-actions{
    display:flex;
    justify-content:space-between;
    gap:8px;
}
.forward-btn{
    flex:1;
    padding:8px 0;
    border:none;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.forward-btn-cancel{
    background-color:#2A2A2A;
    color:#FFFFFF;
}
.forward-btn-submit{
    background-color:#3BA9FF;
    color:#000000;
}
.forward-btn-submit:disabled{
    opacity:0.4;
    cursor:default;
}

/* feed screen (главный экран после входа) */
.feed-screen{
    display:none;
    min-height:100vh;
    background-color:#1C1C1C;
    color:#FFFFFF;
    padding:80px 16px 90px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:center;
}
.feed-list{
    width:100%;
    max-width:360px;
    margin:0 auto;
}
.feed-post{
    background-color:#101010;
    border-radius:16px;
    padding:12px 14px;
    margin:10px auto;
    transition:transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}
.feed-post-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:6px;
}
.feed-post-avatar-wrapper{
    width:28px;
    height:28px;
    border-radius:50%;
    overflow:hidden;
    background-color:#2A2A2A;
    margin-right:8px;
    flex-shrink:0;
}
.feed-post-avatar{
    width:100%;
    height:100%;
    object-fit:cover;
}
.feed-post-author{
    font-size:14px;
    font-weight:600;
}
.feed-post-text{
    font-size:14px;
    line-height:1.5;
    color:#FFFFFF;
    white-space:pre-wrap;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.feed-post-image{
    width:100%;
    border-radius:12px;
    margin-top:8px;
    object-fit:cover;
}

/* footer: лайк слева, дата справа */
.feed-post-footer{
    margin-top:6px;
    display:flex;
    align-items:center;
}
.feed-post-likes{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-top:0;
    margin-right:8px;
}
.feed-post-date{
    margin-left:auto;
    font-size:12px;
    color:rgba(255,255,255,0.6);
}

.feed-create-btn{
    position:fixed;
    left:16px;
    right:16px;
    bottom:90px;
    padding:12px 0;
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    font-size:15px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,0.7);
}
.feed-create-btn:active{
    opacity:0.85;
}

/* post modal */
.post-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
}
.post-modal.visible{
    display:flex;
}
.post-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}
.post-modal-card{
    position:relative;
    z-index:61;
    width:90%;
    max-width:360px;
    padding:20px 16px 16px;
    border-radius:16px;
    background-color:#101010;
    box-sizing:border-box;
    max-height:90vh;
    overflow-y:auto;
}
.post-modal-title{
    font-size:18px;
    font-weight:600;
    text-align:center;
    margin-bottom:12px;
}
.post-modal-field{
    margin-bottom:12px;
}
.post-modal-label{
    font-size:13px;
    color:rgba(255,255,255,0.7);
    margin-bottom:4px;
}
.post-modal-upload-btn{
    border:none;
    border-radius:999px;
    padding:8px 12px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    font-size:14px;
    cursor:pointer;
}
.post-modal-upload-btn:active{
    opacity:0.85;
}
.post-image-preview{
    margin-top:8px;
    border-radius:12px;
    overflow:hidden;
    background-color:#000000;
    max-height:45vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.post-image-preview img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
    object-fit:contain;
}
#postTextInput{
    width:100%;
    min-height:80px;
    resize:vertical;
    box-sizing:border-box;
    border-radius:12px;
    border:none;
    padding:8px 10px;
    background-color:#1F1F1F;
    color:#FFFFFF;
    font-size:14px;
    font-family:inherit;
    outline:none;
}
#postTextInput::placeholder{
    color:rgba(255,255,255,0.4);
}
.post-modal-actions{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
}
.post-modal-btn{
    flex:1;
    padding:8px 0;
    border:none;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.post-modal-cancel{
    margin-right:6px;
    background-color:#2A2A2A;
    color:#FFFFFF;
}
.post-modal-submit{
    margin-left:6px;
    background-color:#3BA9FF;
    color:#000000;
}

/* feed inline edit */
.feed-post-edit-wrapper{
    margin-top:8px;
}
.feed-post-edit-input{
    width:100%;
    min-height:80px;
    resize:vertical;
    box-sizing:border-box;
    border-radius:12px;
    border:none;
    padding:8px 10px;
    background-color:#1F1F1F;
    color:#FFFFFF;
    font-size:14px;
    font-family:inherit;
    outline:none;
}
.feed-post-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin-top:6px;
}
.feed-post-edit-btn{
    padding:6px 10px;
    border:none;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}
.feed-post-edit-cancel{
    background-color:#2A2A2A;
    color:#FFFFFF;
}
.feed-post-edit-delete{
    background-color:#FF3B30;
    color:#FFFFFF;
}
.feed-post-edit-save{
    background-color:#3BA9FF;
    color:#000000;
}

/* ========== ATTACHMENTS (МЕДИА / ФАЙЛЫ / АУДИО / УЧАСТНИКИ В МОДАЛКАХ) ========== */

.chat-attachments{
    margin-top:16px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.2);
    width:100%;
    min-height:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
.chat-attachments-tabs{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-bottom:6px;
}
.chat-attachments-tab{
    border:none;
    background:transparent;
    color:rgba(255,255,255,0.7);
    font-size:13px;
    padding:4px 0;
    position:relative;
    cursor:pointer;
}
.chat-attachments-tab-active{
    color:#FFFFFF;
}
.chat-attachments-tab-active::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:2px;
    border-radius:999px;
    background-color:#3BA9FF;
}
.chat-attachments-content{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    background-color:#000000;
    overflow:hidden;
}

/* Медиа 3×N до низа */
.chat-attachments-media-grid{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1px;
    background-color:#000000;
    overflow-y:auto;
}
.chat-media-item{
    position:relative;
    width:100%;
    padding-bottom:100%;
    overflow:hidden;
    background-color:#000000;
    cursor:pointer;
}
.chat-media-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.chat-media-video-icon{
    position:absolute;
    right:4px;
    bottom:4px;
    padding:2px 4px;
    border-radius:6px;
    background:rgba(0,0,0,0.6);
    font-size:10px;
}

/* файлы / аудио / участники до низа */
.chat-attachments-files-list,
.chat-attachments-audio-list,
.chat-attachments-members-list{
    flex:1 1 auto;
    overflow-y:auto;
    display:none;
    padding:4px 4px 0;
    box-sizing:border-box;
}

/* участники внутри вкладки */
.chat-attachments-members-list .group-members-list{
    margin-top:8px;
    max-height:none;
    overflow-y:auto;
}

/* файл/аудио item */
.chat-file-item{
    display:flex;
    align-items:center;
    padding:6px 8px;
    border-radius:8px;
    background-color:#2A2A2A;
    margin-bottom:4px;
    cursor:pointer;
}
.chat-file-item:last-child{
    margin-bottom:0;
}
.chat-file-icon{
    width:26px;
    height:26px;
    border-radius:6px;
    background-color:#3A3A3A;
    margin-right:8px;
    flex-shrink:0;
    position:relative;
}
.chat-file-icon::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:14px;
    height:14px;
    background-image:url("icons/upload.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:14px 14px;
    opacity:0.9;
}
.chat-file-icon.downloaded::before{
    opacity:0;
}
.chat-file-icon.downloaded{
    visibility:hidden;
}

.chat-audio-icon::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:14px;
    height:14px;
    background-image:url("icons/play.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:14px 14px;
    opacity:0.9;
}
.chat-audio-icon.playing::before{
    background-image:url("icons/pause.png");
}

.chat-file-main{
    flex:1;
    min-width:0;
}
.chat-file-name{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.chat-file-meta{
    font-size:11px;
    color:rgba(255,255,255,0.7);
    margin-top:2px;
}

/* переключение вкладок */
.chat-attachments-show-files .chat-attachments-media-grid{
    display:none;
}
.chat-attachments-show-files .chat-attachments-files-list{
    display:block;
}
.chat-attachments-show-files .chat-attachments-audio-list,
.chat-attachments-show-files .chat-attachments-members-list{
    display:none;
}

.chat-attachments-show-audio .chat-attachments-media-grid{
    display:none;
}
.chat-attachments-show-audio .chat-attachments-audio-list{
    display:block;
}
.chat-attachments-show-audio .chat-attachments-files-list,
.chat-attachments-show-audio .chat-attachments-members-list{
    display:none;
}

.chat-attachments-show-members .chat-attachments-members-list{
    display:block;
}
.chat-attachments-show-members .chat-attachments-media-grid,
.chat-attachments-show-members .chat-attachments-files-list,
.chat-attachments-show-members .chat-attachments-audio-list{
    display:none;
}

/* NETWORK BANNER */
.network-banner{
    position:fixed;
    left:50%;
    top:10px;
    transform:translateX(-50%) translateY(-6px);
    padding:6px 12px;
    border-radius:999px;
    background-color:rgba(255,59,48,0.95);
    color:#FFFFFF;
    font-size:12px;
    z-index:200;
    display:none;
    opacity:0;
    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out;
}
.network-banner.show{
    display:block;
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.network-banner.info{
    background-color:rgba(59,169,255,0.95);
}

/* ГЛОБАЛЬНОЕ СКРЫТИЕ СКРОЛЛБАРОВ — ТОЛЬКО НА МОБИЛЬНЫХ */
@media (max-width: 900px) {
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    *::-webkit-scrollbar {
        display: none;
    }
}

.orientation-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background-color:#000000;
    color:#FFFFFF;
    z-index:9999;
    font-size:16px;
    text-align:center;
    padding:0 24px;
}

/* На телефонах в landscape показываем заглушку 
@media (max-width: 900px) and (orientation: landscape) {
    .orientation-overlay{
        display:flex;
    }
}
*/

/* Упрощаем эффекты на мобильных (iOS/Android) */
@media (max-width: 900px) {
    .media-viewer,
    .chat-context-overlay,
    .msg-context-overlay,
    .reply-bar,
    .attach-preview-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .media-viewer{
        background: rgba(0,0,0,0.95) !important;
    }
    .chat-context-overlay{
        background: rgba(0,0,0,0.40) !important;
    }
    .msg-context-overlay{
        background: rgba(0,0,0,0.40) !important;
    }
    .reply-bar,
    .attach-preview-bar{
        background-color: rgba(0,0,0,0.85) !important;
    }

    /* Убираем размытие превью за медиа-сообщениями */
    .msg-media-bg{
        filter: none !important;
        opacity: 0 !important;
    }
}

.group-age{
    font-size:14px;
    color:rgba(255,255,255,0.7);
    margin-left:6px;
}
.group-age-editable{
    cursor:pointer;
}

.media-viewer-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    position:relative; /* важно для лоадера */
}

/* лоадер в центре видео */
.media-viewer-loader{
    position:absolute;
    left:50%;
    top:50%;
    width:40px;
    height:40px;
    margin-left:-20px;
    margin-top:-20px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.3);
    border-top-color:#FFFFFF;
    box-sizing:border-box;
    animation:media-loader-spin 0.8s linear infinite;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease-out;
}
.media-viewer-loader.show{
    opacity:1;
}

@keyframes media-loader-spin{
    to { transform: rotate(360deg); }
}

.feed-post-likes{
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.feed-like-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background-color:rgba(0,0,0,0.3);
    font-size:14px;
    cursor:pointer;
    user-select:none;
    transition:background-color 0.15s ease, transform 0.12s ease-out;
}

.feed-like-pill.liked{
    background-color:rgba(255,255,255,0.6);
    color:#000000;
}

.feed-like-pill:active{
    transform:scale(1.05);
}

/* скрывать пустые "пилюли" с ID / доп. инфой */
.profile-pill:empty,
.chat-user-pill:empty {
    display: none;
}

/* Голосовые у собеседника – белый кружок и тёмная "play" */
.msg-item.msg-other .msg-voice-play{
    background-color:#FFFFFF;
    border-color:#000000;
    background-image:url("icons/play.png");
}
.msg-item.msg-other .msg-voice-play.playing{
    background-image:url("icons/pause.png");
}

.media-msg-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:none;
    z-index:95;
}
.media-msg-overlay.visible{
    display:block;
}

/* превью поверх чата */
.media-msg-preview{
    position:fixed;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,0.8);
    transition:
        top 0.22s ease-out,
        left 0.22s ease-out,
        width 0.22s ease-out,
        height 0.22s ease-out,
        opacity 0.22s ease-out;
}

/* меню под превью */
.media-msg-menu{
    position:fixed;
    left:50%;
    transform:translateX(-50%) translateY(8px);
    width:90vw;
    max-width:360px;
    border-radius:16px;
    background-color:#101010;
    box-shadow:0 18px 60px rgba(0,0,0,0.7);
    overflow:hidden;
    opacity:0;
    transition:opacity 0.22s ease-out, transform 0.22s ease-out;
}
.media-msg-overlay.visible .media-msg-menu{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.media-msg-menu-btn{
    width:100%;
    padding:12px 16px;
    border:none;
    background:transparent;
    color:#FFFFFF;
    font-size:15px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
}
.media-msg-menu-btn:last-child{
    border-bottom:none;
}
.media-msg-menu-btn-danger{
    color:#FF6B6B;
}

/* при открытом media‑меню скрываем оригинальный медиа‑элемент в сообщении */
.msg-item.msg-media-hidden .msg-media-wrapper{
    visibility:hidden;
}

/* Плавное появление чатов и постов */
.chat-item,
.feed-post {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.22s ease-out,
        transform 0.22s cubic-bezier(.25,.8,.25,1),
        background-color 0.14s ease-out,
        box-shadow 0.14s ease-out;
}
.chat-item.chat-item-visible,
.feed-post.feed-post-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация основных экранов */
@keyframes screenFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.feed-screen,
.main-screen,
.profile-screen,
.create-group-screen {
    animation: screenFadeSlideUp 0.26s cubic-bezier(.25,.8,.25,1);
}

/* Плавное открытие карточек модалок: пост и пересылка */
.post-modal-card,
.forward-card {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition:
        opacity 0.24s ease-out,
        transform 0.24s cubic-bezier(.25,.8,.25,1);
}
.post-modal.visible .post-modal-card,
.forward-modal.visible .forward-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.profile-admin-btn{
    margin:12px auto 0;
    max-width:260px;
    width:100%;
    padding:10px 0;
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}
.profile-admin-btn:active{
    opacity:0.85;
}

/* ADMIN SCREEN */
.admin-screen{
    display:none;
    min-height:100vh;
    background-color:#1C1C1C;
    color:#FFFFFF;
    padding:80px 16px 90px;
    box-sizing:border-box;
}
.admin-content{
    max-width:480px;
    margin:0 auto;
}
.admin-db-select{
    margin:16px 0;
    font-size:14px;
}
.admin-db-select select{
    margin-left:8px;
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:14px;
    outline:none;
}
.admin-sql-wrapper{
    margin:12px 0;
}
#adminSqlInput{
    width:100%;
    min-height:120px;
    border-radius:12px;
    border:none;
    padding:8px 10px;
    background-color:#1F1F1F;
    color:#FFFFFF;
    font-size:14px;
    font-family:monospace;
    outline:none;
    resize:vertical;
}
.admin-sql-result{
    margin-top:12px;
    padding:8px 10px;
    border-radius:12px;
    background-color:#000000;
    color:#FFFFFF;
    font-size:13px;
    font-family:monospace;
    max-height:260px;
    overflow:auto;
    white-space:pre-wrap;
    word-break:break-word;
}

/* UI-редактор таблиц */
.admin-table-selects{
    margin:8px 0 12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:13px;
}
.admin-table-selects label{
    display:flex;
    align-items:center;
    gap:4px;
}
.admin-table-selects select{
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    outline:none;
}
.admin-table-container{
    margin-top:8px;
    padding:8px;
    border-radius:12px;
    background-color:#000000;
    max-height:360px;
    overflow:auto;
    font-size:12px;
}
.admin-table{
    width:100%;
    border-collapse:collapse;
}
.admin-table th,
.admin-table td{
    border:1px solid rgba(255,255,255,0.15);
    padding:4px 6px;
    vertical-align:top;
}
.admin-table th{
    position:sticky;
    top:0;
    background-color:#111111;
    z-index:1;
}
.admin-table-input{
    width:100%;
    min-width:60px;
    border:none;
    border-radius:4px;
    background-color:#151515;
    color:#FFFFFF;
    font-size:11px;
    padding:2px 4px;
    font-family:inherit;
    box-sizing:border-box;
}
.admin-table-input[disabled]{
    opacity:0.7;
}
.admin-table-row-actions{
    white-space:nowrap;
}
.admin-table-small-btn{
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    padding:2px 8px;
    font-size:11px;
    cursor:pointer;
    margin-left:2px;
}
.admin-table-small-btn:active{
    opacity:0.85;
}
.admin-table-newrow-label{
    margin-top:8px;
    font-size:12px;
    color:rgba(255,255,255,0.8);
}

.admin-users-controls{
    margin:8px 0 12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:13px;
}
.admin-users-controls input{
    flex:1;
    min-width:140px;
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    outline:none;
}
.admin-users-controls select{
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    outline:none;
}
.admin-users-reload-btn{
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    padding:4px 12px;
    font-size:13px;
    cursor:pointer;
}
.admin-users-reload-btn:active{
    opacity:0.85;
}
.admin-users-list{
    margin-top:4px;
    padding:8px;
    border-radius:12px;
    background-color:#000000;
    max-height:260px;
    overflow:auto;
    font-size:12px;
}
.admin-user-card{
    border-radius:10px;
    background-color:#151515;
    padding:8px;
    margin-bottom:6px;
}
.admin-user-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:4px;
}
.admin-user-login{
    font-weight:600;
}
.admin-user-publicid{
    font-size:11px;
    color:rgba(255,255,255,0.7);
}
.admin-user-name{
    font-size:13px;
    margin-bottom:2px;
}
.admin-user-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    font-size:12px;
}
.admin-user-meta label{
    display:flex;
    align-items:center;
    gap:4px;
}
.admin-user-meta select,
.admin-user-meta input{
    padding:2px 6px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#101010;
    color:#FFFFFF;
    font-size:12px;
    font-family:inherit;
    outline:none;
}
.admin-user-save-btn{
    margin-left:auto;
    border:none;
    border-radius:999px;
    background-color:#3BA9FF;
    color:#000000;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}
.admin-user-save-btn:active{
    opacity:0.85;
}

/* AUDIT LOG */
.admin-audit-controls{
    margin:8px 0 12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:13px;
}
.admin-audit-controls input{
    flex:1;
    min-width:160px;
    padding:4px 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    outline:none;
}
.admin-audit-list{
    margin-top:4px;
    padding:8px;
    border-radius:12px;
    background-color:#000000;
    max-height:260px;
    overflow:auto;
    font-size:12px;
}
.admin-audit-entry{
    border-bottom:1px solid rgba(255,255,255,0.15);
    padding:4px 0;
}
.admin-audit-entry:last-child{
    border-bottom:none;
}
.admin-audit-line1{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:rgba(255,255,255,0.7);
}
.admin-audit-line2{
    font-size:12px;
}
.admin-audit-details{
    font-size:11px;
    color:rgba(255,255,255,0.7);
}

.admin-2fa-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:8px;
}
.admin-2fa-btn{
    border:none;
    border-radius:999px;
    background-color:#3F3F3F;
    color:#FFFFFF;
    padding:6px 12px;
    font-size:13px;
    cursor:pointer;
}
.admin-2fa-btn-danger{
    background-color:#FF3B30;
}
.admin-2fa-btn:active{
    opacity:0.85;
}

.admin-2fa-setup{
    margin-top:4px;
    padding:8px 10px;
    border-radius:12px;
    background-color:#000000;
    font-size:12px;
}
.admin-2fa-secret-line{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-bottom:4px;
}
.admin-2fa-secret{
    padding:2px 6px;
    border-radius:6px;
    background-color:#151515;
    font-family:monospace;
    font-size:11px;
}
.admin-2fa-hint{
    font-size:11px;
    color:rgba(255,255,255,0.7);
    margin-bottom:4px;
}

.admin-table-filter-input{
    width:100%;
    min-width:60px;
    border:none;
    border-radius:4px;
    background-color:#101010;
    color:#FFFFFF;
    font-size:11px;
    padding:2px 4px;
    font-family:inherit;
    box-sizing:border-box;
}

.admin-table-selects input[type="number"]{
    padding:4px 6px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background-color:#151515;
    color:#FFFFFF;
    font-family:inherit;
    font-size:13px;
    outline:none;
}

.install-screen{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:flex-start;
    justify-content:center;
    background-color:#1C1C1C;
    color:#FFFFFF;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.install-content{
    width:100%;
    max-width:480px;
    margin:80px auto 40px;
    padding:0 16px 24px;
    box-sizing:border-box;
}
.install-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:8px;
    text-align:left;
}
.install-subtitle{
    font-size:14px;
    color:rgba(255,255,255,0.8);
    margin-bottom:16px;
}
.install-steps{
    border-radius:16px;
    background-color:#101010;
    padding:12px 12px 8px;
    margin-bottom:16px;
}
.install-step{
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.install-step:last-child{
    border-bottom:none;
}
.install-step-title{
    font-size:13px;
    font-weight:600;
    margin-bottom:2px;
}
.install-step-text{
    font-size:13px;
    color:rgba(255,255,255,0.85);
}
.install-install-btn{
    width:100%;
    max-width:360px;
    margin:0 auto 8px;
    display:block;
}
.install-continue-btn{
    width:100%;
    max-width:360px;
    margin:4px auto 8px;
    display:block;
}
.install-dontshow{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:rgba(255,255,255,0.75);
    margin-top:8px;
}
.install-dontshow input{
    width:14px;
    height:14px;
}
.install-note{
    margin-top:8px;
    font-size:11px;
    color:rgba(255,255,255,0.6);
}

.admin-table-small-btn-danger{
    background-color:#FF3B30;
}

/* Разрешаем копирование/выделение текста в админских списках и логах */
.admin-users-list,
.admin-users-list * ,
.admin-audit-list,
.admin-audit-list * ,
.admin-sql-result,
.admin-sql-result * ,
.admin-table-container,
.admin-table-container * ,
.admin-2fa-secret {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

.msg-text a,
.msg-link {
    color: #ffd93d;          /* можно подобрать свой цвет */
    text-decoration: underline;
    word-break: break-all;   /* чтобы длинные ссылки переносились */
}
.msg-item.msg-me .msg-text a,
.msg-item.msg-me .msg-link {
    color: #0040a0;          /* цвет ссылок в своих сообщениях (фон голубой) */
}