* {
    box-sizing: border-box;
}

:root {
    --bg: #f3f4f6;
    --panel: #ffffff;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;

    --danger: #dc2626;

    --message-own: #EFFCDE;
    --message-other: #FFFFF8;
    --message-hover: #f9fafb;

    --overlay: rgba(0, 0, 0, 0.84);
}


/* ========================================
   BASE
======================================== */

html,
body {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--bg);

    overflow: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

body {
    position: fixed;
    inset: 0;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* ========================================
   SCREEN
======================================== */

.screen {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* ========================================
   LOGIN
======================================== */

#login-screen {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.login-card {
    width: min(380px, 100%);

    padding: 32px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}

.login-card h1 {
    margin: 0 0 8px;

    font-size: 28px;
}

.login-subtitle {
    margin: 0 0 28px;

    color: var(--muted);
}

.login-card label {
    display: block;

    margin: 14px 0 7px;

    font-size: 14px;
    font-weight: 600;
}

.login-card input {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    outline: none;
}

.login-card input:focus {
    border-color: var(--primary);
}

#login-button {
    width: 100%;

    margin-top: 20px;

    padding: 12px 16px;

    border: 0;
    border-radius: 10px;

    background: var(--primary);
    color: #ffffff;

    font-weight: 600;
}

#login-button:hover {
    background: var(--primary-hover);
}

.error-message {
    margin-top: 14px;

    padding: 10px 12px;

    border-radius: 8px;

    background: #fee2e2;
    color: var(--danger);

    font-size: 14px;
}


/* ========================================
   MAIN APP
======================================== */

#messenger-screen {
    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    padding: 14px;

    overflow: hidden;

    background-color: #97BC91;

    background-image: none;
}


/* ========================================
   TOP BAR
======================================== */

.top-bar {
    position: relative;
    z-index: 20;

    flex: 0 0 56px;

    width: 100%;
    height: 56px;
    min-height: 56px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0
        12px
        0
        16px;

    background: var(--panel);

    border-bottom: 1px solid var(--border);

    overflow: hidden;
}

.top-bar-brand {
    min-width: 0;
}

.top-bar-brand strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-user {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}

.current-user span {
    max-width: 250px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--muted);

    font-size: 14px;
}

#logout-button {
    flex: 0 0 auto;

    padding: 7px 11px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--panel);
}

#logout-button:hover {
    background: var(--message-hover);
}


/* ========================================
   WORKSPACE
======================================== */

.messenger-layout {
    flex: 1 1 0;

    display: flex;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* ========================================
   CHAT LIST
======================================== */

.chat-list-panel {
    flex: 0 0 320px;

    width: 320px;
    min-width: 320px;
    height: 100%;
    min-height: 0;

    display: flex;

    flex-direction: column;

    background: var(--panel);

    border-right: 1px solid var(--border);

    overflow: hidden;
}

.panel-header {
    flex: 0 0 52px;

    height: 52px;
    min-height: 52px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 12px 0 16px;

    border-bottom: 1px solid var(--border);
}

.panel-header-title {
    min-width: 0;
}

.panel-header h2 {
    margin: 0;

    font-size: 18px;
}

.new-chat-button {
    flex: 0 0 auto;

    width: 100%;
    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    padding:
        0
        14px;

    border: 0;
    border-top: 1px solid var(--border);

    border-radius: 0;

    background: transparent;

    color: var(--text);

    text-align: left;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;
}

.new-chat-button:hover {
    background: var(--message-hover);
}

.chat-list {
    flex: 1 1 0;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding-bottom: 4px;
}


.user-profile {
    position: relative;

    flex: 0 0 auto;

    border-top: 1px solid var(--border);

    background: var(--panel);
}

.user-profile-button {
    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        10px
        14px;

    border: 0;

    background: transparent;

    color: var(--text);

    text-align: left;

    cursor: pointer;
}

.user-profile-button:hover {
    background: var(--message-hover);
}

.user-profile-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;
}

.user-profile-arrow {
    flex: 0 0 auto;

    font-size: 20px;

    line-height: 1;

    color: var(--muted);
}

.user-profile-menu {
    position: absolute;

    left: 10px;
    right: 10px;

    bottom: calc(100% + 6px);

    z-index: 30;

    padding: 6px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--panel);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14);
}

.user-profile-menu[hidden] {
    display: none !important;
}

.user-profile-menu button {
    width: 100%;

    min-height: 40px;

    padding:
        8px
        10px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--text);

    text-align: left;

    font: inherit;

    cursor: pointer;
}

