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

:root {
  --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: var(--t-bg2) !important;
  --oq6d07k: var(--t-gls) !important;
  --oq6d07l: var(--t-gls) !important;
  --oq6d07m: var(--t-gls) !important;
  --oq6d07n: var(--t-bda) !important;
  --oq6d07o: var(--t-ac) !important;
  --oq6d07p: var(--t-ac-ink) !important;
  --oq6d07q: color-mix(in srgb, var(--t-fg) 92%, var(--t-bg)) !important;
  --oq6d07r: color-mix(in srgb, var(--t-fg) 82%, var(--t-bg)) !important;
  --oq6d07s: color-mix(in srgb, var(--t-fg) 70%, var(--t-bg)) !important;
  --oq6d07t: var(--t-bg) !important;
  --oq6d07u: color-mix(in srgb, var(--t-fg) 7%, transparent) !important;
  --oq6d07v: color-mix(in srgb, var(--t-fg) 11%, transparent) !important;
  --oq6d07w: color-mix(in srgb, var(--t-fg) 15%, transparent) !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 {
  --mx-sidebar: var(--t-bg2);
  --mx-header: var(--t-bg2);
  --mx-hover: color-mix(in srgb, var(--t-fg) 6%, transparent);
  --mx-active: color-mix(in srgb, var(--t-ac) 10%, transparent);
  --mx-shadow: 0 18px 50px color-mix(in srgb, var(--t-fg) 14%, transparent);

  --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: var(--t-bg2) !important;
  --oq6d07k: var(--t-gls) !important;
  --oq6d07l: var(--t-gls) !important;
  --oq6d07m: var(--t-gls) !important;
  --oq6d07n: var(--t-bda) !important;
  --oq6d07o: var(--t-ac) !important;
  --oq6d07p: var(--t-fg) !important;
  --oq6d07q: color-mix(in srgb, var(--t-fg) 92%, var(--t-bg)) !important;
  --oq6d07r: color-mix(in srgb, var(--t-fg) 82%, var(--t-bg)) !important;
  --oq6d07s: color-mix(in srgb, var(--t-fg) 20%, transparent) !important;
  --oq6d07t: var(--t-bg2) !important;
  --oq6d07u: color-mix(in srgb, var(--t-fg) 5%, transparent) !important;
  --oq6d07v: color-mix(in srgb, var(--t-fg) 9%, transparent) !important;
  --oq6d07w: color-mix(in srgb, var(--t-fg) 13%, transparent) !important;
  --oq6d07x: var(--t-bd) !important;
  --oq6d07y: var(--t-fg2) !important;
  --oq6d071t: color-mix(in srgb, var(--t-fg) 15%, transparent) !important;
  --oq6d071u: color-mix(in srgb, var(--t-fg) 8%, transparent) !important;
  --oq6d071v: color-mix(in srgb, var(--t-fg) 45%, transparent) !important;
}

/* Cinny colors each person's name, and each space/room/people avatar, from
   eight --mx-uc-N variables picked by hashing the ID. Its defaults are fully
   saturated hues (blue, magenta, lime, orange...) that clash with the rest of
   the site, so use shades of the site's own accent and text colors instead.
   Mixing with --t-fg keeps them readable: darker in light mode, lighter in dark
   mode. Cinny sets its dark values on <body>, which beats anything inherited
   from <html>, so this targets both and uses !important. */
html,
body {
  --mx-uc-1: color-mix(in srgb, var(--t-ac) 70%, var(--t-fg)) !important;
  --mx-uc-2: color-mix(in srgb, var(--t-ac) 45%, var(--t-fg)) !important;
  --mx-uc-3: var(--t-fg2) !important;
  --mx-uc-4: color-mix(in srgb, var(--t-ac) 30%, var(--t-fg2)) !important;
  --mx-uc-5: color-mix(in srgb, var(--t-fg) 85%, var(--t-ac)) !important;
  --mx-uc-6: color-mix(in srgb, var(--t-ac) 55%, var(--t-fg2)) !important;
  --mx-uc-7: color-mix(in srgb, var(--t-fg2) 70%, var(--t-fg)) !important;
  --mx-uc-8: color-mix(in srgb, var(--t-fg) 80%, var(--t-ac)) !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; }

/* Mirrors the shared masthead (app.css .app-topbar / .app-brand / .app-nav /
   .app-account-link). This page can't load app.css (see the note on body), so
   keep these values in step with it. */
#matrix-site-bar {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: 3.6rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(0.85rem, 2.5vw, 2rem);
  color: var(--t-fg);
  background: color-mix(in srgb, var(--t-bg) 92%, transparent);
  border-bottom: 1px solid var(--t-bd);
}

