/* App shell layout — aligned columns, gutters, responsive polish */

/* ─── Floating shell — surfaces over a void, not a split pane ───
   Selectors are scoped under #page-chat to win over the authoritative
   inline <style> base rules (which load after the linked stylesheets). */
#page-chat {
    /* Hairline chrome — opaque, tinted from the active surface (almost invisible) */
    --dock-accent: #afb9cd;
    /* Selection pill (sidebar chat + reply accent) — follows --dock-accent per wallpaper */
    --selection-pill-fill: color-mix(in srgb, var(--dock-accent, #afb9cd) 55%, transparent);
    --selection-pill-stroke: color-mix(in srgb, var(--dock-accent, #afb9cd) 45%, transparent);
    /* Solid stage fill — flat so message ScrollBlur edges can match */
    --chat-stage-fill: #10131a;
    --chat-wallpaper: var(--chat-stage-fill);
    --capsule-stroke: color-mix(in srgb, #fff 7%, var(--chat-stage-fill));
    --capsule-stroke-strong: color-mix(in srgb, #fff 12%, var(--chat-stage-fill));
    --composer-glass-stroke: var(--capsule-stroke);
    --panel-glass-stroke: var(--capsule-stroke);
    --peer-panel-glass-stroke: var(--capsule-stroke);
    --control-glass-stroke: var(--capsule-stroke);
    --glass-inset-highlight: none;
    --glass-intensity: 0;
    --dim-intensity: 0;
    --composer-glass: color-mix(in srgb, var(--bg) calc(12% + var(--glass-intensity) * 0.48%), transparent);
    --panel-glass: color-mix(in srgb, var(--bg) calc(4% + var(--glass-intensity) * 0.28%), transparent);
    /* Solid aside fill — opaque so edge fades match; tinted per wallpaper below */
    --nexa-aside-fill: #161920;
    --nexa-aside-glass: var(--nexa-aside-fill);
    --nexa-aside-stroke: color-mix(in srgb, #fff 7%, var(--nexa-aside-fill));
    --nexa-aside-blur: 0px;
    --nexa-aside-saturate: 100%;
    --nexa-aside-radius: 50px;
    --nexa-aside-shadow: none;
    --nexa-aside-toggle-blur: 0px;
    --nexa-aside-toggle-h: 88px;
    --nexa-aside-toggle-w: 16px;
    --nexa-aside-toggle-radius: 10px;
    --nexa-aside-toggle-icon: 13px;
    --nexa-aside-toggle-nudge: 2px;
    --nexa-aside-toggle-duration: 0.3s;
    --nexa-aside-toggle-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nexa-aside-motion-duration: 0.5s;
    --nexa-aside-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nexa-aside-motion-duration-out: 0.52s;
    --nexa-aside-motion-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --nexa-aside-start-w: 288px;
    --peer-panel-glass: var(--nexa-aside-fill);
    --control-glass: color-mix(in srgb, #1a1a1a calc(22% + var(--glass-intensity) * 0.56%), transparent);
    --wallpaper-dim: calc(var(--dim-intensity) * 1%);
    --wallpaper-vignette-core: calc(40% + var(--dim-intensity) * 0.5%);
    --wallpaper-vignette-mid: calc(15% + var(--dim-intensity) * 0.4%);
    background: var(--nexa-void, var(--theme-section, #000));
    gap: 0;
    padding: 0;
    position: relative;
}

#page-chat::before {
    background-color: var(--chat-stage-fill, var(--nexa-void, var(--theme-section, #000)));
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--theme-section, #000) var(--wallpaper-dim), transparent),
            color-mix(in srgb, var(--theme-section, #000) var(--wallpaper-dim), transparent)
        );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* Wallpaper packs — solid stage fills + dock accent + aside fill */
#page-chat[data-wallpaper="mist"],
html[data-wallpaper="mist"] {
    --dock-accent: #afb9cd;
    --nexa-aside-fill: #161920;
    --chat-stage-fill: #10131a;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="ember"],
html[data-wallpaper="ember"] {
    --dock-accent: #e6a56e;
    --nexa-aside-fill: #1a1412;
    --chat-stage-fill: #120e0c;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="aurora"],
html[data-wallpaper="aurora"] {
    --dock-accent: #aa9beb;
    --nexa-aside-fill: #10161c;
    --chat-stage-fill: #0b1118;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="tide"],
html[data-wallpaper="tide"] {
    --dock-accent: #64c3f0;
    --nexa-aside-fill: #0a141c;
    --chat-stage-fill: #071018;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="sage"],
html[data-wallpaper="sage"] {
    --dock-accent: #8cb996;
    --nexa-aside-fill: #101612;
    --chat-stage-fill: #0c1210;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="cobalt"],
html[data-wallpaper="cobalt"] {
    --dock-accent: #789be6;
    --nexa-aside-fill: #0c101a;
    --chat-stage-fill: #080c16;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="rose"],
html[data-wallpaper="rose"] {
    --dock-accent: #eba0b4;
    --nexa-aside-fill: #181014;
    --chat-stage-fill: #120c10;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="dusk"],
html[data-wallpaper="dusk"] {
    --dock-accent: #b9a0e6;
    --nexa-aside-fill: #14101c;
    --chat-stage-fill: #0e0c16;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="graphite"],
html[data-wallpaper="graphite"] {
    --dock-accent: #b9bec8;
    --nexa-aside-fill: #16171a;
    --chat-stage-fill: #101114;
    --chat-wallpaper: var(--chat-stage-fill);
}

#page-chat[data-wallpaper="void"],
html[data-wallpaper="void"] {
    --dock-accent: #9196a5;
    --nexa-aside-fill: #0c0c0e;
    --chat-stage-fill: #000000;
    --chat-wallpaper: var(--chat-stage-fill);
}

/* Wallpaper dim — driven by --dim-intensity (0–100) */
#page-chat[data-wallpaper-dim],
html[data-wallpaper-dim] {
    --wallpaper-dim: calc(var(--dim-intensity) * 1%);
    --wallpaper-vignette-core: calc(40% + var(--dim-intensity) * 0.5%);
    --wallpaper-vignette-mid: calc(15% + var(--dim-intensity) * 0.4%);
}

/* Glass intensity — composer/controls only; asides stay solid */
#page-chat[data-glass="low"],
#page-chat[data-glass="medium"],
#page-chat[data-glass="high"] {
    --composer-glass: color-mix(in srgb, var(--bg) calc(12% + var(--glass-intensity) * 0.48%), transparent);
    --panel-glass: color-mix(in srgb, var(--bg) calc(4% + var(--glass-intensity) * 0.28%), transparent);
    --control-glass: color-mix(in srgb, #1a1a1a calc(22% + var(--glass-intensity) * 0.56%), transparent);
}

#page-chat > * {
    position: relative;
    z-index: 1;
}

/* React mount host — must be the flex row that #page-chat used to own directly */
#page-chat #chat-root {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

#page-chat:has(#uiChatWorkspace[hidden]) #chat-root {
    flex: 0 0 auto;
}

/* Settings view, sidebar collapsed: #chat-root shrinks to the 0-wide capsule,
   so let the reopen tab spill out and sit above the profile workspace (a later
   sibling at the same z-index) instead of being clipped / covered by it. */
#page-chat:not(.is-viewport-app-stack).is-sidebar-collapsed:has(#uiChatWorkspace[hidden]) #chat-root {
    overflow: visible;
    z-index: 2;
}

#page-chat.is-viewport-app-stack #chat-root {
    display: contents;
}

#page-chat:not(.is-viewport-app-stack) {
    padding: 0;
}

#page-chat .nav-rail {
    align-items: center;
    align-self: stretch;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    justify-content: flex-start;
    padding: 16px 0;
    position: relative;
    width: 68px;
}

#page-chat .rail-collapsed-tools {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    left: 0;
    position: absolute;
    right: 0;
    top: 16px;
    z-index: 2;
}

#page-chat .rail-collapsed-tools[hidden] {
    display: none;
}

#page-chat .rail-mark {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 40px;
}

#page-chat .rail-mark img {
    display: block;
    height: 36px;
    mix-blend-mode: lighten;
    object-fit: contain;
    width: 36px;
}

#page-chat .rail-mark:hover,
#page-chat .rail-sidebar-toggle:hover,
#page-chat .rail-sidebar-toggle:focus-visible {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 6%, transparent);
}

#page-chat .rail-sidebar-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--theme-text-muted, #8a8a8a);
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
}

#page-chat .rail-sidebar-toggle .ui-icon {
    height: 16px;
    width: 16px;
}

#page-chat .rail-sidebar-toggle:hover,
#page-chat .rail-sidebar-toggle:focus-visible {
    color: var(--theme-text, #f4f4f5);
}

#page-chat .nav-rail .rail-top {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    width: 100%;
}

#page-chat .nav-rail .rail-icon-btn {
    align-items: center;
    align-self: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--theme-text-muted, #888888);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    width: 40px;
}

#page-chat .nav-rail .rail-icon-btn:hover {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 6%, transparent);
    border-color: transparent;
    color: var(--theme-text, #ffffff);
}

#page-chat .nav-rail .rail-icon-btn.is-active,
#page-chat .nav-rail .rail-icon-btn[aria-current="page"] {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 8%, transparent);
    color: var(--theme-text, #ffffff);
}

#page-chat .nav-rail .rail-icon-btn .ui-icon {
    height: 20px;
    width: 20px;
}

#page-chat .nav-rail .rail-icon-label {
    display: none;
}

#page-chat .nav-rail .rail-bottom {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-bottom: 10px;
    width: 100%;
}

#page-chat .nav-rail .rail-profile-btn {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--theme-text-muted, #888888);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    margin: 0;
    padding: 8px 4px;
    width: 100%;
}

#page-chat .nav-rail .rail-profile-btn:hover {
    color: var(--theme-text, #ffffff);
}

#page-chat .nav-rail .rail-profile-btn__av {
    align-items: center;
    background: color-mix(in srgb, var(--theme-text, #ffffff) 8%, transparent);
    border-radius: 999px;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

#page-chat .nav-rail .rail-profile-btn__av .ui-icon {
    height: 18px;
    width: 18px;
}

#page-chat .nav-rail .rail-profile-btn__label {
    color: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: lowercase;
}

#page-chat .nav-rail .rail-profile-btn__meta {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

#page-chat .nav-rail .rail-presence,
#page-chat .nav-rail #status {
    background: var(--color-danger);
    border: none;
    border-radius: 50%;
    box-shadow: none;
    display: block;
    flex-shrink: 0;
    font-size: 0;
    height: 6px;
    line-height: 0;
    padding: 0;
    width: 6px;
}

#page-chat .nav-rail #status.status-online {
    background: var(--green);
}

#page-chat .nav-rail #status.status-offline {
    background: var(--color-danger);
}

#page-chat .sidebar-dock-bar {
    --dock-surface: color-mix(in srgb, #0a0a0a 78%, #1a1a1a);
    --dock-stroke: var(--nexa-aside-stroke);
    /* Pill bar; buttons 20px (≈ bar radius − its 5px padding), so the green
       active pill and the hover highlight follow the bar's contour */
    --expandable-tabs-radius: 9999px;
    --expandable-tabs-btn-radius: 20px;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 10px 12px 12px;
    width: 100%;
}

#page-chat .sidebar-dock {
    align-items: center;
    align-self: center;
    background: color-mix(in srgb, var(--nexa-aside-fill, var(--dock-surface)) 88%, var(--theme-section, #111));
    border: 1px solid var(--nexa-aside-stroke, var(--dock-stroke));
    border-radius: var(--expandable-tabs-radius) !important;
    box-shadow: var(--nexa-aside-shadow, inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #fff) 4%, transparent));
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-start;
    max-width: 100%;
    padding: 5px;
    position: relative;
    width: max-content;
}

#page-chat .sidebar-dock::before {
    content: none;
}

/* Desktop left sidebar: the bar spans the sidebar and the caption takes the
   rest of the row, text centred — exactly midway between the divider and the
   bar's edge. (At max-content the 40px buttons + caption slot overflowed the
   264px row and overflow: hidden clipped the caption's right side.) */
#page-chat:not(.is-viewport-app-stack) .left-capsule .sidebar-dock {
    gap: 3px;
    width: 100%;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule .expandable-tabs__caption {
    flex: 1 1 0;
    min-width: 0;
    /* No padding: centring is by the free space on each side */
    padding: 0;
}

/* Divider → caption box = 3 (margin) + 3 (gap) = 6px, matching caption box →
   bar edge = 5px padding + 1px border, so the box is centred on the gap. */
#page-chat:not(.is-viewport-app-stack) .left-capsule .expandable-tabs__sep {
    margin-right: 3px;
}

#page-chat .expandable-tabs__btn {
    align-items: center;
    background: transparent;
    border: 0;
    /* 1:1 circle: hover, focus and the active pill keep the round contour */
    border-radius: 50% !important;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    font-family: var(--f-ui, inherit);
    font-size: 13px;
    font-weight: 500;
    gap: 0;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
    width: 40px;
    z-index: 1;
}

#page-chat .expandable-tabs__highlight {
    background: color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-text, #fff) 8%, transparent)) 55%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-tint, #fff) 8%, transparent)) 45%,
        transparent
    );
    border-radius: var(--expandable-tabs-btn-radius, 13px);
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* Active pill: under the icon, GPU-composited while it slides */
#page-chat .expandable-tabs__active {
    /* Filled by the theme (themes.css: --active-pill-bg); unthemed keeps the
       old look, an accent-coloured icon with no pill */
    background: transparent;
    border-radius: 50%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: translateZ(0);
    will-change: transform, opacity;
    z-index: -1;
}

#page-chat .expandable-tabs__btn:hover,
#page-chat .expandable-tabs__btn:focus-visible {
    background: transparent;
    color: var(--theme-text, #f4f4f5);
    outline: none;
}

#page-chat .expandable-tabs__btn.is-active,
#page-chat .expandable-tabs__btn[aria-current="page"] {
    color: var(--dock-accent, #afb9cd);
}

#page-chat .expandable-tabs__btn.is-selected {
    background: transparent;
    color: var(--theme-text, #f4f4f5);
}

#page-chat .expandable-tabs__btn svg {
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

#page-chat .expandable-tabs__caption {
    --caption-pad: 14px;
    align-items: center;
    box-sizing: content-box;
    display: grid;
    flex: 0 0 auto;
    /* Centre the (sizer-wide) column in the box, and the text in the column */
    justify-content: center;
    justify-items: center;
    min-height: 40px;
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--caption-pad);
    pointer-events: none;
    position: relative;
}

#page-chat .expandable-tabs__caption-sizer {
    font-family: var(--f-ui, inherit);
    font-size: 13px;
    font-weight: 500;
    grid-area: 1 / 1;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
}

#page-chat .expandable-tabs__caption-text {
    color: var(--theme-text, #f4f4f5);
    display: block;
    flex: 0 0 auto;
    font-family: var(--f-ui, inherit);
    font-size: 13px;
    font-weight: 500;
    grid-area: 1 / 1;
    position: relative;
    white-space: nowrap;
    width: max-content;
}

#page-chat .expandable-tabs__sep {
    align-self: center;
    background: color-mix(in srgb, var(--theme-text, #fff) 10%, transparent);
    flex-shrink: 0;
    height: 26px;
    margin: 0 1px 0 6px;
    width: 1.2px;
}

#page-chat .sidebar-dock__item .ui-icon {
    height: 20px;
    stroke-width: 1.75;
    width: 20px;
}

#page-chat .sidebar-dock__label {
    display: none;
}

#page-chat .sidebar-dock__status {
    display: none;
}

