/* ELV Messenger design system — Elevated Technologies company presentation.
   Presentation only: message content, security state, encryption UI, and every
   Element control keep their markup and behaviour. This sheet is unlayered so it
   wins over Element's cascade layers without !important. Element-owned surfaces
   are restyled, never removed, with one exception: the rail's Threads entry.
   Meetings takes its place on the rail, and threads stay one click away in
   every conversation's own header. */

/* ---------------------------------------------------------------- tokens */
:root, .cpd-theme-light {
    --elv-navy: #183b64;
    --elv-navy-deep: #0f1b2d;
    --elv-action: #183b64;
    --elv-action-hover: #102f52;
    --elv-red: #d81f2a;
    --elv-red-deep: #ad191f;
    --elv-red-soft: #fdeaec;
    --elv-red-soft-line: #f6c9cd;
    --elv-ai: #178a52;
    --elv-ai-text: #0f6b3f;
    --elv-ai-soft: #eef8f2;
    --elv-ai-line: #cfe9d9;
    --elv-online: #16a34a;
    --elv-canvas: #ffffff;
    --elv-sidebar: #f7f8fa;
    --elv-surface: #ffffff;
    --elv-surface-2: #f1f4f8;
    --elv-pill: #eef2f7;
    --elv-pill-hover: #e3e9f1;
    --elv-glass: rgb(250 252 255 / 86%);
    --elv-border: #d9e1eb;
    --elv-border-soft: #e6ecf3;
    --elv-ink: #172b45;
    --elv-muted: #576980;
    --elv-selected: #eaf0f8;
    --elv-shadow: 0 6px 22px rgb(24 59 100 / 7%);
    --elv-shadow-card: none;
    --elv-rail-bg: #0f1b2d;
    --elv-rail-bg-top: #131f33;
    --elv-rail-ink: rgb(226 234 246 / 92%);
    --elv-rail-muted: rgb(190 203 222 / 72%);
    --elv-rail-hover: rgb(255 255 255 / 10%);
    --elv-rail-active: rgb(255 255 255 / 18%);
    --elv-rail-active-hover: rgb(255 255 255 / 24%);
    --elv-rail-line: rgb(255 255 255 / 10%);
    --elv-rail-width: 64px;
    --elv-rail-tile-width: 60px;
    --elv-rail-tile-height: 68px;
    --elv-rail-tile-gap: 2px;
    --elv-rail-glyph-box: 50px;
    --elv-rail-glyph-radius: 14px;
    --elv-rail-icon: 34px;
    --elv-reading-width: 1040px;
    --elv-radius-sm: 10px;
    --elv-radius: 14px;
    --elv-radius-lg: 18px;
    --elv-font: var(--cpd-font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --elv-focus: 0 0 0 3px rgb(24 59 100 / 24%);
}
.cpd-theme-dark {
    --elv-navy: #a8c9f5;
    --elv-navy-deep: #0b1220;
    --elv-action: #315e91;
    --elv-action-hover: #3c71a9;
    --elv-red: #f0525b;
    --elv-red-deep: #f58d94;
    --elv-red-soft: #3a1f24;
    --elv-red-soft-line: #5a2b31;
    --elv-ai: #4cc487;
    --elv-ai-text: #7fdcac;
    --elv-ai-soft: #17291f;
    --elv-ai-line: #27473a;
    --elv-canvas: #101824;
    --elv-sidebar: #141d2b;
    --elv-surface: #182332;
    --elv-surface-2: #1e2a3b;
    --elv-pill: #223043;
    --elv-pill-hover: #2b3b52;
    --elv-glass: rgb(25 37 54 / 92%);
    --elv-border: #2f3f56;
    --elv-border-soft: #26344a;
    --elv-ink: #e7eef8;
    --elv-muted: #afbdd0;
    --elv-selected: #293e5b;
    --elv-shadow: 0 6px 22px rgb(0 0 0 / 16%);
    --elv-shadow-card: 0 1px 2px rgb(0 0 0 / 18%), 0 6px 18px rgb(0 0 0 / 14%);
    --elv-rail-bg: #0b1220;
    --elv-rail-bg-top: #0e1728;
    --elv-focus: 0 0 0 3px rgb(168 201 245 / 36%);
}

/* ------------------------------------------------------------- foundation */
.mx_MatrixChat { font-family: var(--elv-font); background: var(--elv-canvas); }
body:not(.cpd-theme-light-hc):not(.cpd-theme-dark-hc) :is(.mx_MatrixChat, .mx_RoomView, .mx_RoomView_body, .mx_HomePage) {
    background-color: var(--elv-canvas);
}
.mx_MatrixChat :focus-visible { outline: 2px solid var(--elv-navy); outline-offset: 2px; }

/* ------------------------------------------------------- application rail */
.mx_SpacePanel, .mx_SpacePanel.collapsed {
    box-sizing: border-box;
    width: var(--elv-rail-width);
    min-width: var(--elv-rail-width);
    align-items: center;
    padding: 12px 0 8px;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    border-right: 0;
    background: linear-gradient(180deg, var(--elv-rail-bg-top), var(--elv-rail-bg) 140px);
    color: var(--elv-rail-ink);
    --activeBackground-color: transparent;
    --activeBorder-color: transparent;
    --activeBorder-transparent-gap: 0px;
}
body.elv-native-mac .mx_SpacePanel { padding-top: 44px; }
.mx_SpacePanel > * { order: 5; }
.mx_SpacePanel > .elv-rail-brand { order: 0; }
.mx_SpacePanel > .mx_SpacePanel_toggleCollapse { order: 1; }
.mx_SpacePanel > .mx_AutoHideScrollbar, .mx_SpacePanel > .mx_SpaceTreeLevel { order: 2; flex: 0 0 auto; width: 100%; overflow: visible; padding: 0; }
.mx_SpacePanel > .elv-rail-nav { order: 3; }
.mx_SpacePanel > .mx_ThreadsActivityCentre_container { order: 6; }
/* Meetings replaces Threads on the rail (owner direction, 2026-09-29). */
.mx_SpacePanel > .mx_ThreadsActivityCentre_container { display: none; }
.mx_SpacePanel > .mx_UserMenu { order: 9; margin-top: auto; width: 100%; }

.elv-rail-brand {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--elv-rail-glyph-box);
    height: var(--elv-rail-glyph-box);
    margin: 0 auto 8px;
    border-radius: var(--elv-rail-glyph-radius);
    background: var(--elv-navy-deep);
    box-shadow: 0 0 0 1px var(--elv-rail-line), 0 6px 16px rgb(0 0 0 / 28%);
}
/* The mark is drawn at the same size as every other rail glyph. */
.elv-rail-brand svg { width: var(--elv-rail-icon); height: var(--elv-rail-icon); }

/* ------------------------------------------------------------- rail tiles
   Nine entries reach this rail from three different places: Element's own
   space buttons, the ELV navigation, Element's Threads button and the user
   menu. Left alone they arrive at three heights, two glyph sizes and three
   hover treatments — one of them Element's grey, which is far brighter than
   this rail and lands on a box that is not the tile.

   So every entry is given the same box: a fixed width and height, so the
   column keeps one pitch, and the glyph in a centred pill. That pill is the
   ONLY surface hover and the current state tint, which is what makes the
   highlight the same size, the same shape and in the same place on all of
   them — and small enough not to read as a slab. */
