/* ==========================================
   АДАПТИВНОСТЬ: экран + системный размер шрифта
   ========================================== */

:root {
    --ui-scale: 1;
    --ui-zoom: 1;
    --control-size: 40px;
    --input-min-height: 40px;
    --header-btn-size: 11px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Компактная шапка — много кнопок на узком экране */
html[data-ui-compact="true"] .header {
    padding-left: 6px;
    padding-right: 6px;
    gap: 4px;
}

html[data-ui-compact="true"] .header .btn-small {
    padding: 3px 5px;
    font-size: var(--header-btn-size);
}

html[data-ui-compact="true"] #header-add-member-btn {
    font-size: 0;
    padding: 4px 6px;
    min-width: 28px;
}

html[data-ui-compact="true"] #header-add-member-btn::before {
    content: '➕';
    font-size: calc(14px * var(--ui-scale, 1));
}

html[data-ui-compact="true"] .header-center-btn,
html[data-ui-compact="true"] #el_gen_1 {
    padding: 2px 4px;
}

html[data-ui-compact="true"] #header-avatar {
    width: calc(26px * var(--ui-scale, 1)) !important;
    height: calc(26px * var(--ui-scale, 1)) !important;
}

/* Панель ввода — гибкие размеры вместо жёстких px */
.controls {
    flex-wrap: wrap;
    row-gap: 6px;
}

.input-area {
    min-height: var(--input-min-height);
}

textarea#content {
    min-height: var(--input-min-height);
    height: var(--input-min-height);
    max-height: calc(120px * var(--ui-scale, 1));
    font-size: max(calc(14px * var(--ui-scale, 1)), 0.875rem);
}

.controls > button {
    width: var(--control-size);
    height: var(--control-size);
    min-width: var(--control-size);
    min-height: var(--control-size);
}

.input-area button {
    min-height: var(--control-size);
}

#reaction-panel {
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}

#global-media-banner {
    top: calc(50px * var(--ui-scale, 1));
}

#pets-container #left-pet,
#pets-container #right-pet {
    font-size: min(100px, 22vw) !important;
}

#video-preview-container {
    bottom: calc(130px * var(--ui-scale, 1));
    width: min(150px, 38vw) !important;
    height: min(150px, 38vw) !important;
}

/* Модальные окна — не выходят за экран */
.modal,
.folder-select-content,
.full-emoji-content {
    max-width: min(340px, calc(100vw - 24px)) !important;
    max-height: min(85vh, calc(100dvh - 24px));
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal::-webkit-scrollbar,
.folder-select-content::-webkit-scrollbar,
.full-emoji-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.msg {
    max-width: min(80%, calc(100vw - 48px));
}

.msg-reply-text {
    max-width: min(200px, 55vw);
}

.media-audio {
    max-width: min(200px, 60vw);
}

/* Анимации — только внутри экрана */
#fx-container {
    overflow: hidden !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
}

.emoji-popover,
#fullEmojiPicker {
    max-width: calc(100vw - 16px);
}

/* Узкие экраны */
@media (max-width: 360px) {
    .header-actions {
        gap: 2px;
    }

    .header .btn-small {
        padding: 3px 4px;
    }

    .controls {
        padding-left: 6px;
        padding-right: 6px;
        gap: 6px;
    }

    .folder-tab-item {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (max-height: 640px) {
    #contact-list {
        padding-bottom: 30px;
    }

    .controls {
        padding-bottom: max(30px, calc(20px + env(safe-area-inset-bottom, 0px)));
    }
}

/* Long text composer must work the same in every chat style/theme. */
#main-controls {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
    flex-wrap: wrap !important;
}

#text-cloud-preview {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-height: min(56dvh, 520px) !important;
    overflow-y: auto !important;
    z-index: 20050 !important;
    box-sizing: border-box !important;
    display: none;
}

#text-cloud-preview .sm-long-text-editor {
    display: block !important;
    width: 100% !important;
    min-height: 140px !important;
    max-height: min(52dvh, 480px) !important;
    overflow-y: auto !important;
    resize: none !important;
    box-sizing: border-box !important;
}

@media (min-width: 720px) {
    #text-cloud-preview {
        left: 50% !important;
        right: auto !important;
        width: min(680px, calc(100vw - 24px)) !important;
        transform: translateX(-50%) !important;
    }
}