#page-chat .expandable-tabs .sidebar-dock-compose {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
}

#page-chat.is-app-view-identity .profile-nav-toggle {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .expandable-tabs__btn,
    #page-chat .expandable-tabs__caption,
    #page-chat .sidebar-dock-compose {
        transition: none;
    }
}

#page-chat .rail-presence,
#page-chat #status {
    background: var(--color-danger);
    border: 2px solid color-mix(in srgb, var(--bg, var(--theme-border, #0a0a0a)) 70%, transparent);
    border-radius: 999px;
    display: block;
    height: 10px;
    width: 10px;
}

#page-chat #status.status-online {
    background: var(--green, #22c55e);
}

#page-chat #status.status-offline {
    background: var(--color-danger);
}

#page-chat .sidebar {
    align-self: stretch;
    background: var(--panel-glass);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid var(--panel-glass-stroke);
    border-right: none;
    box-shadow: var(--glass-inset-highlight);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    padding-top: 16px;
    transition:
        width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        min-width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.32s ease,
        box-shadow 0.32s ease,
        padding 0.32s ease;
    width: var(--nexa-aside-start-w, 288px);
}

#page-chat .sidebar.is-collapsed {
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding-top: 0;
    width: 0;
}

#page-chat .sidebar > * {
    min-width: var(--nexa-aside-start-w, 288px);
}

#page-chat .sidebar.no-motion {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .sidebar {
        transition: none;
    }
}

#page-chat .chat-workspace {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: 100%;
    min-width: 0;
    overflow: visible;
    position: relative;
}

#page-chat .chat-workspace[hidden] {
    display: none !important;
}

/* Small screens: nested full-screen contacts list ↔ conversation */
#page-chat .chat-back-btn {
    display: none;
    flex-shrink: 0;
}

#page-chat.is-viewport-app-stack .chat-back-btn:not([hidden]) {
    display: inline-flex;
}

#page-chat.is-viewport-app-stack .chat-workspace {
    overflow: hidden;
    position: relative;
}

#page-chat.is-viewport-app-stack {
    --mobile-rail-h: 64px;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

#page-chat.is-viewport-app-stack .left-capsule {
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: contents;
    margin: 0;
    overflow: visible;
}

#page-chat.is-viewport-app-stack .left-capsule-shelf {
    display: contents;
}

#page-chat.is-viewport-app-stack .sidebar-dock-bar {
    --dock-surface: rgba(14, 14, 14, 0.94);
    --dock-stroke: var(--nexa-aside-stroke, color-mix(in srgb, #fff 7%, #0e0e0e));
    align-items: center;
    align-self: stretch;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.92), color-mix(in srgb, var(--theme-section, #0a0a0a) 88%, transparent));
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid var(--dock-stroke);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    height: calc(var(--mobile-rail-h) + 12px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
    order: 3;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    z-index: 40;
}

#page-chat.is-viewport-app-stack .rail-collapsed-tools {
    display: none !important;
}

#page-chat.is-viewport-app-stack .sidebar-dock {
    box-shadow: none;
    height: auto;
}

#page-chat.is-viewport-app-stack .expandable-tabs__btn {
    min-height: 40px;
}

#page-chat.is-viewport-app-stack .sidebar-dock__label {
    display: none;
}

#page-chat.is-viewport-app-stack .chat-workspace,
#page-chat.is-viewport-app-stack .profile-workspace {
    background: var(--theme-section, #000);
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-height: 0;
    order: 1;
    width: 100%;
}

/* Bottom dock on contacts list and Profile — hidden only inside a chat */
#page-chat.is-viewport-app-stack.is-chat-level-chat .sidebar-dock-bar {
    display: none;
}

#page-chat.is-viewport-app-stack.is-chat-level-chat .sidebar,
#page-chat.is-viewport-app-stack.is-chat-level-chat .sidebar.is-collapsed {
    bottom: 0;
}

#page-chat.is-viewport-app-stack .sidebar,
#page-chat.is-viewport-app-stack .sidebar.is-collapsed {
    background: var(--theme-section, #000);
    border-right: none;
    box-shadow: none;
    bottom: calc(var(--mobile-rail-h) + 12px + env(safe-area-inset-bottom, 0px));
    left: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 8px;
    pointer-events: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    will-change: transform;
    z-index: 2;
}

#page-chat.is-viewport-app-stack .sidebar > * {
    min-width: 0;
    width: 100%;
}

#page-chat.is-viewport-app-stack .aside-toggle {
    display: none !important;
}

#page-chat.is-viewport-app-stack .chat-main {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    will-change: transform;
    z-index: 3;
}

#page-chat.is-viewport-app-stack .sidebar {
    background: var(--nexa-aside-fill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#page-chat.is-viewport-app-stack.is-chat-level-list .sidebar {
    pointer-events: auto;
    transform: translateX(0);
}

#page-chat.is-viewport-app-stack.is-chat-level-list .chat-main {
    pointer-events: none;
    transform: translateX(100%);
}

#page-chat.is-viewport-app-stack.is-chat-level-chat .sidebar {
    pointer-events: none;
    transform: translateX(-30%);
}

#page-chat.is-viewport-app-stack.is-chat-level-chat .chat-main {
    pointer-events: auto;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    #page-chat.is-viewport-app-stack .sidebar,
    #page-chat.is-viewport-app-stack .sidebar.is-collapsed,
    #page-chat.is-viewport-app-stack .chat-main {
        transition: none;
    }
}

#page-chat .profile-workspace {
    background: transparent;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

#page-chat .profile-workspace:not(.hidden),
#page-chat .chat-workspace:not([hidden]) {
    animation: nexa-app-view-enter 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes nexa-app-view-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .profile-workspace:not(.hidden),
    #page-chat .chat-workspace:not([hidden]) {
        animation: none;
    }
}

#page-chat .profile-workspace.hidden {
    display: none;
}

/* Shared aside plate — left shelf + right shelf. Solid fill (no glass) so
   scroll-edge fades can match the panel color against the wallpaper. */
#page-chat:not(.is-viewport-app-stack) .left-capsule-shelf,
#page-chat:not(.is-viewport-app-stack) .peer-panel-shelf {
    background: var(--nexa-aside-fill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke);
    border-radius: var(--nexa-aside-radius);
    box-shadow: var(--nexa-aside-shadow);
    isolation: isolate;
    z-index: 2;
}

#page-chat .aside-toggle {
    --aside-toggle-icon-rot: var(--aside-toggle-icon-open);
    --aside-toggle-tuck: 0%;
    align-items: center;
    background: var(--nexa-aside-fill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke);
    box-shadow: var(--nexa-aside-shadow);
    color: var(--theme-text-muted, #d4d4d8);
    cursor: pointer;
    display: none;
    height: var(--nexa-aside-toggle-h);
    justify-content: center;
    opacity: 1;
    padding: 0;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    transition:
        transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        opacity 0.22s ease,
        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);
    width: var(--nexa-aside-toggle-w);
    z-index: 1;
}

#page-chat:not(.is-viewport-app-stack) .aside-toggle {
    display: inline-flex;
}

#page-chat .aside-toggle--start {
    --aside-toggle-icon-open: 180deg;
    --aside-toggle-icon-shut: 0deg;
    --aside-toggle-tuck: -100%;
    border-left: 0;
    border-radius: 0 var(--nexa-aside-toggle-radius) var(--nexa-aside-toggle-radius) 0;
    left: 100%;
}

#page-chat .aside-toggle--end {
    --aside-toggle-icon-open: 0deg;
    --aside-toggle-icon-shut: 180deg;
    --aside-toggle-tuck: 100%;
    border-radius: var(--nexa-aside-toggle-radius) 0 0 var(--nexa-aside-toggle-radius);
    border-right: 0;
    right: 100%;
}

#page-chat .aside-toggle:hover,
#page-chat .aside-toggle:focus-visible {
    color: var(--theme-text, #f4f4f5);
    outline: none;
}

#page-chat .aside-toggle .ui-icon {
    height: var(--nexa-aside-toggle-icon);
    transform: rotate(var(--aside-toggle-icon-rot));
    transition: transform 0.22s var(--nexa-aside-motion-ease, ease);
    width: var(--nexa-aside-toggle-icon);
}

#page-chat .aside-toggle:hover .ui-icon,
#page-chat .aside-toggle:focus-visible .ui-icon {
    transform: rotate(var(--aside-toggle-icon-rot)) translateX(var(--nexa-aside-toggle-nudge));
}

#page-chat.is-sidebar-collapsed .aside-toggle--start,
#page-chat .peer-panel-dock:has(.peer-panel.is-collapsed) .aside-toggle--end {
    --aside-toggle-icon-rot: var(--aside-toggle-icon-shut);
    opacity: 1;
    transform: translate(0, -50%);
    transition:
        transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        opacity 0.18s ease var(--nexa-aside-motion-duration-out),
        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(--nexa-aside-motion-duration-out);
    z-index: 30;
}

@media (hover: hover) and (pointer: fine) {
    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .aside-toggle--start,
    #page-chat:not(.is-viewport-peer-narrow) .peer-panel-dock:not(:has(.peer-panel.is-collapsed)) .aside-toggle--end {
        opacity: 0;
        pointer-events: none;
        transform: translate(var(--aside-toggle-tuck), -50%);
        transition:
            transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
            opacity 0s,
            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);
    }

    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule:hover .aside-toggle--start,
    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .aside-toggle--start:focus-visible,
    #page-chat:not(.is-viewport-peer-narrow) .peer-panel-dock:not(:has(.peer-panel.is-collapsed)):hover .aside-toggle--end,
    #page-chat:not(.is-viewport-peer-narrow) .peer-panel-dock:not(:has(.peer-panel.is-collapsed)) .aside-toggle--end:focus-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translate(0, -50%);
        transition:
            transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
            opacity 0.18s ease 0.06s,
            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);
    }
}

@media (hover: none) {
    #page-chat:not(.is-viewport-app-stack) .aside-toggle {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* Desktop: left capsule = contacts + bottom dock (mirrors peer-panel-dock) */
#page-chat:not(.is-viewport-app-stack) .left-capsule {
    /* Same clock as the right panel (peer-panel.css): open + close */
    --sidebar-motion-duration: 0.28s;
    --sidebar-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sidebar-toggle-h: var(--nexa-aside-toggle-h);
    align-self: center;
    flex-shrink: 0;
    height: calc(100% - (var(--nexa-surface-inset, 10px) * 2));
    margin: 0 var(--nexa-surface-inset, 10px) 0 var(--nexa-surface-inset, 10px);
    min-height: 0;
    min-width: 0;
    overflow: visible;
    position: relative;
    transition:
        width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        margin-left var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        margin-right var(--sidebar-motion-duration) var(--sidebar-motion-ease);
    width: var(--nexa-aside-start-w, 288px);
    z-index: 4;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule-shelf {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    min-height: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translateX(0);
    transition:
        transform var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        visibility 0s linear 0s;
    visibility: visible;
    width: var(--nexa-aside-start-w, 288px);
    /* Cover the tucked toggle so it slides out from under the shelf. */
    z-index: 2;
}

/* Notch the right stroke where the toggle docks (on the capsule so overflow
   on the shelf does not clip it). Corners stay on the native rounded border. */
#page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule::after {
    background: var(--nexa-aside-fill);
    content: "";
    height: var(--nexa-aside-toggle-h);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule:hover::after,
    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule:has(.aside-toggle--start:focus-visible)::after {
        opacity: 1;
    }
}

@media (hover: none) {
    #page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule::after {
        opacity: 1;
    }
}

#page-chat:not(.is-viewport-app-stack).is-sidebar-collapsed .left-capsule {
    --sidebar-motion-duration: 0.28s;
    --sidebar-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ride to the viewport edge with the panel — same as peer margin-right → 0 */
    margin-left: 0;
    margin-right: 0;
    /* Sit above chat-workspace so the protruding toggle stays clickable
       (peer dock wins by DOM order on the right; left capsule precedes chat). */
    width: 0;
    z-index: 32;
}

#page-chat:not(.is-viewport-app-stack).is-sidebar-collapsed .left-capsule-shelf {
    pointer-events: none;
    transform: translateX(-100%);
    transition:
        transform var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        visibility 0s linear var(--sidebar-motion-duration);
    visibility: hidden;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule.no-motion,
#page-chat:not(.is-viewport-app-stack) .left-capsule.no-motion .left-capsule-shelf,
#page-chat:not(.is-viewport-app-stack) .left-capsule.no-motion .aside-toggle {
    transition: none !important;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule .sidebar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    height: auto;
    min-height: 0;
    order: 1;
    overflow: hidden;
    padding-top: 16px;
    width: 100%;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule .sidebar-dock-bar {
    flex-shrink: 0;
    order: 2;
    width: 100%;
}

#page-chat:not(.is-viewport-app-stack) .left-capsule .profile-nav {
    background: transparent;
    border-right: none;
    box-shadow: none;
    flex: 1;
    flex-shrink: 0;
    height: auto;
    min-height: 0;
    min-width: 0;
    order: 1;
    overflow: auto;
    padding: 20px 14px 16px;
    width: 100%;
}

#page-chat:not(.is-viewport-app-stack).is-sidebar-collapsed .rail-collapsed-tools {
    display: none !important;
}

#page-chat .sidebar[hidden],
#page-chat .profile-nav[hidden] {
    display: none !important;
}

#page-chat:not(.is-viewport-app-stack) .chat-workspace {
    align-items: stretch;
    gap: var(--nexa-surface-gap, 10px);
    height: auto;
    min-height: 0;
    overflow: visible;
}

#page-chat:not(.is-viewport-app-stack) .chat-main,
#page-chat:not(.is-viewport-app-stack) .profile-workspace {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    min-height: 0;
}

#page-chat:not(.is-viewport-app-stack) .peer-panel-dock {
    align-self: center;
    height: calc(100% - (var(--nexa-surface-inset, 10px) * 2));
    margin: 0 var(--nexa-surface-inset, 10px) 0 0;
    min-height: 0;
    position: relative;
    z-index: 4;
}

#page-chat:not(.is-viewport-app-stack) .peer-panel-dock:has(.peer-panel.is-collapsed) {
    /* Drop right inset in sync with panel width (shared --peer-motion-* on dock). */
    margin-right: 0;
}

#page-chat:not(.is-viewport-app-stack) .contact-search-input {
    background: color-mix(in srgb, var(--theme-section, #1a1a1a) 28%, transparent) !important;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-color: var(--capsule-stroke) !important;
    box-shadow: var(--glass-inset-highlight);
}

/* Chat column blends into the wallpaper — not a capsule */
#page-chat .chat-main {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    margin: 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

#page-chat .chat-stage-atmosphere {
    display: none;
}

/* Header sits on the glow instead of cutting it */
#page-chat .chat-header {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 82%, transparent) 0%,
        color-mix(in srgb, var(--bg) 28%, transparent) 70%,
        transparent 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-header);
}

/* Compact floating chat navbar (peer capsule + search circle). */
#page-chat:not(.is-viewport-app-stack) {
    --layout-header-h: 54px;
}

/* Float over the stage — chrome lives on the peer + search capsules inside. */
#page-chat:not(.is-viewport-app-stack) .chat-header {
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    height: var(--layout-header-h);
    justify-content: center;
    left: 0;
    margin-inline: auto;
    max-width: var(--layout-chat-max);
    overflow: visible;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: var(--nexa-surface-inset, 20px);
    transform: none;
    width: 100%;
    z-index: var(--z-header);
}

#page-chat:not(.is-viewport-app-stack) .chat-header-stack,
#page-chat:not(.is-viewport-app-stack) .chat-header-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    margin: 0;
    max-width: none;
    pointer-events: none;
    width: 100%;
}

