@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --t-bg: #17171a;
  --t-bg2: #1e1e22;
  --t-bg3: #262629;
  --t-fg: #f0f0f3;
  --t-fg2: #9b9aa4;
  --t-fg3: #6b6a73;
  --t-ac: #ff6f99;
  --t-ac2: #ff8bad;
  --t-ac3: #ff8bad;
  --t-bd: #2b2b30;
  --t-bda: #38383f;
  --t-gl: #332127;
  --t-gls: #332127;
  --t-radius: 12px;
  --t-motion: 0.15s;
  --t-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mx-sidebar: var(--t-bg2);
  --mx-header: var(--t-bg2);
  --mx-hover: color-mix(in srgb, var(--t-bg3) 62%, transparent);
  --mx-active: color-mix(in srgb, var(--t-ac) 12%, transparent);
  --mx-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);

  --font-secondary: var(--t-font) !important;
  --tc-link: var(--t-ac) !important;
  --_164xfge1: var(--t-font) !important;
}

:root:not(.theme-light),
html:not(.theme-light),
body.dark-theme,
body.butter-theme,
._15q3ngn1,
._15q3ngn2 {
  --oq6d070: var(--t-bg) !important;
  --oq6d071: var(--mx-hover) !important;
  --oq6d072: var(--mx-active) !important;
  --oq6d073: var(--t-bd) !important;
  --oq6d074: var(--t-fg) !important;
  --oq6d075: var(--mx-sidebar) !important;
  --oq6d076: var(--mx-hover) !important;
  --oq6d077: var(--mx-active) !important;
  --oq6d078: var(--t-bd) !important;
  --oq6d079: var(--t-fg) !important;
  --oq6d07a: var(--t-bg3) !important;
  --oq6d07b: var(--mx-hover) !important;
  --oq6d07c: var(--mx-active) !important;
  --oq6d07d: var(--t-bd) !important;
  --oq6d07e: var(--t-fg) !important;
  --oq6d07f: var(--t-ac) !important;
  --oq6d07g: var(--t-ac2) !important;
  --oq6d07h: var(--t-ac3) !important;
  --oq6d07i: var(--t-ac3) !important;
  --oq6d07j: #1c1c22 !important;
  --oq6d07k: var(--t-gls) !important;
  --oq6d07l: var(--t-gl) !important;
  --oq6d07m: var(--t-gl) !important;
  --oq6d07n: var(--t-bda) !important;
  --oq6d07o: var(--t-ac) !important;
  --oq6d07p: #fff !important;
  --oq6d07q: #e7e2ed !important;
  --oq6d07r: #d8d0e3 !important;
  --oq6d07s: #c8bfd3 !important;
  --oq6d07t: #17111f !important;
  --oq6d07u: rgba(255, 255, 255, 0.07) !important;
  --oq6d07v: rgba(255, 255, 255, 0.11) !important;
  --oq6d07w: rgba(255, 255, 255, 0.15) !important;
  --oq6d07x: var(--t-bd) !important;
  --oq6d07y: var(--t-fg2) !important;
  --oq6d071t: rgba(0, 0, 0, 0.62) !important;
  --oq6d071u: rgba(0, 0, 0, 0.34) !important;
  --oq6d071v: rgba(4, 2, 10, 0.78) !important;
}