.user-profile-menu button:hover {
    background: var(--message-hover);
}

/* ========================================
   CHAT SECTION LABELS
======================================== */

.chat-section-label {
    position: sticky;
    top: 0;

    z-index: 2;

    padding:
        8px
        14px
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 11px;
    font-weight: 200;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    backdrop-filter: blur(5px);
}


/* ========================================
   CHAT ITEM
======================================== */

.chat-item {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 66px;

    padding:
        10px
        10px
        10px
        16px;

    border-bottom: 1px solid var(--border);

    background: var(--panel);

    cursor: pointer;

    transition:
        background 0.12s ease,
        transform 0.12s ease,
        opacity 0.12s ease;
}

.chat-item:hover {
    background: var(--message-hover);
}

.chat-item.active {
    background: #eff6ff;
}

.chat-item.pinned {
    cursor: grab;
}

.chat-item.pinned:active {
    cursor: grabbing;
}

.chat-item.dragging {
    opacity: 0.45;
}

.chat-item.drag-over {
    position: relative;

    background: #eff6ff;
}

.chat-item.drag-over::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8px;
    right: 8px;

    height: 3px;

    border-radius: 3px;

    background: var(--primary);
}

.chat-item-content {
    flex: 1 1 auto;

    min-width: 0;
}

.chat-item-title-row {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;
}

.chat-item-pin {
    flex: 0 0 auto;

    font-size: 12px;
}

.chat-item-title {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 600;
}



.chat-item-mute {
    flex: 0 0 auto;

    font-size: 13px;

    line-height: 1;
}

.chat-item-unread {
    flex: 0 0 auto;

    min-width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-left: auto;
    padding: 0 6px;

    border-radius: 10px;

    background: var(--primary);
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    line-height: 20px;

    white-space: nowrap;
}

.chat-item-meta {
    margin-top: 4px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--muted);

    font-size: 13px;
}

.chat-item-actions {
    flex: 0 0 auto;

    margin-left: 6px;
}

.chat-item-action-button {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-size: 20px;
    line-height: 1;
}

.chat-item-action-button:hover {
    background: rgba(0, 0, 0, 0.06);

    color: var(--text);
}


/* ========================================
   CHAT PANEL
======================================== */

.chat-panel {
    flex: 1 1 0;

    width: 0;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 0;
    border-radius: 0;
}


/* ========================================
   CHAT HEADER
======================================== */


.chat-panel:has(.chat-empty-state)
.chat-header[hidden] {
    display: none !important;
}

.chat-header {
    display: none;
}

.chat-header {
    flex: 0 0 64px;

    height: 64px;
    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    background: var(--panel);

    border-bottom: 1px solid var(--border);

    overflow: hidden;
}

.chat-header-info {
    min-width: 0;
}

.chat-header strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 17px;
}

.chat-header small {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--muted);
}

.back-to-chats {
    display: none;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--text);

    font-size: 26px;
}

.back-to-chats:hover {
    background: var(--message-hover);
}



.messenger-layout:not(.chat-open) .chat-header {
    display: none !important;
}


/* ========================================
   CHAT PANEL BORDER STATE
======================================== */

/* Когда чат не выбран —
   панель сообщений без рамки */
.messenger-layout:has(.chat-empty-state) .chat-panel {
    border: 0;
    border-radius: 0;
}


/* Когда чат или группа выбраны —
   появляется рамка и скругление */
.messenger-layout:not(:has(.chat-empty-state)) .chat-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
}


/* ========================================
   MESSAGES
======================================== */




/* ========================================
   MESSAGES
======================================== */

/* ========================================
   MESSAGES
======================================== */

.message-list {
    flex: 1 1 0;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 18px;

    background: transparent;

    scroll-behavior: auto;

    overscroll-behavior: contain;
}

.chat-empty-state {
    width: 100%;
    min-height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    pointer-events: none;
}

.chat-empty-state-bubble {
    max-width: min(
        360px,
        80%
    );

    padding:
        9px
        14px;

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    box-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.08
        );

    backdrop-filter:
        blur(4px);

    color: var(--muted);

    font-size: 13px;

    line-height: 1.35;

    text-align: center;
}

.new-messages-divider {
    display: flex;

    align-items: center;
    gap: 10px;

    width: 100%;

    margin: 10px 0 14px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.new-messages-divider::before,
.new-messages-divider::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background: #bfdbfe;
}