#page-chat:not(.is-viewport-app-stack) .chat-header-inner {
    gap: 8px;
    justify-content: center;
    padding: 0;
}

#page-chat:not(.is-viewport-app-stack) .chat-header-peer,
#page-chat:not(.is-viewport-app-stack) .chat-header-search-btn,
#page-chat:not(.is-viewport-app-stack) .chat-back-btn {
    pointer-events: auto;
}

#page-chat:not(.is-viewport-app-stack) .compose-spotlight {
    padding: 0;
}

#page-chat:not(.is-viewport-app-stack) #messages {
    padding-top: calc(var(--nexa-surface-inset, 20px) + var(--layout-header-h) + 12px);
}

.chat-main::before {
    opacity: 0.25;
}

#page-chat .chat-main::before {
    display: none;
}

/* Message stage fills the panel; composer floats above it */
.chat-main > .chat-stage {
    flex: 1;
    min-height: 0;
}

/* ─── Prompt-inspired messenger composer ─── */
#page-chat .chat-main > .input-bar {
    --composer-float-offset: 102px;
    --composer-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --composer-shell-bg: var(--nexa-aside-fill, #161920);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    bottom: 28px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* No transform here — it creates a containing block and kills
       backdrop-filter matte glass on .composer-shell (header peer stays matte). */
    left: 0;
    margin-inline: auto;
    max-width: min(36rem, calc(100% - 96px));
    padding: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: none;
    transition:
        opacity 0.2s ease,
        transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    width: calc(100% - 96px);
    z-index: 25;
}

#page-chat .chat-main > .input-bar > * {
    pointer-events: auto;
}

#page-chat .chat-main > .input-bar .composer-input-dock {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    min-width: 0;
    position: relative;
    width: 100%;
    z-index: 10;
}

#page-chat .chat-main > .input-bar .composer-input-dock .composer-scale-wrap {
    margin-inline: auto;
    position: relative;
    width: 100%;
    z-index: 10;
}

#page-chat .chat-main > .input-bar .paste-attachments {
    background: var(--nexa-aside-fill, #161920);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke, var(--capsule-stroke));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 18px -8px;
    max-height: 72px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 10px 16px;
    position: relative;
    transform: translateY(0);
    transition:
        max-height 0.4s var(--composer-spring),
        opacity 0.3s ease,
        transform 0.4s var(--composer-spring),
        padding 0.4s var(--composer-spring),
        margin 0.4s var(--composer-spring);
    z-index: 0;
}

/* Folder paste shelf — a drawer on the composer's top edge (out of flow).
   Its bottom sits --paste-tuck behind the composer (z 10), so the folder
   peeks out as before; clip-path cuts everything below that line, so the
   folder's slide (y: 100% → 0, paste-folder.tsx) reads as coming out from
   behind the composer, never out from under it. Sheets that fly up when the
   folder opens aren't clipped (the inset is unbounded on the other sides). */
#page-chat .chat-main > .input-bar .paste-attachments--folder {
    --paste-tuck: 50px;
    align-items: flex-end;
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: calc(100% - var(--paste-tuck));
    clip-path: inset(-100vh -100vw 0 -100vw);
    justify-content: flex-start;
    left: 0;
    margin: 0 auto;
    max-height: none;
    max-width: 560px;
    overflow: visible;
    padding: 44px 0 0 16px;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    z-index: 1;
}

#page-chat .chat-main > .input-bar .paste-attachments--folder.is-empty:not(:has(.paste-folder)) {
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
    visibility: hidden;
}

#page-chat .chat-main > .input-bar .paste-folder {
    margin: 0;
    pointer-events: auto;
    position: relative;
    transform-origin: bottom left;
    z-index: 1;
    will-change: transform, opacity;
}

#page-chat .chat-main > .input-bar .paste-folder.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Composer must paint above the folder so the tuck is visible */
#page-chat .chat-main > .input-bar .composer-input-dock,
#page-chat .chat-main > .input-bar .composer-scale-wrap,
#page-chat .chat-main > .input-bar .composer-shell {
    position: relative;
    z-index: 10;
}

#page-chat .chat-main > .input-bar .paste-attachments.hidden {
    display: flex !important;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transform: translateY(12px);
    visibility: hidden;
}

#page-chat .chat-jump-bottom {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: auto;
    box-shadow: none;
    color: color-mix(in srgb, var(--theme-text, #fff) 48%, transparent);
    cursor: pointer;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    left: 50%;
    margin: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: auto;
    top: calc(100% - 2px);
    transform: translateX(-50%) translateY(-4px);
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
        color 0.15s ease;
    visibility: hidden;
    width: 22px;
    z-index: 12;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#page-chat .chat-jump-bottom .ui-icon {
    height: 16px;
    width: 16px;
}

#page-chat .chat-jump-bottom.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

#page-chat .chat-jump-bottom:hover:not(:disabled) {
    background: transparent;
    border: none;
    color: var(--theme-text, #f4f4f5);
}

#page-chat .chat-jump-bottom:disabled {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .chat-jump-bottom {
        transition: none;
    }
}

#page-chat .chat-main > .input-bar .composer-reply-bar {
    margin: 0;
    max-width: none;
    width: 100%;
}

#page-chat .composer-scale-wrap .composer-reply-bar {
    background: var(--composer-shell-bg, var(--nexa-aside-fill, #161920));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke, var(--capsule-stroke));
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: none;
    filter: none;
    gap: 10px;
    margin: 0;
    padding: 10px 12px 12px;
    position: relative;
    transform: translateY(0);
    transition:
        opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    width: 100%;
    z-index: 11;
}

#page-chat .composer-scale-wrap .composer-reply-bar.hidden {
    display: none;
}

/* Reply + shell = one frame: no wrap stroke, no nested second border */
#page-chat .composer-scale-wrap:has(> .composer-reply-bar:not(.hidden)) {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#page-chat .composer-shell.has-reply {
    background: var(--composer-shell-bg, var(--nexa-aside-fill, #161920));
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none !important;
}


#page-chat .composer-shell {
    /* Solid aside fill — same as side panels; reads the wallpaper via stage, not glass */
    background: var(--composer-shell-bg, var(--nexa-aside-fill, #161920));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke, var(--capsule-stroke));
    border-radius: 24px;
    /* Soft lift under the top edge so thread messages read behind the capsule */
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.42);
    cursor: default;
    height: 48px;
    margin: 0;
    max-width: none !important;
    /* Keep hidden like .chat-header-peer — overflow:visible kills matte blur */
    overflow: hidden;
    padding: 0;
    position: relative;
    transform-origin: bottom center;
    width: 100%;
    z-index: 10;
}

#page-chat .composer-shell.is-expanded {
    cursor: text;
    overflow: hidden;
}

#page-chat .composer-shell.is-disabled {
    cursor: default;
    opacity: 0.72;
}

/* Absolute field — fully clear so only the shell glass is visible */
#page-chat .composer-shell .composer-textarea,
#page-chat .composer-shell #messageInput,
#page-chat .composer-shell #messageInput:hover,
#page-chat .composer-shell #messageInput:focus,
#page-chat .composer-shell #messageInput:focus-visible,
#page-chat .composer-shell #messageInput:disabled {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text, var(--theme-text, #f4f4f5)) !important;
    display: block;
    font-family: var(--f-ui);
    font-feature-settings: "cv11", "ss01";
    font-size: 14px;
    inset-inline: 0;
    left: 0;
    letter-spacing: -0.011em;
    line-height: 22px;
    max-height: none !important;
    min-height: 0 !important;
    outline: none !important;
    padding: 12px 48px 14px 16px !important;
    position: absolute !important;
    resize: none;
    right: 0;
    top: 0;
    /* Stop above the action band so text never sits under the buttons */
    bottom: auto;
    width: 100%;
    z-index: 1;
    align-content: start;
}

#page-chat .composer-shell.is-expanded #messageInput,
#page-chat .composer-shell.is-expanded .composer-textarea {
    /* Keep the field clear of the action row (matches ACTIONS_BAND in ChatInput) */
    max-height: calc(100% - 48px) !important;
}

#page-chat .composer-shell #messageInput.is-ghost {
    opacity: 0;
    pointer-events: none;
    transform: none;
}

#page-chat .composer-shell #messageInput.is-visible {
    opacity: 1;
    transform: none;
}

#page-chat .composer-shell #messageInput::placeholder {
    color: transparent;
    opacity: 0;
}

#page-chat .composer-shell #messageInput.is-scrolling {
    overflow-y: auto;
}

/* Single placeholder — travels between collapsed row and expanded field baseline */
#page-chat .composer-placeholder {
    align-items: center;
    background: transparent;
    border: 0;
    color: color-mix(in srgb, var(--theme-text, #fff) 48%, transparent);
    cursor: text;
    display: flex;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    justify-content: flex-start;
    left: 0;
    letter-spacing: -0.011em;
    line-height: 22px;
    outline: none;
    padding: 0 44px 0 16px;
    pointer-events: auto;
    position: absolute;
    right: 0;
    text-align: left;
    top: 0;
    transform: none;
    transform-origin: left top;
    z-index: 2;
}

/* Match #messageInput first-line padding so open/close is one continuous move */
#page-chat .composer-placeholder.is-expanded {
    align-items: flex-start;
    height: 50px;
    padding: 12px 48px 0 16px;
    pointer-events: none;
}

#page-chat .composer-placeholder.is-occupied {
    opacity: 0;
    pointer-events: none;
}

#page-chat .composer-placeholder:disabled {
    cursor: default;
    opacity: 0.45;
}

#page-chat .composer-placeholder.is-occupied:disabled {
    opacity: 0;
}

#page-chat .composer-field__fade {
    height: 28px;
    left: 12px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 44px;
    transition: opacity 0.15s ease;
    z-index: 5;
}

#page-chat .composer-close-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 10px;
    transform: scale(0.9);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
    width: 24px;
    z-index: 7;
}

#page-chat .composer-close-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

#page-chat .composer-close-btn:hover {
    color: var(--theme-text, #f4f4f5);
}

#page-chat .composer-close-btn .ui-icon {
    height: 14px;
    width: 14px;
}

#page-chat .composer-tall-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 36px;
    transform: scale(0.9);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease,
        top 0.2s ease;
    width: 24px;
    z-index: 6;
}

/* When × is hidden (draft/paste present), tall toggle takes the top-right slot */
#page-chat .composer-tall-toggle.is-top-slot {
    top: 10px;
    z-index: 7;
}

#page-chat .composer-tall-toggle.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

#page-chat .composer-tall-toggle:hover {
    background: transparent;
    color: var(--theme-text, #f4f4f5);
}

#page-chat .composer-tall-toggle .ui-icon {
    height: 15px;
    width: 15px;
}

#page-chat .composer-field__fade--top {
    background: linear-gradient(
        to bottom,
        var(--nexa-aside-fill, #161920) 0%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 90%, transparent) 40%,
        transparent 100%
    );
    top: 0;
}

#page-chat .composer-shell.has-reply .composer-field__fade--top {
    opacity: 0;
    pointer-events: none;
}

#page-chat .composer-field__fade--bottom {
    /* Solid fill at the bottom edge (replaces padding-bottom), softens upward */
    background: linear-gradient(
        to top,
        var(--nexa-aside-fill, #161920) 0%,
        var(--nexa-aside-fill, #161920) 42%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 55%, transparent) 72%,
        transparent 100%
    );
    bottom: auto;
}

/* Bottom actions row — absolute, like PromptInput */
#page-chat .composer-actions {
    align-items: center;
    bottom: 8px;
    display: flex;
    gap: 0;
    height: 28px !important;
    left: 8px;
    min-height: 0 !important;
    position: absolute;
    right: 44px;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

#page-chat .composer-actions.is-actions-visible {
    filter: blur(0);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#page-chat .composer-actions.is-actions-hidden {
    filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

#page-chat .composer-tool-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    transition:
        background 0.2s ease,
        color 0.2s ease;
    width: 28px;
}

#page-chat .composer-tool-btn .ui-icon {
    height: 14px;
    width: 14px;
}

#page-chat .composer-tool-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-text, #fff) 8%, transparent);
    color: var(--theme-text, #f4f4f5);
}

#page-chat .composer-tool-btn:disabled {
    cursor: default;
    opacity: 0.35;
}

#page-chat .composer-send-btn {
    align-items: center;
    background: color-mix(in srgb, var(--theme-text, #fff) 8%, transparent) !important;
    border: 0 !important;
    border-radius: 999px !important;
    bottom: 10px;
    box-shadow: none !important;
    color: var(--theme-text-muted, #a1a1aa) !important;
    cursor: pointer;
    display: inline-flex !important;
    height: 28px !important;
    justify-content: center;
    margin: 0;
    min-width: 28px !important;
    opacity: 1;
    padding: 0 !important;
    pointer-events: auto;
    position: absolute !important;
    right: 8px;
    transform: scale(1);
    transition:
        background 0.28s ease,
        color 0.28s ease,
        bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 28px !important;
    z-index: 10;
}

#page-chat .composer-shell.is-expanded .composer-send-btn {
    bottom: 8px;
}

/* Ready: the theme's active-pill pair, which is contrast-matched per theme —
   white arrow on Emerald's #005218, dark on Lime / Neon. (Was accent mixed
   with text + a fixed near-black arrow: black on dark green on Emerald.) */
#page-chat .composer-send-btn.is-ready {
    background: var(--theme-pill, color-mix(in srgb, var(--accent, #afb9cd) 82%, var(--theme-text, #fff))) !important;
    color: var(--theme-pill-text, #0b0c10) !important;
}

/* Empty input on light themes: a clear slate arrow on the faint dark wash. */
html[data-theme^="light"] #page-chat .composer-send-btn:disabled {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #64748b !important;
}

#page-chat .composer-send-btn:hover:not(:disabled) {
    filter: brightness(1.06);
}

#page-chat .composer-send-btn:disabled {
    cursor: default;
    opacity: 0.45 !important;
}

#page-chat .composer-send-btn__icon {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

#page-chat .composer-send-btn .ui-icon {
    height: 14px;
    transform: rotate(40deg);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 14px;
}

#page-chat .composer-shell.is-expanded .composer-send-btn .ui-icon {
    transform: rotate(0deg);
}

#page-chat .composer-emoji-wrap {
    flex-shrink: 0;
    position: relative;
}

#page-chat .chat-main > .input-bar .composer-reply-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    margin: 0;
}

#page-chat .chat-main > .input-bar:focus-within .composer-shell {
    border-color: var(--nexa-aside-stroke, var(--capsule-stroke));
}

#page-chat .chat-main > .input-bar:focus-within .composer-shell.has-reply {
    border-top-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .composer-shell,
    #page-chat .composer-placeholder,
    #page-chat .composer-shell #messageInput,
    #page-chat .composer-actions,
    #page-chat .composer-send-btn,
    #page-chat .composer-scale-wrap,
    #page-chat .chat-main > .input-bar .paste-attachments {
        transition: none !important;
    }
}


