/*
 * ABDD Messages — Stage 3 conversation canvas overrides
 * ABDD-STAGE-3
 *
 * This stylesheet is intentionally loaded after abdd-messages.css.
 * It contains only the refinements discovered while validating the real
 * Element Web v1.12.26 staging UI: the room-list selected state, the remaining
 * resize gutter, timeline contrast, Messenger-like message rhythm and composer.
 *
 * Maintenance rule:
 * - prefer .abdd-* semantic classes added by abdd-messages.js;
 * - keep Element-specific .mx_* selectors scoped below body.abdd-messages;
 * - do not encode Matrix state, encryption logic or message content in CSS.
 */

body.abdd-messages {
  --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;
}

/* --------------------------------------------------------------------
   COMPOUND TOKEN BRIDGE
   Element 1.12.26 mixes legacy Element theme colours and Compound tokens.
   Keep the conversation and room-list surfaces consistently warm/dark.
   -------------------------------------------------------------------- */
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-bg-action-primary-rest: var(--abdd-burgundy);
  --cpd-color-bg-action-primary-hovered: var(--abdd-burgundy-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);
}

/* --------------------------------------------------------------------
   FIX 1 — LEFT/CENTER RESIZE GUTTER
   The ABDD desktop layout deliberately fixes Discussions at 360px, matching
   the product's Messenger-like geometry. The legacy left resize affordance is
   therefore unnecessary and is hidden on desktop. The right-panel resize
   affordance is left untouched for Stage 4 validation.
   -------------------------------------------------------------------- */
