/* Branded Element auth page (sign in / register / forgot password).
 *
 * Injected into Element's index.html at provision time. Every rule is scoped
 * under .mx_AuthPage so the chat UI keeps Element's own theme untouched —
 * including the Compound design tokens, which are redefined here rather than
 * globally so components inside the auth page inherit the brand treatment
 * without switching the app's theme.
 */

.mx_AuthPage {
  --b-accent: #3A0E14;
  --b-tint: #F4F1F1;
  --text: #F7F6F5;
  --muted: rgba(247, 246, 245, 0.62);
  --faint: rgba(247, 246, 245, 0.42);
  --hair: rgba(255, 255, 255, 0.12);
  --panel: rgba(14, 13, 16, 0.78);
  --focus: color-mix(in oklab, var(--b-accent) 50%, #F7F6F5);

  /* Compound tokens, scoped: components inherit these down the auth tree. */
  --cpd-color-text-primary: var(--text);
  --cpd-color-text-secondary: var(--muted);
  --cpd-color-text-placeholder: var(--faint);
  --cpd-color-text-on-solid-primary: #121114;
  --cpd-color-icon-primary: var(--text);
  --cpd-color-icon-secondary: var(--muted);
  --cpd-color-icon-tertiary: var(--faint);
  --cpd-color-bg-canvas-default: transparent;
  --cpd-color-bg-subtle-primary: rgba(255, 255, 255, 0.07);
  --cpd-color-bg-subtle-secondary: rgba(255, 255, 255, 0.045);
  --cpd-color-bg-action-primary-rest: #FBFAF9;
  --cpd-color-bg-action-primary-hovered: #FFFFFF;
  --cpd-color-bg-action-primary-pressed: #E9E5E4;
  --cpd-color-border-interactive-primary: var(--hair);
  --cpd-color-border-interactive-secondary: var(--hair);

  background:
    radial-gradient(1100px 620px at 10% -12%, color-mix(in oklab, var(--b-accent) 64%, transparent) 0%, transparent 58%),
    radial-gradient(860px 560px at 88% 110%, color-mix(in oklab, var(--b-accent) 34%, transparent) 0%, transparent 60%),
    linear-gradient(158deg, #0A090C 0%, #08080A 46%, #100A0E 100%) !important;
}

/* ── The card ─────────────────────────────────────────────────────────── */

.mx_AuthPage_modal {
  position: relative;
  width: min(94vw, 940px) !important;
  max-width: 940px !important;
  border: 1px solid var(--hair) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--panel) !important;
  backdrop-filter: blur(26px) saturate(142%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(142%) !important;
  box-shadow:
    0 62px 140px -44px rgba(0, 0, 0, 0.94),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  animation: mx_brandAuthIn 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

/* Hairline catch-light along the top edge. */
.mx_AuthPage_modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

@keyframes mx_brandAuthIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mx_AuthPage *,
  .mx_AuthPage *::before,
  .mx_AuthPage *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.mx_AuthPage_modalContent {
  background: transparent !important;
}

/* Two-column brand layout applies only to the auth FORMS, which are the pages
 * that render .mx_AuthHeader. The welcome page shares the same .mx_AuthPage
 * shell but has a different subtree — forcing the grid on it collapsed its
 * content into the 312px column and left the rest of the card empty. */
.mx_AuthPage_modalContent:has(.mx_AuthHeader) {
  display: grid !important;
  grid-template-columns: 328px 1fr !important;
  min-height: 590px;
}

/* ── Left brand panel ─────────────────────────────────────────────────── */

/* Element paints this as a blurred copy of the background image; we take it
 * over as the brand panel and confine it to the left column. */
.mx_AuthPage_modalBlur {
  width: 328px !important;
  right: auto !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background:
    radial-gradient(420px 320px at 22% 14%, color-mix(in oklab, var(--b-accent) 76%, transparent) 0%, transparent 72%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 100%),
    linear-gradient(176deg,
      color-mix(in oklab, var(--b-accent) 82%, #000) 0%,
      color-mix(in oklab, var(--b-accent) 34%, #0a0a0d) 62%,
      #09090c 100%) !important;
  background-size: auto, 48px 100%, auto !important;
}

.mx_AuthHeader {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 42px 36px !important;
  background: transparent !important;
}

/* Divider between brand panel and form. */
.mx_AuthHeader::after {
  content: "";
  position: absolute;
  right: 0;
  top: 9%;
  bottom: 9%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--hair) 20%, var(--hair) 80%, transparent);
}

.mx_AuthHeaderLogo {
  order: 1 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.mx_AuthHeaderLogo img {
  width: 72px !important;
  height: 72px !important;
  padding: 10px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 20px 44px -14px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.mx_AuthHeaderLogo::after {
  content: "Northline client workspace";
  display: block;
  max-width: 220px;
  margin-top: 26px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
}

/* Pseudo-elements of a flex container are flex items — ordered, not absolute. */
.mx_AuthHeader::before {
  content: "Private agency rooms\A Client-ready threads\A Encrypted by default";
  order: 2;
  max-width: 230px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.58);
}

/* The workspace is single-locale; the picker is noise on the front door. */
.mx_AuthPage .mx_LanguageDropdown {
  display: none !important;
}

/* ── Form column ──────────────────────────────────────────────────────── */

.mx_AuthBody {
  align-self: center;
  padding: 46px 52px 42px !important;
  background: transparent !important;
  color: var(--text) !important;
}

.mx_AuthBody h1 {
  margin: 0 !important;
  font-size: 31px !important;
  font-weight: 640 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  color: var(--text) !important;
}

/* Sign-in only. The same .mx_AuthPage shell serves register ("Create account")
 * and forgot-password, where this subtitle would be wrong — so it keys off the
 * login-type selector, which only the sign-in form renders. If Element ever
 * drops that element the subtitle simply doesn't appear (fails safe). */
.mx_AuthBody:has(.mx_Login_type_container) h1::after {
  content: "Sign in to reach your team and your clients.";
  display: block;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.mx_AuthPage .mx_ServerPicker {
  margin: 24px 0 22px !important;
  border: 0 !important;
}

.mx_AuthPage .mx_ServerPicker h2 {
  margin: 0 0 9px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--faint) !important;
}

.mx_AuthPage .mx_ServerPicker_server {
  display: inline-block;
  padding: 7px 15px !important;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12.5px !important;
  color: rgba(247, 246, 245, 0.80) !important;
}

/* The homeserver is fixed per tenant — no "change" affordance. */
.mx_AuthPage .mx_ServerPicker .mx_AccessibleButton_kind_link {
  display: none !important;
}

.mx_AuthPage .mx_Login_type_container {
  align-items: center !important;
  margin-bottom: 6px !important;
}

.mx_AuthPage .mx_Login_type_label {
  font-size: 13px !important;
  color: var(--muted) !important;
}

.mx_AuthPage .mx_Field {
  margin: 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mx_AuthPage .mx_Field input,
.mx_AuthPage .mx_Field select {
  box-sizing: border-box;
  width: 100%;
  height: 54px !important;
  border: 1px solid var(--hair) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  outline: none !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mx_AuthPage .mx_Field input {
  padding: 19px 16px 5px !important;
}

.mx_AuthPage .mx_Field select {
  height: 46px !important;
  padding: 0 40px 0 16px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%) !important;
  background-position: calc(100% - 21px) 20px, calc(100% - 15px) 20px !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

.mx_AuthPage .mx_Field input:hover,
.mx_AuthPage .mx_Field select:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.mx_AuthPage .mx_Field input:focus,
.mx_AuthPage .mx_Field select:focus {
  border-color: var(--focus) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--b-accent) 42%, transparent) !important;
}

.mx_AuthPage .mx_Field label {
  font-size: 13px !important;
  color: var(--faint) !important;
}

.mx_AuthPage .mx_Field input:focus + label,
.mx_AuthPage .mx_Field input:not(:placeholder-shown) + label {
  font-size: 10.5px !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(247, 246, 245, 0.55) !important;
}

.mx_AuthPage .mx_Login_forgot {
  display: block;
  margin-top: 2px !important;
  text-align: right;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
}

.mx_AuthPage .mx_Login_forgot:hover {
  color: var(--text) !important;
}

.mx_AuthPage .mx_Login_forgot:focus-visible,
.mx_AuthPage .mx_AuthBody_changeFlow a:focus-visible,
.mx_AuthPage .mx_AuthFooter a:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 4px !important;
  border-radius: 6px;
}

.mx_AuthPage .mx_Login_forgot:active,
.mx_AuthPage .mx_AuthBody_changeFlow a:active {
  color: rgba(247, 246, 245, 0.78) !important;
}

.mx_AuthPage .mx_AuthBody form button {
  width: 100%;
  height: 56px !important;
  margin-top: 22px !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer;
  background: linear-gradient(180deg, #FCFBFA 0%, #EAE6E5 100%) !important;
  color: #121114 !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 16px 38px -14px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.16s ease, filter 0.16s ease;
}

.mx_AuthPage .mx_AuthBody form button:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.04);
  box-shadow:
    0 24px 50px -16px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.75) inset !important;
}

.mx_AuthPage .mx_AuthBody form button:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.mx_AuthPage .mx_AuthBody form button:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 4px !important;
}

.mx_AuthPage .mx_AuthBody form button.mx_AuthBody_sign-in-instead-button {
  border: 1px solid var(--hair) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.mx_AuthPage .mx_AuthBody form button.mx_AuthBody_sign-in-instead-button:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  filter: none;
}

.mx_AuthPage .mx_AuthBody form button.mx_AuthBody_sign-in-instead-button:active {
  background: rgba(255, 255, 255, 0.045) !important;
}

.mx_AuthPage .mx_AuthBody_changeFlow {
  margin-top: 22px !important;
  text-align: center;
  font-size: 13.5px !important;
  color: var(--muted) !important;
}

.mx_AuthPage .mx_AuthBody_changeFlow a {
  font-weight: 600;
  color: var(--text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.mx_AuthPage .mx_AuthBody_changeFlow a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.mx_AuthPage .mx_AuthFooter {
  font-size: 11.5px !important;
  letter-spacing: 0.03em;
  color: var(--faint) !important;
}

.mx_AuthPage .mx_AuthFooter a {
  color: rgba(247, 246, 245, 0.42) !important;
}

.mx_AuthPage .mx_AuthFooter {
  font-size: 0 !important;
}

.mx_AuthPage .mx_AuthFooter > * {
  display: none !important;
}

.mx_AuthPage .mx_AuthFooter::after {
  content: "Powered by Northline Systems";
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--faint);
}

/* ── Welcome page (the front door, before sign in) ────────────────────── */

/* Element SANITIZES the embedded welcome page: every class and style attribute
 * is stripped from the markup (only <img> keeps style), so nothing in
 * welcome.html can style itself and this page must be styled structurally.
 * The shape is stable: root > [glow, content(logo, h1, p, cta-row), footer]. */

.mx_AuthPage_modal:has(.mx_Welcome) {
  width: min(94vw, 680px) !important;
  max-width: 680px !important;
}

.mx_AuthPage .mx_AuthPage_modalContent:has(.mx_Welcome) {
  display: flex !important;
  width: 100% !important;
  min-height: 470px;
  border-radius: inherit !important;
}

.mx_AuthPage .mx_AuthPage_modalContent:has(.mx_Welcome) > div {
  width: 100% !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.mx_AuthPage .mx_Welcome,
.mx_AuthPage .mx_WelcomePage,
.mx_AuthPage .mx_WelcomePage_body {
  background: transparent !important;
}

.mx_AuthPage .mx_Welcome,
.mx_AuthPage .mx_WelcomePage {
  width: 100% !important;
  border-radius: inherit !important;
}

.mx_AuthPage .mx_Welcome {
  justify-content: center !important;
  padding: 0 !important;
}

.mx_AuthPage .mx_WelcomePage_body {
  box-sizing: border-box;
  width: 100% !important;
  padding: 54px 50px 42px !important;
  text-align: center;
  color: var(--text);
}

.mx_AuthPage .mx_WelcomePage_body > div {
  position: relative;
  display: grid !important;
  justify-items: center;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.mx_AuthPage .mx_WelcomePage_body > div > div:first-child {
  position: absolute;
  inset: 16% auto auto 50%;
  width: 360px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--b-accent) 44%, transparent) 0%, transparent 68%);
  filter: blur(42px);
  opacity: 0.42;
  pointer-events: none;
}

.mx_AuthPage .mx_WelcomePage_body > div > div:nth-child(2) {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 560px !important;
}

.mx_AuthPage .mx_WelcomePage_body img {
  width: 86px !important;
  height: 86px !important;
  padding: 11px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 22px 50px -16px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.mx_AuthPage .mx_WelcomePage_body h1 {
  margin: 26px 0 0 !important;
  font-size: 31px !important;
  font-weight: 640 !important;
  line-height: 1.12;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

.mx_AuthPage .mx_WelcomePage_body p {
  max-width: 38ch;
  margin: 12px auto 0 !important;
  font-size: 15px !important;
  line-height: 1.55;
  color: var(--muted) !important;
}

/* The call-to-action row is the only div that follows the h1. */
/* !important throughout: Element's own rules fight these. */
.mx_AuthPage .mx_WelcomePage_body h1 ~ div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 450px) !important;
  max-width: none !important;
  gap: 12px;
  margin-top: 28px;
}

/* Element styles these as full-width blocks, which forces them onto separate
 * rows inside the flex row — hence the explicit width. */
.mx_AuthPage .mx_WelcomePage_body h1 ~ div a {
  display: inline-flex !important;
  flex: 1 1 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto !important;
  max-width: none;
  height: 52px !important;
  min-height: 52px !important;
  block-size: 52px !important;
  min-block-size: 52px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a:first-child {
  background: linear-gradient(180deg, #FCFBFA 0%, #EAE6E5 100%);
  color: #121114 !important;
  box-shadow:
    0 16px 38px -14px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a:first-child:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.04);
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a:first-child:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a + a {
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text) !important;
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a + a:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-1.5px);
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a + a:active {
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(0);
}

.mx_AuthPage .mx_WelcomePage_body h1 ~ div a:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 4px !important;
}

/* Trailing attribution line. */
.mx_AuthPage .mx_WelcomePage_body > div > div:last-child {
  display: none !important;
}

.mx_AuthPage .mx_WelcomePage_body > div > div:last-child a {
  color: rgba(247, 246, 245, 0.58) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.mx_AuthPage .mx_WelcomePage_body > div > div:last-child a:hover {
  color: rgba(247, 246, 245, 0.80) !important;
  border-bottom-color: rgba(255, 255, 255, 0.38);
}

.mx_AuthPage .mx_WelcomePage_body > div > div:last-child a:active {
  color: rgba(247, 246, 245, 0.62) !important;
}

.mx_AuthPage .mx_WelcomePage_body > div > div:last-child a:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 4px !important;
  border-radius: 6px;
}

/* ── Narrow viewports: single column ──────────────────────────────────── */

@media (max-width: 820px) {
  .mx_AuthPage_modalContent:has(.mx_AuthHeader) {
    display: block !important;
    min-height: 0;
  }

  .mx_AuthPage_modalBlur,
  .mx_AuthHeader {
    display: none !important;
  }

  .mx_AuthBody {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding: 34px 30px 36px !important;
  }

  .mx_AuthBody h1 {
    font-size: 29px !important;
  }
}

@media (max-width: 560px) {
  .mx_AuthPage_modal {
    width: min(94vw, 420px) !important;
  }

  .mx_AuthPage .mx_WelcomePage_body {
    padding: 42px 24px 32px !important;
  }

  .mx_AuthPage .mx_WelcomePage_body h1 {
    font-size: 27px !important;
  }

  .mx_AuthPage .mx_WelcomePage_body h1 ~ div {
    flex-direction: column !important;
    width: 100% !important;
  }

  .mx_AuthPage .mx_WelcomePage_body h1 ~ div a {
    height: 52px !important;
    min-height: 52px !important;
    block-size: 52px !important;
    min-block-size: 52px !important;
    width: 100% !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POST-LOGIN WORKSPACE THEMING (signed-in chat UI)

   This layer brands the Element workspace (everything outside .mx_AuthPage).
   Uses Compound design tokens and Element class names to maintain consistency
   with the auth page branding, respecting the brand's primary and accent colors.

   Brand colors available via template substitution:
   - #111111:       Primary brand color (e.g., #111111)
   - #F4F1F1: Light variant (e.g., #F4F1F1)
   - #3A0E14:        Accent color (e.g., #3A0E14)

   Strategy: Prefer Compound design tokens over deep selectors; derive shades
   via color-mix() rather than template variables. All couplings documented.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --brand-primary: #111111;
  --brand-primary-light: #F4F1F1;
  --brand-accent: #3A0E14;

  /* Derived shades: lighter accent for use on dark backgrounds. */
  --brand-accent-light: color-mix(in oklab, var(--brand-accent) 65%, #fff);

  /* Post-login background and text defaults. */
  --brand-bg-primary: #ffffff;
  --brand-bg-secondary: #f5f5f5;
  --brand-text-primary: var(--brand-primary);
  --brand-text-secondary: color-mix(in oklab, var(--brand-primary) 70%, #999);
  --brand-text-tertiary: color-mix(in oklab, var(--brand-primary) 50%, #ccc);

  /* Interactive states. */
  --brand-focus-ring: var(--brand-accent);
  --brand-hover-bg: color-mix(in oklab, var(--brand-accent) 8%, #fff);
  --brand-selected-bg: color-mix(in oklab, var(--brand-accent) 12%, #fff);
  --brand-disabled-text: color-mix(in oklab, var(--brand-primary) 40%, #ddd);
}

/* Dark mode variant: adapt background and text if preferred. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg-primary: #1a1a1a;
    --brand-bg-secondary: #242424;
    --brand-text-primary: var(--brand-primary-light);
    --brand-text-secondary: color-mix(in oklab, var(--brand-primary-light) 80%, #666);
    --brand-text-tertiary: color-mix(in oklab, var(--brand-primary-light) 60%, #555);
    --brand-hover-bg: color-mix(in oklab, var(--brand-accent) 12%, #1a1a1a);
    --brand-selected-bg: color-mix(in oklab, var(--brand-accent) 18%, #1a1a1a);
  }
}

/* ── Space panel and left sidebar ─────────────────────────────────────────── */

/* Theming for the space switcher and left navigation panel (coupling: .mx_SpacePanel, .mx_LeftPanel).
   Sets accent color for space selector buttons and active space indicator. */
.mx_SpacePanel {
  background-color: var(--brand-bg-secondary);
  border-right-color: color-mix(in oklab, var(--brand-primary) 10%, #ddd);
}

/* Space buttons and space button hover states. */
.mx_SpacePanel .mx_SpaceButton {
  border-radius: 12px;
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active {
  background-color: color-mix(in oklab, var(--brand-accent) 15%, transparent);
  border-color: var(--brand-accent);
}

.mx_SpacePanel .mx_SpaceButton:not(.mx_SpaceButton_active):hover {
  background-color: var(--brand-hover-bg);
}

/* Space panel icons and labels (coupling: element class selectors). */
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
  color: var(--brand-text-primary);
}

/* ── Room list and room selection ────────────────────────────────────────── */

/* Main room list container. */
.mx_RoomList {
  background-color: var(--brand-bg-primary);
  border-right-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
}

/* Individual room tiles (coupling: .mx_RoomTile). */
.mx_RoomTile {
  border-radius: 8px;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Selected room highlighting (coupling: .mx_RoomTile_selected, .mx_RoomTile:focus-visible). */
.mx_RoomTile.mx_RoomTile_selected {
  background-color: var(--brand-selected-bg);
  border-left-color: var(--brand-accent);
}

.mx_RoomTile:hover:not(.mx_RoomTile_selected) {
  background-color: var(--brand-hover-bg);
}

.mx_RoomTile:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: -2px;
}

/* Room name and notification badge colors. */
.mx_RoomTile_name {
  color: var(--brand-text-primary);
  font-weight: 500;
}

.mx_RoomTile .mx_NotificationBadge {
  background-color: var(--brand-accent);
  color: #ffffff;
}

.mx_RoomTile .mx_NotificationBadge_highlight {
  background-color: color-mix(in oklab, var(--brand-accent) 110%, transparent);
}

/* ── Unread indicators and badges ────────────────────────────────────────── */

/* Unread message indicator line on room list. */
.mx_RoomTile_unreadCount::before {
  background-color: var(--brand-accent);
}

/* Message count badges. */
.mx_NotificationBadge {
  background-color: var(--brand-accent);
  color: #ffffff;
  font-weight: 600;
}

/* ── Room header ──────────────────────────────────────────────────────────── */

/* Top-level room header bar (coupling: .mx_RoomHeader). */
.mx_RoomHeader {
  background-color: var(--brand-bg-primary);
  border-bottom-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
}

/* Room title and subtitle in the header. */
.mx_RoomHeader_title {
  color: var(--brand-text-primary);
  font-weight: 600;
}

.mx_RoomHeader_subtitle {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
}

/* Header buttons (info, search, menu) — accent on hover/active. */
.mx_RoomHeader_button {
  color: var(--brand-text-secondary);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.mx_RoomHeader_button:hover {
  background-color: var(--brand-hover-bg);
  color: var(--brand-text-primary);
}

.mx_RoomHeader_button.mx_RoomHeader_button_active {
  background-color: var(--brand-selected-bg);
  color: var(--brand-accent);
}

/* ── Primary action buttons ──────────────────────────────────────────────── */

/* Primary accent buttons throughout the workspace (coupling: .mx_AccessibleButton_kind_primary). */
.mx_AccessibleButton_kind_primary {
  background-color: var(--brand-accent);
  color: #ffffff;
  font-weight: 600;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.mx_AccessibleButton_kind_primary:hover {
  background-color: color-mix(in oklab, var(--brand-accent) 110%, transparent);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--brand-accent) 30%, transparent);
}

.mx_AccessibleButton_kind_primary:active {
  background-color: color-mix(in oklab, var(--brand-accent) 90%, transparent);
}

.mx_AccessibleButton_kind_primary:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

/* Secondary buttons (light borders). */
.mx_AccessibleButton_kind_secondary {
  color: var(--brand-text-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 15%, #ddd);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mx_AccessibleButton_kind_secondary:hover {
  background-color: var(--brand-hover-bg);
  border-color: color-mix(in oklab, var(--brand-primary) 30%, #999);
}

/* ── Links and anchors ───────────────────────────────────────────────────── */

a {
  color: var(--brand-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.12s ease, color 0.12s ease;
}

a:hover {
  border-bottom-color: var(--brand-accent);
  color: color-mix(in oklab, var(--brand-accent) 110%, transparent);
}

a:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Message composer ────────────────────────────────────────────────────── */

/* Message input box at the bottom (coupling: .mx_MessageComposer). */
.mx_MessageComposer {
  background-color: var(--brand-bg-primary);
  border-top-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
}

/* Input field styling. */
.mx_MessageComposer input,
.mx_MessageComposer textarea {
  background-color: var(--brand-bg-secondary);
  color: var(--brand-text-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 15%, #ddd);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.mx_MessageComposer input:focus,
.mx_MessageComposer textarea:focus {
  border-color: var(--brand-accent);
  background-color: #ffffff;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-accent) 20%, transparent);
}

.mx_MessageComposer input::placeholder {
  color: var(--brand-text-tertiary);
}

/* Send button accent. */
.mx_MessageComposer .mx_SendMessageComposer_sendButton {
  color: var(--brand-accent);
  transition: color 0.12s ease, background-color 0.12s ease;
}

.mx_MessageComposer .mx_SendMessageComposer_sendButton:hover {
  background-color: var(--brand-hover-bg);
  color: color-mix(in oklab, var(--brand-accent) 110%, transparent);
}

/* ── User menu and profile ───────────────────────────────────────────────── */

/* User profile button and menu (coupling: .mx_TopRightMenu, .mx_UserMenu). */
.mx_TopRightMenu,
.mx_UserMenu {
  background-color: var(--brand-bg-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
}

.mx_TopRightMenu_button,
.mx_UserMenu_button {
  color: var(--brand-text-primary);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.mx_TopRightMenu_button:hover,
.mx_UserMenu_button:hover {
  background-color: var(--brand-hover-bg);
  color: var(--brand-accent);
}

/* Menu item styling. */
.mx_TopRightMenu_item,
.mx_UserMenu_item {
  color: var(--brand-text-primary);
  border-bottom-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
}

.mx_TopRightMenu_item:hover,
.mx_UserMenu_item:hover {
  background-color: var(--brand-hover-bg);
  color: var(--brand-accent);
}

/* ── Timeline and messages ───────────────────────────────────────────────── */

/* Message container backgrounds and text. */
.mx_EventTile {
  color: var(--brand-text-primary);
  border-bottom-color: color-mix(in oklab, var(--brand-primary) 5%, #f0f0f0);
}

.mx_EventTile:hover {
  background-color: var(--brand-hover-bg);
}

/* Event timestamp styling. */
.mx_EventTile_time {
  color: var(--brand-text-tertiary);
  font-size: 0.75rem;
}

/* Message sender name (coupling: .mx_EventTile_senderName). */
.mx_EventTile_senderName {
  color: var(--brand-accent);
  font-weight: 600;
}

/* Reactions and emoji in messages. */
.mx_ReactionRow {
  border-color: color-mix(in oklab, var(--brand-primary) 10%, #ddd);
}

.mx_Reaction:hover {
  background-color: var(--brand-hover-bg);
}

/* ── Dialogs and overlays ────────────────────────────────────────────────── */

/* Modal and dialog backgrounds (coupling: .mx_Dialog, .mx_Popover). */
.mx_Dialog {
  background-color: var(--brand-bg-primary);
  color: var(--brand-text-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 10%, #ddd);
}

.mx_Popover {
  background-color: var(--brand-bg-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 8%, #ddd);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--brand-primary) 15%, transparent);
}

/* Dialog titles. */
.mx_Dialog_title {
  color: var(--brand-text-primary);
  font-weight: 600;
}

/* Input fields in dialogs. */
.mx_Dialog input[type="text"],
.mx_Dialog input[type="email"],
.mx_Dialog input[type="password"],
.mx_Dialog textarea,
.mx_Dialog select {
  background-color: var(--brand-bg-secondary);
  color: var(--brand-text-primary);
  border-color: color-mix(in oklab, var(--brand-primary) 15%, #ddd);
}

.mx_Dialog input:focus,
.mx_Dialog textarea:focus,
.mx_Dialog select:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-accent) 20%, transparent);
}

/* ── Reduced motion: disable transitions ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mx_RoomTile,
  .mx_RoomHeader_button,
  .mx_AccessibleButton_kind_primary,
  .mx_AccessibleButton_kind_secondary,
  .mx_MessageComposer input,
  .mx_MessageComposer textarea,
  a {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  /* On smaller screens, ensure left sidebar and room list are still accessible. */
  .mx_SpacePanel {
    min-width: 56px;
  }

  .mx_RoomList {
    min-width: 200px;
  }
}