@media (prefers-reduced-transparency: reduce) {
    #page-chat {
        --composer-glass: color-mix(in srgb, var(--bg) 88%, transparent);
        --panel-glass: color-mix(in srgb, var(--bg) 88%, transparent);
        --control-glass: color-mix(in srgb, var(--bg) 88%, transparent);
        --bubble-own: color-mix(in srgb, #3f3f46 88%, transparent);
        --bubble-other: color-mix(in srgb, #1a1a1a 88%, transparent);
    }

    #page-chat .chat-main > .input-bar .composer-shell,
    #page-chat .chat-main > .input-bar .composer-reply-bar,
    #page-chat:not(.is-viewport-app-stack) .chat-header,
    #page-chat .message-bubble--own,
    #page-chat .message-bubble--other {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.composer-status {
    color: var(--text-tertiary);
    font-size: var(--text-caption);
    line-height: 1.3;
    padding: 0 2px;
    text-align: center;
}

.composer-status.danger {
    color: var(--text-danger);
}

.composer-char-counter {
    align-items: center;
    color: color-mix(in srgb, var(--theme-text, #fff) 38%, transparent);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--f-ui);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    height: 28px;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 0 6px;
    min-height: 0;
    padding: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

#page-chat .composer-actions .composer-char-counter {
    align-self: center;
}

.composer-status.hidden,
.composer-reply-bar.hidden,
.paste-attachments.hidden {
    display: none !important;
    margin: 0;
    padding: 0;
}

.composer-char-counter.danger {
    color: var(--text-danger);
}

.chat-main > .input-bar:focus-within {
    border: none;
    box-shadow: none;
}

/* ─── Chat column alignment ─── */
.chat-stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--layout-chat-max);
    min-height: 0;
    position: relative;
    width: 100%;
    z-index: var(--z-base);
}

.chat-stage-atmosphere {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.chat-stage-atmosphere__field {
    display: block;
    height: 100%;
    width: 100%;
}

/* Full-width header bar; content aligned to chat column */
.chat-header {
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    width: 100%;
    z-index: var(--z-header);
}

.chat-header-stack {
    height: 100%;
    min-height: var(--layout-header-h);
    position: relative;
    width: 100%;
}

.chat-header-inner {
    align-items: center;
    display: flex;
    gap: 10px;
    height: var(--layout-header-h);
    justify-content: center;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

#page-chat .chat-header-peer {
    --chat-header-morph-duration: 0.28s;
    --chat-header-morph-ease: cubic-bezier(0.32, 0.72, 0, 1);
    align-items: center;
    /* Solid, matching the composer capsule (see .composer-shell) */
    background: var(--nexa-aside-fill, #161920);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke, var(--capsule-stroke));
    border-radius: 999px;
    /* Composer's lift, mirrored: it casts down onto the thread */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    max-width: min(300px, calc(100% - 56px));
    min-width: 230px;
    overflow: hidden;
    position: relative;
    transition:
        background 0.28s ease,
        border-color 0.28s ease;
    width: min(280px, calc(100% - 56px));
}

#page-chat .chat-header-peer__identity {
    align-items: center;
    display: flex;
    gap: 0;
    height: 100%;
    justify-content: flex-start;
    min-width: 0;
    opacity: 1;
    /* 44px avatar in the 54px pill: 5px above / below, 6px at the left so it
       sits in the pill's rounded end with room for the status arc */
    padding: 0 12px 0 6px;
    pointer-events: none;
    position: relative;
    transform: translateY(0);
    transition:
        opacity var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        transform var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        visibility 0s linear 0s;
    visibility: visible;
    width: 100%;
    z-index: 0;
}

#page-chat .chat-header-peer__identity.hidden {
    display: none;
}

#page-chat .chat-header-peer.is-open .chat-header-peer__identity {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 0.2s ease,
        transform 0.2s var(--chat-header-morph-ease),
        visibility 0s linear 0.2s;
    visibility: hidden;
}

#page-chat .chat-header-avatar-wrap {
    flex-shrink: 0;
    height: 44px;
    pointer-events: auto;
    position: relative;
    width: 44px;
    z-index: 1;
}

#page-chat .header-left__meta {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    /* Reach past the capsule edge toward the search circle so the
       name sits on the midpoint between avatar and search button. */
    margin-right: calc(-0.5 * (var(--layout-header-h) + 8px));
    min-width: 0;
    padding-left: 10px;
    padding-right: calc(0.5 * (var(--layout-header-h) + 8px));
    pointer-events: auto;
    text-align: center;
}

#page-chat .chat-header-peer__search {
    align-items: center;
    display: flex;
    gap: 8px;
    inset: 0;
    opacity: 0;
    padding: 0 16px;
    pointer-events: none;
    position: absolute;
    transform: translateY(5px);
    transition:
        opacity var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        transform var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        visibility 0s linear var(--chat-header-morph-duration);
    visibility: hidden;
    z-index: 1;
}

#page-chat .chat-header-peer.is-open .chat-header-peer__search {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        transform var(--chat-header-morph-duration) var(--chat-header-morph-ease),
        visibility 0s linear 0s;
    visibility: visible;
}

#page-chat .chat-header-peer__search-lead {
    color: var(--theme-text-muted, #8a8a8a);
    flex-shrink: 0;
    height: 14px;
    width: 14px;
}

#page-chat .chat-header-peer__search input {
    background: transparent;
    border: 0;
    color: var(--theme-text, #f4f4f5);
    flex: 1;
    font-family: var(--f-ui);
    font-size: 14px;
    line-height: 1.2;
    min-width: 0;
    outline: none;
    padding: 0;
}

#page-chat .chat-header-peer__search input::placeholder {
    color: var(--theme-text-muted, #6e6e6e);
}

#page-chat .chat-header-peer__search input::-webkit-search-decoration,
#page-chat .chat-header-peer__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

#page-chat .chat-header-peer__search-count {
    color: var(--theme-text-muted, #6e6e6e);
    flex-shrink: 0;
    font-family: var(--f-ui);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .chat-header-peer,
    #page-chat .chat-header-peer__identity,
    #page-chat .chat-header-peer__search,
    #page-chat .chat-header-search-btn .ui-icon {
        transition: none;
    }

    #page-chat .chat-header-peer.is-open .chat-header-peer__identity,
    #page-chat .chat-header-peer__search {
        transform: none;
    }
}

#page-chat .chat-header-search-btn {
    align-items: center;
    aspect-ratio: 1;
    background: var(--nexa-aside-fill, #161920);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--nexa-aside-stroke, var(--capsule-stroke));
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    padding: 0;
    position: relative;
    transition:
        background 0.28s ease,
        border-color 0.28s ease,
        color 0.2s ease;
    width: auto;
}

#page-chat .chat-header-search-btn:hover:not(:disabled),
#page-chat .chat-header-search-btn:focus-visible {
    color: var(--theme-text, #f4f4f5);
    outline: none;
}

#page-chat .chat-header-search-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

#page-chat .chat-header-search-btn .ui-icon {
    height: 16px;
    position: absolute;
    transition:
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    width: 16px;
}

#page-chat .chat-header-search-btn__icon-search {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#page-chat .chat-header-search-btn__icon-close {
    opacity: 0;
    transform: rotate(-45deg) scale(0.7);
}

#page-chat .chat-header-search-btn.is-open .chat-header-search-btn__icon-search {
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
}

#page-chat .chat-header-search-btn.is-open .chat-header-search-btn__icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#page-chat .chat-header-avatar {
    border-radius: var(--radius-pill);
    font-size: var(--text-meta);
    height: 100%;
    width: 100%;
}

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

#page-chat .chat-header-presence {
    border: 2px solid var(--chat-stage-fill, #10131a);
    border-radius: 50%;
    bottom: -1px;
    box-sizing: border-box;
    height: 10px;
    pointer-events: none;
    position: absolute;
    right: -1px;
    width: 10px;
    z-index: 1;
}

#page-chat .chat-header-presence.is-online {
    background: var(--green);
    box-shadow: 0 0 0 2px var(--green-20);
}

#page-chat .chat-header-presence.is-offline {
    background: var(--color-danger);
    box-shadow: 0 0 0 2px var(--red-20);
}

#page-chat .header-left #chatWithTitle,
#page-chat .chat-header-peer #chatWithTitle {
    color: var(--text);
    display: block;
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-snug);
    line-height: 1.2;
    /* Vertical breathing room so the gooey blur isn't clipped by overflow;
       the negative margin keeps the header layout unchanged. */
    margin-block: -0.5em;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding-block: 0.5em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

#page-chat .header-left .header-sub {
    margin-top: 0;
}

#page-chat .header-left .presence-badge {
    font-size: 11px;
    gap: 5px;
}

#page-chat .header-left .presence-dot {
    height: 6px;
    width: 6px;
}

.gooey-text {
    display: block;
    min-width: 0;
    position: relative;
}

.gooey-text__svg {
    height: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.gooey-text__sizer {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: hidden;
    white-space: nowrap;
}

.gooey-text__morph {
    inset: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
}

.gooey-text__layer {
    left: 0;
    /* `scale` (GooeyText's squeeze) applies after `transform`'s translate, so
       the box's top-left corner is where the translated anchor lands: the left
       edge / centre line here, the exact centre in the header's centred variant. */
    transform-origin: 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    will-change: filter, opacity;
}

#page-chat .header-gooey__text {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    user-select: none;
}

#page-chat .chat-header-peer .header-gooey {
    width: 100%;
}

#page-chat .chat-header-peer .gooey-text__layer {
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-chat .chat-header-peer .gooey-text__sizer {
    text-align: center;
    width: 100%;
}

.gooey-dots {
    align-items: center;
    display: inline-flex;
    /* Gap under ~2× the blur so neighbours bridge when their heights differ. */
    gap: 0.14em;
    height: 1em;
    vertical-align: middle;
}

.gooey-dots span {
    animation: gooeyDotBounce 1.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    background: currentColor;
    border-radius: 50%;
    display: block;
    height: 0.36em;
    width: 0.36em;
}

.gooey-dots span:nth-child(2) {
    animation-delay: 0.18s;
}

.gooey-dots span:nth-child(3) {
    animation-delay: 0.36s;
}

/* Sine-like ease both ways: a slow float up and down with a rest between waves. */
@keyframes gooeyDotBounce {
    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-0.26em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gooey-dots span {
        animation: none;
    }
}

.chat-header-tools {
    display: none;
}

.expand-search {
    display: none;
}

/* ─── Apple Spotlight, exact component tokens in the header shell ─── */
#page-chat .chat-header-inner {
    transition:
        opacity 0.28s ease,
        filter 0.28s ease;
}

#page-chat.is-compose-search .chat-header-inner {
    filter: blur(6px);
    opacity: 0;
    pointer-events: none;
}

#page-chat .compose-spotlight {
    --spotlight-h: var(--layout-header-h, 54px);
    --spotlight-icon: 16px;
    --spotlight-stroke: 2px;
    --spotlight-gap: 10px;
    /* One surface for the input and the shortcut buttons: the theme's card
       fill + hairline (#FFFFFF on the light themes, #121212 on Dark Neon). */
    --spotlight-glass: var(--card-bg, color-mix(in srgb, var(--chat-stage-fill, #10131a) 78%, #1a1d26));
    --spotlight-glass-stroke: var(--border-subtle, var(--capsule-stroke));
    --spotlight-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    /* Shortcut circles = input height (js/composeSearch.jsx reads --spotlight-h) */
    --spotlight-btn: var(--spotlight-h);
    /* Collapsed: a true pill — radius = half the input height, not 999px, so
       the corners stay circular while the results height animates instead of
       bulging into an oval. Expanded: switches straight to --spotlight-radius-open. */
    --spotlight-radius: calc(var(--spotlight-h) / 2);
    --spotlight-radius-open: 18px;
    --spotlight-ink: var(--text, #f4f4f5);
    --spotlight-muted: #8a8a8a;
    --spotlight-chip: color-mix(in srgb, var(--chat-stage-fill, #10131a) 70%, #1a1d26);
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    inset: 0;
    justify-content: flex-start;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 2;
}

#page-chat .compose-spotlight[hidden] {
    display: none !important;
}

#page-chat.is-compose-search .compose-spotlight {
    pointer-events: auto;
}

#page-chat .compose-spotlight__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#page-chat.is-compose-search .chat-main > .input-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 36px));
}

#page-chat.is-compose-search .chat-main > .input-bar > * {
    pointer-events: none;
}

#page-chat.is-compose-search #chat-welcome {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#page-chat.is-compose-search .sidebar-dock-compose {
    background: color-mix(in srgb, var(--theme-text, #fff) 7%, transparent);
    color: var(--theme-text, #f4f4f5);
}

#page-chat.is-compose-search:not(.is-viewport-app-stack) .chat-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

#page-chat.is-compose-search.is-viewport-app-stack .chat-header {
    overflow: visible;
}

/* Inner group: w-full flex items-center justify-end + blob */
#page-chat .compose-spotlight__shell {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: flex-end;
    max-width: 36rem;
    min-width: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 20;
}

#page-chat .compose-react-shortcut.is-away {
    pointer-events: none;
}

#page-chat .compose-spotlight__card,
#page-chat .compose-spotlight__shortcut-item {
    background: var(--spotlight-glass);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    color: var(--spotlight-ink);
}

#page-chat .compose-spotlight__shell svg {
    height: var(--spotlight-icon);
    stroke-width: var(--spotlight-stroke);
    width: var(--spotlight-icon);
}

#page-chat .compose-spotlight__card {
    border: 1px solid var(--spotlight-glass-stroke);
    border-radius: var(--spotlight-radius) !important;
    box-shadow: var(--glass-inset-highlight);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 10;
}

#page-chat .compose-spotlight__input-row {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    height: var(--spotlight-h);
    justify-content: flex-start;
    min-width: 0;
    padding: 0 18px;
    width: 100%;
}

#page-chat .compose-spotlight__lead {
    color: var(--spotlight-muted);
    flex-shrink: 0;
    height: var(--spotlight-icon);
    stroke-width: var(--spotlight-stroke);
    width: var(--spotlight-icon);
}

#page-chat .compose-spotlight__field {
    flex: 1;
    font-size: 15px;
    min-width: 0;
    position: relative;
}

#page-chat .compose-spotlight__placeholder {
    color: var(--spotlight-muted);
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 400;
    left: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out,
        filter 0.2s ease-out,
        color 0.2s ease,
        background 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}

#page-chat .compose-spotlight__placeholder.is-emphasized {
    background: var(--spotlight-chip);
    border-radius: 6px;
    color: var(--spotlight-ink);
    padding: 0 4px;
}

#page-chat .compose-spotlight__placeholder.is-hidden {
    filter: blur(5px);
    opacity: 0;
    transform: translateY(calc(-50% - 10px));
}

#page-chat .compose-spotlight__placeholder.is-swap {
    filter: blur(5px);
    opacity: 0;
    transform: translateY(calc(-50% + 10px));
}

#page-chat .compose-spotlight__input {
    background: transparent;
    border: 0;
    color: var(--spotlight-ink);
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.02em;
    outline: none;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

#page-chat .compose-spotlight__results {
    background: transparent;
    border-top: 1px solid var(--spotlight-glass-stroke);
    display: flex;
    flex-direction: column;
    max-height: 24rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    width: 100%;
}

#page-chat .compose-spotlight__results[hidden] {
    display: none;
}

#page-chat .compose-spotlight__shortcuts {
    display: contents;
}

#page-chat .compose-spotlight__shortcut-item {
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 var(--spotlight-h);
    height: var(--spotlight-h);
    width: var(--spotlight-h);
}

#page-chat .compose-spotlight__shortcut-item[hidden] {
    display: none !important;
}

#page-chat .compose-spotlight__shortcut {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    display: flex;
    height: var(--spotlight-h);
    justify-content: center;
    opacity: 0.3;
    padding: 0;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    width: var(--spotlight-h);
}

#page-chat .compose-spotlight__shortcut:hover,
#page-chat .compose-spotlight__shortcut:focus-visible {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    opacity: 1;
    outline: none;
}

#page-chat .compose-spotlight__shortcut .ui-icon {
    height: var(--spotlight-icon);
    stroke-width: var(--spotlight-stroke);
    width: var(--spotlight-icon);
}

