.hero.chat-header-premium {
    overflow: visible;
}

/* The system palette gives every .hero a backdrop-filter (app.css,
   `:root[data-palette="system"] .hero`), and the chat header must not have
   one: a backdrop-filter makes the card the containing block for fixed
   descendants and, in some engines, clips what overflows it — the ⋮ menu
   under the header. The selector outranks the palette rule without
   !important. */
html[data-page="chat"] .hero.chat-header-premium {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chat-shell {
    position: relative;
    display: block;
    padding: 14px;
    margin-bottom: 14px;
    overflow: visible;
    border: 1px solid rgba(var(--text-rgb), .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 212, 228, .08), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(var(--text-rgb), .07), transparent 40%),
        var(--card, rgba(24, 28, 36, .86));
    box-shadow: var(--shadow-lg);
}

.chat-search-panel {
    position: absolute;
    inset: 0 0 auto;
    z-index: 18;
    padding: 12px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: inherit;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px);
}
.chat-search-panel[hidden] { display: none; }
.chat-search-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 42px;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding-inline-start: 14px;
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.chat-search-icon { color: var(--emphasis-light); font-size: 24px; }
/* The input's own outline is off: the whole field shows keyboard focus. */
.chat-search-form:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.chat-search-form input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}
.chat-search-form button {
    width: 42px;
    height: 42px;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: var(--text-2xl);
    cursor: pointer;
}
.chat-search-status {
    min-height: 22px;
    padding: 7px 4px 3px;
    color: var(--muted);
    font-size: var(--text-xs);
}
.chat-search-results {
    display: grid;
    gap: 6px;
    max-height: min(56vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.chat-search-result {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: rgba(255, 255, 255, .045);
    text-align: start;
    cursor: pointer;
}
.chat-search-result:hover,
.chat-search-result:focus-visible {
    border-color: var(--emphasis-light);
    outline: 0;
}
.chat-search-result:disabled { opacity: .65; }
.chat-search-result-meta {
    color: var(--emphasis-light);
    font-size: var(--text-xs);
    font-weight: 600;
}
.chat-search-result-message {
    overflow: hidden;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-header-premium {
    padding-bottom: 14px;
}
.chat-header-main {
    display: flex;
    align-items: center;
    gap: 13px;
}
.chat-avatar-ring {
    position: relative;
    flex: 0 0 52px;
}
.chat-header-avatar {
    position: relative;
    overflow: hidden;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--text-rgb), .28);
    box-shadow: var(--shadow-md);
}
.chat-header-avatar .rm-me-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.chat-message-author {
    margin: 0 2px 5px;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--emphasis-light);
}
a.chat-message-author {
    display: block;
    width: fit-content;
    text-decoration: none;
}
a.chat-message-author:hover { text-decoration: underline; }
.chat-header-presence-dot {
    position: absolute;
    inset-inline-end: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(98, 224, 173, .18);
}
.chat-header-presence-dot.is-typing {
    background: var(--emphasis-light, var(--emphasis));
    box-shadow: 0 0 0 4px rgba(var(--text-rgb), .22);
    animation: chat-presence-pulse 1.1s ease-in-out infinite;
}
.chat-header-copy {
    min-width: 0;
    flex: 1;
}
.chat-header-title {
    margin: 0;
    font-size: var(--text-xl);
    overflow-wrap: anywhere;
    letter-spacing: -.01em;
}
.chat-header-status {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
    min-height: 16px;
}
.chat-header-status.is-online {
    color: var(--accent);
}
.chat-header-status.is-typing {
    color: var(--emphasis-light);
}
.chat-toolbar-status {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
}
.chat-messages-panel {
    max-height: 58vh;
    overflow-y: auto;
    padding: 4px 1px;
}
.chat-date-chip-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 12px;
}
.chat-date-chip {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--muted);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.chat-scroll-bottom {
    position: absolute;
    inset-inline-end: 14px;
    bottom: calc(var(--chat-composer-height, 72px) + 18px + env(safe-area-inset-bottom));
    z-index: 12;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--text-rgb), .28);
    border-radius: 50%;
    color: var(--emphasis-light);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 55%),
        rgba(18, 20, 27, .92);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
    cursor: pointer;
    animation: chat-scroll-fab-in var(--transition-base);
}
.chat-scroll-bottom[hidden] {
    display: none;
}
.chat-scroll-unread {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -7px;
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid rgba(18, 20, 27, .96);
    border-radius: var(--radius-pill);
    color: var(--on-danger);
    background: var(--danger);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1;
}
.chat-scroll-unread[hidden] {
    display: none;
}
.chat-unread-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 4px;
    color: var(--emphasis-light);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
}
.chat-unread-divider::before,
.chat-unread-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--text-rgb), .44)
    );
}
.chat-unread-divider::after {
    transform: scaleX(-1);
}
@keyframes chat-scroll-fab-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.92);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    vertical-align: middle;
}
.chat-typing-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    animation: chat-typing-dot 1.1s ease-in-out infinite;
}
.chat-typing-dots i:nth-child(2) {
    animation-delay: .15s;
}
.chat-typing-dots i:nth-child(3) {
    animation-delay: .3s;
}
@keyframes chat-typing-dot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .35;
    }
    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}
@keyframes chat-presence-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.chat-message-row.is-mine {
    align-items: flex-end;
}
.chat-message-row.is-theirs {
    align-items: flex-start;
}
.chat-message-row.is-pending .chat-bubble {
    opacity: .72;
}
.chat-send-button:not(:disabled) {
    background:
        linear-gradient(
            145deg,
            rgba(var(--text-rgb), .95),
            rgba(var(--primary-rgb), .88)
        );
    box-shadow: var(--shadow-md);
}
.chat-history-toolbar {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: 8px;
}

.chat-pinned-banner {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .13), rgba(67, 196, 154, 0.08));
    border: 1px solid rgba(var(--accent-rgb), .24);
    border-radius: var(--radius-sm);
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 11px;
    margin: 0 10px 8px;
    min-height: 56px;
    padding: 9px 12px;
    text-align: start;
    width: calc(100% - 20px);
}

.chat-pinned-banner[hidden] {
    display: none;
}

.chat-pinned-icon {
    font-size: var(--text-lg);
}

.chat-pinned-copy {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.chat-pinned-copy strong {
    color: var(--text);
    font-size: var(--text-xs);
}

.chat-pinned-copy small {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pinned-open {
    font-size: 24px;
    opacity: 0.55;
}

.chat-official-group {
    align-items: center;
    color: var(--text);
    display: inline-flex;
    font-size: var(--text-2xs);
    font-weight: 600;
    gap: var(--space-1);
    letter-spacing: 0.01em;
    margin-top: 2px;
}
.chat-connection-state {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
}
.chat-connection-state.is-online {
    color: var(--accent);
}
.chat-connection-state.is-error {
    color: var(--warning);
}
/* Socket down, thread kept fresh by the HTTP poll (plan item 47). */
.chat-connection-state.is-updating {
    color: var(--muted);
}
.chat-peer-state {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
    min-height: 14px;
}
.chat-peer-state.is-online {
    color: var(--accent);
}
.chat-peer-state.is-typing {
    color: var(--emphasis-light);
    animation: chat-typing-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-typing-pulse {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

.chat-message-row {
    scroll-margin-block: 70px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.chat-message-meta {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    font-size: var(--text-2xs);
    color: var(--muted);
}
.chat-message-row.is-new {
    animation: chat-message-arrive .22s ease-out;
}
.chat-message-row .chat-bubble {
    max-width: min(82%, 620px);
}
.chat-message-status.is-read {
    color: var(--info);
}
.chat-message-status {
    display: inline-flex;
    align-items: center;
}
.chat-message-status .chat-icon {
    width: 15px;
    height: 12px;
    stroke-width: 2;
}
.chat-message-status.is-pending {
    opacity: .55;
}
.chat-composer {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 48px;
    gap: var(--space-2);
    align-items: end;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(var(--text-rgb), .19);
    border-radius: var(--radius);
    background: color-mix(
        in srgb,
        var(--card) 91%,
        transparent
    );
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px);
}
.chat-composer-main {
    position: relative;
    min-width: 0;
}
.chat-input {
    width: 100%;
    min-height: 48px;
    max-height: 150px;
    padding: 12px 42px 12px 13px;
    resize: none;
    overflow-y: auto;
    line-height: 1.42;
}
.chat-send-button {
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
}
.chat-send-button:disabled {
    cursor: wait;
    opacity: .55;
}
.chat-composer-footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-2xs);
}
.chat-composer-footer span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
#chat-counter.is-near-limit {
    color: var(--warning);
    font-weight: 700;
}
#chat-counter.is-limit {
    color: var(--danger);
    font-weight: 600;
}
@keyframes chat-message-arrive {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 520px) {
    .chat-shell {
        padding: 8px;
    }
    #chat-messages,
    .chat-messages-panel {
        max-height: min(
            62vh,
            calc(
                var(--chat-viewport-height, 100vh)
                - 270px
            )
        );
    }
    html[data-page="chat"] #chat-messages,
    html[data-page="chat"] .chat-messages-panel {
        max-height: calc(
            var(--chat-viewport-height, 100dvh)
            - 188px
        );
    }
    html[data-page="chat"] .chat-shell {
        height: max(
            360px,
            calc(var(--chat-viewport-height, 100dvh) - 148px)
        );
    }
    .chat-composer {
        border-radius: var(--radius-sm);
    }
    .chat-composer-footer span:first-child {
        display: none;
    }
    .chat-composer-footer {
        justify-content: flex-end;
    }
}
#chat-messages {
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--text-rgb),.32) transparent;
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(var(--text-rgb),.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(111,92,255,.06),
            transparent 30%
        );
}
.chat-message-row {
    position:relative;
    padding:0 2px;
    transition:
        transform var(--transition-base),
        filter var(--transition-base),
        background var(--transition-base);
}
.chat-message-row.is-highlighted {
    animation:chat-message-highlight 1.4s ease;
}
@keyframes chat-message-highlight {
    0%,100% {
        transform:scale(1);
        filter:none;
    }
    35% {
        transform:scale(1.025);
        filter:
            drop-shadow(0 0 18px rgba(var(--text-rgb),.42));
    }
}
.chat-bubble {
    position:relative;
    max-width:min(84%,680px);
    overflow:hidden;
    cursor:pointer;
    box-shadow: var(--shadow-md);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}
