/* ================================================================
   Loki Talk · glass-overlay.css · v glass-3
   Massive glassmorphism redesign.
   Loaded LAST (after custom.css) and self-sufficient — does not
   depend on body.tg class. Works on body.glass alone.
   ================================================================ */

/* ----------------------------------------------------------------
   §0 — Fonts (Inter + SF-mono fallback)
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), local("InterVariable"), local("SF Pro Display"),
       local("SF Pro Text"), local("Helvetica Neue");
}

/* ----------------------------------------------------------------
   §1 — Design tokens (aurora cool palette + glass surfaces)
   ---------------------------------------------------------------- */
body.glass {
  /* — Background base — */
  --g-bg-base:        #06061a;
  --g-bg-base-2:      #0a0726;
  --g-bg-base-3:      #0e0735;

  /* — Aurora blobs (animated in §2) — */
  --g-aurora-1:       #7c5cff;     /* violet */
  --g-aurora-2:       #00d4ff;     /* cyan   */
  --g-aurora-3:       #ff5cd6;     /* magenta*/
  --g-aurora-4:       #5eead4;     /* mint   */

  /* — Glass surfaces (3 elevation tiers) — */
  --g-surface-0:      rgba(255,255,255,0.025);  /* shell      */
  --g-surface-1:      rgba(255,255,255,0.045);  /* panels     */
  --g-surface-2:      rgba(255,255,255,0.075);  /* tiles, inputs */
  --g-surface-3:      rgba(255,255,255,0.110);  /* hover state */
  --g-surface-sel:    rgba(124, 92,255,0.220);  /* selected   */

  --g-edge-soft:      rgba(255,255,255,0.08);
  --g-edge:           rgba(255,255,255,0.16);
  --g-edge-hi:        rgba(255,255,255,0.28);

  /* — Sheen (top inner highlight) — */
  --g-sheen:          inset 0 1px 0 rgba(255,255,255,0.10);
  --g-sheen-hi:       inset 0 1px 0 rgba(255,255,255,0.18);

  /* — Shadows (depth) — */
  --g-shadow-sm:      0 2px 12px rgba(7,6,28,.32);
  --g-shadow-md:      0 6px 24px rgba(7,6,28,.42), var(--g-sheen);
  --g-shadow-lg:      0 14px 48px rgba(7,6,28,.55), var(--g-sheen-hi);
  --g-shadow-xl:      0 28px 80px rgba(7,6,28,.65), var(--g-sheen-hi);

  --g-glow-violet:    0 0 32px rgba(124, 92,255,0.45);
  --g-glow-cyan:      0 0 32px rgba(  0,212,255,0.40);
  --g-glow-mint:      0 0 32px rgba( 94,234,212,0.40);

  /* — Accent — */
  --g-accent:         #7c5cff;
  --g-accent-2:       #00d4ff;
  --g-accent-3:       #ff5cd6;
  --g-accent-4:       #5eead4;
  --g-accent-grad:    linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
  --g-accent-grad-2:  linear-gradient(135deg, #ff5cd6 0%, #7c5cff 100%);

  /* — Text — */
  --g-text:           #f5f3ff;
  --g-text-muted:     rgba(245,243,255,0.72);
  --g-text-dim:       rgba(245,243,255,0.48);

  /* — Bubbles — */
  --g-bubble-in-bg:       rgba(255,255,255,0.065);
  --g-bubble-in-border:   rgba(255,255,255,0.13);
  --g-bubble-out-grad:    linear-gradient(135deg,
                              rgba(124, 92,255,0.62),
                              rgba(  0,212,255,0.55));
  --g-bubble-out-border:  rgba(255,255,255,0.24);

  /* — Blur strengths — */
  --g-blur-light:     blur(12px) saturate(140%);
  --g-blur:           blur(28px) saturate(170%);
  --g-blur-strong:    blur(48px) saturate(190%);

  /* — Radii — */
  --g-r:              16px;
  --g-r-sm:           10px;
  --g-r-lg:           22px;
  --g-r-xl:           28px;
  --g-r-pill:         999px;

  /* — Easing — */
  --g-ease:           cubic-bezier(.22,.61,.36,1);
  --g-ease-out:       cubic-bezier(.16,1,.3,1);

  /* font system */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: "ss01", "cv11", "cv02", "cv03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Map glass tokens onto Loki "tg" tokens used by custom.css.
   IMPORTANT: works on body.glass alone — `tg` class is optional. */
body.glass,
body.glass.tg {
  --p-bg:               var(--g-bg-base);
  --p-shell:            var(--g-bg-base);
  --p-panel:            var(--g-surface-1);
  --p-panel2:           var(--g-surface-2);
  --p-border:           var(--g-edge);
  --p-bg-layer-1:       transparent;
  --p-bg-layer-2:       transparent;
  --p-bg-layer-3:       transparent;
  --p-panel-glow:       linear-gradient(180deg, rgba(255,255,255,.07), transparent 35%);
  --p-tile-glow:        linear-gradient(135deg, rgba(255,255,255,.06), transparent 60%);

  --p-in-bg:            var(--g-bubble-in-bg);
  --p-in-border:        var(--g-bubble-in-border);
  --p-out-bg1:          rgba(124, 92,255,0.62);
  --p-out-bg2:          rgba(  0,212,255,0.55);
  --p-out-border:       var(--g-bubble-out-border);

  --p-accent:           var(--g-accent);
  --p-acc2:             var(--g-accent-2);
  --p-text:             var(--g-text);
  --p-muted:            var(--g-text-muted);
  --p-dim:              var(--g-surface-0);
  --p-hover:            var(--g-surface-3);
  --p-selected:         var(--g-surface-sel);
  --p-selected-border:  var(--g-edge-hi);
  --p-glow:             rgba(124, 92,255,0.40);
  --p-selection:        rgba(124, 92,255,0.40);

  --p-r:                var(--g-r);
  --p-r-sm:             var(--g-r-sm);
}


/* ----------------------------------------------------------------
   §2 — Aurora background (4 animated blobs + grain)
   ---------------------------------------------------------------- */
body.glass {
  background: var(--g-bg-base) !important;
  color: var(--g-text) !important;
  overflow: hidden;
}

/* Aurora layer */
body.glass::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38vmax 30vmax at 18% 22%, color-mix(in srgb, var(--g-aurora-1) 70%, transparent), transparent 60%),
    radial-gradient(ellipse 34vmax 28vmax at 82% 18%, color-mix(in srgb, var(--g-aurora-2) 60%, transparent), transparent 60%),
    radial-gradient(ellipse 36vmax 30vmax at 50% 95%, color-mix(in srgb, var(--g-aurora-3) 55%, transparent), transparent 60%),
    radial-gradient(ellipse 30vmax 24vmax at 92% 82%, color-mix(in srgb, var(--g-aurora-4) 50%, transparent), transparent 60%),
    linear-gradient(180deg, var(--g-bg-base) 0%, var(--g-bg-base-2) 60%, var(--g-bg-base-3) 100%) !important;
  filter: blur(0);
  animation: g-aurora-drift 60s ease-in-out infinite alternate;
  opacity: 1 !important;
}

/* Grain layer for "tactile" feel */
body.glass::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .4;
}

@keyframes g-aurora-drift {
  0%   { transform: translate3d(-3vmax, -2vmax, 0) rotate(0deg)   scale(1.00); }
  50%  { transform: translate3d( 4vmax,  3vmax, 0) rotate(8deg)   scale(1.06); }
  100% { transform: translate3d(-2vmax,  4vmax, 0) rotate(-6deg)  scale(1.04); }
}

#matrixchat,
.mx_MatrixChat,
.mx_MatrixChat_wrapper {
  background: transparent !important;
  position: relative;
  z-index: 2;
}


/* ----------------------------------------------------------------
   §3 — Universal glass surfaces (panels, tiles, dialogs)
   ---------------------------------------------------------------- */