#page-chat .compose-spotlight__dismiss {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

#page-chat #uiComposeReactRoot,
#page-chat .compose-react-overlay {
    height: 100%;
    width: 100%;
}

#page-chat .compose-react-overlay {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: flex-start;
    padding-top: calc((var(--layout-header-h) - var(--spotlight-h)) / 2);
    position: absolute;
    transform-origin: top center;
    z-index: 50;
}

#page-chat .compose-react-card {
    align-items: center;
    background: var(--spotlight-glass);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid var(--spotlight-glass-stroke);
    box-shadow: var(--spotlight-surface-shadow);
    color: var(--spotlight-ink);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--spotlight-radius) !important;
    max-height: 50vh;
    max-height: 50dvh;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transform-origin: top center;
    width: 100%;
    z-index: 10;
}

/* Instant switch (no radius transition) the moment results open */
#page-chat .compose-react-card:has(.compose-react-results-slot.is-open) {
    border-radius: var(--spotlight-radius-open) !important;
}

#page-chat .compose-react-input-row {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    height: var(--spotlight-h);
    justify-content: flex-start;
    padding: 0 18px;
    width: 100%;
}

#page-chat .compose-react-search-icon {
    align-items: center;
    color: var(--spotlight-muted);
    display: flex;
    flex-shrink: 0;
    height: var(--spotlight-icon);
    justify-content: center;
    overflow: visible;
    position: relative;
    width: var(--spotlight-icon);
}

#page-chat .compose-react-search-icon svg,
#page-chat .compose-react-shortcut-icon svg {
    height: var(--spotlight-icon);
    stroke-width: var(--spotlight-stroke);
    width: var(--spotlight-icon);
}

#page-chat .compose-react-input-field {
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 15px;
    height: 100%;
    min-width: 0;
    position: relative;
}

#page-chat .compose-react-placeholder {
    align-items: center;
    color: var(--spotlight-muted);
    display: flex;
    pointer-events: none;
    position: absolute;
    z-index: 10;
}

#page-chat .compose-react-placeholder.is-result {
    background: var(--spotlight-chip);
    border-radius: 6px;
    color: var(--spotlight-ink);
    padding: 0 4px;
}

#page-chat .compose-react-placeholder p {
    font: inherit;
    margin: 0;
}

#page-chat .compose-react-input-mirror {
    align-items: center;
    color: var(--spotlight-ink);
    display: flex;
    font: inherit;
    height: 100%;
    inset: 0;
    letter-spacing: inherit;
    line-height: var(--spotlight-h);
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    white-space: pre;
    z-index: 1;
}

#page-chat .compose-react-input-char {
    animation: compose-char-in 0.14s ease-out both;
    display: inline-block;
}

@keyframes compose-char-in {
    from {
        opacity: 0;
        transform: translateY(0.32em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#page-chat .compose-react-input {
    background: transparent;
    border: 0;
    caret-color: var(--spotlight-ink);
    color: transparent;
    font: inherit;
    height: 100%;
    letter-spacing: inherit;
    line-height: var(--spotlight-h);
    outline: none;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

#page-chat .compose-react-shortcut {
    align-items: center;
    align-self: flex-start;
    background-color: var(--spotlight-glass) !important;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    color: var(--spotlight-ink);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--spotlight-btn);
    justify-content: center;
    /* Centre on the input row even while the results panel grows the card */
    margin-top: calc((var(--spotlight-h) - var(--spotlight-btn)) / 2);
    min-height: var(--spotlight-btn);
    overflow: hidden;
    padding: 0;
    position: relative;
    transform-origin: center center;
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
    /* width is driven by framer-motion (SHORTCUT_SIZE → 0 when tucked away) */
    width: var(--spotlight-btn);
    will-change: transform, width, opacity;
    z-index: 1;
}

#page-chat .compose-react-shortcut-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--spotlight-btn);
    justify-content: center;
    line-height: 0;
    min-height: var(--spotlight-btn);
    min-width: var(--spotlight-btn);
    opacity: 0.6;
    padding: 0;
    position: relative;
    transition: opacity 0.28s ease, color 0.28s ease;
    width: var(--spotlight-btn);
}

#page-chat .compose-react-shortcut-button:hover,
#page-chat .compose-react-shortcut-button:focus-visible {
    opacity: 1;
    outline: none;
}

/* Selected shortcut: same white circle, marked by a crisp hairline ring */
#page-chat .compose-react-shortcut.is-active {
    border: 1.5px solid var(--spotlight-glass-stroke) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#page-chat .compose-react-shortcut-button.is-active,
#page-chat .compose-react-shortcut-button.is-active:hover,
#page-chat .compose-react-shortcut-button.is-active:focus-visible {
    color: var(--spotlight-ink);
    opacity: 1;
}

#page-chat .compose-react-shortcut-icon {
    align-items: center;
    display: inline-flex;
    height: var(--spotlight-icon);
    justify-content: center;
    line-height: 0;
    position: relative;
    width: var(--spotlight-icon);
    z-index: 1;
}

#page-chat .compose-react-shortcut-icon svg {
    display: block;
    flex-shrink: 0;
}

#page-chat .compose-react-shortcut-button.is-close:hover,
#page-chat .compose-react-shortcut-button.is-close:focus-visible {
    opacity: 1;
}

#page-chat .compose-react-search-icon-swap {
    align-items: center;
    display: flex;
    height: var(--spotlight-icon);
    justify-content: center;
    width: var(--spotlight-icon);
}

#page-chat .compose-spotlight__shell.is-compose-query .compose-react-search-icon {
    color: var(--spotlight-ink);
}

#page-chat .compose-react-results-slot {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

#page-chat .compose-react-results-slot.is-open {
    grid-template-rows: 1fr;
}

#page-chat .compose-react-results-slot__clip {
    overflow: hidden;
    /* Divider lives here (inset, no layout) so the scroller's fade mask can't erase it */
    box-shadow: inset 0 1px 0 var(--spotlight-glass-stroke);
}

/* Progressive fade at the scroll edges: rows dissolve instead of being cut */
#page-chat .compose-react-results {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 16px, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, black 16px, black calc(100% - 20px), transparent 100%);
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: calc(50vh - var(--spotlight-h));
    max-height: calc(50dvh - var(--spotlight-h));
    min-height: 0;
    opacity: 1;
    overflow-y: auto;
    padding: 8px;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    width: 100%;
}

#page-chat .compose-react-results-slot:not(.is-open) .compose-react-results {
    opacity: 0;
    transform: translateY(-6px);
}

#page-chat .compose-react-results-status {
    animation: compose-result-in 0.18s ease-out both;
    color: var(--spotlight-muted);
    font-size: 12px;
    margin: 0;
    padding: 16px 8px;
    text-align: center;
}

@keyframes compose-result-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#page-chat .compose-react-result-enter {
    animation: compose-result-in 0.2s ease-out both;
    position: relative;
}

/* Sliding highlight (framer layoutId) — spring shared with the sidebar lists.
   Sits behind the row (z 0); a pale neutral wash of the ink colour:
   ≈ rgba(255,255,255,.04) on Dark Neon, rgba(0,0,0,.03) on the light themes. */
#page-chat .compose-react-result-highlight {
    background: color-mix(in srgb, var(--spotlight-ink) 4%, transparent);
    border-radius: 12px;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

html[data-theme^="light"] #page-chat .compose-react-result-highlight {
    background: color-mix(in srgb, var(--spotlight-ink) 3%, transparent);
}

#page-chat .compose-react-result-card {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--spotlight-ink);
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    position: relative;
    text-align: left;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    z-index: 1;
}

/* Avatar, copy and chevron always paint above the highlight */
#page-chat .compose-react-result-card > * {
    position: relative;
    z-index: 1;
}

/* The fill comes from the sliding highlight; the row itself only nudges */
#page-chat .compose-react-result-card:hover,
#page-chat .compose-react-result-card.is-active {
    box-shadow: none;
    outline: none;
    transform: translateX(2px);
}

/* Keyboard focus without a pointer-driven highlight still gets the fill */
#page-chat .compose-react-result-card:focus-visible:not(.is-active) {
    background-color: color-mix(in srgb, var(--spotlight-ink) 4%, transparent);
    outline: none;
}

#page-chat .compose-react-result-avatar {
    border-radius: 50%;
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
}

#page-chat .compose-react-result-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-height: 36px;
    min-width: 0;
}

#page-chat .compose-react-result-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

#page-chat .compose-react-result-description {
    color: var(--spotlight-muted);
    font-size: 12px;
    line-height: 1.25;
    min-height: 1.25em;
}

#page-chat .compose-react-result-label,
#page-chat .compose-react-result-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-chat .compose-react-result-chevron {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(-4px);
    /* Same curve + duration as the row nudge, so arrow and row settle together */
    transition:
        opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-chat .compose-react-result-chevron svg {
    height: 24px;
    width: 24px;
}

#page-chat .compose-react-result-card:hover .compose-react-result-chevron,
#page-chat .compose-react-result-card:focus-visible .compose-react-result-chevron,
#page-chat .compose-react-result-card.is-active .compose-react-result-chevron {
    opacity: 1;
    transform: translateX(0);
}


.compose-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.compose-results:not(.is-ready) .compose-result-card,
.compose-results:not(.is-ready) .compose-results__status {
    opacity: 0;
}

.compose-results.is-ready .compose-result-card,
.compose-results.is-ready .compose-results__status {
    animation: compose-result-rise 0.2s ease-out both;
}

.compose-results.is-ready .compose-result-card:nth-child(1) { animation-delay: 0s; }
.compose-results.is-ready .compose-result-card:nth-child(2) { animation-delay: 0.1s; }
.compose-results.is-ready .compose-result-card:nth-child(3) { animation-delay: 0.2s; }
.compose-results.is-ready .compose-result-card:nth-child(4) { animation-delay: 0.3s; }
.compose-results.is-ready .compose-result-card:nth-child(5) { animation-delay: 0.4s; }
.compose-results.is-ready .compose-result-card:nth-child(6) { animation-delay: 0.5s; }
.compose-results.is-ready .compose-result-card:nth-child(7) { animation-delay: 0.6s; }
.compose-results.is-ready .compose-result-card:nth-child(8) { animation-delay: 0.7s; }

@keyframes compose-result-rise {
    from { opacity: 0; }
    to { opacity: 1; }
}

.compose-results__status {
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--f-ui);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    padding: 16px 12px;
    text-align: center;
}

.compose-result-card {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--theme-bg, #111);
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding: 8px;
    text-align: left;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
    width: 100%;
}

.compose-result-card.is-last {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.compose-result-card:hover,
.compose-result-card:focus-visible,
.compose-result-card.is-active {
    background: var(--theme-text, #fff);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    outline: none;
}

.compose-result-card__avatar {
    flex-shrink: 0;
    height: 32px;
    width: 32px;
}

.compose-result-card__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.compose-result-card__label {
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-result-card__desc {
    color: rgb(0 0 0 / 0.5);
    font-family: var(--f-ui);
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-result-card__chevron {
    align-items: center;
    color: var(--theme-text-muted, #525252);
    display: inline-flex;
    flex: 1;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.compose-result-card:hover .compose-result-card__chevron,
.compose-result-card:focus-visible .compose-result-card__chevron,
.compose-result-card.is-active .compose-result-card__chevron {
    opacity: 1;
}

.compose-result-card__chevron .ui-icon {
    height: 24px;
    width: 24px;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .chat-header-inner,
    #page-chat .compose-spotlight,
    #page-chat .compose-spotlight.is-open,
    .compose-results.is-ready .compose-result-card,
    .compose-results.is-ready .compose-results__status {
        animation: none;
        transition: none;
    }

    #page-chat.is-compose-search .chat-header-inner,
    #page-chat .compose-spotlight:not(.is-open) {
        filter: none;
        transform: none;
    }

    #page-chat .compose-react-results-slot,
    #page-chat .compose-react-results,
    #page-chat .compose-react-results-status,
    #page-chat .compose-react-result-enter,
    #page-chat .compose-react-result-card,
    #page-chat .compose-react-result-chevron,
    #page-chat .compose-react-input-char {
        animation: none;
        transition: none;
        transform: none;
    }

    #page-chat:not(.is-compose-shortcuts) .compose-spotlight__shortcut,
    #page-chat.is-compose-shortcuts .compose-spotlight__shortcut,
    #page-chat .compose-spotlight__shortcuts.is-exiting .compose-spotlight__shortcut {
        opacity: 1;
        transform: none;
    }
}

#messages {
    container-name: chat-thread;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: min-content;
    overflow: visible;
    padding: var(--space-5) var(--layout-gutter-x)
        calc(var(--composer-float-offset, 96px) + var(--space-6));
    position: relative;
    /* No padding-bottom transition — clearance tracks the shell every frame */
    transition:
        opacity 0.2s ease,
        transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1;
}

/* Messages ScrollBlur — bare edges (edgeVariant="custom") styled by
   .chat-scroll-blur-top / -bottom below, sized to the floating header / composer. */
#page-chat .chat-messages-scroll {
    --messages-blur-fade: 28px;
    --messages-blur-top-h: calc(
        var(--nexa-surface-inset, 20px) + var(--layout-header-h, 58px) + var(--messages-blur-fade)
    );
    /* Tracks floating composer via --messages-composer-blur-h (synced from JS) */
    --messages-blur-bottom-h: var(
        --messages-composer-blur-h,
        calc(18px + 52px + 14px + var(--messages-blur-fade))
    );
    flex: 1;
    min-height: 0;
    width: 100%;
    z-index: 1;
}

/* Progressive blur + dim: backdrop blur and a stage-tinted gradient, both faded out toward
   the thread by the same linear mask so neither leaves a band or seam. Heights
   reach past the floating header / composer (80px when those aren't measured).
   Tune the dim through --messages-blur-dim (peak alpha at the edge).
   The tint is the stage colour as actually painted (wallpaper fill + its dim
   overlay, see #page-chat::before), so at full strength the edge blends into the
   chosen theme instead of reading as a darker band. */
#page-chat .chat-messages-scroll {
    --messages-blur-dim: 0.92;
    --messages-blur-tint: color-mix(
        in srgb,
        #000 var(--wallpaper-dim, 0%),
        var(--chat-stage-fill, #10131a)
    );
}

.chat-scroll-blur-top {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 100%), transparent) 0%,
        /* Hold near full strength along the edge before easing off. */
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 90%), transparent) 20%,
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 40%), transparent) 60%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    height: var(--messages-blur-top-h, 80px);
    left: 0;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

.chat-scroll-blur-bottom {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 100%), transparent) 0%,
        /* Hold near full strength along the edge before easing off. */
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 90%), transparent) 20%,
        color-mix(in srgb, var(--messages-blur-tint) calc(var(--messages-blur-dim, 0.92) * 40%), transparent) 60%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    bottom: 0;
    height: var(--messages-blur-bottom-h, 80px);
    left: 0;
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 10;
}

#page-chat .chat-messages-scroll__viewport {
    outline: none;
    scroll-behavior: smooth;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    scrollbar-width: thin;
}

#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar {
    width: 4px;
}

#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}

#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar-thumb {
    background: var(--theme-section, #2a2a2a);
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar-thumb:hover,
#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar-thumb:active {
    background: #3a3a3a;
}

#page-chat .chat-messages-scroll__viewport::-webkit-scrollbar-corner {
    background: transparent;
}

#page-chat .chat-messages-scroll__content {
    min-height: min-content;
}

#page-chat #messages.is-compose-exit {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
}

/* Gutter for hover actions outside bubbles */
.message-row--own .message-content-wrap {
    margin-left: 44px;
}

.message-row--other .message-content-wrap {
    margin-right: 44px;
}