.elv-rail-nav { display: flex; flex-direction: column; align-items: center; gap: var(--elv-rail-tile-gap); width: 100%; padding: 0; }
.elv-rail-item,
.mx_SpacePanel .mx_SpaceButton,
.mx_SpacePanel .mx_ThreadsActivityCentreButton,
.mx_SpacePanel .mx_ThreadsActivityCentreButton.expanded,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: var(--elv-rail-tile-width);
    height: var(--elv-rail-tile-height);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--elv-rail-glyph-radius);
    background: transparent;
    color: var(--elv-rail-muted);
    font: 600 10.5px/1.15 var(--elv-font);
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease;
}
/* Element writes its own labels; ours are real elements. Same line either way. */
.elv-rail-item > span:not(.elv-rail-badge),
.mx_SpacePanel .mx_SpaceButton::after,
.mx_SpacePanel .mx_ThreadsActivityCentreButton::after,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"]::after {
    display: block;
    max-width: var(--elv-rail-tile-width);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 600 10.5px/1.15 var(--elv-font);
    color: inherit;
}
.mx_SpacePanel .mx_SpaceButton::after { content: attr(aria-label); }
.mx_SpacePanel .mx_ThreadsActivityCentreButton::after { content: "Threads"; }
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"]::after { content: "You"; }

/* The pill: one box, one radius, one glyph size, whatever drew the icon. */
.elv-rail-item > svg,
.elv-rail-item > .elv-rail-glyph,
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon,
.mx_SpacePanel .mx_ThreadsActivityCentreButton > div,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"] > div {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--elv-rail-glyph-box);
    height: var(--elv-rail-glyph-box);
    padding: calc((var(--elv-rail-glyph-box) - var(--elv-rail-icon)) / 2);
    border-radius: var(--elv-rail-glyph-radius);
    background: transparent;
    color: var(--elv-rail-ink);
    transition: background-color 0.15s ease;
}
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon,
.mx_SpacePanel .mx_ThreadsActivityCentreButton > div,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"] > div { display: grid; place-items: center; }
.elv-rail-item > svg, .elv-rail-item > .elv-rail-glyph { display: block; }
/* Icons that arrive inside a wrapper are sized here; ours are the pill itself. */
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon svg,
.mx_SpacePanel .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton_Icon {
    box-sizing: border-box;
    width: var(--elv-rail-icon);
    height: var(--elv-rail-icon);
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--elv-rail-ink);
    fill: currentColor;
}

.elv-rail-item:hover,
.mx_SpacePanel .mx_SpaceButton:hover,
.mx_SpacePanel .mx_ThreadsActivityCentreButton:hover,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"]:hover { color: var(--elv-rail-ink); }
.elv-rail-item:hover > svg,
.elv-rail-item:hover > .elv-rail-glyph,
.mx_SpacePanel .mx_SpaceButton:hover .mx_SpaceButton_icon,
.mx_SpacePanel .mx_ThreadsActivityCentreButton:hover > div,
.mx_SpacePanel .mx_UserMenu button[aria-label="User menu"]:hover > div { background: var(--elv-rail-hover); }

.elv-rail-item[aria-pressed="true"],
.elv-rail-item[aria-current="page"],
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:hover { color: #ffffff; }
.elv-rail-item[aria-pressed="true"] > svg,
.elv-rail-item[aria-current="page"] > svg,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_SpaceButton_icon {
    background: var(--elv-rail-active);
    color: #ffffff;
    box-shadow: none;
}
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_SpaceButton_icon svg { color: #ffffff; }
.elv-rail-item[aria-pressed="true"]:hover > svg,
.elv-rail-item[aria-current="page"]:hover > svg,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:hover .mx_SpaceButton_icon { background: var(--elv-rail-active-hover); }

.elv-rail-item[aria-disabled="true"] { color: rgb(190 203 222 / 40%); cursor: default; }
.elv-rail-item[aria-disabled="true"] > svg { color: rgb(226 234 246 / 40%); }
.elv-rail-item[aria-disabled="true"]:hover > svg { background: transparent; }
/* Status dots sit on the pill's top-right corner, not the tile's. */
.elv-rail-item .elv-rail-badge {
    position: absolute;
    top: calc((var(--elv-rail-tile-height) - var(--elv-rail-glyph-box)) / 2);
    right: calc((var(--elv-rail-tile-width) - var(--elv-rail-glyph-box)) / 2);
    min-width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--elv-online);
    box-shadow: 0 0 0 2px var(--elv-rail-bg);
}

/* Element's own space buttons (Home, spaces, create) become rail tiles */
.mx_SpacePanel .mx_SpaceTreeLevel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--elv-rail-tile-gap);
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mx_SpacePanel .mx_SpaceItem { width: 100%; margin: 0; padding: 0; list-style: none; }
.mx_SpacePanel .mx_SpaceItem > .mx_SpaceButton { margin: 0 auto; }
.mx_SpacePanel .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--elv-rail-glyph-radius);
}
.mx_SpacePanel .mx_SpaceButton_avatarWrapper { border-radius: var(--elv-rail-glyph-radius); }
.mx_SpacePanel .mx_SpaceButton_avatarWrapper .mx_BaseAvatar { border-radius: var(--elv-rail-glyph-radius); }
.mx_SpacePanel .mx_SpacePanel_notificationBadge { box-shadow: 0 0 0 2px var(--elv-rail-bg); }
.mx_SpacePanel .mx_SpaceButton_menuButton { position: absolute; top: 4px; right: 2px; margin: 0; }
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
    top: 18px;
    right: -9px;
    background: var(--elv-surface);
    border: 1px solid var(--elv-border);
    color: var(--elv-ink);
    box-shadow: var(--elv-shadow);
}

.mx_SpacePanel .mx_ThreadsActivityCentre_container { margin: 0 auto; }
/* Element paints $quaternary-content over the Threads button AND its glyph on
   hover. That grey belongs to a light panel; on this rail it is the loudest
   thing on screen, and it lands on the icon box rather than the tile, so the
   caption hangs outside it.

   It is declared !important inside Element's `app-web` cascade layer, and an
   unlayered !important loses to a layered one however specific it is — so
   these overrides join that layer and win on specificity instead. Everything
   else on the rail stays unlayered, where a normal declaration already beats
   the whole bundle. */