:root.theme-light,
html.theme-light,
body.light-theme,
body.silver-theme,
.oq6d071w,
._15q3ngn0 {
  --t-bg: #ffffff;
  --t-bg2: #faf9fb;
  --t-bg3: #f1f0f3;
  --t-fg: #1c1c22;
  --t-fg2: #6e6e78;
  --t-fg3: #a3a2ab;
  --t-ac: #f75383;
  --t-ac2: #e03d6c;
  --t-ac3: #e03d6c;
  --t-bd: #e8e7ec;
  --t-bda: #d7d6dd;
  --t-gl: #fdeef3;
  --t-gls: #fdeef3;
  --mx-sidebar: var(--t-bg2);
  --mx-header: var(--t-bg2);
  --mx-hover: rgba(16, 20, 42, 0.055);
  --mx-active: color-mix(in srgb, var(--t-ac) 10%, transparent);
  --mx-shadow: 0 18px 50px rgba(16, 20, 42, 0.14);

  --oq6d070: var(--t-bg) !important;
  --oq6d071: var(--mx-hover) !important;
  --oq6d072: var(--mx-active) !important;
  --oq6d073: var(--t-bd) !important;
  --oq6d074: var(--t-fg) !important;
  --oq6d075: var(--mx-sidebar) !important;
  --oq6d076: var(--mx-hover) !important;
  --oq6d077: var(--mx-active) !important;
  --oq6d078: var(--t-bd) !important;
  --oq6d079: var(--t-fg) !important;
  --oq6d07a: var(--t-bg2) !important;
  --oq6d07b: var(--mx-hover) !important;
  --oq6d07c: var(--mx-active) !important;
  --oq6d07d: var(--t-bd) !important;
  --oq6d07e: var(--t-fg) !important;
  --oq6d07f: var(--t-ac) !important;
  --oq6d07g: var(--t-ac2) !important;
  --oq6d07h: var(--t-ac3) !important;
  --oq6d07i: var(--t-ac) !important;
  --oq6d07j: #fff !important;
  --oq6d07k: var(--t-gls) !important;
  --oq6d07l: var(--t-gl) !important;
  --oq6d07m: var(--t-gl) !important;
  --oq6d07n: var(--t-bda) !important;
  --oq6d07o: var(--t-ac) !important;
  --oq6d07p: #101426 !important;
  --oq6d07q: #1f293d !important;
  --oq6d07r: #2d3748 !important;
  --oq6d07s: rgba(16, 20, 42, 0.2) !important;
  --oq6d07t: #fff !important;
  --oq6d07u: rgba(16, 20, 42, 0.05) !important;
  --oq6d07v: rgba(16, 20, 42, 0.09) !important;
  --oq6d07w: rgba(16, 20, 42, 0.13) !important;
  --oq6d07x: var(--t-bd) !important;
  --oq6d07y: var(--t-fg2) !important;
  --oq6d071t: rgba(16, 20, 42, 0.15) !important;
  --oq6d071u: rgba(16, 20, 42, 0.08) !important;
  --oq6d071v: rgba(16, 20, 42, 0.45) !important;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: var(--mx-vvh, 100dvh);
  margin: 0;
  overflow: hidden;
}