/* ─── Modals portaled into overlay ─── */
.overlay-surface--modal .modal-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    left: auto;
    max-width: none;
    padding: var(--space-4);
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
}

.overlay-surface--modal .modal-panel--profile {
    padding: 0;
}

.overlay-surface--modal .modal-head {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3);
}

/* ─── Search highlight (no Tailwind) ─── */
.message-row.is-search-hidden {
    display: none !important;
}

.search-hit {
    background: rgba(250, 204, 21, 0.42);
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: inherit;
    font-weight: 650;
    padding: 0 0.12em;
}

.message-bubble--own .search-hit {
    background: rgba(234, 179, 8, 0.55);
    color: var(--theme-bg, #0a0a0a);
}

.message-link .search-hit {
    text-decoration: inherit;
}

/* Legacy inline actions — disabled in favor of gutter actions */
.message-actions {
    display: none !important;
}

/* Two-pane sidebar: brand bar + account footer — app-layout.css */
.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sidebar-brand {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    padding: 0 var(--space-3);
}

.sidebar-brand__mark {
    display: block;
    height: 16px;
    width: auto;
}

/* NEXA wordmark in the theme's text colour. The artwork is a single-colour
   raster (nexa-logo.svg wraps a PNG), so it can't take `fill`; it's used as an
   alpha mask over a --text-primary fill instead — dark (#191B13) on the light
   themes, white on Dark Neon. Set a height; the width follows the artwork. */
.brand-logo {
    aspect-ratio: 1007 / 176;
    background-color: var(--text-primary, #f4f4f5);
    flex-shrink: 0;
    -webkit-mask: url("/brand/nexa-logo.svg") center / contain no-repeat;
    mask: url("/brand/nexa-logo.svg") center / contain no-repeat;
    transition: background-color 0.35s ease;
}

/* Sidebar vertical rhythm — logo + Contacts on one row */
#page-chat .sidebar-brand {
    align-items: center;
    display: flex;
    gap: 12px;
    height: auto !important;
    justify-content: space-between;
    margin-bottom: 28px;
    padding: 0 16px;
}

#page-chat .sidebar-brand-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
}

#page-chat .sidebar-search-open {
    display: none;
}

#page-chat .contact-search-trigger {
    display: none;
}

#page-chat .contact-search-cancel {
    display: none;
}

#page-chat .contact-search-layer__head {
    display: none;
}

#page-chat .contact-search-back {
    display: none;
}

#page-chat .sidebar-brand__mark {
    flex-shrink: 0;
    height: 26px;
}

/* ── Left header: NEXA block with the hide button in a top-right cutout ─────
   Same build as the right panel's cover cutout (public/css/peer-panel.css):
   an aside-coloured plate over the header's corner, concave curve = button
   radius + gap, two radial "inverted corner" joints. Header is inset 13px in
   the shelf (14px from the outer edge, like the right cards' photo). */
#page-chat:not(.is-viewport-app-stack) .left-capsule .sidebar {
    padding-top: 0;
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header {
    --lh-inset: 13px;
    --lh-btn: 36px;
    --lh-gap: 5px;
    /* Button position from the shelf's inner edge (not the header's), equal
       on both sides. 17px keeps an even ~11px ring to the shelf's 50px corner
       arc along the diagonal (12px from the straight edges sat ~3px from it).
       The cutout's curve (btn/2 + gap) is concentric with the button. */
    --lh-btn-right: 17px;
    --lh-btn-top: 17px;
    /* Joints: roomy along the top; on the side, 64 − 45 = 19px under the
       cutout holds the joint (9) + the header's bottom corner (10) */
    --lh-joint-top: 12px;
    --lh-joint-side: 9px;
    --lh-notch-w: calc(var(--lh-btn-right) + var(--lh-btn) + var(--lh-gap));
    --lh-notch-h: calc(var(--lh-btn-top) + var(--lh-btn) + var(--lh-gap));
    /* Soft wash of the text colour, no border: ≈ rgba(0,0,0,.03) on the light
       themes, rgba(255,255,255,.03) on Dark Neon. The cutout plate is opaque
       aside fill, so it stays flush with the shelf around it. */
    background: color-mix(in srgb, var(--text-primary, var(--theme-text, #fff)) 3%, transparent) !important;
    border: 0;
    /* Top-left concentric with the shelf; bottoms fit under the side joint */
    border-radius: calc(var(--nexa-aside-radius) - 1px - var(--lh-inset)) 0 10px 10px;
    height: 64px !important; /* base .sidebar-brand forces height: auto !important */
    margin: var(--lh-inset) var(--lh-inset) 28px;
    /* `.sidebar > *` pins children to the full aside width (no reflow while
       collapsing); with side margins that overflowed the shelf and pushed the
       cutout + button past its edge. Pin to the width inside the margins and
       the shelf's 1px borders instead. */
    min-width: calc(var(--nexa-aside-start-w, 288px) - 2px - var(--lh-inset) * 2);
    padding: 10px 16px;
    position: relative;
}

/* Label: NEXA in Chats, "Settings" in Settings, "Profile" on the Profile page.
   The swap between them is animated in React (ChatSidebar SidebarHeaderTitle). */
.left-sidebar-header__label {
    align-items: center;
    display: flex;
    /* Same box for the logo and "Settings": the header can't size to its label */
    height: 26px;
    line-height: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.left-sidebar-header__swap {
    align-items: center;
    display: flex;
    min-width: 0;
}

.left-sidebar-header__title {
    color: var(--text-primary, var(--theme-text, #f4f4f5));
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header .sidebar-brand__mark {
    height: 22px;
    max-height: 22px;
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header__notch {
    background: var(--nexa-aside-fill);
    border-bottom-left-radius: calc(var(--lh-btn) / 2 + var(--lh-gap));
    border-top-right-radius: calc(var(--nexa-aside-radius) - 1px);
    height: var(--lh-notch-h);
    pointer-events: none;
    position: absolute;
    right: calc(var(--lh-inset) * -1);
    top: calc(var(--lh-inset) * -1);
    width: var(--lh-notch-w);
    z-index: 1;
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header__joint {
    --j: var(--lh-joint-top);
    background: radial-gradient(
        circle at 0 100%,
        transparent var(--j),
        var(--nexa-aside-fill) calc(var(--j) + 0.5px)
    );
    height: var(--j);
    position: absolute;
    width: var(--j);
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header__joint--top {
    right: 100%;
    top: var(--lh-inset);
}

#page-chat:not(.is-viewport-app-stack) .left-sidebar-header__joint--side {
    --j: var(--lh-joint-side);
    right: var(--lh-inset);
    top: 100%;
}

/* Same button as the right panel's (.profile-cover-toggle) */
#page-chat .left-sidebar-collapse-btn {
    align-items: center;
    appearance: none;
    background-color: var(--card-bg, var(--nexa-aside-fill));
    border: 1px solid var(--border-subtle, var(--nexa-aside-stroke));
    border-radius: 50%;
    color: color-mix(in srgb, var(--text-primary, #f4f4f5) 55%, var(--card-bg, #121212));
    cursor: pointer;
    display: inline-flex;
    height: var(--lh-btn, 36px);
    justify-content: center;
    min-height: var(--lh-btn, 36px);
    min-width: var(--lh-btn, 36px);
    padding: 0;
    position: absolute;
    /* Header-relative, from the shelf-relative position above */
    right: calc(var(--lh-btn-right, 12px) - var(--lh-inset, 13px));
    top: calc(var(--lh-btn-top, 10px) - var(--lh-inset, 13px));
    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(--lh-btn, 36px);
    z-index: 2;
}

#page-chat .left-sidebar-collapse-btn:is(:hover, :focus-visible) {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary, #f4f4f5);
    outline: none;
}

#page-chat .left-sidebar-collapse-btn svg {
    display: block;
    height: 16px;
    width: 16px;
}

/* Mobile keeps its own header; no cutout there */
#page-chat.is-viewport-app-stack :is(.left-sidebar-header__notch, .left-sidebar-collapse-btn) {
    display: none;
}

/* Open sidebar: the header's round button hides it (chat list and settings
   both carry that header), so the edge tab — and its stroke notch — never
   shows, hover included. It only returns once collapsed, to reopen it. */
#page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule .aside-toggle--start {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
}

#page-chat:not(.is-viewport-app-stack):not(.is-sidebar-collapsed) .left-capsule::after {
    display: none;
}

/* Collapsed: the reopen tab fades in as soon as the slide ends */
#page-chat:not(.is-viewport-app-stack).is-sidebar-collapsed .aside-toggle--start {
    transition:
        transform var(--nexa-aside-toggle-duration) var(--nexa-aside-toggle-ease),
        opacity 0.18s ease var(--sidebar-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(--sidebar-motion-duration);
}

#page-chat .contact-search-wrap {
    margin-bottom: 32px;
    padding: 0 16px;
}

#page-chat .contact-search-input {
    background: color-mix(in srgb, var(--theme-section, #1a1a1a) 28%, transparent) !important;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-color: var(--capsule-stroke) !important;
    border-radius: 999px !important;
    box-shadow: var(--glass-inset-highlight);
    padding: 9px 12px 9px 34px !important;
}

#page-chat .contact-search-input:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-section, #1a1a1a) 36%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-tint, #fff) 12%, var(--nexa-aside-fill, #161920)) !important;
}

#page-chat .contact-search-input:focus {
    background: color-mix(in srgb, var(--theme-section, #1f1f1f) 40%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-tint, #fff) 12%, var(--nexa-aside-fill, #161920)) !important;
    box-shadow: none !important;
}

#page-chat .contact-search-icon {
    left: calc(16px + 12px);
}

#page-chat .contact-search-wrap .mini-icon-btn {
    border-radius: 999px;
    flex-shrink: 0;
    height: 34px;
    min-width: 34px;
    width: 34px;
}

.sidebar-head {
    align-items: center;
    border-bottom: none;
    display: flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: space-between;
    padding: 0 var(--space-3) var(--space-1);
}

#page-chat .sidebar-head {
    height: auto;
    min-height: 0;
    padding: 0 16px 14px;
}

#page-chat .sidebar-chats {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

#page-chat .sidebar-library {

    /* =========================================================
       LIBRARY TREE GEOMETRY
       ========================================================= */

    /* Sidebar background — used to hide the parent stem */
    --library-background: #202633;

    /* Tree connector color */
    --library-tree: #565a63;

    /* Distance from branch line to row content */
    --library-tree-gutter: 20px;

    /* Internal offset before the icon */
    --library-row-icon-offset: 6px;

    /* Always use an even integer width */
    --library-tree-width: 2px;

    /* Rounded elbow radius */
    --library-tree-radius: 8px;

    /* Row geometry */
    --library-row-height: 32px;
    --library-row-mid: 16px;

    /* Distance between nesting levels */
    --library-branch-indent: 20px;

    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 2px;
    padding: 0 10px 10px;
}

/* FileTree (Folders) — capped height + ScrollBlur edges */
#page-chat .sidebar-folder-scroll {
    --sidebar-folder-tree-max-h: 320px;
    max-height: var(--sidebar-folder-tree-max-h);
    min-height: 0;
    width: 100%;
}

#page-chat .sidebar-folder-scroll__viewport {
    height: auto !important;
    max-height: var(--sidebar-folder-tree-max-h);
}

#page-chat .sidebar-folder-scroll__content {
    min-height: min-content;
}

/* FileTree (Folders) — blend into sidebar, match Inbox row colors */
#page-chat .sidebar-file-tree {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-text-muted, #a1a1aa);
    font-family: var(--f-ui, inherit);
    overflow: visible;
    width: 100%;
}

#page-chat .sidebar-file-tree > div {
    overflow: visible;
    padding: 0;
}

#page-chat .sidebar-file-tree > div > div[class*="rounded-lg"] {
    border-radius: 4px;
}

#page-chat .sidebar-file-tree [role="treeitem"] {
    background: transparent !important;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    outline: none;
    box-shadow: none !important;
    z-index: 0;
}

/* Selected: white text only — no fill rectangle */
#page-chat .sidebar-file-tree [role="treeitem"][aria-selected="true"] {
    background: transparent !important;
    color: var(--theme-text, #f4f4f5);
}

#page-chat .sidebar-file-tree [role="treeitem"]:focus,
#page-chat .sidebar-file-tree [role="treeitem"]:focus-visible {
    outline: none;
    box-shadow: none !important;
}

#page-chat .sidebar-file-tree [role="treeitem"] svg {
    color: inherit;
}

#page-chat .sidebar-file-tree .file-tree-item-trailing {
    align-items: center;
    display: flex;
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    z-index: 30;
    pointer-events: auto;
}

#page-chat .sidebar-file-tree .file-tree-item-trailing:has(.folder-name-draft--overlay) {
    inset: 0;
    right: 0;
}

#page-chat .sidebar-file-tree .folder-name-draft {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 32px;
    min-width: 0;
    padding: 4px 8px;
    width: 100%;
}

#page-chat .sidebar-file-tree .folder-name-draft--overlay {
    background: var(--library-background, #202633);
    inset: 0;
    padding: 4px 8px;
    position: absolute;
    z-index: 1;
}

#page-chat .sidebar-file-tree .folder-name-draft__icon {
    color: var(--theme-text-muted, #71717a);
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

#page-chat .sidebar-file-tree .folder-name-draft__input {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--theme-text, #e4e4e7);
    flex: 1;
    font-family: var(--f-ui, inherit);
    font-size: 13px;
    font-weight: 500;
    height: 22px;
    line-height: 22px;
    min-width: 0;
    outline: none;
    padding: 0;
}

#page-chat .sidebar-file-tree .folder-name-draft__input::placeholder {
    color: var(--theme-text-muted, #71717a);
    font-weight: 500;
}

#page-chat .sidebar-file-tree .folder-name-draft__input:focus {
    color: var(--theme-text, #f4f4f5);
}

#page-chat .sidebar-file-tree .folder-item-actions {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: flex-end;
    /* Sized by its buttons: + only on Work / Personal; + rename delete on custom folders. */
    min-width: 24px;
    /* Always in the DOM: fades in on row hover / focus. Hidden = not clickable. */
    opacity: 0;
    pointer-events: none;
    position: relative;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    width: max-content;
}

#page-chat .sidebar-file-tree .file-tree-item-row:hover .folder-item-actions,
#page-chat .sidebar-file-tree .file-tree-item-row:focus-within .folder-item-actions,
#page-chat .sidebar-file-tree .folder-item-actions.is-confirming {
    opacity: 1;
    pointer-events: auto;
}

#page-chat .sidebar-file-tree .folder-item-actions__idle {
    align-items: center;
    display: flex;
    gap: 1px;
    justify-content: flex-end;
    transition:
        opacity 0.16s ease,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

#page-chat .sidebar-file-tree .folder-item-actions.is-confirming .folder-item-actions__idle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.88);
}

#page-chat .sidebar-file-tree .folder-item-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    /* Follows the actions group: off while it's faded out. */
    pointer-events: inherit;
    position: relative;
    transition:
        color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    width: 24px;
    z-index: 1;
}

#page-chat .sidebar-file-tree .folder-item-action:hover {
    background: transparent;
    color: var(--theme-text, #f4f4f5);
}

/* Chats inside folders: mini avatar + name (ChatSidebar FolderChatItem). */
#page-chat .sidebar-file-tree .folder-chat-avatar {
    align-items: center;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    flex: none;
    font-family: var(--f-ui, inherit);
    font-size: 8px;
    font-weight: 600;
    height: 18px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    width: 18px;
}

/* The chat open in the conversation window. */
#page-chat .sidebar-file-tree .is-folder-chat-active {
    color: var(--theme-text, #f4f4f5);
}