.message {
    position: relative;

    width: fit-content;

    max-width: min(
        700px,
        82%
    );

    margin: 0 0 12px;

    padding: 10px 12px;

    border-radius: 12px;

    background: var(--message-other);

    border: 1px solid var(--border);

    overflow: visible;
}

.message.own {
    margin-left: 0;

    background: var(--message-own);
}

.message-header {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    min-width: 0;

    margin-bottom: 5px;
}

.message-author {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 700;

    color: var(--muted);
}

.message-text {
    max-width: 100%;

    white-space: pre-wrap;
    word-break: break-word;

    line-height: 1.35;
}

.message-time {
    margin-top: 6px;

    font-size: 11px;

    color: var(--muted);

    text-align: right;
}


/* ========================================
   MESSAGE ACTION
======================================== */

.message-action-button {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--muted);

    font-size: 18px;
}

.message-action-button:hover {
    background: rgba(0, 0, 0, 0.07);

    color: var(--text);
}


/* ========================================
   PHOTO GROUP
======================================== */

.message-attachments {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 4px;

    width: min(
        620px,
        100%
    );

    margin-bottom: 8px;

    overflow: hidden;

    border-radius: 10px;
}

.message-attachments.single {
    grid-template-columns: 1fr;
}

.message-attachment {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    min-width: 0;

    overflow: hidden;

    background: #e5e7eb;

    cursor: pointer;
}

.message-attachments.single
.message-attachment {
    aspect-ratio: auto;

    max-height: 500px;
}

.message-attachment img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.15s ease;
}

.message-attachments.single
.message-attachment img {
    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 500px;

    margin: 0 auto;

    object-fit: contain;
}

.message-attachment:hover img {
    transform: scale(1.02);
}


/* ========================================
   PHOTO ACTION
======================================== */

.attachment-action-button {
    position: absolute;

    top: 6px;
    right: 6px;

    z-index: 5;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background:
        rgba(
            0,
            0,
            0,
            0.62
        );

    color: #ffffff;

    font-size: 18px;
}

.attachment-action-button:hover {
    background:
        rgba(
            0,
            0,
            0,
            0.78
        );
}


/* ========================================
   ACTION MENU
======================================== */

.message-action-menu {
    position: fixed;

    z-index: 3000;

    width: max-content;

    min-width: 210px;

    padding: 5px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.16
        );
}

.action-menu-label {
    margin:
        2px
        0
        4px;

    padding:
        7px
        12px
        6px;

    border-bottom:
        1px solid var(--border);

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    pointer-events: none;
}

.action-menu-separator {
    height: 1px;

    margin:
        5px
        4px;

    background: var(--border);
}


.action-menu-item {
    display: block;

    width: 100%;

    padding: 10px 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--text);

    text-align: left;

    white-space: nowrap;
}

.action-menu-item {
    line-height: 1.3;
}


.action-menu-icon {
    position: relative;

    display: inline-flex;

    width: 24px;
    height: 20px;

    margin-right: 4px;

    align-items: center;
    justify-content: center;

    font-size: 15px;

    line-height: 1;
}

.action-menu-text {
    vertical-align: middle;
}


.action-menu-item.unpin
.action-menu-icon::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 2px;

    background: currentColor;

    border-radius: 2px;

    transform: rotate(45deg);
}

.action-menu-item:hover {
    background: #f3f4f6;
}

.action-menu-item.danger {
    color: var(--danger);
}


/* ========================================
   MESSAGE FORM
======================================== */


.message-form[hidden] {
    display: none !important;
}

.message-form {
    position: relative;

    z-index: 15;

    flex: 0 0 auto;

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding:
        10px
        max(
            12px,
            env(
                safe-area-inset-right
            )
        )
        calc(
            10px +
            env(
                safe-area-inset-bottom
            )
        )
        max(
            12px,
            env(
                safe-area-inset-left
            )
        );

    background: var(--panel);

    border-top: 1px solid var(--border);

    overflow: hidden;
}

.photo-button {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--panel);

    font-size: 20px;

    cursor: pointer;

    user-select: none;
}

.photo-button:hover {
    background: var(--message-hover);
}

.message-input-wrapper {
    flex: 1 1 0;

    width: 0;

    min-width: 0;

    display: flex;

    flex-direction: column;

    padding: 4px 8px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--panel);

    overflow: hidden;
}

.message-input-wrapper:focus-within {
    border-color: var(--primary);
}