.chat-bubble:active {
    transform:scale(.985);
}
.chat-message-row[data-mine="1"] .chat-bubble {
    border-color:rgba(var(--text-rgb),.38);
    background:
        linear-gradient(
            145deg,
            var(--bubble-mine),
            rgba(var(--text-rgb),.08)
        );
}
.chat-message-row[data-mine="0"] .chat-bubble {
    background: var(--bubble-peer, var(--card));
    border-color: var(--line);
    color: var(--text);
}
.chat-message-body {
    position:relative;
    z-index:1;
    font-size:var(--text-sm);
    line-height:1.52;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.chat-message-body.is-deleted {
    color:var(--muted);
    font-style:italic;
    opacity:.78;
}
/* Jev scam warning under a received message (src/jev_chat.rs). */
.chat-scam-warning {
    position:relative;
    z-index:1;
    margin-top:6px;
    padding:6px 9px;
    border-radius:var(--radius-xs);
    background:rgba(230, 70, 50, .14);
    color: var(--danger);
    font-size:var(--text-xs);
    line-height:1.4;
}
/* The same place, softer: a rule-based hint (src/scam_rules.rs). */
.chat-scam-warning--soft {
    background:rgba(var(--text-rgb), .07);
    color:var(--text);
}
.chat-bubble.is-deleted {
    border-style:dashed;
    box-shadow:none;
}
.chat-reply-quote {
    width:100%;
    display:grid;
    gap:3px;
    margin:0 0 8px;
    padding:8px 10px;
    border:0;
    border-inline-start:3px solid var(--emphasis);
    border-radius:var(--radius-xs);
    text-align:start;
    color:inherit;
    background:rgba(0,0,0,.075);
    cursor:pointer;
}
.chat-reply-quote strong {
    color:var(--emphasis);
    font-size:var(--text-2xs);
    font-weight: 600;
    letter-spacing:.04em;
}
.chat-reply-quote span {
    overflow:hidden;
    color:var(--muted);
    font-size:var(--text-2xs);
    line-height:1.35;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.chat-edited-label {
    display:inline-block;
    margin:5px 0 0;
    margin-inline-end:6px;
    color:var(--muted);
    font-size:var(--text-2xs);
    font-style:italic;
    opacity:.75;
}
/* Slow mode line above the message field; counting down it takes the accent. */
.chat-slow-note {
    grid-column:1/-1;
    margin:0;
    padding:0 4px;
    color:var(--muted);
    font-size:var(--text-xs);
    line-height:1.35;
}
.chat-slow-note.is-waiting {
    color:var(--accent);
    font-variant-numeric:tabular-nums;
}
.chat-reply-bar {
    grid-column:1/-1;
    position:relative;
    display:grid;
    grid-template-columns:3px minmax(0,1fr) 36px;
    gap:10px;
    align-items:center;
    width:100%;
    padding:8px 9px;
    border:1px solid rgba(var(--text-rgb),.20);
    border-radius:var(--radius-sm);
    background:rgba(var(--text-rgb),.075);
    box-sizing:border-box;
    animation:chat-reply-enter var(--transition-base);
}
.chat-reply-bar[hidden] {
    display:none;
}
@keyframes chat-reply-enter {
    from {
        opacity:0;
        transform:translateY(6px);
    }
    to {
        opacity:1;
        transform:none;
    }
}
.chat-reply-accent {
    align-self:stretch;
    border-radius:var(--radius-pill);
    background:
        linear-gradient(
            180deg,
            var(--emphasis-light),
            var(--text)
        );
    box-shadow:0 0 12px rgba(var(--text-rgb),.28);
}
.chat-reply-copy {
    min-width:0;
    display:grid;
    gap:2px;
}
.chat-reply-copy strong {
    color:var(--emphasis);
    font-size:var(--text-2xs);
    font-weight: 600;
}
.chat-reply-copy span {
    overflow:hidden;
    color:var(--muted);
    font-size:var(--text-2xs);
    white-space:nowrap;
    text-overflow:ellipsis;
}
#chat-reply-close {
    width:34px;
    height:34px;
    border:0;
    border-radius:var(--radius-xs);
    color:var(--muted);
    background:rgba(255,255,255,.055);
    font-size:var(--text-xl);
    cursor:pointer;
}
.chat-overlay-open {
    overflow:hidden;
}
html[data-page="chat"] {
    --chat-overlay-backdrop:rgba(4,6,12,.62);
    --chat-overlay-panel:rgba(18,20,27,.97);
    --chat-overlay-border:rgba(var(--text-rgb),.20);
    --chat-overlay-accent:rgba(var(--text-rgb),.13);
    --chat-overlay-control:rgba(255,255,255,.04);
    --chat-overlay-control-border:rgba(255,255,255,.09);
    --chat-overlay-handle:rgba(255,255,255,.18);
    --chat-overlay-shadow:var(--shadow-lg);
}
:root[data-theme="light"][data-page="chat"] {
    --chat-overlay-backdrop:rgba(17,19,24,.38);
    --chat-overlay-panel:rgba(255,255,255,.98);
    --chat-overlay-border:rgba(26,29,33,.12);
    --chat-overlay-accent:rgba(var(--text-rgb),.08);
    --chat-overlay-control:rgba(26,29,33,.04);
    --chat-overlay-control-border:rgba(26,29,33,.10);
    --chat-overlay-handle:rgba(26,29,33,.20);
    --chat-overlay-shadow:var(--shadow-lg);
}
.chat-action-sheet,
.chat-editor,
.chat-delete-confirm {
    position:fixed;
    inset:0;
    z-index:10050;
    display:grid;
    align-items:end;
}
.chat-action-sheet[hidden],
.chat-editor[hidden],
.chat-delete-confirm[hidden] {
    display:none;
}
.chat-sheet-backdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:var(--chat-overlay-backdrop);
    backdrop-filter:blur(9px);
    cursor:default;
    animation:chat-backdrop-in var(--transition-base);
}
@keyframes chat-backdrop-in {
    from { opacity:0; }
    to { opacity:1; }
}
.chat-sheet-panel,
.chat-editor-panel {
    position:relative;
    z-index:1;
    width:min(100%,620px);
    margin:0 auto;
    padding:
        10px 16px
        calc(18px + env(safe-area-inset-bottom));
    border:1px solid var(--chat-overlay-border);
    border-bottom:0;
    border-radius:26px 26px 0 0;
    background:
        radial-gradient(
            circle at 85% 0,
            var(--chat-overlay-accent),
            transparent 40%
        ),
        var(--chat-overlay-panel);
    box-shadow:var(--chat-overlay-shadow);
    box-sizing:border-box;
    animation:chat-sheet-in .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes chat-sheet-in {
    from {
        opacity:0;
        transform:translateY(30px);
    }
    to {
        opacity:1;
        transform:none;
    }
}
.chat-sheet-handle {
    width:42px;
    height:4px;
    margin:0 auto 13px;
    border-radius:var(--radius-pill);
    background:var(--chat-overlay-handle);
}
.chat-sheet-preview {
    overflow:hidden;
    margin-bottom:12px;
    padding:12px 14px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--muted);
    background:var(--chat-overlay-control);
    font-size:var(--text-xs);
    line-height:1.45;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.chat-sheet-actions {
    display:grid;
    gap:var(--space-2);
}
.chat-sheet-actions > button {
    min-height:52px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 15px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    background:var(--chat-overlay-control);
    font:inherit;
    font-size:var(--text-sm);
    font-weight: 600;
    cursor:pointer;
}
.chat-sheet-actions > button[hidden],
.chat-sheet-reactions[hidden] {
    display: none;
}
.chat-sheet-actions > button span {
    width:30px;
    color:var(--emphasis);
    font-size:var(--text-xl);
    text-align:center;
}
.chat-sheet-actions > button.is-danger {
    color:var(--danger);
    border-color:rgba(255,109,120,.18);
    background:rgba(255,109,120,.055);
}
.chat-sheet-actions > button.is-danger span {
    color:var(--danger);
}
.chat-editor-title {
    margin:4px 0 14px;
    color:var(--text);
    font-size:var(--text-lg);
    font-weight: 600;
}
#chat-editor-input {
    width:100%;
    min-height:118px;
    max-height:40vh;
    padding:14px;
    resize:vertical;
    box-sizing:border-box;
    border:1px solid var(--chat-overlay-border);
    border-radius:var(--radius-sm);
    outline:none;
    color:var(--text);
    background:var(--chat-overlay-control);
    font:inherit;
    /* 16px like #chat-input: below that iOS Safari zooms the page on focus. */
    font-size:var(--text-base);
    line-height:1.5;
}
#chat-editor-input:focus {
    border-color:rgba(var(--text-rgb),.56);
    box-shadow:0 0 0 4px rgba(var(--text-rgb),.075);
}
#chat-editor-input.is-error {
    border-color:rgba(255,109,120,.60);
}
.chat-editor-footer {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:13px;
}
.chat-editor-footer button {
    min-height:48px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    background:var(--chat-overlay-control);
    font:inherit;
    font-weight: 600;
    cursor:pointer;
}
.chat-editor-footer button.is-primary {
    color:var(--on-gold);
    border-color:rgba(var(--accent-rgb),.65);
    background:
        linear-gradient(
            135deg,
            var(--emphasis-light),
            var(--text)
        );
    box-shadow:var(--shadow-md);
}
.chat-editor-footer button.is-danger {
    color: var(--on-danger);
    border-color:rgba(255,109,120,.45);
    background:
        linear-gradient(
            135deg,
            var(--danger),
            color-mix(in srgb, var(--danger) 78%, black)
        );
}
.chat-delete-panel {
    text-align:center;
}
/* «Delete for everyone», «Delete for me», «Cancel» — one under another,
   the strongest on top. */
.chat-delete-footer {
    display:flex;
    flex-direction:column-reverse;
}
.chat-delete-panel p {
    margin:-4px auto 16px;
    max-width:390px;
    color:var(--muted);
    font-size:var(--text-xs);
    line-height:1.5;
}
.chat-delete-icon {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin:2px auto 12px;
    border:1px solid rgba(255,109,120,.24);
    border-radius:var(--radius);
    color:var(--danger);
    background:rgba(255,109,120,.07);
    font-size:var(--text-2xl);
}
@media (min-width:720px) {
    .chat-sheet-panel,
    .chat-editor-panel {
        margin-bottom:24px;
        border-bottom:1px solid var(--chat-overlay-border);
        border-radius:var(--radius-lg);
    }
}
.chat-shell {
    min-height:
        clamp(
            390px,
            calc(var(--chat-viewport-height, 100vh) - 430px),
            760px
        );
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
#chat-messages {
    flex:1 1 auto;
    width:100%;
    min-height:300px;
    height:auto;
    max-height:none;
    padding:
        12px 8px
        calc(18px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    overscroll-behavior:contain;
}
.chat-composer {
    position:sticky;
    z-index:80;
    bottom:max(8px, env(safe-area-inset-bottom));
    width:100%;
    margin:
        10px auto
        calc(8px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    border-color:rgba(var(--text-rgb),.24);
    background:
        linear-gradient(
            145deg,
            rgba(25,28,36,.97),
            rgba(15,17,23,.98)
        );
    box-shadow: var(--shadow-lg);
}
.chat-composer-main {
    width:100%;
    min-width:0;
}
#chat-input {
    min-width:0;
    width:100%;
    resize:none;
}
#chat-send {
    flex:0 0 48px;
}
.chat-dialog-list {
    display:grid;
    gap:10px;
}
.chat-dialog-entry {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-2);
    align-items:stretch;
}
.chat-dialog-controls {
    display:grid;
    gap:5px;
}
.chat-dialog-controls form {
    margin:0;
}
.chat-dialog-controls button {
    width:38px;
    height:100%;
    min-height:25px;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius-xs);
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
}
.chat-dialog-controls button:focus-visible {
    outline:2px solid var(--emphasis);
    outline-offset:2px;
}
.chat-dialog-card {
    min-height:88px;
    margin-bottom:0;
    padding:14px;
    align-items:center;
    border-color:rgba(255,255,255,.065);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.014)
        );
    box-shadow: var(--shadow-md);
}
.chat-dialog-card .card-icon {
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:var(--radius-sm);
}
.chat-dialog-card .card-content {
    overflow:hidden;
}
.chat-dialog-card .card-title {
    overflow:hidden;
    font-size:var(--text-sm);
    line-height:1.25;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.chat-dialog-card .card-meta {
    overflow:hidden;
    display:block;
    margin-top:5px;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-line-clamp:unset;
}

.chat-dialog-card:has(.chat-dialog-unread) {
    border-color: rgba(var(--text-rgb), .34);
    box-shadow: var(--shadow-md);
}

.chat-dialog-card:has(.chat-dialog-unread) .card-title {
    color: var(--emphasis-light);
}
.chat-dialog-card.is-peer-typing {
    border-color: rgba(var(--text-rgb), .28);
}
.chat-dialog-preview.is-typing,
.chat-dialog-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--emphasis-light);
    font-weight: 600;
}
.chat-dialog-preview.is-typing .chat-typing-dots i,
.chat-dialog-typing .chat-typing-dots i {
    width: 4px;
    height: 4px;
}
.chat-dialog-card .card-arrow {
    flex:0 0 auto;
}
.chat-dialog-side {
    display:flex;
    align-items:center;
    gap:9px;
    flex:0 0 auto;
}
.chat-dialog-time {
    font-size:var(--text-2xs);
    color:var(--muted);
    white-space:nowrap;
}
.chat-dialog-unread {
    min-width:28px;
    height:28px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-pill);
    box-sizing:border-box;
    background:rgba(var(--text-rgb),.16);
    border:1px solid rgba(var(--text-rgb),.38);
    font-size:var(--text-2xs);
    font-weight: 600;
    color:var(--text);
}

.inbox-search {
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--muted);
}

.inbox-search:focus-within {
    border-color:var(--emphasis);
    box-shadow:0 0 0 3px rgba(var(--text-rgb),.12);
}
.inbox-search-icon {
    flex:0 0 auto;
    font-size:var(--text-xl);
}
.inbox-search input {
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
}
.inbox-search input::placeholder {
    color:var(--muted);
}
/* No messages yet: one quiet icon and line in the middle of the thread, on
   the message panel itself (no plate, item 374). The two 1px markers around
   it take the rest of the height. */
.chat-empty-thread {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    min-height: calc(100% - 2px);
    padding: 24px 18px;
    box-sizing: border-box;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.55;
}

/* A group's name opens its info: it still reads as the title. */
.chat-header-title-link {
    color: inherit;
    text-decoration: none;
}
.chat-header-title-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.chat-empty-thread-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.chat-empty-thread-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(var(--text-rgb), .06);
}

.chat-empty-thread-icon .icon {
    width: 30px;
    height: 30px;
}

.chat-empty-thread strong {
    display: block;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.chat-empty-thread p {
    margin: 0;
}
#chat-connection-state {
    min-height:18px;
    opacity:.92;
}
@media (max-width:540px) {
    .chat-shell {
        min-height:
            max(
                430px,
                calc(
                    var(--chat-viewport-height, 100vh)
                    - 390px
                )
            );
        border-radius:var(--radius);
    }
    #chat-messages {
        min-height:330px;
        padding-inline:4px;
    }
    .chat-composer {
        grid-template-columns:minmax(0,1fr) auto;
        gap:var(--space-2);
        padding:9px;
        border-radius:var(--radius);
    }
    .chat-dialog-card {
        min-height:82px;
        padding:12px;
        border-radius:var(--radius);
    }
    .chat-dialog-card .card-icon {
        width:46px;
        height:46px;
        flex-basis:46px;
    }
    .chat-dialog-entry {
        gap:6px;
    }
    .chat-dialog-controls button {
        width:34px;
    }
}
@media (max-height:720px) {
    .chat-shell {
        min-height:360px;
    }
    #chat-messages {
        min-height:260px;
    }
}

.chat-message-status.is-error {
    display:inline-grid;
    place-items:center;
    min-width:18px;
    min-height:18px;
    border-radius:50%;
    color: var(--on-danger);
    background:var(--danger);
    opacity:1;
    cursor:pointer;
    font-size:var(--text-2xs);
    font-weight: 600;
    position:relative;
}
/* 44px tap target around the 18px badge without changing how it looks. */
.chat-message-status.is-error::before {
    content:"";
    position:absolute;
    /* 44px around the 18px mark, the same on both sides in LTR and RTL. */
    inset:-13px;
}

.chat-media-cancel {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin-inline-start: 4px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: var(--card, rgba(24, 28, 36, .86));
    font: inherit;
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}
/* 44px tap target around the 30px mark, without widening the meta row. */
.chat-media-cancel::before {
    content: "";
    position: absolute;
    inset: -7px;
}

