/* ==========================================================
   style_tg.css — Telegram-стиль: меню, шторка настроек,
   модалки, профиль группы. Подключается ПОСЛЕ style_fix.css
   ========================================================== */

/* ---------- ПЛАВНАЯ АНИМАЦИЯ МОДАЛОК ---------- */
.modal-backdrop.anim .tg-card,
.modal-backdrop.anim .profile-sheet,
.modal-backdrop.anim .modal-content{
    transition: opacity .22s ease, transform .22s cubic-bezier(.32,.72,.35,1);
}
.modal-backdrop.anim:not(.show) .tg-card,
.modal-backdrop.anim:not(.show) .profile-sheet,
.modal-backdrop.anim:not(.show) .modal-content{
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
}

/* ---------- ВЕРХНЯЯ ШТОРКА (НАСТРОЙКИ) ---------- */
#app-settings-modal{ align-items:flex-start; justify-content:center; }
#app-settings-modal .top-sheet{
    width: min(480px, 100%);
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    max-height: 92vh; overflow-y: auto;
    transform: translateY(-104%);
    transition: transform .3s cubic-bezier(.32,.72,.35,1);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
#app-settings-modal.show .top-sheet{ transform: none; }
body.dark #app-settings-modal .top-sheet{ background: #1c1c21; }

