/* GENERATED by scope-overrides.py from ../overrides.src.css (The Hex) and ../1999.src.css (1999); do not edit by hand.
   Every rule is scoped to one theme: Element only injects <style title="custom-theme-compound"> while a custom theme is active
   (removed on every switch) and marks <body> cpd-theme-dark / cpd-theme-light. Stock themes get zero overrides. */

/* ===== overrides.src.css ===== */
/* hex.gripe overrides for things Element's custom-theme tokens can't express.
   Loaded from index.html (install.sh re-adds the <link> after Element upgrades).
   Selectors use class *prefixes* because compound's hashed suffixes change between releases. */

/* (a) Sign in on the welcome + login pages: dark fill, bright green 2px border and text.
   Heavier than Create Account (secondary: 1px dim border). */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_DefaultWelcome_buttons a[data-kind="primary"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_AuthPage [class^="_button_"][data-kind="primary"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_AuthPage input.mx_Login_submit {
    background: #101010 !important;
    border: 2px solid #00dd00 !important;
    color: #00dd00 !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0, 221, 0, 0.45);
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_DefaultWelcome_buttons a[data-kind="primary"]:hover,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_AuthPage [class^="_button_"][data-kind="primary"]:hover,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_AuthPage input.mx_Login_submit:hover {
    background: #0b2a0b !important;
    border-color: #66ff66 !important;
    color: #66ff66 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_DefaultWelcome_buttons a[data-kind="primary"] > svg,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_AuthPage [class^="_button_"][data-kind="primary"] > svg { color: currentColor !important; }

/* (c) Room list filter chips (Unreads / People / Rooms / Mentions). */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class^="_chat-filter_"] {
    background: transparent !important;
    border: 1px solid #00cc00 !important;
    color: #00dd00 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class^="_chat-filter_"]:hover {
    background: #0b2a0b !important;
    border-color: #66ff66 !important;
    color: #66ff66 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class^="_chat-filter_"][aria-selected="true"] {
    background: #00dd00 !important;
    border-color: #00dd00 !important;
    color: #101010 !important;
}

/* (b) Avatar + display-name palette (all green), applied directly on the elements.
   The custom theme sets --cpd-color-{bg,text}-decorative-1..6 too, but inside the timeline those resolved to
   stock Compound values (e.g. data-color=2 -> cyan-300 #001b4e), so set the final variables here, outside all layers. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color] { --cpd-avatar-bg: #0f3d0f; --cpd-avatar-color: #66ff66; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color="2"] { --cpd-avatar-bg: #1a3d1a; --cpd-avatar-color: #88ee88; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color="3"] { --cpd-avatar-bg: #1f4f1f; --cpd-avatar-color: #c8ffc8; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color="4"] { --cpd-avatar-bg: #0a3d24; --cpd-avatar-color: #33dd88; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color="5"] { --cpd-avatar-bg: #0a3f36; --cpd-avatar-color: #7dffcc; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [data-color="6"] { --cpd-avatar-bg: #0a5a0a; --cpd-avatar-color: #00ff00; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color1 { color: #66ff66 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color2 { color: #88ee88 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color3 { color: #c8ffc8 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color4 { color: #33dd88 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color5 { color: #7dffcc !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Username_color6 { color: #00ff00 !important; }

/* (3) IRC density. Timeline tiles are Element's shared-components EventTile; match on class
   substrings (e.g. "_layoutIrc_") because the hashed suffixes change between Element releases. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] > [class*="_slotAvatar_"] { display: none !important; }       /* no avatar column */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] [class*="_line_"] {
    border-radius: 0 !important;
    padding-block: 0 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] { padding-block: 0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] [class*="_slotSender_"] .mx_DisambiguatedProfile_displayName::before { content: "<"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] [class*="_slotSender_"] .mx_DisambiguatedProfile_displayName::after { content: ">"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] [class*="_slotSender_"] { text-align: end; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] [class*="_slotTimestamp_"] { min-width: 4.2em !important; justify-content: flex-start !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] .mx_MessageTimestamp { color: #00aa00 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] .mx_MessageTimestamp::before { content: "["; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_layoutIrc_"] .mx_MessageTimestamp::after { content: "]"; }

/* Day dividers: ──── <date> ──── in VT323, phosphor green */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_timelineSeparator_"] {
    font-family: VT323, "Courier New", monospace !important;
    color: #00cc00 !important;
    letter-spacing: 1px;
    margin: 2px 0 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_timelineSeparator_"] > hr { border-bottom: 1px dashed #008800 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_timelineSeparator_"] > :not(hr),
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_timelineSeparator_"] h2 { font: inherit !important; color: inherit !important; margin: 0 8px !important; }

/* (4) Messages that mention you: red left border + a brief red flash when the tile appears */
@keyframes hexMentionFlash {
    from { background-color: rgba(204, 48, 48, 0.45); }
    to   { background-color: rgba(204, 48, 48, 0.08); }
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_stateHighlighted_"] [class*="_line_"] {
    border-left: 3px solid #cc3030 !important;
    background-color: rgba(204, 48, 48, 0.08) !important;
    animation: hexMentionFlash 1.2s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {

    :root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_stateHighlighted_"] [class*="_line_"] { animation: none; }

}

/* (4b) Mention pills (your name, @room, keywords) and highlighted lines: square corners, per DESIGN.md (no border-radius). */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Pill.mx_UserPill_me,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Pill.mx_AtRoomPill,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) .mx_Pill.mx_KeywordPill,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-dark"]) [class*="_stateHighlighted_"] [class*="_line_"] { border-radius: 0 !important; }


/* ===== 1999.src.css ===== */
/* "1999" theme: mIRC32 on Windows 98. Scoped (by scope-overrides.py) to custom theme + light body, i.e. only "1999". */

:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) {
    --w98-raised: inset -1px -1px #000000, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --w98-sunken: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #000000, inset -2px -2px #dfdfdf;
}

/* Windows 98: square corners everywhere, grey scrollbars */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) *,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) *::before,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) *::after { border-radius: 0 !important; }

