/*
 * ABDD Messages — native light/dark mode bridge
 * ABDD-THEME-MODES-V1
 *
 * Why this file exists
 * --------------------
 * Element Web already knows whether the active built-in/custom theme is light
 * or dark. In v1.12.26 it exposes that effective mode on <body> through
 * .cpd-theme-light / .cpd-theme-dark (and their high-contrast variants).
 *
 * The Stage 1-3 ABDD styles originally used dark semantic tokens globally,
 * which meant selecting the custom "ABDD Clair" theme still produced a dark
 * application. This late-loading stylesheet fixes that architecture: ABDD
 * structural CSS keeps using semantic --abdd-* variables, while this layer
 * assigns those variables according to Element's effective native theme mode.
 *
 * No Matrix state, room content, authentication or encryption behaviour is
 * touched here. Theme switching remains owned entirely by Element.
 */

/* -------------------------------------------------------------------------
   LIGHT MODE — applies to ABDD Clair and any Element light/high-contrast mode.
   ------------------------------------------------------------------------- */
body.abdd-messages.cpd-theme-light,
body.abdd-messages.cpd-theme-light-hc {
  color-scheme: light;

  --abdd-app-bg: #f0f2f5;
  --abdd-surface: #ffffff;
  --abdd-surface-raised: #f7f5f2;
  --abdd-surface-soft: #f0eeeb;
  --abdd-surface-input: #f0f2f5;
  --abdd-hover: #f2f3f5;
  --abdd-active: #f4e7eb;
  --abdd-active-soft: #ead5dc;
  --abdd-border: rgba(28, 30, 33, 0.13);
  --abdd-border-strong: rgba(107, 31, 50, 0.34);
  --abdd-text: #1c1e21;
  --abdd-text-muted: #65676b;
  --abdd-text-faint: #8a8d91;

  /* Historical variable names retained for compatibility with Stage 1-3. */
  --abdd-warm-black: #f7f5f2;
  --abdd-warm-black-deep: #ffffff;

  --abdd-message-incoming: #e4e6eb;
  --abdd-message-incoming-hover: #d8dadf;
  --abdd-message-outgoing: #6b1f32;
  --abdd-message-outgoing-hover: #7b2a3e;
  --abdd-message-system: #f0f2f5;
  --abdd-composer-bg: #f0f2f5;
  --abdd-content-accent: #6b1f32;
}

/* -------------------------------------------------------------------------
   DARK MODE — explicitly restates the approved warm ABDD dark palette.
   ------------------------------------------------------------------------- */
body.abdd-messages.cpd-theme-dark,
body.abdd-messages.cpd-theme-dark-hc {
  color-scheme: dark;

  --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;
  --abdd-warm-black: #292625;
  --abdd-warm-black-deep: #1c1a19;

  --abdd-message-incoming: #302d2b;
  --abdd-message-incoming-hover: #383331;
  --abdd-message-outgoing: #6b1f32;
  --abdd-message-outgoing-hover: #7b2a3e;
  --abdd-message-system: #272321;
  --abdd-composer-bg: #302d2b;
  --abdd-content-accent: #c9af82;
}

