/**
 * Responsive baseline hardening
 * - No horizontal scroll (fixes + safe clipping)
 * - Media never exceeds container
 * - Long text wraps safely
 * - Mobile/PWA viewport height uses dvh/svh with JS fallback (--vh)
 *
 * This file should be loaded last to override legacy rules.
 */

:root {
    /* JS fallback: src/js/viewport-units.js sets --vh to real visual viewport height */
    --vh: 1vh;
    --app-height: calc(var(--vh) * 100);

    /* Safe-area insets (iOS notch, etc) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100svh) {
    :root {
        --app-height: 100svh;
    }
}

@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

/* Modern box model everywhere */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

/* When running inside the fixed app shell, the page itself must not scroll. */
html.app-shell {
    height: var(--app-height);
    overflow: hidden;
}

/* Last line of defence against horizontal scrollbars */
@supports (overflow: clip) {

    html,
    body {
        overflow-x: clip;
    }
}

@supports not (overflow: clip) {

    html,
    body {
        overflow-x: hidden;
    }
}

body {
    min-height: 100vh;
    min-height: var(--app-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-wrap: anywhere;
}

/* Media never overflows its container */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

/* Prevent long code/links from forcing horizontal scroll */
pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

code,
pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Flex/grid children must be allowed to shrink */
.row,
.d-flex {
    min-width: 0;
}

.row>[class^="col"],
.row>[class*=" col"],
.d-flex>* {
    min-width: 0;
}

/* Avoid inherited nowrap from legacy styles (prevents horizontal overflow in chats) */
.contacts_body {
    white-space: normal !important;
    overflow-x: hidden;
}

.contacts_body .contacts,
.contacts_body .contacts li,
.contacts_body .user_info {
    min-width: 0;
}

.contacts_body .user_info span,
.contacts_body .user_info p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chat cards: replace legacy 100vh to dvh/svh (--app-height) */
.chat .card {
    height: calc(var(--app-height) - 40px - var(--app-top-offset, 0px));
    max-height: calc(var(--app-height) - 40px - var(--app-top-offset, 0px));
}

/* Allow card bodies to shrink on iOS keyboard open (otherwise footer can be pushed off-screen). */
.chat .contacts_body {
    flex: 1 1 auto;
    min-height: 0;
}

.desktop-chat-panel {
    height: calc(var(--app-height) - 40px - var(--app-top-offset, 0px)) !important;
    max-height: calc(var(--app-height) - 40px - var(--app-top-offset, 0px)) !important;
}

/* Drawer close button - hidden by default (desktop), shown only on mobile */
.left-widget__drawer-close {
    display: none;
}

@media (max-width: 991.98px) {

    /* On small screens, panels should occupy the whole viewport without extra empty scroll. */
    .chat .card {
        height: calc(var(--app-height) - var(--app-top-offset, 0px));
        max-height: calc(var(--app-height) - var(--app-top-offset, 0px));
    }

    /* Left menu as off-canvas drawer (prevents body/page vertical scrolling on mobile). */
    .left-widget {
        position: fixed !important;
        top: var(--app-top-offset, 0px);
        left: 0;
        height: calc(var(--app-height) - var(--app-top-offset, 0px));
        max-height: calc(var(--app-height) - var(--app-top-offset, 0px));
        width: min(88vw, 340px);
        /* Slightly narrower for better visibility of backdrop */
        max-width: calc(100% - 24px);
        margin: 0 !important;
        transform: translateX(calc(-100% - 12px));
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        /* Smoother animation */
        z-index: 12000;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    }

    .left-widget.left-widget--collapsed {
        pointer-events: none;
    }

    .left-widget:not(.left-widget--collapsed) {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Drawer close button (visible X in corner) */
    .left-widget__drawer-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .left-widget__drawer-close:hover,
    .left-widget__drawer-close:focus {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        transform: scale(1.05);
        outline: none;
    }

    body.app-shell.left-widget-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.65);
        /* Slightly darker backdrop */
        z-index: 11999;
        pointer-events: auto;
        animation: backdropFadeIn 0.2s ease;
    }

    @keyframes backdropFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    body.app-shell.left-widget-open>.container-fluid {
        pointer-events: none;
    }

    /* Hide drawer close on desktop (only show when drawer is visible) */
    .left-widget.left-widget--collapsed .left-widget__drawer-close {
        display: none;
    }
}

/* Prevent tiny negative margins from causing horizontal scroll */
.chat-preview__body {
    margin-right: 0 !important;
}

/* Legacy rules set 100vh here; keep within the panel height */
#sidebarChatPanelDesktop {
    height: 100% !important;
    max-height: 100% !important;
}

/* Messages / bubbles: never overflow by long text or media */
.chat-preview__message,
.msg_cotainer,
.msg_cotainer_send {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-preview__message img,
.chat-preview__message video,
.msg_cotainer img,
.msg_cotainer_send img,
.msg_cotainer video,
.msg_cotainer_send video {
    max-width: 100%;
    height: auto;
}

/* Context menus (fixed-position) must always fit within viewport */
.context-menu,
.chat-preview__context-menu,
.context-menu--message {
    width: min(280px, calc(100% - 20px));
    min-width: 0;
    max-width: calc(100% - 20px);
}

/* Bootstrap modal: keep inside viewport and allow inner scroll */
.modal-dialog {
    max-width: calc(100% - 1rem);
}

.modal-content {
    max-height: calc(var(--app-height) - 2rem);
}

.modal-body {
    overflow: auto;
    max-height: calc(var(--app-height) - 6rem);
}

/* Stable full-height shell for app pages (internal scrolls only where needed) */
body.app-shell {
    position: fixed;
    top: var(--app-offset-top, 0px);
    left: var(--app-offset-left, 0px);
    width: var(--app-width, 100%);
    height: var(--app-height);
    min-height: var(--app-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* prevent body scroll (use inner scroll areas only) */
    overscroll-behavior: none;
}

body.app-shell>.container-fluid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.app-shell>.container-fluid>.row {
    flex: 1 1 auto;
    min-height: 0;
}

/* iOS Safari auto-zooms inputs < 16px, which causes viewport jumps in PWAs. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 991.98px) {

        body.app-shell input,
        body.app-shell textarea,
        body.app-shell select,
        body.app-shell .emoji-input-preview {
            font-size: 16px !important;
        }
    }
}

/* iOS momentum scroll + avoid scroll chaining into the (fixed) page. */
.msg_card_body,
.contacts_body,
.chat-preview__body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

@media (max-width: 991.98px) {

    /* Keep the composer comfortably above the iOS home indicator in PWA mode. */
    .chat-composer-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Allow left sidebar content to scroll without affecting the page/body (keep resizer visible) */
.left-widget {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.left-widget__inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}