/*
 * ABDD Messages — Stage 4.2 desktop fidelity pass
 * ABDD-STAGE-4-2
 *
 * Product intent
 * --------------
 * Stage 4 established the three-column desktop information architecture.
 * Stage 4.1 corrected its geometry. This layer now refines the visual rhythm
 * against the approved Messenger reference without turning ABDD Messages into
 * a literal Facebook clone.
 *
 * Scope
 * -----
 * - compact Element's native new-room introduction;
 * - improve own-message alignment using the semantic class produced by the
 *   ABDD DOM adapter plus Element's stable slot boundary;
 * - reduce timeline whitespace and make the composer feel more conversational;
 * - turn the native RoomSummary menubar separators into readable ABDD section
 *   headings while keeping every native Element callback intact;
 * - preserve ABDD Clair / ABDD Sombre through semantic --abdd-* variables.
 *
 * Deliberate non-goal
 * -------------------
 * The global top navigation is intentionally NOT redesigned in this stage.
 * Real staging feedback says its visual language is not yet approved, so it is
 * tracked for a dedicated pass after the desktop messaging surface is stable.
 */

/* ========================================================================== 
   1. CONVERSATION INTRO — keep useful context, remove the oversized landing
   ========================================================================== */
@media (min-width: 1181px) {
  body.abdd-messages .mx_NewRoomIntro,
  body.abdd-messages .abdd-room-intro {
    box-sizing: border-box !important;
    max-width: 760px !important;
    margin: 18px 28px 22px 64px !important;
    color: var(--abdd-text) !important;
  }

  body.abdd-messages .mx_NewRoomIntro .mx_BaseAvatar,
  body.abdd-messages .abdd-room-intro .mx_BaseAvatar {
    width: 52px !important;
    height: 52px !important;
  }

  body.abdd-messages .mx_NewRoomIntro .mx_BaseAvatar img,
  body.abdd-messages .abdd-room-intro .mx_BaseAvatar img {
    width: 52px !important;
    height: 52px !important;
  }

  body.abdd-messages .mx_NewRoomIntro > h2,
  body.abdd-messages .abdd-room-intro > h2 {
    margin: 10px 0 5px !important;
    color: var(--abdd-text) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  body.abdd-messages .mx_NewRoomIntro > p,
  body.abdd-messages .abdd-room-intro > p {
    max-width: 690px !important;
    margin: 0 !important;
    color: var(--abdd-text-muted) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  body.abdd-messages .mx_NewRoomIntro_buttons {
    margin-top: 12px !important;
    gap: 8px !important;
  }
}

/* ========================================================================== 
   2. TIMELINE RHYTHM — denser, calmer, closer to Messenger
   ========================================================================== */
body.abdd-messages .mx_RoomView_MessageList {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.abdd-messages .mx_EventTile.abdd-message-event {
  padding-top: 10px !important;
}

body.abdd-messages .mx_EventTile.abdd-message-event[class*="stateContinuation"] {
  padding-top: 2px !important;
}

body.abdd-messages .mx_DateSeparator {
  margin-block: 10px !important;
  color: var(--abdd-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Element 1.12.26's shared EventTileView exposes a generated slotBody class.
 * The adapter already determines own/incoming state from Element's own state;
 * this selector only changes layout. No sender name or message body is read. */
body.abdd-messages .abdd-message-own [class*="slotBody"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

body.abdd-messages .abdd-message-own .mx_EventTile_content,
body.abdd-messages .abdd-message-own .mx_EventTile_body {
  margin-inline-start: auto !important;
  margin-inline-end: 12px !important;
}

body.abdd-messages .abdd-message-own .mx_MTextBody {
  border-end-end-radius: 5px !important;
}

body.abdd-messages .abdd-message-incoming .mx_MTextBody {
  border-end-start-radius: 5px !important;
}

/* Keep long messages readable while allowing short bubbles to stay compact. */
body.abdd-messages .mx_EventTile:not(.mx_EventTile_info) .mx_MTextBody {
  width: fit-content !important;
  max-width: min(72%, 640px) !important;
}

/* ========================================================================== 
   3. COMPOSER — quieter shell, stronger single-field illusion
   ========================================================================== */
body.abdd-messages .mx_MessageComposer {
  min-height: 56px !important;
  padding: 7px 10px 8px !important;
}

body.abdd-messages .mx_MessageComposer_row {
  min-height: 40px !important;
  padding-inline: 8px !important;
  border-radius: 20px !important;
}

body.abdd-messages .mx_MessageComposer_row:focus-within {
  border-color: var(--abdd-border-strong) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--abdd-details-accent, var(--abdd-burgundy)) 14%, transparent) !important;
}

/* ========================================================================== 
   4. DETAILS IDENTITY — closer to the Messenger profile hierarchy
   ========================================================================== */
body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_container {
  padding: 20px 16px 12px !important;
}

body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_container [data-testid="avatar-img"] {
  --cpd-avatar-size: 78px !important;
}

body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_roomName {
  margin-top: 10px !important;
  margin-bottom: 2px !important;
  font-size: 17px !important;
}

body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_badges {
  margin-top: 8px !important;
}

body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_topic {
  margin-top: 8px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
}

/* ========================================================================== 
   5. DETAILS SECTIONS — native actions, Messenger-like information hierarchy

   The DOM adapter marks the three native Compound separators by ordinal order.
   Their labels are presentation-only and bilingual according to document.lang.
   Menu items remain Element-owned: we neither clone nor intercept callbacks.
   ========================================================================== */
body.abdd-messages .mx_RightPanel .abdd-details-menu {
  padding: 2px 10px 20px !important;
}

body.abdd-messages .mx_RightPanel .abdd-details-section-break {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  margin: 9px 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.abdd-messages .mx_RightPanel .abdd-details-section-break::before {
  content: attr(data-abdd-section);
  display: block;
  box-sizing: border-box;
  padding: 10px 10px 7px;
  color: var(--abdd-text) !important;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  text-align: left;
}

body.abdd-messages .mx_RightPanel .abdd-details-section-break::after {
  content: "";
  display: block;
  height: 1px;
  margin-inline: 10px;
  background: var(--abdd-border);
}

body.abdd-messages .mx_RightPanel .abdd-details-menu [role="menuitem"],
body.abdd-messages .mx_RightPanel .abdd-details-menu [role="menuitemcheckbox"] {
  min-height: 40px !important;
  margin: 1px 0 !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}

body.abdd-messages .mx_RightPanel .abdd-details-menu [role="menuitem"]:hover,
body.abdd-messages .mx_RightPanel .abdd-details-menu [role="menuitemcheckbox"]:hover {
  background: var(--abdd-hover) !important;
}

/* The first native group (Favourite / Invite) behaves like primary actions and
 * therefore stays visually closer to the identity block than utility groups. */
body.abdd-messages .mx_RightPanel .abdd-details-group-primary {
  font-weight: 600 !important;
}

body.abdd-messages .mx_RightPanel .abdd-details-group-management,
body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_bottomOptions {
  margin-top: 1px !important;
}

/* ========================================================================== 
   6. LIGHT/DARK POLISH
   ========================================================================== */
body.abdd-messages.cpd-theme-light .mx_RightPanel .abdd-details-section-break::before,
body.abdd-messages.cpd-theme-light-hc .mx_RightPanel .abdd-details-section-break::before {
  color: var(--abdd-burgundy) !important;
}

body.abdd-messages.cpd-theme-dark .mx_RightPanel .abdd-details-section-break::before,
body.abdd-messages.cpd-theme-dark-hc .mx_RightPanel .abdd-details-section-break::before {
  color: var(--abdd-gold-light) !important;
}

/* Stage 5 will own responsive behaviour. Do not leak desktop fidelity rules
 * into tablet/mobile merely because a viewport is narrow. */
@media (max-width: 1180px) {
  body.abdd-messages .mx_NewRoomIntro,
  body.abdd-messages .abdd-room-intro {
    margin: revert !important;
  }
}