.chat-media-cancel:hover,
.chat-media-cancel:focus-visible {
    color: var(--danger);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.chat-message-status.is-error:focus-visible {
    outline:2px solid rgba(255,255,255,.75);
    outline-offset:2px;
}

.chat-block-toggle {
    min-height:32px;
    margin-top:6px;
    padding:0 11px;
    border:1px solid rgba(255,109,120,.30);
    border-radius:var(--radius-xs);
    color:var(--danger);
    background:rgba(255,109,120,.07);
    font:inherit;
    font-size:var(--text-2xs);
    font-weight:700;
    cursor:pointer;
    touch-action:manipulation;
}
.chat-block-toggle.is-unblock {
    border-color:rgba(98,224,173,.30);
    color:var(--success);
    background:rgba(98,224,173,.07);
}
.chat-block-toggle:disabled {
    cursor:wait;
    opacity:.55;
}
#chat-form.is-chat-blocked {
    border-color:rgba(255,109,120,.22)!important;
}
#chat-form.is-chat-blocked #chat-input {
    cursor:not-allowed;
    opacity:.62;
}
#chat-form.is-chat-blocked #chat-send {
    cursor:not-allowed;
    opacity:.38;
}
.chat-forward-bar {
    grid-column:1/-1;
    position:relative;
    display:grid;
    grid-template-columns:3px minmax(0,1fr) 36px;
    gap:10px;
    align-items:center;
    width:100%;
    padding:8px 9px;
    border:1px solid rgba(111, 232, 184, .24);
    border-radius:var(--radius-sm);
    background:rgba(111, 232, 184, .08);
    box-sizing:border-box;
    animation:chat-reply-enter var(--transition-base);
}
.chat-forward-bar[hidden] {
    display:none;
}
.chat-forward-accent {
    align-self:stretch;
    border-radius:var(--radius-pill);
    background:
        linear-gradient(
            180deg,
            rgba(111, 232, 184, .95),
            rgba(46, 168, 124, .95)
        );
    box-shadow:0 0 12px rgba(111, 232, 184, .24);
}
.chat-forward-panel {
    max-height:min(72vh, 620px);
    display:flex;
    flex-direction:column;
}
.chat-forward-preview,
.chat-forward-list {
    min-width:0;
}
.chat-forward-preview {
    margin-bottom:10px;
    padding:12px 14px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--muted);
    background:var(--chat-overlay-control);
    font-size:var(--text-xs);
    line-height:1.45;
}
.chat-forward-list {
    display:grid;
    gap:var(--space-2);
    overflow-y:auto;
    max-height:min(46vh, 420px);
}
.chat-forward-target {
    display:grid;
    gap:3px;
    width:100%;
    padding:12px 14px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    background:var(--chat-overlay-control);
    text-align:start;
    font:inherit;
    cursor:pointer;
}
.chat-forward-target-name {
    font-size:var(--text-sm);
    font-weight: 600;
}
.chat-forward-target-meta {
    overflow:hidden;
    color:var(--muted);
    font-size:var(--text-xs);
    white-space:nowrap;
    text-overflow:ellipsis;
}
.chat-forward-empty {
    padding:16px 14px;
    border-radius:var(--radius);
    background:var(--surface-2);
    color:var(--muted);
    font-size:var(--text-xs);
    line-height:1.45;
    text-align:center;
}
.chat-message-image {
  display: block;
  /* Fixed width, not min(100%, …): the bubble shrink-wraps its content, so
     a percentage made it narrow until the image loaded and then jump. */
  width: 280px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  border-radius: var(--radius-sm);
  margin: 0 0 6px;
  object-fit: cover;
  cursor: zoom-in;
  border: 1px solid var(--line);
  background: rgba(127,127,127,.12);
}
.chat-video-frame {
  display: block;
  width: min(100%, 280px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border-end-end-radius: 4px;
  overflow: hidden;
  background: rgba(127,127,127,.12);
}
.chat-message-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Own controls (chat-video-player.js) over the video; native ones are
   removed. No text selection or iOS callout on a long press — the chat's
   message menu is the only one that should answer it. */
.chat-video-frame {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.chat-video-frame[data-video-player] video::-webkit-media-controls {
  display: none;
}
.chat-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.chat-video-play .chat-icon { width: 26px; height: 26px; }
.chat-video-frame.is-playing .chat-video-play { opacity: 0; }
.chat-video-frame.is-playing:hover .chat-video-play,
.chat-video-frame.is-playing .chat-video-play:focus-visible { opacity: 1; }
.chat-video-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  color: var(--on-dark);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
/* Room for «0:00 / 0:00» from the start: the duration arrives with the
   metadata and the seek bar must not move then. */
.chat-video-time { flex: none; min-width: 4.8em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.chat-video-seek {
  flex: 1;
  min-width: 0;
  height: 4px;
  margin: 0;
  accent-color: var(--on-dark);
  cursor: pointer;
}
.chat-video-fullscreen {
  flex: none;
  width: 28px;
  height: 28px;
  /* 44px tap target around the 18px icon. */
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--on-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-video-fullscreen .chat-icon { width: 18px; height: 18px; }
.chat-video-frame:fullscreen { width: 100%; border-radius: 0; background: var(--media-bg); }
.chat-video-frame:fullscreen .chat-message-video { object-fit: contain; }
.chat-video-play:focus-visible,
.chat-video-fullscreen:focus-visible,
.chat-video-seek:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
/* Shown instead of .chat-video-frame while the background transcode job
   (see transcode_video_in_place / spawn_personal_video_transcode) hasn't
   finished yet — same box size as the eventual <video> so the bubble
   doesn't resize when the real video swaps in. */
.chat-video-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: min(100%, 280px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border-end-end-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
  padding: 12px;
}
.chat-video-pending-icon {
  display: inline-flex;
  animation: chat-video-pending-pulse 1.6s ease-in-out infinite;
}
.chat-video-pending-icon svg { width: 26px; height: 26px; }
.chat-video-pending.is-failed .chat-video-pending-icon { animation: none; color: var(--danger); }
.chat-video-pending.is-failed { color: var(--danger); }
@keyframes chat-video-pending-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.chat-message-caption { margin-top: 4px; }
/* Call-log bubble ("Audio call · 0:17" / "Group call · 0:17" / "Missed
   call"). Lives here, not in chat-call.css/chat-group-call.css, because
   those only load for 1:1 or group chats respectively while a call-log
   line can appear in either — it used to be styled only in chat-call.css,
   so group chats fell back to the unstyled .chat-icon default
   (display:block, 24px), which forced the icon onto its own line above
   the text and inflated the bubble. */
.chat-message-body--call {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
}
.chat-message-body--call.is-missed {
  color: var(--danger);
}
.chat-call-log-icon {
  display: inline-flex;
}
.chat-call-log-icon svg {
  width: 16px;
  height: 16px;
}
.chat-image-btn,
.chat-voice-btn {
  width: 42px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(127, 127, 127, .09);
  color: var(--emphasis-light, var(--muted));
  font: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition:
    transform .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}
.chat-image-btn:hover,
.chat-voice-btn:hover {
  background: rgba(var(--text-rgb),.12);
}
.chat-voice-btn.is-recording {
  color: var(--on-danger);
  background:
    linear-gradient(135deg, rgba(230,87,99,.92), rgba(181,47,59,.92));
  box-shadow: 0 0 0 4px rgba(230,87,99,.18);
  transform: scale(1.04);
}
.chat-header-menu-item {
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04);
  color: var(--emphasis-light);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}
.chat-voice-player {
  display: flex;
  align-items: center;
  min-width: min(100%, 240px);
  padding: 4px 2px;
}
.chat-voice-audio {
  width: 100%;
  min-width: 210px;
  height: 36px;
  border-radius: var(--radius-pill);
  filter: saturate(1.05);
}
.chat-message-body--voice {
  padding: 2px 0;
}
.chat-voice-recording {
  position: absolute;
  inset: auto 12px calc(100% + 10px) 12px;
  z-index: 6;
}
.chat-voice-recording-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(230,87,99,.28);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(
      135deg,
      rgba(230,87,99,.16),
      rgba(24,24,28,.94)
    );
  box-shadow: var(--shadow-md);
}
.chat-voice-recording-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(255,109,120,.45);
  animation: chat-voice-pulse 1.6s ease-out infinite;
}
.chat-voice-recording-label {
  flex: 1;
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: 600;
}
.chat-voice-recording-timer {
  color: var(--text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.chat-voice-recording-cancel {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
@keyframes chat-voice-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,109,120,.42); }
  70% { box-shadow: 0 0 0 10px rgba(255,109,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,109,120,0); }
}
.chat-delete-panel {
  border: 1px solid rgba(255,109,120,.18);
  background:
    linear-gradient(
      180deg,
      rgba(255,109,120,.06),
      rgba(255,255,255,.02)
    );
}
.chat-delete-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.chat-sheet-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 4px;
}
.chat-sheet-reactions button {
    min-height: 44px;
    min-width: 44px;
    flex: 1 1 calc(16.66% - 8px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--chat-overlay-control-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--chat-overlay-control);
    font-size: var(--text-xl);
    cursor: pointer;
}
.chat-message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.chat-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-pill);
    color: var(--text);
    background: rgba(255,255,255,.05);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}
.chat-reaction-pill.is-mine {
    border-color: rgba(var(--text-rgb),.42);
    background: rgba(var(--text-rgb),.12);
    color: var(--emphasis-light);
}
@media (max-width: 480px) {
    .chat-shell {
        padding: 10px;
        border-radius: var(--radius-sm);
    }
    .chat-header-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: var(--radius-sm);
    }
    .chat-avatar-ring {
        flex-basis: 42px;
    }
    .chat-input {
        font-size: var(--text-sm);
        padding: 10px 12px;
    }
    .chat-send-button {
        min-width: 40px;
        min-height: 40px;
    }
}
#chat-form.chat-composer {
    position: relative;
}
.chat-history-toolbar {
    gap: 10px;
}

/* === Chat graphics 4.9.28 === */

.chat-header-premium {
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--text-rgb), .14);
}

.chat-header-avatar,
.chat-dialog-avatar {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(145deg, rgba(var(--text-rgb), .22), rgba(111, 92, 255, .12));
    color: var(--emphasis-light);
    box-shadow: var(--shadow-md);
}

.chat-message-row {
    margin-bottom: 12px;
}

.chat-message-row.is-mine .chat-bubble {
    border-radius: var(--radius);
    border-end-end-radius: 6px;
    box-shadow: var(--shadow-md);
}

.chat-message-row.is-theirs .chat-bubble {
    border-radius: var(--radius);
    border-end-start-radius: 6px;
    box-shadow: var(--shadow-md);
}

.chat-message-meta {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: var(--text-2xs);
    letter-spacing: .02em;
}

.chat-message-row.is-mine .chat-message-meta {
    color: rgba(255, 255, 255, .62);
}

.chat-message-row.is-theirs .chat-message-meta {
    color: var(--muted);
}

.chat-dialog-card {
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.chat-dialog-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--text-rgb), .26);
    box-shadow: var(--shadow-md);
}

.chat-dialog-card:active {
    transform: translateY(0);
}

.chat-dialog-avatar {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: var(--radius-sm);
}
.chat-dialog-avatar .rm-me-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.chat-composer:focus-within {
    border-color: rgba(var(--text-rgb), .42);
    box-shadow: var(--shadow-lg);
}

.chat-voice-player {
    display: grid;
    gap: var(--space-1);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .06);
}

.chat-voice-audio {
    width: min(100%, 240px);
    height: 36px;
    filter: saturate(1.05);
}

.chat-message-image {
    border-radius: var(--radius-sm);
    border-end-end-radius: 4px;
}

.chat-message-row.is-mine .chat-message-image,
.chat-message-row.is-mine .chat-video-frame {
    border-radius: var(--radius-sm);
    border-end-end-radius: 4px;
}

.chat-message-row.is-theirs .chat-message-image,
.chat-message-row.is-theirs .chat-video-frame {
    border-radius: var(--radius-sm);
    border-end-start-radius: 4px;
}

.chat-reaction-pill {
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.chat-reaction-pill:hover {
    transform: translateY(-1px);
}

.chat-history-toolbar {
    padding: 6px 8px;
    border-radius: var(--radius-pill);
    background: rgba(var(--text-rgb), .03);
    border: 1px solid rgba(var(--text-rgb), .06);
}

.chat-scroll-bottom {
    backdrop-filter: blur(12px);
}

.chat-header-menu-item {
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.chat-header-menu-item:hover {
    transform: translateY(-1px);
    background: rgba(var(--text-rgb), .10);
    border-color: rgba(var(--text-rgb), .24);
}

@media (max-width: 520px) {
    .chat-message-row .chat-bubble {
        max-width: min(88%, 620px);
    }

    .chat-toolbar-status {
        gap: 6px;
    }
}
/* Chat V2 stability pass: restrained UI and low-cost rendering. */
.chat-shell,
.chat-composer,
.chat-header-premium {
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chat-shell *,
.chat-composer *,
.chat-header-premium * {
    animation: none;
    transition-duration: 0.12s;
}

.chat-header-menu-item,
.chat-voice-btn,
.chat-image-btn {
    width: auto !important;
    min-width: 44px;
    padding-inline: 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.chat-send-button {
    width: auto;
    min-width: 88px;
    padding-inline: 14px;
    font-size: var(--text-xs);
}

/* ResursMap 4.9.55: canonical chat layout */

:root {
    --chat-gap: 10px;
    --chat-mobile-side: 8px;
}

html[data-page="chat"],
html[data-page="chat"] body {
    max-width: 100%;
    overflow-x: hidden;
}

html[data-page="chat"] body {
    overscroll-behavior-x: none;
}

html[data-page="chat"] main {
    min-width: 0;
}

.chat-header-premium,
.chat-shell,
.chat-shell *,
.chat-composer,
.chat-composer * {
    box-sizing: border-box;
}

.chat-header-premium,
.chat-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

.chat-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--chat-gap);
    height:
        clamp(
            430px,
            calc(var(--chat-viewport-height, 100dvh) - 250px),
            760px
        );
    min-height: 0;
    max-height: none;
    margin-bottom: 18px;
    padding: 10px;
    overflow: hidden;
    contain: layout;
}

.chat-history-toolbar {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.chat-toolbar-status {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

#chat-messages,
.chat-messages-panel {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 8px 4px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
    scroll-padding-block: 12px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

#chat-history-start,
#chat-end {
    display: block;
    width: 100%;
    height: 1px;
    min-height: 1px;
    pointer-events: none;
}

.chat-message-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding-inline: 2px;
    touch-action: pan-y;
}

.chat-message-row:last-of-type {
    margin-bottom: 2px;
    scroll-margin-bottom: 12px;
}

.chat-bubble {
    width: fit-content;
    min-width: 52px;
    max-width: min(84%, 620px);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.chat-message-body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#chat-form.chat-composer {
    position: relative;
    inset: auto;
    z-index: 20;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-2);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px;
    transform: none;
    border-radius: var(--radius);
    touch-action: manipulation;
    overscroll-behavior: contain;
    contain: layout style;
}

.chat-composer-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#chat-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    resize: none;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-user-select: text;
    user-select: text;
}

#chat-form.chat-composer button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.chat-composer-footer {
    grid-column: 1 / -1;
    min-width: 0;
}

.chat-scroll-bottom {
    inset-inline-end: 18px;
    bottom:
        calc(
            var(--chat-composer-height, 104px)
            + 22px
        );
    touch-action: manipulation;
}

body.chat-keyboard-open #chat-messages,
body.chat-keyboard-open .chat-messages-panel {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 8px !important;
}

body.chat-overlay-open #chat-form.chat-composer {
    pointer-events: none;
}

.chat-voice-player {
    display: grid;
    grid-template-columns: 42px minmax(120px, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: min(100%, 330px);
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .15);
}

.chat-voice-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.chat-voice-play {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(var(--text-rgb), .26);
    border-radius: 50%;
    color: var(--emphasis-light);
    background: rgba(var(--text-rgb), .09);
    font: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    touch-action: manipulation;
}

.chat-voice-play:active {
    transform: scale(.94);
}

.chat-voice-progress {
    width: 100%;
    min-width: 0;
    height: 28px;
    margin: 0;
    accent-color: var(--emphasis-light);
    cursor: pointer;
    touch-action: pan-x;
}

.chat-voice-time {
    min-width: 72px;
    color: var(--muted);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}

.chat-message-body--voice,
.chat-message-body--voice .chat-voice-player {
    max-width: 100%;
}

/* «Transcribe» and the text under a voice message (plan item 410). */
.chat-voice-to-text {
    display: block;
    margin-block-start: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--emphasis-light);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.chat-voice-to-text:disabled {
    color: var(--muted);
    cursor: progress;
}

.chat-voice-transcript {
    max-width: 280px;
    margin: 6px 0 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-voice-transcript.is-error {
    color: var(--muted);
    font-size: var(--text-xs);
}

@media (max-width: 540px) {
    html[data-page="chat"] main {
        padding-inline:
            max(
                var(--chat-mobile-side),
                env(safe-area-inset-left)
            );
    }

    .chat-header-premium,
    .chat-shell {
        margin-inline: 0;
    }

    .chat-shell {
        width: 100%;
        padding: 8px;
        border-radius: var(--radius);
    }

    #chat-form.chat-composer {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        padding: 8px;
    }

    .chat-image-btn {
        grid-column: 1;
    }

    .chat-send-button {
        grid-column: 2;
    }

    .chat-composer-footer {
        grid-column: 1 / -1;
    }

    .chat-bubble {
        max-width: calc(100% - 24px);
    }

    .chat-voice-player {
        grid-template-columns: 40px minmax(92px, 1fr);
        width: min(100%, 280px);
    }

    .chat-voice-time {
        grid-column: 2;
        min-width: 0;
        text-align: start;
    }
}