#message-input {
    display: block;

    width: 100%;

    min-width: 0;

    height: 32px;

    padding: 6px 4px;

    border: 0;

    outline: none;

    background: transparent;
}

#send-button {
    flex: 0 0 auto;

    min-width: 96px;

    height: 44px;

    padding: 0 16px;

    border: 0;

    border-radius: 10px;

    background: var(--primary);

    color: #ffffff;

    font-weight: 600;

    white-space: nowrap;
}

#send-button:hover:not(:disabled) {
    background: var(--primary-hover);
}

#send-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* ========================================
   SELECTED PHOTOS
======================================== */

.selected-photos {
    flex: 0 0 auto;

    display: flex;

    gap: 6px;

    width: 100%;

    min-width: 0;
    max-width: 100%;

    padding: 2px 0 6px;

    overflow-x: auto;
    overflow-y: hidden;
}

.selected-photos:empty {
    display: none;
}

.selected-photo {
    position: relative;

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    overflow: hidden;

    border-radius: 8px;

    background: #e5e7eb;
}

.selected-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.selected-photo-remove {
    position: absolute;

    top: 3px;
    right: 3px;

    width: 20px;
    height: 20px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.65
        );

    color: #ffffff;

    font-size: 15px;
    line-height: 20px;

    text-align: center;
}


/* ========================================
   MODAL
======================================== */

.modal {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.42
        );

    backdrop-filter: blur(2px);
}

.modal-dialog {
    position: relative;
    z-index: 1;

    width: min(
        460px,
        100%
    );

    max-height: min(
        760px,
        calc(100vh - 40px)
    );

    overflow-y: auto;

    padding: 0;

    border-radius: 16px;

    background: var(--panel);

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.24
        );
}

.modal-header {
    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    padding:
        12px
        14px
        12px
        20px;

    background: var(--panel);

    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    margin: 0;

    font-size: 20px;
}

.modal-close {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    font-size: 26px;
    line-height: 1;
}

.modal-close:hover {
    background: var(--message-hover);

    color: var(--text);
}

/* ========================================
   PROFILE SETTINGS
======================================== */

#profile-settings-form {
    padding: 20px;
}

.profile-avatar-settings {
    display: flex;

    align-items: center;

    gap: 16px;
}

.profile-avatar-preview-wrap {
    flex: 0 0 auto;

    width: 96px;
    height: 96px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--message-bg);
}

.profile-avatar-preview {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}

.profile-avatar-preview[hidden] {
    display: none;
}


.profile-avatar-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 10px;

    text-align: center;

    color: var(--muted);

    font-size: 12px;
}

.profile-avatar-actions {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    min-width: 0;
}

.profile-avatar-upload {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-sizing: border-box;
}

#profile-avatar-delete {
    color: var(--danger);
}

#profile-avatar-delete:hover {
    background: #fee2e2;
}


#new-chat-form {
    padding: 20px;
}

#change-password-form {
    padding: 20px;
}

#change-password-form .form-section-title {
    margin-bottom: 10px;

    color: var(--text);

    font-size: 14px;
    line-height: 1.4;
}

#change-password-form .form-input {
    box-sizing: border-box;
}

.form-section {
    margin-bottom: 20px;
}

.group-management-content {
    padding: 20px;
}

.group-management-members {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.group-member-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        12px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--message-bg);
}

.group-member-info {
    min-width: 0;
}

.group-member-name {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 600;
}

.group-member-meta {
    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


.group-management-add-row {
    display: flex;

    align-items: center;

    gap: 8px;
}

.group-management-add-row .form-input {
    flex: 1 1 auto;

    min-width: 0;
}

.group-management-add-row .secondary-button {
    flex: 0 0 auto;

    min-height: 40px;
}

.group-member-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    flex: 0 0 auto;
}

.group-member-button {
    min-height: 32px;

    padding:
        6px
        9px;

    font-size: 12px;
}

.danger-button {
    border: 1px solid var(--danger);

    background: transparent;

    color: var(--danger);
}

.danger-button:hover {
    background: var(--danger);
    color: #ffffff;
}

.form-section:last-of-type {
    margin-bottom: 16px;
}

.form-section-title,
.form-label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 700;
}

.chat-type-options {
    display: flex;

    gap: 10px;
}

.chat-type-option {
    flex: 1 1 0;

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 44px;

    padding:
        10px
        12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--panel);

    cursor: pointer;
}

.chat-type-option:has(input:checked) {
    border-color: var(--primary);

    background: #eff6ff;
}