/* Window chrome: grey face around sunken white panels */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomListPanel,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RightPanel { background: #c0c0c0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomView_body { background: #ffffff !important; box-shadow: var(--w98-sunken); margin: 2px; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer { background: #c0c0c0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RightPanel { box-shadow: var(--w98-raised); }

/* Room header as an active Win98 title bar */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomHeader { background: linear-gradient(90deg, #000080, #1084d0) !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomHeader,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomHeader * { color: #ffffff !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomHeader h1,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomHeader [class*="heading"] { font-weight: bold !important; }


/* Buttons and filter chips: raised grey, pressed while clicked/selected */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_button_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_chat-filter_"] {
    background: #c0c0c0 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: var(--w98-raised) !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_button_"]:active,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_chat-filter_"]:active,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_chat-filter_"][aria-selected="true"] {
    box-shadow: var(--w98-sunken) !important;
    font-weight: bold;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_button_"]:focus-visible,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_chat-filter_"]:focus-visible { outline: 1px dotted #000000; outline-offset: -4px; }

/* Room list entries as mIRC switchbar tabs */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_roomListItem_"] [class*="_container_"] {
    background: #c0c0c0 !important;
    box-shadow: var(--w98-raised);
    margin: 2px 4px;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_roomListItem_"][class*="_selected_"] [class*="_container_"] {
    background: #dfdfdf !important;
    box-shadow: var(--w98-sunken);
    font-weight: bold;
}

/* IRC timeline: [HH:MM] <nick> message, no avatar column, tight rows */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] > [class*="_slotAvatar_"] { display: none !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] { padding-block: 0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] [class*="_line_"] { padding-block: 0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] { --event-tile-irc-name-width: 12ch; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] [class*="_slotSender_"] { text-align: start; min-width: 10ch; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] [class*="_slotSender_"] .mx_DisambiguatedProfile_displayName::before { content: "<"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] [class*="_slotSender_"] .mx_DisambiguatedProfile_displayName::after { content: ">"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] [class*="_slotTimestamp_"] { min-width: 4.2em !important; justify-content: flex-start !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] .mx_MessageTimestamp { color: #000000 !important; font-weight: bold; font-size: inherit !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] .mx_MessageTimestamp::before { content: "["; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_layoutIrc_"] .mx_MessageTimestamp::after { content: "]"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_slotBody_"] { font-size: 18px; font-weight: normal; }   /* (3)+(10) Fixedsys is crispest at 16px; 18px trades a little sharpness for size */

/* Bold, saturated nick colors (6 slots = Element's fixed name-color hash) */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_DisambiguatedProfile_displayName { font-weight: bold !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color1 { color: #008000 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color2 { color: #cc0000 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color3 { color: #0000cc !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color4 { color: #b35900 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color5 { color: #660066 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Username_color6 { color: #008080 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color] { --cpd-avatar-bg: #008000; --cpd-avatar-color: #ffffff; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color="2"] { --cpd-avatar-bg: #cc0000; --cpd-avatar-color: #ffffff; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color="3"] { --cpd-avatar-bg: #0000cc; --cpd-avatar-color: #ffffff; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color="4"] { --cpd-avatar-bg: #b35900; --cpd-avatar-color: #ffffff; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color="5"] { --cpd-avatar-bg: #660066; --cpd-avatar-color: #ffffff; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [data-color="6"] { --cpd-avatar-bg: #008080; --cpd-avatar-color: #ffffff; }

/* /me actions in mIRC action magenta */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateEmote_"] [class*="_slotBody_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateEmote_"] [class*="_slotBody_"] * { color: #cc00cc !important; font-style: italic; }

/* System messages (joins, name changes, collapsed summaries) in bold */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateInfo_"] [class*="_slotBody_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TextualEvent,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_GenericEventListSummary { font-weight: bold !important; }

/* ---------- nitpick pass ---------- */

/* Square avatars everywhere: Compound avatars use --cpd-avatar-radius (default 50%); room-list avatars use SVG masks */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_avatar_"] { --cpd-avatar-radius: 0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar_icon,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar_presence {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Space icons (far-left column): raised bevel tiles, pressed when selected */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton [class*="_avatar_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
    box-shadow: var(--w98-raised) !important;
    border: none !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton_active [class*="_avatar_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_icon {
    box-shadow: var(--w98-sunken) !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_SpacePanel .mx_SpaceButton_selectionWrapper { background: transparent !important; }

/* Reply quotes flattened to one indented line: > <blaire> !roll 20 */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyChain {
    border: none !important;
    padding: 0 0 0 1.5em !important;
    margin: 0 !important;
    background: transparent !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile { padding: 0 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile > a {
    display: flex !important;
    align-items: baseline;
    gap: 0.5em;
    white-space: nowrap;
    overflow: hidden;
    color: #404040 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile > a::before { content: ">"; color: #404040; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile .mx_BaseAvatar,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile [class*="_avatar_"] { display: none !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile .mx_DisambiguatedProfile_displayName::before { content: "<"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile .mx_DisambiguatedProfile_displayName::after { content: ">"; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile .mx_EventTile_content {
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyTile .mx_EventTile_content * { display: inline !important; font-weight: normal; color: inherit; background: none; border: 0; padding: 0; margin: 0; }

/* System messages: "*** blaire created and configured the room", bold black, no avatar bullets */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateInfo_"] [class*="_slotAvatar_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_GenericEventListSummary_avatars { display: none !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateInfo_"] [class*="_slotBody_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_GenericEventListSummary_summary { color: #000000 !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_stateInfo_"] [class*="_slotBody_"]::before,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_GenericEventListSummary_summary::before { content: "*** "; font-weight: bold; }

/* Message input: Win98 sunken text field */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer .mx_BasicMessageComposer,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer .mx_WysiwygComposer_Editor {
    background: #ffffff !important;
    box-shadow: var(--w98-sunken) !important;
    border: none !important;
    padding: 4px 6px !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_wrapper,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_row { background: transparent !important; }

/* Room list search ("Search Ctrl K"): ONE sunken text field. It's a Compound button (#room-list-search-button)
   wrapping _search_container_ / _search_text_ spans and a <kbd>; only the button itself gets the bevel. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) #room-list-search-button {
    background: #ffffff !important;
    box-shadow: var(--w98-sunken) !important;
    border: none !important;
    color: #000000 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) #room-list-search-button *,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) #room-list-search-button kbd {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Composer action icons (emoji, attach, ...): small raised squares, pressed while clicked */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_actions > *,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_actions button {
    background: #c0c0c0 !important;
    box-shadow: var(--w98-raised) !important;
    border: none !important;
    min-width: 28px;
    min-height: 28px;
    margin-left: 2px;
    color: #000000 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_actions > *:active,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer_actions button:active { box-shadow: var(--w98-sunken) !important; }

/* Space-name dropdown caret: small raised square button */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomListPanel [class*="_header_"] [class*="_chevron_"] {
    background: #c0c0c0;
    box-shadow: var(--w98-raised);
    color: #000000 !important;
    width: 16px !important;
    height: 16px !important;
    padding: 1px;
}

/* Scrollbars. Chrome/Edge/Safari: full Win98 scrollbar (::-webkit-scrollbar). Firefox only supports colours. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar { width: 16px; height: 16px; background: #dfdfdf; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-track { background: #dfdfdf; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-thumb { background: #c0c0c0; box-shadow: var(--w98-raised); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background-color: #c0c0c0; box-shadow: var(--w98-raised); background-repeat: no-repeat; background-position: center; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button:active { box-shadow: var(--w98-sunken); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4h8L4 0z'/%3E%3C/svg%3E"); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E"); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8'%3E%3Cpath d='M4 0v8L0 4z'/%3E%3C/svg%3E"); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8'%3E%3Cpath d='M0 0v8l4-4z'/%3E%3C/svg%3E"); }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) ::-webkit-scrollbar-corner { background: #c0c0c0; }
@supports (-moz-appearance: none) {

    :root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) * { scrollbar-color: #c0c0c0 #dfdfdf; scrollbar-width: auto; }

}

/* ---------- polish pass 2 ---------- */

/* (1) No focus rings on non-interactive containers; real controls keep theirs (dotted, below) */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomView_body,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomView_MessageList,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomView_timeline,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MessageComposer,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomListPanel,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RightPanel,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_line_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_root_"].mx_EventTile {
    outline: none !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) button:focus-visible,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) a:focus-visible,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) input:focus-visible,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [role="button"]:focus-visible,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [role="option"]:focus-visible {
    outline: 1px dotted #000000 !important;
    outline-offset: -4px;
}

/* (4) Legacy Element buttons (e.g. the room intro's "Invite to ..." pair) match the Compound ones:
   identical raised grey in normal state, pressed only on hover/click. Links stay links. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_AccessibleButton_hasKind:not([class*="_kind_link"]) {
    background: #c0c0c0 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: var(--w98-raised) !important;
    font-weight: normal !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_AccessibleButton_hasKind:not([class*="_kind_link"]):hover,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_AccessibleButton_hasKind:not([class*="_kind_link"]):active,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_button_"]:hover {
    box-shadow: var(--w98-sunken) !important;
}

/* (5) No read receipts (mIRC had none) */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) [class*="_slotReceipt_"],
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReadReceiptGroup,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_EventTile_receiptSent,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_EventTile_receiptSending { display: none !important; }

/* (6) "expand" / "collapse" on grouped events: classic blue underlined hyperlink */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_GenericEventListSummary_toggle,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_ReplyChain_show {
    color: #0000ff !important;
    text-decoration: underline !important;
    background: none !important;
    box-shadow: none !important;
}

/* (8, partial) Member list role label ("Admin", "Moderator"): compact mIRC-style tag instead of grey subtitle */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_MemberTileView .mx_MemberTileView_userLabel { color: #000080 !important; font-weight: bold; }

/* ---------- text fields: one sunken Win98 border per field (outer layer only) ---------- */
/* Right-panel "Search messages…" (Compound Search: rounded wrapper around an <input> + icon) */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomSummaryCard_search {
    background: #ffffff !important;
    box-shadow: var(--w98-sunken) !important;
    border: none !important;
    color: #000000 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomSummaryCard_search input,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomSummaryCard_search svg,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_RoomSummaryCard_search * {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
/* Compound text inputs (topic / name edit-in-place, dialogs): the input itself is the field */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) input[class*="_control_"]:not([type="checkbox"]):not([type="radio"]),
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) textarea[class*="_control_"] {
    background: #ffffff !important;
    box-shadow: var(--w98-sunken) !important;
    border: none !important;
    color: #000000 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) input[class*="_control_"]:not([type="checkbox"]):not([type="radio"]):focus,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) textarea[class*="_control_"]:focus { outline: 1px dotted #000000 !important; outline-offset: -4px; }
/* Older Element fields: the .mx_Field wrapper is the field, its input/textarea/select are borderless inside */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Field {
    background: #ffffff !important;
    box-shadow: var(--w98-sunken) !important;
    border: none !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Field input,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Field textarea,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Field select {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Field label { background: #ffffff !important; }

/* ---------- dialogs ---------- */
/* Settings (and other tabbed dialogs) left nav. Element hardcodes color:#fff on the active AND hovered tab,
   on a --cpd-color-bg-subtle-secondary background (light grey in 1999) = unreadable. Win98 list selection instead. */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabLabel,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
    color: #000000 !important;
    background: transparent;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabLabel svg { color: inherit !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover:not(.mx_TabbedView_tabLabel_active) {
    background: #dfdfdf !important;
    color: #000000 !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabLabel_active,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text,
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
    background: #000080 !important;
    color: #ffffff !important;
}

/* Dialog window: raised Win98 frame, navy title bar, chunky square close button */
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Dialog { box-shadow: var(--w98-raised) !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Dialog_title {
    background: linear-gradient(90deg, #000080, #1084d0) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 3px 6px !important;
    text-align: start !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Dialog_cancelButton {
    background: #c0c0c0 !important;
    box-shadow: var(--w98-raised) !important;
    width: 18px !important;
    height: 18px !important;
    padding: 2px !important;
}
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Dialog_cancelButton:active { box-shadow: var(--w98-sunken) !important; }
:root:has(> head > style[title="custom-theme-compound"]):has(> body[class*="cpd-theme-light"]) .mx_Dialog_cancelButton svg { color: #000000 !important; stroke: #000000; stroke-width: 1.5px; }