html {
  background: var(--t-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

html.theme-light {
  color-scheme: light;
}

body {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  color: var(--t-fg) !important;
  background: radial-gradient(700px circle at 50% 0, color-mix(in srgb, var(--t-ac) 8%, transparent), transparent 72%), var(--t-bg) !important;
  font-family: var(--t-font) !important;
  -webkit-font-smoothing: antialiased;
  /* This page is served via serve_static_html (pipeline.rs), a lighter
     injection path that never includes app.css - so the sitewide
     safe-area-inset-top fix there doesn't reach Matrix at all. Matrix is
     fully self-contained styling-wise by design, so fix it locally here
     instead of pulling in app.css (which would drag in sitewide nav/dock
     markup assumptions Matrix's own layout doesn't use). #matrix-site-bar
     is a normal-flow (position: relative) flex child, so padding on this
     flex container is enough - no separate sticky-bar fix needed the way
     app.css's .app-topbar required. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html:not([data-bglayer]) body::before,
html:not([data-bglayer]) body::after { display: none !important; }

#matrix-site-bar {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 max(28px, calc((100vw - 1280px) / 2));
  color: var(--t-fg);
  background: var(--t-bg);
  border-bottom: 1px solid var(--t-bd);
}

.matrix-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--t-fg);
  font-size: 21px;
  font-weight: 750;
  font-family: var(--t-font);
  letter-spacing: -0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.matrix-wordmark b { font-weight: 750; }
.matrix-wordmark span { color: var(--t-fg2); }

.matrix-site-links {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.matrix-site-links::-webkit-scrollbar { display: none; }

.matrix-site-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--t-fg2);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  text-decoration: none;
  transition: color var(--t-motion) ease, border-color var(--t-motion) ease;
}

.matrix-free-pill {
  padding: 1px 6px;
  color: var(--t-ac);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--t-ac) 55%, var(--t-bd));
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.matrix-site-links a:hover,
.matrix-site-links a[aria-current='page'] {
  color: var(--t-fg);
  border-bottom-color: var(--t-ac);
}

.matrix-network-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--t-fg2);
  font-size: 11px;
  white-space: nowrap;
}

.matrix-site-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.matrix-account-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--t-fg);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

#matrix-account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  color: #fff;
  background: var(--t-ac);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

#matrix-account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-network-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8eb99b;
}


#root {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  width: auto;
  margin: 0;
  display: flex !important;
  overflow: hidden !important;
  background: var(--t-bg2) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#root,
#root button,
#root input,
#root textarea,
#root select {
  font-family: var(--t-font) !important;
}

#theme-btn {
  display: none !important;
}

._1ho1fyw0 {
  background: var(--mx-sidebar) !important;
  border-right: 1px solid var(--t-bd) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

._1ho1fyw4 {
  border-radius: 10px !important;
  transition: background var(--t-motion) ease, opacity var(--t-motion) ease !important;
}

._1ho1fyw4:hover {
  background: var(--mx-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

._1ho1fyw4::before {
  width: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--t-ac) !important;
  box-shadow: none !important;
}

._1xki9of0,
._1xki9of1,
._18fjf6z0 {
  background: var(--mx-sidebar) !important;
  border-right: 1px solid var(--t-bd) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

._1xki9of2,
._18fjf6z1 {
  min-height: 54px !important;
  border-bottom: 1px solid var(--t-bd) !important;
}

.t4fedt8 {
  min-height: 46px !important;
  margin: 2px 7px !important;
  border: 0 !important;
  border-radius: 9px !important;
  transition: background var(--t-motion) ease, color var(--t-motion) ease !important;
}

.t4fedt8:hover {
  background: var(--mx-hover) !important;
  border-color: transparent !important;
  transform: none !important;
}

.t4fedt8[aria-selected='true'] {
  color: #fff !important;
  background: var(--t-ac) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09) !important;
}

.t4fedt8[aria-selected='true'] .t4fedto {
  color: #fff !important;
  font-weight: 700 !important;
}

.hru6be0,
.hru6bec,
.hru6bed,
._1t5i6nr1,
.ty6xms1,
._1v145rl1 {
  min-height: 56px !important;
  color: var(--t-fg) !important;
  background: var(--mx-header) !important;
  border-bottom: 1px solid var(--t-bd) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hru6be0 h1,
.hru6be0 h2,
.hru6be0 [role='heading'],
.hru6be0 ._1xny9xl5,
.hru6be0 ._1xny9xl6 {
  color: var(--t-fg) !important;
  font-family: var(--t-font) !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.hru6be0 button,
.hru6bec button,
.hru6bed button,
._1t5i6nr1 button,
.ty6xms1 button,
._1v145rl1 button {
  color: color-mix(in srgb, var(--t-fg) 86%, transparent) !important;
  background: color-mix(in srgb, var(--t-fg) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--t-fg) 12%, transparent) !important;
}

.hru6be0 button:hover,
.hru6bec button:hover,
.hru6bed button:hover,
._1t5i6nr1 button:hover,
.ty6xms1 button:hover,
._1v145rl1 button:hover {
  color: var(--t-fg) !important;
  background: color-mix(in srgb, var(--t-fg) 12%, transparent) !important;
}

._161nxveo {
  border-radius: 8px !important;
  transition: background var(--t-motion) ease !important;
}

._161nxveo:hover {
  background: color-mix(in srgb, var(--t-bg3) 30%, transparent) !important;
  transform: none !important;
}

._161nxver {
  margin-block: 2px !important;
  color: var(--t-fg) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

._1684mq5c,
._1684mq5d,
._1684mq51 {
  border-radius: 9px !important;
}

._1m2qi7r3 {
  padding: 6px 10px !important;
  color: var(--t-fg2) !important;
  background: color-mix(in srgb, var(--t-bg3) 46%, transparent) !important;
  border-left: 2px solid var(--t-ac) !important;
  border-radius: 0 7px 7px 0 !important;
}

._1m2qi7r4,
code,
pre {
  color: var(--t-fg) !important;
  background: color-mix(in srgb, var(--t-bg3) 72%, var(--t-bg)) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 7px !important;
  font-family: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace !important;
}

._1m2qi7rh {
  color: var(--t-ac2) !important;
  background: var(--t-gls) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 5px !important;
}

.ay20pp9,
.coabsl0 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 7px !important;
  color: var(--t-fg) !important;
  background: color-mix(in srgb, var(--t-bg2) 94%, transparent) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color var(--t-motion) ease, box-shadow var(--t-motion) ease !important;
}

.ay20pp9:has(textarea:focus),
.coabsl0:focus-within {
  border-color: var(--t-ac) !important;
  box-shadow: 0 0 0 3px var(--t-gls) !important;
}

.coabsl0 > div:has(.coabsl2),
.coabsl0 > div:first-child {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.coabsl2 {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.coabsl3,
[data-editable-name='RoomInput'] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: 40vh !important;
  padding: 7px 8px !important;
  color: var(--t-fg) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  outline: 0 !important;
  word-break: break-word !important;
}

.coabsl1 {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 3px !important;
  padding: 0 !important;
}

.ay20pp9 button,
.coabsl0 button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 5px !important;
  border-radius: 8px !important;
  transition: color var(--t-motion) ease, background var(--t-motion) ease !important;
}

.ay20pp9 button:hover,
.coabsl0 button:hover {
  color: var(--t-fg) !important;
  background: var(--mx-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

textarea,
input {
  color: var(--t-fg) !important;
}

textarea::placeholder,
input::placeholder {
  color: var(--t-fg2) !important;
  opacity: 0.72;
}

.epr39zm,
button[data-priority='300'],
button[data-variant='primary'],
.epr39zd[data-variant='primary'] {
  color: #fff !important;
  background: color-mix(in srgb, var(--t-ac) 88%, #000 12%) !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition: background var(--t-motion) ease, box-shadow var(--t-motion) ease !important;
}

.epr39zm:hover,
button[data-priority='300']:hover,
button[data-variant='primary']:hover {
  color: #fff !important;
  background: var(--t-ac) !important;
  box-shadow: 0 0 0 3px var(--t-gls) !important;
  filter: none !important;
  transform: none !important;
}

.epr39zn,
button[data-priority='200'],
button[data-variant='secondary'] {
  color: var(--t-fg2) !important;
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transition: color var(--t-motion) ease, background var(--t-motion) ease, border-color var(--t-motion) ease !important;
}

.epr39zn:hover,
button[data-priority='200']:hover,
button[data-variant='secondary']:hover {
  color: var(--t-fg) !important;
  background: var(--t-bg3) !important;
  border-color: var(--t-bda) !important;
  transform: none !important;
}

._1fc5sz51,
._5z5e2h1,
._1cmtvyv0,
._1f6snux0,
._1vnya282,
._15upz2y1,
dialog {
  color: var(--t-fg) !important;
  background: color-mix(in srgb, var(--t-bg2) 96%, transparent) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 14px !important;
  box-shadow: var(--mx-shadow) !important;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

._1oc5jl82 {
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.theme-light ._1oc5jl82 {
  background: rgba(16, 20, 42, 0.38) !important;
}

html,
body,
#root,
._4yxtfde,
._4yxtfd2,
.no-scrollbar {
  scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
._4yxtfde::-webkit-scrollbar,
._4yxtfd2::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}

._4yxtfdf,
._4yxtfdg,
._4yxtfdi,
._4yxtfdj,
.scrollable,
textarea,
pre,
[role='listbox'] {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--t-fg2) 35%, transparent) transparent;
}

/* Cinny's functional pieces should read like the homepage's compact cards,
   lists and controls rather than a separate product living on the same host. */
#root [role='separator'] {
  border-color: var(--t-bd) !important;
  opacity: 1 !important;
}

#root button,
#root [role='button'],
#root a {
  -webkit-tap-highlight-color: transparent;
}

#root button:focus-visible,
#root [role='button']:focus-visible,
#root a:focus-visible,
#root input:focus-visible,
#root textarea:focus-visible {
  outline: 2px solid var(--t-ac) !important;
  outline-offset: 2px !important;
}

