/* ================================================================
   Loki UI  ·  custom.css  ·  v loki-1
   
   Apple Glass Design — deep violet + frosted glass surfaces.
   Bubbles: JS-wrapped [data-tg-side] with .tg-bubble-row avatar.
   ================================================================ */


/* ================================================================
   §1 — CPD PALETTE
   ================================================================ */

.cpd-theme-dark,
html.cpd-theme-dark,
body.cpd-theme-dark {

  --cpd-color-theme-bg: #09080f;

  --cpd-color-gray-100: #09080f;
  --cpd-color-gray-200: #0e0c18;
  --cpd-color-gray-300: #141220;
  --cpd-color-gray-400: #1a1828;
  --cpd-color-gray-500: #221f35;
  --cpd-color-gray-600: #2c2844;
  --cpd-color-gray-700: #3d3860;
  --cpd-color-gray-800: #564f80;
  --cpd-color-gray-900: #7068a0;
  --cpd-color-gray-1000: #9088c0;
  --cpd-color-gray-1100: #aea8d8;
  --cpd-color-gray-1200: #c8c4ea;
  --cpd-color-gray-1300: #dddaf5;
  --cpd-color-gray-1400: #edeaff;

  --cpd-color-alpha-gray-200: rgba(255,255,255,.03);
  --cpd-color-alpha-gray-300: rgba(255,255,255,.06);
  --cpd-color-alpha-gray-400: rgba(255,255,255,.09);
  --cpd-color-alpha-gray-700: rgba(255,255,255,.20);
  --cpd-color-alpha-gray-1400: rgba(255,255,255,.94);

  /* Accent: violet-lavender */
  --cpd-color-green-300: #250d55;
  --cpd-color-green-400: #311470;
  --cpd-color-green-500: #401d8a;
  --cpd-color-green-600: #5428a5;
  --cpd-color-green-700: #6b38bf;
  --cpd-color-green-800: #8652d8;
  --cpd-color-green-900: #a070f0;
  --cpd-color-green-1000: #ba92f8;
  --cpd-color-green-1100: #cfb0ff;

  --cpd-color-alpha-green-200: rgba(160,112,240,.09);
  --cpd-color-alpha-green-300: rgba(160,112,240,.16);
  --cpd-color-alpha-green-400: rgba(160,112,240,.26);
  --cpd-color-alpha-green-500: rgba(160,112,240,.42);
}


/* ================================================================
   §2 — DESIGN TOKENS
   ================================================================ */

body.tg {
  /* Backgrounds */
  --p-bg:       #070f0c;
  --p-shell:    #070f0c;
  --p-panel:    rgba(8, 16, 13, 0.92);
  --p-panel2:   rgba(10, 20, 16, 0.88);
  --p-border:   rgba(110,231,183,.14);
  --p-bg-layer-1: radial-gradient(ellipse at 14% 18%, color-mix(in srgb, var(--p-accent) 22%, transparent) 0%, transparent 44%);
  --p-bg-layer-2: radial-gradient(ellipse at 84% 14%, color-mix(in srgb, var(--p-acc2) 18%, transparent) 0%, transparent 40%);
  --p-bg-layer-3: radial-gradient(ellipse at 48% 82%, rgba(255,255,255,.05) 0%, transparent 58%);
  --p-panel-glow: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 10%, transparent), transparent 28%);
  --p-tile-glow: linear-gradient(135deg, color-mix(in srgb, var(--p-accent) 10%, transparent), transparent 55%);
  --p-grid-size: auto, auto, auto;

  /* Glass bubbles */
  --p-in-bg:    rgba(255, 255, 255, 0.07);
  --p-in-border: rgba(255, 255, 255, 0.11);
  --p-out-bg1:  rgba(5,90,60,.60);
  --p-out-bg2:  rgba(10,120,80,.55);
  --p-out-border: rgba(52,211,153,.28);

  /* Accent & text */
  --p-accent:   #34d399;
  --p-acc2:     #6ee7b7;
  --p-text:     #ecfff7;
  --p-muted:    #7acdb0;
  --p-dim:      rgba(255,255,255,.04);
  --p-hover:    rgba(110,231,183,.08);
  --p-selected: rgba(52,211,153,.16);
  --p-selected-border: rgba(52,211,153,.30);
  --p-glow: rgba(16,185,129,.28);
  --p-selection: rgba(52,211,153,.30);

  /* Dynamic panel width */
  --ext-w: 380px;

  /* Shape */
  --p-r:        18px;
  --p-r-sm:     10px;
}


/* ================================================================
   §3 — GLOBAL + CHAT BACKGROUND
   ================================================================ */

body.tg {
  background: var(--p-bg) !important;
  color: var(--p-text) !important;
  position: relative;
}

body.tg::before,
body.tg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.tg::before {
  background:
    var(--p-bg-layer-1),
    var(--p-bg-layer-2),
    var(--p-bg-layer-3),
    linear-gradient(180deg, color-mix(in srgb, var(--p-shell) 86%, black 14%), var(--p-bg));
  background-size: var(--p-grid-size);
  opacity: 1;
}

body.tg::after {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 32%);
  mix-blend-mode: screen;
  opacity: .8;
}

/* Subtle radial gradients — needed so backdrop-filter looks like glass */
body.tg .mx_RoomView,
body.tg .mx_RoomView_body {
  background:
    var(--p-bg-layer-1),
    var(--p-bg-layer-2),
    var(--p-bg-layer-3),
    var(--p-shell) !important;
}
body.tg .mx_MatrixChat,
body.tg .mx_MatrixChat_wrapper {
  background: var(--p-bg) !important;
  position: relative;
  z-index: 1;
}

