/**
 * ABDD Messages — Element Web desktop theme
 * Stage 2: desktop shell refinement + Messenger-inspired Discussions column.
 *
 * Product rule
 * ------------
 * ABDD owns the application shell and visual identity.
 * Messenger is the ergonomic reference.
 * Element remains the functional Matrix client.
 *
 * Brand source of truth
 * ---------------------
 * These values mirror the ABDD HumHub theme on `develop`:
 * burgundy #6B1F32, burgundy dark #551827, burgundy hover #7B2A3E,
 * gold #B89A67, ivory #F4EFE7, warm black #292625 and header height 56px.
 *
 * Maintenance rule
 * ----------------
 * Prefer the semantic `.abdd-*` classes added by `abdd-messages.js`.
 * `.mx_*` selectors belong to Element Web and must be reviewed whenever
 * the upstream Element image is upgraded.
 */

:root {
  /* ==================================================================
     1. ABDD BRAND TOKENS
     ================================================================== */
  --abdd-burgundy: #6b1f32;
  --abdd-burgundy-dark: #551827;
  --abdd-burgundy-hover: #7b2a3e;
  --abdd-gold: #b89a67;
  --abdd-gold-light: #c9af82;
  --abdd-ivory: #f4efe7;
  --abdd-ivory-light: #fbf8f3;
  --abdd-warm-black: #292625;
  --abdd-warm-black-deep: #1c1a19;

  /* ==================================================================
     2. ABDD MESSAGES DARK-FIRST PALETTE
     Warm neutrals deliberately replace Messenger's colder dark greys.
     ================================================================== */
  --abdd-app-bg: #171514;
  --abdd-surface: #211f1e;
  --abdd-surface-raised: #292625;
  --abdd-surface-soft: #302d2b;
  --abdd-surface-input: #35312f;
  --abdd-hover: #383331;
  --abdd-active: #47242e;
  --abdd-active-soft: #3b242a;
  --abdd-border: rgba(222, 213, 202, 0.14);
  --abdd-border-strong: rgba(184, 154, 103, 0.36);
  --abdd-text: #f4efe7;
  --abdd-text-muted: #b9b0a6;
  --abdd-text-faint: #8f867e;

  /* ==================================================================
     3. DESKTOP SHELL GEOMETRY
     ================================================================== */
  --abdd-header-height: 56px;
  --abdd-conversations-width: 360px;
  --abdd-details-width: 360px;
  --abdd-radius-sm: 8px;
  --abdd-radius-md: 12px;
  --abdd-radius-lg: 16px;
}

/* ====================================================================
   APPLICATION FOUNDATION

   Element applies its own canvas backgrounds to intermediate wrappers.
   Stage 2 deliberately paints the complete authenticated shell so a
   constrained child (notably HomePage's upstream 960px max width) cannot
   reveal white gutters around the ABDD dark canvas.
   ==================================================================== */
body.abdd-messages,
body.abdd-messages .mx_MatrixChat_wrapper,
body.abdd-messages .mx_MatrixChat,
body.abdd-messages .mx_LoggedInView,
body.abdd-messages .mx_LoggedInView_contentWrapper,
body.abdd-messages .mx_MainSplit,
body.abdd-messages .mx_MainSplit_body,
body.abdd-messages .mx_LeftPanel_ResizeWrapper,
body.abdd-messages .mx_RightPanel_ResizeWrapper {
  background: var(--abdd-app-bg) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages {
  color-scheme: dark;
}

body.abdd-messages input,
body.abdd-messages textarea,
body.abdd-messages button {
  color: var(--abdd-text);
}

/* Keep resize affordances functional without exposing a light separator. */
body.abdd-messages .mx_ResizeHandle,
body.abdd-messages .mx_ResizeHandle--horizontal {
  background: transparent !important;
}

body.abdd-messages .mx_ResizeHandle--horizontal::before {
  background: var(--abdd-border-strong) !important;
  opacity: 0.35;
}

/*
 * Element v1.12.26 constrains HomePage to 960px. We let the page canvas fill
 * the available center column, but keep the actual welcome content bounded.
 */
body.abdd-messages .mx_HomePage {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--abdd-warm-black-deep) !important;
}