@layer app-web {
    .mx_SpacePanel .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton,
    .mx_SpacePanel .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton.expanded {
        border-radius: var(--elv-rail-glyph-radius) !important;
        background: transparent !important;
    }
    .mx_SpacePanel .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton:hover,
    .mx_SpacePanel .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton:hover .mx_ThreadsActivityCentreButton_Icon {
        background: transparent !important;
    }
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton > div[data-indicator]::before {
    inline-size: 10px;
    block-size: 10px;
    inset-block-start: 0;
    inset-inline-end: 0;
    border: 0;
    box-shadow: 0 0 0 2px var(--elv-rail-bg);
}
.mx_SpacePanel .mx_ThreadsActivityCentre_notificationBadge { box-shadow: 0 0 0 2px var(--elv-rail-bg); }

.mx_SpacePanel .mx_UserMenu { padding: 0; display: flex; justify-content: center; }
.mx_SpacePanel .mx_UserMenu img { border-radius: 50%; }
.mx_SpacePanel [data-elv-presence] { box-shadow: 0 0 0 2px var(--elv-status-color), 0 0 0 4px var(--elv-rail-bg) !important; }

/* ---------------------------------------------------- conversation sidebar */
.mx_LeftPanel_outerWrapper, .mx_LeftPanel_wrapper, .mx_LeftPanel, .mx_LeftPanel_roomListContainer, .mx_RoomListPanel {
    background: var(--elv-sidebar);
}
.mx_LeftPanel { border-inline-end: 1px solid var(--elv-border-soft); }
.mx_LeftPanel_roomListContainer { display: flex; flex-direction: column; min-height: 0; }
.mx_LeftPanel_wrapper .mx_Separator { background: transparent; }
/* Collapsed conversation list: the divider becomes a visible column in the sidebar's own colour, with the
   button that reopens the list at its top, level with the conversation header beside it. */
.mx_Separator[data-separator-type="bar"] {
    background: var(--elv-sidebar);
    border-right: 1px solid var(--elv-border-soft);
    color: var(--elv-muted);
}
.mx_Separator[data-separator-type="bar"][data-separator="hover"],
.mx_Separator[data-separator-type="bar"]:focus-visible { background: var(--elv-pill); }
.mx_Separator[data-separator-type="bar"] button {
    border: 1px solid var(--elv-border);
    border-radius: 10px;
    background: var(--elv-surface);
    color: var(--elv-navy);
    box-shadow: var(--elv-shadow);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.mx_Separator[data-separator-type="bar"] button:hover,
.mx_Separator[data-separator-type="bar"] button:focus-visible {
    border-color: var(--elv-action);
    background: var(--elv-action);
    color: #ffffff;
}
.mx_RoomListPanel { display: flex; flex-direction: column; height: auto; flex: 1 1 auto; min-height: 0; }
.elv-version-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    margin: 0;
    padding: 7px 16px 9px;
    border: 0;
    border-top: 1px solid var(--elv-border-soft);
    background: var(--elv-sidebar);
    color: var(--elv-muted);
    font: 500 10.5px/1.3 var(--elv-font);
    text-align: start;
    cursor: pointer;
}
.elv-version-footer:disabled { cursor: default; }
.elv-version-footer:not(:disabled):hover { background: var(--elv-pill); color: var(--elv-ink); }
.elv-version-footer strong { font-weight: 650; color: var(--elv-ink); }
.elv-version-footer span:empty, .elv-version-footer em:empty { display: contents; }
/* The installed app and the client it is showing are released separately. */
.elv-version-footer em { display: block; font-style: normal; font-weight: 500; color: var(--elv-muted); }
.elv-version-footer[data-phase="available"] { background: var(--elv-ai-soft); border-top-color: var(--elv-ai-line); }
.elv-version-footer[data-phase="available"] strong { color: var(--elv-ai-text); }
.elv-version-footer[data-phase="available"] strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 50%; background: var(--elv-online); vertical-align: 1px; }
.elv-version-footer[data-phase="available"]:hover { background: var(--elv-ai-line); }
.mx_RoomListPanel > [data-testid="room-list-header"] { order: 0; }
.mx_RoomListPanel > .elv-company-panel { order: 1; }
.mx_RoomListPanel > [data-testid="room-list-search"] { order: 2; padding: 0 14px 8px; gap: 8px; }
.mx_RoomListPanel > div:has(> [data-testid="primary-filters"]) { order: 3; }
.mx_RoomListPanel > div:has([data-testid="room-list"]) { order: 4; flex: 1 1 auto; min-height: 0; }