#page-chat .sidebar-file-tree .folder-item-action--add:hover {
    color: var(--theme-text, #f4f4f5);
}

/* Folder currently receiving chats: keep its actions visible and mark the row. */
/* (className lands on the row's button; actions are its sibling in the row.) */
#page-chat .sidebar-file-tree .file-tree-item-row:has(> .is-folder-picking) .folder-item-actions {
    opacity: 1;
    pointer-events: auto;
}

#page-chat .sidebar-file-tree .file-tree-item-row:has(> .is-folder-picking) .folder-item-action--add {
    color: var(--theme-text, #f4f4f5);
}

#page-chat .sidebar-file-tree .folder-item-action--danger:hover {
    background: transparent;
    color: var(--text-danger);
}

#page-chat .sidebar-file-tree .folder-item-action--confirm {
    background: color-mix(in srgb, var(--color-danger) 18%, transparent);
    border-radius: 999px;
    color: var(--text-danger);
    height: 24px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0.72);
    transform-origin: right center;
    transition:
        width 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.16s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.16s ease,
        color 0.16s ease,
        padding 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    width: 24px;
    z-index: 2;
}

#page-chat .sidebar-file-tree .folder-item-action--confirm .folder-item-action__check {
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.14s ease 0.06s,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}

#page-chat .sidebar-file-tree .folder-item-actions.is-confirming .folder-item-action--confirm {
    opacity: 1;
    padding: 0 10px;
    pointer-events: auto;
    transform: scale(1);
    width: 49px;
}

#page-chat .sidebar-file-tree .folder-item-actions.is-confirming .folder-item-action--confirm .folder-item-action__check {
    opacity: 1;
    transform: scale(1);
}

#page-chat .sidebar-file-tree .folder-item-action--confirm:hover {
    background: color-mix(in srgb, var(--color-danger) 28%, transparent);
    color: var(--danger-hover);
}

#page-chat .sidebar-file-tree [role="treeitem"].is-folder-renaming {
    opacity: 0;
    pointer-events: none;
}


/* =============================================================
   SECTION TITLE
   ============================================================= */

#page-chat .sidebar-library__kicker {
    color: var(--theme-text-muted, #71717a);
    font-family: var(--f-ui, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* Tighter to the section it labels */
    margin: 6px 8px 4px !important;
    padding-top: 0;
    text-transform: uppercase;
}

#page-chat .sidebar-library__kicker:first-child {
    margin-top: 0 !important;
}


/* =============================================================
   NODE
   ============================================================= */

#page-chat .library-node {
    display: flex;
    flex-direction: column;
    position: relative;
}


/* =============================================================
   ROW
   ============================================================= */

#page-chat .library-list {
    display: flex;
    flex-direction: column;
    position: relative;
}

#page-chat .library-list-highlight {
    background: color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-text, #fff) 8%, transparent)) 55%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-tint, #fff) 8%, transparent)) 45%,
        transparent
    );
    border-radius: 4px;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

#page-chat .library-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--theme-text-muted, #a1a1aa);
    cursor: pointer;
    display: flex;
    font-family: var(--f-ui, inherit);
    font-size: 13px;
    font-weight: 500;
    min-height: var(--library-row-height);
    padding: 0;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
}


/* =============================================================
   HOVER / ACTIVE
   ============================================================= */

/*
 * No background highlight.
 * State is communicated only through text/icon color.
 */

#page-chat .library-row:hover,
#page-chat .library-row.is-active {
    background: transparent;
    color: var(--theme-text, #f4f4f5);
}


/* =============================================================
   ROW BODY
   ============================================================= */

#page-chat .library-row__body {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 8px;
    min-height: var(--library-row-height);
    min-width: 0;

    /*
     * This is the only internal offset before the icon.
     */
    padding: 4px 8px 4px var(--library-row-icon-offset);

    position: relative;
    z-index: 4;
}


/* Icons inherit row state color */

#page-chat .library-row__body svg {
    color: inherit;
    flex-shrink: 0;
}


/* =============================================================
   LABEL
   ============================================================= */

#page-chat .library-row__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =============================================================
   COUNT
   ============================================================= */

#page-chat .library-row__count {
    color: var(--theme-text-muted, #71717a);
    flex-shrink: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}


/* =============================================================
   BRANCH
   ============================================================= */

/*
 * Every nesting level moves exactly 20px.
 *
 * level 0 → base
 * level 1 → +20px
 * level 2 → +40px
 *
 * No transforms.
 * No fractional coordinates.
 */

#page-chat .library-branch {
    margin: 0 0 0 var(--library-branch-indent);
    padding: 0;
    position: relative;
}


/* =============================================================
   DIRECT CHILDREN OF BRANCH
   ============================================================= */

/*
 * The connector occupies exactly 20px before the row body.
 */

#page-chat .library-branch > .library-node,
#page-chat .library-branch > .library-row {
    padding-left: var(--library-tree-gutter);
    position: relative;
}


/* =============================================================
   VERTICAL BRANCH LINE
   ============================================================= */

/*
 * Continuous vertical line for this nesting level.
 *
 * It is intentionally allowed to follow the complete branch.
 * The last-child mask below hides the part that would otherwise
 * continue underneath an expanded last node.
 */

#page-chat .library-branch::before {
    background: var(--library-tree);
    content: '';
    position: absolute;

    left: 0;
    top: 0;

    bottom: calc(
        var(--library-row-mid) +
        var(--library-tree-radius)
    );

    width: var(--library-tree-width);

    pointer-events: none;
    z-index: 2;
}


/* =============================================================
   ELBOW
   ============================================================= */

/*
 * Geometry:
 *
 *     │
 *     │
 *     └──────── 📁
 *
 * The horizontal segment reaches the row content boundary.
 */

#page-chat .library-branch > .library-node::before,
#page-chat .library-branch > .library-row::before {

    box-sizing: border-box;
    content: '';

    position: absolute;

    left: 0;

    top: calc(
        var(--library-row-mid) -
        var(--library-tree-radius)
    );

    width: var(--library-tree-gutter);
    height: var(--library-tree-radius);

    border-left:
        var(--library-tree-width)
        solid
        var(--library-tree);

    border-bottom:
        var(--library-tree-width)
        solid
        var(--library-tree);

    border-bottom-left-radius:
        var(--library-tree-radius);

    pointer-events: none;
    z-index: 3;
}


/* =============================================================
   STOP PARENT STEM AFTER LAST DIRECT CHILD
   ============================================================= */

/*
 * IMPORTANT:
 *
 * When the last folder is opened, its .library-node becomes
 * taller because it contains another .library-branch.
 *
 * The parent's ::before would therefore continue downward.
 *
 * This mask hides only the parent's vertical line below the
 * last direct row, while leaving the nested branch untouched.
 */

#page-chat .library-branch
    > .library-node:last-child::after,

#page-chat .library-branch
    > .library-row:last-child::after {

    background: var(--library-background);
    content: '';

    position: absolute;

    left: 0;
    top: var(--library-row-height);
    bottom: 0;

    width: var(--library-tree-width);

    pointer-events: none;
    z-index: 3;
}


/* =============================================================
   NEW FOLDER
   ============================================================= */

/*
 * New Folder is intentionally quieter than normal folders.
 * No block highlight.
 */

#page-chat .library-row--new {
    background: transparent;
    color: var(--theme-text-muted, #5f636c);
    width: fit-content;
    max-width: 100%;
}

#page-chat .library-row--new:hover {
    background: transparent;
    color: var(--theme-text-muted, #6b7079);
}


/*
 * New Folder body should not stretch across the sidebar.
 */

#page-chat .library-row--new .library-row__body {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
    background: transparent;
}


/*
 * Never restore a background on active New Folder.
 */

#page-chat .library-row--new.is-active {
    background: transparent;
    color: var(--theme-text-muted, #6b7079);
}

#page-chat .library-row--new.is-active .library-row__body {
    background: transparent;
}


/* =============================================================
   DRAFT
   ============================================================= */

#page-chat .library-row--draft {
    cursor: default;
}

#page-chat .library-row--draft:hover {
    background: transparent;
    color: var(--theme-text-muted, #a1a1aa);
}


/* =============================================================
   INPUT
   ============================================================= */

#page-chat .library-row__input {
    background: color-mix(
        in srgb,
        var(--theme-text, #fff) 6%,
        transparent
    );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-tint, #fff) 10%,
            transparent
        );

    border-radius: 8px;
    color: var(--theme-text, #f4f4f5);
    flex: 1;
    font: inherit;
    min-width: 0;
    outline: none;
    padding: 4px 8px;
}

#page-chat .library-row__input::placeholder {
    color: var(--theme-text-muted, #71717a);
}

#page-chat .library-row__input:focus {
    border-color:
        color-mix(
            in srgb,
            var(--theme-tint, #fff) 18%,
            transparent
        );
}

/* Empty sidebar welcome card (ChatSidebar.tsx). The slot is what motion folds
   (height/opacity); the card keeps its margins inside it. Colors follow the
   theme — on the dark themes that's white/5 fill, white/10 hairline, white CTA. */
#page-chat .nexa-welcome-banner-slot {
    flex-shrink: 0;
    overflow: hidden;
}

#page-chat .nexa-welcome-banner {
    background: var(--theme-card, #121212);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    box-shadow: var(--theme-card-shadow, none);
    display: flex;
    flex-direction: column;
    margin: 8px 10px 14px;
    padding: 14px;
}

#page-chat .nexa-welcome-banner.hidden {
    display: none;
}

#page-chat .nexa-welcome-banner__head {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

/* Same footprint as a chat-list avatar, filled with a wash of the accent. */
#page-chat .nexa-welcome-banner__avatar {
    align-items: center;
    background: color-mix(in srgb, var(--theme-pill, #ccff00) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-pill, #ccff00) 24%, transparent);
    border-radius: 50%;
    color: var(--theme-pill, #ccff00);
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

#page-chat .nexa-welcome-banner__avatar .ui-icon {
    height: 18px;
    width: 18px;
}

#page-chat .nexa-welcome-banner__copy {
    min-width: 0;
}

#page-chat .nexa-welcome-banner__title {
    color: var(--theme-text, #fff);
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 0 0 3px;
}

/* Status line, like "online" under a contact's name. */
#page-chat .nexa-welcome-banner__tagline {
    align-items: center;
    color: var(--theme-text-muted, #a3a3a3);
    display: flex;
    font-family: var(--f-ui);
    font-size: 12px;
    gap: 6px;
    line-height: 1.4;
    margin: 0;
}

#page-chat .nexa-welcome-banner__dot {
    background: var(--status-online, var(--theme-pill, #ccff00));
    border-radius: 50%;
    flex-shrink: 0;
    height: 6px;
    width: 6px;
}

/* Primary action wears the theme's active-pill fill (the tab pill, the send button's accent). */
#page-chat .nexa-welcome-banner__btn {
    align-items: center;
    background: var(--theme-pill, #ccff00);
    border: 0;
    border-radius: 999px;
    color: var(--theme-pill-text, #191b13);
    cursor: pointer;
    display: flex;
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    height: 38px;
    justify-content: center;
    padding: 0 16px;
    transition: filter 0.15s ease, transform 0.12s ease;
    width: 100%;
}

#page-chat .nexa-welcome-banner__btn:hover {
    filter: brightness(0.92);
}

#page-chat .nexa-welcome-banner__btn:active {
    transform: scale(0.985);
}

#page-chat .nexa-welcome-banner__btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-pill, #ccff00) 55%, transparent);
    outline-offset: 2px;
}

#page-chat .nexa-welcome-banner__btn .ui-icon {
    height: 15px;
    width: 15px;
}

#page-chat .nexa-welcome-banner__link {
    align-items: center;
    align-self: center;
    border-radius: 8px;
    color: var(--theme-text-muted, #a3a3a3);
    display: inline-flex;
    font-family: var(--f-ui);
    font-size: 12px;
    gap: 4px;
    margin-top: 10px;
    padding: 2px 6px;
    text-decoration: none;
    transition: color 0.15s ease;
}

#page-chat .nexa-welcome-banner__link:hover {
    color: var(--theme-text, #fff);
}

#page-chat .nexa-welcome-banner__link .ui-icon {
    height: 12px;
    width: 12px;
    transition: transform 0.2s ease;
}

#page-chat .nexa-welcome-banner__link:hover .ui-icon {
    transform: translateX(2px);
}

/* Section label rhythm */
.sidebar-label {
    color: var(--text-tertiary) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

#page-chat .sidebar-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    line-height: 1;
}

/* Leading search icon */
.contact-search-wrap {
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
    position: relative;
}

.contact-search-icon {
    color: var(--text-tertiary);
    height: 15px;
    left: calc(var(--space-2) + 7px);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    z-index: 1;
}

.contact-search-input {
    border-radius: var(--radius-md) !important;
    font-size: var(--text-meta) !important;
    padding: 7px 10px 7px 32px !important;
}

.nav-rail {
    padding: var(--space-4) 0;
    width: var(--layout-rail-w);
}

.sidebar {
    width: var(--layout-sidebar-w);
}

.rail-bottom {
    gap: var(--space-2);
}

/* ─── Loading skeletons (composited shimmer) ─── */
.skeleton {
    background: var(--card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.skeleton::after {
    animation: skeletonShimmer 1.4s var(--ease-out) infinite;
    background: linear-gradient(90deg, transparent, var(--row-hover), transparent);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
}

@keyframes skeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}

.contact-skeleton {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 10px 12px;
}

.skeleton-avatar {
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    height: 38px;
    width: 38px;
}

.skeleton-lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.skeleton-line {
    border-radius: var(--radius-pill);
    height: 9px;
}

.skeleton-line--name {
    width: 52%;
}

.skeleton-line--sub {
    width: 78%;
}

/* ─── Contact rows ─── */
#usersList {
    --users-list-gutter: 10px;
    border-top: 1px solid color-mix(in srgb, var(--theme-tint, #fff) 6%, transparent);
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px var(--users-list-gutter);
}

#page-chat #usersList {
    padding: 4px var(--users-list-gutter) 8px;
}

#page-chat #usersList .sidebar-scroll-blur {
    /* Bleed into #usersList horizontal padding so the active rail can sit on the edge */
    box-sizing: border-box;
    flex: 1;
    margin-left: calc(-1 * var(--users-list-gutter));
    margin-right: calc(-1 * var(--users-list-gutter));
    min-height: 0;
    width: calc(100% + 2 * var(--users-list-gutter));
}

#page-chat #usersList .sidebar-scroll-blur__content {
    display: flex;
    flex-direction: column;
    min-height: min-content;
}

#page-chat #usersList .contact-list {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min-content;
    width: 100%;
}

#page-chat #usersList .contact-list-highlight {
    background: color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-text, #fff) 8%, transparent)) 55%,
        transparent
    );
    border: 1px solid color-mix(
        in srgb,
        var(--color-accent, color-mix(in srgb, var(--theme-tint, #fff) 8%, transparent)) 45%,
        transparent
    );
    border-radius: 4px;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

#page-chat #usersList .contact-row {
    --contact-active-inset: 0px;
    margin-bottom: 4px;
    margin-left: calc(var(--users-list-gutter) + var(--contact-active-inset));
    margin-right: var(--users-list-gutter);
    padding: 9px 10px;
    position: relative;
    transition:
        margin-left 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        padding-left var(--pick-mode-duration) var(--pick-mode-ease);
    width: calc(100% - 2 * var(--users-list-gutter) - var(--contact-active-inset));
    z-index: 1;
}

#page-chat #usersList .contact-skeleton,
#page-chat #usersList .empty-state {
    margin-left: var(--users-list-gutter);
    margin-right: var(--users-list-gutter);
}

#usersList .contact-row {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    gap: var(--space-2);
    margin-bottom: 2px;
    overflow: visible;
    padding: 7px 8px;
    position: relative;
}

