/* ==========================================================
   style_fix.css — правки поверх style.css
   Подключается ПОСЛЕ style.css
   ========================================================== */

/* ---------- 0. ГЕОМЕТРИЯ ЭКРАНА ---------- */
:root{
    --head-pad: 0px;
    --input-pad: 0px;
    --use-safe: 1;

    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sat-on: calc(var(--sat) * var(--use-safe));
    --sab-on: calc(var(--sab) * var(--use-safe));
}

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* position/top/height у .app-container и .auth-container теперь
   выставляет инлайн-скрипт в index.html (через !important) —
   здесь оставляем только внутреннюю раскладку, без размеров/позиции */
@media (max-width:768px){
    body{ background:#fff; }

    .app-container{
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
        display: flex;
    }
    .auth-container{
        border-radius: 0;
        overflow-y: auto;
    }

    .sidebar, .chat-area{
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .sidebar-header, .search-box, .chat-header, .input-area{ flex-shrink: 0; }
    .user-list{ min-height: 0; }
    .messages-container{ flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.chat-header    { padding-top: calc(var(--head-pad) + var(--sat-on)) !important; }
    .sidebar-header { padding-top: calc(var(--head-pad) + 2px + var(--sat-on)) !important; }
    .input-area     { padding-bottom: var(--input-pad) !important; }
    #selection-bar  { padding-top: calc(12px + var(--sat-on)) !important; }


}

/* ---------- 1.1 ПЕРЕНОСЫ СТРОК В ТЕКСТЕ СООБЩЕНИЯ ---------- */
/* ---------- 1.1 ПЕРЕНОСЫ СТРОК В ТЕКСТЕ СООБЩЕНИЯ ---------- */
.message-content{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- 1.2 ПОМЕТКА «ИЗМ.» У ОТРЕДАКТИРОВАННЫХ СООБЩЕНИЙ ---------- */
.msg-edited-tag{
    font-size: 0.67em;      /* примерно на треть меньше основного текста времени */
    opacity: 0.85;
}

/* ---------- 2. ЦИТАТА / ПЕРЕСЫЛКА / АВТОР ---------- */
.msg-author{ font-size:12px; font-weight:600; color:#3390ec; display:block; margin-bottom:2px; }

.msg-author.robot{ color:#2bba9a; }
.msg-forwarded{ font-size:11.5px; color:#2bba9a; font-weight:600; margin-bottom:3px; }

.msg-quote{
    border-left:3px solid #3390ec; padding:3px 8px; margin:2px 0 5px;
    background:rgba(51,144,236,.09); border-radius:0 6px 6px 0; cursor:pointer;
    max-width:100%;
}
.msg-quote-name{ display:block; font-size:11.5px; font-weight:600; color:#3390ec; }
.msg-quote-text{
    display:block; font-size:13px; color:#5b6b7a;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.dark .msg-quote{ background:rgba(51,144,236,.16); }
body.dark .msg-quote-text{ color:#9fb0c0; }

/* ---------- 3. МЕДИА ---------- */
.msg-image{
    max-width:100%; max-height:260px; border-radius:8px;
    display:block; margin:2px 0; cursor:pointer; object-fit:cover;
}
.msg-file{ display:flex; align-items:center; gap:8px; padding:2px 0; }
.msg-file-icon{ font-size:22px; }
.msg-file a{ color:#2481cc; font-weight:500; text-decoration:none; overflow-wrap:anywhere; }

/* ---------- 4. РЕАКЦИИ ---------- */
.msg-reactions{ display:flex; flex-wrap:wrap; gap:4px; margin:5px 0 0; }
.reaction-chip{
    display:flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:11px; border:none; cursor:pointer;
    background:rgba(51,144,236,.11); font-size:13px; line-height:1.2;
}
.reaction-chip.mine{ background:rgba(51,144,236,.26); box-shadow:inset 0 0 0 1.5px rgba(51,144,236,.5); }
.reaction-chip:active{ transform:scale(.92); }
.reaction-emoji{ font-size:14px; }
.reaction-count{ font-size:11.5px; font-weight:700; color:#2f7fcf; }
body.dark .reaction-chip{ background:rgba(51,144,236,.2); }

/* ---------- 5. АВАТАРКА АКТИВНОГО КОНТАКТА ---------- */
.user-item.active .user-avatar{
    background: unset !important;
    background-color:#fff !important;
    color:#3390ec !important;
}
.user-item.active .user-avatar[style*="background-image"]{
    background-color:transparent !important;
}
.avatar-wrap{ position:relative; flex-shrink:0; }
.online-dot{
    display:none; position:absolute; right:0; bottom:0;
    width:13px; height:13px; border-radius:50%;
    background:#2bba5a; border:2.5px solid #fff;
}
body.dark .online-dot{ border-color:#18181c; }
.user-item.active .online-dot{ border-color:#3390ec; }

/* ---------- 6. БЛОКИРОВКА ВЫДЕЛЕНИЯ В ЧАТЕ ---------- */
.messages-container, .messages-container *{
    -webkit-user-select:none !important; user-select:none !important;
    -webkit-touch-callout:none !important;
}
.messages-container img{ pointer-events:auto; }

/* ---------- 7. ПОЛЕ ВВОДА ---------- */

#msg-input[contenteditable]{
    flex:1; min-height:22px; max-height:110px; overflow-y:auto;
    padding:7px 0; font-size:16px; line-height:1.35;
    outline:none; border:none; background:transparent;
    color:#212121; overflow-wrap:anywhere; white-space:pre-wrap;
    -webkit-user-select:text !important; user-select:text !important;
}

#msg-input[contenteditable]:empty:before{
    content:attr(data-placeholder); color:#8b959e;
    pointer-events:none; display:block;
}
body.dark #msg-input[contenteditable]{ color:#fff; }

/* ---------- 8. КОНТЕКСТНОЕ МЕНЮ ---------- */
#msg-ctx-backdrop{ position:fixed; inset:0; z-index:2500; }
#msg-ctx-menu{
    position:fixed; z-index:2600; min-width:190px;
    max-height: 70dvh;
    overflow-y:auto;
    background:#fff; border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.22);
    opacity:0; transform:scale(.94); transform-origin:top center;
    transition:opacity .13s, transform .13s;
}
#msg-ctx-menu.visible{ opacity:1; transform:scale(1); }
.msg-ctx-item{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:12px 15px; border:none; background:none;
    font-size:15px; color:#212121; cursor:pointer; text-align:left;
}
.msg-ctx-item:hover{ background:#f4f4f5; }
.msg-ctx-item.danger{ color:#e53935; }
.msg-ctx-icon{ width:20px; text-align:center; font-size:16px; color:#3390ec; }
.msg-ctx-item.danger .msg-ctx-icon{ color:#e53935; }
body.dark #msg-ctx-menu{ background:#242429; }
body.dark .msg-ctx-item{ color:#f0f0f2; }
body.dark .msg-ctx-item:hover{ background:#2f2f36; }

#msg-ctx-menu.emoji-mode{ min-width:258px; }
.emoji-head{
    display:flex; align-items:center; gap:6px;
    padding:8px 12px; font-size:13px; font-weight:600; color:#8b959e;
    border-bottom:1px solid #f0f0f2;
}
.emoji-back{ background:none; border:none; font-size:21px; color:#3390ec; cursor:pointer; padding:0 4px; }
.emoji-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:7px; }
.emoji-btn{
    background:none; border:none; cursor:pointer;
    font-size:24px; line-height:1; padding:7px 0; border-radius:10px;
}
.emoji-btn:hover{ background:#f0f6fc; }
.emoji-btn:active{ transform:scale(1.22); }
.emoji-btn.active{ background:rgba(51,144,236,.2); }
body.dark .emoji-head{ border-bottom-color:#2f2f36; }
body.dark .emoji-btn:hover{ background:#2f2f36; }

/* ---------- 9. ОТВЕТ / ВЫБОР / TOAST ---------- */
#reply-bar{
    display:flex; align-items:center; gap:9px;
    padding:6px 10px; background:#f0f6fc; border-radius:10px;
    border-left:3px solid #3390ec; margin-bottom:6px;
}
.reply-bar-icon{ color:#3390ec; font-size:16px; flex-shrink:0; }
.reply-bar-body{ flex:1; min-width:0; cursor:pointer; }
.reply-bar-name{ font-size:12.5px; font-weight:600; color:#3390ec; }
.reply-bar-text{ font-size:13px; color:#5b6b7a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar-close{ background:none; border:none; color:#8b959e; font-size:16px; cursor:pointer; padding:2px 5px; }
body.dark #reply-bar{ background:#1f2733; }

.msg-check{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    border:2px solid #c3c9d1; display:flex; align-items:center; justify-content:center;
    color:transparent;
}
.msg-check.checked{ background:#3390ec; border-color:#3390ec; color:#fff; }

#min-toast{
    position:fixed; left:50%; transform:translate(-50%,20px);
    bottom:calc(88px + var(--sab)); z-index:4000;
    background:rgba(20,22,26,.92); color:#fff;
    padding:10px 19px; border-radius:22px; font-size:14px;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    max-width:80vw; text-align:center;
}
#min-toast.visible{ opacity:1; transform:translate(-50%,0); }

/* ---------- 10. ПЕРЕСЫЛКА ---------- */
.forward-content{ width:400px; max-width:calc(100vw - 32px); }
.forward-list{
    max-height:46vh; overflow-y:auto; margin-bottom:12px;
    border:1px solid #ececf0; border-radius:10px;
}
.forward-row{
    display:flex; align-items:center; gap:12px; padding:9px 12px;
    cursor:pointer; border-bottom:1px solid #f4f4f7;
}
.forward-row:last-child{ border-bottom:none; }
.forward-row:hover{ background:#f4f8fd; }
.forward-row .user-avatar{ width:40px; height:40px; font-size:15px; }
.forward-row-body{ min-width:0; }
.forward-row-title{ font-size:15px; font-weight:500; color:#212121; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forward-row-sub{ font-size:12.5px; color:#8b959e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forward-empty{ padding:20px; text-align:center; color:#8b959e; }
body.dark .forward-list{ border-color:#2b2b31; }
body.dark .forward-row{ border-bottom-color:#232329; }
body.dark .forward-row-title{ color:#fff; }

/* ---------- 11. СВАЙП НАЗАД ---------- */
.app-container{ overscroll-behavior:contain; }
.messages-container{ overscroll-behavior-y:contain; touch-action:pan-y; }
.chat-area{ position:relative; }
.app-container.chat-open.swiping #app-sidebar{
    display:flex !important; position:absolute; inset:0; z-index:0;
}
.app-container.chat-open.swiping #app-chat-area{
    position:relative; z-index:1; will-change:transform;
    box-shadow:-10px 0 30px rgba(0,0,0,.18);
}

/* ---------- 12. НОВОЕ: ПЛЮС / ШЕСТЕРЁНКА / НАСТРОЙКИ / ИНВАЙТ ---------- */
.plus-btn{
    display:flex !important; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:#f0f6fc; color:#3390ec; border:none; cursor:pointer; padding:0;
    transition:background .2s, transform .1s;
}
.plus-btn:hover{ background:#e2eefb; }
.plus-btn:active{ transform:scale(.92); }
body.dark .plus-btn{ background:#26262b; color:#8ecbff; }

#self-settings-btn{ display:none; }

.settings-list{ display:flex; flex-direction:column; gap:2px; margin:12px 0 6px; }
.settings-list .tg-switch-row{ padding:9px 2px; }
.settings-link-btn{
    background:none; border:none; cursor:pointer;
    color:#3390ec; font-size:15px; font-weight:500;
    text-align:left; padding:11px 2px; border-radius:8px;
}
.settings-link-btn:hover{ background:#f4f8fd; }
.settings-link-btn.danger{ color:#e53935; }
.settings-link-btn.danger:hover{ background:#fff2f2; }
body.dark .settings-link-btn:hover{ background:#26262b; }
body.dark .settings-link-btn.danger:hover{ background:#2a1a1c; }

.invite-gen-btn{
    margin-top:14px; width:100%; padding:12px;
    border:none; border-radius:12px; cursor:pointer;
    background:#f0f6fc; color:#3390ec; font-size:14.5px; font-weight:600;
    transition:background .2s, transform .1s;
}
.invite-gen-btn:hover{ background:#e2eefb; }
.invite-gen-btn:active{ transform:scale(.98); }
.invite-gen-btn:disabled{ opacity:.6; cursor:default; }
body.dark .invite-gen-btn{ background:#26262b; color:#8ecbff; }

.invite-hint{
    margin-top:8px; font-size:12.5px; color:#8b959e;
    line-height:1.45; text-align:center; min-height:1px;
}

/* ---------- 12.5 ШЛЮЗ ЗВУКА ДЛЯ ЗВОНКОВ ИЗ PUSH ---------- */
#call-audio-gate{
    position: fixed; inset: 0; z-index: 5000;
    background: linear-gradient(160deg,#1c2733 0%,#111418 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; color: #fff; text-align: center; padding: 24px;
    cursor: pointer;
}
.audio-gate-icon{
    font-size: 64px; animation: audioGatePulse 1.4s ease-in-out infinite;
}
@keyframes audioGatePulse{
    0%,100%{ transform: scale(1); }
    50%    { transform: scale(1.12); }
}
.audio-gate-title{ font-size: 22px; font-weight: 700; }
.audio-gate-sub{ font-size: 15px; color: rgba(255,255,255,.75); }
.audio-gate-close{
    position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.15); color: #fff; font-size: 18px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- 13. МОБИЛЬНОЕ ---------- */
@media (max-width:768px){
    .message-bubble{ max-width:85%; font-size:15.5px; }
    .msg-quote-text{ max-width:200px; }
    .forward-content{ width:100%; }
    #msg-ctx-menu{ min-width:200px; }
}