/* Stylesheet overrides for the web app, linked into index.html by setup.sh
 * and served by the element-web container at /ui-overrides.css.
 *
 * Part 1: with E2EE_ENABLED=false every room is unencrypted, and Element
 * Web decorates that state with open padlock icons, a "Not encrypted"
 * badge and security toggles that read as alarming to non technical
 * members. These rules hide that iconography. The matching wording is
 * replaced separately through custom-translations.json.
 *
 * Part 2: the Anointed skin. Colors and fonts live in config.json
 * custom_themes (variables first); this file only carries what CSS
 * variables cannot reach: glass on floating surfaces, radii, scrollbars,
 * the auth page, and residual upstream branding. Mode-specific rules
 * scope on body.cpd-theme-dark / body.cpd-theme-light, which theme.ts
 * sets for custom themes too (stable public behavior, not minified).
 *
 * The selectors are verified against the markup of the pinned
 * ELEMENT_WEB_TAG (v1.12.24). After bumping that tag, re-run ./setup.sh
 * and sanity check the spots listed in docs/ADMIN.md.
 */

/* ------------------------------------------------------------------ */
/* Part 1: encryption iconography (unchanged)                          */
/* ------------------------------------------------------------------ */

/* Composer: the open padlock next to the message box, and its tooltip. */
.mx_MessageComposer_e2eIconWrapper {
  display: none !important;
}

/* Same padlock in the labs rich text composer (off by default). */
.mx_SendWysiwygComposer .mx_E2EIcon {
  display: none !important;
}

/* Room info panel: the "Not encrypted" badge. The badge has no class of
 * its own, so it is matched by the icon it contains: the open padlock's
 * SVG path starts with "M6 22q-.825" (the closed padlock differs in the
 * last digit, so this prefix only ever matches the open one). */
.mx_RoomSummaryCard_badges span[data-kind="blue"]:has(path[d^="M6 22q-.825"]) {
  display: none !important;
}

/* Create room dialog: the disabled security toggle row and its server
 * notice. The only other direct child inline-fields of the form are the
 * knock publish checkbox (excluded below) and a labs security toggle;
 * the federation toggle lives inside <details>, so "form >" spares it. */
.mx_CreateRoomDialog form > [class*="_inline-field_"]:not(.mx_CreateRoomDialog_labelledCheckbox) {
  display: none !important;
}

/* Room settings, Security and Privacy tab: the first fieldset is the
 * security toggle block ("Your server requires encryption to be
 * disabled."), which duplicates what the server already decides. */
#mx_tabpanel_ROOM_SECURITY_TAB .mx_SettingsSection_subSections > fieldset.mx_SettingsFieldset:first-of-type {
  display: none !important;
}

/* User settings, Security tab: the notice that the server admin disabled
 * a feature members never see anyway. Single use class. */
.mx_SecurityUserSettingsTab_warning {
  display: none !important;
}

/* New DM intro bubble: logically suppressed on this deployment already
 * (the well-known publishes default false); kept as belt and braces. */
