/* Right-hand conversation profile — chat shell only */

#page-chat .peer-panel-dock {
    /* Reference layout (images/Group 43.png): 336px plate in the page tone,
       white cards inside. Scoped here so the toggle + edge notch match. */
    --peer-panel-w: 296px;
    /* Card surface = the left sidebar's plate (--nexa-aside-fill → --bg-section):
       #FFFFFF on the light themes, #0A0A0A on Dark Neon (--card-bg #121212
       read greyer next to the left sidebar). */
    --peer-surface: var(--bg-section, var(--card-bg, #0a0a0a));
    --nexa-aside-fill: var(--bg-main, var(--bg, #070707));
    /* One clock for open + close: width, shelf slide and dock margin */
    --peer-motion-duration: 0.28s;
    --peer-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --peer-toggle-h: var(--nexa-aside-toggle-h, 88px);
    flex-shrink: 0;
    height: 100%;
    overflow: visible;
    position: relative;
    transition: margin-right var(--peer-motion-duration) var(--peer-motion-ease);
}

#page-chat .peer-panel-dock:has(.peer-panel.is-collapsed) {
    --peer-motion-duration: 0.28s;
    --peer-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

#page-chat .peer-panel {
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition:
        width var(--peer-motion-duration, 0.5s) var(--peer-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
    width: var(--peer-panel-w, 296px);
    /* Cover the tucked toggle so it slides out from under the shelf. */
    z-index: 2;
}

/* Left edge — native rounded border on the shelf; dock eraser notches
   only the toggle segment (shelf overflow would clip a shelf ::before). */
#page-chat .peer-panel-dock:not(:has(.peer-panel.is-collapsed))::before {
    background: var(--nexa-aside-fill);
    content: "";
    height: var(--nexa-aside-toggle-h, 88px);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    #page-chat .peer-panel-dock:not(:has(.peer-panel.is-collapsed)):hover::before,
    #page-chat .peer-panel-dock:not(:has(.peer-panel.is-collapsed)):has(.aside-toggle--end:focus-visible)::before {
        opacity: 1;
    }
}

@media (hover: none) {
    #page-chat .peer-panel-dock:not(:has(.peer-panel.is-collapsed))::before {
        opacity: 1;
    }
}

#page-chat .peer-panel.is-collapsed {
    /* Slide the plate off-canvas to the right; never paint over the toggle
       on the inner edge (left). Matches the left capsule, which overflows
       away from its toggle. */
    clip-path: inset(0 -100% 0 0);
    min-width: 0;
    overflow: visible;
    width: 0;
}

#page-chat .peer-panel-shelf {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(0);
    transition:
        transform var(--peer-motion-duration, 0.5s) var(--peer-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        visibility 0s linear 0s;
    visibility: visible;
    width: var(--peer-panel-w, 296px);
}

/* With a chat open the two cards are the only surfaces: no outer plate.
   (The empty / welcome state keeps the shared aside plate.) */
#page-chat .peer-panel:not(.is-empty),
#page-chat .peer-panel:not(.is-empty) .peer-panel-shelf {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

#page-chat .peer-panel.is-collapsed .peer-panel-shelf {
    pointer-events: none;
    transform: translateX(100%);
    transition:
        transform var(--peer-motion-duration, 0.52s) var(--peer-motion-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        visibility 0s linear var(--peer-motion-duration, 0.52s);
    visibility: hidden;
}

.peer-panel-scrim {
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: rgba(0, 0, 0, 0.48);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.35s ease;
    z-index: 36;
}

.peer-panel-scrim[hidden] {
    display: none;
}

#page-chat.is-peer-overlay-open .peer-panel-scrim {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

#page-chat.is-viewport-peer-narrow {
    --peer-overlay-w: min(360px, 92vw);
}

#page-chat.is-viewport-peer-narrow .peer-panel-dock {
    bottom: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--peer-overlay-w);
    z-index: 40;
}

#page-chat.is-viewport-peer-narrow .peer-panel,
#page-chat.is-viewport-peer-narrow .aside-toggle--end {
    pointer-events: auto;
}

#page-chat.is-viewport-peer-narrow .peer-panel {
    border-left-color: var(--theme-border, #1a1a1a);
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
    height: 100%;
    min-width: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(0);
    transition:
        transform var(--peer-motion-duration) var(--peer-motion-ease),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    width: var(--peer-overlay-w);
    will-change: transform;
}

#page-chat.is-viewport-peer-narrow .peer-panel.is-collapsed {
    border-left-color: transparent;
    box-shadow: none;
    clip-path: none;
    pointer-events: none;
    transform: translateX(100%);
    width: var(--peer-overlay-w);
}

#page-chat.is-viewport-peer-narrow .peer-panel-shelf {
    border-left-color: var(--theme-border, #1a1a1a);
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    transition: none;
    visibility: visible;
    width: 100%;
}