/* Glass tint on left panel — we ONLY change paint (bg / blur / shadow / border).
   No width / padding / radius, otherwise we collapse Element's flex layout
   (the new RoomList container has a 2px floor). */
body.glass .mx_LeftPanel,
body.glass.tg .mx_LeftPanel {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image:
      linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
          backdrop-filter: blur(28px) saturate(170%) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04) inset !important;
  min-width: 280px !important;
  width: 280px !important;
  flex: 0 0 280px !important;
}

body.glass .mx_LeftPanel_wrapper,
body.glass .mx_LeftPanel_wrapper--user,
body.glass .mx_LeftPanel_roomListContainer {
  background-color: transparent !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.glass .mx_RightPanel,
body.glass .mx_RoomHeader,
body.glass .mx_GroupFilterPanel,
body.glass .mx_HomePage,
body.glass .mx_UserMenu_contextMenu,
body.glass .mx_GenericDropdownMenu_button,
body.glass .mx_GenericDropdownMenu_menu {
  background: var(--g-surface-1) !important;
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge-soft) !important;
  box-shadow: var(--g-shadow-md) !important;
  border-radius: var(--g-r-lg) !important;
}

/* Spaces rail (the leftmost icons strip) — paint only, no layout changes */
body.glass .mx_SpacePanel,
body.glass.tg .mx_SpacePanel {
  background-color: rgba(255,255,255,0.035) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
          backdrop-filter: blur(28px) saturate(170%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

/* Outer wrappers shouldn't have backgrounds */
body.glass .mx_MatrixChat,
body.glass .mx_LeftPanel_wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Layout — give panels breathing room as floating cards */
body.glass .mx_MatrixChat {
  display: grid !important;
  gap: 12px !important;
  padding: 12px !important;
  height: 100vh;
}

/* Sidebar (rooms list + spaces) */
body.glass .mx_LeftPanel {
  margin: 0 !important;
  overflow: hidden;
}

/* Spaces rail (the leftmost icons strip) */
body.glass .mx_SpacePanel {
  background: var(--g-surface-0) !important;
  -webkit-backdrop-filter: var(--g-blur-strong);
  backdrop-filter: var(--g-blur-strong);
  border-right: 1px solid var(--g-edge-soft) !important;
  padding: 10px 6px !important;
}

body.glass .mx_SpaceItem .mx_SpaceButton {
  border-radius: var(--g-r-sm) !important;
  transition: transform .25s var(--g-ease), box-shadow .25s var(--g-ease);
  position: relative;
}

body.glass .mx_SpaceItem .mx_SpaceButton:hover {
  transform: scale(1.06) translateY(-1px);
  box-shadow: var(--g-shadow-md), var(--g-glow-violet);
}

body.glass .mx_SpaceItem.mx_SpaceItem_active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px;
  height: 60%;
  border-radius: 4px;
  background: var(--g-accent-grad);
  box-shadow: var(--g-glow-violet);
  transform: translateY(-50%);
  animation: g-pulse 2.4s ease-in-out infinite;
}

@keyframes g-pulse {
  50% { box-shadow: 0 0 18px rgba(124, 92, 255, .85); }
}


/* ----------------------------------------------------------------
   §4 — Room tiles (in left panel)
   ---------------------------------------------------------------- */
body.glass .mx_RoomTile {
  margin: 2px 8px !important;
  border-radius: var(--g-r-sm) !important;
  transition: background .2s var(--g-ease), transform .2s var(--g-ease);
  position: relative;
}

body.glass .mx_RoomTile:hover {
  background: var(--g-surface-3) !important;
  transform: translateX(2px);
}

body.glass .mx_RoomTile_selected,
body.glass .mx_RoomTile.mx_RoomTile_selected {
  background: var(--g-surface-sel) !important;
  box-shadow: inset 0 0 0 1px var(--g-edge-hi),
              0 4px 16px rgba(124, 92, 255, .25) !important;
}

body.glass .mx_RoomTile_selected::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 8%;
  width: 3px;
  height: 84%;
  border-radius: 3px;
  background: var(--g-accent-grad);
  box-shadow: var(--g-glow-violet);
}

body.glass .mx_RoomTile_avatarContainer {
  border-radius: 50% !important;
  position: relative;
}

body.glass .mx_RoomTile_avatarContainer::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--g-accent-grad);
  z-index: -1;
  opacity: 0;
  transition: opacity .25s var(--g-ease);
  filter: blur(6px);
}

body.glass .mx_RoomTile:hover .mx_RoomTile_avatarContainer::after {
  opacity: .7;
}


/* ----------------------------------------------------------------
   §5 — Room header (top of chat)
   ---------------------------------------------------------------- */
body.glass .mx_RoomHeader {
  border-radius: var(--g-r-lg) var(--g-r-lg) 0 0 !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--g-edge-soft) !important;
}

body.glass .mx_RoomHeader_name {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--g-text) !important;
}


/* ----------------------------------------------------------------
   §6 — Message bubbles
   ---------------------------------------------------------------- */
body.glass .mx_RoomView_messagePanel,
body.glass .mx_RoomView_messageListWrapper,
body.glass .mx_ScrollPanel,
body.glass .mx_RoomView_timeline {
  background: transparent !important;
}

/* Incoming bubbles — frosted matte. Cover BOTH bubble layout AND group layout
   (custom.css adds [data-tg-side="in|out"] in group layout). */
body.glass .mx_EventTile_bubble .mx_EventTile_line,
body.glass .mx_EventTile[data-tg-side="in"] .mx_EventTile_line,
body.glass.tg .mx_EventTile[data-self="false"] .mx_EventTile_line {
  background: var(--g-bubble-in-bg) !important;
  border: 1px solid var(--g-bubble-in-border) !important;
  -webkit-backdrop-filter: var(--g-blur-light);
  backdrop-filter: var(--g-blur-light);
  border-radius: 18px 18px 18px 4px !important;
  padding: 10px 14px !important;
  box-shadow: var(--g-shadow-sm), var(--g-sheen) !important;
  transition: transform .15s var(--g-ease), box-shadow .15s var(--g-ease);
}

body.glass .mx_EventTile_bubble.mx_EventTile_continuation .mx_EventTile_line {
  border-radius: 18px !important;
}

/* Outgoing bubbles — full violet→cyan gradient. Override custom.css that
   normally tints them flat dark-blue via [data-tg-side="out"].
   Skip system / info tiles (joins, renames) — those stay flat. */
