* {
    box-sizing: border-box;
}

:root {
    --bg: #eef3f5;
    --panel: #ffffff;
    --border: #e4e9ed;
    --text: #1f2933;
    --muted: #75808a;

    --primary: #3390ec;
    --primary-hover: #2483df;

    --danger: #dc2626;

    --message-own: #e7ffdb;
    --message-other: #ffffff;
    --message-hover: #f2f6f8;

    --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: "Inter", Arial, sans-serif;
    font-weight: 350;

    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: 0;

    overflow: hidden;

    background-color: var(--bg);

    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;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(190, 210, 224, 0.88);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(226, 239, 247, 0.5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 2px 5px rgba(75, 105, 125, 0.14);
    color: #718fa4;
    line-height: 1;
}

.chat-item-mute svg {
    width: 12px;
    height: 12px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.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-typing {
    color: #668092;
    font-size: 11px;
    font-style: italic;
}

.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-title-clickable {
    cursor: pointer;
}

.chat-header:has(.chat-title-clickable) { cursor: pointer; }
.user-info-content { display:flex; gap:14px; align-items:center; padding:20px; }
.user-info-avatar.chat-avatar {
    flex: 0 0 4cm;
    width: 4cm;
    height: 4cm;
    font-size: 36px;
}
.user-info-name { font-weight:600; font-size:16px; }
.user-info-login,.user-info-presence,.user-info-retention { color:var(--muted); font-size:13px; margin-top:4px; }
.user-info-presence.is-online { color:#278b55; }
.user-info-retention { margin:0 20px 20px; padding-top:14px; border-top:1px solid var(--border); }

.chat-title-clickable:focus-visible {
    outline: 2px solid rgba(52, 145, 225, 0.62);
    outline-offset: 3px;
    border-radius: 5px;
}

.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;
}


/* ========================================
   PINNED MESSAGE
======================================== */

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

.pinned-message-bar {
    flex: 0 0 auto;

    display: flex;

    align-items: stretch;

    min-width: 0;

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

    background: var(--panel);

    overflow: hidden;
}

.pinned-message-content {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    border: 0;

    background: transparent;

    color: var(--text);

    text-align: left;

    cursor: pointer;
}

.pinned-message-content:hover {
    background: var(--message-hover);
}

.pinned-message-icon {
    flex: 0 0 auto;

    font-size: 17px;
}

.pinned-message-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.pinned-message-author {
    overflow: hidden;

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

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

    color: var(--primary);
}

.pinned-message-preview {
    overflow: hidden;

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

    font-size: 13px;

    color: var(--muted);
}

.pinned-message-counter {
    flex: 0 0 auto;

    align-self: center;

    padding: 0 4px;

    color: var(--muted);

    font-size: 12px;

    font-variant-numeric: tabular-nums;
}

.pinned-message-unpin {
    flex: 0 0 auto;

    width: 40px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--muted);

    font-size: 22px;

    cursor: pointer;
}

.pinned-message-unpin:hover {
    background: var(--message-hover);

    color: var(--text);
}


/* ========================================
   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-day-divider {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 112px;
    margin: 18px auto 14px;
    padding: 7px 16px;
    border: 1px solid rgba(145, 184, 211, 0.58);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(220, 241, 253, 0.68));
    box-shadow: 0 5px 16px rgba(83, 112, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #456b87;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    backdrop-filter: blur(8px);
}


.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;
}

@media (hover: none) and (pointer: coarse) {
    .message,
    .message * {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

.message-mention {
    display: inline;

    padding: 1px 4px;

    border: 1px solid rgba(77, 132, 170, 0.28);
    border-radius: 6px;

    background: rgba(197, 224, 245, 0.56);

    color: #245b82;
    font-weight: 700;
}

.message-mention--current-user {
    border-color: rgba(48, 130, 201, 0.5);

    background: rgba(160, 211, 250, 0.72);

    color: #174d73;
}

.message--mentioned {
    box-shadow:
        0 0 0 2px rgba(81, 159, 217, 0.32),
        0 5px 16px rgba(63, 123, 169, 0.14);
}

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

    font-size: 11px;

    color: var(--muted);

    text-align: right;
}

.message-delivery-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    margin-left: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #748b9a;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    vertical-align: -2px;
}

.message-delivery-checks {
    display: block;
    width: 18px;
    height: 12px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.message-delivery-status.is-delivered {
    color: #5f8298;
}

.message-delivery-status.is-read {
    color: #2585d8;
}

.message-delivery-status.is-failed {
    color: #e14b4b;
    letter-spacing: 0;
}

.message-send-failed {
    box-shadow: 0 0 0 1px rgba(225, 75, 75, 0.35), 0 2px 8px rgba(225, 75, 75, 0.12);
}

.message-delivery-status:hover,
.message-delivery-status:focus-visible {
    color: #116ab6;
    outline: none;
    transform: scale(1.08);
}

.chat-avatar.is-online {
    position: relative;
}

.chat-avatar-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: #38b36a;
    box-shadow: 0 1px 3px rgba(23, 85, 54, 0.32);
}

.message-receipt-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 36, 45, 0.38);
    backdrop-filter: blur(6px);
}

.message-receipt-card {
    width: min(430px, 100%);
    max-height: min(74vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(255, 254, 252, 0.92);
    background-clip: padding-box;
    clip-path: inset(0 round 18px);
    box-shadow: 0 18px 45px rgba(23, 46, 60, 0.24), inset 0 1px 0 #fff;
}

.message-receipt-fixed-header {
    flex: 0 0 auto;
    padding: 18px 18px 0;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(197, 215, 226, 0.64);
    box-shadow: 0 4px 12px rgba(41, 78, 101, 0.06);
    z-index: 1;
}

.message-receipt-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.message-receipt-heading h2 {
    margin: 0;
    font-size: 16px;
}

.message-receipt-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0 0 2px;
    border: 1px solid rgba(150, 180, 196, 0.5);
    border-radius: 50%;
    background: rgba(241, 249, 252, 0.82);
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(58, 86, 105, 0.16);
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.message-receipt-summary {
    margin: 14px 0 12px;
    color: var(--muted);
    font-size: 12px;
}

.message-receipt-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 18px 18px;
}

.message-receipt-list {
    display: grid;
    gap: 7px;
}

.message-receipt-row {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.message-receipt-row strong {
    font-size: 13px;
}

.message-receipt-row span {
    color: var(--muted);
    font-size: 12px;
}

.message-receipt-row.is-read span {
    color: #2585d8;
}


/* ========================================
   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: 5px;
    right: 5px;

    z-index: 5;

    width: 20px;
    height: 20px;

    display: flex;

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

    padding: 0;

    border: 1px solid rgba(208, 226, 237, 0.46);
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.38),
        rgba(220, 237, 246, 0.20)
    );
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 3px 9px rgba(55, 82, 101, 0.12);

    color: #607c8f;

    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.attachment-action-button:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.96),
        rgba(208, 232, 244, 0.7)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 5px 13px rgba(55, 82, 101, 0.28);
    transform: translateY(-1px);
}

.attachment-action-button:active {
    box-shadow: inset 0 2px 5px rgba(79, 111, 133, 0.2);
    transform: translateY(0) scale(0.96);
}

.attachment-action-button:focus-visible {
    outline: 2px solid rgba(84, 163, 221, 0.86);
    outline-offset: 2px;
}


/* ========================================
   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);
}

.message-read-receipt-info {
    margin: 2px 8px 6px;
    padding: 5px 7px 1px;

    border-top: 1px solid rgba(76, 103, 122, 0.1);

    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    pointer-events: none;
}


.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-item {
    display: flex;

    align-items: center;

    min-height: 40px;

    padding: 8px 12px;
}


.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-icon.svg-icon {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    margin-right: 8px;

    box-sizing: border-box;

    border: 1px solid rgba(220, 233, 241, 0.9);
    border-radius: 50%;

    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 2px 5px rgba(69, 96, 113, 0.12);

    color: #718998;
}

.action-menu-icon.svg-icon svg {
    width: 13px;
    height: 13px;

    overflow: visible;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-menu-icon.svg-icon svg path:first-child:only-child {
    fill: currentColor;
    stroke: currentColor;
}

.action-menu-icon.svg-icon-pin svg path:first-child,
.action-menu-icon.svg-icon-unpin svg path:first-child,
.action-menu-icon.svg-icon-reply svg path:first-child,
.action-menu-icon.svg-icon-forward svg path:first-child {
    fill: currentColor;
    stroke: currentColor;
}

.action-menu-item:hover .action-menu-icon.svg-icon {
    border-color: rgba(121, 182, 229, 0.68);
    color: #3b86bf;
}

.action-menu-item.danger .action-menu-icon.svg-icon {
    border-color: rgba(244, 174, 174, 0.72);
    color: #d65b5b;
}

.action-menu-item.expanded {
    background: #eef7fc;
}

.notification-inline-options {
    display: grid;
    gap: 2px;
    margin: -2px 4px 6px 36px;
    padding: 4px 0 4px 8px;
    border-left: 1px solid rgba(121, 182, 229, 0.48);
    animation: notification-inline-open 160ms ease-out;
}

.notification-inline-options .action-menu-item {
    min-height: 36px;
    padding: 6px 8px;
}

.notification-inline-options .action-menu-icon.svg-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-right: 7px;
}

.notification-inline-options .action-menu-icon.svg-icon svg {
    width: 11px;
    height: 11px;
}

@keyframes notification-inline-open {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.notification-settings-sheet,
.notification-duration-modal {
    position: fixed;
    z-index: 3400;
    inset: 0;
}

.notification-sheet-backdrop,
.notification-duration-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(47, 65, 76, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.notification-sheet-dialog,
.notification-duration-dialog {
    position: relative;
    z-index: 1;
    width: min(360px, calc(100% - 32px));
    margin: 14vh auto 0;
    padding: 14px;
    border: 1px solid rgba(220, 233, 241, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 42px rgba(49, 74, 89, 0.24);
}

.notification-sheet-dialog h2,
.notification-duration-dialog h2 {
    margin: 2px 6px 10px;
    color: #263b49;
    font-size: 16px;
    font-weight: 600;
}

.notification-sheet-handle {
    display: none;
}

.notification-sheet-dialog .action-menu-item {
    border-radius: 10px;
}

.notification-duration-dialog {
    width: min(330px, calc(100% - 32px));
}

.notification-duration-wheel {
    position: relative;
    max-height: 170px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin: 8px 0 14px;
    padding: 58px 0;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%);
}

.notification-duration-wheel::-webkit-scrollbar {
    display: none;
}

.notification-duration-wheel button {
    min-height: 42px;
    flex: 0 0 42px;
    scroll-snap-align: center;
    border: 0;
    background: transparent;
    color: #8797a3;
    font: inherit;
    font-size: 14px;
    transition: color 140ms ease, transform 140ms ease;
}

.notification-duration-wheel button.selected {
    color: #263b49;
    font-size: 16px;
    font-weight: 600;
    transform: scale(1.03);
}

.notification-duration-wheel::before,
.notification-duration-wheel::after {
    content: "";
    position: absolute;
    right: 14px;
    left: 14px;
    height: 1px;
    background: #52a7e8;
    pointer-events: none;
}

.notification-duration-wheel::before { top: calc(50% - 21px); }
.notification-duration-wheel::after { top: calc(50% + 21px); }

.notification-duration-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 700px), (pointer: coarse) {
    .notification-sheet-dialog,
    .notification-duration-dialog {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        margin: 0;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        animation: notification-sheet-in 180ms ease-out;
    }

    .notification-sheet-handle {
        width: 38px;
        height: 4px;
        display: block;
        margin: 0 auto 12px;
        border-radius: 4px;
        background: rgba(111, 133, 148, 0.34);
    }

    .notification-duration-wheel {
        max-height: 196px;
    }
}

@keyframes notification-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 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;

    resize: none;

    line-height: 20px;

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

#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;
}

.selected-photo-edit {
    position: absolute;

    right: 3px;
    bottom: 3px;

    width: 22px;
    height: 22px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 1px solid rgba(218, 241, 253, 0.78);
    border-radius: 50%;

    background: rgba(61, 104, 132, 0.74);
    box-shadow: 0 2px 7px rgba(26, 48, 63, 0.34);

    color: #ffffff;

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

.photo-editor-modal {
    position: fixed;

    inset: 0;
    z-index: 3100;

    display: grid;

    place-items: center;

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

    background: rgba(29, 45, 55, 0.5);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.photo-editor-card {
    width: min(
        80vw,
        calc((80dvh - 104px) * var(--photo-editor-ratio, 1.33))
    );

    max-height: calc(80dvh - 104px);

    background: transparent;
}

.photo-editor-canvas {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: var(--photo-editor-ratio, 1.33);

    margin: 0;

    border: 1px solid rgba(224, 242, 251, 0.72);
    border-radius: 14px;
    box-shadow: 0 22px 58px rgba(6, 18, 25, 0.48);

    touch-action: none;

    cursor: move;
}

.photo-editor-canvas:active {
    cursor: move;
}

.photo-editor-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);

    display: flex;

    align-items: center;
    gap: 8px;

    max-width: calc(100vw - 32px);
    padding: 8px;

    border: 1px solid rgba(206, 232, 245, 0.8);
    border-radius: 22px;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(215, 235, 246, 0.78));
    box-shadow: 0 12px 30px rgba(10, 32, 45, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.photo-editor-bottom-bar .photo-editor-tool {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 1px solid rgba(137, 177, 201, 0.58);
    border-radius: 50%;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(204, 228, 241, 0.78));
    box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(37, 74, 96, 0.14);

    color: #36596d;

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

.photo-editor-bottom-bar .photo-editor-tool:active {
    transform: translateY(1px) scale(0.96);
}

@media (max-width: 600px) {
    .photo-editor-card {
        width: min(
            92vw,
            calc((75dvh - 98px) * var(--photo-editor-ratio, 1.33))
        );

        max-height: calc(75dvh - 98px);
    }
}

.image-preparation-modal {
    position: fixed;
    inset: 0;
    z-index: 3050;

    display: grid;

    place-items: center;

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

    background: rgba(30, 47, 57, 0.46);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.image-preparation-card {
    width: min(390px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;

    padding: 22px;

    border: 1px solid rgba(210, 235, 247, 0.86);
    border-radius: 22px;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 242, 249, 0.91));
    box-shadow: 0 24px 62px rgba(17, 43, 58, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.image-preparation-header {
    display: flex;

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

    gap: 14px;

    margin-bottom: 16px;
}

.image-preparation-card h2 {
    margin: 0;

    color: #263b49;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
}

.image-preparation-close {
    position: relative;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 1px solid rgba(185, 217, 233, 0.78);
    border-radius: 50%;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(203, 229, 242, 0.78));
    box-shadow: inset 0 1px 0 #ffffff, 0 3px 9px rgba(38, 75, 98, 0.16);

    color: #52758a;

    font-size: 0;
    line-height: 1;
}

.image-preparation-cross-icon {
    position: absolute;
    inset: 0;
}

.image-preparation-cross-icon::before,
.image-preparation-cross-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 12px;
    height: 1.5px;

    border-radius: 999px;

    background: currentColor;
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
}

.image-preparation-cross-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.image-preparation-close:active {
    transform: translateY(1px) scale(0.95);
}

.image-preparation-previews {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;

    max-height: min(38dvh, 306px);
    overflow-y: auto;

    padding: 2px;
}

.image-preparation-preview-item {
    position: relative;

    min-width: 0;
}

.image-preparation-preview {
    display: block;

    width: 100%;
    height: min(25dvh, 142px);

    object-fit: cover;

    border: 1px solid rgba(168, 205, 224, 0.5);
    border-radius: 12px;

    background: rgba(229, 240, 246, 0.72);
}

.image-preparation-preview-action {
    position: absolute;
    top: 7px;

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 1px solid rgba(217, 240, 250, 0.78);
    border-radius: 50%;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.87), rgba(183, 214, 229, 0.76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 9px rgba(21, 46, 61, 0.3);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    color: #385e75;

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

.image-preparation-preview-remove {
    position: absolute;
}

.image-preparation-preview-action:active {
    transform: translateY(1px) scale(0.94);
}

.image-preparation-preview-edit {
    right: 38px;
}

.image-preparation-preview-remove {
    right: 7px;

    color: #bd5962;

    font-size: 0;
}

.image-preparation-count {
    min-height: 20px;
    padding-top: 7px;

    color: #547387;

    font-size: 13px;
    text-align: center;
}

.image-preparation-file {
    display: flex;

    align-items: center;
    gap: 9px;

    margin: 10px 0 15px;

    color: var(--text);

    font-size: 15px;
}

.image-preparation-file input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.image-preparation-switch {
    position: relative;

    flex: 0 0 42px;

    width: 42px;
    height: 24px;

    border: 1px solid rgba(136, 177, 200, 0.6);
    border-radius: 999px;

    background: linear-gradient(145deg, rgba(218, 234, 242, 0.88), rgba(255, 255, 255, 0.76));
    box-shadow: inset 0 1px 3px rgba(65, 103, 123, 0.16), 0 2px 7px rgba(49, 87, 108, 0.1);
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.image-preparation-switch::after {
    position: absolute;
    top: 50%;
    left: 2px;

    width: 18px;
    height: 18px;

    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: 50%;

    background: linear-gradient(145deg, #ffffff, #d8edf6);
    box-shadow: 0 2px 6px rgba(45, 81, 101, 0.24), inset 0 1px 0 #ffffff;
    content: "";
    transform: translateY(-50%);
    transition: transform 180ms ease;
}

.image-preparation-file input:checked + .image-preparation-switch {
    border-color: rgba(54, 154, 213, 0.88);

    background: linear-gradient(145deg, rgba(54, 158, 220, 0.98), rgba(105, 195, 238, 0.9));
    box-shadow: inset 0 1px 3px rgba(16, 104, 157, 0.26), 0 3px 9px rgba(46, 135, 188, 0.22);
}

.image-preparation-file input:checked + .image-preparation-switch::after {
    transform: translate(18px, -50%);
}

.image-preparation-file input:focus-visible + .image-preparation-switch {
    outline: 3px solid rgba(88, 181, 232, 0.32);
    outline-offset: 2px;
}

.image-preparation-hint {
    margin: -9px 0 14px 31px;

    color: #718797;

    font-size: 12px;
    line-height: 1.35;
}

.image-preparation-caption {
    width: 100%;
    min-height: 72px;

    box-sizing: border-box;
    margin-top: 2px;
    padding: 12px 14px;
    resize: vertical;

    border: 1px solid rgba(142, 196, 225, 0.82);
    border-radius: 15px;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(227, 243, 250, 0.75));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.96), 0 3px 10px rgba(51, 95, 119, 0.08);
    color: var(--text);
    font: inherit;
    line-height: 1.4;
}

.image-preparation-caption:focus {
    outline: none;

    border-color: rgba(57, 157, 217, 0.9);
    box-shadow: 0 0 0 3px rgba(84, 180, 232, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.98);
}

.image-preparation-options,
.image-preparation-actions {
    display: flex;

    align-items: center;
    gap: 10px;
}

.image-preparation-options {
    margin: 14px 0 18px;
}

.image-preparation-link {
    padding: 0;

    border: 0;

    background: transparent;
    color: #168bd1;

    font: inherit;
    font-weight: 600;
}

.image-preparation-actions {
    justify-content: flex-end;
}

.image-preparation-actions > .primary-button,
.image-preparation-actions > .secondary-button {
    min-width: 82px;

    border: 1px solid rgba(94, 126, 147, 0.2);
    border-radius: 12px;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 12px rgba(49, 74, 89, 0.12);
    backdrop-filter: blur(8px) saturate(118%);
    -webkit-backdrop-filter: blur(8px) saturate(118%);

    color: #365164;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.image-preparation-actions > .primary-button {
    border-color: rgba(56, 144, 222, 0.46);

    background: linear-gradient(135deg, rgba(81, 170, 242, 0.95), rgba(42, 132, 221, 0.95));
    color: #ffffff;
}

.image-preparation-actions > .secondary-button {
    background: rgba(255, 255, 255, 0.72);
}

.image-preparation-actions > .primary-button:hover,
.image-preparation-actions > .secondary-button:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 8px 16px rgba(49, 74, 89, 0.16);
}

.image-preparation-actions > .primary-button:active,
.image-preparation-actions > .secondary-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 5px rgba(49, 74, 89, 0.16), 0 2px 6px rgba(49, 74, 89, 0.08);
}


/* ========================================
   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-settings-form.identity-read-only .form-input[readonly] {
    cursor: not-allowed;
    border-color: rgba(188, 210, 225, 0.88);
    background: linear-gradient(145deg, rgba(245, 250, 253, 0.92), rgba(232, 241, 247, 0.76));
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(86, 113, 131, 0.06);
}

.profile-avatar-settings {
    display: flex;

    align-items: center;

    gap: 16px;
}

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

    width: 96px;
    height: 96px;

    display: grid;
    place-items: center;
    isolation: isolate;

    overflow: hidden;

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

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

.profile-avatar-preview {
    display: block;
    grid-area: 1 / 1;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}

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


.profile-avatar-placeholder {
    display: flex;
    grid-area: 1 / 1;

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

    width: 100%;
    height: 100%;

    padding: 10px;

    text-align: center;

    color: var(--muted);

    font-size: 12px;
}

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

.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-row.is-user-info-trigger {
    cursor: pointer;
}

.group-member-row.is-user-info-trigger:focus-visible {
    outline: 3px solid rgba(51, 144, 236, 0.36);
    outline-offset: 2px;
}

.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;
    }
}

/* Final global-search override: it follows all legacy chat-item declarations. */
.chat-list:has(.message-search-result) {
    padding: 8px;
    background: linear-gradient(180deg, rgba(246, 251, 253, 0.82), rgba(235, 246, 250, 0.58));
}

.chat-list .message-search-result {
    display: grid;
    gap: 4px;
    min-height: 0;
    margin: 0 0 7px;
    padding: 10px 12px 11px;
    border: 1px solid rgba(151, 192, 215, 0.48);
    border-radius: 14px;
    background: linear-gradient(142deg, rgba(255, 255, 255, 0.92), rgba(231, 244, 250, 0.78));
    box-shadow: 0 5px 13px rgba(54, 94, 119, 0.11), inset 0 1px 1px rgba(255, 255, 255, 0.88);
    color: #213b4d;
    font-family: inherit;
    text-align: left;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.chat-list .message-search-result:last-child { margin-bottom: 0; }

.chat-list .message-search-result:hover,
.chat-list .message-search-result:focus-visible {
    border-color: rgba(67, 153, 214, 0.58);
    background: linear-gradient(142deg, rgba(245, 252, 255, 0.98), rgba(214, 239, 252, 0.88));
    box-shadow: 0 8px 18px rgba(47, 108, 145, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.92);
    outline: none;
    transform: translateY(-1px);
}

.chat-list .message-search-result:active { transform: translateY(0) scale(0.992); }

.chat-list .message-search-result strong {
    overflow: hidden;
    color: #203a4d;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list .message-search-result span {
    overflow: hidden;
    color: #668092;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list .message-search-result small {
    display: block;
    overflow: hidden;
    color: #405c6e;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list > .chat-item-meta {
    margin: 12px 8px;
    padding: 14px;
    border: 1px solid rgba(151, 192, 215, 0.4);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    color: #668092;
    text-align: center;
}

/* Final surface priority: match the lower sidebar's visible blue glass exactly. */
.sidebar-toolbar .chat-search,
.chat-header,
.message-form,
.message-composer-shell {
    background: linear-gradient(135deg, #f9fcfd 0%, #e8f2f7 100%);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.sidebar-toolbar .chat-search {
    border-color: rgba(104, 132, 150, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 3px 9px rgba(66, 101, 124, 0.07);
}

.chat-header {
    border-bottom-color: rgba(104, 132, 150, 0.2);
}

.message-form {
    border-top: 1px solid rgba(104, 132, 150, 0.2);
}

.message-composer-shell {
    border-color: rgba(104, 132, 150, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 7px rgba(66, 101, 124, 0.1);
}

/* Reuse the calm lower-sidebar glass surface in the primary work controls. */
:root {
    --workspace-glass-surface:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.88),
            rgba(232, 242, 247, 0.68)
        );
}

.sidebar-toolbar .chat-search,
.chat-header,
.message-form,
.message-composer-shell {
    background: var(--workspace-glass-surface);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.sidebar-toolbar .chat-search {
    border-color: rgba(104, 132, 150, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 3px 9px rgba(66, 101, 124, 0.055);
}

.chat-header {
    border-bottom-color: rgba(104, 132, 150, 0.18);
}

.message-form {
    border-top: 1px solid rgba(104, 132, 150, 0.18);
}

.message-composer-shell {
    border-color: rgba(104, 132, 150, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 7px rgba(66, 101, 124, 0.08);
}

/* Global message search: compact glass result cards in the messenger style. */
.chat-list:has(.message-search-result) {
    padding: 8px;
    background:
        linear-gradient(180deg, rgba(246, 251, 253, 0.82), rgba(235, 246, 250, 0.58));
}

.message-search-result {
    display: grid;
    gap: 4px;
    min-height: 0;
    margin: 0 0 7px;
    padding: 10px 12px 11px;
    border: 1px solid rgba(151, 192, 215, 0.48);
    border-radius: 14px;
    background:
        linear-gradient(142deg, rgba(255, 255, 255, 0.92), rgba(231, 244, 250, 0.78));
    box-shadow:
        0 5px 13px rgba(54, 94, 119, 0.11),
        inset 0 1px 1px rgba(255, 255, 255, 0.88);
    color: #213b4d;
    font-family: inherit;
    text-align: left;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.message-search-result:last-child {
    margin-bottom: 0;
}

.message-search-result:hover,
.message-search-result:focus-visible {
    border-color: rgba(67, 153, 214, 0.58);
    background:
        linear-gradient(142deg, rgba(245, 252, 255, 0.98), rgba(214, 239, 252, 0.88));
    box-shadow:
        0 8px 18px rgba(47, 108, 145, 0.16),
        inset 0 1px 1px rgba(255, 255, 255, 0.92);
    outline: none;
    transform: translateY(-1px);
}

.message-search-result:active {
    transform: translateY(0) scale(0.992);
}

.message-search-result strong {
    overflow: hidden;
    color: #203a4d;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-search-result span {
    overflow: hidden;
    color: #668092;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-search-result small {
    display: block;
    overflow: hidden;
    color: #405c6e;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list > .chat-item-meta {
    margin: 12px 8px;
    padding: 14px;
    border: 1px solid rgba(151, 192, 215, 0.4);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    color: #668092;
    text-align: center;
}

/* Telegram-like chat workspace */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sidebar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 58px;
    padding: 9px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.chat-search {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 11px;
    border-radius: 18px;
    background: #f1f4f6;
    color: var(--muted);
}

.chat-search-icon { font-size: 21px; line-height: 1; }
.chat-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.chat-search input::placeholder { font-size: 14px; letter-spacing: -0.01em; opacity: 0.88; }
.chat-search:focus-within { box-shadow: 0 0 0 2px rgba(51, 144, 236, .28); }

.new-chat-button {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 19px;
}
.new-chat-button:hover { background: var(--primary-hover); }

.chat-list { padding-bottom: 0; }
.chat-section-label { display: none; }
.chat-item {
    min-height: 62px;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-bottom: 0;
}
.chat-item.active { background: #dceeff; }
.chat-item:hover { background: #f4f7f9; }
.chat-item.active:hover { background: #dceeff; }
.chat-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #8bb9e8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
}
.chat-avatar.is-group { background: #8b9cac; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-item-content { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.chat-item-title-row { gap: 5px; }
.chat-item-title { font-size: 14px; font-weight: 600; }
.chat-item-preview-row { display: flex; min-width: 0; }
.chat-item-meta { margin-top: 0; color: var(--muted); font-size: 13px; }
.chat-item-aside { align-self: stretch; display: flex; flex: 0 0 auto; min-width: 34px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; }
.chat-item-aside.has-chat-indicators { min-width: 76px; }
.chat-item-time { color: var(--muted); font-size: 11px; line-height: 1; white-space: nowrap; }
.chat-item-indicators { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 20px; }
.chat-item-pin {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 20px;
    box-sizing: border-box;
    border: 1px solid rgba(220, 233, 241, 0.9);
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 2px 5px rgba(69, 96, 113, 0.14);
    color: #718998;
    line-height: 1;
}
.chat-item-pin svg { width: 13px; height: 13px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.chat-item-unread { min-width: 19px; height: 19px; padding: 0 5px; background: var(--primary); font-size: 10px; line-height: 19px; }

.message-search-result {
    display: grid;
    gap: 3px;
    text-align: left;
}

.message-search-result span,
.message-search-result small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-search-result small { color: var(--text); font-size: 12px; }
.chat-item-actions { align-self: center; margin-left: -2px; opacity: 0; transition: opacity .12s ease; }
.chat-item:hover .chat-item-actions, .chat-item:focus-within .chat-item-actions { opacity: 1; }
.chat-item-action-button { width: 28px; height: 28px; font-size: 18px; }

.chat-header { flex: 0 0 58px; height: 58px; min-height: 58px; gap: 10px; padding: 8px 16px; }
.chat-header-avatar { width: 44px; height: 44px; font-size: 15px; }
.chat-header-info { flex: 1 1 auto; }
.chat-header strong { font-size: 15px; }
.chat-header small { margin-top: 1px; font-size: 12px; }
.chat-header-actions { flex: 0 0 auto; }
.chat-header-menu { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.chat-header-menu:hover { background: var(--message-hover); color: var(--text); }

.pinned-message-bar { flex-basis: 44px; height: 44px; min-height: 44px; }
.pinned-message-content { gap: 9px; padding: 5px 12px; border-left: 3px solid var(--primary); }
.pinned-message-icon { font-size: 14px; }
.pinned-message-info { gap: 0; }
.pinned-message-author { font-size: 12px; }
.pinned-message-preview { font-size: 12px; }

.message-list {
    padding: 16px max(5%, 24px);
    background-color: #e9f0f2;
    background-image: radial-gradient(rgba(95, 125, 140, .11) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, .56) 1px, transparent 1px);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
}
.message { max-width: min(70%, 700px); margin-bottom: 8px; padding: 8px 10px; border: 0; border-radius: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.message.own { margin-left: auto; background: var(--message-own); }
.message-header { margin-bottom: 3px; }
.message-time { margin-top: 4px; font-size: 10px; }
.message-attachments { margin-bottom: 6px; border-radius: 12px; }
.reply-preview, .message-reply { border-left-color: var(--primary); }

.message-form { gap: 8px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); background: transparent; border-top: 0; }
.photo-button { flex-basis: 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--muted); font-size: 19px; }
.message-input-wrapper { min-height: 42px; padding: 4px 11px; border: 0; border-radius: 21px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.message-input-wrapper:focus-within { box-shadow: 0 0 0 2px rgba(51, 144, 236, .28); }
#message-input { height: 34px; padding: 6px 0; }
#send-button { flex: 0 0 40px; min-width: 40px; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 17px; }

@media (max-width: 700px) {
    .sidebar-toolbar { flex-basis: calc(58px + env(safe-area-inset-top)); padding-top: calc(9px + env(safe-area-inset-top)); }
    .chat-list-panel { min-width: 100%; max-width: none; }
    .chat-header { padding: 8px 10px; }
    .chat-header-avatar { width: 42px; height: 42px; }
    .message-list { padding: 10px; }
    .message { max-width: 82%; }
    .message-form { padding-left: 8px; padding-right: 8px; }
}


/* ========================================
   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: calc(
        90px +
        env(safe-area-inset-bottom)
    );

    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: calc(
            76px +
            env(safe-area-inset-bottom)
        );

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



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

.messenger-layout {
    gap: 0;
}

/* Левая колонка */
.chat-list-panel {
    flex: 0 0 clamp(300px, 35%, 390px);
    width: clamp(300px, 35%, 390px);
    min-width: 300px;
    max-width: 390px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
}

/* Правая колонка */
.chat-panel {
    border: 0 !important;
    border-radius: 0 !important;
}


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

.chat-empty-state-bubble {
    background: rgba(78, 102, 119, 0.74);
    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);
    }
}

/* ========================================
   REPLY PHOTO PREVIEW
======================================== */

.message-reply-content {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;
}

.message-reply-image {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    object-fit: cover;

    border-radius: 6px;

    background: #e5e7eb;
}

.message-reply-content .message-reply-text {
    min-width: 0;
}


/* ========================================
   MESSAGE EDITOR
======================================== */

.message-edit-wrapper {
    display: flex;

    flex-direction: column;

    gap: 8px;

    width: 100%;

    min-width: 0;
}

.message-edit-input {
    display: block;

    width: 100%;

    min-width: 0;

    min-height: 36px;
    max-height: 180px;

    padding:
        7px
        8px;

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

    outline: none;

    background: var(--panel);

    color: var(--text);

    font: inherit;

    line-height: 1.35;

    resize: vertical;

    box-sizing: border-box;
}

.message-edit-actions {
    display: flex;

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

    gap: 6px;
}

.message-edit-button {
    height: 30px;

    padding:
        0
        10px;

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

    border-radius: 7px;

    background: var(--panel);

    color: var(--text);

    font-size: 12px;
}

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

.message-edit-save {
    border-color: var(--primary);

    background: var(--primary);

    color: #ffffff;
}

.message-edit-save:hover {
    background: var(--primary-hover);
}

.message-edited {
    margin-left: 6px;

    color: var(--muted);

    font-size: 11px;
}

/* ========================================
   FORWARDED MESSAGE
======================================== */

.message-forwarded {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.3;
}

.message-forwarded-icon {
    flex: 0 0 auto;

    font-size: 15px;

    line-height: 1;
}

.message-forwarded-text {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ========================================
   FORWARD MESSAGE
======================================== */

.forward-message-dialog {
    overflow: hidden;
}

.forward-message-list {
    max-height: min(
        420px,
        calc(100vh - 180px)
    );

    overflow-y: auto;

    padding: 8px;
}

.forward-message-search {
    width: 100%;

    min-height: 42px;

    margin: 2px 0 8px;
    padding: 0 14px;

    border: 1px solid rgba(105, 156, 195, 0.34);
    border-radius: 16px;

    background: rgba(247, 252, 255, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 5px 14px rgba(63, 104, 136, 0.08);

    color: var(--text);

    font: inherit;
}

.forward-message-search::placeholder {
    color: var(--muted);
}

.forward-message-search:focus-visible {
    outline: none;
    border-color: rgba(61, 145, 219, 0.72);
    box-shadow:
        0 0 0 3px rgba(89, 177, 238, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.forward-message-section-title {
    padding: 12px 12px 5px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.forward-message-chat {
    width: 100%;

    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 9px 12px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: var(--text);

    text-align: left;

    cursor: pointer;
}

.forward-message-chat:hover,
.forward-message-chat:focus-visible {
    background: var(--message-hover);

    outline: none;
}

.forward-message-chat:focus-visible {
    box-shadow:
        inset 0 0 0 2px
        #4f7cff;
}

.forward-message-chat:disabled {
    cursor: wait;

    opacity: 0.58;
}

.forward-message-avatar {
    position: relative;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex;

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

    overflow: hidden;

    border-radius: 50%;

    background: #4f7cff;

    color: #fff;

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

.forward-message-avatar.is-group {
    background: #6c63b5;

    font-size: 19px;
}

.forward-message-avatar img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: var(--panel);
}

.forward-message-chat-details {
    min-width: 0;

    display: flex;

    flex: 1;

    flex-direction: column;

    gap: 3px;
}

.forward-message-chat-title {
    overflow: hidden;

    font-weight: 600;

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

.forward-message-chat-subtitle {
    overflow: hidden;

    color: var(--muted);

    font-size: 13px;

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

.forward-message-empty {
    padding: 28px 20px;

    color: var(--muted);

    text-align: center;
}

@media (max-width: 420px) {
    .forward-message-list {
        max-height:
            calc(
                100vh -
                150px
            );
    }

    .forward-message-chat {
        min-height: 68px;

        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ========================================
   MESSAGE SELECTION
======================================== */

.message-selection-bar {
    flex: 0 0 64px;

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

    display: flex;

    align-items: center;

    padding: 0 14px;

    background: var(--panel);

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

    box-sizing: border-box;

    z-index: 5;
}


.message-selection-cancel {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: flex;

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

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--text);

    font-size: 28px;

    line-height: 1;
}


.message-selection-cancel:hover {
    background: var(--message-hover);
}


.message-selection-count {
    flex: 0 1 auto;

    min-width: 0;

    margin-left: 10px;

    color: var(--text);

    font-size: 17px;

    font-weight: 600;
}


.message-selection-spacer {
    flex: 1 1 auto;

    min-width: 12px;
}


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

    min-height: 38px;

    margin-left: 10px;
    padding: 9px 15px;

    border: 1px solid rgba(171, 223, 255, 0.78);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(123, 202, 249, 0.95) 0%,
            rgba(55, 159, 230, 0.93) 58%,
            rgba(37, 133, 211, 0.95) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(23, 110, 181, 0.18),
        0 5px 12px rgba(37, 125, 197, 0.24);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}


.message-selection-action:hover {
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 6px 13px rgba(37, 125, 197, 0.28);
}


.message-selection-action:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        inset 0 2px 4px rgba(20, 84, 137, 0.26),
        0 2px 6px rgba(37, 125, 197, 0.18);
}


.message-selection-delete {
    border-color: rgba(255, 195, 195, 0.82);

    background:
        linear-gradient(
            145deg,
            rgba(255, 143, 143, 0.95) 0%,
            rgba(239, 89, 89, 0.94) 58%,
            rgba(218, 65, 65, 0.96) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(173, 46, 46, 0.2),
        0 5px 12px rgba(202, 70, 70, 0.22);
}


/*
 * Индикатор выбора.
 *
 * Он находится справа от сообщения.
 */

.message-selection-indicator {
    position: absolute;

    top: 50%;
    right: -42px;

    width: 28px;
    height: 28px;

    display: flex;

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

    transform: translateY(-50%);

    box-sizing: border-box;

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

    border-radius: 50%;

    background: var(--panel);

    color: transparent;

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

    line-height: 1;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}


.message-selection-indicator.selected {
    border-color: var(--primary);

    background: var(--primary);

    color: #ffffff;
}


/* Final responsive overrides: this block follows the desktop sidebar rules. */
@media (max-width: 700px) {
    .chat-list-panel {
        flex-basis: 100%;
        width: 100%;
        min-width: 100%;
        max-width: none;
    }
}


@media (max-width: 420px) {
    .photo-button {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    #send-button {
        flex: 0 0 40px;
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
    }
}


/*
 * В режиме выделения оставляем место
 * справа под кружок.
 */

.message-list.selection-mode {
    padding-right: 54px;
}


.message-list.drag-selecting,
.message-list.drag-selecting * {
    cursor: default !important;
    user-select: none;
}


/*
 * Не используем грубую рамку вокруг
 * выбранного сообщения.
 */

.message.selected {
    box-shadow: none;
}


/*
 * На узких экранах индикатор немного
 * уменьшаем и придвигаем.
 */

@media (max-width: 700px) {
    .message-selection-bar {
        flex-basis: 56px;

        height: 56px;
        min-height: 56px;

        padding: 0 10px;
    }


    .message-selection-count {
        font-size: 16px;
    }


    .message-selection-action {
        min-height: 34px;

        margin-left: 5px;
        padding: 8px 10px;

        font-size: 12px;
    }


    .message-selection-indicator {
        right: -36px;

        width: 26px;
        height: 26px;

        font-size: 15px;
    }


    .message-list.selection-mode {
        padding-right: 44px;
    }
}

/* ========================================
   TELEGRAM-LIKE PASS 2
======================================== */

.message.with-author-avatar {
    margin-left: 40px;
}

.message-author-avatar {
    position: absolute;
    left: -39px;
    bottom: 0;

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #7da8cf;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;

    box-shadow:
        0 0 0 2px rgba(233, 240, 242, .96);
}

.message-author-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.message {
    box-shadow:
        0 1px 1px rgba(31, 41, 51, .06);
}

.message::after {
    content: "";

    position: absolute;
    bottom: 0;

    width: 8px;
    height: 11px;

    pointer-events: none;
}

.message:not(.own)::after {
    left: -5px;

    background: var(--message-other);

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}

.message.own::after {
    right: -5px;

    background: var(--message-own);

    clip-path: polygon(
        0 0,
        100% 100%,
        0 100%
    );
}

.message-author {
    color: #2b7fc3;
}

.reply-preview,
.message-reply {
    border-left:
        3px solid
        var(--primary);

    border-radius: 8px;

    background:
        rgba(51, 144, 236, .08);
}

.message.own .message-reply {
    background:
        rgba(72, 166, 90, .08);
}

.message-attachments.single {
    width: min(420px, 100%);

    border-radius: 12px;
}

.message-attachments.single
.message-attachment {
    border-radius: 12px;
}

.contacts-section {
    border-top:
        1px solid
        var(--border);

    background: #ffffff;
}

.contacts-button {
    min-height: 38px;

    padding:
        7px
        12px;

    border-radius: 0;

    color: var(--muted);

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

.user-profile-button {
    min-height: 42px;

    padding:
        7px
        12px;
}

.user-profile-name {
    font-size: 13px;
}

.user-profile-arrow {
    font-size: 17px;
}

@media (max-width: 700px) {
    .message.with-author-avatar {
        margin-left: 38px;
    }

    .message-author-avatar {
        left: -36px;

        width: 29px;
        height: 29px;
    }
}

@media (max-width: 420px) {
    .message.with-author-avatar {
        margin-left: 34px;
    }

    .message-author-avatar {
        left: -33px;

        width: 27px;
        height: 27px;
    }
}


/* ========================================
   UI PASS 3 — COMPOSER AND FINISHING DETAILS
======================================== */

.new-chat-button {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(51, 144, 236, 0.08);
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    font-size: 19px;
}

.new-chat-button:hover {
    background: rgba(51, 144, 236, 0.09);
    color: var(--primary);
}

.chat-header {
    padding: 7px 14px;
    background: #f0f7fa;
    border-bottom-color: rgba(76, 103, 122, 0.12);
}

.chat-header strong {
    line-height: 1.2;
}

.chat-header small {
    margin-top: 0;
    line-height: 1.2;
}

.chat-header-menu {
    width: 33px;
    height: 33px;
}

.message-list {
    background-color: #edf3f5;
    background-image:
        radial-gradient(ellipse 44% 30% at 8% 15%, rgba(112, 149, 169, 0.055), transparent 72%),
        radial-gradient(ellipse 34% 46% at 86% 8%, rgba(255, 255, 255, 0.62), transparent 74%),
        radial-gradient(ellipse 38% 28% at 66% 82%, rgba(130, 162, 178, 0.045), transparent 75%),
        linear-gradient(122deg, transparent 31%, rgba(118, 151, 169, 0.027) 31.5%, transparent 32%),
        linear-gradient(28deg, transparent 68%, rgba(255, 255, 255, 0.5) 68.5%, transparent 69%);
    background-size: 460px 330px, 540px 430px, 500px 360px, 340px 290px, 420px 360px;
    background-position: 0 0, 100% 0, 48% 100%, 20px 40px, 0 0;
}

.chat-empty-state-bubble {
    background: rgba(99, 118, 130, 0.62);
    box-shadow: 0 1px 4px rgba(50, 69, 80, 0.1);
}

.message-form {
    gap: 8px;
    background: linear-gradient(135deg, #f9fcfd 0%, #e8f2f7 100%);
    border-top: 1px solid rgba(104, 132, 150, 0.2);
}

.message-composer-shell {
    flex: 1 1 0;
    min-width: 0;
    min-height: 45px;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(104, 132, 150, 0.24);
    border-radius: 23px;
    background: linear-gradient(135deg, #f9fcfd 0%, #e8f2f7 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 7px rgba(66, 101, 124, 0.1);
    overflow: hidden;
}

.message-composer-shell:focus-within {
    border-color: rgba(51, 144, 236, 0.22);
    box-shadow: 0 0 0 1px rgba(51, 144, 236, 0.18), 0 1px 2px rgba(44, 64, 74, 0.08);
}

.message-composer-shell .photo-button {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #758693;
    font-size: 18px;
}

.message-composer-shell .photo-button:hover {
    background: #f0f5f7;
}

.message-composer-shell .message-input-wrapper {
    position: relative;

    flex: 1 1 auto;
    width: auto;
    min-height: 43px;
    padding: 3px 10px 3px 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.message-composer-shell .message-input-wrapper:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.message-composer-shell #message-input {
    min-height: 34px;
    height: 34px;
    max-height: 144px;
    padding: 6px 0;
}

.mention-suggestions {
    position: absolute;

    z-index: 40;

    bottom: calc(100% + 10px);
    left: 0;

    width: min(360px, calc(100vw - 34px));
    max-height: 300px;

    overflow-y: auto;

    padding: 6px;

    border: 1px solid rgba(136, 163, 182, 0.34);
    border-radius: 16px;

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

    box-shadow:
        0 12px 28px rgba(39, 65, 82, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(16px);
}

/* The mention panel opens above the composer, so its ancestors must not
   crop the panel outside the input's rounded shell. */
.message-form,
.message-composer-shell {
    overflow: visible;
}

.mention-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 8px;

    border: 0;
    border-radius: 11px;

    background: transparent;

    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.mention-suggestion:hover,
.mention-suggestion.is-active {
    background: rgba(201, 226, 243, 0.72);
}

.mention-suggestion-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;

    background: linear-gradient(145deg, #9bc8ef, #6caee0);

    box-shadow: 0 2px 5px rgba(61, 114, 153, 0.18);

    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.mention-suggestion-details {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.mention-suggestion-name {
    overflow: hidden;

    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-suggestion-login {
    margin-top: 1px;

    color: var(--muted);

    font-size: 12px;
}

#send-button {
    flex: 0 0 41px;
    min-width: 41px;
    width: 41px;
    height: 41px;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
}

.contacts-section {
    border-top-color: rgba(76, 103, 122, 0.1);
}

.contacts-button {
    min-height: 33px;
    padding: 6px 12px;
    color: #7c8b95;
    font-size: 11.5px;
    font-weight: 500;
}

.user-profile {
    border-top-color: rgba(76, 103, 122, 0.1);
}

.user-profile-button {
    min-height: 37px;
    padding: 6px 12px;
}

.user-profile-name {
    color: #6f7f8a;
    font-size: 12px;
}

.user-profile-arrow {
    color: #8b98a0;
    font-size: 16px;
}

@media (max-width: 700px) {
    .message-composer-shell {
        min-height: 44px;
    }

    .message-composer-shell .photo-button {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    #send-button {
        flex-basis: 40px;
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 420px) {
    .message-form {
        gap: 5px;
    }

    .message-composer-shell .photo-button {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    #send-button {
        flex-basis: 38px;
        min-width: 38px;
        width: 38px;
        height: 38px;
    }
}

/* UI PASS 4 — CALM WALLPAPER AND COMPOSER */
.message-list {
    background-color: #edf3f5;
    background-image:
        radial-gradient(circle at 14% 22%, rgba(104, 137, 154, 0.045) 0 1px, transparent 1.5px),
        radial-gradient(circle at 76% 16%, rgba(255, 255, 255, 0.28) 0 2px, transparent 2.5px),
        radial-gradient(ellipse at 34% 76%, rgba(117, 148, 163, 0.032) 0 3px, transparent 4px);
    background-size: 38px 42px, 64px 58px, 72px 68px;
    background-position: 3px 9px, 18px 4px, 11px 22px;
}

.message-composer-shell {
    border-color: #e3e9ed;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(44, 64, 74, 0.055);
}

.message-composer-shell:focus-within {
    border-color: rgba(51, 144, 236, 0.24);
    box-shadow: 0 0 0 1px rgba(51, 144, 236, 0.08), 0 1px 2px rgba(44, 64, 74, 0.055);
}

.chat-empty-state-bubble {
    background: rgba(82, 101, 114, 0.54);
    box-shadow: 0 1px 3px rgba(50, 69, 80, 0.07);
}

/* UI PASS 5 — MEDIA BUBBLE AND REPLY COMPOSER */

.message.message--photo-only {
    width: fit-content;
    max-width: min(460px, 70%);
    padding: 6px;
}

.message--photo-only .message-attachments.single {
    display: inline-grid;
    grid-template-columns: auto;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 2px;
    overflow: hidden;
}

.message--photo-only .message-attachment {
    width: fit-content;
    max-width: 100%;
    aspect-ratio: auto;
}

.message--photo-only .message-attachment img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 460px;
    margin: 0;
    object-fit: contain;
}

.reply-preview[hidden] {
    display: none !important;
}

.message-composer-shell .reply-preview {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 35px;

    display: flex;
    align-items: center;
    gap: 8px;

    margin: 2px 0 1px;
    padding: 4px 4px 4px 8px;

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

    background: rgba(51, 144, 236, 0.07);
}

.message-composer-shell .reply-preview-content {
    flex: 1 1 auto;
    min-width: 0;

    display: grid;
    gap: 1px;
}

.message-composer-shell .reply-preview-author {
    min-width: 0;

    overflow: hidden;

    color: var(--primary);

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;

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

.message-composer-shell .reply-preview-text {
    min-width: 0;

    overflow: hidden;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.25;

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

.message-composer-shell .reply-preview-close {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: inline-grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--muted);

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.message-composer-shell .reply-preview-close:hover {
    background: rgba(72, 95, 109, 0.08);
    color: var(--text);
}

@media (max-width: 700px) {
    .message.message--photo-only {
        max-width: 82%;
    }
}

@media (max-width: 420px) {
    .message.message--photo-only {
        max-width: 88%;
    }

    .message--photo-only .message-attachment img {
        max-width: 100%;
    }
}

/* UI PASS 6 — MESSAGE EDGE ALIGNMENT */
.message-list {
    padding: 16px 20px;
}

@media (max-width: 700px) {
    .message-list {
        padding: 16px 12px;
    }
}

@media (max-width: 420px) {
    .message-list {
        padding: 16px 8px;
    }
}

/* UI PASS 7 — RECTANGULAR MULTI-PHOTO GRID */
.message:not(.message--photo-only) .message-attachments:not(.single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(345px, 100%);
    max-width: 100%;
    gap: 4px;
}

.message:not(.message--photo-only) .message-attachments:not(.single):has(.message-attachment:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.message:not(.message--photo-only) .message-attachments:not(.single) .message-attachment {
    aspect-ratio: 3 / 4;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.message:not(.message--photo-only) .message-attachments:not(.single) .message-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* UI PASS 9 — SHRINK-WRAP GALLERY-ONLY BUBBLE */
.message.message--gallery-only {
    width: fit-content;
    max-width: min(369px, 70%);
    padding: 6px;
}

.message--gallery-only .message-attachments:not(.single) {
    width: min(345px, 100%);
    max-width: 100%;
    margin-bottom: 2px;
}

@media (max-width: 700px) {
    .message.message--gallery-only {
        max-width: 82%;
    }
}

@media (max-width: 420px) {
    .message.message--gallery-only {
        max-width: 88%;
    }
}

/* UI PASS 10 — ALL MESSAGES LEFT ALIGNED */
.message.own {
    margin-left: 0;
    margin-right: auto;
}

.message.own::after {
    left: -5px;
    right: auto;

    background: var(--message-own);

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}

/* UI PASS 11 — MESSAGE TEXT AND AVATARS FOR ALL */
.message-text {
    font-size: 14px;
}

.message.own.with-author-avatar {
    margin-left: 40px;
    margin-right: auto;
}

@media (max-width: 700px) {
    .message.own.with-author-avatar {
        margin-left: 38px;
    }
}

@media (max-width: 420px) {
    .message.own.with-author-avatar {
        margin-left: 34px;
    }
}

.messenger-settings-view {
    flex: 0 0 auto;

    padding: 6px 8px;

    border-top:
        1px solid
        rgba(76, 103, 122, 0.1);

    background: #ffffff;
}

.messenger-settings-view[hidden] {
    display: none !important;
}

.messenger-settings-option {
    padding: 8px 4px 5px;
}

.messenger-settings-option-title {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.send-key-choice {
    min-height: 31px;

    display: flex;

    align-items: center;
    gap: 8px;

    padding: 5px 7px;

    border-radius: 8px;

    color: var(--muted);

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

    cursor: pointer;
}

.send-key-choice:hover {
    background: rgba(80, 124, 149, 0.07);
}

.send-key-choice input {
    width: 14px;
    height: 14px;

    margin: 0;

    accent-color: #4b9fe6;
}

.contacts-view {
    flex: 1 1 0;

    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #ffffff;
}

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

.contacts-view-header {
    flex: 0 0 42px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    border-bottom: 1px solid rgba(76, 103, 122, 0.1);

    color: var(--text);

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

.contacts-view .contacts-list {
    flex: 1 1 0;

    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 0;
}

.contact-item {
    min-height: 62px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 12px;

    border: 0;
    border-radius: 0;

    background: transparent;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.contact-item:hover {
    background: #f4f7f9;
}

.contact-name {
    flex: 1 1 auto;
    min-width: 0;

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

.contacts-view .contact-username {
    display: none;
}

.contact-details {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-details .contact-name {
    flex: 0 1 auto;
}

.contact-presence {
    overflow: hidden;

    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-presence.is-online {
    color: #229b5d;
    font-weight: 500;
}

.contact-avatar .chat-avatar-presence {
    top: -1px;
    right: -1px;
    bottom: auto;
    border-color: #ffffff;
}

.contacts-view-header {
    justify-content: space-between;
    gap: 12px;
}

.contacts-view-title {
    min-width: 0;
}

.contacts-close-button {
    width: 30px;
    height: 30px;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.72),
        rgba(225, 238, 248, 0.42)
    );

    box-shadow:
        0 5px 12px rgba(60, 91, 112, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);

    color: #567083;

    cursor: pointer;

    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);

    transition:
        transform 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.contacts-close-button:hover {
    transform: translateY(-1px);

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92),
        rgba(205, 230, 246, 0.68)
    );

    box-shadow:
        0 7px 16px rgba(60, 91, 112, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contacts-close-button:active {
    transform: translateY(0);
}

.contacts-close-button:focus-visible {
    outline: 2px solid rgba(51, 144, 236, 0.72);
    outline-offset: 2px;
}

.contacts-close-button span {
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}

/* Group menu and read-only group information */

.group-info-overview {
    display: grid;
    gap: 4px;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--message-bg);
}

.group-info-name {
    font-size: 16px;
    font-weight: 700;
}

.group-info-meta {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

/* Keep the group-dialog scrollbar inside the rounded dialog surface. */
#group-info-modal .modal-dialog,
#group-management-modal .modal-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#group-info-modal .group-management-content,
#group-management-modal .group-management-content {
    min-height: 0;
    overflow-y: auto;
}

/* Unified Messenger surfaces for dialogs and contextual menus */
.modal-backdrop {
    background: rgba(87, 108, 121, 0.28);
    backdrop-filter: blur(4px) saturate(92%);
    -webkit-backdrop-filter: blur(4px) saturate(92%);
}

.modal-dialog {
    border: 1px solid rgba(76, 103, 122, 0.14);
    background: #ffffff;
    box-shadow:
        0 18px 42px rgba(49, 74, 89, 0.18),
        0 3px 10px rgba(49, 74, 89, 0.08);
}

.modal-header {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    border-bottom-color: rgba(76, 103, 122, 0.12);
}

.modal-header h2 {
    color: #263b49;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.modal-close {
    border: 1px solid transparent;
    border-radius: 9px;
    color: #6f8594;
    font-size: 24px;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.modal-close:hover {
    border-color: rgba(76, 103, 122, 0.12);
    background: #eef5f8;
    color: #365164;
}

.message-action-menu {
    border-color: rgba(76, 103, 122, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 14px 32px rgba(49, 74, 89, 0.16),
        0 2px 8px rgba(49, 74, 89, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.action-menu-label,
.action-menu-separator {
    border-color: rgba(76, 103, 122, 0.12);
    background-color: rgba(76, 103, 122, 0.12);
}

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

.form-input {
    border-color: rgba(76, 103, 122, 0.16);
    background: #fbfdfe;
}

.form-input:focus {
    border-color: rgba(51, 144, 236, 0.72);
    box-shadow: 0 0 0 3px rgba(51, 144, 236, 0.12);
}

.group-info-overview,
.group-member-row,
.new-chat-user {
    border-color: rgba(76, 103, 122, 0.14);
    background: #fbfdfe;
}

.group-member-row:hover,
.new-chat-user:hover {
    background: #f4f9fc;
}

.primary-button {
    box-shadow: 0 3px 8px rgba(51, 144, 236, 0.2);
}

.secondary-button {
    border-color: rgba(76, 103, 122, 0.16);
    background: #fbfdfe;
    color: #365164;
}

.secondary-button:hover {
    background: #eef5f8;
}

.danger-button {
    border-color: rgba(220, 38, 38, 0.5);
    background: #fffafa;
    color: #c83a3a;
}

.danger-button:hover {
    background: #d94b4b;
    color: #ffffff;
}

.modal-error {
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: #fff5f5;
}
/* Dialog typography follows the chat list and message text scale */
.modal-dialog,
.message-action-menu {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
}

.modal-header h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
}

.modal-dialog .form-section-title,
.modal-dialog .form-label,
.modal-dialog .group-info-name,
.modal-dialog .group-member-name,
.modal-dialog .new-chat-user-name,
.modal-dialog .group-info-meta,
.modal-dialog .group-member-meta,
.modal-dialog .new-chat-user-login,
.modal-dialog .modal-error,
.action-menu-label,
.action-menu-item,
.primary-button,
.secondary-button,
.danger-button {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}

.action-menu-label {
    text-transform: none;
}

.modal-dialog .group-member-meta,
.modal-dialog .new-chat-user-login {
    line-height: 1.35;
}

.modal-dialog .group-info-name,
.modal-dialog .group-member-name,
.modal-dialog .new-chat-user-name {
    line-height: 1.35;
}

/* Keep a captioned single photo bubble as wide as its actual content. */
.message.message--single-attachment {
    width: fit-content;
    max-width: min(460px, 70%);
}

.message--single-attachment .message-attachments.single {
    display: inline-grid;
    grid-template-columns: auto;
    width: fit-content;
    max-width: 100%;
}

.message--single-attachment .message-attachment {
    width: fit-content;
    max-width: 100%;
    aspect-ratio: auto;
}

.message--single-attachment .message-attachment img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 460px;
    margin: 0;
    object-fit: contain;
}

@media (max-width: 700px) {
    .message.message--single-attachment {
        max-width: 82%;
    }
}

@media (max-width: 420px) {
    .message.message--single-attachment {
        max-width: 88%;
    }
}

/* Photo group navigation */
.photo-viewer-navigation {
    position: absolute;
    top: 50%;
    z-index: 3001;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    background: rgba(30, 42, 50, 0.56);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 42px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
}

.photo-viewer-previous {
    left: max(18px, env(safe-area-inset-left));
}

.photo-viewer-next {
    right: max(18px, env(safe-area-inset-right));
}

.photo-viewer-navigation:hover:not(:disabled) {
    background: rgba(51, 144, 236, 0.76);
}

.photo-viewer-navigation:active:not(:disabled) {
    transform: translateY(-50%) scale(0.94);
}

.photo-viewer-navigation:disabled {
    opacity: 0.28;
    cursor: default;
}

.photo-viewer-image {
    touch-action: none;
}

@media (max-width: 700px) {
    .photo-viewer-navigation {
        width: 44px;
        height: 44px;
        font-size: 38px;
    }

    .photo-viewer-previous {
        left: max(10px, env(safe-area-inset-left));
    }

    .photo-viewer-next {
        right: max(10px, env(safe-area-inset-right));
    }
}

/* Glass controls for the photo viewer */
.photo-viewer-close,
.photo-viewer-navigation {
    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(232, 247, 255, 0.52);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.3),
            rgba(113, 151, 173, 0.18)
        );

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.52),
        inset 0 -1px 1px rgba(25, 52, 68, 0.22);

    color: #ffffff;

    font-size: 0;
    line-height: 1;

    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease,
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.photo-viewer-close::before {
    content: "×";

    font-family: "Inter", Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    transform: translateY(-1px);
}

.photo-viewer-navigation::before {
    font-family: "Inter", Arial, sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;

    transform: translateY(-1px);
}

.photo-viewer-previous::before {
    content: "‹";
}

.photo-viewer-next::before {
    content: "›";
}

.photo-viewer-close {
    transform: scale(1);
}

.photo-viewer-navigation {
    transform: translateY(-50%) scale(1);
}

.photo-viewer-close:hover,
.photo-viewer-navigation:hover:not(:disabled) {
    border-color: rgba(231, 248, 255, 0.78);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.46),
            rgba(60, 153, 227, 0.4)
        );

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 1px rgba(255, 255, 255, 0.64),
        inset 0 -1px 1px rgba(25, 52, 68, 0.2);
}

.photo-viewer-close:hover {
    transform: scale(1.06);
}

.photo-viewer-navigation:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
}

.photo-viewer-close:active {
    transform: scale(0.92);
}

.photo-viewer-navigation:active:not(:disabled) {
    transform: translateY(-50%) scale(0.92);
}

.photo-viewer-close:focus-visible,
.photo-viewer-navigation:focus-visible {
    outline: 2px solid rgba(178, 229, 255, 0.92);
    outline-offset: 3px;
}

.photo-viewer-navigation:disabled {
    transform: translateY(-50%) scale(1);
}

@media (max-width: 700px) {
    .photo-viewer-navigation::before {
        font-size: 38px;
    }
}

/* The close glyph is isolated from the original button text for exact centering. */
.photo-viewer-close {
    display: block;
    line-height: 0;
}

.photo-viewer-close::before {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    transform: none;
}

/* Shared circular glass close controls for dialogs and the contacts view. */
.modal-close,
.contacts-close-button {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 1px solid rgba(202, 222, 234, 0.9);
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.82),
        rgba(220, 237, 246, 0.54)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 3px 9px rgba(55, 82, 101, 0.16);

    color: #607c8f;
    line-height: 1;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.modal-close {
    font-size: 0;
}

.modal-close::before {
    content: "×";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: "Inter", Arial, sans-serif;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(1px);
}

.contacts-close-button span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: "Inter", Arial, sans-serif;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
}

.modal-close:hover,
.contacts-close-button:hover {
    border-color: rgba(174, 211, 232, 0.96);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        rgba(203, 232, 246, 0.76)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 5px 13px rgba(55, 82, 101, 0.22);
    transform: translateY(-1px);
}

.modal-close:active,
.contacts-close-button:active {
    box-shadow: inset 0 2px 5px rgba(79, 111, 133, 0.2);
    transform: translateY(0) scale(0.94);
}

.modal-close:focus-visible,
.contacts-close-button:focus-visible {
    outline: 2px solid rgba(84, 163, 221, 0.86);
    outline-offset: 2px;
}


/* Compact glass attachment control shared by all chat composers. */
.message-composer-shell .photo-button {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    margin: 4px 2px 4px 4px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(187, 211, 225, 0.86);
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.84),
        rgba(215, 233, 242, 0.56)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 2px 7px rgba(58, 86, 105, 0.14);

    color: #698397;

    backdrop-filter: blur(9px) saturate(1.06);
    -webkit-backdrop-filter: blur(9px) saturate(1.06);
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.attachment-icon {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;

    transform: rotate(-7deg);
}

.message-composer-shell .photo-button:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        rgba(200, 229, 244, 0.78)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 4px 10px rgba(58, 86, 105, 0.2);

    transform: translateY(-1px);
}

.message-composer-shell .photo-button:active {
    box-shadow: inset 0 2px 5px rgba(79, 111, 133, 0.2);

    transform: scale(0.94);
}


/* Compact glass prompt shown while no chat is selected. */
.chat-empty-state-bubble {
    max-width: min(255px, 72%);
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 13px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.34),
        rgba(225, 239, 244, 0.18)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 5px 14px rgba(57, 80, 92, 0.08);
    backdrop-filter: blur(14px) saturate(112%);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    color: #536675;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.system-announcement-settings {
    border-top: 1px solid rgba(76, 103, 122, 0.1);
}

.system-announcement-settings-help {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

#system-announcement-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 8px 9px;
    border: 1px solid rgba(76, 103, 122, 0.17);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    line-height: 1.35;
}

.system-announcement-settings-actions {
    display: flex;
    gap: 7px;
    margin-top: 8px;
}

.system-announcement-settings-actions button {
    padding: 6px 9px;
    border: 1px solid rgba(51, 144, 236, 0.34);
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.system-announcement-settings-actions button.secondary {
    background: rgba(255, 255, 255, 0.72);
    color: #637582;
}

.system-announcement-settings-status {
    min-height: 15px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.system-announcement-popup {
    position: fixed;
    z-index: 1200;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: min(340px, calc(100vw - 36px));
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(223, 238, 245, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 30px rgba(45, 70, 84, 0.2);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    color: #344a58;
}

.system-announcement-popup strong {
    display: block;
    margin-bottom: 4px;
    color: #263e4d;
    font-size: 13px;
}

.system-announcement-popup p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

.message-delete-dialog {
    box-sizing: border-box;
    width: min(340px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    overflow: hidden;
}

.message-delete-for-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.message-delete-for-all input {
    appearance: none;
    width: 21px;
    height: 21px;
    margin: 0;
    border: 1px solid rgba(81, 138, 174, 0.45);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.message-delete-for-all input:checked {
    border-color: #42a5d8;
    background-color: #42a5d8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 3.4 3.4L16 5.5' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.message-delete-dialog .modal-actions {
    box-sizing: border-box;
    gap: 10px;
    padding: 14px 20px 20px;
}

.message-delete-dialog .modal-actions .secondary-button,
.message-delete-dialog .modal-actions .danger-button {
    min-width: 82px;
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 5px 12px rgba(49, 74, 89, 0.12);
    backdrop-filter: blur(8px) saturate(118%);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease;
}

.message-delete-dialog .modal-actions .secondary-button {
    border-color: rgba(98, 129, 148, 0.22);
    background: rgba(255, 255, 255, 0.72);
}

.message-delete-dialog .modal-actions .danger-button {
    border-color: rgba(238, 90, 90, 0.44);
    background: rgba(255, 248, 248, 0.76);
    color: #e35151;
}

.message-delete-dialog .modal-actions .secondary-button:hover,
.message-delete-dialog .modal-actions .danger-button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 16px rgba(49, 74, 89, 0.16);
}

.message-delete-dialog .modal-actions .secondary-button:active,
.message-delete-dialog .modal-actions .danger-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        inset 0 2px 5px rgba(49, 74, 89, 0.16),
        0 2px 6px rgba(49, 74, 89, 0.08);
}

/* One glass treatment for every dialog confirmation and cancellation action. */
.modal-dialog .modal-actions > .primary-button,
.modal-dialog .modal-actions > .secondary-button,
.modal-dialog .modal-actions > .danger-button,
.notification-duration-actions > .primary-button,
.notification-duration-actions > .secondary-button {
    min-width: 82px;
    border: 1px solid rgba(94, 126, 147, 0.2);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 5px 12px rgba(49, 74, 89, 0.12);
    backdrop-filter: blur(8px) saturate(118%);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease;
}

.modal-dialog .modal-actions > .primary-button,
.notification-duration-actions > .primary-button {
    border-color: rgba(56, 144, 222, 0.46);
    background: linear-gradient(
        135deg,
        rgba(81, 170, 242, 0.95),
        rgba(42, 132, 221, 0.95)
    );
    color: #ffffff;
}

.modal-dialog .modal-actions > .secondary-button,
.notification-duration-actions > .secondary-button {
    background: rgba(255, 255, 255, 0.72);
    color: #365164;
}

.modal-dialog .modal-actions > .danger-button {
    border-color: rgba(231, 77, 77, 0.42);
    background: rgba(255, 248, 248, 0.78);
    color: #de4d4d;
}

.modal-dialog .modal-actions > .primary-button:hover,
.modal-dialog .modal-actions > .secondary-button:hover,
.modal-dialog .modal-actions > .danger-button:hover,
.notification-duration-actions > .primary-button:hover,
.notification-duration-actions > .secondary-button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 16px rgba(49, 74, 89, 0.16);
}

.modal-dialog .modal-actions > .primary-button:active,
.modal-dialog .modal-actions > .secondary-button:active,
.modal-dialog .modal-actions > .danger-button:active,
.notification-duration-actions > .primary-button:active,
.notification-duration-actions > .secondary-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        inset 0 2px 5px rgba(49, 74, 89, 0.16),
        0 2px 6px rgba(49, 74, 89, 0.08);
}

.modal-dialog .modal-actions > .primary-button:focus-visible,
.modal-dialog .modal-actions > .secondary-button:focus-visible,
.modal-dialog .modal-actions > .danger-button:focus-visible,
.notification-duration-actions > .primary-button:focus-visible,
.notification-duration-actions > .secondary-button:focus-visible {
    outline: 2px solid rgba(48, 145, 225, 0.66);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .system-announcement-popup {
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        width: min(340px, calc(100vw - 20px));
    }
}


/* Warm, high-contrast base palette. */
:root {
    --bg: #f5f1ea;
    --panel: #fffefc;
    --border: #e7e1d8;
    --text: #132a38;
    --muted: #536b7c;
    --message-hover: #f5f0e8;
    --message-own: #dcf4d4;
    --message-other: #fffefc;
}

#login-screen {
    background:
        radial-gradient(
            ellipse at 20% 16%,
            rgba(255, 255, 255, 0.72),
            transparent 47%
        ),
        linear-gradient(
            145deg,
            #f8f4ed,
            #f1eadf
        );
}

#messenger-screen {
    background-color: #f5f1ea;
}

.message-list {
    background-color: #eef2ed;
    background-image:
        linear-gradient(
            rgba(238, 242, 237, 0.76),
            rgba(238, 242, 237, 0.76)
        ),
        url("/images/truck-service-wallpaper-v2.png");
    background-position: center, center;
    background-size: auto, 320px 213px;
    background-repeat: repeat, repeat;
}

input,
textarea,
select {
    color: var(--text);
}

input::placeholder,
textarea::placeholder {
    color: #788a95;
    opacity: 1;
}

/* Universal document and archive attachments. */
.selected-photo.selected-file {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 7px;
    border: 1px solid rgba(91, 132, 157, 0.2);
    background: rgba(255, 255, 255, 0.76);
}

.selected-file-kind,
.message-file-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(77, 136, 172, 0.28);
    border-radius: 8px;
    background: rgba(230, 244, 252, 0.76);
    color: #3d7599;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.selected-file-kind {
    width: fit-content;
    padding: 2px 4px;
}

.selected-file-name {
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-attachments:has(.message-file-attachment) {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
}

.message-file-attachment {
    min-height: 68px;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 12px;
    background: transparent;
    cursor: default;
}

.message-file-download {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 42px 10px 10px;
    border: 1px solid rgba(88, 126, 148, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 3px 9px rgba(49, 74, 89, 0.08);
    color: var(--text);
    text-decoration: none;
}

.message-file-download:hover {
    background: rgba(240, 249, 253, 0.9);
}

.message-file-kind {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
}

.message-file-details {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
}

.message-file-details strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-file-details small {
    color: var(--muted);
    font-size: 11px;
}

.message-list-loading {
    align-self: center;
    margin: auto;
    padding: 10px 14px;
    border: 1px solid rgba(98, 136, 157, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 14px rgba(49, 74, 89, 0.08);
    color: var(--muted);
    font-size: 13px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Send is part of the composer, paired visually with the attachment control. */
.message-composer-shell #send-button {
    flex: 0 0 34px;
    align-self: flex-end;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 4px 4px 4px 2px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(126, 171, 199, 0.7);
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(244, 251, 255, 0.94),
        rgba(166, 211, 237, 0.74)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 2px 7px rgba(58, 86, 105, 0.18);
    color: #3b82aa;
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.message-composer-shell #send-button > span[aria-hidden="true"] {
    display: block;
    transform: translate(1px, -0.5px);
}

.message-composer-shell #send-button:hover:not(:disabled) {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 1),
        rgba(142, 202, 235, 0.86)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 5px 11px rgba(58, 86, 105, 0.24);
    transform: translateY(-1px);
}

.message-composer-shell #send-button:active:not(:disabled) {
    box-shadow: inset 0 2px 5px rgba(79, 111, 133, 0.22);
    transform: translateY(0) scale(0.94);
}

.message-composer-shell #send-button:disabled {
    opacity: 0.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.message-composer-shell #send-button:focus-visible {
    outline: 2px solid rgba(84, 163, 221, 0.86);
    outline-offset: 2px;
}

/* Every photo is shown inside a calm portrait frame without cropping it. */
.message.message--photo-only:has(.message-attachment > img),
.message.message--single-attachment:has(.message-attachment > img) {
    width: min(292px, 70%);
    max-width: min(292px, 70%);
}

.message--photo-only .message-attachments.single:has(.message-attachment > img),
.message--single-attachment .message-attachments.single:has(.message-attachment > img) {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.message--photo-only .message-attachment:has(> img),
.message--single-attachment .message-attachment:has(> img),
.message:not(.message--photo-only) .message-attachments:not(.single) .message-attachment:has(> img) {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(145deg, rgba(225, 236, 240, 0.92), rgba(245, 241, 233, 0.88));
}

.message--photo-only .message-attachment > img,
.message--single-attachment .message-attachment > img,
.message:not(.message--photo-only) .message-attachments:not(.single) .message-attachment > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 700px) {
    .message.message--photo-only:has(.message-attachment > img),
    .message.message--single-attachment:has(.message-attachment > img) {
        width: min(270px, 82%);
        max-width: min(270px, 82%);
    }
}

/* Captioned image galleries must shrink to the actual media grid, too. */
.message:has(.message-attachments:not(.single) .message-attachment > img):not(:has(.message-file-attachment)) {
    width: fit-content;
    max-width: min(369px, 70%);
    padding: 6px;
}

.message:has(.message-attachments:not(.single) .message-attachment > img):not(:has(.message-file-attachment)) .message-attachments:not(.single) {
    width: min(345px, 100%);
    max-width: 100%;
    margin-bottom: 2px;
}

@media (max-width: 700px) {
    .message:has(.message-attachments:not(.single) .message-attachment > img):not(:has(.message-file-attachment)) {
        max-width: 82%;
    }
}

@media (max-width: 420px) {
    .message:has(.message-attachments:not(.single) .message-attachment > img):not(:has(.message-file-attachment)) {
        max-width: 88%;
    }
}

/* Sidebar controls use the same glass, typography and contrast as chat UI. */
.contacts-section,
.user-profile,
.messenger-settings-view {
    border-top: 1px solid rgba(104, 132, 150, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(232, 242, 247, 0.68));
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.technical-support-section {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-top: 1px solid rgba(104, 132, 150, 0.18);
    background:
        linear-gradient(135deg, rgba(227, 246, 255, 0.92), rgba(241, 250, 254, 0.78));
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.technical-support-label {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(117, 184, 221, 0.56);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(207, 238, 255, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 4px 12px rgba(53, 129, 175, 0.1);
    color: #1e5a7e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.pwa-refresh-button {
    display: none;
}

html.is-standalone-pwa .technical-support-label {
    color: #263c4e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

html.is-standalone-pwa,
html.is-standalone-pwa body,
html.is-standalone-pwa #messenger-screen {
    background: #ffffff;
}

html.is-standalone-pwa .sidebar-toolbar {
    background: #ffffff;
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

/*
 * Reserve only the actual lower safe area below the profile controls.
 * This keeps the bottom controls clear of the home indicator without reducing
 * the visible chat list by the larger top inset.
 */
html.is-standalone-pwa .chat-list-panel {
    box-sizing: border-box;
    padding-bottom: 0;
}

html.is-standalone-pwa .user-profile::after {
    display: block;
    height: max(36px, env(safe-area-inset-top));
    content: "";
}

html.is-standalone-pwa .pwa-refresh-button {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0 0 1px;

    border: 1px solid rgba(105, 171, 208, 0.62);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(202, 235, 250, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 3px 9px rgba(44, 114, 154, 0.2);
    color: #277ba9;
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

html.is-standalone-pwa .pwa-refresh-button:hover {
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 5px 13px rgba(44, 114, 154, 0.24);
}

html.is-standalone-pwa .pwa-refresh-button:active {
    transform: translateY(1px) scale(0.96);
}

html.is-standalone-pwa .pwa-refresh-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

html.is-standalone-pwa .pwa-refresh-button.is-refreshing {
    animation: pwa-refresh-spin 720ms linear infinite;
}

@keyframes pwa-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

.technical-support-label:hover {
    filter: brightness(1.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 15px rgba(53, 129, 175, 0.16);
}

.technical-support-label:active {
    transform: translateY(1px);
}

.technical-support-icon {
    display: grid;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid rgba(104, 170, 208, 0.66);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(191, 229, 249, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(58, 127, 166, 0.15);
    color: #277ba9;
    font-size: 14px;
    font-weight: 700;
}

.technical-support-badge {
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid rgba(89, 166, 211, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    color: #3d84ac;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.technical-support-dialog {
    width: min(430px, calc(100vw - 32px));
    max-height: min(620px, calc(100dvh - 32px));
    overflow: hidden;
}

.technical-support-help {
    margin: 18px 20px 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.technical-support-dialog textarea {
    width: calc(100% - 40px);
    min-height: 120px;
    margin: 0 20px;
    resize: vertical;
    box-sizing: border-box;
}

.technical-support-attachment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 12px 20px 0;
    padding: 0 12px;
    border: 1px dashed rgba(99, 158, 193, 0.65);
    border-radius: 12px;
    background: rgba(236, 248, 254, 0.66);
    color: #28658a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.technical-support-attachment input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.technical-support-file-name {
    margin: 8px 20px 0;
    padding: 8px 10px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(232, 245, 252, 0.7);
    color: #3b647c;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technical-support-dialog .form-error {
    margin: 10px 20px 0;
}

.technical-support-dialog .modal-actions {
    margin-top: 0;
    padding: 16px 20px 20px;
}

@media (max-width: 700px), (pointer: coarse) {
    .modal {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .technical-support-dialog {
        width: min(430px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .technical-support-help {
        margin: 14px 16px 10px;
    }

    .technical-support-dialog textarea {
        width: calc(100% - 32px);
        min-height: 96px;
        margin: 0 16px;
        max-height: min(180px, 28dvh);
        /*
         * iOS enlarges the entire PWA when a focused form control is smaller
         * than 16px. Keep this field at 16px on touch devices only.
         */
        font-size: 16px;
    }

    .technical-support-attachment {
        min-height: 40px;
        margin: 10px 16px 0;
    }

    .technical-support-dialog .modal-actions {
        padding: 12px 16px 16px;
    }
}

.contacts-button,
.user-profile-button {
    min-height: 43px;
    padding: 8px 12px;
    color: #263c4e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.contacts-button:hover,
.contacts-button[aria-expanded="true"],
.user-profile-button:hover,
.user-profile-button[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.85), rgba(246, 250, 252, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 4px 13px rgba(73, 111, 135, 0.1);
    color: #17334a;
}

.contacts-button:active,
.user-profile-button:active {
    box-shadow: inset 0 2px 6px rgba(68, 105, 130, 0.15);
}

.contacts-arrow,
.user-profile-arrow {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(167, 194, 210, 0.52);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(220, 235, 244, 0.55));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 2px 7px rgba(84, 122, 145, 0.12);
    color: #597b91;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.user-profile-name {
    color: #263c4e;
    font-size: 13px;
    font-weight: 500;
}

.messenger-settings-view {
    padding: 8px 10px 10px;
}

.messenger-settings-option {
    padding: 8px;
    border: 1px solid rgba(170, 197, 211, 0.48);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 14px rgba(66, 101, 124, 0.06);
}

.messenger-settings-option-title {
    margin-bottom: 8px;
    color: #263c4e;
    font-size: 13px;
    font-weight: 600;
}

.send-key-choice {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 9px;
    color: #405c6f;
    font-size: 13px;
    font-weight: 400;
}

.send-key-choice:hover {
    background: rgba(214, 235, 248, 0.72);
}

.push-notification-settings {
    margin-top: 8px;
}

.push-notification-settings-help {
    margin: 0 0 9px;
    color: #607b8e;
    font-size: 12px;
    line-height: 1.35;
}

.push-notification-toggle {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(116, 185, 229, 0.75);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(218, 241, 253, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 11px rgba(59, 126, 166, 0.14);
    color: #246e9d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.push-notification-toggle:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(195, 232, 252, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 6px 15px rgba(59, 126, 166, 0.2);
    transform: translateY(-1px);
}

.push-notification-toggle:active:not(:disabled) {
    box-shadow: inset 0 2px 5px rgba(59, 126, 166, 0.18);
    transform: translateY(0);
}

.push-notification-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.user-profile-menu {
    padding: 7px;
    border: 1px solid rgba(166, 195, 211, 0.64);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 242, 248, 0.82));
    box-shadow: 0 14px 30px rgba(46, 76, 96, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.user-profile-menu button {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #263c4e;
    font-size: 13px;
    font-weight: 400;
}

.user-profile-menu button:hover {
    background: rgba(213, 235, 248, 0.78);
}

/* Zoom controls and gestures for the full-screen image viewer. */
.photo-viewer {
    overflow: hidden;
    touch-action: none;
}

.photo-viewer-image {
    transform-origin: center;
    transition: transform 150ms ease;
    cursor: zoom-in;
    -webkit-user-drag: none;
    user-drag: none;
}

.photo-viewer.is-zoomed .photo-viewer-image {
    cursor: grab;
}

.photo-viewer.is-panning .photo-viewer-image {
    cursor: grabbing;
    transition: none;
}

.photo-viewer-zoom-controls {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(76px, calc(env(safe-area-inset-right) + 58px));
    z-index: 3002;
    display: flex;
    align-items: center;
    gap: 7px;
}

.photo-viewer-zoom-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(232, 247, 255, 0.52);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(113, 151, 173, 0.2));
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.26), inset 0 1px 1px rgba(255, 255, 255, 0.56), inset 0 -1px 1px rgba(25, 52, 68, 0.2);
    color: #ffffff;
    font-family: "Inter", Arial, sans-serif;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.photo-viewer-zoom-reset {
    font-size: 20px;
}

.photo-viewer-zoom-button:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(60, 153, 227, 0.42));
    transform: scale(1.07);
}

.photo-viewer-zoom-button:active:not(:disabled) {
    transform: scale(0.92);
}

.photo-viewer-zoom-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.photo-viewer-zoom-button:focus-visible {
    outline: 2px solid rgba(178, 229, 255, 0.92);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .photo-viewer-zoom-controls {
        top: max(10px, env(safe-area-inset-top));
        right: max(66px, calc(env(safe-area-inset-right) + 54px));
        gap: 5px;
    }

    .photo-viewer-zoom-button {
        width: 34px;
        height: 34px;
        font-size: 23px;
    }

    .photo-viewer-zoom-reset {
        font-size: 18px;
    }
}

/* Reserve a dedicated lower rail, so zoom controls never cover the photo. */
.photo-viewer {
    padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 76px);
}

@media (max-width: 700px) {
    .photo-viewer {
        padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px);
    }
}

/* Final close-control override: this stays after all historical component
   styles so every dialog uses the same optically centred two-stroke X. */
.modal-close,
.contacts-close-button,
.photo-viewer-close,
.message-receipt-close {
    position: relative;
    font-size: 0;
}

.modal-close::before,
.modal-close::after,
.contacts-close-button span::before,
.contacts-close-button span::after,
.photo-viewer-close::before,
.photo-viewer-close::after,
.message-receipt-close::before,
.message-receipt-close::after {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    display: block;
    width: 12px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after,
.contacts-close-button span::after,
.photo-viewer-close::after,
.message-receipt-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.contacts-close-button span {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    font-size: 0;
    line-height: 0;
}

/* The viewer close control is positioned against the full-screen overlay,
   not against the image.  Keep that placement while sharing the same X. */
.photo-viewer-close {
    position: absolute;
}

/* Mandatory central update notice, shared by browsers and installed PWA. */
.system-announcement-popup {
    position: fixed;
    z-index: 1600;
    inset: 0;
    width: auto;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) calc(max(24px, env(safe-area-inset-left)) + var(--system-announcement-workspace-left, 0px));
    background: rgba(26, 42, 53, 0.38);
    backdrop-filter: blur(7px) saturate(108%);
    -webkit-backdrop-filter: blur(7px) saturate(108%);
}

.system-announcement-card {
    box-sizing: border-box;
    width: min(510px, 100%);
    padding: clamp(26px, 5vw, 42px);
    border: 1px solid rgba(245, 253, 255, 0.84);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(220, 239, 249, 0.8));
    box-shadow: 0 22px 54px rgba(20, 46, 63, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.94), inset 0 -1px 1px rgba(58, 104, 130, 0.16);
    color: #253d4e;
    text-align: center;
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.system-announcement-card h2 {
    margin: 0 0 15px;
    color: #1f394b;
    font-size: clamp(20px, 4.8vw, 26px);
    font-weight: 600;
    line-height: 1.2;
}

.system-announcement-card p {
    margin: 0;
    color: #425e70;
    font-size: clamp(15px, 3.8vw, 18px);
    font-weight: 400;
    line-height: 1.52;
    white-space: pre-line;
}

.system-announcement-refresh-button {
    min-width: min(100%, 220px);
    min-height: 48px;
    margin-top: 28px;
    padding: 11px 20px;
    border: 1px solid rgba(229, 248, 255, 0.82);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(80, 183, 245, 0.97), rgba(39, 133, 222, 0.94));
    box-shadow: 0 8px 18px rgba(36, 125, 196, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 1px rgba(10, 83, 146, 0.22);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.system-announcement-refresh-button:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 11px 22px rgba(36, 125, 196, 0.36), inset 0 1px 1px rgba(255, 255, 255, 0.64), inset 0 -1px 1px rgba(10, 83, 146, 0.22);
}

.system-announcement-refresh-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
}

.system-announcement-refresh-button:disabled {
    cursor: wait;
    opacity: 0.74;
}

@media (max-width: 520px) {
    .system-announcement-popup {
        padding: 16px 16px 16px calc(16px + var(--system-announcement-workspace-left, 0px));
    }

    .system-announcement-card {
        border-radius: 21px;
    }

    .system-announcement-refresh-button {
        width: 100%;
    }
}

/* Unified glass treatment for initials and uploaded photographs alike. */
.chat-avatar,
.forward-message-avatar,
.message-author-avatar,
.mention-suggestion-avatar,
.profile-avatar-preview-wrap {
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgba(232, 248, 255, 0.82);
    background: linear-gradient(145deg, rgba(164, 209, 239, 0.96), rgba(101, 159, 207, 0.9));
    box-shadow:
        0 3px 9px rgba(46, 84, 112, 0.23),
        inset 0 1px 1px rgba(255, 255, 255, 0.58),
        inset 0 -1px 1px rgba(35, 75, 104, 0.2);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.chat-avatar.is-group,
.forward-message-avatar.is-group {
    background: linear-gradient(145deg, rgba(174, 193, 209, 0.96), rgba(113, 139, 160, 0.92));
}

.chat-avatar img,
.forward-message-avatar img,
.message-author-avatar img,
.profile-avatar-preview {
    border-radius: inherit;
}

.chat-avatar::after,
.forward-message-avatar::after,
.message-author-avatar::after,
.mention-suggestion-avatar::after,
.profile-avatar-preview-wrap::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), inset 0 -1px 1px rgba(30, 66, 91, 0.18);
    content: "";
    pointer-events: none;
}

.chat-avatar {
    overflow: visible;
}

.chat-avatar .chat-avatar-presence {
    top: auto;
    right: -2px;
    bottom: -2px;
    z-index: 4;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(247, 253, 255, 0.98);
    background: radial-gradient(circle at 35% 30%, #9ff5c2 0 18%, #2ecb70 42%, #12954c 100%);
    box-shadow: 0 0 0 1px rgba(20, 126, 72, 0.22), 0 1px 4px rgba(16, 132, 70, 0.52), 0 0 7px rgba(64, 224, 132, 0.48);
}

/* Photo zoom controls live below the image, centred in the viewer workspace. */
.photo-viewer-zoom-controls {
    top: auto;
    right: auto;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3002;
    width: max-content;
    padding: 7px;
    border: 1px solid rgba(232, 247, 255, 0.4);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(87, 122, 144, 0.19));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.27), inset 0 1px 1px rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    transform: translateX(-50%);
}

@media (max-width: 700px) {
    .photo-viewer-zoom-controls {
        top: auto;
        right: auto;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 50%;
        padding: 5px;
        transform: translateX(-50%);
    }
}

/* Glass cancellation control for local and global chat search. */
.chat-search input[type="search"] {
    appearance: textfield;
    -webkit-appearance: none;
}

.chat-search input[type="search"]::-webkit-search-cancel-button,
.chat-search input[type="search"]::-webkit-search-decoration {
    display: none;
}

.chat-search-cancel {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    padding: 0 0 2px;
    border: 1px solid rgba(168, 205, 225, 0.72);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(222, 239, 248, 0.86));
    box-shadow: 0 3px 9px rgba(47, 98, 129, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(83, 135, 165, 0.18);
    color: #4d7893;
    font-family: inherit;
    font-size: 21px;
    font-weight: 300;
    line-height: 1;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.chat-search-cancel:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(208, 235, 249, 0.94));
    box-shadow: 0 5px 12px rgba(47, 98, 129, 0.23), inset 0 1px 1px rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
}

.chat-search-cancel:active {
    transform: translateY(1px) scale(0.94);
}

.chat-search-cancel:focus-visible {
    outline: 2px solid rgba(48, 149, 219, 0.42);
    outline-offset: 2px;
}

/* Keep the cancel button inside the search field without reducing its useful width. */
.sidebar-toolbar {
    position: relative;
}

.sidebar-toolbar .chat-search {
    padding-right: 43px;
}

.sidebar-toolbar .chat-search input {
    box-sizing: border-box;
}

.sidebar-toolbar .chat-search input::placeholder {
    font-size: 11px;
}

.sidebar-toolbar .chat-search-cancel {
    position: absolute;
    top: 50%;
    right: 58px;
    z-index: 2;
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    font-size: 19px;
    transform: translateY(-50%);
}

.sidebar-toolbar .chat-search-cancel:hover {
    transform: translateY(calc(-50% - 1px));
}

.sidebar-toolbar .chat-search-cancel:active {
    transform: translateY(calc(-50% + 1px)) scale(0.94);
}

/* Global-search cards must be last: legacy chat-item styles appear above. */
/* Search is a quiet sidebar row, matching Contacts and Messenger Settings. */
.sidebar-toolbar {
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(232, 242, 247, 0.68));
    border-bottom: 1px solid rgba(104, 132, 150, 0.18);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.sidebar-toolbar .chat-search {
    height: 38px;
    min-height: 38px;
    padding: 0 41px 0 12px;
    border: 1px solid rgba(167, 194, 210, 0.52);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 9px rgba(66, 101, 124, 0.055);
    color: #617c8d;
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.sidebar-toolbar .chat-search:focus-within {
    border-color: rgba(104, 170, 208, 0.66);
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.72), rgba(246, 250, 252, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 4px 13px rgba(73, 111, 135, 0.1);
}

.sidebar-toolbar .chat-search-icon {
    color: #718b9b;
    font-size: 17px;
}

.sidebar-toolbar .chat-search input {
    color: #263c4e;
    font-size: 13px;
}

.sidebar-toolbar .chat-search input::placeholder {
    color: #718b9b;
    font-size: 12px;
    font-weight: 400;
}

.sidebar-toolbar .chat-search-cancel {
    right: 64px;
    width: 25px;
    height: 25px;
    min-height: 25px;
    padding-bottom: 1px;
    border-color: rgba(167, 194, 210, 0.52);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 241, 248, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 6px rgba(66, 101, 124, 0.12);
    color: #607f92;
    font-size: 18px;
}

.sidebar-toolbar .chat-search-cancel:hover {
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.9), rgba(246, 250, 252, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(66, 101, 124, 0.15);
}

/* Unified glass search field, aligned with the photo-viewer control rail. */
.sidebar-toolbar {
    gap: 10px;
    padding: 9px 12px;
}

.sidebar-toolbar .chat-search {
    height: 40px;
    min-height: 40px;
    padding: 0 45px 0 13px;
    border: 1px solid rgba(183, 216, 233, 0.8);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(222, 240, 249, 0.72));
    box-shadow: 0 4px 12px rgba(52, 101, 130, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(93, 145, 175, 0.14);
    color: #668092;
    backdrop-filter: blur(12px) saturate(122%);
    -webkit-backdrop-filter: blur(12px) saturate(122%);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.sidebar-toolbar .chat-search:focus-within {
    border-color: rgba(81, 163, 218, 0.76);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(221, 243, 253, 0.86));
    box-shadow: 0 0 0 3px rgba(80, 164, 220, 0.16), 0 5px 14px rgba(52, 101, 130, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.96);
}

.sidebar-toolbar .chat-search-icon {
    flex: 0 0 auto;
    color: #5f89a3;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.sidebar-toolbar .chat-search input {
    height: 100%;
    color: #29475a;
    font-size: 13px;
    line-height: 1;
}

.sidebar-toolbar .chat-search input::placeholder {
    color: #7691a1;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 1;
}

.sidebar-toolbar .chat-search-cancel {
    right: 62px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    border-color: rgba(182, 216, 233, 0.78);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(213, 237, 249, 0.8));
    box-shadow: 0 3px 9px rgba(47, 98, 129, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(83, 135, 165, 0.16);
    color: #4b7d9a;
    font-size: 20px;
}

.sidebar-toolbar .chat-search-cancel:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(196, 230, 247, 0.94));
}

/* Contacts-style search row wins over the earlier rounded search experiment. */
.sidebar-toolbar {
    padding: 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid rgba(104, 132, 150, 0.18);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.sidebar-toolbar .chat-search {
    height: 38px;
    min-height: 38px;
    padding: 0 41px 0 12px;
    border-color: rgba(167, 194, 210, 0.52);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 9px rgba(66, 101, 124, 0.055);
    color: #617c8d;
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.sidebar-toolbar .chat-search:focus-within {
    border-color: rgba(104, 170, 208, 0.66);
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.72), rgba(246, 250, 252, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 4px 13px rgba(73, 111, 135, 0.1);
}

.sidebar-toolbar .chat-search-icon { color: #718b9b; font-size: 17px; }
.sidebar-toolbar .chat-search input { color: #263c4e; font-size: 13px; }
.sidebar-toolbar .chat-search input::placeholder { color: #718b9b; font-size: 12px; font-weight: 400; }

.sidebar-toolbar .chat-search-cancel {
    right: 64px;
    width: 25px;
    height: 25px;
    min-height: 25px;
    padding-bottom: 1px;
    border-color: rgba(167, 194, 210, 0.52);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 241, 248, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 6px rgba(66, 101, 124, 0.12);
    color: #607f92;
    font-size: 18px;
}

.sidebar-toolbar .chat-search-cancel:hover {
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.9), rgba(246, 250, 252, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(66, 101, 124, 0.15);
}


/* Compact mobile search typography. */
@media (max-width: 700px), (pointer: coarse) {
    .sidebar-toolbar .chat-search input,
    .sidebar-toolbar .chat-search input::placeholder {
        font-size: 11px;
    }
}
/* Add-chat control follows the same compact glass treatment as sidebar arrows. */
.sidebar-toolbar .new-chat-button {
    flex: 0 0 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgba(167, 194, 210, 0.52);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 241, 248, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 6px rgba(66, 101, 124, 0.12);
    color: #3e789d;
    font-family: inherit;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.sidebar-toolbar .new-chat-button > span[aria-hidden="true"] {
    display: block;
    margin-top: -2px;
    line-height: 1;
}

.sidebar-toolbar .new-chat-button:hover {
    background: linear-gradient(135deg, rgba(224, 241, 252, 0.9), rgba(246, 250, 252, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(66, 101, 124, 0.15);
    color: #236b96;
    transform: translateY(-1px);
}

.sidebar-toolbar .new-chat-button:active {
    transform: translateY(1px) scale(0.94);
}

.sidebar-toolbar .new-chat-button:focus-visible {
    outline: 2px solid rgba(65, 151, 207, 0.48);
    outline-offset: 2px;
}

/* Exact optical centring: the same line-built method as every modal close icon. */
.sidebar-toolbar .chat-search-cancel,
.sidebar-toolbar .new-chat-button {
    font-size: 0;
}

.sidebar-toolbar .new-chat-button {
    position: relative;
}

.sidebar-toolbar .chat-search-cancel::before,
.sidebar-toolbar .chat-search-cancel::after,
.sidebar-toolbar .new-chat-button::before,
.sidebar-toolbar .new-chat-button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 999px;
    background: currentColor;
    content: "";
    pointer-events: none;
}

.sidebar-toolbar .chat-search-cancel::before,
.sidebar-toolbar .chat-search-cancel::after {
    width: 9px;
    height: 1.5px;
}

.sidebar-toolbar .chat-search-cancel::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sidebar-toolbar .chat-search-cancel::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sidebar-toolbar .new-chat-button > span[aria-hidden="true"] {
    display: none;
}

.sidebar-toolbar .new-chat-button::before {
    width: 13px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.sidebar-toolbar .new-chat-button::after {
    width: 2px;
    height: 13px;
    transform: translate(-50%, -50%);
}

/* Text-only bubbles always shrink to their actual text, while galleries keep
   their separately defined fixed-column layout. */
.message:not(:has(.message-attachments)) {
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    max-width: min(700px, 70%);
}

.message:not(:has(.message-attachments)) .message-text {
    max-width: 100%;
}

@media (max-width: 700px) {
    .message:not(:has(.message-attachments)) {
        max-width: 82%;
    }
}

@media (max-width: 420px) {
    .message:not(:has(.message-attachments)) {
    max-width: 88%;
    }
}

/* Use an explicit class as well: some embedded/PWA browsers do not reliably
   re-evaluate :has() after the message DOM is populated. */
.message.message--text-only {
    box-sizing: border-box;
    width: max-content !important;
    min-width: 0;
    padding-top: 4px !important;
    max-width: min(520px, 66%) !important;
}

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

/* A name row belongs only to an incoming group message.  Keeping it hidden in
   direct and own text messages prevents an empty line above the text. */
.message.message--text-only .message-header {
    display: none;
    margin: 0;
}

.message.message--text-only.message--group-incoming .message-header {
    display: flex;
    margin-bottom: 3px;
}

/* The glass avatar rule is shared with regular avatars, but a message avatar
   must stay outside the bubble and therefore must not occupy a text row. */
.message-author-avatar {
    position: absolute;
}

/* The browser must not preserve an arbitrary visual anchor while attachment
   images receive their final dimensions; JavaScript owns initial chat position. */
.message-list {
    overflow-anchor: none;
}

@media (max-width: 700px) {
    .message.message--text-only {
        max-width: 82% !important;
    }
}

@media (max-width: 420px) {
    .message.message--text-only {
        max-width: 88% !important;
    }
}

/* The message opened from global search gets a brief, unmistakable focus cue. */
.message.message-search-highlight {
    z-index: 2;
    animation: message-search-focus 2.2s ease both;
}

@keyframes message-search-focus {
    0%,
    100% {
        box-shadow: 0 1px 1px rgba(31, 41, 51, 0.06);
    }

    18%,
    68% {
        box-shadow: 0 0 0 3px rgba(78, 164, 221, 0.5), 0 8px 20px rgba(48, 124, 172, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.44);
    }
}

.chat-list:has(.message-search-result) {
    padding: 8px;
    background: linear-gradient(180deg, rgba(246, 251, 253, 0.82), rgba(235, 246, 250, 0.58));
}

.chat-list .message-search-result {
    display: grid;
    gap: 4px;
    min-height: 0;
    margin: 0 0 7px;
    padding: 10px 12px 11px;
    border: 1px solid rgba(151, 192, 215, 0.48);
    border-radius: 14px;
    background: linear-gradient(142deg, rgba(255, 255, 255, 0.92), rgba(231, 244, 250, 0.78));
    box-shadow: 0 5px 13px rgba(54, 94, 119, 0.11), inset 0 1px 1px rgba(255, 255, 255, 0.88);
    color: #213b4d;
    font-family: inherit;
    text-align: left;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.chat-list .message-search-result:last-child { margin-bottom: 0; }

.chat-list .message-search-result:hover,
.chat-list .message-search-result:focus-visible {
    border-color: rgba(67, 153, 214, 0.58);
    background: linear-gradient(142deg, rgba(245, 252, 255, 0.98), rgba(214, 239, 252, 0.88));
    box-shadow: 0 8px 18px rgba(47, 108, 145, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.92);
    outline: none;
    transform: translateY(-1px);
}

.chat-list .message-search-result:active { transform: translateY(0) scale(0.992); }

.chat-list .message-search-result strong {
    overflow: hidden;
    color: #203a4d;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list .message-search-result span {
    overflow: hidden;
    color: #668092;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list .message-search-result small {
    display: block;
    overflow: hidden;
    color: #405c6e;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list > .chat-item-meta {
    margin: 12px 8px;
    padding: 14px;
    border: 1px solid rgba(151, 192, 215, 0.4);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    color: #668092;
    text-align: center;
}

/* Keep full chat rows visible above the fixed lower PWA controls. */
@media (max-width: 700px), (pointer: coarse) {
    .chat-list .chat-item {
        min-height: 56px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .chat-list .chat-avatar {
        width: 42px;
        height: 42px;
    }
}

html.is-standalone-pwa .chat-list {
    margin-bottom: 0;
}

/* Keep long group information reachable from the top on mobile and PWA. */
@media (max-width: 700px), (pointer: coarse) {
    #group-info-modal.modal {
        align-items: flex-start !important;
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    #group-info-modal .modal-dialog {
        box-sizing: border-box;
        width: min(460px, 100%);
        height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: 0;
        overflow: hidden;
    }

    #group-info-modal .modal-header {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 7px 10px 7px 14px;
    }

    #group-info-modal .group-management-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px;
    }
}

/* The standalone app has less vertical space than the browser version. */
html.is-standalone-pwa #group-info-modal .group-info-overview {
    gap: 2px;
    margin-bottom: 12px;
    padding: 9px 10px;
}

html.is-standalone-pwa #group-info-modal .form-section {
    margin-bottom: 12px;
}

html.is-standalone-pwa #group-info-modal .group-management-members {
    gap: 5px;
}

html.is-standalone-pwa #group-info-modal .group-member-row {
    padding: 7px 10px;
}

html.is-standalone-pwa #group-info-modal .group-member-meta {
    margin-top: 1px;
}


/*
 * Keep group information inside the visible viewport on every screen.
 * The dialog itself is pinned to the viewport; only its content scrolls.
 */
#group-info-modal.modal {
    display: block;
    padding: 0;
}

#group-info-modal .modal-dialog {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 50%;
    box-sizing: border-box;
    width: min(460px, calc(100vw - 16px));
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
    transform: translateX(-50%);
}

#group-info-modal .modal-header {
    flex: 0 0 auto;
}

#group-info-modal .group-management-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


/* Keep the message-delete confirmation as a compact rounded dialog on mobile. */
@media (max-width: 700px), (pointer: coarse) {
    #message-delete-modal.modal,
    #chat-delete-modal.modal {
        align-items: center;
        justify-content: center;
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
    }

    #message-delete-modal .message-delete-dialog,
    #chat-delete-modal .message-delete-dialog {
        width: min(340px, 100%);
        max-width: 340px;
        max-height: calc(
            100dvh -
            32px -
            env(safe-area-inset-top) -
            env(safe-area-inset-bottom)
        );
        margin: 0;
        border-radius: 16px;
    }
}



/* Unified top navigation for Contacts and Settings. */
.sidebar-toolbar { gap: 7px; }
.sidebar-toolbar .chat-search { flex: 1 1 auto; min-width: 0; }
.sidebar-toolbar-action {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(105, 171, 208, 0.46);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(208, 238, 252, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 3px 9px rgba(44, 114, 154, 0.16);
    color: #277ba9;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.sidebar-toolbar-action:hover,
.sidebar-toolbar-action[aria-expanded="true"] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(186, 228, 248, 0.84));
    box-shadow: inset 0 1px 0 #ffffff, 0 5px 13px rgba(44, 114, 154, 0.22);
}
.sidebar-toolbar-action:active { transform: translateY(1px) scale(0.96); }
.sidebar-toolbar-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.sidebar-toolbar .new-chat-button {
    justify-content: center;
    border-top: 1px solid rgba(105, 171, 208, 0.46);
    border-radius: 50%;
    color: #277ba9;
    font-size: 30px;
    font-weight: 400;
}
.contacts-view,
.messenger-settings-view {
    flex: 1 1 0;
    min-height: 0;
    border-top: 0;
    background: #ffffff;
}
.messenger-settings-view {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.messenger-settings-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 12px;
}
.messenger-settings-view .user-profile {
    flex: 0 0 auto;
    margin: 0 10px 12px;
    border: 1px solid rgba(104, 132, 150, 0.18);
    border-radius: 14px;
}
.messenger-settings-view .user-profile-menu { bottom: calc(100% + 6px); }
.sidebar-bottom-safe-area { flex: 0 0 0; height: 0; background: #ffffff; }
html.is-standalone-pwa .user-profile::after { display: none; }
html.is-standalone-pwa .sidebar-bottom-safe-area {
    flex-basis: max(28px, env(safe-area-inset-bottom));
    height: max(28px, env(safe-area-inset-bottom));
}
@media (max-width: 520px) {
    .sidebar-toolbar { gap: 5px; padding-right: 8px; padding-left: 8px; }
    .sidebar-toolbar-action { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px; }
    .sidebar-toolbar-action svg { width: 19px; height: 19px; }
    .sidebar-toolbar .new-chat-button { font-size: 28px; }
}


/* Leave room for the three toolbar actions when search can be cleared. */
.sidebar-toolbar .chat-search-cancel {
    right: 126px;
}

@media (max-width: 520px) {
    .sidebar-toolbar .chat-search-cancel {
        right: 116px;
    }
}


/* Keep the search-clear control inside the search surface, never above toolbar actions. */
.sidebar-toolbar .chat-search-container {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-toolbar .chat-search-container .chat-search {
    width: 100%;
}

.sidebar-toolbar .chat-search-container .chat-search input {
    padding-right: 30px;
}

.sidebar-toolbar .chat-search-container .chat-search-cancel {
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 2;
    transform: translateY(-50%);
}

.sidebar-toolbar .chat-search-container .chat-search-cancel:hover {
    transform: translateY(calc(-50% - 1px));
}

.sidebar-toolbar .chat-search-container .chat-search-cancel:active {
    transform: translateY(calc(-50% + 1px)) scale(0.94);
}


/* Keep all three top toolbar controls exactly the same size. */
.sidebar-toolbar .sidebar-toolbar-action,
.sidebar-toolbar .new-chat-button.sidebar-toolbar-action {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    box-sizing: border-box;
    place-items: center;
    line-height: 1;
}

@media (max-width: 520px) {
    .sidebar-toolbar .sidebar-toolbar-action,
    .sidebar-toolbar .new-chat-button.sidebar-toolbar-action {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        min-height: 34px;
    }
}


/* Compact search placeholder without overlap from its clear control. */
.sidebar-toolbar .chat-search {
    gap: 3px;
    padding-left: 7px;
    padding-right: 26px;
}

.sidebar-toolbar .chat-search-container .chat-search input,
.sidebar-toolbar .chat-search-container .chat-search input::placeholder {
    font-size: 14px;
}

.sidebar-toolbar .chat-search-container .chat-search input::placeholder {
    letter-spacing: -0.045em;
}

.sidebar-toolbar .chat-search-container .chat-search-cancel {
    right: 3px;
    width: 23px;
    height: 23px;
    min-height: 23px;
}

.sidebar-toolbar .chat-search-cancel::before,
.sidebar-toolbar .chat-search-cancel::after {
    width: 8px;
}

@media (max-width: 520px) {
    .sidebar-toolbar {
        gap: 4px;
        padding-right: 6px;
        padding-left: 6px;
    }
}


.chat-panel { position: relative; }

.message-scroll-to-bottom {
    position: absolute;
    z-index: 20;
    right: 24px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    color: #3e6d89;
    font-size: 0;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(87, 126, 149, 0.24);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(47, 81, 101, 0.2);
    cursor: pointer;
}

.message-scroll-to-bottom::before {
    content: "\2193";
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.message-scroll-to-bottom:hover {
    box-shadow: 0 5px 16px rgba(47, 81, 101, 0.28);
    transform: translateY(-1px);
}

.message-scroll-to-bottom:focus-visible {
    outline: 3px solid rgba(51, 144, 236, 0.38);
    outline-offset: 2px;
}

.message-scroll-to-bottom[hidden] { display: none; }

@media (max-width: 700px) {
    .message-scroll-to-bottom {
        right: 16px;
        bottom: calc(70px + env(safe-area-inset-bottom));
    }
}


.chat-item-time-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-height: 14px;
}

.chat-item-delivery-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 12px;
    color: #5f8298;
}

.chat-item-delivery-status .message-delivery-checks {
    width: 18px;
    height: 12px;
}

.chat-item-delivery-status.is-read {
    color: #2585d8;
}

.chat-item-delivery-status.is-failed {
    color: #e14b4b;
    font-size: 11px;
    font-weight: 700;
}

/* Browser chat only: message author avatars match the 44px chat-list avatar.
   Standalone PWA retains its compact message layout. */
html:not(.is-standalone-pwa) .message.with-author-avatar {
    margin-left: 53px;
}

html:not(.is-standalone-pwa) .message-author-avatar {
    left: -52px;
    width: 44px;
    height: 44px;
    font-size: 15px;
}

/* Desktop standalone PWA: author avatars match the 44px chat-list avatar. */
@media (min-width: 701px) {
    html.is-standalone-pwa .message.with-author-avatar {
        margin-left: 53px;
    }

    html.is-standalone-pwa .message-author-avatar {
        left: -52px;
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
}

/* Locally hosted Inter: variable font, covering 100 through 900. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}