#usersList .contact-row:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Active — shrink toward the right; right edge stays put */
#page-chat #usersList .contact-row.is-active {
    --contact-active-inset: 8px;
}

#usersList .contact-row.is-active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--text);
}

#usersList .contact-row.is-active:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

#usersList .contact-row__rail {
    background: color-mix(in srgb, var(--dock-accent, #afb9cd) 52%, transparent);
    border-radius: 0 5px 5px 0;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--dock-accent, #afb9cd) 28%, transparent),
        0 0 16px color-mix(in srgb, var(--dock-accent, #afb9cd) 12%, transparent);
    height: 58%;
    /* Track the row’s left inset so the rail stays on the list edge */
    left: calc(-1 * var(--users-list-gutter, 10px) - var(--contact-active-inset, 0px));
    max-height: 28px;
    min-height: 18px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform-origin: center center;
    transition: left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    width: 5px;
    z-index: 2;
}

#usersList .contact-row.is-active .contact-name {
    color: var(--theme-text, #f4f4f5);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    #page-chat #usersList .contact-row,
    #usersList .contact-row__rail {
        transition: none;
    }
}

#usersList .contact-avatar {
    border-radius: var(--radius-pill);
    font-size: 15px;
    height: 42px;
    width: 42px;
}

/* Desktop list: a touch more room between the bigger avatar (+ its arc) and
   the name / preview column (mobile keeps its own sizing, mobile-chat.css) */
#page-chat:not(.is-viewport-app-stack) #usersList .contact-row {
    gap: 12px;
}

/* Chat list item hierarchy */
.contact-name-row {
    align-items: baseline;
    display: flex;
    gap: 6px;
    min-width: 0;
}

#usersList .contact-name {
    color: var(--text);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-snug);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-handle {
    color: var(--text-tertiary);
    flex-shrink: 0;
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
}

.contact-preview-row {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.contact-preview-row .contact-subtitle {
    flex: 1;
    min-width: 0;
}

.contact-preview-row .contact-presence {
    flex-shrink: 0;
}

#usersList .contact-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-meta);
    margin-top: 1px;
}

/* ── Presence arc around avatars (chat list, chat header) ─────────────────────
   A 2px SVG stroke (StatusArc.tsx) just outside the avatar, 7:30 → 10:30,
   with round caps. No arc when online status is hidden (no data-status).
   Online, everywhere: the theme accent — the same token as the left sidebar's
   active tab pill (--active-pill-bg: #005218 Emerald, #8DC400 Lime, #C7FF00
   Neon), so list and header always match. Offline: quiet grey in the list,
   contrast red in the header. */
:root {
    --status-online: var(--active-pill-bg, #ccff00);
    --status-online-glow: color-mix(in srgb, var(--status-online) 40%, transparent);
    --status-offline: rgba(255, 255, 255, 0.2);
    --status-header-offline: #ef4444;
}

/* A white-alpha grey vanishes on white: dark-alpha on the light themes */
html[data-theme^="light"] {
    --status-offline: rgba(0, 0, 0, 0.18);
}

.avatar-status {
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
}

.avatar-status__arc {
    display: none;
    fill: none;
    height: calc(100% + 6px);
    inset: -3px;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    width: calc(100% + 6px);
    z-index: 1;
}

.avatar-status[data-status] .avatar-status__arc {
    display: block;
}

/* Round caps: the arc's ends are soft instead of knife-edge points */
.avatar-status__arc path {
    stroke: var(--arc-color);
    stroke-linecap: round;
    stroke-width: 2px;
    transition: stroke 0.25s ease;
    vector-effect: non-scaling-stroke;
}

.avatar-status[data-status="online"] {
    --arc-color: var(--status-online);
}

.avatar-status[data-status="online"] .avatar-status__arc {
    filter: drop-shadow(0 0 4px var(--status-online-glow));
}

.avatar-status[data-status="offline"] {
    --arc-color: var(--status-offline);
}

/* Chat header: online is the shared accent arc above; offline is a clear red */
.avatar-status--header[data-status="offline"] {
    --arc-color: var(--status-header-offline);
}

/* Presence dot (the .contact-presence element is the dot) */
.contact-presence {
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.contact-presence.is-online {
    background: var(--green);
    box-shadow: 0 0 0 3px var(--green-10);
}

.contact-presence.is-offline {
    background: var(--text-tertiary);
    box-shadow: none;
    opacity: 0.4;
}

/* Unread count badge. Fixed high-contrast pairs, not theme text on the theme
   accent (white on lime / dark on dark green — the digits disappeared):
   dark themes → lime with black, light themes → deep slate with white. */
.contact-unread {
    align-items: center;
    background-color: #CCFF00;
    border-radius: 9999px;
    color: #000000 !important;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    height: 20px;
    justify-content: center;
    line-height: 1;
    min-width: 20px;
    padding: 0 6px;
}

html[data-theme^="light"] .contact-unread {
    background-color: #0F172A;
    color: #FFFFFF !important;
    font-weight: 600;
}

.contact-search-wrap {
    border-bottom: none;
}

/* ─── Sidebar footer — compact user chip + icon actions ─── */
.sidebar-foot {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
    padding: var(--space-2);
}

.sidebar-user-chip {
    align-items: center;
    background: var(--row-hover);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
    padding: 5px 8px 5px 5px;
    text-align: left;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.sidebar-user-chip:hover {
    background: var(--surface);
    border-color: var(--border-subtle);
}

.sidebar-user-chip__av {
    align-items: center;
    background: var(--accent-10);
    border-radius: var(--radius-pill);
    color: var(--accent);
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.sidebar-user-chip__av .ui-icon {
    height: 15px;
    width: 15px;
}

.sidebar-user-chip__meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.sidebar-user-chip .account-name {
    color: var(--text);
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-chip .account-sub {
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-foot-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

.foot-icon-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    transition:
        background var(--duration-fast) ease,
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease;
    width: 30px;
}

.foot-icon-btn .ui-icon {
    height: 15px;
    width: 15px;
}

.foot-icon-btn:hover {
    background: var(--row-hover);
    color: var(--text);
}

.foot-icon-btn--danger:hover {
    background: var(--red-10);
    color: var(--text-danger);
}

/* ─── Empty / subtitle typography (no Tailwind) ─── */
.header-sub {
    color: var(--text-tertiary);
    font-family: var(--f-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: var(--leading-tight);
    margin-top: 3px;
    text-transform: none;
}

.contact-subtitle {
    color: var(--text-secondary);
    font-family: var(--f-ui);
    font-size: var(--text-xs);
    letter-spacing: 0;
    line-height: var(--leading-tight);
    margin-top: var(--space-1);
    text-transform: none;
}

.contact-subtitle {
    font-family: inherit;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: none;
}

.contact-subtitle.is-typing {
    color: var(--accent);
}

.contact-subtitle.is-muted {
    color: var(--text-secondary);
    font-style: italic;
}

.contact-presence.presence-neutral .presence-dot {
    background: var(--text-secondary);
    opacity: 0.35;
}

.typing-dots {
    align-items: center;
    display: inline-flex;
    gap: 3px;
}

.typing-dots span {
    animation: typingBounce 1.2s ease-in-out infinite;
    background: var(--text-secondary);
    border-radius: 50%;
    height: 4px;
    width: 4px;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typingBounce {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.overlay-popover-actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.overlay-popover-meta dd {
    font-family: var(--f-mono);
    font-size: 11px;
    word-break: break-all;
}

@media (max-width: 760px) {
    :root {
        --layout-sidebar-w: 200px;
        --layout-gutter-x: 14px;
        --layout-header-h: 52px;
    }

    .message-row--own .message-content-wrap {
        margin-left: 36px;
    }

    .message-row--other .message-content-wrap {
        margin-right: 36px;
    }

    #page-chat .chat-main > .input-bar {
        --composer-float-offset: 88px;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        left: 16px;
        margin-inline: 0;
        max-width: none;
        padding: 0;
        right: 64px;
        transform: none;
        width: auto;
    }

    #messages {
        padding-bottom: calc(var(--composer-float-offset, 88px) + var(--space-5));
    }

    .message-search-panel {
        margin-top: var(--space-2);
        width: calc(100% - var(--space-4) * 2);
    }

    .sidebar-brand-name {
        display: none;
    }

    .sidebar-brand {
        gap: var(--space-1);
        justify-content: space-between;
    }
}

@media (max-width: 520px) {
    :root {
        --layout-gutter-x: 12px;
    }

    #page-chat:not(.is-viewport-app-stack) .nav-rail {
        width: 56px;
    }

    #page-chat .sidebar.is-collapsed {
        border-right-color: transparent;
        min-width: 0;
        padding-top: 0;
        width: 0;
    }

    #page-chat .sidebar > * {
        min-width: var(--nexa-aside-start-w, 288px);
    }

    .sidebar-brand .e2e-chip {
        display: none;
    }

    .sidebar-user-chip .account-sub {
        display: none;
    }

    #usersList .contact-row {
        padding: 8px 10px;
    }
}

/* Message actions: frosted card only — never blur/dim the rest of the chat. */
#ui-overlay-root > .overlay-surface.overlay-surface--message-actions,
#ui-overlay-root > .overlay-surface.overlay-surface--message-actions.is-visible,
#ui-overlay-root > .overlay-surface.overlay-surface--message-actions.is-closing {
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    background: color-mix(in srgb, var(--theme-section, #121212) 58%, transparent);
    border-color: color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent);
    border-radius: 22px;
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #ffffff) 6%, transparent);
    max-width: min(360px, calc(100vw - 32px));
    overflow: visible;
    transform: none;
    width: min(360px, calc(100vw - 32px));
}

/* ── Add chats to folder: dock-slot bar + pickable chat rows (ChatSidebar.tsx) ──
   While picking, the bar takes the dock's place (same cell; the tabs stay
   mounted underneath, hidden and inert). */
#page-chat .sidebar-dock-bar__stack {
    display: grid;
    justify-content: inherit;
    width: 100%;
}

#page-chat .sidebar-dock-bar__nav {
    display: flex;
    grid-area: 1 / 1;
    justify-content: inherit;
    min-width: 0;
}

#page-chat .sidebar-dock-bar[data-mode="pick"] .sidebar-dock-bar__nav {
    pointer-events: none;
}

/* Frosted single-row bar in the dock's slot:
   [ Add to <folder> · N selected ]            [ Cancel ] ( Save ) */
#page-chat .folder-pick-bar {
    align-items: center;
    align-self: center;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    background: color-mix(in srgb, var(--nexa-aside-fill, #161920) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent);
    border-radius: var(--expandable-tabs-radius, 18px);
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #ffffff) 5%, transparent);
    box-sizing: border-box;
    /* Lets the info side react to the bar's own width (narrow sidebars). */
    container-type: inline-size;
    display: flex;
    gap: 12px;
    grid-area: 1 / 1;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 14px;
    width: 100%;
    z-index: 1;
}

/* Left: shrinks and clips — never runs under the buttons. */
#page-chat .folder-pick-bar__info {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    font-size: 12.5px;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

#page-chat .folder-pick-bar__prefix {
    color: var(--text-secondary, var(--theme-text-muted, #a1a1aa));
    flex: none;
    opacity: 0.75;
}

/* Only the folder name gives way on long names. */
#page-chat .folder-pick-bar__name {
    color: var(--text, var(--theme-text, #f4f4f5));
    flex: 0 1 auto;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selected count as a small badge: "(2)". */
#page-chat .folder-pick-bar__count {
    align-items: center;
    background: color-mix(in srgb, var(--theme-text, #ffffff) 12%, transparent);
    border-radius: 999px;
    color: var(--text, var(--theme-text, #f4f4f5));
    display: inline-flex;
    flex: none;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

#page-chat .folder-pick-bar__count[data-empty] {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 6%, transparent);
    color: var(--text-tertiary, var(--theme-text-muted, #71717a));
}

/* Narrow bar: drop "Add to", keep "<folder> (N)". */
@container (max-width: 280px) {
    #page-chat .folder-pick-bar__prefix {
        display: none;
    }
}

/* Right: fixed, never shrinks. */
#page-chat .folder-pick-bar__actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

#page-chat .folder-pick-bar__btn {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 14px;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
    white-space: nowrap;
}

#page-chat .folder-pick-bar__btn--cancel {
    background: transparent;
    color: var(--text-secondary, var(--theme-text-muted, #a1a1aa));
    padding-inline: 4px;
}

#page-chat .folder-pick-bar__btn--cancel:hover {
    color: var(--text, var(--theme-text, #f4f4f5));
}

#page-chat .folder-pick-bar__btn--save {
    background: color-mix(in srgb, var(--theme-text, #fff) 90%, transparent);
    color: var(--bg, var(--theme-bg, #0a0a0a));
}

#page-chat .folder-pick-bar__btn--save:hover {
    background: var(--theme-text, #fff);
}

#page-chat .folder-pick-bar__btn:active {
    transform: scale(0.96);
}

#page-chat .folder-pick-bar__btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-tint, #fff) 45%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-transparency: reduce) {
    #page-chat .folder-pick-bar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--nexa-aside-fill, #161920);
    }
}

/* Pick mode ("add chats to folder"): one duration + curve for everything —
   rows, checks, and the dock ↔ pick bar swap (PICK_MODE_TRANSITION in JS). */
#page-chat {
    --pick-mode-duration: 240ms;
    --pick-mode-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Room the check takes at the row's start: 20px circle + 10px gap. */
    --pick-mode-room: 30px;
}

/* The row's own padding opens the room (real layout, so names / previews keep
   ellipsizing correctly as it moves). */
#page-chat #usersList .contact-row.is-pickable {
    padding-left: calc(10px + var(--pick-mode-room));
}

/* The check: always mounted, parked at the row's start; eases in with the room. */
#page-chat #usersList .contact-row__pick {
    align-items: center;
    border: 1.5px solid color-mix(in srgb, var(--theme-tint, #fff) 22%, transparent);
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    left: 10px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-10px) scale(0.6);
    transition:
        opacity 0.2s ease,
        transform var(--pick-mode-duration) var(--pick-mode-ease),
        background-color 0.16s ease,
        border-color 0.16s ease;
    width: 20px;
    z-index: 1;
}

#page-chat #usersList .contact-row.is-pickable .contact-row__pick {
    opacity: 1;
    transform: translateY(-50%);
}

#page-chat #usersList .contact-row.is-picked .contact-row__pick {
    background: var(--color-brand, #afb9cd);
    border-color: var(--color-brand, #afb9cd);
}

#page-chat #usersList .contact-row__pick-mark {
    color: var(--bg, var(--theme-bg, #0a0a0a));
    display: inline-flex;
}

/* Time and unread badge step back (fade, no reflow) while picking. */
#page-chat #usersList .contact-row .contact-time,
#page-chat #usersList .contact-row .contact-unread {
    transition:
        opacity 0.2s ease,
        transform var(--pick-mode-duration) var(--pick-mode-ease);
}

#page-chat #usersList .contact-row.is-pickable .contact-time {
    opacity: 0;
}

#page-chat #usersList .contact-row.is-pickable .contact-unread {
    opacity: 0;
    transform: scale(0.6);
}

@media (prefers-reduced-motion: reduce) {
    #page-chat #usersList .contact-row,
    #page-chat #usersList .contact-row__pick,
    #page-chat #usersList .contact-row .contact-time,
    #page-chat #usersList .contact-row .contact-unread {
        transition: none;
    }
}