@media (max-width: 370px) {
    #chat-form.chat-composer {
        gap: 6px;
        padding: 7px !important;
    }

    #chat-form.chat-composer button {
        min-width: 42px;
        padding-inline: 8px !important;
    }

    .chat-bubble {
        max-width: calc(100% - 16px) !important;
    }
}

/* ResursMap 4.9.58: readable compact mobile chat */
#chat-messages.chat-messages-panel {
    background: var(--bg-soft);
}

.chat-message-row {
    padding-inline: 4px;
}

.chat-message-row .chat-bubble {
    max-width: min(86%, 620px);
    padding: 11px 13px;
    overflow: visible !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.chat-message-row.is-mine .chat-bubble,
.chat-message-row[data-mine="1"] .chat-bubble {
    color: var(--text);
    background: rgba(var(--text-rgb), .12);
    border-color: rgba(var(--text-rgb), .48);
    box-shadow: var(--shadow-sm);
}

.chat-message-row.is-theirs .chat-bubble,
.chat-message-row[data-mine="0"] .chat-bubble {
    color: var(--chat-peer-text);
    background: var(--chat-peer-bg);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: var(--shadow-sm);
}

.chat-message-body {
    position: relative;
    z-index: 1;
    width: auto;
    min-width: 0;
    color: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.42;
    white-space: pre-wrap;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-message-meta {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--text-2xs);
}

#chat-form.chat-composer {
    background: var(--chat-composer-bg);
    border: 1px solid rgba(var(--text-rgb), .30);
    box-shadow: var(--shadow-md);
}

#chat-input {
    color: var(--chat-input-text);
    background: var(--chat-input-bg);
    border: 1px solid rgba(255, 255, 255, .14);
}

#chat-input::placeholder {
    color: var(--chat-input-placeholder);
    opacity: 1;
}

@media (max-width: 540px) {
    .chat-shell {
        gap: 7px;
        padding: 7px;
    }

    #chat-messages.chat-messages-panel {
        padding: 7px 2px 9px;
    }

    .chat-message-row .chat-bubble {
        max-width: calc(100% - 34px);
        padding: 10px 12px;
    }

    #chat-form.chat-composer {
        grid-template-columns: 44px 44px minmax(0, 1fr) 48px;
        gap: 7px;
        padding: 8px;
        border-radius: var(--radius-sm);
    }

    #chat-form .chat-composer-main {
        grid-column: 3;
        grid-row: 1;
    }

    #chat-voice-btn {
        grid-column: 1;
        grid-row: 1;
    }

    #chat-image-btn {
        grid-column: 2;
        grid-row: 1;
    }

    #chat-send {
        grid-column: 4;
        grid-row: 1;
    }

    #chat-form.chat-composer button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px;
        padding: 0;
        font-size: var(--text-xl);
        border-radius: 50% !important;
    }

    #chat-input {
        min-height: 44px;
        padding: 11px 12px;
        font-size: var(--text-sm);
    }

    .chat-composer-footer {
        grid-column: 1 / -1;
        min-height: 14px;
    }
}

.chat-header-premium {
    padding-bottom: 10px;
}

.chat-header-title {
    font-size: var(--text-xl);
    letter-spacing: 0;
}

.chat-composer {
    border-top: 1px solid rgba(var(--text-rgb), .16);
}

.chat-shell {
    border-radius: var(--radius, 20px);
}

#chat-form.chat-composer {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

#chat-input {
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--line);
}

#chat-input::placeholder {
    color: var(--muted);
}

.chat-send-button:not(:disabled),
#chat-send:not(:disabled) {
    border: 0;
    background: var(--gold-fill);
    color: var(--on-gold-fill);
}

html[data-page="chat"] body {
    display: flex;
    flex-direction: column;
}

html[data-page="chat"] .rm-version-footer {
    display: none;
}

html[data-page="chat"] main.page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 8px;
}

html[data-page="chat"] .topbar,
html[data-page="chat"] .chat-header-premium {
    flex: 0 0 auto;
}

html[data-page="chat"] .chat-shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
}

html[data-page="chat"] #chat-messages.chat-messages-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
}

html[data-page="chat"] #chat-form.chat-composer {
    flex: 0 0 auto;
    position: relative;
    inset: auto;
}

/* height/max-height for body and .chat-shell in the keyboard-open state
   are owned by the merged layer at the end of this file (former
   chat-mature.css) — do not redeclare them here,
   it used to win the cascade over the visualViewport-driven clamp right
   when the keyboard is open and let the shell grow past the visible area. */

#chat-form.chat-composer button:active,
.chat-voice-btn:active,
.chat-image-btn:active,
.chat-send-button:active {
    transform: scale(.96);
}

.chat-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-input {
    padding-inline-end: 13px;
}

.chat-header-main {
    position: relative;
}

.chat-header-actions {
    position: relative;
    margin-inline-start: auto;
    flex: 0 0 auto;
    overflow: visible;
    z-index: 40;
}

/* Same ring as the call buttons beside it (chat-call.css). */
.chat-header-more {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.chat-header-more:hover,
.chat-header-more[aria-expanded="true"] {
    background: rgba(var(--text-rgb), .07);
}

.chat-header-more .chat-icon {
    width: 22px;
    height: 22px;
}

/* Fixed, not absolute: the header card is inside main.page/body, which are
   overflow:hidden at the visual-viewport height, and the palette may add a
   backdrop-filter to the card — an absolute menu hanging below the header
   was cut off on real phones. chat-v2.js places it in physical viewport
   pixels (under the ⋮ button, clamped to the visual viewport, flipped
   above when there is no room below), so both insets are physical here. */
.chat-header-menu {
    position: fixed;
    top: 0;
    left: 0; /* stylelint-disable-line csstools/use-logical -- chat-v2.js sets left/top in physical px for both directions */
    z-index: 10040;
    display: grid;
    gap: 6px;
    min-width: 188px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.chat-header-menu[hidden] {
    display: none;
}

.chat-message-body--image {
    overflow: visible;
}

.chat-message-image {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    max-width: min(100%, 280px);
    cursor: zoom-in;
}

.chat-share-notice {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--accent-rgb), .35);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(20, 25, 34, .94));
}

.chat-share-notice img {
    width: 72px;
    height: 44px;
    object-fit: contain;
}

.chat-share-notice div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.chat-share-notice strong {
    font-size: var(--text-sm);
    color: var(--text);
}

.chat-share-notice span {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.chat-share-notice > a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-pill);
    color: var(--text);
    text-decoration: none;
    font-size: 24px;
}

.chat-message-body--listing {
    display: grid;
    gap: var(--space-2);
    min-width: min(72vw, 310px, 100%);
}

.chat-listing-caption {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Карточка объявления в сообщении: 3D-иконка рубрики слева от заголовка. */
.chat-listing-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-listing-head .chat-listing-title {
    min-width: 0;
}

.chat-listing-rubric-icon {
    --tile-size: 40px;
    flex: 0 0 auto;
}

/* П. 203: талисман и GRABIT один раз мелкой строкой, заголовок — ссылка
   на всю карточку (::after), «Написать» — отдельная кнопка поверх неё. */
.chat-listing-card {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 12px 13px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--chat-listing-bg);
    color: var(--chat-listing-text);
    overflow: hidden;
}

.chat-listing-cover {
    display: block;
    width: calc(100% + 26px);
    max-width: none;
    aspect-ratio: 1200 / 630;
    margin: 0 -13px 2px;
    object-fit: cover;
    border-block: 1px solid var(--line);
}

.chat-listing-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: .08em;
}

.chat-listing-brand img {
    width: 30px;
    height: 18px;
    object-fit: contain;
}

.chat-listing-title {
    color: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.chat-listing-title::after {
    position: absolute;
    inset: 0;
    content: "";
}

.chat-listing-title:focus-visible {
    outline: none;
}

.chat-listing-card:has(.chat-listing-title:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chat-listing-meta,
.chat-listing-description {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.chat-listing-description {
    color: var(--text);
}

/* Price or rate (plan item 182). */
.chat-listing-price {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.chat-listing-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
}

.chat-listing-author-name {
    font-weight: 600;
}

.chat-listing-email {
    color: var(--teal);
    font-weight: 600;
}

.chat-listing-action {
    position: relative;
    z-index: 1;
    justify-self: start;
    min-height: 40px;
    margin-top: 2px;
}

@media (max-width: 420px) {
    .chat-share-notice {
        grid-template-columns: 58px minmax(0, 1fr) 32px;
    }

    .chat-share-notice img {
        width: 58px;
        height: 36px;
    }

    .chat-message-body--listing {
        min-width: min(76vw, 290px, 100%);
    }
}

/* === GRABITMAP 7.8 — mature inbox visual contract === */

.inbox-search {
    min-height:44px; margin-bottom:14px; border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--surface) 78%,transparent);
}
.inbox-search-icon,.inbox-search-icon svg { width:19px; height:19px; }
.inbox-search-icon svg {
    fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
}
.chat-dialog-list { gap:0; }
.chat-dialog-entry {
    position:relative; display:block;
}
/* The rule between rows starts under the name, not under the avatar. */
.chat-dialog-entry::after {
    content:""; position:absolute; bottom:0; inset-inline:66px 0; height:1px;
    background:color-mix(in srgb,var(--line) 72%,transparent); pointer-events:none;
}
.chat-dialog-entry:last-of-type::after { content:none; }
/* The inbox search hides rows with `hidden`; display:block above beats it. */
.chat-dialog-entry[hidden] { display:none; }
.chat-dialog-card {
    min-height:76px; padding-block:11px; padding-inline:4px 46px; border:0;
    border-radius:0; background:transparent; box-shadow:none;
}
.chat-dialog-card:hover {
    transform:none; border:0!important;
    background:color-mix(in srgb,var(--surface) 58%,transparent);
    box-shadow:none;
}
.chat-dialog-card:has(.chat-dialog-unread),.chat-dialog-card.is-peer-typing {
    border:0; box-shadow:none;
}
.chat-dialog-card:has(.chat-dialog-unread) .card-title { color:var(--text); }
.chat-dialog-card .card-icon,.chat-dialog-avatar {
    width:48px; height:48px; flex-basis:48px; border-radius:50%; box-shadow:none;
}
.chat-dialog-card .card-title {
    font-size:var(--text-sm); font-weight:600; letter-spacing:-.01em;
}
.chat-dialog-card .card-meta { margin-top:3px; font-size:var(--text-xs); color:var(--muted); }
/* Time on the name's line, the unread count under it on the preview's. */
.chat-dialog-side {
    display:grid; grid-template-rows:20px 20px; row-gap:5px;
    align-content:center; justify-items:end;
}
.chat-dialog-time { grid-row:1; align-self:center; font-size:var(--text-2xs); }
.chat-dialog-unread { grid-row:2; }
.chat-dialog-entry:not(.is-muted) .chat-dialog-card:has(.chat-dialog-unread) .chat-dialog-time {
    color:var(--primary);
}
.chat-dialog-card .card-arrow { display:none; }
.chat-dialog-unread {
    min-width:20px; height:20px; padding:0 6px; border:0; background:var(--emphasis);
    color:var(--on-gold); font-size:var(--text-2xs);
}
.chat-dialog-controls {
    position:absolute; z-index:12; top:50%; inset-inline-end:4px; transform:translateY(-50%);
}
/* The open menu above the next rows' «···» buttons. */
.chat-dialog-controls[open] { z-index:13; }
.chat-dialog-controls summary {
    width:44px; height:44px; min-width:44px; min-height:44px;
    display:grid; place-items:center; border-radius:50%;
    color:var(--muted); cursor:pointer; list-style:none;
}
.chat-dialog-controls summary::-webkit-details-marker { display:none; }
.chat-dialog-controls summary:hover { background:var(--surface); color:var(--text); }
/* «···» в строке чата — тише соседних значков: видна, но не спорит с
   временем и счётчиком; при наведении/открытии — обычный цвет. */
.chat-dialog-controls summary svg { width:18px; height:18px; fill:currentColor; opacity:.7; }
.chat-dialog-controls summary:hover svg,
.chat-dialog-controls[open] summary svg { opacity:1; }
.chat-dialog-menu {
    position:absolute; top:40px; inset-inline-end:0; width:220px; padding:6px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--surface-raised,var(--surface)); box-shadow: var(--shadow-lg);
}
.chat-dialog-menu form { margin:0; }
.chat-dialog-menu button {
    width:100%; min-height:40px; display:flex; align-items:center; gap:11px;
    padding:0 11px; border:0; border-radius:var(--radius-xs); background:transparent;
    color:var(--text); font:inherit; font-size:var(--text-xs); text-align:start;
}
.chat-dialog-menu button:hover { background:color-mix(in srgb,var(--text) 7%,transparent); }
.chat-dialog-menu button svg {
    width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:540px) {
    .chat-dialog-card {
        min-height:72px; padding-block:10px; padding-inline:2px 44px; border-radius:0;
    }
    .chat-dialog-entry { gap:0; }
}

/* ------------------------------------------------------------
   Tap-to-reveal message actions: read aloud, read continuously,
   copy, reply, pin. Appears below the tapped bubble; long-press is
   deliberately left alone (reserved for a future multi-select).
------------------------------------------------------------ */
.chat-message-actions {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height var(--transition-base), opacity var(--transition-fast), margin-top var(--transition-base);
}

.chat-message-row.is-mine .chat-message-actions {
    justify-content: flex-end;
}

.chat-message-row.is-actions-open .chat-message-actions {
    max-height: 56px;
    margin-top: 6px;
    opacity: 1;
    pointer-events: auto;
}

.chat-message-action-btn {
    width: 44px;
    height: 44px;
    /* Seven buttons need 344px — narrower phones shrink them instead of clipping "⋮". */
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    -webkit-appearance: none;
    touch-action: manipulation;
}

.chat-message-action-btn .chat-icon {
    width: 18px;
    height: 18px;
}

.chat-message-action-btn[hidden] {
    display: none;
}

.chat-message-action-btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
}

.chat-message-action-btn.is-speaking {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

.chat-tts-word.is-active {
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 32%, transparent);
}

.chat-toast {
    position: fixed;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translate(-50%), direction-neutral */
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
    z-index: 60;
    transform: translate(-50%, 8px);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--text);
    color: var(--bg);
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.chat-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Floating rate/stop bar — shown only while text-to-speech is playing.
   It's a playback control, not one of the 5 per-message action buttons. */