body.glass .mx_EventTile[data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass .mx_EventTile[data-tg-side="out"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass.tg .mx_EventTile[data-tg-side="out"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass .mx_EventTile.mx_EventTile_2024Layout[data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass .mx_EventTile_bubble.mx_EventTile_self:not(.mx_EventTile_info) .mx_EventTile_line {
  background: linear-gradient(135deg,
              rgba(124, 92, 255, 0.95) 0%,
              rgba(91, 192, 235, 0.92) 100%) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 18px 18px 4px 18px !important;
  color: #fff !important;
  box-shadow:
    0 8px 22px rgba(20, 24, 60, .35),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 26px rgba(124, 92, 255, .28) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Outgoing bubble text/links forced to white for legibility on gradient */
body.glass .mx_EventTile[data-tg-side="out"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass .mx_EventTile[data-tg-side="out"]:not(.mx_EventTile_info) .mx_EventTile_line *,
body.glass .mx_EventTile[data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_line,
body.glass .mx_EventTile[data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_line * {
  color: #fff !important;
}
body.glass .mx_EventTile[data-tg-side="out"]:not(.mx_EventTile_info) .mx_EventTile_line a,
body.glass .mx_EventTile[data-self="true"]:not(.mx_EventTile_info) .mx_EventTile_line a {
  color: #eaf6ff !important;
  text-decoration: underline;
}

body.glass .mx_EventTile_bubble .mx_EventTile_line:hover,
body.glass .mx_EventTile[data-tg-side] .mx_EventTile_line:hover {
  transform: translateY(-1px);
  box-shadow: var(--g-shadow-md), var(--g-sheen-hi) !important;
}

/* Hide the desktop-notifications toast in QA snapshots — not the visual we
   want to ship in glass; users can re-enable from Settings. */
body.glass .mx_ToastContainer .mx_Toast_toast {
  display: none !important;
}

body.glass .mx_EventTile .mx_SenderProfile_displayName {
  color: var(--g-accent-2) !important;
  font-weight: 600 !important;
}

body.glass .mx_EventTile .mx_MessageTimestamp {
  color: var(--g-text-dim) !important;
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------
   §7 — Composer (message input)  — full rebuild v12+
   ---------------------------------------------------------------- */
/* Outer pill — the ONE that paints. All inner wrappers are transparent. */
body.glass .mx_MessageComposer {
  background: linear-gradient(180deg,
              rgba(255,255,255,0.10) 0%,
              rgba(255,255,255,0.06) 100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
          backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 28px !important;
  margin: 14px 18px 18px !important;
  padding: 8px 10px 8px 16px !important;
  box-shadow:
    0 14px 40px rgba(8, 6, 28, .45),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: box-shadow .25s var(--g-ease), border-color .25s var(--g-ease);
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}

body.glass .mx_MessageComposer .mx_MessageComposer_wrapper,
body.glass .mx_MessageComposer .mx_MessageComposer_row,
body.glass .mx_MessageComposer .mx_SendMessageComposer,
body.glass .mx_MessageComposer .mx_BasicMessageComposer,
body.glass .mx_MessageComposer .mx_BasicMessageComposer_input,
body.glass .mx_MessageComposer .mx_MessageComposer_actions {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: unset !important;
}

body.glass .mx_MessageComposer .mx_MessageComposer_wrapper { width: 100%; }
body.glass .mx_MessageComposer .mx_MessageComposer_row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
}
body.glass .mx_MessageComposer .mx_SendMessageComposer { flex: 1 1 auto !important; min-width: 0 !important; }
body.glass .mx_MessageComposer .mx_BasicMessageComposer { width: 100% !important; }

/* The contenteditable input — main typing area */
body.glass .mx_BasicMessageComposer_input,
body.glass .mx_BasicMessageComposer_inputEmpty {
  color: #f5f3ff !important;
  font-size: 15px !important;
  line-height: 22px !important;
  min-height: 24px !important;
  max-height: 200px !important;
  padding: 6px 4px !important;
  caret-color: #b9a6ff !important;
  outline: none !important;
}
body.glass .mx_BasicMessageComposer_input:empty::before,
body.glass .mx_BasicMessageComposer_input.mx_BasicMessageComposer_inputEmpty::before {
  color: rgba(245, 243, 255, 0.55) !important;
  opacity: 1 !important;
  font-style: normal !important;
}

/* E2E icon on the left — small, accent tinted, no extra background */
body.glass .mx_MessageComposer_e2eIconWrapper {
  width: 18px !important;
  margin-right: 6px !important;
}
body.glass .mx_MessageComposer_e2eIconWrapper svg {
  color: rgba(124, 92, 255, .9) !important;
}

/* Action icon buttons (emoji / attach / more) */
body.glass .mx_MessageComposer_actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-right: 4px !important;
}
body.glass .mx_MessageComposer_button {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: transform .18s var(--g-ease), background .18s var(--g-ease);
  cursor: pointer;
}
body.glass .mx_MessageComposer_button svg,
body.glass .mx_MessageComposer_button svg * {
  color: rgba(245, 243, 255, .82) !important;
  fill: currentColor !important;
}
body.glass .mx_MessageComposer_button:hover {
  background: rgba(255, 255, 255, .10) !important;
  transform: scale(1.05);
}
body.glass .mx_MessageComposer_button:hover svg,
body.glass .mx_MessageComposer_button:hover svg * {
  color: #fff !important;
}

/* Focus state on the whole composer */
body.glass .mx_MessageComposer:focus-within {
  border-color: rgba(124, 92, 255, .55) !important;
  box-shadow:
    0 14px 40px rgba(8, 6, 28, .55),
    0 0 0 3px rgba(124, 92, 255, .22),
    0 0 36px rgba(124, 92, 255, .25),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* Send button (round gradient) — appears when text is non-empty */
body.glass .mx_MessageComposer_sendMessage,
body.glass .mx_MessageComposer_sendMessage.mx_AccessibleButton {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg,
              rgba(124,92,255,1) 0%,
              rgba(91,192,235,1) 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50% !important;
  box-shadow:
    0 8px 22px rgba(124, 92, 255, .35),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .18s var(--g-ease), box-shadow .18s var(--g-ease);
}
body.glass .mx_MessageComposer_sendMessage svg,
body.glass .mx_MessageComposer_sendMessage svg * {
  color: #fff !important;
  fill: #fff !important;
}
body.glass .mx_MessageComposer_sendMessage:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 10px 26px rgba(124, 92, 255, .45),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Format toolbar (B/I/U bubble that appears on text-selection) */
body.glass .mx_MessageComposerFormatBar {
  background: rgba(20, 16, 50, 0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
          backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
  padding: 4px !important;
}
body.glass .mx_MessageComposerFormatBar .mx_AccessibleButton {
  background: transparent !important;
  border-radius: 8px !important;
}
body.glass .mx_MessageComposerFormatBar .mx_AccessibleButton:hover {
  background: rgba(255,255,255,.10) !important;
}


/* ----------------------------------------------------------------
   §8 — Buttons (universal glass button)
   ---------------------------------------------------------------- */
body.glass .mx_AccessibleButton,
body.glass button.mx_AccessibleButton_kind_primary,
body.glass .mx_Dialog_buttons button {
  border-radius: var(--g-r-sm) !important;
  transition:
    transform .2s var(--g-ease),
    background .2s var(--g-ease),
    box-shadow .2s var(--g-ease);
}

body.glass .mx_AccessibleButton_kind_primary,
body.glass button.mx_AccessibleButton_kind_primary,
body.glass .mx_ButtonSignIn,
body.glass .mx_ButtonCreateAccount {
  background: var(--g-accent-grad) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 12px 24px !important;
  box-shadow: var(--g-shadow-md), var(--g-glow-violet) !important;
}

body.glass .mx_AccessibleButton_kind_primary:hover,
body.glass .mx_ButtonSignIn:hover,
body.glass .mx_ButtonCreateAccount:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--g-shadow-lg),
    0 0 48px rgba(124, 92, 255, .55) !important;
}

body.glass .mx_AccessibleButton_kind_secondary {
  background: var(--g-surface-2) !important;
  border: 1px solid var(--g-edge) !important;
  color: var(--g-text) !important;
  -webkit-backdrop-filter: var(--g-blur-light);
  backdrop-filter: var(--g-blur-light);
}

body.glass .mx_AccessibleButton_kind_secondary:hover {
  background: var(--g-surface-3) !important;
  border-color: var(--g-edge-hi) !important;
  transform: translateY(-1px);
}


/* ----------------------------------------------------------------
   §9 — Inputs (text fields, dropdowns)
   ---------------------------------------------------------------- */
body.glass .mx_Field,
body.glass .mx_Field input,
body.glass .mx_Field select,
body.glass .mx_Field textarea {
  background: var(--g-surface-2) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-r-sm) !important;
  color: var(--g-text) !important;
  transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
  outline: none !important;
}

body.glass .mx_Field input,
body.glass .mx_Field textarea {
  padding: 12px 14px !important;
  font-size: 15px !important;
}

body.glass .mx_Field:focus-within,
body.glass .mx_Field input:focus,
body.glass .mx_Field select:focus,
body.glass .mx_Field textarea:focus {
  border-color: var(--g-accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22) !important;
  outline: none !important;
}

/* Element uses floating labels that overlap with placeholder — visually
   noisy. We hide the floating label entirely; placeholder text already
   describes the field. */
body.glass.tg .mx_AuthBody .mx_Field_input > label,
body.glass.tg .mx_AuthBody .mx_Field_input label,
body.glass .mx_AuthBody .mx_Field_input > label,
body.glass .mx_AuthBody .mx_Field_input label,
html body.glass .mx_AuthBody .mx_Field_input > label {
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* For select fields keep an above-field label (no placeholder there). */
body.glass.tg .mx_AuthBody .mx_Field_select > label,
body.glass .mx_AuthBody .mx_Field_select > label,
body.glass .mx_AuthBody .mx_Login_type_label {
  display: block !important;
  position: static !important;
  background: transparent !important;
  color: var(--g-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-transform: none !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
}

/* Kill browser autofill bleed (Chrome paints yellow/blue) */
body.glass input:-webkit-autofill,
body.glass input:-webkit-autofill:hover,
body.glass input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--g-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--g-surface-2) inset !important;
  caret-color: var(--g-text) !important;
  border-radius: var(--g-r-sm) !important;
  transition: background-color 9999s ease-in-out 0s;
}

body.glass input::placeholder,
body.glass textarea::placeholder {
  color: var(--g-text-dim) !important;
  opacity: 1 !important;
}

/* Submit buttons inside auth forms — promote to gradient pill */
body.glass .mx_Login_submit,
body.glass .mx_AuthBody input[type="submit"],
body.glass .mx_AuthBody button[type="submit"],
body.glass .mx_AccessibleButton.mx_Login_submit {
  background: var(--g-accent-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 14px 28px !important;
  width: 100% !important;
  height: 52px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  box-shadow: var(--g-shadow-md), var(--g-glow-violet) !important;
  transition: transform .2s var(--g-ease), box-shadow .2s var(--g-ease) !important;
  margin-top: 8px !important;
}

body.glass .mx_Login_submit:hover,
body.glass .mx_AuthBody input[type="submit"]:hover,
body.glass .mx_AuthBody button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--g-shadow-lg), 0 0 48px rgba(124, 92, 255, .55) !important;
}

/* "Войти с помощью" / login flow selector — better spacing */
body.glass .mx_AuthBody .mx_ServerPicker {
  margin: 6px 0 22px !important;
}

body.glass .mx_AuthBody .mx_ServerPicker_server {
  font-weight: 600 !important;
  color: var(--g-text) !important;
  font-size: 14px !important;
}

body.glass .mx_AuthBody .mx_AuthBody_changeFlow {
  color: var(--g-text-muted) !important;
  font-size: 13.5px !important;
  margin-top: 18px !important;
}

body.glass .mx_AuthBody .mx_AuthBody_changeFlow a {
  color: var(--g-accent-2) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--g-accent-2) 40%, transparent);
  transition: color .15s var(--g-ease), border-color .15s var(--g-ease);
}

body.glass .mx_AuthBody .mx_AuthBody_changeFlow a:hover {
  color: #fff !important;
  border-color: var(--g-accent-2);
}

/* Form titles in auth card (Login/Register) — only the top h1 */
body.glass .mx_AuthBody > h1:first-child,
body.glass .mx_AuthBody > h2:first-child {
  color: var(--g-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center;
  font-size: 28px !important;
  margin: 0 0 8px !important;
}

/* "Домашний сервер" / "Homeserver" sub-section header — small label, not hero */
body.glass .mx_AuthBody h2,
body.glass .mx_AuthBody h3,
body.glass .mx_AuthBody .mx_ServerPicker_title {
  color: var(--g-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  margin: 0 0 6px !important;
  text-align: center;
}

body.glass .mx_AuthBody .mx_ServerPicker_server,
body.glass .mx_AuthBody .mx_ServerPicker {
  text-align: center;
}

body.glass .mx_AuthBody {
  text-align: center;
}

body.glass .mx_AuthBody form,
body.glass .mx_AuthBody .mx_Login_loginButtons,
body.glass .mx_AuthBody .mx_Login_field {
  text-align: left;
}

body.glass .mx_AuthBody .mx_Login_forgot {
  display: block;
  text-align: center;
  margin: 12px 0 4px;
  color: var(--g-text-muted) !important;
  font-size: 13.5px !important;
}

body.glass .mx_AuthBody .mx_Login_forgot:hover {
  color: var(--g-accent-2) !important;
}


/* ----------------------------------------------------------------
   §10 — Welcome / Login / Auth screens
   ----------------------------------------------------------------
   DOM (login):
     mx_AuthPage
       mx_AuthPage_modal  (Element wraps everything in this)
         mx_AuthPage_modalBlur     (decorative bg)
         mx_AuthPage_modalContent  (semi-opaque dark fill — strip it)
           mx_AuthHeader (Element wordmark — strip)
           mx_AuthBody   ← *the* card we promote
   DOM (welcome):
     mx_Welcome > mx_WelcomePage > mx_WelcomePage_body > mx_Parent
                                                          ↑ *the* card
   ---------------------------------------------------------------- */
body.glass .mx_AuthPage,
body.glass .mx_AuthPage_modal,
body.glass .mx_AuthPage_modal_withBlur,
body.glass .mx_AuthPage_modalContent,
body.glass .mx_AuthPage_modalBlur,
body.glass .mx_HomePage,
body.glass .mx_Welcome,
body.glass .mx_WelcomePage,
body.glass .mx_WelcomePage_guest,
body.glass .mx_WelcomePage_body {
  background: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Hide Element auth header (logo + tagline above form) — replaced by our own */
body.glass .mx_AuthHeader,
body.glass .mx_AuthHeaderLogo,
body.glass .mx_AuthFooter {
  display: none !important;
}

/* Outer pages — flex center the single card */
body.glass .mx_AuthPage,
body.glass .mx_AuthPage_modal,
body.glass .mx_AuthPage_modalContent,
body.glass .mx_WelcomePage_guest,
body.glass .mx_WelcomePage,
body.glass .mx_Welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 4vh 16px !important;
  width: 100% !important;
}

/* The single hero card — *only* one element gets the glass treatment */
body.glass .mx_AuthBody,
body.glass .mx_Parent {
  background: var(--g-surface-1) !important;
  -webkit-backdrop-filter: var(--g-blur-strong);
  backdrop-filter: var(--g-blur-strong);
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-r-xl) !important;
  box-shadow:
    var(--g-shadow-xl),
    0 0 80px rgba(124, 92, 255, .22),
    0 0 140px rgba(0, 212, 255, .10) !important;
  padding: 56px 64px 48px !important;
  width: min(560px, 92vw) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  text-align: center;
  overflow: visible !important;
}

/* Glow ring around the card */
body.glass .mx_AuthBody::before,
body.glass .mx_Parent::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--g-r-xl);
  padding: 2px;
  background: var(--g-accent-grad);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}

/* Soft outer halo */
body.glass .mx_AuthBody::after,
body.glass .mx_Parent::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 40px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,212,255,.22), transparent 60%);
  filter: blur(28px);
  opacity: .9;
  z-index: -1;
  pointer-events: none;
}