body.abdd-messages .mx_HomePage_default {
  width: min(calc(100% - 48px), 960px);
  margin-inline: auto;
}

/* ====================================================================
   STAGE 1/2 — GLOBAL ABDD NAVIGATION

   Element's SpacePanel becomes the shared ABDD top navigation. Stage 2 also
   redistributes its native controls: spaces stay central while account and
   settings move to the right, matching ABDD Community's visual grammar.
   ==================================================================== */
@media (min-width: 1181px) {
  body.abdd-messages .abdd-app-shell,
  body.abdd-messages .mx_MatrixChat,
  body.abdd-messages .mx_LoggedInView {
    position: relative !important;
  }

  body.abdd-messages .abdd-global-nav {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 5000 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: var(--abdd-header-height) !important;
    min-height: var(--abdd-header-height) !important;
    max-height: var(--abdd-header-height) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;

    box-sizing: border-box !important;
    padding: 0 18px !important;
    overflow: visible !important;

    background: var(--abdd-burgundy) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(184, 154, 103, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24) !important;
  }

  /* ABDD Community / Messages bridge injected by the DOM adapter. */
  body.abdd-messages .abdd-global-brand {
    order: 0;
    flex: 0 0 250px;
    min-width: 250px;
    height: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--abdd-ivory) !important;
    text-decoration: none !important;
  }

  body.abdd-messages .abdd-global-brand:hover,
  body.abdd-messages .abdd-global-brand:focus-visible {
    color: var(--abdd-ivory) !important;
    text-decoration: none !important;
  }

  body.abdd-messages .abdd-global-brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--abdd-gold);
    border-radius: 999px;
    color: var(--abdd-gold);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.08em;
  }

  body.abdd-messages .abdd-global-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }

  body.abdd-messages .abdd-global-brand-name {
    color: var(--abdd-ivory);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.abdd-messages .abdd-global-brand-app {
    margin-top: 3px;
    color: var(--abdd-gold-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* The vertical-only collapse affordance has no meaning in our topbar. */
  body.abdd-messages .abdd-global-nav > .mx_SpacePanel_toggleCollapse {
    display: none !important;
  }

  /* Center the native space/home navigation in the available header width. */
  body.abdd-messages .abdd-global-nav .abdd-nav-primary,
  body.abdd-messages .abdd-global-nav .mx_SpaceTreeLevel {
    order: 1;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep secondary controls grouped at the right edge like ABDD Community. */
  body.abdd-messages .abdd-global-nav .abdd-nav-threads,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton {
    order: 2;
    flex: 0 0 auto !important;
  }

  body.abdd-messages .abdd-global-nav .abdd-nav-settings,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton {
    order: 3;
    flex: 0 0 auto !important;
  }

  body.abdd-messages .abdd-global-nav .abdd-nav-user,
  body.abdd-messages .abdd-global-nav > .mx_UserMenu {
    order: 4;
    flex: 0 0 auto !important;
    margin-left: 4px !important;
  }

  body.abdd-messages .abdd-global-nav li,
  body.abdd-messages .abdd-global-nav .mx_SpaceItem,
  body.abdd-messages .abdd-global-nav button,
  body.abdd-messages .abdd-global-nav .mx_AccessibleButton,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton {
    flex: 0 0 auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-block: 0 !important;
    border-radius: 999px !important;
  }

  body.abdd-messages .abdd-global-nav button,
  body.abdd-messages .abdd-global-nav .mx_AccessibleButton,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton {
    color: var(--abdd-ivory) !important;
  }

  body.abdd-messages .abdd-global-nav button:hover,
  body.abdd-messages .abdd-global-nav .mx_AccessibleButton:hover,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton:hover,
  body.abdd-messages .abdd-global-nav .mx_QuickSettingsButton:hover,
  body.abdd-messages .abdd-global-nav .mx_ThreadsActivityCentreButton:hover {
    background: rgba(244, 239, 231, 0.14) !important;
  }

  /* Gold communicates the active ABDD navigation state without Messenger blue. */
  body.abdd-messages .abdd-global-nav [aria-selected="true"] .mx_SpaceButton,
  body.abdd-messages .abdd-global-nav .mx_SpaceButton_active {
    color: var(--abdd-gold-light) !important;
    box-shadow: inset 0 -2px 0 var(--abdd-gold) !important;
  }

  /* Reserve exactly one application row below the global header. */
  body.abdd-messages .mx_LeftPanel_outerWrapper,
  body.abdd-messages .mx_LeftPanel_wrapper,
  body.abdd-messages .mx_LeftPanel,
  body.abdd-messages .mx_RoomView,
  body.abdd-messages .mx_HomePage,
  body.abdd-messages .mx_Welcome,
  body.abdd-messages .mx_RightPanel,
  body.abdd-messages .mx_RightPanel_wrapper,
  body.abdd-messages .mx_MainSplit {
    margin-top: var(--abdd-header-height) !important;
    height: calc(100vh - var(--abdd-header-height)) !important;
    max-height: calc(100vh - var(--abdd-header-height)) !important;
  }
}

/* ====================================================================
   THREE-COLUMN DESKTOP SHELL
   ==================================================================== */
body.abdd-messages .abdd-conversations-panel,
body.abdd-messages .mx_LeftPanel_outerWrapper,
body.abdd-messages .mx_LeftPanel_wrapper,
body.abdd-messages .mx_LeftPanel {
  width: var(--abdd-conversations-width) !important;
  min-width: var(--abdd-conversations-width) !important;
  max-width: var(--abdd-conversations-width) !important;

  background: var(--abdd-surface) !important;
  border-right: 1px solid var(--abdd-border) !important;
}

body.abdd-messages .abdd-conversation-canvas,
body.abdd-messages .mx_RoomView,
body.abdd-messages .mx_RoomView_body,
body.abdd-messages .mx_RoomView_messagePanel,
body.abdd-messages .mx_RoomView_messagePanelWrapper,
body.abdd-messages .mx_HomePage,
body.abdd-messages .mx_Welcome {
  min-width: 0 !important;
  background: var(--abdd-warm-black-deep) !important;
}

body.abdd-messages .abdd-conversation-details,
body.abdd-messages .mx_RightPanel,
body.abdd-messages .mx_RightPanel_wrapper {
  width: var(--abdd-details-width) !important;
  min-width: var(--abdd-details-width) !important;
  max-width: var(--abdd-details-width) !important;

  background: var(--abdd-surface) !important;
  border-left: 1px solid var(--abdd-border) !important;
}

/* ====================================================================
   STAGE 2 — DISCUSSIONS COLUMN

   The upstream RoomListPanel is kept functional. We only reorder its existing
   presentation blocks and add one small "Tout" helper filter in JS which
   clears the currently selected native filter by triggering that same native
   filter button. No Matrix room-list state is reimplemented here.
   ==================================================================== */
body.abdd-messages .mx_LeftPanel_roomListContainer,
body.abdd-messages .abdd-room-list,
body.abdd-messages .mx_RoomListPanel {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--abdd-surface) !important;
}

body.abdd-messages .abdd-room-list,
body.abdd-messages .mx_RoomListPanel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* 1. Discussions title / compose controls */
body.abdd-messages .abdd-room-list-header,
body.abdd-messages [data-testid="room-list-header"] {
  order: 0 !important;
  flex: 0 0 auto !important;
  min-height: 62px !important;
  padding: 16px 14px 8px !important;
  box-sizing: border-box !important;
  background: var(--abdd-surface) !important;
  border: 0 !important;
}

body.abdd-messages [data-testid="room-list-header"] h1 {
  margin: 0 !important;
  color: var(--abdd-text) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

body.abdd-messages [data-testid="room-list-header"] button {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages [data-testid="room-list-header"] button:hover {
  background: var(--abdd-hover) !important;
}

/* 2. Messenger-like large rounded search row */
body.abdd-messages .abdd-room-list-search,
body.abdd-messages [data-testid="room-list-search"] {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 4px 12px 10px !important;
  box-sizing: border-box !important;
  background: var(--abdd-surface) !important;
}

body.abdd-messages #room-list-search-button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding-inline: 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--abdd-surface-input) !important;
  color: var(--abdd-text-muted) !important;
  box-shadow: none !important;
}

body.abdd-messages #room-list-search-button:hover {
  background: var(--abdd-hover) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages #room-list-search-button:focus-visible {
  border-color: var(--abdd-gold) !important;
  outline: 2px solid rgba(184, 154, 103, 0.22) !important;
  outline-offset: 1px !important;
}

body.abdd-messages #room-list-search-button kbd {
  color: var(--abdd-text-faint) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Search-row secondary icon button (explore / dial, when supplied by Element). */
body.abdd-messages [data-testid="room-list-search"] > button:not(#room-list-search-button) {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--abdd-surface-soft) !important;
}

/* 3. Native filters + ABDD "Tout" helper */
body.abdd-messages .abdd-room-list-filters-shell {
  order: 2 !important;
  flex: 0 0 auto !important;
  background: var(--abdd-surface) !important;
}

body.abdd-messages [data-testid="primary-filters"] {
  padding: 0 12px 10px !important;
  gap: 6px !important;
  background: var(--abdd-surface) !important;
}

body.abdd-messages [data-testid="primary-filters"] [role="listbox"] {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.abdd-messages [data-testid="primary-filters"] [role="option"],
body.abdd-messages .abdd-filter-all {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--abdd-border-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--abdd-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.abdd-messages [data-testid="primary-filters"] [role="option"]:hover,
body.abdd-messages .abdd-filter-all:hover {
  background: var(--abdd-hover) !important;
}

body.abdd-messages [data-testid="primary-filters"] [role="option"][aria-selected="true"],
body.abdd-messages .abdd-filter-all[aria-selected="true"] {
  border-color: rgba(184, 154, 103, 0.7) !important;
  background: var(--abdd-active) !important;
  color: var(--abdd-gold-light) !important;
}

body.abdd-messages [data-testid="primary-filters"] [role="option"]:focus-visible,
body.abdd-messages .abdd-filter-all:focus-visible {
  outline: 2px solid var(--abdd-gold) !important;
  outline-offset: 1px !important;
}

/* 4. Scrollable discussion list */
body.abdd-messages .abdd-room-list-body {
  order: 3 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--abdd-surface) !important;
}

body.abdd-messages .mx_RoomList,
body.abdd-messages .mx_RoomListPanel,
body.abdd-messages .mx_LeftPanel_body {
  background: var(--abdd-surface) !important;
}

/* Existing Element room rows: preserve behaviour, change rhythm/identity. */
body.abdd-messages .abdd-conversation-row,
body.abdd-messages .mx_RoomTile {
  position: relative !important;
  min-height: 64px !important;
  margin: 2px 8px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: var(--abdd-radius-md) !important;
  background: transparent !important;
  transition: background-color 120ms ease, border-color 120ms ease !important;
}

body.abdd-messages .abdd-conversation-row:hover,
body.abdd-messages .mx_RoomTile:hover {
  background: var(--abdd-hover) !important;
}

body.abdd-messages .abdd-conversation-row[aria-selected="true"],
body.abdd-messages .mx_RoomTile_selected {
  border-color: rgba(184, 154, 103, 0.22) !important;
  background: var(--abdd-active-soft) !important;
  box-shadow: inset 3px 0 0 var(--abdd-gold) !important;
}

body.abdd-messages .mx_RoomTile_name,
body.abdd-messages .mx_RoomTile_title {
  color: var(--abdd-text) !important;
  font-weight: 700 !important;
}

body.abdd-messages .mx_RoomTile_subtitle,
body.abdd-messages .mx_RoomTile_messagePreview,
body.abdd-messages .mx_RoomTile_timestamp {
  color: var(--abdd-text-muted) !important;
  font-size: 12px !important;
}

body.abdd-messages .mx_RoomTile_badge,
body.abdd-messages .mx_NotificationBadge {
  background: var(--abdd-gold) !important;
  color: var(--abdd-warm-black-deep) !important;
}

/* Avatar scale closer to Messenger without changing Matrix avatar semantics. */
body.abdd-messages .mx_RoomTile .mx_BaseAvatar,
body.abdd-messages .abdd-conversation-row .mx_BaseAvatar {
  width: 48px !important;
  height: 48px !important;
}

/* Stage 2 scrollbar treatment: visible only when useful, never bright white. */
body.abdd-messages .abdd-conversations-panel * {
  scrollbar-color: rgba(184, 154, 103, 0.34) transparent;
  scrollbar-width: thin;
}

body.abdd-messages .abdd-conversations-panel *::-webkit-scrollbar {
  width: 8px;
}

body.abdd-messages .abdd-conversations-panel *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(184, 154, 103, 0.34);
  background-clip: padding-box;
}

/* ====================================================================
   CENTER COLUMN — BASELINE (Stage 3 owns message-level refinement)
   ==================================================================== */
body.abdd-messages .mx_RoomHeader {
  min-height: 64px !important;
  padding-inline: 16px !important;
  background: var(--abdd-surface) !important;
  border-bottom: 1px solid var(--abdd-border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important;
}

body.abdd-messages .mx_RoomHeader_name,
body.abdd-messages .mx_RoomHeader_nametext {
  color: var(--abdd-text) !important;
  font-weight: 700 !important;
}

body.abdd-messages .mx_RoomHeader_topic {
  color: var(--abdd-text-muted) !important;
}

body.abdd-messages .mx_RoomHeader_buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.abdd-messages .mx_RoomHeader_buttons button,
body.abdd-messages .mx_RoomHeader_buttons .mx_AccessibleButton,
body.abdd-messages .mx_RightPanel button,
body.abdd-messages .mx_RightPanel .mx_AccessibleButton {
  border-radius: 999px !important;
}

body.abdd-messages .mx_RoomHeader_buttons button:hover,
body.abdd-messages .mx_RoomHeader_buttons .mx_AccessibleButton:hover {
  background: var(--abdd-hover) !important;
}

body.abdd-messages .mx_MessageComposer,
body.abdd-messages .mx_BasicMessageComposer {
  background: var(--abdd-surface) !important;
}

body.abdd-messages .mx_MessageComposer_wrapper,
body.abdd-messages .mx_BasicMessageComposer_input {
  border-color: transparent !important;
  border-radius: 999px !important;
  background: var(--abdd-surface-soft) !important;
}

/* ====================================================================
   RIGHT COLUMN — BASELINE (Stage 4 owns profile/detail architecture)
   ==================================================================== */
body.abdd-messages .mx_RightPanel,
body.abdd-messages .mx_RightPanel_wrapper,
body.abdd-messages .mx_RightPanel_header {
  color: var(--abdd-text) !important;
  background: var(--abdd-surface) !important;
}

/* ====================================================================
   PRIMARY ACTIONS — ABDD, NEVER MESSENGER BLUE
   ==================================================================== */
body.abdd-messages .mx_AccessibleButton_kind_primary,
body.abdd-messages .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
  --cpd-color-bg-action-primary-rest: var(--abdd-burgundy);
  --cpd-color-bg-action-primary-hovered: var(--abdd-burgundy-hover);
}

body.abdd-messages .mx_HomePage_button,
body.abdd-messages .mx_AccessibleButton_kind_primary {
  background: var(--abdd-burgundy) !important;
  border-radius: var(--abdd-radius-md) !important;
}

body.abdd-messages .mx_HomePage_button:hover,
body.abdd-messages .mx_AccessibleButton_kind_primary:hover {
  background: var(--abdd-burgundy-hover) !important;
}

/* ====================================================================
   RESPONSIVE GUARDRAILS

   Stage 5 will redesign tablet/mobile deliberately. These rules only prevent
   the current desktop shell from becoming unusable on narrower desktops.
   ==================================================================== */
@media (max-width: 1360px) and (min-width: 1181px) {
  :root {
    --abdd-conversations-width: 330px;
    --abdd-details-width: 320px;
  }

  body.abdd-messages .abdd-global-brand {
    flex-basis: 205px;
    min-width: 205px;
  }

  body.abdd-messages .abdd-global-brand-name {
    font-size: 12px;
  }
}

@media (max-width: 1180px) {
  :root {
    --abdd-conversations-width: 320px;
    --abdd-details-width: 280px;
  }
}