.chat-tts-bar {
    position: fixed;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translateX(-50%), direction-neutral */
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
    z-index: 61;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.chat-tts-bar[hidden] {
    display: none;
}

.chat-tts-rate-btn {
    min-width: 44px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.chat-tts-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: var(--on-danger);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.chat-tts-stop-btn .chat-icon {
    width: 16px;
    height: 16px;
}

/* Nothing to say (link is fine, peer state hidden) — no empty strip under
   the header. Hidden from the first frame, so it only appears on an actual
   outage (after 2 s, see setConnection in chat-v2.js). */
.chat-history-toolbar:has(#chat-connection-state:empty):has(#chat-peer-state[hidden]) {
    display: none;
}

/* Group subtitle "N участников" opens the member list. */
a.chat-header-status {
    display: block;
    text-decoration: none;
}

/* Older history loads by itself at the top (plan 27): a small spinner
   while a page is on its way, no button. */
#chat-history-start {
    position: relative;
}
/* Drawn outside the 1px marker so the thread does not move. */
#chat-history-start.is-loading::after {
    content: "";
    position: absolute;
    top: 6px;
    left: calc(50% - 9px); /* stylelint-disable-line csstools/use-logical -- centred spinner, direction-neutral */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    box-sizing: border-box;
    animation: chat-older-spin .8s linear infinite;
}
@keyframes chat-older-spin {
    to { transform: rotate(360deg); }
}

/* === Chat list (plan 26): title row with «+», initials, archive row === */
.inbox-head {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    min-height:44px; margin:4px 0 8px;
}
.inbox-title { margin:0; font-size:clamp(22px,6vw,28px); font-weight: 600; letter-spacing:-.025em; }
.inbox-new { position:relative; }
.inbox-new summary {
    width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
    background:var(--emphasis); color:var(--on-gold); cursor:pointer; list-style:none;
}
.inbox-new summary::-webkit-details-marker { display:none; }
.inbox-new summary .icon { width:22px; height:22px; stroke-width:2.2; }
.inbox-new-menu { z-index:30; top:50px; }
.inbox-new-menu a {
    min-height:44px; display:flex; align-items:center; gap:11px; padding:0 11px;
    border-radius:var(--radius-xs); color:var(--text); font-size:var(--text-sm); text-decoration:none;
}
.inbox-new-menu a:hover,.inbox-new-menu a:focus-visible { background:color-mix(in srgb,var(--text) 7%,transparent); }
.inbox-new-menu .icon { width:18px; height:18px; }
.inbox-offline {
    margin:0 0 10px; padding:8px 12px; border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--danger) 12%,transparent);
    color:var(--text); font-size:var(--text-xs); text-align:center;
}
.inbox-search[hidden],.inbox-archive-row[hidden],.inbox-offline[hidden] { display:none; }
.chat-dialog-avatar,.chat-dialog-card .card-icon.chat-dialog-avatar {
    background:none!important; box-shadow:none; border:0!important;
    border-radius:50%!important; padding:0; overflow:hidden;
}
.chat-dialog-avatar::before,.chat-dialog-avatar::after { content:none; }
/* Initials: a rubric tile tone per person (data-tone, item 374) — colour
   from the theme's palette, not a random hue (that one stood out in
   «Как в системе»). Neutral plate when there is no tone. */
.chat-dialog-initials {
    position:absolute; inset:0; display:grid; place-items:center; border-radius:50%;
    background:rgba(var(--text-rgb), .08); color: var(--text);
    font-size:var(--text-base); font-weight:600; letter-spacing:.02em; line-height:1;
}
.chat-dialog-avatar .rm-me-avatar-img { border-radius:50%; }
.inbox-archive-row {
    display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:0 8px;
    color:var(--muted); font-size:var(--text-sm); text-decoration:none;
}
.inbox-archive-row .icon { width:20px; height:20px; }
.inbox-archive-count { margin-inline-start:auto; font-size:var(--text-xs); }
.inbox-archive-empty {
    margin:48px 16px; color:var(--muted); font-size:var(--text-sm); text-align:center;
}

/* Plan item 33: report reason / mute length / ban confirmation panel. */
.chat-choice-panel {
    text-align:center;
}
.chat-choice-panel p {
    margin:-4px auto 14px;
    max-width:390px;
    color:var(--muted);
    font-size:var(--text-xs);
    line-height:1.5;
}
.chat-choice-list {
    display:grid;
    gap:var(--space-2);
}
.chat-choice-list button {
    min-height:48px;
    border:1px solid var(--chat-overlay-control-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    background:var(--chat-overlay-control);
    font:inherit;
    font-size:var(--text-sm);
    font-weight: 600;
    cursor:pointer;
}
.chat-choice-list button.is-danger {
    color: var(--on-danger);
    border-color:rgba(255,109,120,.45);
    background:
        linear-gradient(
            135deg,
            var(--danger),
            color-mix(in srgb, var(--danger) 78%, black)
        );
}
.chat-choice-panel .chat-editor-footer {
    grid-template-columns:1fr;
}
/* The pin label is a text span, not an icon: undo the icon-slot sizing. */
.chat-sheet-actions > button span[data-chat-pin-label] {
    width:auto;
    color:inherit;
    font-size:inherit;
    text-align:start;
}

/* ============================================================
   «Как в системе» (data-palette="system") — слой чата. Токены и общие
   правила темы — в конце base_style (common.rs). Здесь: плотные пузыри без
   рамок (свой — тёплый коралловый оттенок, чужой — поверхность), плоская
   шапка, композер-карточка с мягким полем, листы на --surface-2.
   Специфичность не ниже правил выше; !important — там, где его ставят
   слои выше в этом файле.
   ============================================================ */
:root[data-theme] .chat-message-row .chat-bubble {
    padding: 9px 12px 7px !important;
    border-color: transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

:root[data-theme] .chat-message-row[data-mine="1"] .chat-bubble,
:root[data-theme] .chat-message-row.is-mine .chat-bubble {
    color: var(--text);
    background: var(--bubble-mine) !important;
    border-end-end-radius: 6px !important;
}

:root[data-theme] .chat-message-row[data-mine="0"]:not([data-attachment-kind="system"]) .chat-bubble,
:root[data-theme] .chat-message-row.is-theirs:not([data-attachment-kind="system"]) .chat-bubble {
    color: var(--text);
    background: var(--bubble-peer) !important;
    border-end-start-radius: 6px !important;
}

/* White peer bubbles on the light page: a hairline lift instead of a frame. */
:root[data-theme="light"] .chat-message-row.is-theirs:not([data-attachment-kind="system"]) .chat-bubble {
    box-shadow: 0 1px 1.5px rgba(16, 24, 40, .08) !important;
}

/* Messages in a row from the same side: closer together, and only the last
   one keeps the tail corner. A group's incoming rows can be different
   people, so there only the viewer's own messages are grouped. */
.chat-message-row.is-mine:not([data-attachment-kind="call"]):has(+ .chat-message-row.is-mine:not([data-attachment-kind="call"])),
#chat-messages[data-group-id=""] .chat-message-row.is-theirs:not([data-attachment-kind="call"]):has(+ .chat-message-row.is-theirs:not([data-attachment-kind="call"])) {
    margin-bottom: 2px !important;
}
:root[data-theme] .chat-message-row.is-mine:has(+ .chat-message-row.is-mine) .chat-bubble {
    border-end-end-radius: 18px !important;
}
:root[data-theme] #chat-messages[data-group-id=""] .chat-message-row.is-theirs:has(+ .chat-message-row.is-theirs) .chat-bubble {
    border-end-start-radius: 18px !important;
}
/* A call line is a pill on both ends, never a bubble with a tail. */
:root[data-theme] #chat-messages .chat-message-row[data-attachment-kind="call"] .chat-bubble {
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}

/* A short text keeps its time on the same line, the way messengers do: the
   bubble wraps its parts, and the time takes the end of the last line when
   the text leaves room for it. */
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 10px;
}
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble > * {
    flex: 0 0 100%;
    min-width: 0;
}
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble > .chat-message-body {
    flex: 1 1 auto;
}
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble > .chat-edited-label,
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble > .chat-message-meta {
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-block-end: -2px;
}
#chat-messages .chat-message-row[data-attachment-kind=""] .chat-bubble > .chat-edited-label + .chat-message-meta {
    margin-inline-start: 0;
}

/* Each paragraph takes its own direction from its first letter: an English
   message in the Arabic interface reads left to right (and a question mark
   stays at its end), an Arabic one in the English interface the other way. */
.chat-message-body,
.chat-message-caption,
.chat-reply-quote span,
.chat-reply-copy span {
    unicode-bidi: plaintext;
}

/* A photo fills its bubble: a thin edge, no frame of its own. */
:root[data-theme] .chat-message-row[data-attachment-kind="image"] .chat-bubble {
    padding: 4px 4px 6px !important;
}
.chat-message-row[data-attachment-kind="image"] .chat-message-image {
    margin: 0;
    border: 0;
    border-radius: 14px;
}
.chat-message-row[data-attachment-kind="image"] .chat-message-caption,
.chat-message-row[data-attachment-kind="image"] .chat-message-meta {
    padding-inline: 8px;
}

:root[data-theme] .chat-message-row.is-pending .chat-bubble,
:root[data-theme] .chat-bubble.is-deleted {
    border-color: var(--line-strong) !important;
}

:root[data-theme] .chat-message-meta,
:root[data-theme] .chat-message-row.is-mine .chat-message-meta {
    margin-top: 3px !important;
    padding-top: 0;
    border-top: 0;
    color: var(--muted);
}

:root[data-theme] .chat-message-author {
    color: var(--emphasis);
}

:root[data-palette="system"] .chat-message-status.is-read {
    color: var(--teal);
}

:root[data-theme] #chat-messages.chat-messages-panel {
    background: transparent;
    border-radius: 0;
    scrollbar-color: var(--line-strong) transparent;
}

:root[data-theme] .chat-date-chip {
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
    box-shadow: none;
    backdrop-filter: none;
}

:root[data-theme] .chat-unread-divider {
    color: var(--emphasis);
}

:root[data-theme] .chat-reply-quote {
    background: rgba(var(--text-rgb), .06);
}

:root[data-theme] .chat-reply-bar {
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
}

:root[data-theme] .chat-reply-accent {
    background: var(--accent);
    box-shadow: none;
}

:root[data-palette="system"] .chat-forward-bar {
    border-color: transparent;
    background: rgba(var(--teal-rgb), 0.12);
}

:root[data-palette="system"] .chat-forward-accent {
    background: var(--teal);
    box-shadow: none;
}

:root[data-theme] .chat-message-action-btn {
    border-color: transparent;
    border-radius: 50%;
    background: var(--surface-2);
}

:root[data-theme] .chat-reaction-pill {
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
    box-shadow: none;
    backdrop-filter: none;
}

:root[data-theme] .chat-reaction-pill.is-mine {
    border-color: var(--emphasis);
    background: var(--emphasis-soft);
    color: var(--emphasis);
}

:root[data-theme] .chat-scroll-bottom {
    border-color: var(--line);
    color: var(--text);
    background: var(--surface-2);
}

:root[data-theme] .chat-scroll-unread {
    border-color: var(--surface-2);
    background: var(--badge-bg);
    color: var(--badge-text);
    box-shadow: none;
}

:root[data-theme] .chat-voice-player {
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
}

:root[data-theme] .chat-voice-play {
    border-color: transparent;
    color: var(--emphasis);
    background: var(--emphasis-soft);
}

:root[data-theme] .chat-voice-progress {
    accent-color: var(--primary);
}

:root[data-theme] .chat-share-notice {
    border-color: var(--line);
    background: var(--surface-2);
}

/* Шапка чата — плоская: заголовок и статус над лентой, линия снизу. */
:root[data-theme][data-page="chat"] .hero.chat-header-premium {
    padding: 8px 4px 10px;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
}

:root[data-theme] .chat-header-avatar,
:root[data-theme] .chat-dialog-avatar {
    border-color: transparent;
    color: var(--text);
    background: rgba(var(--text-rgb), 0.08);
    box-shadow: none;
}

:root[data-palette="system"] .chat-header-presence-dot {
    border-color: var(--bg);
    background: var(--teal);
    box-shadow: none;
}

:root[data-palette="system"] .chat-header-status.is-online,
:root[data-palette="system"] .chat-peer-state.is-online,
:root[data-palette="system"] .chat-connection-state.is-online {
    color: var(--teal);
}

:root[data-theme] .chat-header-menu {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2) !important;
    box-shadow: var(--shadow-lg);
}

:root[data-theme] .chat-search-panel {
    border-bottom-color: var(--line);
    background: var(--surface-2);
}

:root[data-theme] .chat-search-form {
    border-color: var(--line);
    background: var(--bg-soft);
}

:root[data-theme] .chat-search-result {
    background: rgba(var(--text-rgb), .06);
}

:root[data-theme] .chat-search-result:hover,
:root[data-theme] .chat-search-result:focus-visible {
    border-color: var(--accent);
}

/* Композер — карточка с мягким полем; отправка — сплошной коралл. */
:root[data-theme] #chat-form.chat-composer {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface);
    box-shadow: none;
}

:root[data-theme] #chat-form .chat-composer-main {
    border-color: transparent;
    background: var(--bg-soft);
}

:root[data-theme] #chat-form .chat-composer-main:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

:root[data-theme] #chat-form #chat-voice-btn {
    color: var(--emphasis);
    background: var(--emphasis-soft);
}

:root[data-theme] #chat-form #chat-voice-btn[data-mode="send"] {
    color: var(--on-primary) !important;
    background: var(--primary) !important;
}

:root[data-theme] #chat-form #chat-voice-btn[data-mode="stop"] {
    color: var(--on-danger) !important;
    background: var(--danger) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent) !important;
}

:root[data-theme] .chat-send-button:not(:disabled),
:root[data-theme] #chat-send:not(:disabled) {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

:root[data-theme] #chat-form .chat-listing-quote {
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
}

:root[data-theme] .chat-push-ask {
    border-color: var(--line);
    background: var(--surface-2);
}

:root[data-theme] .chat-push-ask-yes {
    color: var(--on-primary);
    background: var(--primary);
}

/* Листы и диалоги чата — на --surface-2, без радиального свечения. */
:root[data-theme][data-page="chat"] {
    --chat-overlay-backdrop: rgba(4, 8, 12, 0.6);
    --chat-overlay-panel: var(--surface-2);
    --chat-overlay-border: var(--line);
    --chat-overlay-accent: transparent;
    --chat-overlay-control: rgba(var(--text-rgb), .06);
    --chat-overlay-control-border: transparent;
    --chat-overlay-handle: rgba(var(--text-rgb), 0.22);
    --chat-overlay-shadow: var(--shadow-lg);
}

:root[data-theme="light"][data-page="chat"] {
    --chat-overlay-backdrop: rgba(23, 28, 34, 0.4);
}