/* Availability is a compact second line below Messages and New conversation. */
.elv-company-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 16px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--elv-ink);
}
/* Availability reads as its own word beside the dot, never as the colour alone. */
.elv-company-panel .elv-status-select {
    -webkit-appearance: none;
    appearance: none;
    min-height: 34px;
    padding-inline: 28px 24px;
    border: 1px solid var(--elv-border);
    border-radius: 999px;
    background-color: var(--elv-surface);
    color: var(--elv-ink);
    font: 600 12.5px/1.2 var(--elv-font);
    box-shadow: var(--elv-shadow-card);
    background-image:
        radial-gradient(circle, var(--elv-status-color, #92979f) 45%, transparent 50%),
        linear-gradient(45deg, transparent 50%, var(--elv-muted) 50%),
        linear-gradient(135deg, var(--elv-muted) 50%, transparent 50%);
    background-position: 11px center, calc(100% - 15px) 55%, calc(100% - 10px) 55%;
    background-size: 12px 12px, 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.elv-company-panel .elv-status-select:hover { background-color: var(--elv-surface-2); }
.elv-company-panel .elv-status-select option { color: var(--elv-ink); background: var(--elv-surface); }
.elv-company-panel .elv-status-select[data-elv-status="online"] { --elv-status-color: var(--elv-online); }
.elv-company-panel .elv-status-select[data-elv-status="busy"] { --elv-status-color: #d9343a; }
.elv-company-panel .elv-status-select[data-elv-status="in_call"] { --elv-status-color: #ea580c; }
.elv-company-panel .elv-status-select[data-elv-status="invisible"] { --elv-status-color: #92979f; }
.elv-company-error { flex-basis: 100%; margin-top: 6px; font-size: 12px; color: var(--elv-red-deep); }
.elv-company-error:empty { margin: 0; }

/* search */
.mx_RoomListPanel [data-testid="room-list-search"] > button:not(#room-list-search-button) {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--elv-radius);
    border: 1px solid var(--elv-border);
    background: var(--elv-surface);
    color: var(--elv-muted);
    box-shadow: var(--elv-shadow-card);
}
#room-list-search-button {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--elv-border);
    border-radius: var(--elv-radius);
    background: var(--elv-surface);
    color: var(--elv-muted);
    font: 500 13.5px/1.2 var(--elv-font);
    box-shadow: var(--elv-shadow-card);
}
#room-list-search-button:hover { background: var(--elv-surface-2); color: var(--elv-ink); }
#room-list-search-button > svg { width: 18px; height: 18px; color: var(--elv-muted); }
#room-list-search-button > span { flex: 1; display: flex; align-items: center; gap: 8px; }
#room-list-search-button > span > span:first-child { flex: 1; min-width: 0; font-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#room-list-search-button > span > span:first-child::before { content: "Search conversations…"; font-size: 13px; }
#room-list-search-button kbd {
    padding: 2px 7px;
    border-radius: 7px;
    border: 1px solid var(--elv-border);
    background: var(--elv-pill);
    color: var(--elv-muted);
    font: 600 11px/1.4 var(--elv-font);
}

/* filters */
.mx_RoomListPanel [data-testid="primary-filters"] { padding: 0 14px 8px; }
.mx_RoomListPanel [data-testid="primary-filters"] [role="listbox"] { gap: 5px; }
.mx_RoomListPanel [data-testid="primary-filters"] [role="option"] {
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--elv-pill);
    color: var(--elv-ink);
    font: 600 12px/1.2 var(--elv-font);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mx_RoomListPanel [data-testid="primary-filters"] [role="option"]:hover { background: var(--elv-pill-hover); }
.mx_RoomListPanel [data-testid="primary-filters"] [role="option"][aria-selected="true"] {
    background: var(--elv-action);
    color: #ffffff;
    box-shadow: none;
}
.mx_RoomListPanel [data-testid="primary-filters"] > button {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--elv-pill);
    color: var(--elv-muted);
}

/* list header */
.mx_RoomListPanel [data-testid="room-list-header"] { min-height: 42px; padding: 7px 12px 3px 16px; }
.mx_RoomListPanel [data-testid="room-list-header"] > div { padding-bottom: 2px; }
.mx_RoomListPanel [data-testid="room-list-header"] h1 { font: 800 15px/1.3 var(--elv-font); letter-spacing: -0.02em; color: var(--elv-ink); }
.mx_MatrixChat:has(.mx_SpaceTreeLevel > li:first-child .mx_SpaceButton_active) [data-testid="room-list-header"] h1 { font-size: 0; }
.mx_MatrixChat:has(.mx_SpaceTreeLevel > li:first-child .mx_SpaceButton_active) [data-testid="room-list-header"] h1::before {
    content: "Messages";
    font: 800 15px/1.3 var(--elv-font);
    letter-spacing: -0.02em;
}
.mx_RoomListPanel [data-testid="room-list-header"] button {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--elv-muted);
}
.mx_RoomListPanel [data-testid="room-list-header"] button:hover { background: var(--elv-pill); color: var(--elv-ink); }
.mx_RoomListPanel [data-testid="room-list-header"] button[aria-label="New conversation"] {
    background: var(--elv-action);
    color: #ffffff;
}
.mx_RoomListPanel [data-testid="room-list-header"] button[aria-label="New conversation"]:hover {
    background: var(--elv-action-hover);
    color: #ffffff;
}

/* conversation rows */
.mx_RoomListPanel [data-testid="room-list"] { box-sizing: border-box; padding: 0 0 8px; }
.mx_RoomListItemView {
    box-sizing: border-box;
    min-height: 54px;
    padding: 1px 0;
    border-radius: var(--elv-radius);
}
.mx_RoomListItemView > div {
    position: relative;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0 10px;
    padding: 5px 10px;
    gap: 10px;
    border-radius: var(--elv-radius);
    overflow: hidden;
    transition: background-color 0.15s ease;
}
.mx_RoomListItemView:hover > div { background: var(--elv-pill); }
.mx_RoomListItemView_selected > div, .mx_RoomListItemView[aria-selected="true"] > div { background: var(--elv-selected); }
.mx_RoomListItemView > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: transparent;
}
.mx_RoomListItemView_selected > div::before, .mx_RoomListItemView[aria-selected="true"] > div::before { background: var(--elv-navy); }
.mx_RoomListItemView .mx_RoomAvatarView { flex: 0 0 auto; }
.mx_RoomListItemView .mx_BaseAvatar { --cpd-avatar-size: 38px !important; }
.mx_RoomListItemView [data-testid="room-name"] { font: 650 14px/1.3 var(--elv-font); letter-spacing: -0.01em; color: var(--elv-ink); }
.mx_RoomListItemView [data-testid="room-name"] + div { margin-top: 1px; font: 500 12.5px/1.3 var(--elv-font); color: var(--elv-muted); }
.mx_RoomListItemView { --cpd-color-bg-accent-rest: var(--elv-red); --cpd-color-bg-action-primary-rest: var(--elv-action); }
.mx_RoomListItemView [data-testid="notification-decoration"] { gap: 6px; }
.mx_RoomListItemView .mx_RoomAvatarView_PresenceDecoration { --cpd-color-icon-success-primary: var(--elv-online); }

.mx_BaseAvatar { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.mx_BaseAvatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ------------------------------------------------------------- room header */
.mx_RoomHeader {
    height: 68px;
    padding: 0 18px 0 22px;
    gap: 12px;
    border-bottom: 1px solid var(--elv-border-soft);
    background: var(--elv-surface);
    box-shadow: none;
}
.mx_RoomHeader:hover { background: var(--elv-surface); }
.mx_RoomHeader .mx_BaseAvatar { --cpd-avatar-size: 40px !important; }
.mx_RoomHeader_infoWrapper { gap: 14px; }
.mx_RoomHeader_info { display: flex; flex-direction: column; gap: 2px; padding-right: 16px; }
.mx_RoomHeader_heading { font: 650 18px/1.25 var(--elv-font); letter-spacing: -0.025em; color: var(--elv-ink); }
.mx_RoomHeader_info::after { font: 500 12.5px/1.3 var(--elv-font); color: var(--elv-muted); }
.mx_RoomHeader:has(.mx_PresenceIconView_online) .mx_RoomHeader_info::after,
.mx_RoomHeader:has([data-elv-presence="online"]) .mx_RoomHeader_info::after { content: "Online"; }
.mx_RoomHeader:has(.mx_PresenceIconView_unavailable) .mx_RoomHeader_info::after { content: "Away"; }
.mx_RoomHeader:has(.mx_PresenceIconView_dnd) .mx_RoomHeader_info::after,
.mx_RoomHeader:has([data-elv-presence="busy"]) .mx_RoomHeader_info::after { content: "Busy"; }
.mx_RoomHeader:has(.mx_PresenceIconView_offline) .mx_RoomHeader_info::after,
.mx_RoomHeader:has([data-elv-presence="in_call"]) .mx_RoomHeader_info::after { content: "In call"; }
.mx_RoomHeader:has([data-elv-presence="offline"]) .mx_RoomHeader_info::after { content: "Offline"; }
.mx_RoomHeader:has([data-elv-user="@frank:192.168.53.236"][data-elv-presence="online"]) .mx_RoomHeader_info::after { content: "Online · IQ assistant"; }
.mx_RoomHeader:has([data-elv-user="@frank:192.168.53.236"][data-elv-presence="busy"]) .mx_RoomHeader_info::after { content: "Busy · IQ assistant"; }
.mx_RoomHeader:has([data-elv-user="@frank:192.168.53.236"][data-elv-presence="offline"]) .mx_RoomHeader_info::after { content: "Offline · IQ assistant"; }
.mx_RoomHeader:has([data-elv-user="@frank:192.168.53.236"]) .mx_RoomHeader_heading::after {
    content: "AI";
    display: inline-flex;
    align-items: center;
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--elv-ai);
    color: #ffffff;
    font: 700 10.5px/1.5 var(--elv-font);
    letter-spacing: 0.04em;
}
.mx_RoomHeader :is(button, .mx_AccessibleButton) { border-radius: 12px; }
.mx_RoomHeader > button:not(.mx_RoomHeader_infoWrapper), .mx_RoomHeader_join_button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: transparent;
    color: var(--elv-ink);
    transition: background-color 0.18s ease;
}
.mx_RoomHeader > button:not(.mx_RoomHeader_infoWrapper):hover { background: var(--elv-pill-hover); }
.mx_RoomHeader > button:not(.mx_RoomHeader_infoWrapper) svg { width: 20px; height: 20px; }
.mx_RoomHeader .mx_RoomHeader_toggled { fill: var(--elv-navy); }
.mx_RoomHeader > button:has(svg.mx_RoomHeader_toggled) { background: var(--elv-selected); }
.mx_RoomHeader .mx_FacePile { padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--elv-pill); color: var(--elv-ink); }