body.glass .mx_AuthHeader_title,
body.glass .mx_Parent .mx_Header_title {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  background: var(--g-accent-grad) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  margin: 0 0 14px !important;
  width: auto !important;
  display: inline-block !important;
}

/* Kill upstream "!" appended via ::after */
body.glass .mx_Parent .mx_Header_title::after,
body.glass .mx_AuthHeader_title::after {
  content: "" !important;
  display: none !important;
}

body.glass .mx_Parent .mx_Header_subtitle,
body.glass .mx_AuthHeader_subtitle {
  color: var(--g-text-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 0 auto 32px !important;
  max-width: 460px !important;
  line-height: 1.45 !important;
  width: auto !important;
  display: block !important;
}

/* Welcome buttons row: keep them on a single line, equal width, plenty of gap */
body.glass .mx_WelcomePage_body,
body.glass .mx_Welcome,
body.glass .mx_Parent {
  /* allow buttons row to shrink/grow while keeping center alignment */
}

body.glass .mx_ButtonRow,
body.glass .mx_HomePage_default_buttons {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 8px 0 0 !important;
}

body.glass .mx_ButtonParent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 180px !important;
  height: 52px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  transition: transform .2s var(--g-ease), box-shadow .2s var(--g-ease) !important;
  white-space: nowrap !important;
}