:root[data-theme] .chat-editor-footer button.is-primary {
    border-color: transparent;
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: none;
}

:root[data-theme] .chat-editor-footer button.is-danger,
:root[data-theme] .chat-choice-list button.is-danger {
    border-color: transparent;
    color: var(--on-danger);
    background: var(--danger);
}

:root[data-theme] #chat-editor-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

:root[data-theme] .chat-delete-panel {
    border-color: transparent;
    background: var(--surface-2);
}

:root[data-theme] .chat-attachment-icon,
:root[data-theme] .chat-document-icon {
    color: var(--emphasis);
    background: var(--emphasis-soft);
}

:root[data-theme] .chat-media-progress > span {
    background: var(--primary);
}

/* Список чатов — строки на странице, без карточки-обёртки. */
:root[data-theme] .chat-dialog-card {
    border-radius: 0;
    background: transparent;
}

:root[data-theme] .chat-dialog-card:hover {
    background: rgba(var(--text-rgb), 0.04);
}

:root[data-theme] .chat-dialog-unread,
:root[data-theme] .inbox-new summary {
    background: var(--primary);
    color: var(--on-primary);
}

:root[data-theme] .inbox-search {
    border-color: var(--line);
    background: var(--surface);
}

:root[data-theme] .inbox-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

:root[data-theme] .chat-dialog-menu,
:root[data-theme] .inbox-new-menu {
    border-color: var(--line);
    background: var(--surface-2);
}

:root[data-palette="system"] .chat-dialog-preview.is-typing,
:root[data-palette="system"] .chat-dialog-typing,
:root[data-palette="system"] .chat-peer-state.is-typing,
:root[data-palette="system"] .chat-header-status.is-typing {
    color: var(--teal);
}

:root[data-theme] .chat-toast {
    background: var(--text);
    color: var(--bg);
}

:root[data-theme] .chat-tts-bar {
    border-color: var(--line);
    background: var(--surface-2);
}

:root[data-theme] .chat-tts-rate-btn {
    border-color: transparent;
    background: rgba(var(--text-rgb), 0.07);
}

/* ------------------------------------------------------------------
   Состояния — одни для всех тем (этап 5): пустая лента и список для
   пересылки — плашка --surface-2 без пунктира, офлайн-плашка на 12 % --danger,
   спиннер истории и кольцо фокуса — --accent (см. блок «СОСТОЯНИЯ» в
   base_style, common.rs). Кольцо у ⋮ и действий сообщения задаёт
   слитый слой в конце файла (бывший chat-mature.css). */
.chat-dialog-entry:focus-visible,
.chat-reaction-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Журнал звонков — строка по центру, а не пузырь: пять «Групповой звонок ·
   0:00» подряд занимали весь экран. Автор, текст и время в одну строку,
   серия подряд свёрнута в одну (ниже). !important — потому что пузырь
   красят правила с !important выше (max-width, рамка, фон, тень, радиус). */
.chat-message-row[data-attachment-kind="call"] {
    align-items: center;
    margin-bottom: 4px;
}

/* A service line («Anna joined»): centred small text, no bubble, no time,
   no actions — the chat-v2.ts tap and selection handlers skip it. */
.chat-message-row[data-attachment-kind="system"] {
    align-items: center;
    margin: 6px 0;
}
/* The theme's bubble colours skip service lines (:not above). */
:root[data-theme] #chat-messages .chat-message-row[data-attachment-kind="system"] .chat-bubble {
    max-width: min(92%, 420px);
    padding: 3px 12px;
    background: rgba(var(--text-rgb), .05);
    cursor: default;
}
.chat-message-body--system {
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.35;
    text-align: center;
}
.chat-message-row[data-attachment-kind="system"] .chat-message-meta,
.chat-message-row[data-attachment-kind="system"] .chat-message-reactions {
    display: none;
}

.chat-message-row[data-attachment-kind="call"] .chat-bubble {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    max-width: 100% !important;
    padding: 4px 12px;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(var(--text-rgb), .05) !important;
    box-shadow: none;
    cursor: default;
}

.chat-message-row[data-attachment-kind="call"] .chat-message-author {
    margin: 0;
    color: var(--muted);
}

.chat-message-row[data-attachment-kind="call"] .chat-message-body--call {
    font-size: var(--text-2xs);
}

.chat-message-row[data-attachment-kind="call"] .chat-message-meta {
    margin: 0;
    padding: 0;
    border: 0;
}

.chat-message-row[data-attachment-kind="call"] .chat-message-status {
    display: none;
}

/* Calls in a row fold into one line (item 374): only the latest call of a run
   stays visible, with "(N)" for the whole run, as a phone's call log shows it. The earlier rows stay in the DOM
   (ids, replies, live append keep working) but take no space; visibility —
   not display:none — so they still step the counter. A date divider or any
   message between calls starts a new run. */
.chat-message-row[data-attachment-kind="call"] {
    counter-increment: call-run;
}

.chat-message-row:not([data-attachment-kind="call"]) + .chat-message-row[data-attachment-kind="call"],
.chat-message-row[data-attachment-kind="call"]:first-child,
:not(.chat-message-row) + .chat-message-row[data-attachment-kind="call"] {
    counter-reset: call-run;
    counter-increment: call-run;
}

.chat-message-row[data-attachment-kind="call"]:has(+ .chat-message-row[data-attachment-kind="call"]) {
    visibility: hidden;
    height: 0;
    min-height: 0;
    /* !important: the row rule further down sets its own margin with it. */
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
}

.chat-message-row[data-attachment-kind="call"] + .chat-message-row[data-attachment-kind="call"] .chat-message-body--call::after {
    content: " (" counter(call-run) ")";
    font-weight: 600;
}

/* ============================================================
   Бывший chat-mature.css (п. 93): слит в конец без изменений —
   порядок каскада тот же, что при двух файлах подряд.
   ============================================================ */
/* === GRABITMAP 7.9 — mature conversation and group layout === */
html[data-page="chat"] .chat-header-premium {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: none;
}

html[data-page="chat"] .chat-header-main { gap: 11px; }
html[data-page="chat"] .chat-header-avatar {
    width: 46px; height: 46px; flex-basis: 46px; border-radius: 50%; box-shadow: none;
}
html[data-page="chat"] .chat-header-title { font-size: var(--text-lg); line-height: 1.15; }
html[data-page="chat"] .chat-header-status { margin-top: 3px; font-size: var(--text-xs); }

.chat-header-menu {
    min-width: 194px; gap: 2px; padding: 6px; border-radius: var(--radius-sm);
    background: var(--surface) !important;
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 1;
    backdrop-filter: none;
}

.chat-header-menu a.chat-header-menu-item,
.chat-header-menu button {
    width: 100%; min-height: 44px; padding: 0 10px; border: 0 !important;
    border-radius: var(--radius-xs) !important; background: transparent !important;
    color: var(--text); box-shadow: none;
    display: flex; align-items: center; gap: 10px;
    font-size: var(--text-xs); font-weight: 600; text-align: start;
}
/* The row rule above sets display:flex, which outranks the UA [hidden]
   rule — the "Block" button (hidden in group chats, and until
   chat-blocks.js knows the peer) was showing anyway. */
.chat-header-menu [hidden] { display: none; }
.chat-header-menu a.chat-header-menu-item { text-decoration: none; }
.chat-header-menu-icon {
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.chat-header-menu-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-menu a.chat-header-menu-item:hover,.chat-header-menu a.chat-header-menu-item:focus-visible,
.chat-header-menu button:hover,.chat-header-menu button:focus-visible {
    background: color-mix(in srgb, var(--text) 7%, transparent) !important;
}
.chat-header-menu .chat-block-toggle { color: var(--danger) !important; }

html[data-page="chat"] .chat-shell {
    gap: 6px; padding: 0; border: 0;
    border-radius: 0; background: transparent;
    box-shadow: none; contain: layout style;
}

.chat-history-toolbar { min-height: 22px; }
.chat-toolbar-status {
    min-height: 22px; padding: 0 8px; border: 0;
    border-radius: 0; background: transparent;
    color: var(--muted); font-size: var(--text-2xs);
}

#chat-messages.chat-messages-panel {
    padding: 10px 8px 12px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.chat-message-row { margin-bottom: 7px !important; padding-inline: 2px !important; }
.chat-message-row .chat-bubble {
    min-width: 84px; max-width: min(78%, 560px);
    padding: 10px 12px 8px;
    border-radius: 16px 16px 5px 16px;
    box-shadow: none;
}
.chat-message-row.is-theirs .chat-bubble,
.chat-message-row[data-mine="0"] .chat-bubble {
    border-radius: 16px 16px 16px 5px;
}
.chat-message-body { font-size: var(--text-sm) !important; line-height: 1.38; }
.chat-message-meta {
    margin-top: 5px; padding-top: 0; border-top: 0;
    font-size: var(--text-2xs);
}

.chat-message-row[data-attachment-kind="video"] .chat-bubble {
    padding: 5px 5px 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--emphasis) 48%, transparent);
    border-radius: var(--radius) !important;
    background: color-mix(in srgb, var(--surface) 94%, var(--chat-media-bg)) !important;
    box-shadow: var(--shadow-md);
}

.chat-message-row[data-attachment-kind="video"] .chat-message-meta {
    padding: 0 7px 1px;
}

.chat-video-frame {
    overflow: hidden;
    width: min(420px, calc(100vw - 58px));
    max-width: 100%;
    border-radius: var(--radius-sm);
    background: var(--chat-backdrop);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.chat-video-frame .chat-message-video {
    width: 100%;
    max-width: 100%;
    max-height: min(62vh, 520px);
    border-radius: var(--radius-sm);
}

.chat-message-body--video .chat-message-caption {
    padding: 7px 8px 2px;
}

/* The frame has the video's own shape (chat-video-player.js sets
   --video-ratio and data-orient from the file), the picture is never cut;
   an upright phone video is narrower, not a 16:9 crop of its middle. */
.chat-video-frame {
    aspect-ratio: var(--video-ratio, 16 / 9);
    background: var(--media-bg);
}
.chat-video-frame[data-orient="portrait"] {
    width: min(250px, calc(100vw - 96px));
}
.chat-video-frame .chat-message-video {
    height: 100%;
    max-height: none;
    object-fit: contain;
}
.chat-video-play .chat-icon,
.chat-video-play .chat-icon path {
    fill: currentColor;
    stroke-linejoin: round;
}
/* Full screen is the whole screen: the bubble's caps and corners go. */
.chat-video-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background: var(--media-bg);
}
.chat-video-frame:fullscreen .chat-message-video {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
}
.chat-video-frame:fullscreen .chat-video-play {
    width: 72px;
    height: 72px;
}
.chat-video-frame:fullscreen .chat-video-play .chat-icon { width: 34px; height: 34px; }
.chat-video-frame:fullscreen .chat-video-bar {
    padding: 28px 16px calc(14px + env(safe-area-inset-bottom));
    font-size: var(--text-sm);
}

.chat-message-body--voice { min-width: min(210px, 58vw); }
.chat-voice-player {
    grid-template-columns: 38px minmax(86px,1fr); gap: var(--space-2);
    width: min(230px, 59vw); padding: 4px 0; border: 0; background: transparent;
}
.chat-voice-play { width: 38px; height: 38px; }
.chat-voice-play .chat-icon { width: 20px; height: 20px; }
.chat-voice-player.is-loading .chat-voice-play {
    position: relative;
}
.chat-voice-player.is-loading .chat-voice-play .chat-icon { opacity: .3; }
.chat-voice-player.is-loading .chat-voice-play::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: chat-voice-spin .7s linear infinite;
}
.chat-voice-player.is-error .chat-voice-play { color: var(--chat-voice-error); }
@keyframes chat-voice-spin { to { transform: rotate(1turn); } }
.chat-voice-time { grid-column: 2; min-width: 0; text-align: start; }

.chat-send-state.is-error { color: var(--danger) !important; }

#chat-form.chat-composer {
    padding: 7px; border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: none;
}
#chat-input {
    min-height: 44px; height: 44px; max-height: 120px;
    border-radius: var(--radius-sm);
    /* Below 16px, focusing the field makes iOS Safari auto-zoom the page —
       the zoomed visual viewport then disagrees with the fixed layout math
       above, which is what could make the shell look broken on focus. */
    font-size: var(--text-base);
}
.chat-composer-footer { display: none; }

@media (max-width: 540px) {
    html[data-page="chat"] .topbar { display: none; }
    html[data-page="chat"] main.page {
        /* body is position:fixed + viewport-fit=cover for this page (see
           below), so — unlike a normal scrolling page — nothing else keeps
           the header out from under a notch/status bar; top needs its own
           safe-area reservation. Right/left were previously swapped
           (inset-left applied to padding-right and vice versa), invisible
           on a centered notch but wrong on any device where the safe areas
           differ per side (e.g. a landscape notch). */
        padding: max(8px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right))
            max(22px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
    }
    html[data-page="chat"] .chat-header-premium { padding: 8px 9px; }
    html[data-page="chat"] .chat-header-avatar {
        width: 40px; height: 40px; flex-basis: 40px;
    }
    html[data-page="chat"] .chat-header-title { font-size: var(--text-lg); }
    #chat-messages.chat-messages-panel { padding-inline: 5px !important; }
    .chat-message-row .chat-bubble { max-width: 82% !important; }
    #chat-form.chat-composer {
        grid-template-columns: 40px 40px minmax(0,1fr) 46px;
        gap: 6px; flex-shrink: 0;
        margin-bottom: 2px;
    }
    #chat-form.chat-composer button { min-height: 40px; }
}

/* v7.22 — single visual-viewport owner, pure-flex shell (no measured
   fallback layer). body is pinned with position:fixed so iOS Safari cannot
   pan the layout viewport to scroll the focused input into view;
   overflow:hidden alone does not stop that native scroll, which was
   carrying the whole shell (including the input) off-screen when the
   keyboard opened.
   The container that actually shrinks for the keyboard is main.page, sized
   from --chat-viewport-height (window.visualViewport.height, updated live
   by chat-v2.js). .chat-shell no longer gets its own measured height: it
   is a flex:1 child of main.page (declared in chat-v2.css) and simply
   fills whatever main.page has left after the header, same as the
   messages panel filling whatever .chat-shell has left after the header
   row and composer. A previous version additionally forced .chat-shell to
   a JS-measured getBoundingClientRect() height (--chat-shell-visible-height) —
   that measurement raced the header's async avatar image (slower to load,
   and taller, in group chats) and could freeze a stale/undersized value,
   which is what was leaving a blank shell with no visible composer in
   group chats specifically. */
html[data-page="chat"],
html[data-page="chat"] body {
    height: 100%;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
    overscroll-behavior: none;
}

html[data-page="chat"] body {
    position: fixed;
    top: 0;
    inset-inline: 0;
    width: 100%;
}

html[data-page="chat"] main.page {
    height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
    max-height: var(--chat-viewport-height, 100dvh);
    overflow: hidden;
}