#page-chat.is-viewport-peer-narrow .peer-panel.is-collapsed .peer-panel-shelf {
    pointer-events: none;
    transform: none;
    visibility: visible;
}

#page-chat.is-viewport-peer-narrow .peer-panel-dock:has(.peer-panel.is-collapsed) .aside-toggle--end {
    right: 0;
    transform: translate(0, -50%);
}

#page-chat.is-viewport-peer-narrow.is-peer-overlay-open .aside-toggle--end {
    right: 100%;
    transform: translate(0, -50%);
}

#page-chat .peer-panel.no-motion,
#page-chat .peer-panel.no-motion .peer-panel-shelf,
#page-chat .peer-panel-dock:has(.peer-panel.no-motion),
#page-chat .peer-panel-dock:has(.peer-panel.no-motion) .aside-toggle {
    transition: none;
}

.peer-panel-empty {
    color: var(--text-tertiary, var(--theme-text-muted, #6b6b6b));
    display: none;
    flex: 1;
    flex-direction: column;
    font-family: var(--f-ui);
    min-height: 0;
    padding: 0;
    position: relative;
    text-align: center;
}

.peer-panel.is-empty .peer-panel-empty {
    display: flex;
}

.peer-empty-hero {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    min-height: 0;
    padding: 36px 22px;
    position: absolute;
    width: 100%;
}

.peer-empty-hero--compose {
    display: none;
}

#page-chat.is-compose-search .peer-empty-hero--welcome {
    display: none;
}

#page-chat.is-compose-search .peer-empty-hero--compose {
    display: flex;
}

.peer-empty-core {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
}