/* ----------------------------------------------------------------- timeline */
.mx_RoomView_body { background: var(--elv-canvas); }
.mx_RoomView_timeline { background: transparent; }
.mx_RoomView_MessageList {
    max-width: var(--elv-reading-width);
    width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 16px 22px 10px;
}
.mx_TimelineSeparator { gap: 14px; margin: 14px 0 4px; color: var(--elv-muted); font: 600 12.5px/1.4 var(--elv-font); }
.mx_TimelineSeparator hr { border-bottom: 1px solid var(--elv-border); }
.mx_TimelineSeparator > :not(hr) {
    padding: 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--elv-muted);
}
/* Keep Element's grouping, receipts, actions, encryption warnings and event DOM. */
.mx_EventTile[data-layout="group"] {
    --EventTile_group_line-spacing-inline-start: 0px;
    --EventTile_group_line-line-height: 24px;
    position: relative;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(82%, 760px);
    min-width: min(240px, 100%);
    margin: 18px auto 0 0;
    padding: 12px 16px 12px 58px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--elv-surface-2);
    box-shadow: none;
}
.mx_EventTile[data-layout="group"][data-self="true"] {
    margin-inline: auto 0;
    background: var(--elv-selected);
}
.mx_EventTile[data-layout="group"]:has(+ .mx_EventTile_continuation) { border-end-start-radius: 6px; border-end-end-radius: 6px; }
.mx_EventTile[data-layout="group"].mx_EventTile_continuation {
    margin-top: 3px;
    padding-block: 8px;
    border-start-start-radius: 6px;
    border-start-end-radius: 6px;
}
.mx_EventTile[data-layout="group"] .mx_EventTile_avatar { top: 12px; left: 12px; }
.mx_EventTile[data-layout="group"]:not(.mx_EventTile_info) .mx_EventTile_avatar .mx_BaseAvatar { --cpd-avatar-size: 32px !important; }
.mx_EventTile[data-layout="group"] > .mx_DisambiguatedProfile { margin-inline-start: 0; max-width: 100%; padding: 0; line-height: 22px; }
.mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile_displayName { font: 600 13px/1.4 var(--elv-font); color: var(--elv-ink); }
.mx_EventTile[data-layout="group"]:has(.elv-frank-message) .mx_DisambiguatedProfile_displayName { color: var(--elv-ai-text); }
.mx_EventTile[data-layout="group"] .mx_EventTile_line { padding: 0; border-radius: 8px; }
.mx_EventTile[data-layout="group"] .mx_EventTile_line:hover { background: transparent; }
.mx_EventTile[data-layout="group"] .mx_EventTile_body { font-size: 15px; line-height: 1.55; color: var(--elv-ink); overflow-wrap: anywhere; }
.mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    margin-block: 2px 4px;
    text-align: start;
    font: 500 11px/1.4 var(--elv-font);
    color: var(--elv-muted);
    visibility: visible;
}
.mx_EventTile[data-layout="group"] .mx_EventTile_footer { margin-inline: 0; }
.mx_EventTile[data-layout="group"] .mx_ThreadSummary, .mx_EventTile[data-layout="group"] .mx_ThreadSummary_icon { margin-left: 0; }
.mx_EventTile[data-layout="group"].mx_EventTile_info,
.mx_EventTile[data-layout="group"].mx_EventTile_bubbleContainer,
.mx_EventTile[data-layout="group"]:has(.mx_LegacyCallEvent_wrapper, .mx_CallEvent_wrapper) {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 8px 0 0;
    padding: 6px 12px 6px 58px;
    color: var(--elv-muted);
    background: transparent;
    box-shadow: none;
}
.mx_EventTile[data-layout="group"].mx_EventTile_selected { outline: 2px solid var(--elv-navy); outline-offset: 2px; }
.mx_EventTile[data-layout="group"].mx_EventTile_highlight { background: var(--elv-red-soft); }
.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption.elv-message-status-row {
    float: none;
    width: 100%;
    height: auto;
    margin: 6px 0 0;
    text-align: end;
}
.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption.elv-message-status-row .mx_ReadReceiptGroup { inset-block-start: 0; }
.elv-message-status-row .elv-message-status-button { height: auto; padding: 0; }
.elv-message-status {
    display: inline-block;
    color: var(--elv-muted);
    font: 500 11px/1.4 var(--elv-font);
}
.mx_EventTile[data-layout="group"][data-self="true"] .elv-message-status { color: var(--elv-navy); }

/* Historical calls are quiet timeline rows, with all status and retry/join actions retained. */
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent,
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow,
.mx_CallEvent.mx_CallEvent_inactive {
    width: 100%; min-width: 0; max-width: 100%; min-height: 0;
    padding: 4px 0; margin: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px 16px;
}
.mx_LegacyCallEvent_info_basic { gap: 2px; }
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent_sender { font-size: 12px; margin-bottom: 0; }
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent_type { font-size: 13px; }
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent_content { margin-inline-start: 0; font-size: 12px; }
.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow .mx_LegacyCallEvent_iconButton {
    position: static; min-width: 32px; min-height: 32px;
}
.mx_CallEvent_inactive .mx_CallEvent_columns { justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; }
.mx_CallEvent_inactive .mx_CallEvent_title { font-size: 13px; color: var(--elv-muted); }