html[data-page="chat"] #chat-messages.chat-messages-panel {
    min-height: 0;
    overscroll-behavior-y: contain;
}

html[data-page="chat"] #chat-form.chat-composer {
    flex: 0 0 auto;
    min-height: 60px;
    contain: layout style;
}

html[data-page="chat"] body.chat-keyboard-open main.page {
    padding-bottom: 3px !important;
}

html[data-page="chat"] body.chat-keyboard-open #chat-form.chat-composer {
    padding-bottom: 6px;
    margin-bottom: 0;
}

/* Chrome Custom Tabs (opened by tapping a notification or a link from
   another app — the window with an "x" and "Chats · GRABIT / grabitmap.com"
   at the top) do not reliably honor interactive-widget=resizes-content: the
   on-screen keyboard can appear without window.visualViewport ever
   shrinking, so updateViewportHeight() in chat-v2.js never fires and the
   composer stays put, half covered by the keyboard. env(keyboard-inset-
   height) is set by the browser engine directly — no JS/event path
   involved — whenever it is actually rendering the keyboard in "overlay"
   mode, which is exactly what a Custom Tab silently falls back to here. In
   every context where resizes-content IS honored (a normal Chrome tab, an
   installed PWA, iOS Safari) the spec guarantees this env() is 0px, so it
   is a no-op there and cannot double-compensate on top of the JS path. */
html[data-page="chat"] #chat-form.chat-composer {
    padding-bottom: calc(7px + env(keyboard-inset-height, 0px));
}

html[data-page="chat"] body.chat-keyboard-open #chat-form.chat-composer {
    padding-bottom: calc(6px + env(keyboard-inset-height, 0px));
}

.chat-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#chat-form .chat-action-icon {
    display: grid;
    place-items: center;
}

#chat-form .chat-action-icon .chat-icon {
    width: 23px;
    height: 23px;
}

.chat-attachment-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.chat-attachment-icon .chat-icon {
    width: 27px;
    height: 27px;
}

.chat-attachment-sheet header button {
    display: grid;
    place-items: center;
}

.chat-attachment-sheet header button .chat-icon {
    width: 22px;
    height: 22px;
}

.chat-attachment-actions > button > .chat-attachment-icon {
    font-size: inherit;
}

.chat-document-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.chat-document-icon .chat-icon {
    width: 23px;
    height: 23px;
}

.chat-media-progress {
    position: relative;
    display: block;
    flex: 1 1 84px;
    width: min(120px, 28vw);
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text) 16%, transparent);
}

.chat-media-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 160ms linear;
}

.chat-media-progress.is-processing > span {
    width: 34% !important;
    animation: chat-processing-slide 1.1s ease-in-out infinite;
}

@keyframes chat-processing-slide {
    0% { transform: translateX(-110%); }
    55% { transform: translateX(110%); }
    100% { transform: translateX(300%); }
}

@media (max-width: 540px) {
    .chat-attachment-sheet {
        gap: 14px;
        padding: 10px 14px max(18px, env(safe-area-inset-bottom));
    }
    .chat-attachment-actions > button {
        min-height: 104px;
        padding: 13px 7px;
    }
    .chat-attachment-actions > button > strong { font-size: var(--text-sm); }
    .chat-attachment-actions > button > small { font-size: var(--text-2xs); }
}

/* v7.16 communication core: one compact, keyboard-safe composer. */
html[data-page="chat"] #chat-form.chat-composer {
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-areas:
        "quote quote"
        "reply reply"
        "forward forward"
        "preview preview"
        "main action";
    align-items: end;
    /* No row gap: the quote/reply/forward/preview rows are empty most of
       the time and their gaps stacked into a blank strip above the input.
       Visible bars carry their own spacing below. */
    column-gap: 6px;
    row-gap: 0;
    width: 100%;
    padding: 6px;
    border-radius: var(--radius-lg) !important;
    overflow: visible;
}

#chat-form .chat-reply-bar { grid-area: reply; }
#chat-form .chat-reply-bar,
#chat-form .chat-forward-bar,
#chat-form .chat-listing-quote,
#chat-form .chat-attachment-preview {
    margin-bottom: 6px;
}
#chat-form .chat-forward-bar { grid-area: forward; }
#chat-form .chat-reply-bar,
#chat-form .chat-forward-bar {
    grid-template-columns: 3px minmax(0, 1fr) 44px;
}
#chat-form #chat-reply-close,
#chat-form #chat-forward-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px !important;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 7%, transparent);
    font: inherit;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
#chat-form #chat-reply-close:focus-visible,
#chat-form #chat-forward-close:focus-visible {
    outline: 2px solid var(--emphasis-light);
    outline-offset: 2px;
}
.chat-sheet-actions > button,
.chat-editor-footer button,
.chat-forward-target,
.chat-sheet-reactions button {
    touch-action: manipulation;
}
.chat-forward-target {
    min-height: 48px;
}
.chat-sheet-actions > button:focus-visible,
.chat-editor-footer button:focus-visible,
.chat-forward-target:focus-visible,
.chat-sheet-reactions button:focus-visible {
    outline: 2px solid var(--emphasis-light);
    outline-offset: 2px;
}
/* Without an explicit area, this auto-placed into whichever of the
   reply/forward rows was collapsed (hidden) at the time, so the
   input row above the send/voice buttons shifted depending on which
   states were active together ("buttons jiggle"). */
#chat-form .chat-attachment-preview { grid-area: preview; }
#chat-form .chat-composer-main {
    grid-area: main;
    display: grid;
    /* First column is just the inset before the text (the emoji button
       that used to sit there is gone, plan 27). */
    grid-template-columns: 14px minmax(0, 1fr) 40px;
    grid-template-rows: auto;
    align-items: center;
    min-height: 48px;
    isolation: isolate;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

#chat-form #chat-input {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    min-width: 0;
    min-height: 46px;
    height: 46px;
    max-height: 132px;
    padding: 12px 4px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    direction: auto;
}

#chat-form .chat-image-btn {
    grid-row: 1;
    /* With the last line of a long text, as in messengers. */
    align-self: end;
    width: 40px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

#chat-form #chat-image-btn {
    grid-column: 3;
    grid-row: 1;
    width: 40px;
    min-width: 40px !important;
    max-width: 40px;
    position: relative;
    z-index: 2;
    font-size: var(--text-xl);
}

#chat-form .chat-file-input { display: none; pointer-events: none; }
.chat-attachment-menu {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    align-items: end;
}
.chat-attachment-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--chat-overlay-backdrop);
    backdrop-filter: blur(3px);
}
.chat-attachment-sheet {
    position: relative;
    display: grid;
    gap: var(--space-4);
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 10px 16px max(20px, env(safe-area-inset-bottom));
    border: 1px solid var(--chat-overlay-border);
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 85% 0, var(--chat-overlay-accent), transparent 40%),
        var(--chat-overlay-panel);
    box-shadow: var(--chat-overlay-shadow);
}
.chat-attachment-handle {
    justify-self: center;
    width: 42px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--chat-overlay-handle);
}
.chat-attachment-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-lg);
}
.chat-attachment-sheet header button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--chat-overlay-control);
    color: var(--text);
    font-size: var(--text-2xl);
    cursor: pointer;
    touch-action: manipulation;
}
.chat-attachment-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.chat-attachment-menu[hidden] { display: none; }
.chat-attachment-actions > button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 16px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--chat-overlay-control);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.chat-attachment-actions > button > span { font-size: 30px; }
.chat-attachment-actions > button > strong { font-size: var(--text-sm); }
.chat-attachment-actions > button > small {
    color: var(--muted);
    font-size: var(--text-2xs);
    text-align: center;
}
.chat-attachment-actions > button:hover,
.chat-attachment-actions > button:focus-visible {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.chat-attachment-sheet header button:focus-visible,
.chat-attachment-actions > button:focus-visible {
    outline: 2px solid var(--emphasis-light);
    outline-offset: 2px;
}
@media (max-width: 390px) {
    .chat-attachment-actions { grid-template-columns: 1fr; }
    .chat-attachment-actions > button {
        grid-template-columns: 42px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        text-align: start;
    }
    .chat-attachment-actions > button > span { grid-row: 1 / 3; }
    .chat-attachment-actions > button:not(:has(small)) > span { grid-row: auto; }
}
.chat-attachment-preview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.chat-attachment-preview img,
.chat-attachment-preview video { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-xs); }
.chat-attachment-preview button { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; }
.chat-attachment-name { display: grid; min-width: 0; }
.chat-attachment-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-meta { color: var(--muted); font-size: var(--text-xs); }
/* Several files: a row of thumbnails, each removable on its own. */
.chat-attachment-preview.is-several { grid-template-columns: minmax(0, 1fr); padding: 6px; }
.chat-attachment-strip {
    display: flex;
    gap: 8px;
    margin: 0;
    /* Room for the remove buttons that stick out of the corner. */
    padding: 8px 8px 2px 2px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-attachment-tile { position: relative; flex: 0 0 64px; height: 64px; }
.chat-attachment-tile img,
.chat-attachment-tile video,
.chat-attachment-tile .chat-document-icon { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-xs); }
.chat-attachment-length {
    position: absolute;
    inset-inline-start: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.62);
    color: var(--on-dark);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
}
/* The composer styles every `#chat-form button`: hence the id. */
html[data-page="chat"] #chat-form .chat-attachment-tile-remove {
    position: absolute;
    flex: none;
    min-width: 28px;
    max-width: 28px;
    margin: 0;
    border-radius: 50%;
    box-shadow: none;
    top: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 2px solid var(--surface);
    background: var(--text);
    color: var(--surface);
}
/* A 28px circle, a 44px target. */
.chat-attachment-tile-remove::before { content: ""; position: absolute; inset: -8px; }
.chat-attachment-tile-remove .chat-icon { width: 14px; height: 14px; }
.chat-message-video { display: block; width: min(360px, 72vw); max-height: 420px; border-radius: var(--radius-sm); background: var(--chat-media-bg); }
.chat-document-link { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }

#chat-form #chat-image-input.chat-file-input {
    display: none;
    pointer-events: none;
}

.chat-header-more:focus-visible,
.chat-message-action-btn:focus-visible,
#chat-form .chat-image-btn:focus-visible,
#chat-form #chat-voice-btn:focus-visible {
    outline: 2px solid var(--emphasis-light) !important;
    outline-offset: 2px;
}

#chat-form #chat-voice-btn {
    grid-area: action;
    align-self: end;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-height: 48px !important;
    padding: 0;
    border-radius: 50%;
}

html[data-page="chat"] #chat-form #chat-send.chat-send-button {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    min-width: 0;
    min-height: 0 !important;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(50%);
}

#chat-form #chat-voice-btn[data-mode="send"] {
    /* Background is the text colour (black in light, white in dark), so
       the icon takes the page background — a fixed dark icon vanished on
       the black button in the light theme. */
    color: var(--bg);
    background: var(--emphasis-light);
}

#chat-form #chat-voice-btn[data-mode="stop"] {
    color: var(--on-dark);
    background: linear-gradient(135deg, var(--chat-danger-from), var(--chat-danger-to)) !important;
    box-shadow: 0 0 0 4px rgba(230, 87, 99, .18);
}


#chat-form .chat-voice-recording {
    position: absolute;
    inset: 3px;
    z-index: 5;
}

#chat-form .chat-voice-recording-inner {
    width: 100%;
    height: 100%;
    min-height: 40px;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    box-sizing: border-box;
}

#chat-form.is-recording #chat-input,
#chat-form.is-recording #chat-image-btn {
    visibility: hidden;
}

#chat-form .chat-action-label,
#chat-form .chat-composer-footer {
    display: none;
}

/* The footer only ever shows the counter, from 1800 characters. */
#chat-form .chat-composer-footer.has-counter {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
    padding: 0 10px;
    font-size: var(--text-2xs);
}
#chat-form .chat-composer-footer.has-counter #chat-send-state {
    display: none;
}

@media (max-width: 540px) {
    html[data-page="chat"] #chat-form.chat-composer {
        grid-template-columns: minmax(0, 1fr) 48px;
        margin: 0 !important;
        box-sizing: border-box;
        /* main.page (above) already reserves env(safe-area-inset-bottom) as
           page padding; adding it again here stacked into a large empty
           strip below the composer. This is just a small fixed gap. */
        padding-bottom: 6px;
    }

    html[data-page="chat"] #chat-form .chat-composer-main {
        grid-area: main;
    }

    html[data-page="chat"] #chat-form #chat-voice-btn {
        grid-area: action;
    }
}

/* Listing quoted above the input ("Написать" on a card, item 22). */
#chat-form .chat-listing-quote {
    grid-area: quote;
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
    padding: 6px 6px 6px 9px;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
#chat-form .chat-listing-quote--photo {
    grid-template-columns: 3px 40px minmax(0, 1fr) 44px;
}
#chat-form .chat-listing-quote-photo {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
#chat-form .chat-listing-quote-copy {
    color: inherit;
    text-decoration: none;
}
#chat-form .chat-listing-quote-copy strong {
    overflow: hidden;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}
#chat-form .chat-listing-quote-copy span {
    font-size: var(--text-xs);
}
#chat-form #chat-listing-quote-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 7%, transparent);
    font: inherit;
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
}

/* Guest chat: input + send only. */
#chat-form[data-guest-chat] .chat-composer-main {
    grid-template-columns: 14px minmax(0, 1fr) 14px;
}
.chat-shell--guest .chat-messages-panel {
    min-height: 40vh;
}

/* "Notify me when they reply?" — once, right after the first send. */
.chat-push-ask {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 8px 0 0;
    padding: 8px 8px 8px 14px;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.chat-push-ask-text {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}
.chat-push-ask button {
    min-width: 64px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}
.chat-push-ask-no {
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
.chat-push-ask-yes {
    color: var(--bg);
    background: var(--emphasis-light);
}

/* Guest sign-in sheet: name + email, then the emailed code. */
.guest-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.guest-sheet[hidden] {
    display: none;
}
.guest-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--chat-overlay-backdrop, rgba(4, 6, 12, .62));
}
.guest-sheet-panel {
    position: relative;
    display: grid;
    gap: var(--space-3);
    width: min(480px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: var(--card, var(--surface));
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
}
.guest-sheet-handle {
    justify-self: center;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text) 22%, transparent);
}
.guest-sheet-title {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.2;
}
.guest-sheet-step {
    display: grid;
    gap: var(--space-3);
}
.guest-sheet-step[hidden] {
    display: none;
}
.guest-sheet-field {
    display: grid;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}