/* -------------------------------------------------------------------------
   Ensure every major Stage 1-3 surface actually consumes the mode tokens.
   This intentionally comes after both abdd-messages.css and Stage 3.
   ------------------------------------------------------------------------- */
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 .mx_LeftPanel_outerWrapper,
body.abdd-messages .mx_LeftPanel_wrapper,
body.abdd-messages .mx_LeftPanel,
body.abdd-messages .mx_LeftPanel_roomListContainer,
body.abdd-messages .mx_RoomListPanel,
body.abdd-messages [data-testid="room-list-header"],
body.abdd-messages [data-testid="room-list-search"],
body.abdd-messages [data-testid="primary-filters"] {
  background-color: var(--abdd-surface) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_RoomView,
body.abdd-messages .mx_RoomView_body,
body.abdd-messages .mx_RoomView_timeline,
body.abdd-messages .mx_RoomView_messagePanel,
body.abdd-messages .mx_RoomView_messagePanelWrapper,
body.abdd-messages .mx_RoomView_messageListWrapper,
body.abdd-messages .mx_RoomView_MessageList,
body.abdd-messages .mx_ScrollPanel,
body.abdd-messages .mx_HomePage,
body.abdd-messages .mx_Welcome {
  background-color: var(--abdd-warm-black-deep) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_RoomHeader,
body.abdd-messages .mx_MessageComposer {
  background-color: var(--abdd-surface) !important;
  color: var(--abdd-text) !important;
  border-color: var(--abdd-border) !important;
}

body.abdd-messages .mx_RoomView_statusArea,
body.abdd-messages .mx_RoomView_statusAreaBox {
  background-color: var(--abdd-warm-black-deep) !important;
  color: var(--abdd-text-muted) !important;
}

body.abdd-messages .mx_MessageComposer_row {
  background-color: var(--abdd-composer-bg) !important;
  color: var(--abdd-text) !important;
}

/* -------------------------------------------------------------------------
   Current Element v1.12.26 virtualized room row.
   Child surfaces are transparent so the selected-mode background is visible.
   ------------------------------------------------------------------------- */
body.abdd-messages .mx_RoomListItemView,
body.abdd-messages .mx_RoomListItemView > * {
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_RoomListItemView > * {
  background-color: transparent !important;
  background-image: none !important;
}

body.abdd-messages .mx_RoomListItemView_selected,
body.abdd-messages .mx_RoomListItemView[aria-selected="true"] {
  background-color: var(--abdd-active) !important;
  background-image: none !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages.cpd-theme-light .mx_RoomListItemView_selected,
body.abdd-messages.cpd-theme-light .mx_RoomListItemView[aria-selected="true"],
body.abdd-messages.cpd-theme-light-hc .mx_RoomListItemView_selected,
body.abdd-messages.cpd-theme-light-hc .mx_RoomListItemView[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--abdd-burgundy) !important;
}

/* -------------------------------------------------------------------------
   Content accents need stronger contrast on a white surface than the light-gold
   value used in the burgundy top navigation. Keep the topbar branding intact
   and only change in-content actions/sender/link accents.
   ------------------------------------------------------------------------- */
body.abdd-messages .mx_DisambiguatedProfile,
body.abdd-messages .mx_EventTile_senderDetails,
body.abdd-messages .mx_EventTile_senderDetails a,
body.abdd-messages .mx_EventTile a,
body.abdd-messages .mx_RoomView_MessageList a,
body.abdd-messages .mx_RoomHeader button,
body.abdd-messages .mx_RoomHeader .mx_AccessibleButton,
body.abdd-messages .mx_RoomHeader svg,
body.abdd-messages .mx_MessageComposer_actions,
body.abdd-messages .mx_MessageComposer_button,
body.abdd-messages .mx_MessageComposer button,
body.abdd-messages .mx_MessageComposer svg {
  color: var(--abdd-content-accent) !important;
}

/* Outgoing messages remain brand burgundy in both modes. */
body.abdd-messages .abdd-message-own:not(.mx_EventTile_info) .mx_MTextBody {
  background-color: var(--abdd-message-outgoing) !important;
  color: var(--abdd-ivory) !important;
}

body.abdd-messages .abdd-message-incoming:not(.mx_EventTile_info) .mx_MTextBody,
body.abdd-messages .mx_EventTile:not(.mx_EventTile_info):not(.abdd-message-own) .mx_MTextBody {
  background-color: var(--abdd-message-incoming) !important;
  color: var(--abdd-text) !important;
}

/* Compound uses the same effective mode. Keep its stable tokens aligned with
   the ABDD semantic layer without supplying a second theme-selection state. */
body.abdd-messages .mx_RoomView,
body.abdd-messages .mx_RoomListPanel {
  --cpd-color-bg-canvas-default: var(--abdd-warm-black-deep);
  --cpd-color-bg-subtle-primary: var(--abdd-surface-soft);
  --cpd-color-bg-subtle-secondary: var(--abdd-hover);
  --cpd-color-text-primary: var(--abdd-text);
  --cpd-color-text-secondary: var(--abdd-text-muted);
  --cpd-color-text-tertiary: var(--abdd-text-faint);
  --cpd-color-icon-primary: var(--abdd-text);
  --cpd-color-icon-secondary: var(--abdd-text-muted);
  --cpd-color-icon-tertiary: var(--abdd-text-faint);
}