/* Relay’s product shell is deliberately its own visual system: warm graphite,
   spectral indigo, and signal-teal rather than a copy of another chat brand. */
:root {
    color-scheme: dark;
    --relay-canvas: #101218;
    --relay-rail: #141720;
    --relay-panel: #191c26;
    --relay-panel-raised: #212532;
    --relay-panel-hover: #292f3e;
    --relay-line: rgba(210, 222, 250, .09);
    --relay-line-strong: rgba(210, 222, 250, .16);
    --relay-text: #f5f7ff;
    --relay-muted: #a8afc2;
    --relay-faint: #929bb0;
    --relay-indigo: #7779ff;
    --relay-indigo-bright: #9698ff;
    --relay-teal: #42d8b2;
    --relay-red: #ef6d79;
    --relay-yellow: #e9bd68;
    --relay-shadow: 0 22px 70px rgba(0, 0, 0, .36);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--relay-canvas); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    color: var(--relay-text);
    background: var(--relay-canvas);
}

body, button, input, textarea, select { font-family: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--relay-indigo-bright);
    outline-offset: 2px;
}

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.relay-auth {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    isolation: isolate;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 48px 24px 66px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    color: var(--relay-text);
    background:
        radial-gradient(circle at 13% 84%, rgba(58, 218, 182, .14), transparent 28rem),
        radial-gradient(circle at 85% 18%, rgba(110, 113, 255, .28), transparent 34rem),
        linear-gradient(132deg, #121328 0%, #171a2c 48%, #11151c 100%);
}

.relay-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .36;
    background-image: radial-gradient(rgba(196, 205, 255, .38) 1px, transparent 1.5px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
}

.relay-auth-glow { position: fixed; z-index: -1; width: 22rem; height: 22rem; border-radius: 50%; filter: blur(56px); opacity: .25; pointer-events: none; }
.glow-one { top: -6rem; left: 20%; background: #8c6dff; }
.glow-two { right: 7%; bottom: -10rem; background: #2ae1b5; }
.relay-auth-brand { position: fixed; top: 28px; left: 36px; display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }

.relay-mark { position: relative; width: 31px; height: 31px; display: inline-grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--relay-indigo-bright), #6264dd); box-shadow: 0 8px 20px rgba(99, 100, 226, .3); }
.relay-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: white; }
.relay-mark i:nth-child(1) { transform: translate(-7px, -2px); }
.relay-mark i:nth-child(2) { transform: translate(7px, -2px); }
.relay-mark i:nth-child(3) { transform: translate(0, 7px); width: 13px; height: 3px; border-radius: 8px; }

.auth-card { width: min(100%, 440px); box-sizing: border-box; border: 1px solid rgba(228, 234, 255, .14); border-radius: 24px; padding: 34px; background: rgba(28, 31, 43, .84); backdrop-filter: blur(20px); box-shadow: var(--relay-shadow); }
.auth-card-heading { text-align: center; margin-bottom: 26px; }
.auth-kicker, .section-kicker { display: block; color: var(--relay-teal); font-size: .66rem; letter-spacing: .13em; font-weight: 800; }
.auth-card h1 { margin: 8px 0 7px; font-size: 1.75rem; letter-spacing: -.045em; }
.auth-card-heading p { margin: 0; color: var(--relay-muted); font-size: .92rem; line-height: 1.5; }
.auth-form { display: grid; gap: 9px; }
.auth-form label, .relay-modal label { margin-top: 6px; color: #dce1ef; font-size: .78rem; font-weight: 720; }
.auth-form input, .relay-modal input, .relay-modal select, .relay-modal textarea, .relay-command input {
    width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid rgba(222, 228, 250, .15); border-radius: 11px; padding: 10px 12px; color: var(--relay-text); background: rgba(7, 10, 17, .35); transition: border-color .16s ease, background .16s ease;
}
.auth-form input:focus, .relay-modal input:focus, .relay-modal select:focus, .relay-modal textarea:focus, .relay-command input:focus { border-color: var(--relay-indigo-bright); background: rgba(7, 10, 17, .6); outline: none; }
.field-optional { color: var(--relay-faint); font-weight: 500; }
.field-help { margin: 1px 0 7px; color: var(--relay-muted); font-size: .75rem; line-height: 1.45; }
.auth-link-button { border: 0; padding: 0; width: max-content; color: #aeb6ff; font-size: .8rem; background: transparent; }
.auth-link-button:hover { color: white; text-decoration: underline; }
.button { min-height: 39px; border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; color: var(--relay-text); font-weight: 750; font-size: .83rem; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .55; transform: none; }
.button.primary { background: linear-gradient(135deg, #7577fc, #6769df); box-shadow: 0 6px 16px rgba(86, 88, 226, .27); }
.button.primary:hover { background: linear-gradient(135deg, #888aff, #6e70eb); }
.button.secondary { border-color: var(--relay-line-strong); background: rgba(255,255,255,.045); }
.button.secondary:hover { background: rgba(255,255,255,.09); }
.button.danger { color: #ffb4bb; border-color: rgba(239, 109, 121, .34); background: rgba(239, 109, 121, .09); }
.wide { width: 100%; margin-top: 7px; }
.auth-provider-button { min-height: 42px; border: 1px solid rgba(220, 226, 245, .16); border-radius: 10px; padding: 9px 13px; color: var(--relay-text); background: rgba(255,255,255,.04); font-weight: 700; font-size: .83rem; }
.auth-provider-button:hover { border-color: rgba(220, 226, 245, .33); background: rgba(255,255,255,.08); }
.auth-provider-button span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; color: #242735; background: #f6f7ff; font-size: .7rem; font-weight: 900; }
.auth-switch, .auth-terms { margin: 7px 0 0; color: var(--relay-muted); font-size: .77rem; line-height: 1.5; text-align: center; }
.auth-terms { text-align: left; }
.auth-terms a, .relay-auth-footer a { color: #aeb6ff; text-decoration: none; }
.auth-terms a:hover, .relay-auth-footer a:hover { color: white; text-decoration: underline; }
.form-error { min-height: 1.2rem; margin: 14px 0 0; color: #ffabb4; font-size: .8rem; line-height: 1.4; }
.relay-auth-footer { position: fixed; bottom: 24px; display: flex; gap: 11px; color: var(--relay-faint); font-size: .72rem; }
.relay-auth-footer a { color: inherit; }

.relay-shell { height: 100dvh; min-height: 0; display: grid; grid-template-columns: 68px 270px minmax(0, 1fr); color: var(--relay-text); background: var(--relay-canvas); }
.relay-shell.people-open { grid-template-columns: 68px 270px minmax(0, 1fr) 284px; }
.relay-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 13px 10px; box-sizing: border-box; border-right: 1px solid var(--relay-line); background: var(--relay-rail); }
.rail-button, .rail-profile { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 15px; color: #afb7ca; background: #202431; transition: border-radius .15s ease, color .15s ease, background .15s ease, transform .15s ease; }
.rail-button:hover, .rail-button.is-active, .rail-profile:hover { color: white; border-radius: 12px; background: linear-gradient(140deg, #7274fb, #575acf); transform: translateY(-1px); }
.rail-button > span:not(.relay-mark) { font-size: 1.23rem; }
.rail-button .relay-mark { transform: scale(.78); box-shadow: none; }
.rail-add { color: #4be0b6; font-size: 1.4rem; background: rgba(66, 216, 178, .11); }
.rail-add:hover { color: white; background: linear-gradient(140deg, #41c9a5, #289b84); }
.rail-divider { width: 30px; height: 1px; margin: 1px 0 2px; background: var(--relay-line-strong); }
.rail-spacer { flex: 1; }
.rail-profile { overflow: visible; border: 2px solid var(--relay-line-strong); border-radius: 50%; background: #2d3342; font-size: .78rem; font-weight: 800; }
.rail-profile .presence-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 3px solid var(--relay-rail); }
.rail-button b { position: absolute; top: -4px; right: -5px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border: 2px solid var(--relay-rail); border-radius: 9px; color: white; background: var(--relay-red); font-size: .6rem; }

.relay-sidebar { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--relay-line); background: #171a23; overflow: hidden; }
.sidebar-top { display: flex; align-items: center; gap: 5px; padding: 15px 14px 11px; border-bottom: 1px solid var(--relay-line); }
.command-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; border: 1px solid var(--relay-line); border-radius: 10px; padding: 0 10px; color: var(--relay-muted); background: #11141b; font-size: .78rem; text-align: left; }
.command-trigger:hover { color: var(--relay-text); border-color: var(--relay-line-strong); }
.sidebar-mobile-close { display: none; flex: 0 0 auto; }
kbd { border: 1px solid rgba(211, 220, 255, .17); border-radius: 4px; padding: 1px 4px; color: var(--relay-faint); background: rgba(255,255,255,.045); font-family: inherit; font-size: .66rem; }
.sidebar-nav { display: grid; gap: 2px; padding: 9px 9px 4px; }
.sidebar-page-button { display: flex; align-items: center; gap: 9px; min-height: 35px; border: 0; border-radius: 8px; padding: 0 10px; color: var(--relay-muted); background: transparent; font-size: .84rem; font-weight: 650; text-align: left; }
.sidebar-page-button:hover, .sidebar-page-button.is-active { color: var(--relay-text); background: var(--relay-panel-hover); }
.sidebar-page-button b { margin-left: auto; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 8px; color: white; background: var(--relay-red); font-size: .62rem; }
.sidebar-section { min-height: 0; padding: 16px 9px 0; }
.sidebar-section.rooms-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sidebar-section-heading { display: flex; align-items: center; justify-content: space-between; min-height: 22px; padding: 0 6px; }
.sidebar-section-heading h2 { margin: 0; color: var(--relay-faint); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-actions { display: inline-flex; gap: 2px; }
.bare-icon, .header-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; padding: 0; color: var(--relay-muted); background: transparent; font-size: 1.05rem; }
.bare-icon:hover, .header-icon:hover { color: var(--relay-text); background: var(--relay-panel-hover); }
.relay-room-list { display: grid; gap: 2px; min-height: 0; margin-top: 6px; overflow: auto; scrollbar-width: thin; }
.relay-room-list.compact-list { max-height: 151px; }
.relay-room-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; border: 0; border-radius: 8px; padding: 0 8px; color: var(--relay-muted); background: transparent; text-align: left; }
.relay-room-item:hover, .relay-room-item.is-active { color: var(--relay-text); background: var(--relay-panel-hover); }
.relay-room-item .room-glyph { width: 17px; color: var(--relay-faint); text-align: center; }
.relay-room-item .room-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .83rem; }
.relay-room-item .room-lock { margin-left: auto; color: var(--relay-faint); font-size: .72rem; }
.relay-room-item .room-unread { display: grid; place-items: center; min-width: 17px; height: 17px; margin-left: auto; border-radius: 9px; padding: 0 4px; color: white; background: var(--relay-red); font-size: .57rem; font-weight: 850; line-height: 1; }
.room-channel-list { display: grid; gap: 1px; margin: -1px 0 5px 20px; padding: 5px 0 3px 8px; border-left: 1px solid rgba(145, 151, 187, .16); }
.room-channel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 4px 0 7px; color: var(--relay-faint); font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.channel-add-button, .channel-manage-button { width: 34px; height: 34px; border-radius: 9px; font-size: .9rem; }
.room-channel-row { display: flex; align-items: center; gap: 1px; min-width: 0; }
.relay-channel-item { min-width: 0; flex: 1; min-height: 34px; overflow: hidden; border: 0; border-radius: 8px; padding: 0 8px; color: var(--relay-muted); background: transparent; font-size: .78rem; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.relay-channel-item:hover, .relay-channel-item.is-active { color: var(--relay-text); background: rgba(119, 121, 255, .14); }
.relay-channel-item.is-active { box-shadow: inset 2px 0 0 var(--relay-teal); }
.relay-channel-item.is-archived { color: var(--relay-faint); font-style: italic; }
.relay-channel-item.is-archived:hover, .relay-channel-item.is-archived.is-active { color: var(--relay-muted); background: rgba(255,255,255,.045); }
.room-channel-row .channel-manage-button { flex: 0 0 auto; opacity: .65; }
.room-channel-row .channel-unread { display: grid; flex: 0 0 auto; place-items: center; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; color: white; background: var(--relay-red); font-size: .57rem; font-weight: 850; line-height: 1; }
.room-channel-row:hover .channel-manage-button, .room-channel-row:focus-within .channel-manage-button { opacity: 1; }
.archived-channel-list { display: grid; gap: 1px; margin: 4px 0 1px; }
.archived-channel-list summary { display: flex; align-items: center; min-height: 32px; border-radius: 8px; padding: 0 7px; color: var(--relay-faint); cursor: pointer; font-size: .62rem; font-weight: 800; letter-spacing: .07em; list-style: none; }
.archived-channel-list summary::-webkit-details-marker { display: none; }
.archived-channel-list summary::before { content: '›'; width: 15px; color: var(--relay-muted); font-size: .95rem; line-height: 1; transition: transform .16s ease; }
.archived-channel-list[open] summary::before { transform: rotate(90deg); }
.archived-channel-list summary:hover, .archived-channel-list summary:focus-visible { color: var(--relay-muted); background: rgba(255,255,255,.04); outline: none; }
.archived-channel-notice { margin: 0 16px 13px; border: 1px solid rgba(222, 178, 85, .26); border-radius: 10px; padding: 10px 12px; color: #e6cf94; background: rgba(222, 178, 85, .08); font-size: .76rem; line-height: 1.45; }
.channel-archive-copy { margin: 1px 0 8px; border-left: 2px solid rgba(239, 109, 121, .7); padding: 8px 11px; color: #f2bdc4; background: rgba(239, 109, 121, .08); font-size: .78rem; line-height: 1.48; }
.sidebar-empty { margin: 7px 8px; color: var(--relay-faint); font-size: .72rem; line-height: 1.45; }
.sidebar-user { display: flex; align-items: center; gap: 3px; min-height: 58px; padding: 8px; border-top: 1px solid var(--relay-line); background: #141720; }
.profile-summary { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 5px; color: var(--relay-text); background: transparent; text-align: left; }
.profile-summary:hover { background: var(--relay-panel-hover); }
.profile-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 11px; color: white; background: linear-gradient(135deg, #7779ff, #45c9a8); font-size: .74rem; font-weight: 900; }
.profile-avatar.large { width: 52px; height: 52px; border-radius: 17px; font-size: 1rem; }
.profile-summary-copy { min-width: 0; display: grid; gap: 1px; }
.profile-summary-copy strong, .profile-summary-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-summary-copy strong { font-size: .77rem; }
.profile-summary-copy small { color: var(--relay-faint); font-size: .66rem; }
.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--relay-teal); box-shadow: 0 0 0 2px #171a23; }
[data-presence-id] { position: relative; }
[data-presence-id]::after { content: ''; position: absolute; width: 9px; height: 9px; right: 0; bottom: 0; border: 2px solid var(--relay-rail); border-radius: 50%; background: var(--presence-color, #80848e); }
[data-presence='online'] { --presence-color: #23a55a; }
[data-presence='busy'] { --presence-color: #f0b232; }
[data-presence='dnd'] { --presence-color: #f23f43; }
[data-presence='offline'] { --presence-color: #80848e; }
.presence-dot[data-presence] { background: var(--presence-color); cursor: pointer; }
.image-upload-controls input[hidden] { display: none; }
.presence-toggle { background: transparent; border: 0; padding: 12px; flex: 0 0 auto; border-radius: 50%; }
.presence-toggle .presence-dot { width: 12px; height: 12px; }

.relay-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--relay-panel); overflow: hidden; }
.relay-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-sizing: border-box; padding: 0 22px; border-bottom: 1px solid var(--relay-line); background: rgba(25, 28, 38, .9); }
.header-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 11px; }
.header-mark { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; color: var(--relay-indigo-bright); background: rgba(119, 121, 255, .13); font-size: 1rem; }
.header-title p { margin: 0; color: var(--relay-faint); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.header-title-row { display: flex; min-width: 0; align-items: center; gap: 8px; }
.header-title h1 { overflow: hidden; margin: 2px 0 0; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; letter-spacing: -.02em; }
.header-connected-app { flex: 0 0 auto; border: 1px solid rgba(81, 217, 181, .28); border-radius: 999px; padding: 3px 7px; color: #9bf1d5; background: rgba(81, 217, 181, .09); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.relay-status { min-height: 0; margin: 0; padding: 0 22px; color: var(--relay-muted); font-size: .74rem; line-height: 0; transition: padding .18s ease, line-height .18s ease; }
.relay-status:not(:empty) { min-height: 28px; padding-top: 9px; line-height: 1.35; }
.relay-status.is-error { color: #ffadb5; }
.relay-view { min-height: 0; flex: 1; overflow: auto; }

.relay-page { width: min(100%, 1160px); box-sizing: border-box; margin: 0 auto; padding: clamp(28px, 3vw, 46px); }
.relay-page h2 { margin: 0; font-size: 1.38rem; letter-spacing: -.04em; }
.relay-page-lede { max-width: 630px; margin: 8px 0 27px; color: var(--relay-muted); line-height: 1.55; }
.relay-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.relay-page-toolbar input { min-height: 40px; flex: 1; border: 1px solid var(--relay-line); border-radius: 10px; padding: 0 12px; color: var(--relay-text); background: #12151c; }
.home-hero { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); gap: 16px; }
.home-hero-card, .relay-card { min-width: 0; border: 1px solid var(--relay-line); border-radius: 16px; padding: 20px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.home-hero-card.highlight { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(112, 113, 255, .26), rgba(68, 216, 178, .12)); }
.home-hero-card.highlight::after { content: ""; position: absolute; width: 160px; height: 160px; right: -52px; top: -58px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; pointer-events: none; }
.home-hero-card.highlight > * { position: relative; z-index: 1; }
.home-hero-card h3, .relay-card h3 { margin: 7px 0; font-size: 1rem; }
.home-hero-card p, .relay-card p { margin: 0; color: var(--relay-muted); font-size: .82rem; line-height: 1.55; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.home-stats { display: grid; gap: 10px; }
.home-stats .status-kicker { margin-top: 6px; }
.stat-line { display: flex; justify-content: space-between; gap: 8px; color: var(--relay-muted); font-size: .79rem; }
.stat-line strong { color: var(--relay-text); }
.content-list { display: grid; border-top: 1px solid var(--relay-line); }
.content-row { display: flex; align-items: center; gap: 12px; min-height: 68px; border-bottom: 1px solid var(--relay-line); padding: 10px 2px; }
.content-row-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(135deg, #6264db, #3ab99d); font-size: .75rem; font-weight: 850; }
.content-row-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.content-row-copy strong { font-size: .88rem; }
.content-row-copy small { overflow: hidden; color: var(--relay-muted); white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; }
.content-row-actions { min-width: 0; display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.small-button { min-height: 30px; border: 1px solid var(--relay-line-strong); border-radius: 8px; padding: 5px 9px; color: var(--relay-text); background: rgba(255,255,255,.035); font-size: .73rem; font-weight: 720; }
.small-button:hover { background: var(--relay-panel-hover); }
.small-button.primary { border-color: transparent; background: rgba(115, 117, 255, .9); }
.small-button.danger { color: #ffabb3; border-color: rgba(239, 109, 121, .3); }
.relay-empty { display: grid; justify-items: center; gap: 9px; min-height: 210px; align-content: center; text-align: center; }
.relay-empty-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; color: var(--relay-teal); background: rgba(66, 216, 178, .10); font-size: 1.4rem; }
.relay-empty h3 { margin: 3px 0 0; font-size: 1rem; }
.relay-empty p { max-width: 370px; margin: 0; color: var(--relay-muted); font-size: .82rem; line-height: 1.5; }

.chat-view { min-height: 100%; display: flex; flex-direction: column; }
.message-scroll { min-height: 0; flex: 1; padding: 12px 0 20px; overflow: auto; }
.message-load { display: block; margin: 0 auto 14px; border: 0; border-radius: 8px; padding: 7px 10px; color: var(--relay-indigo-bright); background: rgba(119, 121, 255, .1); font-size: .75rem; }
.message-load:hover { background: rgba(119, 121, 255, .18); }
.message-welcome { max-width: 720px; margin: 22px auto 10px; padding: 0 28px; }
.message-welcome h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.04em; }
.message-welcome p { margin: 7px 0 0; color: var(--relay-muted); line-height: 1.5; }
.message-group { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 7px 28px; }
.message-continuation { grid-template-columns: 42px minmax(0, 1fr); padding-top: 1px; padding-bottom: 4px; }
.message-group:hover { background: rgba(255,255,255,.017); }
.message-avatar { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2px; border-radius: 12px; color: white; background: var(--author-color, #6870dd); font-size: .73rem; font-weight: 850; }
.message-body { min-width: 0; }
.message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.message-meta strong { color: var(--author-color, var(--relay-text)); font-size: .83rem; }
.message-meta time { color: var(--relay-faint); font-size: .66rem; }
.message-author-button { min-width: 0; max-width: min(38ch, 48vw); overflow: hidden; border: 0; padding: 0; color: var(--author-color, var(--relay-text)); background: transparent; font-size: .83rem; font-weight: 800; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.message-author-button:hover, .message-author-button:focus-visible { text-decoration: underline; }
.room-history-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; color: var(--relay-muted); }
.room-history-notice p { margin: 0; }
.message-edited-label { color: var(--relay-faint); font-size: .62rem; font-style: italic; }
.message-actions { display: inline-flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 4px; margin-top: 2px; }
.message-action-button { min-height: 23px; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; color: var(--relay-muted); background: rgba(255,255,255,.025); font-size: .62rem; font-weight: 760; }
.message-action-button:hover, .message-action-button:focus-visible { border-color: var(--relay-line-strong); color: var(--relay-text); background: var(--relay-panel-hover); }
.message-action-button.danger:hover, .message-action-button.danger:focus-visible { color: #ffb4bd; border-color: rgba(239,109,121,.36); }
.message-menu { width: fit-content; max-width: 100%; margin: 2px 0; }
.message-menu > summary { display: grid; place-items: center; width: 36px; min-height: 30px; border-radius: 6px; color: var(--relay-muted); background: transparent; cursor: pointer; list-style: none; font-size: 1.2rem; }
.message-menu > summary::-webkit-details-marker { display: none; }
.message-menu > summary:hover, .message-menu > summary:focus-visible, .message-menu[open] > summary { background: var(--relay-panel-hover); color: var(--relay-text); }
.message-menu-panel { display: grid; gap: 8px; max-width: min(340px, 65vw); padding: 10px; border: 1px solid var(--relay-line); border-radius: 8px; background: #202430; }
.message-menu-panel select { min-width: 0; width: 100%; }
.message-menu-panel .message-action-button { min-height: 36px; padding: 6px 10px; font-size: .78rem; }
.message-body > .message-continuation { display: block; padding: 6px 0 0; }
.message-body > .message-continuation > span { display: none; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.reaction-chip { min-height: 25px; border: 1px solid var(--relay-line-strong); border-radius: 8px; padding: 2px 7px; color: var(--relay-muted); background: rgba(255,255,255,.035); font-size: .7rem; font-weight: 760; line-height: 1.2; }
.reaction-chip:hover, .reaction-chip:focus-visible { border-color: rgba(150,152,255,.66); color: var(--relay-text); background: rgba(119,121,255,.16); }
.reaction-chip.is-mine { border-color: rgba(66,216,178,.52); color: #d9fff4; background: rgba(66,216,178,.12); }
.reaction-chip.is-disabled { cursor: default; opacity: .82; }
.reaction-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.reaction-picker-button { min-height: 54px; border: 1px solid var(--relay-line-strong); border-radius: 12px; color: var(--relay-text); background: rgba(255,255,255,.035); font-size: 1.38rem; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.reaction-picker-button:hover, .reaction-picker-button:focus-visible { border-color: rgba(150,152,255,.7); background: rgba(119,121,255,.16); transform: translateY(-1px); }
.reaction-picker-button.is-active { border-color: rgba(66,216,178,.7); background: rgba(66,216,178,.15); }
.message-line { display: flex; align-items: start; gap: 8px; }
.message-line .message-text { min-width: 0; flex: 1; }
.message-text { margin: 2px 0 0; color: #e4e8f4; font-size: .88rem; line-height: 1.48; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-kind-label { margin-left: 5px; color: var(--relay-teal); font-size: .62rem; font-weight: 800; letter-spacing: .05em; }
.message-reply-context { margin-top: 3px; color: var(--relay-faint); font-size: .68rem; font-weight: 700; }
.typing-indicator { min-height: 18px; margin: 0 25px 2px; color: var(--relay-teal); font-size: .69rem; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relay-composer { position: sticky; bottom: 0; margin: 0 20px 19px; border: 1px solid var(--relay-line-strong); border-radius: 15px; padding: 7px 9px 7px 13px; background: #222633; box-shadow: 0 9px 24px rgba(0,0,0,.18); }
.relay-composer textarea { display: block; width: 100%; max-height: 160px; box-sizing: border-box; resize: none; border: 0; padding: 7px 0; color: var(--relay-text); background: transparent; outline: none; line-height: 1.4; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.composer-bottom small { color: var(--relay-faint); font-size: .66rem; }
.composer-bottom .button { min-height: 31px; padding: 6px 11px; }

.relay-people { min-height: 0; border-left: 1px solid var(--relay-line); background: #171a23; overflow: auto; }
.people-heading { display: flex; align-items: start; justify-content: space-between; min-height: 64px; box-sizing: border-box; padding: 16px 14px 10px; border-bottom: 1px solid var(--relay-line); }
.people-heading h2 { margin: 3px 0 0; font-size: .92rem; }
.people-content { padding: 14px; }
.people-section { display: grid; gap: 8px; margin-bottom: 23px; }
.people-section h3 { margin: 0; color: var(--relay-faint); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.person-row { display: flex; align-items: center; gap: 9px; min-height: 39px; border-radius: 9px; padding: 4px; }
.person-row:hover { background: var(--relay-panel-hover); }
.person-row .content-row-avatar { width: 30px; height: 30px; border-radius: 10px; }
.person-row-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.person-row-copy strong, .person-row-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person-row-copy strong { font-size: .76rem; }
.person-row-copy small { color: var(--relay-faint); font-size: .65rem; }
.person-role { color: var(--relay-teal); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.person-row-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 4px; }
.person-row-actions .small-button { min-height: 28px; padding: 4px 7px; font-size: .64rem; }

.relay-modal, .relay-command { width: min(calc(100vw - 30px), 480px); max-height: min(calc(100dvh - 32px), 730px); border: 1px solid var(--relay-line-strong); border-radius: 18px; padding: 0; color: var(--relay-text); background: #202430; box-shadow: var(--relay-shadow); overflow: hidden; }
.relay-modal::backdrop, .relay-command::backdrop { background: rgba(5, 7, 12, .67); backdrop-filter: blur(3px); }
.relay-modal form { display: grid; max-height: min(calc(100dvh - 32px), 730px); gap: 8px; padding: 23px; overflow: auto; overscroll-behavior: contain; }
.modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.modal-heading > div { min-width: 0; }
.modal-heading h2 { margin: 4px 0 0; font-size: 1.13rem; letter-spacing: -.03em; overflow-wrap: anywhere; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 10px; }
.switch-row { display: flex; align-items: center; gap: 9px; min-height: 32px; margin-top: 4px !important; color: var(--relay-muted) !important; cursor: pointer; font-size: .77rem !important; font-weight: 600 !important; }
.switch-row input { width: 16px !important; min-height: auto !important; height: 16px; margin: 0; accent-color: var(--relay-indigo); }
.legacy-room-policy[hidden] { display: none !important; }
.profile-dialog-identity { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 12px; border: 1px solid var(--relay-line); border-radius: 12px; background: rgba(0,0,0,.13); }
.profile-dialog-identity div { display: grid; gap: 3px; }
.profile-dialog-identity strong { font-size: .9rem; }.profile-dialog-identity small { color: var(--relay-muted); font-size: .73rem; }
.profile-danger-zone { display: grid; gap: 8px; margin-top: 12px; border: 1px solid rgba(235, 93, 112, .42); border-radius: 12px; padding: 12px; background: rgba(235, 93, 112, .07); }
.profile-danger-zone .section-kicker { color: #ff9aa9; }
.profile-danger-zone .field-help { margin: 0; }
.profile-danger-zone .button { justify-self: start; }
.delete-account-consequences { display: grid; gap: 8px; border: 1px solid rgba(235, 93, 112, .27); border-radius: 12px; padding: 11px 12px; color: var(--relay-muted); background: rgba(0,0,0,.12); font-size: .78rem; line-height: 1.46; }
.delete-account-consequences p { margin: 0; color: #ffb0ba; font-weight: 800; }
.delete-account-consequences ul, .delete-account-blockers { display: grid; gap: 5px; margin: 0; padding-left: 18px; }
.delete-account-blockers { border: 1px solid rgba(243, 198, 101, .35); border-radius: 10px; padding: 9px 10px 9px 28px; color: #f7d585; background: rgba(243, 198, 101, .07); font-size: .75rem; line-height: 1.4; }
.platform-admin-panel, .platform-close-room-panel, .app-connection-panel { display: grid; gap: 8px; margin-top: 8px; border: 1px solid var(--relay-line); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.13); }
.platform-admin-panel > .field-help, .platform-close-room-panel > .field-help, .app-connection-panel > .field-help { margin: 0; }
.app-connection-create { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }
.app-connection-create > div { display: grid; min-width: 0; gap: 3px; }
.app-connection-create > div > label { margin-top: 0; }
.app-connection-create .switch-row { align-self: end; min-height: 38px; margin: 0 !important; }
.app-connection-create .small-button { min-height: 38px; }
.app-connection-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.app-connection-list > .field-help { margin: 1px 0; }
.app-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 49px; border-radius: 9px; padding: 7px 8px; background: rgba(255,255,255,.025); }
.app-connection-controls { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.compact-switch { min-height: 28px; margin: 0 !important; font-size: .68rem !important; white-space: nowrap; }
.pairing-modal textarea { min-height: 76px; resize: vertical; font-family: var(--relay-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); font-size: .76rem; line-height: 1.4; }
.ai-user-management { display: grid; gap: 8px; margin-top: 8px; border: 1px solid var(--relay-line); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.13); }
.ai-user-management > .field-help { margin: 0; }
.connected-app-create { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr) auto; align-items: end; gap: 8px; }
.connected-app-create > div { display: grid; min-width: 0; gap: 3px; }
.connected-app-create > div > label { margin-top: 0; }
.connected-app-permissions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; margin: 0; padding: 7px 8px 8px; border: 1px solid var(--relay-line); border-radius: 9px; }
.connected-app-permissions legend { padding: 0 4px; color: var(--relay-muted); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.connected-app-permissions .compact-switch { min-height: 24px; }
.connected-app-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 52px; border-radius: 9px; padding: 8px; background: rgba(255,255,255,.025); }
.connected-app-row .person-row-copy { min-width: 0; }
.connected-app-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--relay-muted); text-overflow: ellipsis; white-space: nowrap; }
.connected-app-chip { display: inline-flex; align-items: center; border: 1px solid rgba(81, 217, 181, .25); border-radius: 999px; margin: 3px 4px 0 0; padding: 2px 5px; color: #9bf1d5; background: rgba(81, 217, 181, .08); font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.connected-app-marker { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; color: #9bf1d5; background: rgba(81, 217, 181, .16); font-size: .62rem; font-weight: 900; vertical-align: middle; }
.ai-user-list { display: grid; gap: 5px; max-height: 180px; overflow: auto; }
.ai-user-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 37px; border-radius: 8px; padding: 10px; background: rgba(255,255,255,.025); }
.ai-user-row .person-row-copy { min-width: 0; }
.ai-user-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.ai-user-create > input, .ai-user-create > #ai-user-model { grid-column: 1 / -1; width: 100%; }
.ai-user-row .content-row-actions { flex-wrap: wrap; justify-content: flex-start; }
.ai-user-row .content-row-actions > select:first-child { width: 100%; min-width: 0; }
.ai-response-mode-select { min-height: 30px; max-width: 168px; border: 1px solid var(--relay-line-strong); border-radius: 8px; padding: 4px 7px; color: var(--relay-text); background: rgba(255,255,255,.035); font-size: .68rem; }
.platform-admin-list { display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.platform-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 37px; border-radius: 8px; padding: 4px 6px; background: rgba(255,255,255,.025); }
.admin-assign { display: flex; gap: 7px; }.admin-assign input { min-width: 0; flex: 1; }.admin-assign .small-button { flex: 0 0 auto; }
.platform-directory-panel h3 { margin: 0; font-size: .86rem; }
.platform-directory-tabs, .platform-directory-controls, .platform-directory-pagination { display: flex; align-items: center; gap: 7px; }
.platform-directory-tabs .small-button { min-width: 76px; }
.platform-directory-controls input { min-width: 0; flex: 1; }
.platform-directory-view { display: grid; gap: 8px; }
.platform-directory-list { max-height: 266px; overflow: auto; }
.platform-directory-row { min-height: 56px; }
.platform-directory-row .content-row-actions { flex: 0 0 auto; }
.platform-directory-pagination { justify-content: space-between; min-height: 28px; }
.platform-directory-pagination .field-help { margin: 0; text-align: center; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 5px; }
.metric-card { min-height: 78px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--relay-line); border-radius: 12px; padding: 10px; background: rgba(0,0,0,.13); }
.metric-card span { color: var(--relay-muted); font-size: .68rem; }.metric-card strong { font-size: 1.15rem; }.metric-card.wide { grid-column: 1 / -1; }
.profile-view-content, .guide-content { display: grid; gap: 12px; }
.profile-description-input { min-height: 84px !important; resize: vertical; line-height: 1.45; }
.profile-view-identity { display: flex; align-items: center; gap: 12px; border: 1px solid var(--relay-line); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.13); }
.profile-view-identity > div { min-width: 0; display: grid; gap: 3px; }
.profile-view-identity strong, .profile-view-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-view-identity small { color: var(--relay-muted); font-size: .73rem; }
.member-profile-card { width: min(460px, calc(100vw - 28px)); background: var(--relay-panel); border-color: var(--relay-line-strong); }
.member-profile-card .modal-heading { margin-bottom: 8px; }
.member-profile-banner { min-height: 96px; border-radius: 8px 8px 0 0; background: var(--relay-panel-hover); }
.member-profile-card .profile-view-identity { border: 0; background: none; display: block; padding: 0 12px; margin-top: -48px; position: relative; }
.member-profile-card .profile-view-identity .profile-avatar { width: 88px; height: 88px; border-radius: 50%; border: 5px solid var(--relay-panel); font-size: 1.7rem; margin-bottom: 12px; }
.member-profile-card .profile-view-identity [data-presence-id]::after { width: 18px; height: 18px; border-width: 4px; }
.member-profile-card .profile-view-identity strong { font-size: 1.2rem; }
.member-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 12px; }
.member-profile-tabs { display: flex; border-bottom: 1px solid var(--relay-line); gap: 4px; }
.profile-tab { flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--relay-muted); padding: 12px 4px; font: inherit; font-size: .78rem; cursor: pointer; }
.profile-tab[aria-selected='true'] { color: var(--relay-text); border-bottom-color: var(--relay-indigo-bright); }
.member-profile-panel { min-height: 150px; border-radius: 10px; background: rgba(0,0,0,.22); padding: 14px; }
.member-profile-panel[hidden] { display: none; }
.profile-links { display: grid; gap: 8px; margin-top: 14px; }
.profile-links h3 { margin: 0; color: var(--relay-text); font-size: .82rem; }
.profile-links-list { border-top-color: var(--relay-line); }
.profile-link-row { min-width: 0; min-height: 54px; box-sizing: border-box; padding: 8px 2px; color: var(--relay-text); text-decoration: none; }
.profile-link-row:hover, .profile-link-row:focus-visible { background: var(--relay-panel-hover); }
.profile-link-row .content-row-copy { min-width: 0; }
.profile-link-row .content-row-copy strong, .profile-link-row .content-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-link-row .content-row-copy small { display: block; }
.profile-link-icon { border-radius: 13px; color: var(--relay-indigo-bright); background: rgba(119,121,255,.13); font-size: 1rem; }
.profile-about-copy { display: grid; gap: 7px; border: 1px solid var(--relay-line); border-radius: 10px; padding: 10px 11px; background: rgba(255,255,255,.025); }
.profile-about-copy p { margin: 0; color: var(--relay-text); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-about-empty { margin: 0 0 10px; }
.ai-user-row .person-row-copy strong, .ai-user-row .person-row-copy small { white-space: normal; overflow: visible; }
.ai-user-row .content-row-actions { max-width: none; }
.ai-user-list { max-height: none; overflow: visible; }
.profile-facts, .alias-list { display: grid; gap: 5px; }
.profile-fact, .alias-row, .guide-card, .direct-picker-row { display: flex; align-items: center; gap: 9px; min-height: 38px; border: 1px solid var(--relay-line); border-radius: 10px; padding: 8px 9px; background: rgba(0,0,0,.1); }
.profile-fact { justify-content: space-between; color: var(--relay-muted); font-size: .76rem; }
.profile-fact strong { color: var(--relay-text); text-align: right; }
.alias-row { justify-content: space-between; color: var(--relay-muted); font-size: .74rem; }
.alias-row strong { color: var(--relay-text); }
.guide-card { align-items: flex-start; display: grid; gap: 5px; color: var(--relay-muted); font-size: .78rem; line-height: 1.5; }
.guide-card strong { color: var(--relay-text); font-size: .82rem; }
.guide-card p { margin: 0; }
.direct-picker-list { display: grid; gap: 5px; min-height: 48px; max-height: 300px; overflow: auto; }
.direct-picker-row { justify-content: space-between; }
.direct-picker-row .content-row-copy { min-width: 0; }
.direct-picker-row .content-row-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; }
.direct-picker-row .small-button { flex: 0 0 auto; }

.relay-command { width: min(calc(100vw - 30px), 620px); }
.relay-command form { padding: 16px; }.command-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--relay-muted); font-size: .77rem; }.relay-command input { font-size: 1rem; }.command-results { display: grid; gap: 3px; max-height: 360px; margin-top: 10px; overflow: auto; }.command-result { display: flex; align-items: center; gap: 10px; min-height: 40px; border: 0; border-radius: 9px; padding: 6px 9px; color: var(--relay-text); background: transparent; text-align: left; }.command-result:hover, .command-result.is-selected { background: var(--relay-panel-hover); }.command-result-mark { width: 20px; color: var(--relay-indigo-bright); font-weight: 800; text-align: center; }.command-result-copy { min-width: 0; display: grid; gap: 1px; }.command-result-copy strong, .command-result-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.command-result-copy strong { font-size: .8rem; }.command-result-copy small { color: var(--relay-faint); font-size: .67rem; }.command-tip { margin: 10px 1px 0; color: var(--relay-faint); font-size: .69rem; }

.relay-bottom-nav, .mobile-drawer-scrim, .people-drawer-scrim { display: none; }

@media (max-width: 1180px) {
    .relay-shell, .relay-shell.people-open { grid-template-columns: 64px 250px minmax(0, 1fr); }
    .relay-people { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(330px, 86vw); box-shadow: var(--relay-shadow); }
    .people-drawer-scrim { position: fixed; z-index: 29; inset: 0; border: 0; background: rgba(4, 6, 12, .52); }
    .relay-shell.people-open .people-drawer-scrim:not([hidden]) { display: block; }
}

@media (max-width: 980px) and (min-width: 761px) {
    .relay-shell, .relay-shell.people-open { grid-template-columns: 56px 218px minmax(0, 1fr); }
    .relay-rail { gap: 8px; padding: 11px 7px; }
    .rail-button, .rail-profile { width: 39px; height: 39px; }
    .relay-sidebar { font-size: .95em; }
    .sidebar-top { padding: 13px 11px 10px; }
    .sidebar-section { padding-right: 7px; padding-left: 7px; }
    .relay-header { gap: 12px; padding: 0 18px; }
    .home-hero { grid-template-columns: 1fr; }
    .home-hero-card, .relay-card { padding: 19px; }
    .relay-page { padding: 26px 22px; }
    .message-group { padding-right: 20px; padding-left: 20px; }
}

/* Portrait tablets need the reading area more than duplicated rail controls.
   The sidebar already exposes Home, Friends, Inbox, Discover, room actions,
   and the profile, so removing only the rail preserves every destination. */
@media (max-width: 900px) and (min-width: 761px) {
    .relay-shell, .relay-shell.people-open { grid-template-columns: 218px minmax(0, 1fr); }
    .relay-rail { display: none; }
    .relay-sidebar { border-left: 0; }
    .relay-page { padding: 24px 20px; }
    .home-actions .button { flex: 1 1 150px; }
    .content-row { gap: 10px; }
}

@media (max-width: 760px) {
    .relay-auth {
        padding-top: max(80px, calc(env(safe-area-inset-top) + 64px));
        padding-right: 16px;
        padding-bottom: max(62px, calc(env(safe-area-inset-bottom) + 46px));
        padding-left: 16px;
    }
    .relay-auth-brand { top: 20px; left: 20px; }
    .auth-card { padding: 25px 20px; border-radius: 20px; }
    .relay-auth-footer { bottom: 17px; }

    .relay-shell, .relay-shell.people-open {
        height: 100dvh;
        min-height: 100dvh;
        display: block;
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }
    .relay-rail, .relay-sidebar { display: none; }
    .relay-shell.mobile-drawer-open .relay-sidebar {
        position: fixed;
        z-index: 22;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        width: min(430px, 100vw);
        box-shadow: var(--relay-shadow);
    }
    .mobile-drawer-scrim { position: fixed; z-index: 21; inset: 0; border: 0; background: rgba(4, 6, 12, .58); }
    .relay-shell.mobile-drawer-open .mobile-drawer-scrim:not([hidden]) { display: block; }
    .sidebar-mobile-close { display: inline-grid; }
    .room-channel-list { margin-left: 22px; padding-top: 7px; padding-bottom: 6px; }
    .relay-channel-item { min-height: 42px; font-size: .84rem; }
    .room-channel-heading { min-height: 42px; }
    .channel-add-button, .channel-manage-button { width: 42px; height: 42px; }
    .archived-channel-list summary { min-height: 42px; }

    .relay-main {
        height: calc(100dvh - 68px - env(safe-area-inset-bottom));
        min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
    }
    .relay-header { min-height: 58px; gap: 10px; padding: 0 12px; }
    .header-title { gap: 9px; }
    .header-actions { gap: 1px; }
    .header-icon { width: 38px; height: 40px; }
    .relay-view { min-height: 0; }

    .relay-page { padding: 23px 17px 28px; }
    .relay-page-lede { margin-bottom: 22px; }
    .home-hero { grid-template-columns: 1fr; }
    .home-hero-card, .relay-card { padding: 18px; }
    .home-actions .button { flex: 1 1 138px; }
    .relay-page-toolbar { align-items: stretch; flex-direction: column; }
    .relay-page-toolbar .button { width: 100%; }

    .message-group, .message-continuation { grid-template-columns: 35px minmax(0, 1fr); gap: 8px; padding: 6px 14px; }
    .message-continuation { padding-top: 1px; padding-bottom: 4px; }
    .message-avatar { width: 31px; height: 31px; border-radius: 10px; }
    .message-welcome { padding: 0 15px; }
    .typing-indicator { margin: 0 14px 2px; }
    .relay-composer { margin: 0 11px 10px; border-radius: 13px; }
    .composer-bottom small { display: none; }
    .message-line { flex-wrap: wrap; }
    .message-line .message-actions { flex-basis: 100%; justify-content: flex-start; margin-left: 0; }

    .relay-bottom-nav {
        position: fixed;
        z-index: 18;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        min-height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--relay-line-strong);
        background: rgba(20,23,32,.96);
        backdrop-filter: blur(18px);
    }
    .relay-bottom-nav button { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 52px; border: 0; color: var(--relay-muted); background: transparent; font-weight: 700; }
    .relay-bottom-nav button > span { font-size: 1.02rem; line-height: 1; }
    .relay-bottom-nav button small { font-size: .61rem; line-height: 1; }
    .relay-bottom-nav button:hover, .relay-bottom-nav button.is-active { color: var(--relay-text); }
    .relay-bottom-nav button.is-active > span { color: var(--relay-indigo-bright); }

    .relay-people { z-index: 30; top: 0; bottom: calc(64px + env(safe-area-inset-bottom)); width: min(360px, 93vw); }
    .people-drawer-scrim { z-index: 29; bottom: calc(64px + env(safe-area-inset-bottom)); }
    .relay-modal, .relay-command { width: min(calc(100vw - 18px), 500px); max-height: calc(100dvh - 18px); border-radius: 16px; }
    .relay-modal form { max-height: calc(100dvh - 18px); padding: 19px; padding-bottom: max(19px, env(safe-area-inset-bottom)); }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .button { flex: 1 1 130px; }
    .admin-assign, .ai-user-create, .app-connection-create, .connected-app-create { grid-template-columns: 1fr; flex-direction: column; }
    .platform-directory-controls { align-items: stretch; flex-wrap: wrap; }
    .platform-directory-controls input { flex-basis: calc(100% - 70px); }
    .connected-app-permissions { grid-column: auto; }
    .connected-app-create > .small-button { justify-self: stretch; }
    .admin-assign .small-button { width: 100%; }
    .app-connection-row, .connected-app-row { align-items: stretch; flex-direction: column; }
    .app-connection-controls { justify-content: space-between; }
    .metrics-grid { grid-template-columns: 1fr; }
    .metric-card.wide { grid-column: auto; }
    .content-row { align-items: flex-start; }
    .content-row-actions { max-width: 48%; }
    .profile-fact { align-items: flex-start; flex-direction: column; }
    .profile-fact strong { text-align: left; }
}

/* A registration form has more controls than sign-in.  On short laptop
   windows, keep its first field beneath the brand and scroll inside the
   auth surface instead of centering part of the form above the viewport. */
@media (max-height: 760px) and (min-width: 761px) {
    .relay-auth:has(#auth-sign-up-form:not([hidden])) { align-items: start; }
}

@media (max-width: 520px) {
    .relay-page { padding: 20px 14px 26px; }
    .home-hero-card, .relay-card { padding: 17px; }
    .home-actions { gap: 7px; }
    .home-actions .button { flex-basis: 132px; }

    .content-row { flex-wrap: wrap; column-gap: 10px; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
    .content-row-copy { flex: 1 1 calc(100% - 50px); }
    .content-row > .content-row-actions {
        flex: 1 1 calc(100% - 48px);
        max-width: calc(100% - 48px);
        margin-left: 48px;
        justify-content: flex-start;
    }
    .content-row > .small-button { margin-left: 48px; }

    .message-group, .message-continuation { padding-right: 12px; padding-left: 12px; }
    .message-welcome { padding: 0 13px; }
    .typing-indicator { margin-right: 12px; margin-left: 12px; }
    .relay-composer { margin-right: 9px; margin-left: 9px; }
    .archived-channel-notice { margin-right: 10px; margin-left: 10px; }
}

@media (max-width: 390px) {
    .relay-header { gap: 6px; padding-right: 9px; padding-left: 9px; }
    .header-title { gap: 7px; }
    .header-title p { display: none; }
    .header-mark { width: 28px; height: 28px; }
    .header-title h1 { font-size: .94rem; }
    .header-connected-app { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
    .header-icon { width: 34px; height: 38px; font-size: 1rem; }
    .relay-bottom-nav button small { font-size: .56rem; }
}

@media (max-width: 360px) {
    .auth-card { padding-right: 17px; padding-left: 17px; }
    .relay-modal form { padding-right: 16px; padding-left: 16px; }
    .modal-actions .button { flex-basis: 100%; }
}

/* One navigation surface, with separate direct and community lists. */
.relay-shell [hidden] { display: none !important; }
.relay-rail { display: none; }
.conversation-modes { display: flex; gap: 6px; padding: 10px; }
.conversation-mode { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--relay-muted); font: inherit; cursor: pointer; }
.conversation-mode[aria-pressed="true"] { color: var(--relay-text); background: var(--relay-elevated, #303442); }
.conversation-mode:focus-visible { outline: 2px solid #9295ff; outline-offset: 2px; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 18px 19px 10px; flex-shrink: 0; }
.sidebar-brand .relay-mark { width: 32px; height: 32px; }
.sidebar-nav, .conversation-modes { flex-shrink: 0; }
.conversation-modes { margin: 10px 10px 0; padding: 4px; border: 1px solid var(--relay-line); border-radius: 12px; }
.relay-sidebar > .sidebar-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding-top: 8px; padding-bottom: 12px; }
.relay-sidebar .sidebar-section-heading { display: none; }
.relay-sidebar .relay-room-list { align-content: start; max-height: none; }
.relay-sidebar .room-glyph { display: grid; place-items: center; flex: 0 0 28px; width: 28px; min-height: 28px; border-radius: 8px; background: var(--relay-panel-hover); font-size: .72rem; }
.home-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-destinations .button { min-width: 0; min-height: 44px; white-space: normal; }
.header-actions .room-details-button { width: auto; min-height: 40px; padding: 0 10px; font-size: .78rem; font-weight: 650; border: 1px solid var(--relay-line); }
.join-actions { margin-bottom: 20px; }
.command-heading > :first-child { flex: 1; }
.sidebar-top { justify-content: flex-end; min-height: 0; }
@media (min-width: 761px) {
    .relay-shell { grid-template-columns: 250px minmax(0, 1fr); }
    .relay-shell.people-open { grid-template-columns: 250px minmax(0, 1fr) 284px; }
    .sidebar-top { display: none; }
    .header-actions { margin-left: 12px; }
    .header-title { flex: 0 1 auto; }
    .relay-header { justify-content: flex-start; }
}
@media (min-width: 761px) and (max-width: 1200px) {
    .relay-shell.people-open { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .relay-bottom-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .relay-shell.mobile-drawer-open .sidebar-user { display: none; }
    .relay-shell.mobile-drawer-open .relay-sidebar { bottom: calc(68px + env(safe-area-inset-bottom)); }
    .relay-shell.mobile-drawer-open .relay-bottom-nav { z-index: 23; }
    .relay-shell.mobile-drawer-open .mobile-drawer-scrim { bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 1200px) { .relay-people { top: 64px; } }

/* Compact conversation controls, with round people and a distinct Relay mark. */
.composer-reply { display: flex; align-items: center; gap: 10px; padding: 5px 0 9px; border-bottom: 1px solid var(--relay-line); color: var(--relay-muted); font-size: .8rem; }
.composer-reply > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-reply .bare-icon { flex-shrink: 0; }
.relay-mark { background: transparent url('relay-icon.png?v=4') center / contain no-repeat; box-shadow: none; flex-shrink: 0; }
.relay-mark i { display: none; }
.member-menu { position: relative; flex: 0 0 32px; width: 32px; }
.member-menu summary { margin-left: auto; width: 32px; min-height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--relay-muted); list-style: none; }
.member-menu summary::-webkit-details-marker { display: none; }
.member-menu .person-row-actions { position: absolute; right: 0; top: 100%; z-index: 25; width: min(240px, 70vw); display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; background: #111318; border: 1px solid var(--relay-line); border-radius: 8px; }
.image-upload-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 16px; }
.image-upload-controls input { max-width: 100%; }
.uploaded-image { width: 100%; height: 100%; object-fit: cover; }
.room-glyph:has(.uploaded-image) { height: 28px; overflow: hidden; }
.group-edit-field { display: block; width: 100%; margin-top: 12px; }
.page-list-filters { display: flex; flex-wrap: wrap; gap: 6px; max-width: 440px; margin: 18px 0 12px; padding: 4px; border: 1px solid var(--relay-line); border-radius: 10px; }
.page-list-filters .conversation-mode { min-height: 44px; padding: 8px 12px; }
.inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.inbox-toolbar .page-list-filters { max-width: none; margin: 0; padding: 2px; }
.inbox-toolbar .page-list-filters .conversation-mode { min-height: 34px; padding: 5px 9px; }
.inbox-search { display: flex; align-items: center; gap: 6px; width: min(100%, 300px); min-height: 36px; box-sizing: border-box; padding: 0 5px 0 10px; border: 1px solid var(--relay-line); border-radius: 7px; color: var(--relay-muted); background: #12151c; }
.inbox-search:focus-within { border-color: var(--relay-line); }
.inbox-search-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.inbox-search input { width: 100%; min-width: 0; height: 34px; border: 0; outline: 0; color: var(--relay-text); background: transparent; font: inherit; font-size: .8rem; }
.inbox-search input::placeholder { color: var(--relay-faint); }
.inbox-search-clear { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 0; border-radius: 5px; color: var(--relay-muted); background: transparent; font: inherit; font-size: 1rem; line-height: 1; }
.inbox-search-clear:hover, .inbox-search-clear:focus-visible { color: var(--relay-text); background: var(--relay-panel-hover); }
.inbox-show-more { display: block; margin: 16px auto; min-height: 44px; }
.live-draft-control { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: .75rem; color: var(--relay-muted); }
.live-draft-control input { width: 16px; height: 16px; margin: 0; }
.live-draft-preview { margin: 5px 0; padding: 7px 9px; border-left: 2px solid var(--relay-muted); overflow-wrap: anywhere; white-space: pre-wrap; font-style: italic; }
.channel-icon { display: inline-block; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.relay-channel-item { display: flex; align-items: center; gap: 7px; }
.profile-avatar, .profile-avatar.large, .content-row-avatar,
.person-row .content-row-avatar, .direct-picker-row .content-row-avatar,
.message-avatar { border-radius: 50%; overflow: hidden; }
[data-presence-id] { overflow: visible; }
[data-presence-id] > .uploaded-image { border-radius: inherit; display: block; }

/* Restrained density: keep the existing layout, simplify its controls. */
.relay-app .button, .relay-modal .button { min-height: 32px; padding: 6px 11px; border-radius: 6px; font-size: .8rem; font-weight: 600; }
.relay-app .small-button, .relay-modal .small-button { min-height: 28px; padding: 4px 8px; border-radius: 5px; font-weight: 550; }
.sidebar-page-button { min-height: 34px; padding: 6px 10px; border-radius: 6px; font-weight: 550; }
.conversation-mode { min-height: 32px; padding: 6px 10px; border-radius: 6px; font-weight: 550; }
.home-hero-card, .relay-card { border-radius: 8px; padding: 16px; background: var(--relay-panel); }
.home-hero-card.highlight { background: var(--relay-panel); }
.home-hero-card.highlight::after { display: none; }
.quiet-loading { display: inline-block; padding: 4px 0; color: var(--relay-muted); font-size: 1rem; letter-spacing: 3px; line-height: 1; }
.room-history-notice:has(.quiet-loading) { min-height: 24px; padding: 4px 12px; }
.member-profile-card .profile-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; overflow: visible; }
.member-profile-card .profile-view-identity [data-presence-id]::after { right: 1px; bottom: 1px; z-index: 2; }
.member-profile-card .profile-view-identity .uploaded-image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-connection { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 9px 10px; }
.member-profile-panel, .profile-links { min-width: 0; }
.relay-command { border-radius: 10px; }
.relay-command input { min-height: 40px; border: 1px solid var(--relay-line); border-radius: 8px; padding: 8px 12px; background: #12151c; font-size: .85rem; }
.command-results { gap: 0; border-top: 1px solid var(--relay-line); }
.command-result.content-row { width: 100%; min-height: 54px; padding: 8px; border-bottom: 1px solid var(--relay-line); border-radius: 0; }
.command-result-mark.content-row-avatar { width: 32px; height: 32px; border-radius: 50%; background: #383b43; color: var(--relay-text); font-size: .72rem; font-weight: 600; }
.command-result-copy strong { font-size: .85rem; font-weight: 600; }
.command-result-copy small { font-size: .75rem; }
.relay-composer { position: relative; }
.mention-picker { position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 0; right: 0; max-height: min(240px, 35dvh); overflow-y: auto; padding: 4px; background: var(--relay-panel); border: 1px solid var(--relay-line-strong); border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.mention-option { display: block; width: 100%; padding: 9px 10px; min-height: 36px; border: 0; border-radius: 4px; color: var(--relay-text); background: transparent; text-align: left; font-size: .82rem; }
.mention-option:hover, .mention-option[aria-selected='true'] { background: var(--relay-panel-hover); }
@media (pointer: coarse) {
    .relay-app .button, .relay-modal .button, .relay-app .small-button, .relay-modal .small-button,
    .sidebar-page-button, .conversation-mode { min-height: 40px; }
}
.message-meta { align-items: center; min-height: 30px; }
.message-meta .message-menu { position: relative; margin: 0 0 0 3px; flex: 0 0 auto; }
.message-menu > summary { min-height: 28px; width: 30px; line-height: 1; opacity: .55; }
.message-group:hover .message-menu > summary, .message-menu:focus-within > summary { opacity: 1; }
.message-menu-panel { position: absolute; z-index: 12; top: 100%; left: 0; width: 210px; max-width: calc(100vw - 100px); padding: 6px; background: #111318; box-shadow: 0 8px 24px #0006; }
.message-menu-panel .message-actions { display: grid; width: 100%; gap: 2px; }
.message-menu-panel .message-action-button { width: 100%; min-height: 36px; text-align: left; background: transparent; font-weight: 500; border: 0; }
.message-menu-panel .message-action-button:hover, .message-menu-panel .message-action-button:focus-visible { background: #5865f2; color: white; }
.message-menu-panel .message-action-button.danger { color: #ff858b; }
.message-menu-panel .message-action-button.danger:hover { background: #a52e39; color: white; }
.message-reactions { gap: 5px; margin-top: 5px; }
.reaction-chip { min-height: 28px; padding: 3px 8px; border-radius: 7px; border-color: transparent; background: #24262f; font-size: .8rem; }
.reaction-chip.is-mine { color: #e0e3ff; border-color: #7981ef; background: #5865f233; }
@media (max-width: 760px) {
    .inbox-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
    .inbox-toolbar .page-list-filters { width: max-content; max-width: 100%; }
    .inbox-search { width: 100%; }
    .message-menu-panel { position: fixed; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; max-width: none; max-height: 50dvh; overflow: auto; }
    .message-menu > summary { min-height: 36px; width: 36px; opacity: 1; }
}
/* Targeted control cleanup; preserve the established layout and theme. */
.conversation-row { display: flex; align-items: center; min-width: 0; gap: 2px; }
.conversation-row > .relay-room-item { flex: 1; min-width: 0; }
.conversation-actions { display: flex; flex: 0 0 auto; gap: 1px; }
.conversation-actions .header-icon { width: 30px; height: 36px; background: transparent; }
.conversation-actions .header-icon:hover,
.conversation-actions .header-icon[aria-expanded="true"] { background: var(--relay-panel-hover); }
input[type="search"]:focus, .relay-command input:focus {
    border-color: var(--relay-line-strong); outline: none; box-shadow: none;
}
input[type="search"]:focus-visible, .relay-command input:focus-visible {
    outline: 1px solid var(--relay-muted); outline-offset: 1px;
}
.relay-command input:focus { background: transparent; }
.sidebar-page-button, .conversation-mode, .relay-room-item, .relay-channel-item {
    font-family: inherit; font-size: .83rem; font-weight: 650;
}
.button, .small-button, .auth-provider-button { font-family: inherit; font-size: .83rem; font-weight: 650; }
/* Maintenance is a focused access state, not a redesign of the chat shell. */
.maintenance-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; overflow: auto; background: #1e1f22; color: #dbdee1; }
.maintenance-card { width: min(100%, 520px); padding: 28px; border: 1px solid #3f4147; border-radius: 12px; background: #2b2d31; }
.maintenance-card h1 { font-size: 24px; line-height: 1.3; }
.maintenance-card p { line-height: 1.5; overflow-wrap: anywhere; }
#platform-maintenance-panel label { display: grid; gap: 6px; margin-block: 10px; }
#platform-maintenance-panel textarea { resize: vertical; min-height: 70px; width: 100%; font: inherit; }