.chat-type-option input {
    margin: 0;

    accent-color: var(--primary);
}

.form-input {
    width: 100%;

    min-height: 44px;

    padding:
        10px
        12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--panel);

    color: var(--text);

    outline: none;
}

.form-input:focus {
    border-color: var(--primary);
}

.new-chat-users {
    display: flex;

    flex-direction: column;

    gap: 6px;

    max-height: 220px;

    overflow-y: auto;

    padding: 2px;
}

.new-chat-user {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 44px;

    padding:
        9px
        10px;

    border: 1px solid var(--border);

    border-radius: 10px;

    cursor: pointer;
}

.new-chat-user:hover {
    background: var(--message-hover);
}

.new-chat-user input {
    margin: 0;

    accent-color: var(--primary);
}

.new-chat-user-info {
    min-width: 0;
}

.new-chat-user-name {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 600;
}

.new-chat-user-login {
    margin-top: 2px;

    color: var(--muted);

    font-size: 12px;
}

.modal-error {
    margin-bottom: 14px;

    padding:
        10px
        12px;

    border-radius: 9px;

    background: #fee2e2;

    color: var(--danger);

    font-size: 14px;
}

.modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding-top: 4px;
}

.primary-button,
.secondary-button {
    min-height: 42px;

    padding:
        0
        16px;

    border-radius: 10px;

    font-weight: 600;
}

.primary-button {
    border: 0;

    background: var(--primary);

    color: #ffffff;
}

.primary-button:hover {
    background: var(--primary-hover);
}

.secondary-button {
    border: 1px solid var(--border);

    background: var(--panel);

    color: var(--text);
}

.secondary-button:hover {
    background: var(--message-hover);
}


/* ========================================
   PHOTO VIEWER
======================================== */

.photo-viewer {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        max(
            24px,
            env(
                safe-area-inset-top
            )
        )
        max(
            16px,
            env(
                safe-area-inset-right
            )
        )
        max(
            24px,
            env(
                safe-area-inset-bottom
            )
        )
        max(
            16px,
            env(
                safe-area-inset-left
            )
        );

    background: var(--overlay);
}

.photo-viewer-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
}

.photo-viewer-close {
    position: absolute;

    top:
        max(
            14px,
            env(
                safe-area-inset-top
            )
        );

    right:
        max(
            18px,
            env(
                safe-area-inset-right
            )
        );

    z-index: 3001;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.6
        );

    color: #ffffff;

    font-size: 30px;
    line-height: 42px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

    .top-bar {
        flex-basis: 52px;

        height:
            calc(
                52px +
                env(
                    safe-area-inset-top
                )
            );

        min-height:
            calc(
                52px +
                env(
                    safe-area-inset-top
                )
            );

        padding-top:
            env(
                safe-area-inset-top
            );
    }

    .top-bar-brand strong {
        font-size: 15px;
    }

    .current-user span {
        display: none;
    }

    .chat-list-panel {
        flex-basis: 100%;

        width: 100%;

        min-width: 100%;
    }

    .chat-panel {
        width: 100%;
    }

    .chat-panel {
        display: none;
    }

    .messenger-layout.chat-open
    .chat-list-panel {
        display: none;
    }

    .messenger-layout.chat-open
    .chat-panel {
        display: flex;
    }

    .back-to-chats {
        display: flex;
    }

    .chat-header {
        flex-basis: 56px;

        height: 56px;

        min-height: 56px;

        padding: 8px 10px;
    }

    .chat-header strong {
        font-size: 16px;
    }

    .message-list {
        padding: 10px;
    }

    .message {
        max-width: 92%;
    }

    .message-form {
        padding:
            8px
            max(
                8px,
                env(
                    safe-area-inset-right
                )
            )
            calc(
                8px +
                env(
                    safe-area-inset-bottom
                )
            )
            max(
                8px,
                env(
                    safe-area-inset-left
                )
            );
    }

    .photo-button {
        flex-basis: 42px;

        width: 42px;
    }

    #send-button {
        min-width: 84px;

        padding: 0 13px;
    }

    .message-attachments {
        gap: 3px;
    }

    .selected-photo {
        flex-basis: 52px;

        width: 52px;
        height: 52px;
    }

    .chat-section-label {
        padding-left: 12px;
    }

    .chat-item {
        min-height: 64px;

        padding-left: 12px;
    }

    .modal {
        align-items: flex-end;

        padding:
            0
            0
            env(
                safe-area-inset-bottom
            )
            0;
    }

    .modal-dialog {
        width: 100%;

        max-height:
            calc(
                100vh -
                env(
                    safe-area-inset-top
                )
            );

        border-radius:
            18px
            18px
            0
            0;
    }

    .chat-type-options {
        flex-direction: column;
    }

    #new-chat-form,
    #change-password-form {
        padding: 16px;
    }

    .new-chat-users {
        max-height: 200px;
    }
}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 420px) {

    .top-bar-brand strong {
        font-size: 14px;
    }

    .top-bar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .panel-header {
        padding-left: 12px;
        padding-right: 8px;
    }

    .new-chat-button {
        width: 36px;
        height: 36px;
    }

    .message-form {
        gap: 5px;
    }

    .photo-button {
        flex-basis: 38px;

        width: 38px;

        height: 42px;
    }

    #send-button {
        min-width: 70px;

        padding: 0 8px;
    }

    .message-action-menu {
        min-width: 200px;
    }

    .chat-item-action-button {
        width: 38px;
        height: 38px;
    }

    .modal-header h2 {
        font-size: 18px;
    }
}