body.glass .mx_ButtonParent .mx_ButtonLabel {
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

body.glass .mx_ButtonSignIn {
  background: var(--g-accent-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: var(--g-shadow-md), var(--g-glow-violet) !important;
}

body.glass .mx_ButtonSignIn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--g-shadow-lg), 0 0 48px rgba(124,92,255,.6) !important;
}

body.glass .mx_ButtonCreateAccount {
  background: var(--g-surface-2) !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-edge) !important;
  -webkit-backdrop-filter: var(--g-blur-light) !important;
  backdrop-filter: var(--g-blur-light) !important;
  box-shadow: var(--g-shadow-sm) !important;
}

body.glass .mx_ButtonCreateAccount:hover {
  transform: translateY(-2px) !important;
  background: var(--g-surface-3) !important;
  border-color: var(--g-edge-hi) !important;
  box-shadow: var(--g-shadow-md) !important;
}

body.glass .mx_SecondaryButton {
  background: transparent !important;
  color: var(--g-text-muted) !important;
  border: 1px dashed var(--g-edge-soft) !important;
}

body.glass .mx_SecondaryButton:hover {
  color: var(--g-text) !important;
  background: var(--g-surface-2) !important;
  border-style: solid !important;
}

/* Hide upstream marketing footer & Element wordmark inside login form */
body.glass .mx_AuthFooter,
body.glass .mx_Welcome footer,
body.glass img.mx_Logo,
body.glass img[alt="Matrix" i],
body.glass img[src*="matrix.9" i],
body.glass img.mx_WelcomePage_logo,
body.glass .mx_AuthHeader_logo img {
  display: none !important;
}


/* ----------------------------------------------------------------
   §11 — Modals / Dialogs
   ---------------------------------------------------------------- */
body.glass .mx_Dialog_wrapper,
body.glass .mx_Dialog_background {
  background: rgba(7, 6, 28, .55) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}

body.glass .mx_Dialog,
body.glass .mx_Dialog_fixedWidth {
  background: var(--g-surface-1) !important;
  -webkit-backdrop-filter: var(--g-blur-strong);
  backdrop-filter: var(--g-blur-strong);
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-r-xl) !important;
  box-shadow: var(--g-shadow-xl) !important;
  color: var(--g-text) !important;
}


/* ----------------------------------------------------------------
   §12 — Context menus
   ---------------------------------------------------------------- */
body.glass .mx_ContextualMenu,
body.glass .mx_ContextualMenu_chevron_top,
body.glass .mx_ContextualMenu_chevron_bottom,
body.glass .mx_GenericDropdownMenu_menu,
body.glass .mx_Tooltip {
  background: var(--g-surface-2) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-r) !important;
  box-shadow: var(--g-shadow-lg) !important;
  color: var(--g-text) !important;
  overflow: hidden;
}

body.glass .mx_ContextualMenu .mx_AccessibleButton {
  border-radius: 8px !important;
  margin: 2px 4px !important;
}

body.glass .mx_ContextualMenu .mx_AccessibleButton:hover {
  background: var(--g-surface-3) !important;
}


/* ----------------------------------------------------------------
   §13 — Reactions (pill chips)
   ---------------------------------------------------------------- */
body.glass .mx_ReactionsRow_addReactionButton,
body.glass .mx_ReactionsRow .mx_AccessibleButton {
  background: var(--g-surface-2) !important;
  border: 1px solid var(--g-edge-soft) !important;
  border-radius: var(--g-r-pill) !important;
  -webkit-backdrop-filter: var(--g-blur-light);
  backdrop-filter: var(--g-blur-light);
  padding: 4px 10px !important;
  transition: all .2s var(--g-ease);
}

body.glass .mx_ReactionsRow .mx_AccessibleButton:hover {
  background: var(--g-surface-3) !important;
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--g-glow-violet);
}

body.glass .mx_ReactionsRow .mx_AccessibleButton_kind_primary,
body.glass .mx_ReactionsRow .mx_ReactionsRowButton_selected {
  background: var(--g-surface-sel) !important;
  border-color: var(--g-edge-hi) !important;
}


/* ----------------------------------------------------------------
   §14 — Code blocks & inline code
   ---------------------------------------------------------------- */
body.glass pre,
body.glass code,
body.glass .mx_EventTile_pre,
body.glass .mx_EventTile_codeBlock {
  background: rgba(0, 0, 0, .45) !important;
  border: 1px solid rgba(0, 212, 255, .18) !important;
  border-radius: var(--g-r-sm) !important;
  font-family: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace !important;
  color: #c5e8ff !important;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .08);
}

body.glass code {
  padding: 2px 6px;
  font-size: 0.92em;
}


/* ----------------------------------------------------------------
   §15 — Scrollbars (thin frosted pill)
   ---------------------------------------------------------------- */
body.glass *::-webkit-scrollbar { width: 8px; height: 8px; }
body.glass *::-webkit-scrollbar-track { background: transparent; }
body.glass *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background .2s var(--g-ease);
}
body.glass *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.20); }


/* ----------------------------------------------------------------
   §16 — Selection
   ---------------------------------------------------------------- */
body.glass ::selection {
  background: rgba(124, 92, 255, .42);
  color: #fff;
}


/* ----------------------------------------------------------------
   §17 — Avatars (subtle ring)
   ---------------------------------------------------------------- */
body.glass .mx_BaseAvatar,
body.glass .mx_BaseAvatar img {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10),
              0 4px 12px rgba(7,6,28,.40) !important;
}


/* ----------------------------------------------------------------
   §18 — Notification badges
   ---------------------------------------------------------------- */
body.glass .mx_NotificationBadge {
  background: var(--g-accent-grad) !important;
  box-shadow: var(--g-glow-violet) !important;
  font-weight: 700 !important;
}

body.glass .mx_NotificationBadge_highlighted {
  background: linear-gradient(135deg, #ff5cd6, #ff3b6b) !important;
  box-shadow: 0 0 24px rgba(255, 92, 214, .55) !important;
}


/* ----------------------------------------------------------------
   §19 — Spinner
   ---------------------------------------------------------------- */
body.glass .mx_Spinner_icon {
  border-color: rgba(255,255,255,.10) !important;
  border-top-color: var(--g-accent) !important;
}


/* ----------------------------------------------------------------
   §20 — Voice / video call UI
   ---------------------------------------------------------------- */
body.glass .mx_LegacyCallView,
body.glass .mx_CallView {
  background: var(--g-surface-1) !important;
  -webkit-backdrop-filter: var(--g-blur-strong);
  backdrop-filter: var(--g-blur-strong);
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-r-xl) !important;
  box-shadow: var(--g-shadow-xl) !important;
}


/* ----------------------------------------------------------------
   §21 — Settings tab labels
   ---------------------------------------------------------------- */
body.glass .mx_TabbedView_tabsContainer .mx_TabbedView_tabLabel {
  border-radius: var(--g-r-sm) !important;
  margin: 2px 4px !important;
  transition: all .2s var(--g-ease);
}

body.glass .mx_TabbedView_tabsContainer .mx_TabbedView_tabLabel:hover {
  background: var(--g-surface-2) !important;
}