#root [role='menu'],
#root [role='listbox'] {
  color: var(--t-fg) !important;
  background: color-mix(in srgb, var(--t-bg2) 97%, transparent) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 12px !important;
  box-shadow: var(--mx-shadow) !important;
}

#root [role='menuitem'],
#root [role='option'] {
  border-radius: 8px !important;
}

#root [role='menuitem']:hover,
#root [role='option']:hover,
#root [role='option'][aria-selected='true'] {
  background: var(--mx-hover) !important;
}

#root [data-state='open'],
#root button[aria-pressed='true'],
.coabsl0 button[aria-pressed='true'] {
  color: var(--t-ac) !important;
  background: var(--t-gls) !important;
}

#root :is(input, textarea, select) {
  caret-color: var(--t-ac);
}

#root :is(input, textarea, select):not([data-editable-name='RoomInput']) {
  border-color: var(--t-bd) !important;
  border-radius: 9px !important;
}

#root :is(input, textarea, select):focus {
  border-color: var(--t-bda) !important;
}

._9rmubx4 {
  color: var(--t-fg2) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

#root [data-mx-pill],
#root [class*='Badge'] {
  border-radius: 999px !important;
}

#mitch-sso-banner,
#mitch-push-banner {
  display: none;
  position: fixed;
  z-index: 99999;
  color: var(--t-fg);
  background: color-mix(in srgb, var(--t-bg2) 96%, transparent);
  border: 1px solid var(--t-bd);
  border-radius: 12px;
  box-shadow: var(--mx-shadow);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