.mx_NewRoomIntro .mx_cryptoEvent {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Part 2: Anointed skin                                               */
/* ------------------------------------------------------------------ */

/* 2.1 Local design tokens. Everything below reads these, so a future
 * tint change is a two-line edit. Values mirror the mobile app's glass
 * tokens (theme.ts glassBg / glassBgStrong / glassBorder / glow). */
body.cpd-theme-dark {
  --ac-glass-bg: rgba(20, 20, 20, 0.65);
  --ac-glass-bg-strong: rgba(10, 10, 10, 0.9);
  --ac-glass-border: rgba(255, 255, 255, 0.08);
  --ac-glow: rgba(109, 53, 255, 0.45);
  --ac-scrollbar-thumb: #3a3a3a;
}
body.cpd-theme-light {
  --ac-glass-bg: rgba(255, 255, 255, 0.7);
  --ac-glass-bg-strong: rgba(253, 253, 253, 0.9);
  --ac-glass-border: rgba(33, 33, 33, 0.08);
  --ac-glow: rgba(109, 53, 255, 0.3);
  --ac-scrollbar-thumb: #c9c9d4;
}

/* 2.2 Scrollbars. The built theme CSS compiles $scrollbar-thumb-color to
 * a literal, so a variable cannot reach it; restyle with the same shape
 * upstream uses (AutoHideScrollbar.pcss). Specificity note: upstream's
 * auto-hide rule (.mx_AutoHideScrollbar:not(:hover), two classes) still
 * beats these one-class rules, so auto-hiding keeps working. */
body.cpd-theme-dark, body.cpd-theme-dark *,
body.cpd-theme-light, body.cpd-theme-light * {
  scrollbar-color: var(--ac-scrollbar-thumb) transparent;
}
body.cpd-theme-dark ::-webkit-scrollbar-thumb,
body.cpd-theme-light ::-webkit-scrollbar-thumb {
  background-color: var(--ac-scrollbar-thumb);
  border-radius: 999px;
}

/* 2.3 Glass. Only surfaces that genuinely FLOAT OVER other content get
 * glass; the room list, header and composer are flex siblings of the
 * timeline (nothing renders behind them), so backdrop-filter there is a
 * no-op and they stay flat by design. Everything sits inside @supports,
 * so browsers without backdrop-filter keep the fully opaque theme
 * colors from config.json; readability never depends on blur. */
@supports (backdrop-filter: blur(1px)) {
  /* Dialogs: scrim-grade glass (glassBgStrong), text-heavy surface. */
  body.cpd-theme-dark .mx_Dialog,
  body.cpd-theme-light .mx_Dialog {
    background-color: var(--ac-glass-bg-strong);
    backdrop-filter: blur(24px);
    border: 1px solid var(--ac-glass-border);
  }
  /* Dialog backdrop: a light blur sells the depth; color comes from the
   * theme's sidebar-color-50pct variable, untouched here. */
  body.cpd-theme-dark .mx_Dialog_wrapper .mx_Dialog_border,
  body.cpd-theme-dark .mx_Dialog_wrapper,
  body.cpd-theme-light .mx_Dialog_wrapper {
    backdrop-filter: blur(6px);
  }
  /* Context menus and the emoji/reaction pickers hover over the
   * timeline: scrim-grade glass so labels hold AA over any content. */
  body.cpd-theme-dark .mx_ContextualMenu,
  body.cpd-theme-light .mx_ContextualMenu {
    background-color: var(--ac-glass-bg-strong);
    backdrop-filter: blur(24px);
    border: 1px solid var(--ac-glass-border);
  }
  /* Hover message action bar: small, icon-only, lighter glass is safe. */
  body.cpd-theme-dark .mx_MessageActionBar,
  body.cpd-theme-light .mx_MessageActionBar {
    background-color: var(--ac-glass-bg);
    backdrop-filter: blur(16px);
    border-color: var(--ac-glass-border);
  }
  /* Jump-to-bottom pill floats over scrolling messages. */
  body.cpd-theme-dark .mx_JumpToBottomButton,
  body.cpd-theme-light .mx_JumpToBottomButton {
    background-color: var(--ac-glass-bg);
    backdrop-filter: blur(16px);
  }
}

/* 2.4 Radii, app scale: sheets/dialogs 16, menus/cards 12, pills 999.
 * These are fixed px literals in the built CSS, unreachable by variable.
 * Only top-level containers are touched; inner layout is left alone. */
.mx_Dialog {
  border-radius: 16px;
}
.mx_ContextualMenu {
  border-radius: 12px;
}

/* 2.5 Accent states. The violet glow the app puts under primary CTAs
 * (theme.ts glow, FAB shadow). Kept subtle; delete this block first if
 * a future tag makes dialogs look noisy. */
.mx_AccessibleButton_kind_primary {
  box-shadow: 0 6px 14px var(--ac-glow);
}
.mx_AccessibleButton_kind_primary:active {
  box-shadow: 0 3px 8px var(--ac-glow);
}

/* 2.6 Auth pages. The custom theme variables cover the modal, but the
 * page canvas behind it keeps upstream's backdrop; paint it with the
 * app base layer per mode. */
body.cpd-theme-dark .mx_AuthPage {
  background: #0a0a0a;
}
body.cpd-theme-light .mx_AuthPage {
  background: #fdfdfd;
}

/* 2.7 Residual upstream branding. The brand name and wordmark already
 * come from config.json "brand" and custom-translations.json; what
 * remains is the auth footer's links to the upstream vendor's sites.
 * Attribute selectors, so unrelated footer items survive upgrades. */
.mx_AuthFooter a[href*="element.io"],
.mx_AuthFooter a[href*="matrix.org"] {
  display: none !important;
}