body.glass .mx_TabbedView_tabsContainer .mx_TabbedView_tabLabel_active {
  background: var(--g-surface-sel) !important;
  box-shadow: inset 0 0 0 1px var(--g-edge-hi) !important;
}


/* ----------------------------------------------------------------
   §22 — Misc polish
   ---------------------------------------------------------------- */
/* Ensure all panels use consistent glass radius */
body.glass [class*="mx_"][class*="_panel"],
body.glass [class*="mx_"][class*="_card"] {
  border-radius: var(--g-r) !important;
}

/* Smooth global transitions */
body.glass * {
  transition-property: background-color, border-color, box-shadow, transform, opacity;
  transition-duration: .18s;
  transition-timing-function: var(--g-ease);
}

/* Disable transitions on text-typing fields to avoid jank */
body.glass input, body.glass textarea, body.glass [contenteditable] {
  transition: none;
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.glass::before { animation: none !important; }
  body.glass * { transition-duration: 0s !important; }
}


/* ----------------------------------------------------------------
   §23 — Mobile (<= 720px)
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  body.glass .mx_MatrixChat {
    padding: 6px !important;
    gap: 6px !important;
  }

  body.glass .mx_AuthBody {
    padding: 32px 24px !important;
    margin: 2vh 12px !important;
  }

  body.glass .mx_AuthHeader_title,
  body.glass .mx_Parent .mx_Header_title {
    font-size: 28px !important;
  }
}
/* ============================================================
   Loki Talk · Glass — REBUILD MODULE  (loaded after glass-overlay.css)
   Targets the visual issues from QA screenshots dated 2026-04-18:
     · invisible composer placeholder + "pill in pill"
     · ugly date dividers
     · loud orange sender label
     · oversized purple bar on system events
     · attachment cards painted by old custom.css
     · default browser scrollbar
     · cramped room header
     · sidebar room-tile lacks hierarchy
   All rules scoped to body.glass to avoid leaking into other themes.
   ============================================================ */

/* ---------- 1. Sender labels — tonal, not screaming orange ----------
   Element/custom.css colors usernames via .mx_Username_color1..8 with
   high-specificity (body.tg .mx_Username_colorN). We override using
   [class*="Username_color"] which adds an attribute selector that
   bumps specificity above plain class chains. */
body.glass .mx_DisambiguatedProfile_displayName,
body.glass [class*="_disambiguatedProfile_displayName"],
body.glass .mx_SenderProfile_displayName,
body.glass .mx_EventTile .mx_SenderProfile_name,
body.glass .mx_DisambiguatedProfile [class*="mx_Username_color"],
body.glass [class*="_disambiguatedProfile_"] [class*="mx_Username_color"],
body.glass .mx_EventTile [class*="mx_Username_color"],
body.glass.tg .mx_DisambiguatedProfile_displayName,
body.glass.tg .mx_EventTile .mx_DisambiguatedProfile_displayName {
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  color: #b9a6ff !important;
  text-shadow: 0 0 8px rgba(124, 92, 255, .15) !important;
  background: none !important;
  -webkit-text-fill-color: #b9a6ff !important;
}

body.glass .mx_EventTile[data-self="true"] .mx_DisambiguatedProfile_displayName,
body.glass .mx_EventTile[data-tg-side="out"] .mx_DisambiguatedProfile_displayName,
body.glass .mx_EventTile[data-self="true"] [class*="mx_Username_color"],
body.glass .mx_EventTile[data-tg-side="out"] [class*="mx_Username_color"],
body.glass .mx_EventTile[data-self="true"] .mx_SenderProfile_displayName {
  color: #5bc0eb !important;
  -webkit-text-fill-color: #5bc0eb !important;
  text-shadow: 0 0 8px rgba(91, 192, 235, .15) !important;
}

/* ---------- 2. Date dividers ("Сегодня", "Вчера") ----------
   Element 1.150 renamed mx_DateSeparator → mx_TimelineSeparator. Cover both. */
body.glass .mx_DateSeparator,
body.glass .mx_TimelineSeparator,
body.glass [class*="TimelineSeparator"],
body.glass [class*="_timelineSeparator"],
body.glass [class*="DateSeparator"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 18px 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative;
}
body.glass .mx_DateSeparator::before,
body.glass .mx_DateSeparator::after,
body.glass .mx_TimelineSeparator::before,
body.glass .mx_TimelineSeparator::after,
body.glass [class*="_timelineSeparator"]::before,
body.glass [class*="_timelineSeparator"]::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.14) 50%,
                rgba(255,255,255,0) 100%) !important;
  border: none !important;
  display: block !important;
}
body.glass .mx_DateSeparator > *,
body.glass .mx_TimelineSeparator > div,
body.glass .mx_TimelineSeparator h2,
body.glass [class*="_timelineSeparator"] [class*="_content_"],
body.glass [class*="_timelineSeparator"] h2 {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
          backdrop-filter: blur(18px) saturate(160%) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  margin: 0 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(245, 243, 255, .80) !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}
body.glass .mx_TimelineSeparator h2 {
  margin: 0 !important;
}