/* Extensions panel open → shrink content */
body.tg.tg-ext-open .mx_MatrixChat_wrapper,
body.tg.tg-ext-open .mx_MatrixChat {
  margin-right: var(--ext-w) !important;
  transition: margin-right .15s ease !important;
}
body.tg:not(.tg-ext-open) .mx_MatrixChat_wrapper,
body.tg:not(.tg-ext-open) .mx_MatrixChat {
  margin-right: 0 !important;
  transition: margin-right .15s ease !important;
}


/* ================================================================
   §4 — BUBBLE LAYOUT
   ================================================================ */

/* ── Anti-FOUC: hide tiles until JS marks them ──────────────── */
body.tg li.mx_EventTile:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer):not([data-tg-side]) {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.tg li.mx_EventTile[data-tg-side] {
  opacity: 1 !important;
  transition: opacity .10s ease !important;
  pointer-events: auto !important;
}

/* Reset margins */
body.tg .mx_EventTile[data-tg-side],
body.tg li.mx_EventTile[data-tg-side] { margin: 0 !important; }

/* ── INCOMING: column — tg-msg-header (avatar+name) then bubble ── */
body.tg li[data-tg-side=in],
body.tg .mx_EventTile[data-tg-side=in] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 2px 20px 2px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  list-style: none !important;
}
body.tg li[data-tg-side=in]:not(.mx_EventTile_continuation),
body.tg .mx_EventTile[data-tg-side=in]:not(.mx_EventTile_continuation) {
  padding-top: 8px !important;
}

/* ── OUTGOING: column, right-aligned ─────────────────────────── */
body.tg li[data-tg-side=out],
body.tg .mx_EventTile[data-tg-side=out] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding: 2px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  list-style: none !important;
}
body.tg li[data-tg-side=out]:not(.mx_EventTile_continuation),
body.tg .mx_EventTile[data-tg-side=out]:not(.mx_EventTile_continuation) {
  padding-top: 8px !important;
}

/* ── JS header: [○ avatar] [Name] ───────────────────────────── */
body.tg .tg-msg-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
  width: 100% !important;
}
body.tg .tg-msg-header--hidden { display: none !important; }

/* Avatar in header */
body.tg .tg-msg-header .mx_EventTile_avatar {
  display: block !important;
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.4) !important;
}
body.tg .tg-msg-header .mx_EventTile_avatar .mx_BaseAvatar,
body.tg .tg-msg-header .mx_EventTile_avatar .mx_BaseAvatar_image,
body.tg .tg-msg-header .mx_EventTile_avatar img {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
}
/* Hide avatar if NOT inside header (Element may render it as sibling) */
body.tg [data-tg-side=in] > .mx_EventTile_avatar { display: none !important; }
body.tg [data-tg-side=out] .mx_EventTile_avatar  { display: none !important; }

/* Sender name in header */
body.tg .tg-msg-header .mx_SenderProfile,
body.tg .tg-msg-header .mx_DisambiguatedProfile {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--p-acc2) !important;
  letter-spacing: .15px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Also style name if still in tile directly (not yet moved to header) */
body.tg [data-tg-side=in] > .mx_SenderProfile,
body.tg [data-tg-side=in] > .mx_DisambiguatedProfile {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--p-acc2) !important;
  margin: 0 0 4px 38px !important;
  padding: 0 !important;
}
body.tg [data-tg-side=out] .mx_SenderProfile,
body.tg [data-tg-side=out] .mx_DisambiguatedProfile { display: none !important; }
/* If name is still inside bubble line, hide it (shown in header instead) */
body.tg [data-tg-side=in] .mx_EventTile_line .mx_SenderProfile,
body.tg [data-tg-side=in] .mx_EventTile_line .mx_DisambiguatedProfile { display: none !important; }

/* ── Bubble indented to align under name (avatar 30 + gap 8 = 38px) ── */
body.tg [data-tg-side=in] .mx_EventTile_line {
  margin-left: 38px !important;
}

/* ── GLASS BUBBLE ────────────────────────────────────────────── */
body.tg [data-tg-side] .mx_EventTile_line {
  width: auto !important;
  max-width: min(62%, 500px) !important;
  min-width: 60px;
  padding: 8px 12px !important;
  background: var(--p-in-bg) !important;
  backdrop-filter: blur(28px) saturate(2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(2) !important;
  border: 1px solid var(--p-in-border) !important;
  border-radius: 4px 16px 16px 16px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.4) !important;
  box-sizing: border-box !important;
  word-break: break-word;
  color: var(--p-text) !important;
}
body.tg [data-tg-side=out] .mx_EventTile_line {
  background: linear-gradient(145deg, var(--p-out-bg1), var(--p-out-bg2)) !important;
  backdrop-filter: blur(28px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(28px) saturate(2.2) !important;
  border: 1px solid var(--p-out-border) !important;
  border-radius: 16px 4px 16px 16px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 4px 20px rgba(80,30,180,.35) !important;
}
body.tg .mx_EventTile_continuation[data-tg-side] .mx_EventTile_line {
  border-radius: 16px !important;
}
body.tg [data-tg-side] .mx_EventTile_e2eIcon { display: none !important; }

/* ── TIMESTAMP: no layout jitter ───────────────────────────────────────
   1) Time under the bubble only (.mx_EventTile_msgOption), absolute.
   2) Duplicate time INSIDE the bubble is hidden — float:right was the
      main cause of text reflow / "shake" on hover. */
body.tg li[data-tg-side] {
  position: relative !important;
  padding-bottom: 16px !important;
  contain: layout style !important;
}
body.tg [data-tg-side] .mx_EventTile_msgOption {
  position: absolute !important;
  bottom: 2px !important;
  display: block !important;
  opacity: 0 !important;
  transition: none !important;
  font-size: 10.5px !important;
  color: rgba(255,255,255,.38) !important;
  pointer-events: none !important;
  height: auto !important;
  z-index: 2 !important;
  will-change: auto !important;
}
body.tg [data-tg-side=out] .mx_EventTile_msgOption {
  right: 4px !important; left: auto !important; text-align: right !important;
}
body.tg [data-tg-side=in] .mx_EventTile_msgOption {
  left: 38px !important; right: auto !important;
}
body.tg [data-tg-side]:hover .mx_EventTile_msgOption { opacity: 1 !important; }
body.tg [data-tg-side] .mx_EventTile_msgOption .mx_MessageTimestamp {
  color: inherit !important; font-size: inherit !important;
}
/* Never show inline time in bubble — prevents float reflow jitter */
body.tg [data-tg-side] .mx_EventTile_line .mx_MessageTimestamp {
  display: none !important;
}

/* Native bubble layout fallback */
body.tg .mx_EventTile[data-layout=bubble] { --cornerRadius: 16px; --maxWidth: 62%; }
body.tg .mx_EventTile[data-layout=bubble][data-self=false] { --backgroundColor: var(--p-in-bg); }
body.tg .mx_EventTile[data-layout=bubble][data-self=true]  { --backgroundColor: var(--p-out-bg1); }


/* ================================================================
   §5 — SENDER NAME & META
   ================================================================ */

/* Sender name — always inside the bubble (EventTile_line), no extra indent */
body.tg [data-tg-side=in] .mx_SenderProfile,
body.tg [data-tg-side=in] .mx_DisambiguatedProfile {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--p-acc2) !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  display: block !important;
}
body.tg [data-tg-side=out] .mx_SenderProfile,
body.tg [data-tg-side=out] .mx_DisambiguatedProfile { display: none !important; }