#mitch-sso-banner {
  top: 14px;
  left: 50%;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 28px);
  padding: 9px 12px;
  font-size: 13px;
  transform: translateX(-50%);
}

#mitch-sso-btn,
.mitch-push-btn-enable {
  padding: 7px 12px;
  color: #fff;
  background: color-mix(in srgb, var(--t-ac) 88%, #000 12%);
  border: 0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

#mitch-home-btn {
  margin-left: 0 !important;
  color: var(--t-fg2) !important;
}

#mitch-push-banner {
  right: 18px;
  bottom: 18px;
  width: min(380px, calc(100% - 36px));
  padding: 14px;
  font-size: 13px;
  line-height: 1.45;
}

#mitch-push-banner.show {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mitch-push-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t-fg);
  font-weight: 750;
}

.mitch-push-desc {
  color: var(--t-fg2);
}

.mitch-push-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mitch-push-btn-later {
  padding: 7px 12px;
  color: var(--t-fg2);
  background: transparent;
  border: 1px solid var(--t-bd);
  border-radius: 8px;
  font-size: 12.5px;
}

iframe[title='Call Embed'] {
  overflow: hidden !important;
  background: var(--t-bg) !important;
  border: 1px solid var(--t-bd) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

button[aria-label*='Call' i],
button[aria-label*='Join' i],
button[data-tooltip*='Call' i] {
  transition: color var(--t-motion) ease, background var(--t-motion) ease !important;
}

button[aria-label*='Call' i]:hover,
button[aria-label*='Join' i]:hover {
  box-shadow: none !important;
  transform: none !important;
}

button[data-variant='success'] {
  color: #fff !important;
  background: #15945f !important;
  border: 0 !important;
  box-shadow: none !important;
}

button[data-variant='critical'] {
  color: #fff !important;
  background: #d9414b !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  html,
  body {
    position: fixed !important;
    inset: 0;
    width: 100vw !important;
    height: var(--mx-vvh, 100dvh) !important;
    max-height: var(--mx-vvh, 100dvh) !important;
    overscroll-behavior: none;
  }

  #matrix-site-bar {
    min-height: 52px;
    height: 52px;
    flex-basis: 52px;
    gap: 16px;
    padding-inline: 14px;
  }

  .matrix-wordmark { font-size: 18px; }

  .matrix-site-links { gap: 16px; }

  .matrix-site-links a { font-size: 12px; }

  .matrix-network-status { display: none; }

  #matrix-account-name { display: none; }

  #root {
    position: relative !important;
    inset: auto;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 0;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  ._1ho1fyw0 {
    width: 54px !important;
    min-width: 54px !important;
    padding: 5px 0 !important;
  }

  ._1ho1fyw4 {
    width: 42px !important;
    height: 42px !important;
    margin: 3px auto !important;
  }

  ._1xki9of0,
  ._1xki9of1,
  ._18fjf6z0 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .t4fedt8 {
    min-height: 50px !important;
    margin: 2px 5px !important;
    padding: 7px 10px !important;
  }

  .hru6be0,
  .hru6bec,
  .hru6bed,
  ._1t5i6nr1,
  .ty6xms1,
  ._1v145rl1 {
    min-height: 52px !important;
    height: 52px !important;
    padding-inline: 9px !important;
  }

  .hru6be0 h1,
  .hru6be0 h2,
  .hru6be0 [role='heading'] {
    max-width: calc(100vw - 140px) !important;
    overflow: hidden;
    font-size: 0.94rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hru6be0 button,
  .brs7ce5 {
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
  }

  ._161nxver {
    max-width: 100% !important;
    margin-bottom: 2px !important;
    padding: 7px 9px !important;
  }

  ._1684mq5c,
  ._1684mq5d,
  ._1684mq51 {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .ay20pp9,
  .coabsl0 {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 4px 6px max(6px, env(safe-area-inset-bottom, 6px)) !important;
    padding: 3px 5px !important;
    border-radius: 11px !important;
  }

  textarea,
  input,
  .coabsl3,
  [data-editable-name='RoomInput'] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 16px !important;
  }

  .ay20pp9 button,
  .coabsl0 button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
  }

  dialog,
  ._1fc5sz51,
  ._5z5e2h1,
  ._1cmtvyv0,
  ._1f6snux0 {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    margin: auto 0 0 !important;
    border-radius: 14px 14px 0 0 !important;
  }

  #mitch-sso-banner {
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 9px 10px;
    transform: none;
  }

  #mitch-push-banner {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
  }
}