/* Active calls use one clear caller identity; the participant total remains in the summary. */
.mx_CallEvent.mx_CallEvent_active {
    box-sizing: border-box;
    width: min(100%, 640px);
    min-width: 0;
    min-height: 0;
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--elv-border);
    border-radius: 14px;
    background: var(--elv-surface);
    box-shadow: 0 1px 2px rgb(23 43 69 / 8%);
}
.mx_CallEvent_active > .mx_BaseAvatar { flex: 0 0 32px; align-self: center; }
.mx_CallEvent_active .mx_CallEvent_columns { min-width: 0; gap: 12px; }
.mx_CallEvent_active .mx_CallEvent_details { min-width: 0; gap: 2px; }
.mx_CallEvent_active .mx_CallEvent_title {
    overflow: hidden;
    color: var(--elv-ink);
    font: 650 14px/1.4 var(--elv-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mx_CallEvent_active .mx_LiveContentSummary { color: var(--elv-muted); font: 500 12px/1.4 var(--elv-font); }
.mx_CallEvent_active .mx_CallEvent_button { min-width: 92px; min-height: 38px; border-radius: 999px; }
@media (max-width: 560px) {
    .mx_CallEvent_active .mx_CallEvent_columns { flex-wrap: wrap; }
    .mx_CallEvent_active .mx_CallEvent_button { margin-inline-start: auto; }
}
.mx_MessageActionBar { border-radius: 10px; border: 1px solid var(--elv-border); background: var(--elv-surface); box-shadow: var(--elv-shadow); }
/* In the chat layout the toolbar follows the message, reactions and delivery
   status in document flow. It appears only on hover or keyboard focus, so it
   adds no empty space to messages while idle and never covers their content. */
.mx_EventTile[data-layout="group"] > .mx_MessageActionBar {
    position: static;
    display: flex;
    width: max-content;
    margin-block-start: 8px;
    margin-inline: 0;
}
.mx_EventTile[data-layout="group"][data-self="true"] > .mx_MessageActionBar { margin-inline-start: auto; }
.mx_EventTile[data-layout="group"] > .mx_MessageActionBar::before { content: none; }
@media (max-width: 480px) {
    .mx_EventTile[data-layout="group"] > .mx_MessageActionBar {
        max-width: 100%;
        flex-wrap: wrap;
    }
}
.mx_ReactionsRow { margin-top: 6px; }
.elv-frank-message { line-height: 1.65; }
.elv-frank-message :is(h1,h2,h3) { letter-spacing: -0.02em; color: var(--elv-ink); }
.elv-frank-message li::marker { color: var(--elv-ai); }
.elv-frank-message strong { color: var(--elv-ink); }
.elv-copy-block-tools { border-radius: 12px 12px 0 0; padding: 8px 12px; color: var(--elv-muted); background: var(--elv-surface); border-color: var(--elv-border); }
.elv-frank-message .elv-copy-block { border-radius: 0 0 12px 12px; border-color: var(--elv-border); }
.elv-frank-message :is(pre, pre code), .elv-frank-message .elv-copy-block th { color: var(--elv-ink); background: var(--elv-surface); }
.elv-frank-message :is(th, td) { border-color: var(--elv-border); }
.elv-copy-button { color: var(--elv-muted); }
.elv-copy-button:hover { color: var(--elv-ink); background: var(--elv-selected); }
.elv-frank-message table.elv-copy-block { display: table; width: 100%; table-layout: fixed; }
.elv-frank-message table.elv-copy-block :is(th, td) { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ composer */
.mx_RoomView .mx_MessageComposer { box-sizing: border-box; width: 100%; min-width: 0; margin-right: 0; padding: 8px 22px 18px; background: var(--elv-canvas); }
.mx_MessageComposer_wrapper {
    box-sizing: border-box;
    max-width: var(--elv-reading-width);
    min-width: 0;
    margin-inline: auto;
    position: relative;
    padding: 6px 8px 6px 80px;
    border: 1px solid var(--elv-border);
    border-top: 1px solid var(--elv-border);
    border-radius: 16px;
    background: var(--elv-surface);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mx_MessageComposer_wrapper:focus-within { border-color: var(--elv-navy); box-shadow: var(--elv-focus); outline: 0; }
.mx_MessageComposer_row { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Encryption shield and the "+" (more options) sit at the leading edge; the actions group keeps its own box. */
.mx_MessageComposer_e2eIconWrapper { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.mx_MessageComposer_wrapper:not(:has(.mx_MessageComposer_e2eIconWrapper)) { padding-inline-start: 62px; }
.mx_MessageComposer_wrapper:not(:has(.mx_MessageComposer_e2eIconWrapper)) .mx_MessageComposer_buttonMenu { left: 12px; }
.mx_MessageComposer_actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.mx_MessageComposer_input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px 0 0; background: transparent; font-size: 15px; }
.mx_MessageComposer_input :is(textarea, [contenteditable="true"]) { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.mx_MessageComposer_button {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.15s ease;
}
.mx_MessageComposer_button:hover { background: var(--elv-pill); }
.mx_MessageComposer_button svg { width: 20px; height: 20px; display: block; }
.mx_MessageComposer_buttonMenu svg { width: 22px; height: 22px; }
.mx_MessageComposer_buttonMenu { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); background: var(--elv-pill); }
.mx_MessageComposer_buttonMenu:hover { background: var(--elv-pill-hover); }
.mx_MessageComposer_sendMessage {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 12px;
    margin-inline-start: 4px;
    border-radius: 50%;
    background-color: var(--elv-action);
    box-shadow: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.mx_MessageComposer_sendMessage:hover { background-color: var(--elv-action-hover); transform: translateY(-1px); }
.mx_MessageComposer_sendMessage svg { color: #ffffff; fill: #ffffff; }
.elv-send-button {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-inline-start: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--elv-action);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.elv-send-button svg { width: 20px; height: 20px; margin-inline-start: 2px; }
.elv-send-button:hover { background: var(--elv-action-hover); transform: translateY(-1px); }
.elv-send-button[aria-disabled="true"] { background: var(--elv-pill); color: var(--elv-muted); box-shadow: none; cursor: text; }
.elv-send-button[aria-disabled="true"]:hover { background: var(--elv-pill-hover); transform: none; }
/* Every clickable control acknowledges press and keyboard focus. */
:is(.mx_MatrixChat, .mx_Dialog, .mx_ContextualMenu, .elv-people) :is(button, .mx_AccessibleButton):not([aria-disabled="true"]):not(:disabled) {
    transition: background-color 0.15s ease, color 0.15s ease, filter 0.12s ease, box-shadow 0.15s ease;
}
:is(.mx_MatrixChat, .mx_Dialog, .mx_ContextualMenu, .elv-people) :is(button, .mx_AccessibleButton):not([aria-disabled="true"]):not(:disabled):active {
    filter: brightness(0.88);
}
:is(.mx_MatrixChat, .mx_Dialog, .mx_ContextualMenu, .elv-people) :is(button, .mx_AccessibleButton):focus-visible {
    outline: 2px solid var(--elv-navy);
    outline-offset: 2px;
}
.elv-send-button:not([aria-disabled="true"]):active,
.mx_MessageComposer_sendMessage:not([aria-disabled="true"]):active {
    transform: translateY(1px);
}
/* Focus lives on the pill (border + soft ring), not on the inner editor. */
.mx_MessageComposer_wrapper :is(.mx_BasicMessageComposer_input, [contenteditable="true"], textarea):focus,
.mx_MessageComposer_wrapper :is(.mx_BasicMessageComposer_input, [contenteditable="true"], textarea):focus-visible { outline: none; box-shadow: none; }

/* ------------------------------------------------------- right panel / home */
.mx_RightPanel { border-left: 1px solid var(--elv-border-soft); background: var(--elv-surface); }
.mx_HomePage_default_wrapper { max-width: 640px; padding: 32px 0; }
.mx_HomePage_default_wrapper > img {
    width: 230px;
    height: auto;
    padding: 12px 16px;
    border-radius: 16px;
    background: white;
    box-shadow: var(--elv-shadow);
}
.mx_HomePage_default h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.035em; margin-top: 26px; }
.mx_HomePage_default h2 { font-size: 15px; font-weight: 400; color: var(--elv-muted); }
.mx_HomePage_default .mx_HomePage_default_buttons { margin-top: 36px; gap: 14px; }
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
    width: 100%;
    min-height: 124px;
    padding: 20px;
    border: 1px solid var(--elv-border);
    border-radius: 20px;
    background: var(--elv-surface);
    color: var(--elv-ink);
    box-shadow: var(--elv-shadow);
    font-size: 13px;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg { color: var(--elv-navy); height: 28px; }
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover { background: var(--elv-selected); }

/* ------------------------------------------------------- directory dialog */
.elv-directory-dialog {
    border: 1px solid var(--elv-border);
    border-radius: 18px;
    background: var(--elv-surface);
    color: var(--elv-ink);
    box-shadow: 0 12px 36px rgb(9 24 44 / 14%);
}
.elv-directory-dialog header { font: 800 20px/1.3 var(--elv-font); letter-spacing: -0.03em; }
.elv-directory-dialog input { min-height: 42px; border-radius: var(--elv-radius) !important; }
.elv-directory-row { border-radius: 12px !important; padding: 10px 12px !important; border: 0 !important; background: transparent !important; font-weight: 600; }
.elv-directory-row:hover { background: var(--elv-pill) !important; }
.elv-directory-dialog .elv-frank-avatar { background: var(--elv-selected); color: var(--elv-navy); }

/* ------------------------------------------------- accessibility & modes */
@media (prefers-reduced-transparency: reduce) {
    :root, .cpd-theme-light, .cpd-theme-dark { --elv-glass: var(--elv-surface); }
    .elv-directory-dialog { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mx_MatrixChat * { transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media (prefers-contrast: more) {
    :root, .cpd-theme-light, .cpd-theme-dark { --elv-border: currentColor; --elv-border-soft: currentColor; --elv-glass: var(--elv-surface); --elv-rail-muted: #ffffff; }
    .elv-directory-dialog { backdrop-filter: none; }
}
.cpd-theme-light-hc, .cpd-theme-dark-hc {
    --elv-ink: var(--cpd-color-text-primary);
    --elv-navy: var(--cpd-color-text-primary);
    --elv-muted: var(--cpd-color-text-secondary);
    --elv-border: var(--cpd-color-text-primary);
    --elv-border-soft: var(--cpd-color-text-primary);
    --elv-canvas: var(--cpd-color-bg-canvas-default);
    --elv-sidebar: var(--cpd-color-bg-canvas-default);
    --elv-glass: var(--cpd-color-bg-canvas-default);
    --elv-surface: var(--cpd-color-bg-canvas-default);
    --elv-surface-2: var(--cpd-color-bg-subtle-secondary);
    --elv-pill: var(--cpd-color-bg-subtle-primary);
    --elv-pill-hover: var(--cpd-color-bg-subtle-secondary);
    --elv-selected: var(--cpd-color-bg-subtle-primary);
    --elv-red-soft: var(--cpd-color-bg-subtle-primary);
    --elv-ai-soft: var(--cpd-color-bg-subtle-secondary);
    --elv-rail-muted: #ffffff;
    --elv-shadow: none;
    --elv-shadow-card: none;
}
:is(.cpd-theme-light-hc, .cpd-theme-dark-hc) .elv-directory-dialog { backdrop-filter: none; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
    :root, .cpd-theme-light, .cpd-theme-dark { --elv-reading-width: 100%; }
    .mx_RoomView_MessageList { padding-inline: 16px; }
    .mx_RoomView .mx_MessageComposer { padding-inline: 16px; }
}
@media (max-width: 980px) {
    .mx_RoomHeader { height: 66px; padding-inline: 14px; }
    .mx_RoomHeader .mx_BaseAvatar { --cpd-avatar-size: 40px !important; }
    .mx_RoomHeader > button:not(.mx_RoomHeader_infoWrapper), .mx_RoomHeader_join_button { width: 44px; height: 44px; }
    .mx_EventTile[data-layout="group"] { max-width: 92%; padding: 10px 12px 10px 54px; }
    .mx_EventTile[data-layout="group"] .mx_EventTile_avatar { left: 12px; }
}
@media (max-width: 700px) {
    .mx_RoomView .mx_MessageComposer { padding: 0 8px 8px; }
    .elv-company-panel { padding: 12px 10px 8px; }
    .mx_RoomListPanel > [data-testid="room-list-search"] { padding-inline: 10px; }
}

/* Calm details lists; the existing panel retains every action and close control. */
.mx_RightPanel .mx_RoomSummaryCard_container { margin: 24px 20px 16px; }
.mx_RightPanel .mx_RoomSummaryCard_roomName { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; }
.mx_RightPanel .mx_RoomSummaryCard_bottomOptions { margin-block: 8px 24px; }
.mx_RightPanel .mx_AccessibleButton { border-radius: 10px; }
.mx_RightPanel .mx_RoomSummaryCard .mx_AccessibleButton { min-height: 44px; }
.mx_RoomHeader { flex-shrink: 0; }
.mx_MessageComposer_button { min-width: 44px; min-height: 44px; }
.mx_RoomView .mx_MessageComposer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.mx_MainSplit { position: relative; }
.elv_DetailsDrawer {
    position: absolute; inset: 0; z-index: 40;
    display: flex; justify-content: flex-end; background: rgb(15 27 45 / 22%);
}
.elv_DetailsDrawer_panel {
    width: min(360px, 100%); height: 100%; min-width: 0;
    background: var(--elv-surface); box-shadow: -8px 0 32px rgb(15 27 45 / 12%);
    animation: elv-details-in 180ms ease-out;
}
.elv_DetailsDrawer_panel > .mx_RightPanel { width: 100%; }
@keyframes elv-details-in { from { transform: translateX(16px); } to { transform: translateX(0); } }
@media (max-width: 700px) {
    .mx_RoomHeader { height: auto; min-height: 68px; padding: 10px; gap: 4px; flex-wrap: wrap; }
    .mx_RoomHeader_infoWrapper { min-width: 120px; flex-basis: calc(100% - 56px); }
    .mx_RoomHeader_info { padding-right: 0; }
    .mx_RoomView_MessageList { padding-inline: 10px; }
    .mx_EventTile[data-layout="group"] { max-width: 96%; }
    .mx_MessageComposer_actions { flex-wrap: wrap; }
    .elv_DetailsDrawer_panel { width: 100%; }
}

/* People shares the existing company directory and presence source. */
.elv-people { box-sizing: border-box; font: 400 14px/1.45 var(--elv-font); width: min(900px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 24px; border-radius: 16px; }
.elv-people::backdrop { background: rgb(15 27 45 / 30%); }
.elv-people header { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.elv-people h2 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.035em; }
.elv-people button, .elv-people select { min-height: 44px; border: 1px solid var(--elv-border-soft); border-radius: 10px; background: var(--elv-surface); color: var(--elv-ink); padding: 8px 12px; cursor: pointer; font: inherit; }
.elv-people button:hover { background: var(--elv-pill); }
.elv-people button:active { transform: translateY(1px); }
.elv-people :focus-visible { outline: 2px solid var(--elv-navy); outline-offset: 2px; }
.elv-people-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.elv-people-filters[hidden], .elv-people-count[hidden] { display: none; }
.elv-people-filters input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid var(--elv-border); color: var(--elv-ink); background: var(--elv-surface); }
.elv-people-count { color: var(--elv-muted); font-size: 13px; margin-block: 18px 6px; }
/* An empty result says what to try next, not just that it is empty. */
.elv-people-empty { display: flex; flex-direction: column; gap: 3px; margin: 26px 0; text-align: center; }
.elv-people-empty strong { font: 650 15px/1.3 var(--elv-font); color: var(--elv-ink); }
.elv-people-empty span { font: 400 13px/1.45 var(--elv-font); color: var(--elv-muted); }
.elv-person-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--elv-border-soft); }
.elv-person-row .elv-person-identity { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; border: 0; background: transparent; text-align: start; }
.elv-person-description { display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.elv-person-description small { font-size: 12px; color: var(--elv-muted); }
.elv-person-description strong { font-size: 15px; font-weight: 600; }
.elv-person-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.elv-person-actions button { font-size: 12px; }
.elv-person-actions button:first-child { background: var(--elv-selected); border-color: transparent; }
.elv-person-profile { max-width: 560px; margin: 24px auto; }
.elv-person-profile > .elv-frank-avatar { width: 80px; height: 80px; font-size: 26px; }
.elv-person-profile h3 { font-size: 26px; margin-bottom: 4px; }
.elv-person-profile p { color: var(--elv-muted); }
.elv-person-profile dl { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding-block: 20px; border-block: 1px solid var(--elv-border-soft); }
.elv-person-profile dd { margin: 0; overflow-wrap: anywhere; }
.elv-person-profile dt { color: var(--elv-muted); }
.elv-person-conversations { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 700px) {
    .elv-people { box-sizing: border-box; width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 20px; }
    .elv-person-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .elv-person-actions button { flex: 1; }
}

@media (max-width: 700px) {
    .elv_CallFallback { inset: 0 !important; width: 100% !important; height: 100dvh !important; background: #10151d; }
}

.mx_RoomHeader_infoWrapper { justify-content: flex-start; text-align: start; }
@media (prefers-reduced-motion: reduce) {
    .elv-people *, .elv_DetailsDrawer_panel { animation: none !important; transition: none !important; }
}

.elv-people-filters input { margin-bottom: 0; }
.elv-person-profile > .elv-frank-avatar { flex-basis: 80px; }
[data-elv-presence="away"] { --elv-status-color: #946500; }
[data-elv-presence="dnd"] { --elv-status-color: #b42338; }

@media (max-width: 700px) {
    .mx_MessageComposer_wrapper,
    .mx_MessageComposer_wrapper:not(:has(.mx_MessageComposer_e2eIconWrapper)) { padding: 8px 12px; }
    .mx_MessageComposer_row { flex-wrap: wrap; }
    .mx_MessageComposer_input { flex: 1 0 100%; padding: 0; }
    .mx_MessageComposer_actions { margin-inline-start: auto; }
    .mx_MessageComposer_e2eIconWrapper { left: 12px; top: auto; bottom: 22px; transform: none; }
    .mx_MessageComposer_buttonMenu { left: 30px; top: auto; bottom: 6px; transform: none; }
    .mx_MessageComposer_wrapper:not(:has(.mx_MessageComposer_e2eIconWrapper)) .mx_MessageComposer_buttonMenu { left: 12px; }
}

.mx_LegacyCallEvent_wrapper :is(.mx_LegacyCallEvent_type, .mx_LegacyCallEvent_content, .mx_LegacyCallEvent_sender) { color: var(--elv-muted); }

/* Files is a full in-app browser, independent of the current conversation. */
.elv-files-dialog { box-sizing: border-box; width: min(1060px, 96vw); height: min(780px, 88vh); max-height: 88vh; padding: 22px; }
.elv-files-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.elv-files-dialog > header h2 { margin: 0; }
.elv-files-dialog > header button { background: var(--elv-surface-2); color: var(--elv-ink); }
.elv-files-body { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); min-height: 0; height: calc(100% - 62px); border-top: 1px solid var(--elv-border); }
.elv-files-sources { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 12px 16px 0; border-right: 1px solid var(--elv-border); }
.elv-files-main { min-width: 0; overflow: auto; padding: 18px 12px 22px 22px; }
.elv-files-main h3 { margin: 8px 0 16px; font: 700 20px/1.3 var(--elv-font); color: var(--elv-ink); overflow-wrap: anywhere; }
.elv-files-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 14px; }
.elv-files-breadcrumbs .elv-files-entry { width: auto; min-height: 30px; padding: 4px 8px; font-size: 12px; }
.elv-files-breadcrumbs .elv-files-entry svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.elv-files-dialog .elv-files-entry {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: 600 13.5px/1.25 var(--elv-font);
    color: var(--elv-ink);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.elv-files-dialog .elv-files-entry:hover { background: var(--elv-surface-2); }
.elv-files-entry:focus-visible { outline: 2px solid var(--elv-navy); outline-offset: 1px; }
.elv-files-entry:disabled { opacity: .45; cursor: not-allowed; }
.elv-files-entry svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--elv-muted); }
.elv-files-entry span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elv-files-entry small { flex: 0 0 auto; font: 600 11px/1.2 var(--elv-font); color: var(--elv-muted); }
.elv-files-dialog .elv-files-action { width: auto; margin-top: 16px; padding: 9px 14px; color: var(--elv-navy); background: var(--elv-surface-2); }
.elv-files-back { width: auto; margin-bottom: 8px; }
.elv-files-back svg { transform: rotate(90deg); }
.elv-files-note { margin: 10px 0; font: 400 13px/1.5 var(--elv-font); color: var(--elv-muted); }
.elv-files-preview-image { display: block; max-width: 100%; max-height: calc(100% - 170px); margin: 0 auto; object-fit: contain; }
.elv-files-preview-frame { box-sizing: border-box; width: 100%; height: calc(100% - 170px); min-height: 350px; border: 1px solid var(--elv-border); border-radius: 10px; background: white; }
.elv-files-preview-text { max-height: calc(100% - 170px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 ui-monospace, monospace; }
@media (max-width: 640px) {
    .elv-files-dialog { padding: 12px; width: 98vw; height: 90vh; }
    .elv-files-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .elv-files-sources { flex-direction: row; padding: 6px 0; border-right: 0; border-bottom: 1px solid var(--elv-border); }
    .elv-files-sources .elv-files-entry { width: auto; }
    .elv-files-main { padding: 12px 4px; }
}

/* Dragging an attachment out of the conversation.
   The wrapper carries the pointer handlers only; `display: contents` keeps it
   out of layout entirely, so message bodies render exactly as before. The grab
   cursor is the affordance, and it appears only in a client that can actually
   hand the file to the operating system. */
.elv-attachment-drag { display: contents; }
.elv-attachment-drag[data-elv-drag="available"] .mx_MFileBody { cursor: grab; }
.elv-attachment-drag[data-elv-drag="available"] .mx_MFileBody:active { cursor: grabbing; }
.elv-attachment-drag-error {
    margin: 6px 0 0;
    font: 500 12.5px/1.4 var(--elv-font);
    color: var(--elv-red-deep);
}