.guest-sheet-field input {
    min-height: 48px;
    font-size: var(--text-base);
    color: var(--text);
}
.guest-sheet-code {
    letter-spacing: .4em;
    font-variant-numeric: tabular-nums;
}
.guest-sheet-button {
    display: grid;
    place-items: center;
    min-height: 50px;
    text-decoration: none;
}
.guest-sheet-button[data-loading="true"] {
    opacity: .6;
}
.guest-sheet-error {
    margin: 0;
    min-height: 0;
    color: var(--danger);
    font-size: var(--text-xs);
}
.guest-sheet-error:empty {
    display: none;
}
.guest-sheet-hint,
.guest-sheet-legal {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.guest-sheet-legal a {
    color: inherit;
}
.guest-sheet-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}
.guest-sheet-link {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--emphasis);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.guest-sheet-link:disabled {
    color: var(--muted);
    cursor: default;
}
html.guest-sheet-open {
    overflow: hidden;
}

/* === Official chats: rules card, mentions, "Мне", guest join === */
.chat-official-intro {
    margin: 0 0 6px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    font-size: var(--text-xs);
}
.chat-official-intro summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-height: 44px;
    padding: 6px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.chat-official-intro summary::-webkit-details-marker { display: none; }
.chat-official-intro summary svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); }
.chat-official-intro summary small {
    flex: 1 1 100%;
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 500;
}
.chat-official-intro ul {
    margin: 0 0 10px;
    padding-inline-start: 18px;
    color: var(--muted);
    line-height: 1.45;
}
.chat-official-intro li + li { margin-top: 3px; }
.chat-group-intro p {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.chat-message-row.is-mention-me .chat-bubble {
    border-inline-start: 3px solid var(--accent);
}
.chat-message-row.is-highlighted .chat-bubble {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.chat-messages-panel.chat-filter-mine
    .chat-message-row:not(.is-mine):not(.is-mention-me):not([data-reply-mine="1"]) {
    display: none;
}
.chat-messages-panel.chat-filter-mine.chat-filter-empty::after {
    content: attr(data-filter-empty);
    display: block;
    padding: 28px 16px;
    color: var(--muted);
    text-align: center;
    font-size: var(--text-sm);
}
#chat-filter-mine[aria-pressed="true"] .chat-header-menu-icon { color: var(--accent); }
.chat-header-menu-form { display: contents; }
.chat-header-menu .chat-header-menu-item--wrap { min-height: 44px; padding-block: 6px; }
.chat-header-menu .chat-header-menu-item--wrap .chat-header-menu-label { white-space: normal; }
html[data-page="chat"] .chat-shell > .chat-official-intro { width: 100%; align-self: stretch; }

/* Overrides the composer's button rules (chat-v2.css styles every
   `#chat-form button`), hence the id in the selector. */
#chat-form .chat-mention-list[hidden] { display: none; }
#chat-form .chat-mention-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0 4px 4px;
}
#chat-form .chat-mention-option {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--text);
    box-shadow: none;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
#chat-form .chat-mention-option:hover,
#chat-form .chat-mention-option:focus-visible {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.chat-guest-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
}
.chat-guest-join .ui-button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; }

/* Links in message text and captions (linkify_escaped / ResursMapChat.linkify). */
.chat-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.chat-link:hover { text-decoration-thickness: 2px; }

/* The sheet before a link from someone unknown (chat-guard.js). */
.chat-link-host {
    display: block;
    margin: 0 auto 12px;
    max-width: 390px;
    font-size: var(--text-base);
    overflow-wrap: anywhere;
}
/* What is wrong with the address: a look-alike of GRABIT, another
   alphabet or a link shortener (chat-guard.js, linkRisk). */
.chat-link-risk {
    margin: 0 auto 12px;
    max-width: 390px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--text);
    font-weight: 600;
}

/* Chat header in one row: back arrow, avatar, name, call, ⋮. The word
   «Назад» stays for screen readers; the call button and ⋮ sit side by side. */
.chat-header-main > .rm-back-link {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 44px;
    margin: 0;
    margin-inline-start: -6px;
    gap: 0;
    color: var(--text);
}
.chat-header-main > .rm-back-link span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.chat-header-main > .rm-back-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.chat-header-main > .chat-header-copy {
    flex: 1 1 auto;
    min-inline-size: 0;
}
/* No status yet (a person who is not online): the name centres on the
   avatar instead of sitting over an empty line. */
.chat-header-status:empty {
    display: none;
}
/* The page's `.hero h1` gap below the title would push the name up. */
.hero.chat-header-premium .chat-header-title {
    margin: 0;
}
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The ⋮ menu when it is taller than the visible area (chat-v2.js,
   placeHeaderMenu): two columns instead of one. */
.chat-header-menu.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: min(372px, calc(100vw - 16px));
}
/* Half the width: a label wraps to a second line instead of «Управ…». */
.chat-header-menu.is-compact .chat-header-menu-label {
    white-space: normal;
    hyphens: manual;
    overflow-wrap: normal;
    line-height: 1.2;
}
.chat-header-menu.is-compact a.chat-header-menu-item,
.chat-header-menu.is-compact button {
    min-height: 44px;
    height: auto;
    padding-block: 6px;
}

/* Two buttons side by side in the link sheet (the choice panel stacks
   its footer in one column). */
.chat-editor-panel.chat-link-panel .chat-editor-footer {
    grid-template-columns: 1fr 1fr;
}

/* Список чатов (бывший communication-polish.css, п. 94): обрезка превью,
   метки «закреплён / без звука / прочитано» у времени, черновик. */
.chat-dialog-preview {
    max-width: min(68vw, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dialog-menu-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dialog-list .rm-empty-state {
    margin-top: 8px;
}

.chat-dialog-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-dialog-mark {
    display: inline-grid;
    place-items: center;
    color: var(--muted);
}

.chat-dialog-mark svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-dialog-mark--tick svg {
    width: 15px;
    height: 15px;
}

.chat-dialog-mark--tick.is-read {
    color: var(--accent);
}

.chat-dialog-list .chat-dialog-entry.is-muted .chat-dialog-unread {
    background: rgba(var(--text-rgb), 0.14);
    color: var(--muted);
}

.chat-dialog-draft {
    color: var(--danger);
    font-weight: 600;
}

/* The pinned «Help GRABIT» chat (plan item 249): a soft accent instead of
   the ⋮ menu — it cannot be archived, muted or unpinned. */
.chat-dialog-card--support {
    border-color: color-mix(in srgb, var(--emphasis) 35%, var(--line));
}
.chat-dialog-card--support .chat-dialog-initials {
    background: var(--emphasis);
    color: var(--bg);
}
[data-support] {
    grid-template-columns: minmax(0, 1fr);
}

/* The history stays invisible until the inline first-frame script
   (communication.rs, chat_first_frame_script) has scrolled it to its last
   message: browsers without render-blocking (`<link rel="expect">`, Chrome
   has it) would otherwise paint its top first and then jump. Only with
   scripting on — without it the page shows the history as is. */
@media (scripting: enabled) {
    #chat-messages:not([data-anchored]) { visibility: hidden; }
}

/* A file dragged over the chat (desktop, chat-v2.js). */
.chat-shell.is-file-over {
    outline:2px dashed var(--accent);
    outline-offset:-6px;
}

/* «Договорились» (plan item 344): the deal card in a personal chat, the
   strip of open deals above the messages and the form (chat-deal.js). */
.chat-message-body--deal {
  min-width: min(280px, 70vw);
}
.chat-deal-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--text-rgb), 0.04);
}
.chat-deal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.chat-deal-title {
  font-weight: 600;
}
.chat-deal-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
  background: rgba(var(--text-rgb), 0.08);
}
.chat-deal-card.is-confirmed .chat-deal-status {
  color: var(--on-gold);
  background: var(--text);
}
.chat-deal-card.is-done .chat-deal-status {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.chat-deal-card.is-cancelled {
  opacity: 0.72;
}
.chat-deal-card.is-cancelled .chat-deal-what {
  text-decoration: line-through;
}
.chat-deal-summary,
.chat-deal-what {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.chat-deal-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}
.chat-deal-facts dt {
  color: var(--muted);
}
.chat-deal-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.chat-deal-note,
.chat-deal-consent,
.chat-deal-form-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.chat-deal-when-day {
  margin: -4px 0 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}
.chat-deal-when-day::first-letter {
  text-transform: uppercase;
}
.chat-deal-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-xs);
}
.chat-deal-error:empty {
  display: none;
}
.chat-deal-review {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
}
.chat-deal-review-who {
  color: var(--muted);
}
.chat-deal-stars {
  letter-spacing: 1px;
}
.chat-deal-review-text {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
.chat-deal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chat-deal-actions button {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface, transparent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.chat-deal-actions button.is-primary {
  color: var(--on-gold);
  border-color: transparent;
  background: var(--text);
}
.chat-deal-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-deal-actions .chat-deal-calendar {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.chat-deal-strip {
  display: grid;
  gap: 4px;
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--line);
}
.chat-deal-strip[hidden] {
  display: none;
}
.chat-deal-strip-item {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  overflow: hidden;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  cursor: pointer;
}
.chat-deal-strip-status {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: rgba(var(--text-rgb), 0.08);
}
.chat-deal-strip-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-deal-strip.is-stale .chat-deal-strip-item {
  opacity: 0.6;
}
.chat-deal-strip-retry {
  justify-self: start;
  min-height: 32px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}
.chat-deal-strip-retry:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-deal-form {
  display: grid;
  gap: var(--space-3);
  text-align: start;
}
.chat-deal-field {
  display: grid;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.chat-deal-field input,
.chat-deal-field textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--chat-overlay-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--chat-overlay-control);
  font: inherit;
  /* 16px: below that iOS Safari zooms the page on focus. */
  font-size: var(--text-base);
}
.chat-deal-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.chat-deal-role {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--chat-overlay-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.chat-deal-role:has(input:checked) {
  border-color: var(--text);
  font-weight: 600;
}
.chat-deal-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 4px;
}
.chat-deal-star input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chat-deal-star span {
  display: block;
  font-size: 34px;
  line-height: 44px;
  width: 44px;
  text-align: center;
  color: rgba(var(--text-rgb), 0.25);
  cursor: pointer;
}
.chat-deal-star:has(input:checked) span,
.chat-deal-star:has(input:checked) ~ .chat-deal-star span {
  color: var(--gold-fill);
}
.chat-deal-star input:focus-visible + span {
  outline: 2px solid var(--text);
  border-radius: var(--radius-sm);
}

/* Selecting messages (long press, right click): marked rows, and the bar at
   the bottom over the composer that acts on all of them. */
/* One opaque tint across the row (no frame around the bubble: it was cut
   off at the screen edge); the shadow widens it without moving the row. */
.chat-message-row.is-selected {
    --chat-selected-tint:color-mix(in srgb, var(--accent) 16%, var(--bg));
    border-radius:var(--radius-sm);
    background:var(--chat-selected-tint);
    box-shadow:0 0 0 3px var(--chat-selected-tint);
}
body.chat-selecting .chat-message-row .chat-bubble {
    cursor:default;
}
body.chat-selecting #chat-form {
    visibility:hidden;
}
/* The phone's own long-press menu (save image, select text) would cover
   the selection; copying is in the bar. */
@media (pointer: coarse) {
    #chat-messages .chat-bubble {
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        user-select:none;
    }
}
.chat-select-bar {
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:10030;
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    align-items:center;
    justify-content:space-between;
    width:min(100%,620px);
    margin:0 auto;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border:1px solid var(--chat-overlay-border);
    border-bottom:0;
    border-radius:20px 20px 0 0;
    background:var(--chat-overlay-panel);
    box-shadow:var(--chat-overlay-shadow);
    box-sizing:border-box;
    animation:chat-sheet-in .2s cubic-bezier(.2,.8,.2,1);
}
.chat-select-bar[hidden] {
    display:none;
}
.chat-select-head {
    display:flex;
    gap:8px;
    align-items:center;
}
.chat-select-head button,
.chat-select-actions button {
    display:inline-flex;
    gap:4px;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0 8px;
    border:0;
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--text);
    font:inherit;
    cursor:pointer;
}
.chat-select-actions {
    display:flex;
    flex-wrap:wrap;
    gap:2px;
}
.chat-select-actions button {
    flex-direction:column;
    font-size:var(--text-xs);
}
.chat-select-actions button[hidden] {
    display:none;
}
.chat-select-actions button.is-danger {
    color:var(--danger);
}
.chat-select-head button:focus-visible,
.chat-select-actions button:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.chat-select-count {
    font-size:var(--text-sm);
}

/* Voice message (owner, 2026-10-19): play button, waveform, time under it.
   The range input stays for seeking and screen readers — invisible, laid
   over the waveform in the same grid cell. */
.chat-voice-player,
:root[data-theme] .chat-voice-player {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 30px auto;
    column-gap: 10px;
    row-gap: 2px;
    width: min(100%, 260px);
    padding: 4px 2px;
    border: 0;
    background: transparent;
}

.chat-voice-play,
:root[data-theme] .chat-voice-play {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--primary);
    color: var(--on-primary);
}

.chat-voice-play .chat-icon {
    fill: currentColor;
}

.chat-voice-wave {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    /* The bars span the whole width the seek range covers: no strip at
       the end the progress never reaches. */
    justify-content: space-between;
    gap: 2px;
    height: 30px;
    min-width: 0;
    pointer-events: none;
}

.chat-voice-wave i {
    flex: 0 1 3px;
    min-width: 2px;
    height: var(--h, 40%);
    border-radius: 2px;
    background: rgba(var(--text-rgb), .28);
    transition: background .15s ease, height .3s ease;
}

.chat-voice-wave i.is-on {
    background: var(--primary);
}

.chat-voice-progress,
:root[data-theme] .chat-voice-progress {
    grid-row: 1;
    grid-column: 2;
    height: 30px;
    opacity: 0;
}

.chat-voice-player:has(.chat-voice-progress:focus-visible) .chat-voice-wave {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

.chat-voice-time {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    text-align: start;
}

/* 1× / 1.5× / 2× at the end of the time row (chat-voice-player.js); its
   height fits the row, the bubble does not grow when it appears. */
.chat-voice-speed {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    min-width: 34px;
    height: 18px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    background: rgba(var(--text-rgb), .1);
    color: var(--muted);
    font: inherit;
    font-size: var(--text-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
}

/* A bigger hit area than the pill itself. */
.chat-voice-speed::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
}

.chat-voice-speed.is-fast {
    background: var(--primary);
    color: var(--on-primary);
}

@media (max-width: 540px) {
    .chat-voice-player {
        grid-template-columns: 40px minmax(0, 1fr);
        width: min(100%, 240px);
    }
}

/* «Clear history» / «Remove chat» in the header menu: they lose the
   history, so they read as dangerous and sit apart from the rest (the
   forms are `display: contents`, so the line goes on the first button). */
.chat-header-menu-item--danger {
    color: var(--danger);
}
.chat-header-menu-form:not(:has(.chat-header-menu-item--danger)) + .chat-header-menu-form > .chat-header-menu-item--danger {
    border-top: 1px solid var(--line);
}