/* ========================================
   NOTIFICATIONS
======================================== */

.notification-toast {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 5000;

    width: min(
        360px,
        calc(100vw - 40px)
    );

    padding:
        12px
        14px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--panel);

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.18
        );

    cursor: pointer;

    transform:
        translateY(
            12px
        );

    opacity: 0;

    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.notification-toast:not(.hidden) {
    transform:
        translateY(
            0
        );

    opacity: 1;
}

.notification-toast-title {
    margin-bottom: 4px;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;
}

.notification-toast-text {
    overflow: hidden;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.35;

    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 600px) {
    .notification-toast {
        right: 10px;
        bottom: 10px;

        width: calc(
            100vw - 20px
        );
    }
}



/* ========================================
   ROUNDED WORKSPACE
======================================== */

.messenger-layout {
    gap: 10px;
}

/* Левая колонка */
.chat-list-panel {
    border: 1px solid var(--border);

    border-radius: 14px;

    overflow: hidden;
}

/* Правая колонка */
.chat-panel {
    border: 1px solid var(--border);

    border-radius: 14px;

    overflow: hidden;
}


/* ========================================
   EMPTY CHAT MESSAGE PILL
======================================== */

.chat-empty-state-bubble {
    background: #719B6B;
    color: #ffffff;

    font-weight: 400;
}


/* ========================================
   CONTACTS
======================================== */

.contacts-section {
    width: 100%;
    flex: 0 0 auto;
}


.contacts-button {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 11px 14px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        background 120ms ease;
}


.contacts-button:hover {
    background: rgba(
        0,
        0,
        0,
        0.04
    );
}


.contacts-arrow {
    margin-left: 8px;

    color: var(--muted);

    font-size: 13px;
}


.contacts-list {
    width: 100%;

    max-height: 260px;

    margin-top: 3px;

    padding: 2px 0;

    overflow-y: auto;
}


.contacts-list[hidden] {
    display: none !important;
}


.contact-item {
    width: 100%;

    padding:
        8px
        14px;

    border-radius: 7px;

    cursor: default;
}


.contact-item:hover {
    background: rgba(
        0,
        0,
        0,
        0.035
    );
}


.contact-name {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: 14px;
    font-weight: 500;
}


.contact-username {
    margin-top: 2px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--muted);

    font-size: 11px;
}


.contacts-empty {
    padding:
        9px
        14px;

    color: var(--muted);

    font-size: 13px;
}


/* ========================================
   MESSAGE REPLY
======================================== */

.message-reply {
    display: block;

    width: 100%;

    margin:
        0
        0
        8px;

    padding:
        7px
        9px;

    border: 0;
    border-left: 3px solid var(--primary);
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.05);

    color: inherit;

    text-align: left;

    cursor: pointer;

    overflow: hidden;
}

.message-reply:hover {
    background: rgba(0, 0, 0, 0.09);
}

.message-reply-author {
    margin-bottom: 2px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
    font-weight: 700;

    color: var(--primary);
}

.message-reply-text {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;

    line-height: 1.3;

    color: var(--muted);
}

.message-reply-highlight {
    animation:
        message-reply-highlight 1.2s ease;
}

@keyframes message-reply-highlight {
    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(59, 130, 246, 0);
    }

    25%,
    75% {
        box-shadow:
            0 0 0 3px
            rgba(59, 130, 246, 0.35);
    }
}