body.tg .mx_MessageTimestamp { color: rgba(255,255,255,.38) !important; font-size: 10.5px !important; }
body.tg [data-tg-side=out] .mx_MessageTimestamp { color: rgba(255,255,255,.50) !important; }

/* System messages */
body.tg .mx_EventTile_info { background: transparent !important; text-align: center !important; padding: 4px 20px !important; }
body.tg .mx_EventTile_info .mx_EventTile_line {
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  border: none !important; border-radius: 0 !important; max-width: 100% !important; padding: 2px 0 !important;
}
body.tg .mx_EventTile_info .mx_TextualEvent,
body.tg .mx_EventTile_info .mx_EventTile_content { color: rgba(255,255,255,.35) !important; font-size: 12px !important; }


/* ================================================================
   §6 — MESSAGE CONTENT
   ================================================================ */

body.tg .mx_MTextBody, body.tg .mx_EventTile_content {
  color: var(--p-text) !important; font-size: 14.5px !important; line-height: 1.5 !important;
}
body.tg .mx_MTextBody p { margin: 0 0 4px !important; }
body.tg .mx_MTextBody p:last-child { margin-bottom: 0 !important; }

/* Reply chain */
body.tg .mx_ReplyTile, body.tg .mx_ReplyChain, body.tg .mx_ReplyPreview_message {
  border-left: 3px solid var(--p-accent) !important;
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 5px 10px !important;
  margin-bottom: 6px !important;
}
body.tg [data-tg-side=out] .mx_ReplyTile,
body.tg [data-tg-side=out] .mx_ReplyChain { border-left-color: rgba(255,255,255,.35) !important; }

/* Reactions */
body.tg .mx_ReactionsRow_item {
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(8px) !important;
  font-size: 13px !important;
}
body.tg .mx_ReactionsRow_item.mx_ReactionsRow_item_reacted {
  background: var(--p-selected) !important;
  border-color: var(--p-accent) !important;
}