@media (min-width: 1181px) {
  body.abdd-messages .mx_MatrixChat > .mx_ResizeHandle--horizontal,
  body.abdd-messages .mx_LeftPanel_ResizeWrapper > .mx_ResizeHandle--horizontal {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  body.abdd-messages .mx_LeftPanel_outerWrapper,
  body.abdd-messages .mx_LeftPanel_wrapper,
  body.abdd-messages .mx_LeftPanel_ResizeWrapper {
    margin-right: 0 !important;
    border-right: 1px solid var(--abdd-border) !important;
    background: var(--abdd-surface) !important;
  }
}

/* --------------------------------------------------------------------
   FIX 2 — ELEMENT 1.12.26 ROOM-LIST ITEM
   The current virtualized room list uses mx_RoomListItemView, not only the
   historical mx_RoomTile. This is why the Stage 2 selected row stayed light.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_RoomListItemView,
body.abdd-messages .abdd-conversation-row {
  box-sizing: border-box !important;
  width: calc(100% - 20px) !important;
  margin: 3px 10px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: var(--abdd-radius-md) !important;
  background: transparent !important;
  color: var(--abdd-text) !important;
  box-shadow: none !important;
}

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

body.abdd-messages .mx_RoomListItemView_selected,
body.abdd-messages .mx_RoomListItemView[aria-selected="true"],
body.abdd-messages .abdd-conversation-row.mx_RoomListItemView_selected {
  background: var(--abdd-active) !important;
  color: var(--abdd-text) !important;
  box-shadow: inset 3px 0 0 var(--abdd-gold) !important;
}

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

body.abdd-messages .mx_RoomListItemView:focus-visible {
  outline: 2px solid var(--abdd-gold) !important;
  outline-offset: -2px !important;
}

body.abdd-messages .mx_RoomListItemView span,
body.abdd-messages .mx_RoomListItemView p {
  color: inherit;
}

/* --------------------------------------------------------------------
   STAGE 3 — CONVERSATION HEADER
   Compact identity on the left, circular native actions on the right.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_RoomHeader {
  min-height: 64px !important;
  height: 64px !important;
  padding-inline: 14px 16px !important;
  background: var(--abdd-surface) !important;
  color: var(--abdd-text) !important;
  border-bottom: 1px solid var(--abdd-border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28) !important;
}

body.abdd-messages .mx_RoomHeader:hover {
  background: var(--abdd-surface) !important;
}

body.abdd-messages .mx_RoomHeader_heading,
body.abdd-messages .mx_RoomHeader_info,
body.abdd-messages .mx_RoomHeader_infoWrapper,
body.abdd-messages .mx_RoomHeader h1,
body.abdd-messages .mx_RoomHeader h2,
body.abdd-messages .mx_RoomHeader h3 {
  color: var(--abdd-text) !important;
}

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

body.abdd-messages .mx_RoomHeader button,
body.abdd-messages .mx_RoomHeader .mx_AccessibleButton {
  border-radius: 999px !important;
  color: var(--abdd-gold-light) !important;
}

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

body.abdd-messages .mx_RoomHeader svg {
  color: var(--abdd-gold-light) !important;
}

/* --------------------------------------------------------------------
   STAGE 3 — TIMELINE CANVAS AND CONTRAST
   The screenshot exposed several legacy light-theme text values surviving on
   the dark canvas. Explicitly bridge those stable Element timeline selectors.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_RoomView_body,
body.abdd-messages .mx_RoomView_timeline,
body.abdd-messages .mx_RoomView_messagePanel,
body.abdd-messages .mx_RoomView_messageListWrapper,
body.abdd-messages .mx_RoomView_MessageList,
body.abdd-messages .mx_ScrollPanel {
  background: var(--abdd-warm-black-deep) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_RoomView_MessageList {
  padding: 20px 18px 16px !important;
}

body.abdd-messages .mx_EventTile,
body.abdd-messages .mx_EventTile_line,
body.abdd-messages .mx_EventTile_body,
body.abdd-messages .mx_EventTile_content,
body.abdd-messages .mx_MTextBody,
body.abdd-messages .mx_TextualEvent,
body.abdd-messages .mx_EventTile .markdown-body {
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_EventTile_info,
body.abdd-messages .mx_EventTile_info .mx_EventTile_line,
body.abdd-messages .mx_EventTile_info .mx_EventTile_content,
body.abdd-messages .mx_EventTile_info .mx_MTextBody {
  color: var(--abdd-text-muted) !important;
}

body.abdd-messages .mx_DisambiguatedProfile,
body.abdd-messages .mx_EventTile_senderDetails,
body.abdd-messages .mx_EventTile_senderDetails a {
  color: var(--abdd-gold-light) !important;
  font-weight: 650 !important;
}

body.abdd-messages .mx_MessageTimestamp,
body.abdd-messages .mx_EventTile_timestamp {
  color: var(--abdd-text-faint) !important;
}

body.abdd-messages .mx_EventTile a,
body.abdd-messages .mx_RoomView_MessageList a {
  color: var(--abdd-gold-light) !important;
}

/* Date/read separators remain quiet; Messenger uses these as orientation, not decoration. */
body.abdd-messages .mx_DateSeparator,
body.abdd-messages .mx_ReadMarker,
body.abdd-messages .mx_NewRoomIntro {
  color: var(--abdd-text-muted) !important;
}

body.abdd-messages .mx_DateSeparator::before,
body.abdd-messages .mx_DateSeparator::after,
body.abdd-messages .mx_ReadMarker_line {
  border-color: var(--abdd-border) !important;
  background: var(--abdd-border) !important;
}

/* --------------------------------------------------------------------
   STAGE 3 — MESSAGE BUBBLES
   The adapter adds .abdd-message-own / .abdd-message-incoming by translating
   Element's own-event presentation state. No sender name or message content is
   inspected. Text messages get a Messenger-like bubble while media remains
   native and receives only rounded framing below.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_EventTile:not(.mx_EventTile_info) .mx_MTextBody {
  display: inline-block;
  box-sizing: border-box;
  max-width: min(72%, 680px);
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 16px !important;
  background: var(--abdd-message-incoming) !important;
  color: var(--abdd-text) !important;
  line-height: 1.4;
}

body.abdd-messages .abdd-message-incoming:not(.mx_EventTile_info) .mx_MTextBody:hover {
  background: var(--abdd-message-incoming-hover) !important;
}

body.abdd-messages .abdd-message-own:not(.mx_EventTile_info) .mx_MTextBody {
  background: var(--abdd-message-outgoing) !important;
  color: var(--abdd-ivory) !important;
}

body.abdd-messages .abdd-message-own:not(.mx_EventTile_info) .mx_MTextBody:hover {
  background: var(--abdd-message-outgoing-hover) !important;
}

/* Own-event alignment is deliberately modest: move the content block toward
   the right without rewriting Element's timeline/grid semantics. */
body.abdd-messages .abdd-message-own .mx_EventTile_line {
  text-align: right;
}

body.abdd-messages .abdd-message-own .mx_EventTile_body,
body.abdd-messages .abdd-message-own .mx_EventTile_content {
  margin-left: auto !important;
}

body.abdd-messages .abdd-message-own .mx_MTextBody,
body.abdd-messages .abdd-message-own .mx_EventTile_content img,
body.abdd-messages .abdd-message-own .mx_EventTile_content video,
body.abdd-messages .abdd-message-own .mx_EventTile_content audio {
  text-align: left;
}

/* Media should feel like part of the same bubble system, without altering
   Element's download/decryption/rendering behaviour. */
body.abdd-messages .mx_EventTile img,
body.abdd-messages .mx_EventTile video,
body.abdd-messages .mx_MImageBody img,
body.abdd-messages .mx_MVideoBody video {
  border-radius: 14px !important;
}

body.abdd-messages .mx_VoiceMessagePrimaryContainer,
body.abdd-messages .mx_MAudioBody,
body.abdd-messages .mx_AudioPlayer {
  border-radius: 16px !important;
  background: var(--abdd-surface-raised) !important;
  color: var(--abdd-text) !important;
}

/* Action/reaction surfaces should not reintroduce light cards. */
body.abdd-messages .mx_MessageActionBar,
body.abdd-messages .mx_ReactionsRowButton,
body.abdd-messages .mx_EmojiReactionsButton,
body.abdd-messages .mx_ContextualMenu {
  background: var(--abdd-surface-raised) !important;
  color: var(--abdd-text) !important;
  border-color: var(--abdd-border) !important;
}

/* --------------------------------------------------------------------
   STAGE 3 — ROOM STATUS / ENCRYPTION NOTICE
   The staging screenshot showed a light status block above the composer.
   Keep status semantics intact; only normalize the dark presentation.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_RoomView_statusArea,
body.abdd-messages .mx_RoomView_statusAreaBox {
  background: var(--abdd-warm-black-deep) !important;
  color: var(--abdd-text-muted) !important;
}

body.abdd-messages .mx_RoomView_statusAreaBox_line {
  border-color: var(--abdd-border) !important;
}

body.abdd-messages .mx_RoomView_statusArea *,
body.abdd-messages .mx_RoomView_statusAreaBox * {
  color: inherit;
}

/* --------------------------------------------------------------------
   STAGE 3 — COMPOSER
   Messenger-inspired single rounded editing surface, but all Element actions,
   encryption and event submission remain native.
   -------------------------------------------------------------------- */
body.abdd-messages .mx_MessageComposer {
  box-sizing: border-box !important;
  min-height: 60px !important;
  padding: 8px 12px 10px !important;
  margin: 0 !important;
  background: var(--abdd-surface) !important;
  color: var(--abdd-text) !important;
  border-top: 1px solid var(--abdd-border) !important;
}

body.abdd-messages .mx_MessageComposer_wrapper {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.abdd-messages .mx_MessageComposer_row {
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 3px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background: var(--abdd-composer-bg) !important;
  color: var(--abdd-text) !important;
}

body.abdd-messages .mx_MessageComposer_row:focus-within {
  border-color: var(--abdd-border-strong) !important;
  box-shadow: 0 0 0 1px rgba(184, 154, 103, 0.08) !important;
}

body.abdd-messages .mx_MessageComposer_input,
body.abdd-messages .mx_BasicMessageComposer,
body.abdd-messages .mx_BasicMessageComposer_input,
body.abdd-messages .mx_MessageComposer textarea,
body.abdd-messages .mx_MessageComposer [contenteditable="true"] {
  background: transparent !important;
  color: var(--abdd-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.abdd-messages .mx_MessageComposer textarea::placeholder,
body.abdd-messages .mx_MessageComposer input::placeholder {
  color: var(--abdd-text-faint) !important;
  opacity: 1;
}

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-gold-light) !important;
}

body.abdd-messages .mx_MessageComposer button:hover,
body.abdd-messages .mx_MessageComposer .mx_MessageComposer_button:hover {
  background: var(--abdd-hover) !important;
  border-radius: 999px !important;
}

body.abdd-messages .mx_MessageComposer_sendMessage {
  background: var(--abdd-burgundy) !important;
  color: var(--abdd-ivory) !important;
  border-radius: 999px !important;
}

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

/* --------------------------------------------------------------------
   STAGE 3 RESPONSIVE GUARDRAIL
   Stage 5 owns tablet/mobile redesign. Keep these refinements desktop-safe.
   -------------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.abdd-messages .mx_EventTile:not(.mx_EventTile_info) .mx_MTextBody {
    max-width: 82%;
  }
}