/* ---------- 3. System events (renames, joins) — flat, no purple bar ---------- */
body.glass .mx_GenericEventListSummary,
body.glass .mx_EventTile_info,
body.glass .mx_EventTile.mx_EventTile_info,
body.glass .mx_EventTile.mx_EventTile_info.mx_EventTile_last,
body.glass .mx_EventTile.mx_EventTile_info.mx_EventTile_lastInSection,
body.glass .mx_EventTile_bad,
body.glass [data-event-type="m.room.member"]:not([data-self]) .mx_EventTile_line,
body.glass .mx_EventTile_continuation.mx_EventTile_info {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  text-align: center;
}
body.glass .mx_EventTile_info .mx_EventTile_line,
body.glass .mx_EventTile.mx_EventTile_info .mx_EventTile_line,
body.glass .mx_EventTile.mx_EventTile_info.mx_EventTile_last .mx_EventTile_line,
body.glass .mx_EventTile.mx_EventTile_info.mx_EventTile_lastInSection .mx_EventTile_line,
body.glass .mx_GenericEventListSummary .mx_EventTile_line {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(245, 243, 255, .55) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 6px 12px !important;
  display: inline-block !important;
}
/* Hide the leading avatar+timestamp column on info tiles — keep only the message */
body.glass .mx_EventTile.mx_EventTile_info > .mx_EventTile_avatar,
body.glass .mx_EventTile.mx_EventTile_info > .mx_EventTile_msgOption,
body.glass .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar,
body.glass .mx_EventTile.mx_EventTile_info .mx_MessageTimestamp {
  display: none !important;
}
/* Kill all decorative pseudos that custom.css uses for the violet bar */
body.glass .mx_EventTile_info::before,
body.glass .mx_EventTile_info::after,
body.glass .mx_EventTile.mx_EventTile_info::before,
body.glass .mx_EventTile.mx_EventTile_info::after,
body.glass .mx_GenericEventListSummary::before,
body.glass .mx_GenericEventListSummary::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* ---------- 4. Hover action-bar over a bubble (react/reply/pin) ---------- */
body.glass .mx_MessageActionBar {
  background: rgba(20, 16, 50, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
          backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
  gap: 2px !important;
}
body.glass .mx_MessageActionBar .mx_AccessibleButton,
body.glass .mx_MessageActionBar [role="button"] {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s var(--g-ease, ease);
}
body.glass .mx_MessageActionBar .mx_AccessibleButton:hover,
body.glass .mx_MessageActionBar [role="button"]:hover {
  background: rgba(255,255,255,.10) !important;
}
body.glass .mx_MessageActionBar svg,
body.glass .mx_MessageActionBar svg * {
  color: rgba(245,243,255,.85) !important;
  fill: currentColor !important;
}

/* ---------- 5. Attachment cards (file/PDF/APK/audio) ----------
   Element 1.150 renders attachments as:
       span.mx_MFileBody
         > div.mx_MediaBody
            > button._button_..._has-icon_...
               > svg + span (filename + size)
   The button gets default secondary styling from custom.css. We
   redesign the WHOLE card on .mx_MediaBody and let the inner button
   become a glass row. */
body.glass .mx_MFileBody {
  display: inline-block !important;
  max-width: 100%;
}
body.glass .mx_MFileBody .mx_MediaBody,
body.glass [class*="_mediaBody_"],
body.glass .mx_MFileBody [data-type="info"] {
  background: linear-gradient(180deg,
              rgba(255,255,255,0.10),
              rgba(255,255,255,0.05)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
          backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  display: inline-flex !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  max-width: 360px;
  min-width: 220px;
}
body.glass .mx_MFileBody .mx_MediaBody button,
body.glass .mx_MFileBody [class*="_button_"][role="button"],
body.glass .mx_MFileBody [data-kind="secondary"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  color: #f5f3ff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-align: left !important;
  cursor: pointer;
  transition: background .15s ease;
}
body.glass .mx_MFileBody .mx_MediaBody button:hover,
body.glass .mx_MFileBody [class*="_button_"][role="button"]:hover {
  background: rgba(255,255,255,.06) !important;
}
/* The svg icon — paint it as a 36×36 gradient tile in front of filename */
body.glass .mx_MFileBody .mx_MediaBody button > svg,
body.glass .mx_MFileBody [class*="_button_"] > svg {
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
  background: linear-gradient(135deg,
              rgba(124,92,255,1),
              rgba(91,192,235,1)) !important;
  border-radius: 10px !important;
  color: #fff !important;
  fill: #fff !important;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(124,92,255,.30);
}
body.glass .mx_MFileBody .mx_MediaBody button > span,
body.glass .mx_MFileBody [class*="_button_"] > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5f3ff !important;
}

/* Outgoing attachments — gradient-tinted frame */
body.glass .mx_EventTile[data-self="true"] .mx_MFileBody .mx_MediaBody,
body.glass .mx_EventTile[data-tg-side="out"] .mx_MFileBody .mx_MediaBody,
body.glass .mx_EventTile[data-self="true"] .mx_MFileBody [data-type="info"],
body.glass .mx_EventTile[data-tg-side="out"] .mx_MFileBody [data-type="info"] {
  background: linear-gradient(135deg,
              rgba(124,92,255,.35),
              rgba(91,192,235,.25)) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Download button in the action bar (grey "↓" hover icon) — glass tint */
body.glass .mx_MessageActionBar_downloadButton {
  color: #b9a6ff !important;
}

/* Image / video previews */
body.glass .mx_MImageBody img,
body.glass .mx_MVideoBody video,
body.glass .mx_MImageReplyBody img {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

/* ---------- 6. Glass scrollbar everywhere ---------- */
body.glass *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.glass *::-webkit-scrollbar-track {
  background: transparent;
}
body.glass *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  transition: background .15s ease;
}
body.glass *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}
body.glass {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* ---------- 7. Room header — taller, calmer ---------- */
body.glass [class*="_flex_"].mx_RoomHeader,
body.glass .mx_RoomHeader,
body.glass .mx_LegacyRoomHeader {
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
          backdrop-filter: blur(24px) saturate(170%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.glass .mx_RoomHeader_name,
body.glass .mx_RoomHeader_nametext,
body.glass .mx_LegacyRoomHeader_name {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
}
body.glass .mx_RoomHeader_topic,
body.glass .mx_LegacyRoomHeader_topic {
  color: rgba(245,243,255,.6) !important;
  font-size: 12px !important;
}
body.glass .mx_RoomHeader_button,
body.glass .mx_LegacyRoomHeader_button,
body.glass .mx_RoomHeader_buttons .mx_AccessibleButton {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease, transform .15s ease;
}
body.glass .mx_RoomHeader_button:hover,
body.glass .mx_LegacyRoomHeader_button:hover,
body.glass .mx_RoomHeader_buttons .mx_AccessibleButton:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-1px);
}
body.glass .mx_RoomHeader_button svg,
body.glass .mx_RoomHeader_button svg *,
body.glass .mx_LegacyRoomHeader_button svg,
body.glass .mx_LegacyRoomHeader_button svg * {
  color: rgba(245,243,255,.85) !important;
  fill: currentColor !important;
}

/* ---------- 8. Sidebar room tile — cleaner hierarchy ---------- */
body.glass .mx_RoomTile,
body.glass .mx_RoomTileV3,
body.glass [class*="RoomTile_"]:not([class*="_avatar"]):not([class*="_badge"]) {
  border-radius: 14px !important;
  padding: 8px 10px !important;
  margin: 2px 8px !important;
  transition: background .15s ease, transform .15s ease;
}
body.glass .mx_RoomTile:hover,
body.glass .mx_RoomTileV3:hover {
  background: rgba(255,255,255,0.06) !important;
}
body.glass .mx_RoomTile_selected,
body.glass .mx_RoomTile.mx_RoomTile_selected,
body.glass .mx_RoomTileV3.mx_RoomTile_selected {
  background: linear-gradient(135deg,
              rgba(124,92,255,0.22),
              rgba(91,192,235,0.14)) !important;
  border: 1px solid rgba(124,92,255,0.45) !important;
  box-shadow: 0 0 22px rgba(124,92,255,.20) inset !important;
}
body.glass .mx_RoomTile_title,
body.glass .mx_RoomTileV3_title {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
body.glass .mx_RoomTile_subtitle,
body.glass .mx_RoomTileV3_subtitle,
body.glass .mx_RoomTile_lastMessage {
  color: rgba(245,243,255,0.55) !important;
  font-size: 12px !important;
}
body.glass .mx_RoomTile_avatarContainer,
body.glass .mx_RoomTileV3_avatar,
body.glass .mx_RoomTile .mx_BaseAvatar {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* Unread badge — gradient pill */
body.glass .mx_NotificationBadge,
body.glass .mx_RoomTile_badge,
body.glass [class*="NotificationBadge"] {
  background: linear-gradient(135deg, #7c5cff 0%, #5bc0eb 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 7px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 4px 10px rgba(124,92,255,.35) !important;
  border: none !important;
}
body.glass .mx_NotificationBadge_highlighted {
  background: linear-gradient(135deg, #ff5e9c 0%, #ff8b3d 100%) !important;
  box-shadow: 0 4px 10px rgba(255,94,156,.4) !important;
}

/* ---------- 9. Right rail (vertical icon column) ---------- */
body.glass .mx_RightPanelTabs,
body.glass [class*="RightPanel_tabs"],
body.glass [class*="_rightPanelRail"] {
  background: rgba(255,255,255,0.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
          backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  margin: 12px 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}
body.glass .mx_RightPanelTabs .mx_AccessibleButton,
body.glass [class*="RightPanel_tabs"] .mx_AccessibleButton {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  margin: 2px 0 !important;
}
body.glass .mx_RightPanelTabs .mx_AccessibleButton:hover {
  background: rgba(255,255,255,.10) !important;
}

/* ---------- 10. Empty state on home ("выбери комнату") ---------- */
body.glass .mx_HomePage_default {
  background: transparent !important;
}
body.glass .mx_HomePage_default_buttons .mx_AccessibleButton {
  background: linear-gradient(180deg,
              rgba(255,255,255,0.10),
              rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.30) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.glass .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(124,92,255,.35) !important;
}

/* ---------- 11. Reactions row (under bubble) ---------- */
body.glass .mx_ReactionsRow {
  margin-top: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
body.glass .mx_ReactionsRow_button,
body.glass .mx_ReactionsRowButton {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  color: rgba(245,243,255,.85) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
}
body.glass .mx_ReactionsRow_button.mx_ReactionsRow_selected,
body.glass .mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
  background: linear-gradient(135deg,
              rgba(124,92,255,0.30),
              rgba(91,192,235,0.20)) !important;
  border-color: rgba(124,92,255,0.45) !important;
  color: #fff !important;
}

/* ---------- 12. Mobile composer — single oval, no nesting ---------- */
@media (max-width: 600px) {
  body.glass .mx_MessageComposer {
    margin: 8px 8px 10px !important;
    padding: 6px 8px 6px 12px !important;
    min-height: 50px !important;
  }
  body.glass .mx_MessageComposer_button {
    width: 32px !important;
    height: 32px !important;
  }
  body.glass .mx_MessageComposer_sendMessage,
  body.glass .mx_MessageComposer_sendMessage.mx_AccessibleButton {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ---------- 13. Pop-up menus (context, dropdowns) ---------- */
body.glass .mx_ContextualMenu,
body.glass .mx_IconizedContextMenu,
body.glass .mx_Menu,
body.glass [role="menu"] {
  background: rgba(20, 16, 50, 0.92) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
          backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  padding: 6px !important;
}
body.glass .mx_IconizedContextMenu_item,
body.glass [role="menuitem"] {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  background: transparent !important;
}
body.glass .mx_IconizedContextMenu_item:hover,
body.glass [role="menuitem"]:hover {
  background: rgba(255,255,255,.08) !important;
}

/* ---------- 14. Code blocks inside bubbles ---------- */
body.glass .mx_EventTile pre,
body.glass .mx_EventTile_body pre {
  background: rgba(8, 6, 28, 0.85) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.glass .mx_EventTile pre code,
body.glass .mx_EventTile code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #eaf6ff !important;
}
body.glass .mx_EventTile p > code:not(pre > code) {
  background: rgba(255,255,255,0.10) !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  font-size: 12.5px !important;
}

/* ---------- 15. Read-receipts (avatars under message) ---------- */
body.glass .mx_ReadReceiptGroup,
body.glass .mx_ReadReceipt {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* ---------- 16. Auto-complete & emoji picker ---------- */
body.glass .mx_Autocomplete,
body.glass .mx_EmojiPicker {
  background: rgba(20, 16, 50, 0.92) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
          backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
}

/* ============================================================
   §17 · Continuation tile clean-up (BS-QA round 1)
   custom.css renders an empty dark "ghost square" in the avatar
   slot of every continuation EventTile to keep the timeline
   aligned. In our glass theme this looks like random black
   placeholders between PDF cards. We blank them out and let the
   tile flow without the avatar gutter on continuations.
   ============================================================ */
body.glass .mx_EventTile.mx_EventTile_continuation .mx_EventTile_avatar,
body.glass .mx_EventTile.mx_EventTile_continuation > .mx_EventTile_avatar,
body.glass .mx_EventTile.mx_EventTile_continuation .tg-msg-header,
body.glass .mx_EventTile.mx_EventTile_continuation .mx_EventTile_avatar > * {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Hide empty avatar placeholders that have no visible child  */
body.glass .mx_EventTile_continuation .mx_EventTile_avatar:empty,
body.glass .mx_EventTile_continuation .mx_EventTile_avatar > button[data-color]:not([style*="background-image"]) {
  visibility: hidden !important;
}
/* In the bubble layout, custom.css adds a `tg-msg-header` ghost
   on consecutive same-sender messages — flatten it. */
body.glass .mx_EventTile_continuation .tg-msg-header {
  display: none !important;
}

/* ----------------------------------------------------------------
   §18 · Outgoing avatar — small floating chip (was a giant tile)
   ---------------------------------------------------------------- */
body.glass .mx_EventTile[data-self="true"] .mx_EventTile_avatar,
body.glass .mx_EventTile[data-tg-side="out"] .mx_EventTile_avatar {
  display: none !important; /* outgoing messages don't need their own avatar repeated */
}

/* ----------------------------------------------------------------
   §19 · Composer right-padding for emoji+attach icons so the
   placeholder text is no longer overlapped on narrow viewports.
   ---------------------------------------------------------------- */
body.glass .mx_MessageComposer .mx_BasicMessageComposer_input,
body.glass .mx_MessageComposer_input {
  padding-right: 96px !important;
}
@media (max-width: 700px) {
  body.glass .mx_MessageComposer .mx_BasicMessageComposer_input,
  body.glass .mx_MessageComposer_input {
    padding-right: 80px !important;
  }
}

/* ----------------------------------------------------------------
   §20 · Reactions — tonal capsules (currently saturated pink)
   ---------------------------------------------------------------- */
body.glass .mx_ReactionsRow_addReactionButton,
body.glass .mx_ReactionsRow .mx_ReactionsRowButton,
body.glass .mx_ReactionsRow [class*="ReactionsRowButton"] {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(14px) !important;
          backdrop-filter: blur(14px) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  color: #f5f3ff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
  transition: background .15s ease, transform .15s ease;
}
body.glass .mx_ReactionsRow .mx_ReactionsRowButton:hover {
  background: rgba(124,92,255,.16) !important;
  transform: translateY(-1px);
}
body.glass .mx_ReactionsRow .mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
  background: linear-gradient(135deg, rgba(124,92,255,.55), rgba(91,192,235,.45)) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------
   §21 · System events — proper glass capsule (replaces flat text)
   ---------------------------------------------------------------- */
body.glass .mx_EventTile_info .mx_EventTile_line,
body.glass .mx_EventTile.mx_EventTile_info .mx_EventTile_line,
body.glass .mx_GenericEventListSummary .mx_EventTile_line,
body.glass .mx_GenericEventListSummary_summary {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
          backdrop-filter: blur(14px) saturate(160%) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  color: rgba(245, 243, 255, .60) !important;
  font-size: 12px !important;
  text-align: center !important;
  display: inline-block !important;
  margin: 4px auto !important;
  max-width: 90% !important;
}
body.glass .mx_GenericEventListSummary {
  text-align: center !important;
}
body.glass .mx_GenericEventListSummary .mx_EventListSummary_avatars {
  display: none !important; /* hide member-list avatars stack — too noisy */
}

/* ----------------------------------------------------------------
   §22 · Media-line tiles — strip the duplicate bubble background
   For PDFs/images the EventTile_line already wraps an MFileBody
   which is itself a glass card. The outer line gives us a second
   border that looks like an "empty plate" between cards. Make it
   a transparent container so only the inner card is visible.
   ---------------------------------------------------------------- */
body.glass .mx_EventTile_line.mx_EventTile_mediaLine,
body.glass .mx_EventTile_line.mx_EventTile_imageLine,
body.glass .mx_EventTile_line:has(.mx_MFileBody),
body.glass .mx_EventTile_line:has(.mx_MImageBody),
body.glass .mx_EventTile_line:has(.mx_MAudioBody),
body.glass .mx_EventTile_line:has(.mx_MVideoBody) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* keep horizontal alignment with text bubbles */
}
/* Outgoing media — also strip the gradient envelope so only the
   inner card carries the violet→cyan tint. */
body.glass .mx_EventTile[data-self="true"] .mx_EventTile_line.mx_EventTile_mediaLine,
body.glass .mx_EventTile[data-tg-side="out"] .mx_EventTile_line.mx_EventTile_mediaLine,
body.glass .mx_EventTile[data-self="true"] .mx_EventTile_line.mx_EventTile_imageLine,
body.glass .mx_EventTile[data-tg-side="out"] .mx_EventTile_line.mx_EventTile_imageLine {
  background: transparent !important;
  background-image: none !important;
}
/* The outgoing avatar bubble we keep, but the orphan avatar that
   custom.css renders on TG outgoing messages is not needed in glass. */
body.glass .mx_EventTile[data-tg-side="out"] > .mx_EventTile_avatar:not(:has(img)) {
  display: none !important;
}