/* Code */
body.tg .mx_EventTile_content code { background: rgba(0,0,0,.4) !important; color: #d4bbff !important; border-radius: 5px !important; padding: 1px 5px !important; }
body.tg .mx_EventTile_content pre { background: rgba(0,0,0,.45) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; padding: 10px 14px !important; overflow-x: auto; }

/* Media */
body.tg .mx_MImageBody img, body.tg .mx_MVideoBody video { border-radius: 12px !important; }
body.tg .mx_MAudioBody, body.tg .mx_MFileBody {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}
body.tg .mx_TgTranscriptCard {
  width: fit-content;
  max-width: min(62%, 500px);
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--p-selected-border) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 12%, transparent), rgba(255,255,255,.04));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.tg [data-tg-side=out] .mx_TgTranscriptCard {
  margin-left: auto !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 18%, transparent), color-mix(in srgb, var(--p-bg) 75%, transparent));
  border-color: var(--p-selected-border);
}
body.tg .mx_TgTranscriptCard[data-status="failed"] {
  border-color: rgba(255,120,120,.22);
  background: linear-gradient(180deg, rgba(255,120,120,.10), rgba(255,255,255,.03));
}
body.tg .mx_TgTranscriptHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
body.tg .mx_TgTranscriptLabel {
  color: var(--p-text);
  font-size: 12px;
  font-weight: 700;
}
body.tg .mx_TgTranscriptMeta {
  color: var(--p-muted);
  font-size: 11px;
  white-space: nowrap;
}
body.tg .mx_TgTranscriptBody {
  color: var(--p-text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
body.tg .mx_TgTranscriptFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
body.tg .mx_TgTranscriptCopyBtn,
body.tg .mx_TgTranscriptActionBtn {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--p-text) !important;
  font-size: 11px !important;
  cursor: pointer;
}
body.tg .mx_TgTranscriptActionBtn {
  background: var(--p-selected) !important;
  font-weight: 600 !important;
}
body.tg .mx_TgTranscriptCopyBtn:hover {
  background: rgba(255,255,255,.10) !important;
}
body.tg .mx_TgTranscriptActionBtn:hover,
body.tg .mx_TgTranscriptActionBtn[data-busy="1"] {
  background: color-mix(in srgb, var(--p-accent) 26%, transparent) !important;
}

/* Action bar — cosmetic only, DO NOT override position/bottom/top
   (Element positions it correctly; overriding causes the "shake" on hover) */
body.tg .mx_MessageActionBar {
  background: rgba(20,16,40,.88) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.tg .mx_MessageActionBar .mx_AccessibleButton { color: var(--p-muted) !important; border-radius: 6px !important; }
body.tg .mx_MessageActionBar .mx_AccessibleButton:hover { color: var(--p-text) !important; background: rgba(255,255,255,.07) !important; }


/* ================================================================
   §7 — LEFT PANEL (glass)
   ================================================================ */

body.tg .mx_LeftPanel,
body.tg .mx_LeftPanel_outerWrapper {
  background: var(--p-panel) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  border-right: 1px solid var(--p-border) !important;
  box-shadow: none !important;
  position: relative;
}
body.tg .mx_SpacePanel,
body.tg .mx_SpacePanel.tg-space-rail {
  background: transparent !important;
  border-right: 1px solid color-mix(in srgb, var(--p-border) 72%, transparent) !important;
  box-shadow: none !important;
}
body.tg .mx_SpacePanel .mx_AccessibleButton,
body.tg .mx_SpaceButton,
body.tg .mx_SpacePanel_toggleMenu {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background .12s, color .12s !important;
}
body.tg .mx_SpacePanel .mx_AccessibleButton:hover,
body.tg .mx_SpaceButton:hover,
body.tg .mx_SpacePanel_toggleMenu:hover {
  background: rgba(255,255,255,.05) !important;
}
body.tg .mx_SpaceButton_active,
body.tg .mx_SpacePanel .mx_AccessibleButton[aria-pressed="true"] {
  background: rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.tg .mx_SpaceButton,
body.tg .mx_SpacePanel .mx_AccessibleButton,
body.tg .mx_SpacePanel_toggleMenu {
  position: relative !important;
}
body.tg .mx_SpaceButton .mx_BaseAvatar,
body.tg .mx_SpacePanel .mx_BaseAvatar,
body.tg .mx_SpaceButton img,
body.tg .mx_SpacePanel img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
}
body.tg .mx_SpaceButton_home,
body.tg .mx_SpaceButton_homeButton {
  color: var(--p-text) !important;
}
body.tg .mx_SpacePanel svg,
body.tg .mx_SpaceButton svg,
body.tg .mx_SpacePanel_toggleMenu svg {
  width: 20px !important;
  height: 20px !important;
}
body.tg .mx_SpacePanel_toggleMenu,
body.tg .mx_SpaceButton + .mx_SpaceButton,
body.tg .mx_SpacePanel .mx_AccessibleButton + .mx_AccessibleButton {
  margin-top: 0 !important;
}
body.tg .mx_SpacePanel .mx_NotificationBadge,
body.tg .mx_SpaceButton .mx_NotificationBadge {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-panel2) 88%, black 12%) !important;
}
body.tg .mx_SpacePanel .mx_SpaceButton_selectionWrapper,
body.tg .mx_SpacePanel [class*="selectionWrapper"] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
body.tg .mx_SpaceButton_active,
body.tg .mx_SpacePanel .mx_AccessibleButton[aria-pressed="true"],
body.tg .mx_SpacePanel [aria-current="page"],
body.tg .mx_SpacePanel [aria-selected="true"],
body.tg .mx_SpacePanel .mx_SpaceButton.mx_AccessibleButton_hasKind {
  background: rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.tg .mx_RoomList,
body.tg .mx_RoomList_wrapper,
body.tg .mx_RoomList_scrollbar {
  background: transparent !important;
}
body.tg .mx_RoomListHeader, body.tg .mx_RoomListHeader_container {
  background: transparent !important;
  border-bottom: 1px solid var(--p-border) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.02) !important;
}
body.tg .mx_RoomSearch, body.tg .mx_RoomSearch_input {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 18px !important;
  border: 1px solid var(--p-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.tg .mx_RoomSearch_input input,
body.tg .mx_RoomSearch input {
  color: var(--p-text) !important;
}
body.tg .mx_RoomSearch_input input::placeholder,
body.tg .mx_RoomSearch input::placeholder {
  color: color-mix(in srgb, var(--p-muted) 76%, white 6%) !important;
}
body.tg .mx_RoomSublist,
body.tg [class*="RoomSublist"] {
  position: relative !important;
}
body.tg .mx_RoomSublist_labelContainer,
body.tg .mx_RoomSublist_heading,
body.tg [class*="RoomSublist_labelContainer"] {
  color: color-mix(in srgb, var(--p-muted) 82%, white 8%) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
body.tg .mx_RoomTile { border-radius: 12px !important; transition: background .12s !important; }
body.tg .mx_RoomTile:hover {
  background: rgba(255,255,255,.04) !important;
}
body.tg .mx_RoomTile_selected {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
body.tg .mx_NotificationBadge { background: var(--p-accent) !important; border-radius: 10px !important; }
body.tg .mx_NotificationBadge_highlighted { background: #f87171 !important; }


/* ================================================================
   §8 — ROOM HEADER (glass)
   ================================================================ */

body.tg .mx_RoomHeader, body.tg .mx_LegacyRoomHeader {
  background: var(--p-panel2) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border-bottom: 1px solid var(--p-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Extension toggle button */
body.tg .tg-ext-toggle {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  gap: 7px !important;
  border-radius: 10px !important; border: 1px solid var(--p-selected-border) !important;
  background: color-mix(in srgb, var(--p-accent) 12%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--p-acc2) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 13px !important; font-weight: 600 !important; transition: all .15s !important; flex-shrink: 0 !important;
  z-index: 110 !important;
}
body.tg .tg-ext-toggle-icon { font-size: 14px !important; line-height: 1 !important; }
body.tg .tg-ext-toggle-label { line-height: 1 !important; white-space: nowrap !important; }
body.tg .tg-ext-toggle:hover { background: color-mix(in srgb, var(--p-accent) 22%, transparent) !important; border-color: color-mix(in srgb, var(--p-selected-border) 85%, white 5%) !important; }
body.tg.tg-ext-open .tg-ext-toggle { background: color-mix(in srgb, var(--p-accent) 30%, transparent) !important; }


/* ================================================================
   §9 — COMPOSER (glass)
   ================================================================ */

/* Outer wrapper — visual glass only, NO flex override (breaks internal rows) */
body.tg .mx_MessageComposer, body.tg .mx_RoomView_MessageComposer {
  background: var(--p-panel2) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border-top: 1px solid var(--p-border) !important;
  padding: 6px 10px !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.04) !important;
}

/* Keep composer layout native. Only safe visual tweaks live here. */
body.tg .mx_BasicMessageComposer_input {
  color: var(--p-text) !important;
  caret-color: var(--p-accent) !important;
}
body.tg .mx_MessageComposer .mx_AccessibleButton {
  color: var(--p-muted) !important;
  transition: color .12s !important;
}
body.tg .mx_MessageComposer .mx_AccessibleButton:hover {
  color: var(--p-acc2) !important;
}

body.tg .mx_ReplyPreview {
  background: color-mix(in srgb, var(--p-accent) 10%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--p-selected-border) !important;
}


/* ================================================================
   §10 — NATIVE RIGHT PANEL (profile)
   ================================================================ */

body.tg .mx_RightPanel {
  background: var(--p-panel) !important;
  backdrop-filter: blur(30px) !important;
  border-left: 1px solid var(--p-border) !important;
  color: var(--p-text) !important;
}
body.tg .mx_BaseCard { background: transparent !important; color: var(--p-text) !important; }
body.tg .mx_BaseCard_header, body.tg .mx_BaseCard_header_title {
  background: rgba(255,255,255,.03) !important;
  color: var(--p-text) !important;
  border-bottom: 1px solid var(--p-border) !important;
}
body.tg .mx_BaseCard_back, body.tg .mx_BaseCard_close { color: var(--p-muted) !important; }
body.tg .mx_BaseCard_close:hover { color: var(--p-text) !important; }
body.tg .mx_UserInfo, body.tg .mx_UserInfo_container { background: transparent !important; color: var(--p-text) !important; }
body.tg .mx_UserInfo_profile_name,
body.tg .mx_UserInfo_profile_displayName { color: var(--p-text) !important; font-weight: 700 !important; }
body.tg .mx_UserInfo_profile_mxid,
body.tg [class*="profile_mxid"] { display: none !important; }
body.tg .mx_RoomMemberList, body.tg .mx_MemberList { background: transparent !important; color: var(--p-text) !important; }
body.tg .mx_MemberList .mx_EntityTile:hover,
body.tg .mx_RoomMemberList .mx_EntityTile:hover { background: rgba(255,255,255,.05) !important; border-radius: 8px !important; }
body.tg .mx_RoomSummaryCard, body.tg .mx_RoomSummaryCard_container { background: transparent !important; color: var(--p-text) !important; }
body.tg .mx_WidgetCard { background: rgba(255,255,255,.03) !important; border-radius: var(--p-r-sm) !important; }


/* ================================================================
   §11 — EXTENSIONS PANEL (glass)
   ================================================================ */

.tg-ext-panel {
  position: fixed !important;
  top: 0 !important; right: 0 !important;
  width: var(--ext-w) !important;
  height: 100vh !important;
  background: color-mix(in srgb, var(--p-panel2) 88%, rgba(0,0,0,.35)) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border-left: 1px solid var(--p-border) !important;
  display: flex !important; flex-direction: column !important;
  z-index: 120 !important;
  transform: translateX(100%);
  transition: transform .18s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.7) !important;
  min-width: 280px !important;
}
body.tg-ext-open .tg-ext-panel { transform: translateX(0) !important; }

body.tg:has(.mx_Dialog) .tg-ext-panel,
body.tg:has(.mx_Dialog_wrapper) .tg-ext-panel,
body.tg:has(.mx_ImageView) .tg-ext-panel,
body.tg:has([role="dialog"]) .tg-ext-panel {
  opacity: .08 !important;
  pointer-events: none !important;
}

/* Resize handle */
.tg-ext-resize {
  position: absolute; left: 0; top: 0;
  width: 5px; height: 100%; cursor: col-resize; z-index: 10;
  background: transparent; transition: background .15s;
}
.tg-ext-resize:hover, .tg-ext-resize.dragging { background: color-mix(in srgb, var(--p-accent) 40%, transparent); }

/* Panel header */
.tg-ext-panel .tg-ext-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.tg-ext-panel .tg-ext-head-title { font-size: 14px; font-weight: 700; color: var(--p-text); letter-spacing: .3px; }
.tg-ext-panel .tg-ext-close-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: rgba(255,255,255,.06); color: var(--p-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: background .12s, color .12s;
}
.tg-ext-panel .tg-ext-close-btn:hover { background: rgba(255,255,255,.12); color: var(--p-text); }

/* Tabs bar */
.tg-ext-panel .tg-ext-tabs {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0; overflow-x: auto;
}
.tg-ext-panel .tg-ext-tabs::-webkit-scrollbar { height: 3px; }
.tg-ext-panel .tg-ext-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }

/* Tab button */
.tg-ext-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  color: var(--p-muted); cursor: pointer; font-size: 12px; white-space: nowrap;
  transition: all .12s; max-width: 160px;
}
.tg-ext-tab .tg-ext-tab-icon { font-size: 15px; flex-shrink: 0; }
.tg-ext-tab .tg-ext-tab-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tg-ext-tab .tg-ext-tab-close {
  margin-left: 2px; width: 16px; height: 16px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(255,255,255,.25); flex-shrink: 0; transition: all .1s;
}
.tg-ext-tab .tg-ext-tab-close:hover { background: rgba(255,255,255,.10); color: #edeaff; }
.tg-ext-tab:hover { background: var(--p-hover); color: var(--p-text); border-color: rgba(255,255,255,.12); }
.tg-ext-tab.active {
  background: var(--p-selected) !important;
  border-color: var(--p-selected-border) !important;
  color: var(--p-acc2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Add tab button */
.tg-ext-add-tab {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.14);
  background: transparent; color: var(--p-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; transition: all .12s;
}
.tg-ext-add-tab:hover { background: rgba(255,255,255,.06); color: var(--p-acc2); border-color: var(--p-selected-border); }

/* iframe */
.tg-ext-panel .tg-ext-content { flex: 1; overflow: hidden; position: relative; }
.tg-ext-frame { width: 100%; height: 100%; border: none; display: block; background: var(--p-bg); }


/* ================================================================
   §12 — DIALOGS, MENUS, TOOLTIPS (glass)
   ================================================================ */

body.tg .mx_Dialog {
  background: color-mix(in srgb, var(--p-panel2) 94%, rgba(0,0,0,.10)) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid color-mix(in srgb, var(--p-border) 72%, rgba(255,255,255,.04)) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.tg .mx_Dialog_overlay { background: rgba(0,0,0,.48) !important; backdrop-filter: blur(4px); }
body.tg .mx_Dialog_header,
body.tg .mx_Dialog_title,
body.tg .mx_Dialog .mx_BaseDialog_header {
  color: var(--p-text) !important;
}
body.tg .mx_Dialog_content,
body.tg .mx_Dialog_content .mx_AutoHideScrollbar,
body.tg .mx_Dialog .mx_AutoHideScrollbar {
  color: var(--p-text) !important;
}
body.tg .mx_Dialog .mx_SearchBox,
body.tg .mx_Dialog .mx_SearchBox_search,
body.tg .mx_Dialog .mx_Field,
body.tg .mx_Dialog input[type="text"],
body.tg .mx_Dialog input[type="search"],
body.tg .mx_Dialog textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 14px !important;
  color: var(--p-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.tg .mx_Dialog input::placeholder,
body.tg .mx_Dialog textarea::placeholder {
  color: color-mix(in srgb, var(--p-muted) 82%, white 4%) !important;
}
body.tg .mx_Dialog .mx_EntityTile,
body.tg .mx_Dialog .mx_UserPickerDialog_userTile,
body.tg .mx_Dialog .mx_RoomTile,
body.tg .mx_Dialog .mx_InviteDialog_editor .mx_EntityTile {
  margin: 4px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  background: rgba(255,255,255,.028) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
}
body.tg .mx_Dialog .mx_EntityTile:hover,
body.tg .mx_Dialog .mx_UserPickerDialog_userTile:hover,
body.tg .mx_Dialog .mx_RoomTile:hover,
body.tg .mx_Dialog .mx_InviteDialog_editor .mx_EntityTile:hover {
  background: color-mix(in srgb, var(--p-hover) 84%, rgba(255,255,255,.02)) !important;
  border-color: color-mix(in srgb, var(--p-selected-border) 68%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.14) !important;
}
body.tg .mx_Dialog .mx_EntityTile_avatar,
body.tg .mx_Dialog .mx_EntityTile .mx_BaseAvatar,
body.tg .mx_Dialog .mx_EntityTile img {
  border-radius: 50% !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--p-selected-border) 40%, rgba(255,255,255,.06)) !important;
}
body.tg .mx_Dialog .mx_EntityTile_name,
body.tg .mx_Dialog .mx_EntityTile_nameText,
body.tg .mx_Dialog .mx_UserPickerDialog_userTile_name,
body.tg .mx_Dialog .mx_RoomTile_name,
body.tg .mx_Dialog .mx_RoomTile_nameWithPreview {
  color: var(--p-text) !important;
  font-weight: 600 !important;
}
body.tg .mx_Dialog .mx_EntityTile_subtext,
body.tg .mx_Dialog .mx_EntityTile_details,
body.tg .mx_Dialog .mx_RoomTile_messagePreview,
body.tg .mx_Dialog .mx_UserPickerDialog_userTile_subtitle {
  color: color-mix(in srgb, var(--p-muted) 82%, white 6%) !important;
}
body.tg .mx_Dialog .mx_EntityTile_chevron,
body.tg .mx_Dialog .mx_EntityTile_detailsButton,
body.tg .mx_Dialog .mx_AccessibleButton_kind_link {
  color: var(--p-acc2) !important;
}
body.tg .mx_Dialog .mx_Autocomplete,
body.tg .mx_Dialog .mx_Autocomplete_wrapper,
body.tg .mx_Dialog .mx_UserPickerDialog,
body.tg .mx_Dialog .mx_InviteDialog,
body.tg .mx_Dialog .mx_RoomDirectory_dialogWrapper,
body.tg .mx_Dialog .mx_RoomDirectory {
  background: transparent !important;
  color: var(--p-text) !important;
}
body.tg .mx_Dialog .mx_UserPickerDialog_section,
body.tg .mx_Dialog .mx_InviteDialog_section,
body.tg .mx_Dialog .mx_RoomDirectory_section,
body.tg .mx_Dialog [class*="sectionHeader"] {
  color: color-mix(in srgb, var(--p-muted) 82%, white 8%) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
body.tg .mx_Dialog .mx_StyledRadioButton,
body.tg .mx_Dialog .mx_Checkbox {
  color: var(--p-text) !important;
}
body.tg .mx_Dialog .mx_FormButton,
body.tg .mx_Dialog button:not(.mx_AccessibleButton_kind_primary):not(.mx_Dialog_cancelButton) {
  border-radius: 12px !important;
}

/* Generic runtime-safe styling for chat/user/bot pickers */
body.tg .tg-picker-surface,
body.tg [role="dialog"] [role="searchbox"],
body.tg [role="dialog"] input[type="search"],
body.tg [role="dialog"] [class*="Search"],
body.tg [role="dialog"] [class*="search"] {
  color: var(--p-text) !important;
}
body.tg .tg-picker-surface {
  color: var(--p-text) !important;
}
body.tg .tg-picker-surface .tg-picker-search,
body.tg .tg-picker-surface input[type="search"],
body.tg .tg-picker-surface input[type="text"] {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 14px !important;
  color: var(--p-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.tg [role="dialog"] [role="listbox"],
body.tg [role="dialog"] [role="menu"],
body.tg [role="dialog"] [role="grid"],
body.tg [role="dialog"] [class*="results"],
body.tg [role="dialog"] [class*="Results"],
body.tg [role="dialog"] [class*="autocomplete"],
body.tg [role="dialog"] [class*="Autocomplete"],
body.tg .tg-picker-surface [role="listbox"],
body.tg .tg-picker-surface [role="menu"],
body.tg .tg-picker-surface [role="grid"],
body.tg .tg-picker-surface [class*="results"],
body.tg .tg-picker-surface [class*="Results"],
body.tg .tg-picker-surface [class*="autocomplete"],
body.tg .tg-picker-surface [class*="Autocomplete"] {
  background: transparent !important;
  color: var(--p-text) !important;
}
body.tg [role="dialog"] [role="option"],
body.tg [role="dialog"] [role="menuitem"],
body.tg [role="dialog"] [role="row"],
body.tg [role="dialog"] [class*="user"][class*="Tile"],
body.tg [role="dialog"] [class*="User"][class*="Tile"],
body.tg [role="dialog"] [class*="EntityTile"],
body.tg [role="dialog"] [class*="RoomTile"],
body.tg .tg-picker-surface .tg-picker-item {
  margin: 4px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  background: rgba(255,255,255,.028) !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
}
body.tg [role="dialog"] [role="option"]:hover,
body.tg [role="dialog"] [role="menuitem"]:hover,
body.tg [role="dialog"] [role="row"]:hover,
body.tg [role="dialog"] [class*="user"][class*="Tile"]:hover,
body.tg [role="dialog"] [class*="User"][class*="Tile"]:hover,
body.tg [role="dialog"] [class*="EntityTile"]:hover,
body.tg [role="dialog"] [class*="RoomTile"]:hover,
body.tg .tg-picker-surface .tg-picker-item:hover {
  background: color-mix(in srgb, var(--p-hover) 84%, rgba(255,255,255,.02)) !important;
  border-color: color-mix(in srgb, var(--p-selected-border) 68%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.14) !important;
}
body.tg [role="dialog"] [aria-selected="true"],
body.tg [role="dialog"] [data-selected="true"],
body.tg [role="dialog"] [class*="selected"],
body.tg .tg-picker-surface .tg-picker-item[aria-selected="true"],
body.tg .tg-picker-surface .tg-picker-item[data-selected="true"],
body.tg .tg-picker-surface .tg-picker-item[class*="selected"] {
  background: var(--p-selected) !important;
  border-color: var(--p-selected-border) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--p-selected-border) 60%, transparent), 0 8px 18px var(--p-glow) !important;
}
body.tg [role="dialog"] img,
body.tg [role="dialog"] [class*="Avatar"] {
  border-radius: 50% !important;
}
body.tg [role="dialog"] h2,
body.tg [role="dialog"] h3,
body.tg [role="dialog"] h4,
body.tg [role="dialog"] [role="heading"] {
  color: var(--p-text) !important;
}
body.tg .tg-picker-surface .tg-picker-item [class*="name"],
body.tg .tg-picker-surface .tg-picker-item [class*="Name"],
body.tg .tg-picker-surface .tg-picker-item strong {
  color: var(--p-text) !important;
}
body.tg .tg-picker-surface .tg-picker-item [class*="sub"],
body.tg .tg-picker-surface .tg-picker-item [class*="meta"],
body.tg .tg-picker-surface .tg-picker-item [class*="detail"] {
  color: color-mix(in srgb, var(--p-muted) 82%, white 6%) !important;
}

body.tg .mx_ContextualMenu {
  background: rgba(18, 14, 34, 0.90) !important;
  backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.7) !important;
}
body.tg .mx_IconizedContextMenuOption, body.tg .mx_ContextualMenu_item { color: var(--p-text) !important; border-radius: 8px !important; }
body.tg .mx_IconizedContextMenuOption:hover, body.tg .mx_ContextualMenu_item:hover { background: rgba(255,255,255,.06) !important; }
body.tg .mx_IconizedContextMenuOption_danger { color: #f87171 !important; }
body.tg .mx_Tooltip {
  background: rgba(18, 14, 34, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important; font-size: 12px !important;
}

/* Primary buttons */
body.tg .mx_AccessibleButton_kind_primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--p-accent) 82%, black 8%), color-mix(in srgb, var(--p-acc2) 80%, black 6%)) !important;
  border: 1px solid var(--p-selected-border) !important;
  border-radius: 10px !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.tg .mx_AccessibleButton_kind_primary:hover { opacity: .88 !important; }


/* ================================================================
   §13 — MISC
   ================================================================ */

body.tg .mx_Pill, body.tg .mx_UserPill, body.tg .mx_RoomPill {
  background: var(--p-selected) !important;
  color: var(--p-acc2) !important; border-radius: 12px !important; padding: 1px 7px !important;
  border: 1px solid var(--p-selected-border) !important;
}
body.tg a { color: var(--p-acc2) !important; }
body.tg a:hover { color: var(--p-text) !important; }
body.tg .mx_TypingNotifications { color: var(--p-acc2) !important; font-size: 12px !important; }
body.tg .mx_JumpToBottomButton {
  background: rgba(18,14,34,.88) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}
body.tg ::selection { background: var(--p-selection); }
body.tg ::-webkit-scrollbar       { width: 4px; height: 4px; }
body.tg ::-webkit-scrollbar-track { background: transparent; }
body.tg ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }
body.tg ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
body.tg .mx_AuthPage, body.tg .mx_AuthBody { background: var(--p-bg) !important; }


/* ================================================================
   §14 — ROOM TILES  (Liquid Glass)
   ================================================================ */

body.tg .mx_RoomTile {
  border-radius: 12px !important;
  margin: 2px 8px !important;
  padding: 8px 10px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .15s, box-shadow .15s, border-color .15s !important;
}
body.tg .mx_RoomTile:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}
body.tg .mx_RoomTile_selected {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  position: relative !important;
}
/* Room name */
body.tg .mx_RoomTile_name,
body.tg .mx_RoomTile_nameWithPreview { color: var(--p-text) !important; font-weight: 500 !important; font-size: 14px !important; }
body.tg .mx_RoomTile_selected .mx_RoomTile_name { color: #fff !important; }
/* Preview */
body.tg .mx_RoomTile_messagePreview { color: color-mix(in srgb, var(--p-muted) 55%, white 10%) !important; font-size: 12px !important; }
/* Avatar ring */
body.tg .mx_RoomTile .mx_BaseAvatar,
body.tg .mx_RoomTile .mx_DecoratedRoomAvatar {
  border-radius: 50% !important;
  box-shadow: none !important;
}
/* Timestamp */
body.tg .mx_RoomTile_timestamp { color: color-mix(in srgb, var(--p-muted) 42%, white 4%) !important; font-size: 11px !important; }


/* ================================================================
   §15 — THEME SETTINGS PANEL
   ================================================================ */

.mx_CustomThemeSettings_block {
  position: static;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--p-selected-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--p-accent) 18%, transparent), rgba(255,255,255,0.04));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}
.tg-theme-settings-subhead {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--p-muted) 82%, white 8%);
}
.tg-theme-settings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--p-text);
}
.tg-theme-settings-subtitle,
.tg-theme-settings-note {
  margin-top: 8px;
  color: color-mix(in srgb, var(--p-text) 74%, transparent);
  line-height: 1.5;
}
.tg-theme-settings-current {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid color-mix(in srgb, var(--p-selected-border) 60%, transparent);
}
.tg-theme-settings-current-title {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--p-muted) 84%, white 6%);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tg-theme-settings-current-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tg-theme-settings-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--p-text);
  font-size: 12px;
  font-weight: 600;
}
.tg-theme-settings-swatches {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.tg-theme-background-swatches {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.tg-settings-swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.tg-settings-bg-swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.tg-settings-bg-swatch:hover {
  background: var(--p-hover);
  border-color: color-mix(in srgb, var(--p-selected-border) 70%, transparent);
}
.tg-settings-bg-swatch.active {
  background: var(--p-selected);
  border-color: var(--p-selected-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--p-selected-border) 60%, transparent);
}
.tg-settings-bg-preview {
  width: 46px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.22);
}
.tg-settings-bg-copy {
  display: grid;
  gap: 2px;
}
.tg-settings-bg-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
}
.tg-settings-bg-caption {
  font-size: 12px;
  color: color-mix(in srgb, var(--p-muted) 88%, white 4%);
}
.tg-settings-swatch:hover {
  background: var(--p-hover);
  border-color: color-mix(in srgb, var(--p-selected-border) 70%, transparent);
}
.tg-settings-swatch.active {
  background: var(--p-selected);
  border-color: var(--p-selected-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--p-selected-border) 60%, transparent);
}
.tg-settings-swatch-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tg-settings-swatch-main {
  display: grid;
  gap: 2px;
}
.tg-settings-swatch-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
}
.tg-settings-swatch-caption {
  font-size: 12px;
  color: color-mix(in srgb, var(--p-muted) 88%, white 4%);
}
.tg-theme-settings-reset {
  margin-top: 12px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--p-selected-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--p-accent) 16%, transparent);
  color: var(--p-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tg-theme-settings-reset:hover {
  background: color-mix(in srgb, var(--p-accent) 24%, transparent);
}

.mx_CustomSecurityPanel_block {
  position: static;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  margin-top: 16px;
  margin-bottom: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--p-border) 76%, rgba(255,255,255,.04));
  background: rgba(255,255,255,.032);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.mx_CustomSecurityPanel_title {
  font-size: 15px;
  font-weight: 700;
  color: var(--p-text);
}

.mx_CustomSecurityPanel_subtitle,
.mx_CustomSecurityPanel_hint,
.mx_CustomSecurityPanel_status,
.mx_CustomSecurityPanel_label {
  margin-top: 8px;
  color: color-mix(in srgb, var(--p-text) 82%, transparent);
  line-height: 1.5;
}

.mx_CustomSecurityPanel_label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mx_CustomSecurityPanel_tokenWrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.mx_CustomSecurityPanel_tokenValue {
  flex: 1;
  min-height: 96px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 14, 22, 0.42);
  color: var(--p-text);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.mx_CustomSecurityPanel_copy {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 128px;
  background: color-mix(in srgb, var(--p-accent) 18%, rgba(255,255,255,.02));
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}

.mx_CustomSecurityPanel_copy:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.mx_CustomSecurityPanel_status a {
  color: var(--p-acc2);
  text-decoration: none;
  font-weight: 700;
}

/* Loki: убрать внешние ссылки Element/Vector из диалогов */
.mx_Dialog_wrapper a[href*="element.io"],
.mx_Dialog_wrapper a[href*="vector.im"] {
  display: none !important;
}