.sheet-grabber{ width: 44px; height: 5px; border-radius: 3px; background: #d8dee4; margin: 8px auto 4px; }
body.dark .sheet-grabber{ background: #3a3f46; }

.settings-head{ display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.settings-avatar{
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; font-weight: 600;
}
.settings-head-info{ flex: 1; min-width: 0; }
.settings-name{ font-size: 17px; font-weight: 700; color: #212121; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-email{ font-size: 13.5px; color: #8b959e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .settings-name{ color: #fff; }

.sheet-close{
    width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
    background: #f0f2f5; color: #707579; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .1s;
}
.sheet-close:hover{ background: #e4e8ec; }
.sheet-close:active{ transform: scale(.92); }
body.dark .sheet-close{ background: #26262b; color: #a1a1aa; }

.sheet-list{ display: flex; flex-direction: column; padding: 4px 8px 8px; }
.sheet-row{
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 10px; border: none; background: none; cursor: pointer;
    font-size: 15.5px; color: #212121; text-align: left; border-radius: 12px;
    font-family: inherit;
}
.sheet-row:hover{ background: #f4f6f9; }
.sheet-row .sheet-ico{ width: 24px; height: 24px; color: #8b959e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sheet-row .sheet-text{ flex: 1; }
.sheet-row .tg-switch{ margin-left: auto; }
.sheet-row.danger{ color: #e53935; }
.sheet-row.danger .sheet-ico{ color: #e53935; }
.sheet-row.danger:hover{ background: #fff2f2; }
body.dark .sheet-row{ color: #e8eaed; }
body.dark .sheet-row:hover{ background: #26262b; }
body.dark .sheet-row.danger:hover{ background: #2a1a1c; }
.sheet-sep{ height: 1px; background: #ececf0; margin: 6px 10px; }
body.dark .sheet-sep{ background: #2b2b31; }

/* ---------- КАРТОЧКИ МОДАЛОК (Telegram-стиль) ---------- */
.tg-card{
    background: #fff; border-radius: 18px; padding: 26px 22px 16px;
    width: 380px; max-width: calc(100vw - 28px);
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    display: flex; flex-direction: column; align-items: stretch;
    max-height: 90vh; overflow-y: auto;
}
.tg-card-wide{ width: 420px; }
body.dark .tg-card{ background: #1f1f24; }

.tg-card-icon{
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
    background: #e8f2fd; color: #3390ec;
    display: flex; align-items: center; justify-content: center;
}
body.dark .tg-card-icon{ background: #22344a; color: #8ecbff; }

.tg-card-title{ text-align: center; font-size: 19px; font-weight: 700; color: #212121; margin-bottom: 6px; }
body.dark .tg-card-title{ color: #fff; }
.tg-card-sub{ text-align: center; font-size: 13.5px; color: #8b959e; line-height: 1.45; margin-bottom: 16px; }

.tg-field{ margin-bottom: 14px; }
.tg-field input{
    width: 100%; padding: 13px 14px; font-size: 15.5px;
    border: 1.5px solid #dfe4ea; border-radius: 12px; outline: none;
    background: #fff; color: #212121; transition: border-color .2s, box-shadow .2s;
}
.tg-field input:focus{ border-color: #3390ec; box-shadow: 0 0 0 3px rgba(51,144,236,.15); }
body.dark .tg-field input{ background: #26262b; border-color: #3a3f46; color: #fff; }
body.dark .tg-field input:focus{ border-color: #3390ec; }

.tg-primary{
    width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
    background: #3390ec; color: #fff; font-size: 15.5px; font-weight: 600;
    transition: background .2s, transform .1s; font-family: inherit;
}
.tg-primary:hover{ background: #2b83d8; }
.tg-primary:active{ transform: scale(.98); }
.tg-primary-sm{ width: auto; padding: 10px 18px; font-size: 14px; flex-shrink: 0; }

.tg-ghost{
    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; font-family: inherit;
}
.tg-ghost:hover{ background: #e2eefb; }
.tg-ghost:active{ transform: scale(.98); }
.tg-ghost:disabled{ opacity: .6; cursor: default; }
body.dark .tg-ghost{ background: #26262b; color: #8ecbff; }

.tg-cancel{
    margin-top: 10px; width: 100%; padding: 11px; border: none; border-radius: 12px;
    background: none; color: #707579; font-size: 14.5px; cursor: pointer; font-family: inherit;
    transition: background .2s;
}
.tg-cancel:hover{ background: #f4f4f5; }
body.dark .tg-cancel{ color: #a1a1aa; }
body.dark .tg-cancel:hover{ background: #26262b; }

.tg-sep{ display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #b6bcc4; font-size: 12.5px; }
.tg-sep::before, .tg-sep::after{ content: ''; flex: 1; height: 1px; background: #e8ebef; }
body.dark .tg-sep::before, body.dark .tg-sep::after{ background: #33333a; }

.tg-actions{ display: flex; gap: 10px; margin-top: 14px; }
.tg-actions .tg-primary{ flex: 1; }
.tg-cancel-inline{
    padding: 10px 18px; border: none; border-radius: 12px; cursor: pointer;
    background: #f4f4f5; color: #707579; font-size: 14.5px; font-family: inherit;
    transition: background .2s;
}
.tg-cancel-inline:hover{ background: #e8eaed; }
body.dark .tg-cancel-inline{ background: #26262b; color: #a1a1aa; }

.tg-members-title{ font-size: 13px; font-weight: 600; color: #8b959e; margin: 2px 0 8px; }

/* ---------- СПИСОК ВЫБОРА УЧАСТНИКОВ ---------- */
.tg-checklist{
    max-height: 220px; overflow-y: auto; border: 1px solid #ececf0;
    border-radius: 12px; margin-bottom: 4px;
}
body.dark .tg-checklist{ border-color: #2b2b31; }
.tg-check-row{
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    cursor: pointer; border-bottom: 1px solid #f4f4f7;
}
.tg-check-row:last-child{ border-bottom: none; }
.tg-check-row:hover{ background: #f6f9fd; }
body.dark .tg-check-row{ border-bottom-color: #232329; }
body.dark .tg-check-row:hover{ background: #26262b; }
.tg-check-row .user-avatar{ width: 38px; height: 38px; font-size: 15px; }
.tg-check-name{ flex: 1; font-size: 15px; color: #212121; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .tg-check-name{ color: #fff; }
.tg-check-row input{ display: none; }
.tg-checkbox{
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #c3c9d1; color: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.tg-check-row input:checked + .tg-checkbox{ background: #3390ec; border-color: #3390ec; color: #fff; }
.tg-check-empty{ padding: 18px; text-align: center; font-size: 13.5px; color: #8b959e; }

/* ---------- МЕНЮ «ПЛЮСИКА» (выезжает от кнопки) ---------- */
.plus-dropdown{
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden;
    transform: scale(.75) translateY(-10px);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s cubic-bezier(.32,.72,.35,1), visibility .18s;
    border-radius: 14px; padding: 6px; width: 210px;
    box-shadow: 0 10px 34px rgba(0,0,0,.2);
}
.plus-dropdown.open{ opacity: 1; visibility: visible; transform: none; }
.plus-dropdown .plus-item{
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    font-size: 14.5px; font-weight: 500; color: #333; cursor: pointer;
    transition: background .15s;
}
.plus-dropdown .plus-item svg{ color: #3390ec; flex-shrink: 0; }
.plus-dropdown .plus-item:hover{ background: #f0f6fc; }
body.dark .plus-dropdown .plus-item{ color: #d8dce1; }
body.dark .plus-dropdown .plus-item:hover{ background: #2b2b31; }

/* ---------- ПРОФИЛЬ ГРУППЫ (Telegram-стиль) ---------- */
.profile-section-title{
    font-size: 13px; font-weight: 600; color: #8b959e;
    padding: 10px 0 6px;
}
.rename-row{ display: flex; gap: 8px; padding: 6px 0 12px; }
.rename-row input{
    flex: 1; padding: 10px 12px; font-size: 15px; min-width: 0;
    border: 1.5px solid #dfe4ea; border-radius: 10px; outline: none;
    background: #fff; color: #212121;
}
.rename-row input:focus{ border-color: #3390ec; }
body.dark .rename-row input{ background: #26262b; border-color: #3a3f46; color: #fff; }

.member-row{
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid #f0f0f2;
}
.member-row:last-child{ border-bottom: none; }
body.dark .member-row{ border-bottom-color: #26262b; }
.member-row .user-avatar{ width: 40px; height: 40px; font-size: 15px; }
.member-name{ flex: 1; min-width: 0; font-size: 15px; color: #212121; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark .member-name{ color: #fff; }
.member-owner-badge{ color: #3390ec; font-size: 12px; font-weight: 600; margin-left: 6px; flex-shrink: 0; }
.member-kick{
    border: none; background: none; color: #e53935; cursor: pointer;
    font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 8px;
    flex-shrink: 0; font-family: inherit;
}
.member-kick:hover{ background: #fff0f0; }
body.dark .member-kick:hover{ background: #2a1a1c; }

.picker-row{
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    cursor: pointer; border-bottom: 1px solid #f0f0f2;
}
.picker-row:last-child{ border-bottom: none; }
body.dark .picker-row{ border-bottom-color: #26262b; }
.picker-row:hover .member-name{ color: #3390ec; }
.picker-row .user-avatar{ width: 40px; height: 40px; font-size: 15px; }
.picker-empty{ padding: 14px 0; text-align: center; font-size: 13.5px; color: #8b959e; }

.profile-danger{ display: flex; flex-direction: column; gap: 10px; }

/* ---------- МОБИЛЬНОЕ ---------- */
@media (max-width: 768px){
    .tg-card{ width: 100%; max-width: calc(100vw - 20px); }
    #app-settings-modal .top-sheet{ width: 100%; border-radius: 0 0 16px 16px; }
}

/* ==========================================================
   FIX iOS: низ модалок прячется за панель Safari
   dvh = реальная видимая высота, safe-area = «домашняя» полоска
   ========================================================== */
.modal-backdrop{
    height: 100dvh;
    min-height: 100dvh;
}

/* все карточки/шторки: высота от видимой области, а не от 100vh */
.profile-sheet,
.tg-card,
.modal-content{
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px){
    /* именно шторка инфо группы: запас снизу под панель iOS */
    #group-info-modal .profile-sheet,
    .profile-sheet{
        max-height: 92dvh !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }
    /* и дополнительный отступ под самой опасной зоной кнопок */
    .profile-danger,
    #group-danger-zone{
        padding-bottom: env(safe-area-inset-bottom);
    }
}