@media (max-width: 520px) {
  #matrix-site-bar { gap: 18px; padding-inline: 14px; }
  .matrix-site-links { gap: 18px; }
  .matrix-site-links a:nth-child(2),
  .matrix-site-links a:nth-child(5),
  .matrix-site-links a:nth-child(6) { display: none; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #matrix-site-bar { gap: 28px; }
  .matrix-site-links { gap: 20px; }
  .matrix-site-links a:nth-child(5),
  .matrix-site-links a:nth-child(7) { display: none; }
  .matrix-network-status { display: none; }
}

@media (max-width: 480px) {
  .coabsl0 button[aria-label*='format' i] {
    display: none !important;
  }

  code,
  pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 12.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Mitch GIF & Sticker Picker ─────────────────────────────── */
.mitch-gif-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 38px;
  padding: 0 7px !important;
  margin: 0 2px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--t-ac) 15%, transparent) !important;
  color: var(--t-ac) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, var(--t-ac) 28%, transparent) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  user-select: none;
}
.mitch-gif-btn:hover {
  background: color-mix(in srgb, var(--t-ac) 30%, transparent) !important;
  color: var(--t-fg) !important;
  transform: translateY(-1px);
}
.mitch-gif-btn.active {
  background: var(--t-ac) !important;
  color: #fff !important;
}