.peer-empty-art {
    align-items: center;
    color: var(--theme-text-muted, #d4d4d8);
    display: flex;
    flex-shrink: 0;
    height: 96px;
    justify-content: center;
    margin: 0 0 14px;
    position: relative;
    width: 96px;
}

.peer-empty-icon {
    display: block;
    fill: none;
    flex-shrink: 0;
    height: 56px;
    opacity: 0.72;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 56px;
}

.peer-empty-title {
    color: var(--theme-text, #f4f4f5);
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin: 0 0 10px;
    min-height: 1.25em;
}

.peer-empty-copy {
    color: var(--theme-text-muted, #8a8a8a);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 230px;
    min-height: calc(1.5em * 3);
}

/* Same reserved height in both modes so centering keeps icons locked. */
.peer-empty-cta {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    min-height: 36px;
}

.peer-empty-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--theme-border, #2a2a2a);
    border-radius: 999px;
    color: var(--theme-text-muted, #d4d4d8);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--f-ui);
    font-size: 12px;
    font-weight: 500;
    gap: 8px;
    padding: 8px 14px 8px 16px;
    text-decoration: none;
}

.peer-empty-btn:hover {
    background: var(--theme-section, #101010);
    border-color: var(--theme-border, #3a3a3a);
    color: var(--theme-text, #f4f4f5);
}

.peer-empty-btn .ui-icon {
    height: 14px;
    width: 14px;
}

.peer-panel-empty:not(.is-entering) .peer-empty-art,
.peer-panel-empty:not(.is-entering) .peer-empty-title,
.peer-panel-empty:not(.is-entering) .peer-empty-copy,
.peer-panel-empty:not(.is-entering) .peer-empty-btn {
    opacity: 1;
}

.peer-panel-empty.is-entering .peer-empty-art,
.peer-panel-empty.is-entering .peer-empty-title,
.peer-panel-empty.is-entering .peer-empty-copy,
.peer-panel-empty.is-entering .peer-empty-btn {
    animation: nexa-empty-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.peer-panel-empty.is-entering .peer-empty-art { animation-delay: 0.06s; }
.peer-panel-empty.is-entering .peer-empty-title { animation-delay: 0.16s; }
.peer-panel-empty.is-entering .peer-empty-copy { animation-delay: 0.24s; }
.peer-panel-empty.is-entering .peer-empty-btn { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .peer-panel-empty.is-entering .peer-empty-art,
    .peer-panel-empty.is-entering .peer-empty-title,
    .peer-panel-empty.is-entering .peer-empty-copy,
    .peer-panel-empty.is-entering .peer-empty-btn,
    .peer-panel-empty:not(.is-entering) .peer-empty-art,
    .peer-panel-empty:not(.is-entering) .peer-empty-title,
    .peer-panel-empty:not(.is-entering) .peer-empty-copy,
    .peer-panel-empty:not(.is-entering) .peer-empty-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@keyframes nexa-empty-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.peer-panel-body {
    /* Reference greys are the text colour mixed into the card surface */
    --peer-ink-70: color-mix(in srgb, var(--text-primary, #f4f4f5) 70%, var(--peer-surface));
    --peer-ink-45: color-mix(in srgb, var(--text-primary, #f4f4f5) 45%, var(--peer-surface));
    --peer-ink-40: color-mix(in srgb, var(--text-primary, #f4f4f5) 40%, var(--peer-surface));
    --peer-ink-35: color-mix(in srgb, var(--text-primary, #f4f4f5) 35%, var(--peer-surface));
    --peer-card-radius: 50px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 0;
}

.peer-panel.is-empty .peer-panel-body {
    display: none;
}

/* ── Profile card: photo · name + last seen · bio · pills ─────────────────── */
.profile-info-card {
    position: relative;
    background: var(--peer-surface) !important;
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: var(--peer-card-radius);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 13px 13px 12px;
}

#page-chat .peer-avatar--cover,
#page-chat #uiPeerAvatar {
    align-items: center;
    aspect-ratio: 1 / 1;
    border: none;
    /* Concentric with the card: card radius − its padding */
    border-radius: calc(var(--peer-card-radius) - 13px);
    box-shadow: none;
    /* Initials on the hue gradient stay white on every theme */
    color: #ffffff;
    display: flex;
    font-family: var(--f-display);
    font-size: 72px;
    font-weight: 600;
    height: auto;
    justify-content: center;
    letter-spacing: -0.04em;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

#page-chat #uiPeerAvatar.has-photo {
    background: var(--bg-main, #070707);
}

#page-chat #uiPeerAvatar .contact-avatar-img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* The photo shows clean — no overlay at the bottom. clip-path keeps it on
   the rounded corners (overflow alone can leave square edges in Chromium /
   WebKit on composited images). */
#page-chat #uiPeerAvatar.has-photo {
    clip-path: inset(0 round calc(var(--peer-card-radius) - 13px));
    overflow: hidden !important;
    position: relative;
}

.profile-title-row {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 18px;
    min-width: 0;
    padding: 0 18px 0 7px;
}

.peer-name {
    color: var(--text-primary, #f4f4f5);
    flex: 1 1 auto;
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peer-status {
    color: var(--peer-ink-40);
    flex-shrink: 0;
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.peer-status.is-hidden {
    display: none;
}

.peer-status-now {
    color: #2bae6c;
    font-weight: 700;
}

.peer-bio {
    color: var(--peer-ink-45);
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 17px;
    margin: 18px 0 0;
    overflow-wrap: anywhere;
    padding: 0 18px 0 7px;
    white-space: pre-wrap;
}

.peer-bio.is-placeholder {
    opacity: 0.7;
}

/* Pills: Mute (2×, filled contrast) · Delete · Clear (page tone, red text) */
.peer-actions {
    display: flex;
    position: relative;
    gap: 6px;
    /* The only gap between Bio and the pills (Bio has no bottom margin; in a
       flex column margins add up, so one side carries it) */
    margin-top: 24px !important;
    padding: 0 8px;
}

.peer-action-pill {
    align-items: center;
    appearance: none;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 0;
    font-family: var(--f-ui);
    font-size: 12.5px;
    font-weight: 500;
    height: 49px;
    justify-content: center;
    letter-spacing: -0.005em;
    min-width: 0;
    padding: 0 12px;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
    white-space: nowrap;
}

/* Icon + label ride above the sliding highlight; the pill's own fill stays
   below it (the pill itself is not positioned, so it adds no stacking level) */
.peer-action-pill > * {
    position: relative;
    z-index: 2;
}

.peer-action-pill > svg {
    flex-shrink: 0;
    height: 16px;
    margin-right: 6px;
    stroke-width: 2;
    width: 16px;
}

/* Sliding hover highlight — the left sidebar's list motion (listHoverTransition),
   painted over the pill's fill and under its label */
.peer-actions-highlight {
    background: color-mix(in srgb, var(--text-primary, #fff) 7%, transparent);
    border-radius: 9999px;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

/* Over the filled Mute pill, a wash of the card colour reads instead */
.peer-actions-highlight[data-tone="primary"] {
    background: color-mix(in srgb, var(--card-bg, #121212) 16%, transparent);
}

/* Contrast fill = the theme's text colour: near-black on light, white on Dark Neon */
.peer-action-pill--primary {
    background: var(--text-primary, #ffffff);
    color: var(--card-bg, #070707);
    flex-grow: 2;
}


.peer-action-pill--danger {
    /* The fill is .peer-action-pill__surface — it morphs into .peer-confirm */
    background: transparent;
    color: var(--text-danger);
    position: relative;
}

.peer-action-pill > .peer-action-pill__surface {
    background: var(--bg-main, #070707);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* ── Delete / Clear confirmation: grows out of the pill over the card ─────── */
.peer-confirm {
    /* Exactly the card's padding box: same edges and (inner) corner radius as
       .profile-info-card, so no card border or photo peeks out at the corners.
       Fill = the card surface itself (--peer-surface, what the card paints). */
    background-color: var(--peer-surface, var(--card-bg)) !important;
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 20;
}

.peer-confirm__body {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 24px 20px;
    text-align: center;
    width: 100%;
}

/* Icon + text (+ code / check) take the free space and sit in its middle;
   the buttons stay pinned below */
.peer-confirm__center {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    text-align: center;
    width: 100%;
}

.peer-confirm__icon {
    align-items: center;
    background: var(--danger-10, color-mix(in srgb, var(--color-danger) 12%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
    border-radius: 50%;
    color: var(--text-danger);
    display: inline-flex;
    flex-shrink: 0;
    height: 56px;
    justify-content: center;
    margin: 0 auto 16px;
    width: 56px;
}

.peer-confirm__icon svg {
    height: 24px;
    stroke-width: 2;
    width: 24px;
}

.peer-confirm__title {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 8px;
}

.peer-confirm__copy {
    color: var(--peer-ink-45, var(--text-secondary, #9a9a9a));
    font-family: var(--f-ui);
    font-size: 13px;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 260px;
    text-align: center;
    text-wrap: balance;
}

.peer-confirm__actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 8px;
    padding-top: 20px;
    width: 100%;
}

.peer-confirm__btn {
    appearance: none;
    background: var(--hover-bg, color-mix(in srgb, var(--text-primary, #fff) 8%, transparent));
    border: 0;
    border-radius: 9999px;
    color: var(--text-primary, #f4f4f5);
    cursor: pointer;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    height: 46px;
    transition:
        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.peer-confirm__btn:hover {
    background: color-mix(in srgb, var(--text-primary, #fff) 10%, var(--bg-main, #070707));
}

.peer-confirm__btn--danger {
    background: var(--color-danger);
    color: #ffffff;
}

.peer-confirm__btn--danger:hover {
    background: var(--danger-hover, var(--color-danger));
}

.peer-confirm__btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary, #fff) 40%, transparent);
    outline-offset: 2px;
}

.peer-confirm__btn:active {
    transform: scale(0.97);
}

/* Step 2 — code entry (src/components/ui/otp-input.tsx, themed here) */
.peer-confirm__code {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-mono, ui-monospace, monospace);
    font-weight: 700;
    letter-spacing: 0.14em;
}

.peer-confirm__otp {
    align-items: center;
    margin-top: 18px;
}

.otp-cell {
    background: color-mix(in srgb, var(--text-primary, #fff) 4%, var(--peer-surface, #0a0a0a));
    /* One weight for every state; the cell's border carries all the signal */
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.otp-cell[data-state="filled"] {
    background: var(--card-bg, #121212);
    border-color: color-mix(in srgb, var(--text-primary, #fff) 22%, transparent);
    box-shadow: none;
}

/* Focus: a soft contour, no ring. The blinking caret marks the cell. */
.otp-cell[data-state="active"] {
    background: var(--card-bg, #121212);
    border-color: color-mix(in srgb, var(--text-primary, #f4f4f5) 45%, transparent) !important;
    box-shadow: 0 0 0 1px var(--border-subtle, #1c1c1c) !important;
}

/* The global input:focus-visible ring (design-system.css) stays off: cells are
   focused programmatically, so every active cell would otherwise get it. */
.otp-cell:focus,
.otp-cell:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

.otp-cell[data-state="error"] {
    background: var(--card-bg, #121212);
    border-color: var(--color-danger);
    box-shadow: none;
}

.otp-cell[data-state="success"] {
    background: var(--card-bg, #121212);
    border-color: #2bae6c;
    box-shadow: none;
}

.otp-cell__char {
    color: var(--text-primary, #f4f4f5);
}

.otp-cell__caret {
    background: var(--text-primary, #f4f4f5);
}

.otp-message {
    text-align: center;
}

.otp-message.is-error {
    color: var(--text-danger);
}

.otp-message.is-success {
    color: #2bae6c;
}

.otp-message.is-hint {
    color: var(--peer-ink-45, var(--text-secondary, #9a9a9a));
}

/* Step 3 — verified */
.peer-confirm__check {
    align-items: center;
    background: color-mix(in srgb, #2bae6c 14%, transparent);
    border: 1.5px solid #2bae6c;
    border-radius: 50%;
    color: #2bae6c;
    display: inline-flex;
    height: 64px;
    justify-content: center;
    margin: 0 auto 16px;
    width: 64px;
}

.peer-confirm__check svg {
    height: 30px;
    stroke-width: 2.5;
    width: 30px;
}


.peer-action-pill:focus-visible {
    outline: 2px solid var(--peer-ink-40);
    outline-offset: 2px;
}

.peer-action-pill:active:not(:disabled) {
    transform: scale(0.95);
}

.peer-action-pill:disabled {
    cursor: default;
    opacity: 0.4;
}

/* ── Saved Messages card (reference: images/Screenshot 2026-09-25 at
   21.58.22.png, scaled ×0.7 to this panel): a header banner and the saved
   items as separate rounded cards on the card surface. Accent = the theme's
   --accent-primary (lime on Dark Neon), its ink = --text-on-accent. ─────── */
.saved-messages-card {
    position: relative;
    background: var(--peer-surface) !important;
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: var(--peer-card-radius);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
    overflow: hidden;
    padding: 12px 12px 0;
}

/* Header banner */
.saved-banner {
    background: var(--card-bg, #121212);
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: calc(var(--peer-card-radius) - 12px);
    flex-shrink: 0;
    overflow: hidden;
    padding: 14px 18px;
    position: relative;
}

/* Dot grid on the right, in the accent, dissolving to the left and down */
.saved-banner__dots {
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent-primary, #c7ff00) 55%, transparent) 1.1px,
        transparent 1.6px
    );
    background-position: 5px 5px;
    background-size: 11px 11px;
    bottom: 0;
    /* Shallower banner: a wider, flatter fade so the grid still reads */
    -webkit-mask-image: radial-gradient(ellipse 80% 140% at 100% 0%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 140% at 100% 0%, #000 25%, transparent 80%);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
}

.saved-banner__title {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    position: relative;
    white-space: nowrap;
}

.saved-banner__note {
    align-items: center;
    color: var(--peer-ink-45, var(--text-secondary, #8e8e93));
    display: flex;
    font-family: var(--f-ui);
    font-size: 12px;
    gap: 6px;
    line-height: 1.3;
    margin: 4px 0 0;
    position: relative;
}

.saved-banner__note svg {
    flex: none;
}

/* The list scrolls in a ScrollBlur (mask variant): progressive fade + blur
   at the top / bottom edges, each shown only while content is past it */
.saved-messages-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.saved-messages-scroll__content {
    min-height: min-content;
}

.saved-messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    /* Room under the last card so it can scroll clear of the bottom edge */
    padding: 0 0 14px;
    position: relative;
}

.saved-message-item {
    /* New rows (and a chat's list on open) settle in softly */
    animation: saved-item-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
    flex-shrink: 0;
    position: relative;
}

@keyframes saved-item-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-message-item {
        animation: none;
    }
}

.saved-message-card {
    /* Collapsed: one height for every card (76px); expanded grows downward */
    align-items: flex-start;
    box-sizing: border-box;
    min-height: 76px;
    appearance: none;
    background: var(--card-bg, #121212);
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: 20px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    position: relative;
    text-align: left;
    width: 100%;
}

.saved-message-card > * {
    pointer-events: none;
    position: relative;
    z-index: 2;
}

/* The whole card is the "show in chat" button, under the content */
.saved-message-card > .saved-message-card__open {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
    inset: 0;
    padding: 0;
    pointer-events: auto;
    position: absolute;
    z-index: 1;
}

.saved-message-card__open[aria-disabled] {
    cursor: default;
}

.saved-message-card__open:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary, #fff) 35%, transparent);
    outline-offset: 2px;
}

/* ── Edit mode ─────────────────────────────────────────────────────────── */
.saved-message-card.is-editing .saved-message-chevron {
    opacity: 0;
}

.saved-message-card.is-selected {
    border-color: color-mix(in srgb, var(--accent-primary, #c7ff00) 55%, var(--border-subtle, #1c1c1c));
}

.saved-message-check-slot {
    align-items: center;
    align-self: center;
    display: flex;
    flex: none;
    overflow: hidden;
}

.saved-message-check {
    align-items: center;
    border: 1.5px solid color-mix(in srgb, var(--text-primary, #fff) 30%, transparent);
    border-radius: 6px;
    display: flex;
    flex: none;
    height: 18px;
    justify-content: center;
    transition: background-color 0.16s ease, border-color 0.16s ease;
    width: 18px;
}

.saved-message-check.is-checked {
    background: var(--accent-primary, #c7ff00);
    border-color: var(--accent-primary, #c7ff00);
    color: var(--text-on-accent, #070707);
}

.saved-message-check__tick {
    display: flex;
}

/* Room under the last card for the floating bar */
.saved-messages-list.has-bar {
    padding-bottom: 64px;
}

/* Bottom control — idle: a compact centred [✎ Edit] pill. Editing: the row
   spreads (center → space-between), so the same pill slides to the left as
   [Done] over a fading-in ground, and count + Delete come in from the right. */
.saved-edit-dock {
    align-items: center;
    bottom: 12px;
    box-sizing: border-box;
    display: flex;
    gap: 6px;
    /* One height in every state: 4 + 32 (buttons) + 4 */
    height: 40px;
    justify-content: center;
    left: 12px;
    padding: 4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    z-index: 5;
}

/* Main row: [✎ Edit] centred → [Done · N · Delete selected] spread */
.saved-edit-main {
    align-items: center;
    display: flex;
    gap: 6px;
    height: 32px;
    justify-content: center;
    width: 100%;
}

.saved-edit-dock.is-editing .saved-edit-main {
    justify-content: space-between;
}

/* Confirm: two equal capsules */
.saved-edit-confirm {
    align-items: center;
    display: flex;
    gap: 8px;
    width: 100%;
}

.saved-edit-confirm {
    height: 32px;
}

.saved-edit-confirm .saved-edit-confirm__btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}

.saved-edit-dock > * {
    pointer-events: auto;
}

.saved-edit-dock__ground {
    background: color-mix(in srgb, var(--card-bg, #121212) 96%, transparent);
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: 9999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform-origin: left center;
    z-index: 0;
}

.saved-edit-dock > :not(.saved-edit-dock__ground) {
    position: relative;
    z-index: 1;
}

/* The Edit ⇄ Done ⇄ Cancel pill: compact at rest, a touch smaller in the bar */
.saved-edit-pill {
    align-items: center;
    appearance: none;
    background: color-mix(in srgb, var(--text-primary, #fff) 12%, var(--card-bg, #121212));
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    color: var(--text-primary, #f4f4f5);
    cursor: pointer;
    display: inline-flex;
    /* A length basis (not auto), so the confirm step's grow to a half is a
       real, smooth transition */
    flex: 0 0 84px;
    box-sizing: border-box;
    font-family: var(--f-ui);
    font-size: 12px;
    font-weight: 500;
    /* Fixed 32px like every button in the dock (border-box: the 1px border
       can't add height) */
    height: 32px;
    justify-content: center;
    line-height: 1;
    /* One size in every state (fits "✎ Edit" and "Done"): the pill only
       moves, so nothing has to be scaled and the label stays still */
    min-width: 84px;
    overflow: hidden;
    padding: 0 14px;
    position: relative;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    white-space: nowrap;
}

.saved-edit-dock.is-editing .saved-edit-pill {
    border-color: transparent;
    box-shadow: none;
}

.saved-edit-pill:hover {
    background: color-mix(in srgb, var(--text-primary, #fff) 18%, var(--card-bg, #121212));
}

.saved-edit-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary, #fff) 40%, transparent);
    outline-offset: 2px;
}

.saved-edit-bar__count {
    /* Just the number, as a small round badge centred between the buttons */
    align-items: center;
    background: color-mix(in srgb, var(--text-primary, #fff) 9%, transparent);
    border-radius: 9999px;
    color: var(--text-primary, #f4f4f5);
    display: inline-flex;
    flex: none;
    font-family: var(--f-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 0 8px;
}


.saved-edit-bar__btn {
    /* The anchor for a label leaving by popLayout; clipped so a wider old
       label can't spill past the pill while it reshapes */
    overflow: hidden;
    position: relative;
    align-items: center;
    appearance: none;
    background: color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);
    border: 0;
    border-radius: 9999px;
    color: var(--text-primary, #f4f4f5);
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--f-ui);
    font-size: 12px;
    font-weight: 500;
    /* Fixed 32px in both states (Delete selected, Cancel, Confirm Delete) */
    height: 32px;
    justify-content: center;
    line-height: 1;
    min-width: 0;
    padding: 0 14px;
    transition: background-color 0.16s ease;
    white-space: nowrap;
}



.saved-edit-bar__btn:hover {
    background: color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
}

.saved-edit-bar__btn--danger {
    /* Length basis (fits "🗑 Delete selected") → animatable to a half */
    flex: 0 0 134px;
    background: var(--color-danger, #f62834);
    color: #ffffff;
    font-weight: 600;
}

.saved-edit-bar__btn--danger:hover:not(:disabled) {
    background: var(--danger-hover, var(--color-danger, #f62834));
}

.saved-edit-bar__btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.saved-edit-bar__btn,
.saved-edit-bar__count,
.saved-message-check-slot {
    will-change: transform, opacity;
}

.saved-edit-bar__btn-label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    line-height: 1;
    min-width: max-content;
    user-select: none;
    white-space: nowrap;
}

.saved-edit-bar__btn-label svg {
    display: block;
    flex: none;
    height: 14px;
    width: 14px;
}

.saved-edit-bar__btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary, #fff) 40%, transparent);
    outline-offset: 2px;
}

/* Right column: expand (on hover / focus) + chevron */
.saved-message-actions {
    align-items: center;
    align-self: flex-start;
    display: flex;
    flex: none;
    gap: 2px;
    margin-top: 1px;
}

.saved-message-expand {
    align-items: center;
    appearance: none;
    background: color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);
    border: 0;
    border-radius: 999px;
    color: var(--text-primary, #f4f4f5);
    cursor: pointer;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: auto;
    transition:
        opacity 0.18s ease,
        background-color 0.16s ease;
    width: 22px;
}

.saved-message-expand:hover {
    background: color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
}

/* Shown on hover, or while the keyboard is on the card — never held by a
   click's leftover focus or by the card being expanded */
.saved-message-item:hover .saved-message-expand,
.saved-message-item:has(:focus-visible) .saved-message-expand {
    opacity: 1;
}

/* Touch screens have no hover: always show it */
@media (hover: none) {
    .saved-message-expand {
        opacity: 1;
    }
}

.saved-message-expand:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary, #fff) 40%, transparent);
    outline-offset: 1px;
}

/* Preview: height sprung by JS between 2 lines and the full text (≤ 220px) */
.saved-message-expanded-content {
    overflow: hidden;
}

.saved-message-expanded-content.is-open {
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-color: color-mix(in srgb, var(--text-primary, #fff) 22%, transparent) transparent;
    scrollbar-width: thin;
}

.saved-message-expanded-content.is-open::-webkit-scrollbar {
    width: 4px;
}

.saved-message-expanded-content.is-open::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-primary, #fff) 22%, transparent);
    border-radius: 4px;
}

/* Date tile: big day, small accent month — pinned top-left, a fixed size,
   so it stays put while the card expands */
.saved-message-date {
    align-items: center;
    align-self: flex-start;
    height: 58px;
    background: var(--hover-bg, color-mix(in srgb, var(--text-primary, #fff) 6%, transparent));
    border-radius: 14px;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    width: 50px;
}

.saved-message-date__day {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.saved-message-date__month {
    color: var(--accent-primary, #c7ff00);
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.saved-message-body {
    align-self: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 2px;
}

/* Author + (for shared saves) a small "Shared" tag */
.saved-message-author-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.saved-message-shared {
    align-items: center;
    background: color-mix(in srgb, var(--accent-primary, #c7ff00) 14%, transparent);
    border-radius: 6px;
    color: var(--text-primary, #f4f4f5);
    display: inline-flex;
    flex: none;
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    gap: 3px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 1px 6px;
    white-space: nowrap;
}

.saved-message-shared svg {
    flex: none;
}

.saved-message-author {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-message-preview {
    color: var(--peer-ink-45, var(--text-secondary, #8e8e93));
    font-family: var(--f-ui);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.saved-message-preview.is-clamped,
.saved-message-preview.is-clamped-1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Deleted original: one preview line + the "deleted by" note fit the 76px */
.saved-message-preview.is-clamped-1 {
    -webkit-line-clamp: 1;
}

/* Original deleted in chat: muted text, a soft red stripe, a red note */
.saved-message-card.is-deleted {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-danger, #f62834) 50%, transparent);
}

.saved-message-card.is-deleted .saved-message-preview {
    opacity: 0.7;
}

.saved-message-deleted {
    /* A compact one-line status pill */
    align-items: center;
    align-self: flex-start;
    background: color-mix(in srgb, var(--color-danger, #f62834) 10%, transparent);
    border-radius: 6px;
    color: var(--text-danger, #f62834);
    display: inline-flex;
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 500;
    gap: 5px;
    /* Sized to keep a collapsed deleted card at the same 76px as the rest */
    line-height: 1.2;
    margin-top: 2px;
    max-width: 100%;
    min-width: 0;
    padding: 1px 7px;
    user-select: none;
    white-space: nowrap;
    width: fit-content;
}

.saved-message-deleted svg {
    flex: none;
}

/* A very long name can't wrap it: it ellipsizes instead */
.saved-message-deleted__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-message-chevron {
    color: var(--peer-ink-45, var(--text-secondary, #8e8e93));
    flex: none;
}

.saved-messages-empty {
    min-height: 0;
}

/* ── Empty state (src/components/ui/empty.tsx) + its illustration ─────────── */
.empty-state__title {
    color: var(--text-primary, #f4f4f5);
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.empty-state__description {
    color: var(--peer-ink-45, var(--text-secondary, #9a9a9a));
    font-family: var(--f-ui);
    font-size: 12px;
    line-height: 1.45;
    margin: 4px 0 0;
    text-wrap: balance;
}

.stacked-cards {
    --sc-muted: color-mix(in srgb, var(--text-primary, #fff) 7%, var(--peer-surface, #0a0a0a));
    --sc-border: var(--border-subtle, #1c1c1c);
    height: 84px;
    position: relative;
    width: 184px;
}

.stacked-cards__back,
.stacked-cards__middle {
    border: 1px solid var(--sc-border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    height: 22px;
    position: absolute;
}

.stacked-cards__back {
    background: color-mix(in srgb, var(--sc-muted) 55%, transparent);
    left: 22px;
    right: 22px;
    top: 0;
}

.stacked-cards__middle {
    background: color-mix(in srgb, var(--sc-muted) 80%, transparent);
    left: 11px;
    right: 11px;
    top: 10px;
}

.stacked-cards__front {
    align-items: center;
    background: var(--card-bg, #121212);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 10px;
    height: 56px;
    left: 0;
    padding: 0 14px;
    position: absolute;
    right: 0;
    top: 20px;
}

.stacked-cards__avatar {
    background: var(--sc-muted);
    border-radius: 50%;
    flex-shrink: 0;
    height: 28px;
    width: 28px;
}

.stacked-cards__lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.stacked-cards__line {
    background: var(--sc-muted);
    border-radius: 4px;
    height: 8px;
    width: 75%;
}

.stacked-cards__line--short {
    height: 6px;
    opacity: 0.7;
    width: 50%;
}

/* Front card dissolves into the Saved Messages card surface */
.stacked-cards__fade {
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--peer-surface, #0a0a0a) 60%, transparent) 45%,
        var(--peer-surface, #0a0a0a)
    );
    bottom: 0;
    height: 30px;
    left: -1px;
    pointer-events: none;
    position: absolute;
    right: -1px;
}

/* ── Cover cutout + embedded collapse toggle (chat open, desktop) ──────────
   A card-surface (--peer-surface) plate covers the photo's top-right corner; its bottom-left is
   the concave curve (toggle radius + gap), and two joints round the photo's
   convex corners where it meets the plate (radial "inverted corner").
   Geometry is relative to the card: photo inset = border 1 + padding 13.
   Tokens sit on the dock so the toggle (a dock child) shares them. */
.peer-panel-dock {
    --notch-inset: 13px;
    --notch-btn-w: var(--notch-btn-h); /* circle */
    --notch-btn-h: 40px;
    --notch-gap: 5px;
    /* Nudges the button in from the card edge (the cutout grows to match) */
    --notch-offset: 4px;
    --notch-joint: 18px;
    --notch-w: calc(var(--notch-btn-w) + var(--notch-gap) + var(--notch-offset));
    --notch-h: calc(var(--notch-btn-h) + var(--notch-gap) + var(--notch-offset));
}

.profile-cover-notch {
    background: var(--peer-surface);
    border-bottom-left-radius: calc(var(--notch-btn-h) / 2 + var(--notch-gap));
    /* Follow the card's own rounded corner (inner radius) */
    border-top-right-radius: calc(var(--peer-card-radius) - 1px);
    height: calc(var(--notch-h) + var(--notch-inset));
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(var(--notch-w) + var(--notch-inset));
    z-index: 1;
}

.profile-cover-notch__joint {
    background: radial-gradient(
        circle at 0 100%,
        transparent var(--notch-joint),
        var(--peer-surface) calc(var(--notch-joint) + 0.5px)
    );
    height: var(--notch-joint);
    position: absolute;
    width: var(--notch-joint);
}

/* Photo's top edge meets the plate */
.profile-cover-notch__joint--top {
    right: 100%;
    top: var(--notch-inset);
}

/* Photo's right edge meets the plate */
.profile-cover-notch__joint--side {
    right: var(--notch-inset);
    top: 100%;
}

/* Hide-panel button in the cutout: a child of the card (position: relative),
   so it rides the shelf's slide with the photo — no position transitions. */
.profile-cover-toggle {
    align-items: center;
    appearance: none;
    background-color: var(--card-bg, #121212);
    border: 1px solid var(--border-subtle, #1c1c1c);
    border-radius: 50%;
    color: color-mix(in srgb, var(--text-primary, #f4f4f5) 55%, var(--card-bg, #121212));
    cursor: pointer;
    display: inline-flex;
    height: var(--notch-btn-h);
    justify-content: center;
    padding: 0;
    position: absolute;
    right: calc(var(--notch-inset) + var(--notch-offset));
    top: calc(var(--notch-inset) + var(--notch-offset));
    transition:
        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    width: var(--notch-btn-w);
    z-index: 2;
}

.profile-cover-toggle:is(:hover, :focus-visible) {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary, #f4f4f5);
    outline: none;
}

.profile-cover-toggle svg {
    display: block;
    height: 18px;
    width: 18px;
}

/* While the card's button is on screen the dock tab stays out of the way;
   it returns (shared rules) once the panel is collapsed, to reopen it. */
#page-chat:not(.is-viewport-app-stack):not(.is-viewport-peer-narrow) .peer-panel-dock:has(.peer-panel:not(.is-collapsed):not(.is-empty)) .aside-toggle--end {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
}

/* Mobile sheet has its own Back button: no cutout there */
#page-chat.is-viewport-app-stack :is(.profile-cover-toggle, .profile-cover-notch) {
    display: none;
}

/* Collapsed: the reopen tab fades in as soon as the panel's slide ends */
#page-chat .peer-panel-dock:has(.peer-panel.is-collapsed) .aside-toggle--end {
    transition:
        transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        opacity 0.18s ease var(--peer-motion-duration),
        color 0.15s ease,
        left var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        right var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        z-index 0s linear var(--peer-motion-duration);
}

/* No outer plate → no edge notch to erase */
#page-chat .peer-panel-dock:has(.peer-panel:not(.is-collapsed):not(.is-empty))::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .peer-panel,
    #page-chat .peer-panel.is-collapsed,
    #page-chat .peer-panel-shelf,
    #page-chat .peer-panel.is-collapsed .peer-panel-shelf,
    #page-chat .peer-panel-dock,
    #page-chat .aside-toggle--end,
    #page-chat .aside-toggle--end .ui-icon,
    .peer-panel-scrim {
        transition: none;
    }
}