.matrix-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: fit-content;
  color: var(--t-fg);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--t-font);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.matrix-wordmark img { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; flex-shrink: 0; }
.matrix-wordmark b { font-weight: 700; }
.matrix-wordmark span { color: var(--t-fg2); font-weight: 500; }

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

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

.matrix-site-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 3.6rem;
  color: var(--t-fg2);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-motion);
}

.matrix-free-pill {
  display: inline-block;
  margin-left: 6px;
  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); }

.matrix-site-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--t-ac);
}

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

.matrix-account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: fit-content;
  padding: 7px 13px;
  color: var(--t-fg);
  background: var(--t-bg2);
  border: 1px solid var(--t-bd);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-motion), background-color var(--t-motion);
}

.matrix-account-link:hover { background: var(--t-bg3); border-color: var(--t-fg3); }

#matrix-account-avatar {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  color: var(--t-ac-ink);
  background: var(--t-ac);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}

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

/* No bottom dock on this page, so the links stay reachable (scrollable) on phones. */
@media (max-width: 640px) {
  #matrix-site-bar { gap: 0.75rem; }
  .matrix-site-links { gap: 16px; }
  #matrix-account-name { display: none; }
  .matrix-account-link { padding: 5px; }
}

#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;
}

._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;
}

._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;
}

.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;
}

._1oc5jl82 {
  background: rgba(0, 0, 0, 0.58) !important;
}

html.theme-light ._1oc5jl82 {
  background: color-mix(in srgb, var(--t-fg) 38%, transparent) !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);
}

#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: var(--t-bg2);
  border: 1px solid var(--t-bd);
  border-radius: var(--t-radius);
  box-shadow: var(--mx-shadow);
  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: var(--t-bg3);
}

.mitch-gif-categories {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--t-bd);
}
.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: var(--t-bg3);
  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: var(--t-bg3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mitch-gif-card:hover {
  transform: scale(1.025);
  box-shadow: none;
  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: var(--t-bg3);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mitch-sticker-card:hover {
  transform: scale(1.1);
  background: var(--t-bd);
}
.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 var(--t-bd);
}

@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;
  }
}

/* Installed-to-home-screen iOS/Android apps have no browser address bar to
   dynamically avoid, so there is nothing for `dvh`/visualViewport-tracked
   height to shrink around - but iOS has a known quirk where both still
   under-report the true available height in standalone mode, reserving
   dead space at the bottom for a toolbar that cannot appear there. Plain
   100vh (the static, full viewport) is always correct here and replaces
   the dynamic value, which stays in effect only in an actual browser tab. */
@media (display-mode: standalone) {
  html,
  body,
  #root {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}


.mitch-dm-notice{position:fixed;inset:calc(3.6rem + 12px) 16px auto;z-index:10000;display:flex;align-items:center;gap:12px;max-width:700px;margin:auto;padding:14px 16px;border:1px solid var(--t-bd,#5d6265);border-radius:12px;background:var(--t-bg2,#202526);color:var(--t-fg,#fff);font:14px/1.5 var(--t-font)}.mitch-dm-notice span{flex:1}.mitch-dm-notice button{border:1px solid var(--t-bd,#5d6265);border-radius:8px;background:transparent;color:inherit;padding:8px 12px;cursor:pointer}@media(max-width:500px){.mitch-dm-notice{flex-wrap:wrap}.mitch-dm-notice span{flex-basis:100%}}

/* Names above messages are colored by the sender's role tag (pure blue for a
   room's founder, teal for members), which reads as random next to the rest of
   the site. Use the normal text color; the avatar and member list still show
   roles. */
#root b._161nxvev { color: var(--t-fg) !important; }