#mitch-gif-popover {
  position: fixed;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  width: min(440px, calc(100vw - 20px));
  height: 460px;
  max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px));
  background: rgba(18, 12, 34, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--t-bd);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(184, 108, 255, 0.18);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  animation: mitchGifPop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mitchGifPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mitch-gif-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--t-bd);
}

.mitch-gif-tabs {
  display: flex;
  gap: 4px;
  background: color-mix(in srgb, var(--t-bg3) 60%, transparent);
  padding: 3px;
  border-radius: 8px;
}

.mitch-gif-tab {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t-fg2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mitch-gif-tab.active {
  color: #fff;
  background: var(--t-ac);
}

.mitch-gif-search-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.mitch-gif-search-box input {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: 12.5px;
  color: var(--t-fg);
  background: color-mix(in srgb, var(--t-bg) 65%, transparent);
  border: 1px solid var(--t-bd);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}

.mitch-gif-search-box input:focus {
  border-color: var(--t-ac);
}

.mitch-gif-close-btn {
  background: transparent;
  border: 0;
  color: var(--t-fg2);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mitch-gif-close-btn:hover {
  color: var(--t-fg);
  background: rgba(255, 255, 255, 0.08);
}

.mitch-gif-categories {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mitch-gif-categories::-webkit-scrollbar { display: none; }

.mitch-gif-pill {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--t-fg2);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.mitch-gif-pill:hover,
.mitch-gif-pill.active {
  color: var(--t-fg);
  background: color-mix(in srgb, var(--t-ac) 25%, transparent);
  border-color: color-mix(in srgb, var(--t-ac) 45%, transparent);
}

.mitch-gif-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 120px;
  grid-gap: 8px;
}

.mitch-gif-card {
  position: relative;
  width: 100%;
  height: 120px;
  min-height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mitch-gif-card:hover {
  transform: scale(1.025);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px var(--t-gls);
  z-index: 2;
}

.mitch-gif-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mitch-gif-favorite-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  padding: 0;
  font-size: 13px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.mitch-gif-card:hover .mitch-gif-favorite-btn,
.mitch-gif-favorite-btn.active {
  opacity: 1;
}
.mitch-gif-favorite-btn.active {
  color: #ffd54a;
  background: rgba(0, 0, 0, 0.55);
}
.mitch-gif-favorite-btn:hover {
  transform: scale(1.15);
  color: #ffd54a;
}

.mitch-sticker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  grid-gap: 8px;
}

.mitch-sticker-card {
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  min-height: 80px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mitch-sticker-card:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.1);
}
.mitch-sticker-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mitch-gif-footer {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--t-fg3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
  #mitch-gif-popover {
    right: 10px;
    bottom: 74px;
    width: calc(100vw - 20px);
    height: 380px;
  }
  .mitch-gif-grid {
    grid-auto-rows: 105px;
  }
  .mitch-gif-card {
    height: 105px;
    min-height: 105px;
  }
  .mitch-sticker-grid {
    grid-auto-rows: 65px;
  }
  .mitch-sticker-card {
    height: 65px;
    min-height: 65px;
  }
}