:root {
  --ga-bg-1: #010814;
  --ga-bg-2: #031233;
  --ga-bg-3: #041b46;
  --ga-card-border: rgba(66, 112, 170, 0.45);
  --ga-text: #eaf4ff;
  --ga-muted: #9db7d9;
  --ga-accent-1: #2f9dff;
  --ga-accent-2: #4be8d7;
  --ga-input-bg: rgba(3, 12, 30, 0.85);
  --ga-input-border: rgba(95, 156, 236, 0.42);
}

@keyframes gaFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gaSoftPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gaQuickSettingsIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gaQuickSettingsDropdownIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gaSendPress {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes gaEmojiPopIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gaEmojiSlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gaEmojiSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gaUserMenuPopIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    filter: blur(2px);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gaContextMenuPopIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    filter: blur(1.6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gaDialogPopIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

html.ga-auth,
html.ga-auth body,
html.ga-auth #matrixchat {
  background: #031033 !important;
  color: var(--ga-text);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
}

html.ga-auth .mx_AuthPage,
html.ga-auth .mx_AuthPage *,
.galyagram-brand,
.galyagram-brand__text {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
}

html.ga-auth .mx_AuthPage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 18px 28px;
  animation: none;
  background: #031033 !important;
  position: relative;
}

/* Remove Element blur halo around welcome/login modal */
html.ga-auth .mx_AuthPage_modalBlur {
  display: none !important;
}

html.ga-auth .mx_AuthPage_modal,
html.ga-auth .mx_AuthPage_modal_withBlur {
  box-shadow: none !important;
  background: transparent !important;
}

html.ga-auth .mx_AuthPage_modalContent {
  background: transparent !important;
}

html.ga-auth .mx_AuthPage::before {
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

html.ga-auth .mx_AuthHeader {
  display: none !important;
}

html.ga-auth .mx_AuthBody {
  width: min(520px, 92vw);
  background: linear-gradient(180deg, rgba(6, 19, 44, 0.9), rgba(2, 12, 31, 0.95)) !important;
  border: 1px solid var(--ga-card-border) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  padding: 28px 28px 20px !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

html.ga-auth .mx_AuthBody::after {
  content: none;
}

html.ga-auth .mx_AuthBody h1,
html.ga-auth .mx_AuthBody h2,
html.ga-auth .mx_AuthBody h3 {
  color: var(--ga-text) !important;
  letter-spacing: 0.2px;
  font-weight: 800 !important;
}

html.ga-auth .mx_AuthBody .mx_Text,
html.ga-auth .mx_AuthBody .mx_Link,
html.ga-auth .mx_AuthBody .mx_AuthBody_changeFlow,
html.ga-auth .mx_AuthBody .mx_Field_label,
html.ga-auth .mx_AuthBody .mx_ServerPicker_server,
html.ga-auth .mx_AuthBody label {
  color: #f2f7ff !important;
}

html.ga-auth .mx_AuthBody p,
html.ga-auth .mx_AuthBody span,
html.ga-auth .mx_AuthBody a,
html.ga-auth .mx_AuthBody .mx_Form_label_text,
html.ga-auth .mx_AuthBody .mx_Login_forgot,
html.ga-auth .mx_AuthBody .mx_AuthBody_changeFlow a,
html.ga-auth .mx_AuthBody .mx_Login_create,
html.ga-auth .mx_AuthBody .mx_ServerPicker_desc {
  color: #f2f7ff !important;
  opacity: 1 !important;
}

html.ga-auth .mx_AuthBody .mx_Login_error,
html.ga-auth .mx_AuthBody .mx_Error,
html.ga-auth .mx_AuthBody .mx_Notice,
html.ga-auth .mx_AuthBody .mx_ServerPicker_desc {
  color: #ffd86b !important;
}

html.ga-auth .mx_AuthBody input,
html.ga-auth .mx_AuthBody select,
html.ga-auth .mx_AuthBody textarea {
  background: var(--ga-input-bg) !important;
  border: 1px solid var(--ga-input-border) !important;
  border-radius: 10px !important;
  color: var(--ga-text) !important;
  min-height: 42px;
  transition: none !important;
  box-shadow: none !important;
}

html.ga-auth .mx_AuthBody input::placeholder {
  color: #7f9dc6;
}

html.ga-auth .mx_AuthBody input:focus,
html.ga-auth .mx_AuthBody select:focus,
html.ga-auth .mx_AuthBody textarea:focus {
  border-color: var(--ga-input-border) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.ga-auth .mx_AuthBody button,
html.ga-auth .mx_AuthBody .mx_AccessibleButton_kind_primary,
html.ga-auth .mx_AuthBody .mx_AccessibleButton_kind_secondary,
html.ga-auth .mx_AuthBody .mx_Login_fullWidthButton {
  border: 1px solid rgba(84, 140, 206, 0.55) !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, var(--ga-accent-1), var(--ga-accent-2)) !important;
  color: #03203f !important;
  font-weight: 800 !important;
  min-height: 42px;
  box-shadow: none !important;
  transition: none !important;
}

html.ga-auth .mx_AuthBody button:hover,
html.ga-auth .mx_AuthBody .mx_AccessibleButton_kind_primary:hover,
html.ga-auth .mx_AuthBody .mx_AccessibleButton_kind_secondary:hover,
html.ga-auth .mx_AuthBody .mx_Login_fullWidthButton:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html.ga-auth .mx_ServerPicker,
html.ga-auth .mx_AuthFooter {
  display: none !important;
}

.galyagram-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
  animation: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.galyagram-brand__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.galyagram-brand--auth {
  position: fixed;
  left: 16px;
  top: 14px;
  z-index: 5000;
}

.galyagram-brand--shell {
  position: relative;
  z-index: 4;
  padding: 2px 0 4px;
  margin: 0 0 4px;
}

.galyagram-brand__logo {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  box-shadow: none !important;
  flex: 0 0 auto;
}

.galyagram-brand__text {
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
  text-transform: lowercase;
  color: #f5f7ff;
  transition: color 320ms ease;
}

.galyagram-brand__beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(113, 154, 214, 0.44);
  background: rgba(55, 102, 171, 0.28);
  color: #cfe3ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  transform: translateY(1px);
}

.galyagram-brand--shell .galyagram-brand__logo {
  width: 30px;
  height: 30px;
}

.galyagram-brand--shell .galyagram-brand__text {
  font-size: clamp(17px, 1.45vw, 22px);
  letter-spacing: -0.4px;
}

.galyagram-brand--shell .galyagram-brand__beta {
  min-height: 18px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
}

.galyagram-brand--auth .galyagram-brand__beta {
  display: none;
}

html.ga-auth .galyagram-brand__text {
  color: #f5f7ff !important;
}

body.cpd-theme-light .galyagram-brand--shell .galyagram-brand__text {
  color: #111111;
}

body.cpd-theme-light .galyagram-brand--shell .galyagram-brand__beta {
  color: #263443;
  border-color: rgba(71, 92, 118, 0.36);
  background: rgba(186, 203, 223, 0.55);
}

body.cpd-theme-dark .galyagram-brand--shell .galyagram-brand__text,
body.cpd-theme-dark-hc .galyagram-brand--shell .galyagram-brand__text {
  color: #f5f7ff;
}

html.ga-page-enter.ga-shell .mx_LeftPanel_roomListContainer,
html.ga-page-enter.ga-shell .mx_HomePage_default_wrapper,
html.ga-page-enter.ga-shell .mx_RoomView_wrapper {
  animation: gaFadeSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.ga-page-enter.ga-shell .mx_RoomView_wrapper {
  animation-delay: 40ms;
}

html.ga-shell .mx_RoomSublist .mx_RoomTile {
  transition: transform 160ms ease, background-color 180ms ease, box-shadow 220ms ease;
}

html.ga-shell .mx_RoomSublist .mx_RoomTile:hover,
html.ga-shell .mx_RoomSublist .mx_RoomTile:focus-within,
html.ga-shell .mx_RoomSublist .mx_RoomTile.mx_RoomTile_hasMenuOpen {
  transform: translateX(1px);
}

html.ga-shell .mx_RoomSublist .mx_RoomTile.mx_RoomTile_selected {
  box-shadow: inset 0 0 0 1px rgba(90, 154, 235, 0.45);
}

html.ga-shell .mx_HomePage_default .mx_HomePage_default_wrapper > img,
html.ga-shell .mx_HomePage_default .mx_HomePage_default_wrapper > img.galyagram-home-logo {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  box-shadow: 0 10px 26px rgba(22, 83, 168, 0.32);
  animation: none;
}

html.ga-shell .mx_HomePage_default .mx_HomePage_button_explore.ga-home-explore-disabled,
html.ga-shell .mx_HomePage_default .mx_HomePage_button_explore.ga-home-explore-disabled:hover,
html.ga-shell .mx_HomePage_default .mx_HomePage_button_explore.ga-home-explore-disabled:focus {
  background: #3a434f !important;
  border: 1px solid rgba(138, 149, 165, 0.5) !important;
  color: #aeb7c6 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

html.ga-shell .mx_SearchBox,
html.ga-shell .mx_RoomSublist_headerContainer {
  transition: background-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
}

html.ga-shell .ga-room-close-chat-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  border: 1px solid rgba(116, 138, 170, 0.42);
  background: rgba(12, 22, 38, 0.62);
  color: var(--cpd-color-text-secondary, #9fb2cb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 2px;
  transition: color 160ms ease, border-color 180ms ease, background-color 180ms ease, transform 140ms ease;
}

html.ga-shell .ga-room-close-chat-btn:hover {
  color: var(--cpd-color-text-primary, #f2f7ff);
  border-color: rgba(125, 168, 232, 0.66);
  background: rgba(19, 34, 56, 0.74);
}

html.ga-shell .ga-room-close-chat-btn:active {
  transform: scale(0.96);
}

html.ga-shell .ga-room-close-chat-btn > span {
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

html.ga-shell .mx_EventTile {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.ga-shell .mx_EventTile.mx_EventTile_sending {
  opacity: 0.64;
  transform: translateY(4px);
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin-inline-end: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  color: var(--cpd-color-icon-secondary);
  background: transparent !important;
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn:hover {
  color: var(--cpd-color-icon-primary);
  background: rgba(141, 156, 178, 0.12) !important;
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn.ga-composer-stickers-btn--active {
  color: var(--cpd-color-icon-primary);
  background: rgba(141, 156, 178, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(141, 156, 178, 0.35);
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn:active {
  transform: scale(0.96);
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn:focus,
html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn .ga-composer-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.ga-shell .mx_MessageComposer .ga-composer-stickers-btn .ga-composer-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral,
html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral.mx_EmojiButton_highlight {
  color: var(--cpd-color-icon-secondary) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral::before,
html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral::after,
html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral.mx_EmojiButton_highlight::before,
html.ga-shell .mx_MessageComposer .mx_EmojiButton.ga-composer-emoji-neutral.mx_EmojiButton_highlight::after {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

html.ga-shell #stickersButton:not(.ga-composer-stickers-btn) {
  display: none !important;
}

html.ga-shell .mx_MessageComposer_sendMessage {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, filter 220ms ease;
  will-change: transform;
}

html.ga-shell .mx_MessageComposer_sendMessage:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(52, 141, 255, 0.24);
}

html.ga-shell .mx_MessageComposer_sendMessage:active {
  animation: gaSendPress 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu,
.mx_QuickSettingsButton_ContextMenuWrapper .mx_Dropdown_menu {
  animation: none !important;
}

.mx_ContextualMenu.ga-emoji-pop-in,
.mx_ContextualMenu.ga-context-menu-pop-in,
html.ga-shell .mx_Dialog.ga-dialog-pop-in {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

.mx_ContextualMenu.ga-emoji-auto-close {
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition: opacity 160ms ease, transform 190ms ease;
  pointer-events: none;
}

.mx_ContextualMenu.ga-emoji-slide-in-left {
  animation: none !important;
}

.mx_ContextualMenu.ga-emoji-slide-in-right {
  animation: none !important;
}

.mx_UserMenu_contextMenu {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

.ga-context-menu-ghost {
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
}

.ga-context-menu-ghost > .mx_ContextualMenu {
  margin: 0;
}

.ga-context-menu-bubble-out {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 220ms ease, transform 230ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms ease;
}

.ga-context-menu-bubble-out.ga-context-menu-bubble-out-active {
  opacity: 0;
  transform: translateY(7px) scale(0.88);
  filter: blur(1.6px);
}

.ga-dialog-ghost {
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.ga-dialog-ghost > .mx_Dialog {
  margin: 0;
}

.ga-dialog-bubble-out {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ga-dialog-bubble-out.ga-dialog-bubble-out-active {
  opacity: 0;
  transform: translateY(7px) scale(0.985);
}

/* Media viewer: smoother close without flash */
.ga-imageview-close-out {
  opacity: 1;
  transform: none;
  transition: opacity 190ms ease;
}

.ga-imageview-close-out.ga-imageview-close-out-active {
  opacity: 0;
}

.ga-imageview-close-out .mx_ImageView,
.ga-imageview-close-out .mx_ImageView_image_wrapper,
.ga-imageview-close-out .mx_ImageView_image {
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

/* Media viewer: neutral glass background, keep native toolbar buttons */
html.ga-shell .mx_ImageView {
  background: rgba(8, 12, 18, 0.22) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

html.ga-shell .mx_ImageView_image_wrapper {
  background: rgba(8, 12, 18, 0.1) !important;
  border: 1px solid rgba(190, 205, 232, 0.2);
  border-radius: 12px;
}

.ga-emoji-menu-ghost {
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
}

.ga-emoji-menu-ghost > .mx_ContextualMenu {
  margin: 0;
  animation: none !important;
}

.ga-emoji-switch-out-left,
.ga-emoji-switch-out-right {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ga-emoji-switch-out-left.ga-emoji-switch-out-active {
  opacity: 0;
  transform: translateX(-34px) scale(0.98);
}

.ga-emoji-switch-out-right.ga-emoji-switch-out-active {
  opacity: 0;
  transform: translateX(34px) scale(0.98);
}

.ga-emoji-close-out {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 200ms ease, transform 200ms ease;
}

.ga-emoji-close-out-active {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

.ga-emoji-tabs {
  --ga-tab-index: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 0;
  border-bottom: 1px solid rgba(112, 129, 152, 0.32);
}

.mx_EmojiPicker > .ga-emoji-tabs {
  margin-bottom: 2px;
}

.ga-emoji-tabs-indicator {
  position: absolute;
  left: 8px;
  bottom: -1px;
  width: calc((100% - 16px) / 2);
  height: 2px;
  border-radius: 2px;
  background: var(--cpd-color-border-accent, #4e8fe6);
  transform: translateX(calc(var(--ga-tab-index, 0) * 100%));
  transition: transform 230ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ga-emoji-tabs.ga-emoji-tabs-no-anim .ga-emoji-tabs-indicator {
  transition: none;
}

.ga-emoji-tab {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--cpd-color-text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}

.ga-emoji-tab:hover {
  color: var(--cpd-color-text-primary);
  background: rgba(109, 141, 182, 0.1);
}

.ga-emoji-tab.ga-active {
  color: var(--cpd-color-text-primary);
}

.ga-emoji-stickers-placeholder {
  display: none;
  height: 320px;
  padding: 8px 10px 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

.ga-emoji-stickers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ga-emoji-stickers-grid--recent {
  margin-bottom: 10px;
}

.ga-emoji-stickerpack-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cpd-color-text-primary);
  margin: 0 2px 8px;
}

.ga-emoji-stickerpack-title--recent {
  margin-top: 2px;
}

.ga-emoji-sticker-item {
  border: 1px solid rgba(111, 132, 164, 0.32);
  border-radius: 12px;
  background: transparent;
  padding: 4px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, border-color 140ms ease, background-color 140ms ease, opacity 160ms ease;
}

.ga-emoji-sticker-item:hover {
  border-color: rgba(111, 170, 255, 0.62);
  background: rgba(70, 130, 210, 0.1);
}

.ga-emoji-sticker-item:active {
  transform: scale(0.97);
}

.ga-emoji-sticker-item:disabled,
.ga-emoji-sticker-item.ga-emoji-sticker-item-sending {
  opacity: 0.62;
  cursor: default;
  pointer-events: none;
}

.ga-emoji-sticker-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
  display: block;
  mix-blend-mode: screen;
}

.ga-emoji-sticker-image {
  mix-blend-mode: normal;
}

.ga-emoji-stickers-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cpd-color-text-secondary);
  text-align: center;
}

.ga-emoji-stickers-status {
  min-height: 16px;
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--cpd-color-text-secondary);
}

.ga-emoji-stickers-status.ga-is-error {
  color: #ff8b8b;
}

.ga-emoji-gif-placeholder {
  display: none;
  height: 300px;
  padding: 8px 10px 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

.ga-emoji-gif-title {
  margin: 0 2px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cpd-color-text-primary);
}

.ga-emoji-gif-search-wrap {
  margin: 0 2px 8px;
}

.ga-emoji-gif-search {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(111, 132, 164, 0.4);
  border-radius: 10px;
  background: rgba(13, 24, 40, 0.6);
  color: var(--cpd-color-text-primary);
  padding: 0 10px;
  box-sizing: border-box;
}

.ga-emoji-gif-search::placeholder {
  color: var(--cpd-color-text-secondary);
}

.ga-emoji-gif-status {
  margin: 0 2px 8px;
  font-size: 12px;
  color: var(--cpd-color-text-secondary);
}

.ga-emoji-gif-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ga-emoji-gif-item {
  border: 1px solid rgba(111, 132, 164, 0.32);
  border-radius: 12px;
  background: transparent;
  padding: 4px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.ga-emoji-gif-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
  display: block;
  mix-blend-mode: normal;
}

.ga-emoji-gif-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
  display: block;
  border-radius: 8px;
}

.ga-emoji-gif-item.ga-hidden {
  display: none;
}

.ga-emoji-gif-empty {
  display: none;
  margin-top: 10px;
  font-size: 13px;
  color: var(--cpd-color-text-secondary);
  text-align: center;
}

.ga-emoji-gif-more {
  margin: 10px auto 0;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(111, 132, 164, 0.4);
  border-radius: 9px;
  background: rgba(13, 24, 40, 0.6);
  color: var(--cpd-color-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ga-emoji-gif-more:disabled {
  opacity: 0.65;
  cursor: default;
}

.mx_ContextualMenu.ga-emoji-gif-mode .ga-emoji-gif-placeholder {
  display: block;
}

.mx_ContextualMenu.ga-emoji-stickers-mode .ga-emoji-stickers-placeholder {
  display: block;
}

.mx_ContextualMenu.ga-emoji-stickers-mode .ga-emoji-gif-placeholder {
  display: none;
}

.mx_ContextualMenu.ga-emoji-stickers-mode .mx_EmojiPicker > :not(.ga-emoji-tabs):not(.ga-emoji-stickers-placeholder) {
  display: none !important;
}

.mx_ContextualMenu.ga-emoji-gif-mode .mx_EmojiPicker > :not(.ga-emoji-tabs):not(.ga-emoji-gif-placeholder) {
  display: none !important;
}

.mx_ContextualMenu.ga-emoji-gif-mode .mx_Stickers_content_container {
  display: none;
}

.mx_ContextualMenu.ga-emoji-stickers-mode .mx_Stickers_content_container {
  display: none;
}

.mx_ContextualMenu.ga-emoji-content-slide-left .ga-emoji-gif-placeholder,
.mx_ContextualMenu.ga-emoji-content-slide-left .mx_Stickers_content_container,
.mx_ContextualMenu.ga-emoji-content-slide-right .ga-emoji-gif-placeholder,
.mx_ContextualMenu.ga-emoji-content-slide-right .mx_Stickers_content_container {
  animation: none !important;
}

html.ga-shell body,
html.ga-shell #matrixchat,
html.ga-shell .mx_MatrixChat,
html.ga-shell .mx_MatrixChat_wrapper,
html.ga-shell .mx_LeftPanel,
html.ga-shell .mx_RoomView,
html.ga-shell .mx_RoomView_wrapper,
html.ga-shell .mx_HomePage_default_wrapper,
html.ga-shell .mx_Dialog,
html.ga-shell .mx_RoomSublist .mx_RoomTile,
html.ga-shell .mx_EventTile_line,
html.ga-shell .mx_MessageComposer_wrapper,
html.ga-shell .mx_SearchBox {
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 260ms ease;
}

html.ga-shell .mx_LeftPanel,
html.ga-shell .mx_SpacePanel,
html.ga-shell .mx_LeftPanel_roomListContainer {
  transition:
    width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    min-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    max-width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    flex-basis 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.ga-shell .mx_EventTile_sticker .mx_MImageBody .mx_MImageBody_thumbnail_container {
  max-width: 220px !important;
  max-height: 220px !important;
}

html.ga-shell .mx_MImageBody_gifLabel {
  display: none !important;
}

html.ga-shell .mx_EventTile_sticker .mx_MImageBody .mx_MImageBody_thumbnail_container,
html.ga-shell .mx_EventTile_sticker .mx_MImageBody .mx_MImageBody_thumbnail_container > div,
html.ga-shell .mx_EventTile_sticker .mx_MImageBody .mx_MImageBody_thumbnail,
html.ga-shell .mx_EventTile_sticker .mx_MVideoBody_container,
html.ga-shell .mx_EventTile_sticker .mx_MVideoBody video {
  background: transparent !important;
}

html.ga-shell .mx_EventTile_sticker .mx_MImageBody .mx_MImageBody_thumbnail,
html.ga-shell .mx_EventTile_sticker .mx_MVideoBody video {
  mix-blend-mode: screen;
}

html.ga-shell .mx_EventTile_sticker .mx_MStickerBody_placeholder {
  display: none !important;
}

/* Hide download controls for sticker messages only */
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar .mx_MessageActionBar_downloadButton,
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [aria-label*="Скач"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [aria-label*="скач"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [aria-label*="Download"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [aria-label*="download"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [title*="Скач"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [title*="скач"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [title*="Download"],
html.ga-shell .mx_EventTile_sticker .mx_MessageActionBar [title*="download"] {
  display: none !important;
}

html.ga-shell .mx_EventTile_sticker .mx_MImageBody_placeholder {
  background: transparent !important;
}

html.ga-shell .mx_EventTile_sticker .mx_rtg--fade-enter-active,
html.ga-shell .mx_EventTile_sticker .mx_rtg--fade-exit-active {
  transition: none !important;
}

/* Force-hide Labs tab in user settings */
html.ga-shell [data-testid="settings-tab-USER_LABS_TAB"],
html.ga-shell [data-testid="settings-tab-UserSettingsLabs"],
html.ga-shell [aria-controls="mx_tabpanel_USER_LABS_TAB"],
html.ga-shell #mx_tabpanel_USER_LABS_TAB {
  display: none !important;
}

html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon {
  position: relative;
  opacity: 0.66;
  cursor: not-allowed !important;
  filter: grayscale(0.15);
  pointer-events: auto;
}

html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon:hover,
html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon:focus {
  transform: none !important;
  box-shadow: none !important;
}

html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon .ga-space-channel-soon-icon {
  display: inline-flex;
  width: 22px;
  min-width: 22px;
  justify-content: center;
  font-weight: 700;
  color: #93a6c2;
}

html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon .ga-space-channel-soon-title {
  margin-inline-end: 8px;
}

html.ga-shell .mx_SpaceCreateMenu_wrapper .ga-space-channel-soon .ga-space-channel-soon-badge {
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: #a9bfdc;
  background: rgba(84, 110, 145, 0.28);
  border: 1px solid rgba(117, 146, 186, 0.4);
}

/* Welcome page: centered card like the reference screenshot */
html.ga-auth.ga-welcome .mx_AuthPage_modal {
  margin-top: 0 !important;
}

html.ga-auth.ga-welcome .mx_Welcome {
  width: 100%;
  align-items: center;
  z-index: 1;
}

html.ga-auth.ga-welcome .mx_WelcomePage {
  width: 100%;
  display: flex;
  justify-content: center;
}

html.ga-auth.ga-welcome .mx_WelcomePage_body {
  width: min(560px, 94vw);
}

html.ga-auth.ga-welcome .mx_Parent {
  width: 100%;
  border: 1px solid rgba(74, 119, 178, 0.42);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 18, 42, 0.96), rgba(3, 14, 34, 0.96));
  padding: 28px 28px 22px;
  box-sizing: border-box;
}

html.ga-auth.ga-welcome .mx_Logo {
  display: none !important;
}

html.ga-auth.ga-welcome .mx_Parent::before {
  content: "galyagram";
  display: block;
  color: #f0f6ff;
  font-size: clamp(46px, 7vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
  text-transform: lowercase;
}

html.ga-auth.ga-welcome .mx_Header_title {
  font-size: clamp(32px, 4.5vw, 42px);
  font-weight: 800;
  color: #f2f7ff;
  margin-top: 4px;
}

html.ga-auth.ga-welcome .mx_Header_subtitle {
  font-size: 22px;
  color: #d7e7ff;
  margin-top: 8px;
  margin-bottom: 8px;
}

html.ga-auth.ga-welcome .mx_ButtonGroup {
  margin-top: 16px;
}

html.ga-auth.ga-welcome .mx_ButtonParent {
  border-radius: 10px;
  width: 220px;
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  box-shadow: none !important;
}

html.ga-auth.ga-welcome .mx_ButtonSignIn,
html.ga-auth.ga-welcome .mx_ButtonCreateAccount {
  background: linear-gradient(90deg, var(--ga-accent-1), var(--ga-accent-2)) !important;
  color: #03203f !important;
  font-weight: 700;
}

html.ga-shell .mx_Dialog {
  background: #070d17 !important;
  border: 1px solid rgba(120, 150, 190, 0.22) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32) !important;
}

html.ga-shell .mx_Dialog .mx_AccessibleButton_kind_primary {
  background: linear-gradient(90deg, var(--ga-accent-1), var(--ga-accent-2)) !important;
  border: 1px solid rgba(84, 140, 206, 0.55) !important;
  color: #03203f !important;
  box-shadow: none !important;
}

/* Complete security/login-in-app screen: force neutral gray background */
html.ga-shell .mx_CompleteSecurityBody,
html.ga-shell .mx_CompleteSecurityBody::before,
html.ga-shell .mx_AuthPage,
html.ga-shell .mx_AuthPage::before {
  background: #7a7d84 !important;
  background-image: none !important;
}

/* Make the inner "square" (main card) dark gray */
html.ga-shell .mx_CompleteSecurityBody .mx_AuthBody,
html.ga-shell .mx_CompleteSecurityBody .mx_AuthBody_completeSecurity,
html.ga-shell .mx_CompleteSecurityBody .mx_AuthPage_modal,
html.ga-shell .mx_CompleteSecurityBody .mx_AuthPage_modalContent {
  background: #466081 !important;
  background-image: none !important;
  border-color: #8ca8cf !important;
}

/* Readable text in settings/security/auth dialogs without breaking button colors */
html.ga-shell .mx_Dialog .mx_Dialog_title,
html.ga-shell .mx_Dialog .mx_SettingsDialog h1,
html.ga-shell .mx_Dialog .mx_SettingsDialog h2,
html.ga-shell .mx_Dialog .mx_SettingsDialog h3,
html.ga-shell .mx_Dialog .mx_SettingsDialog label,
html.ga-shell .mx_Dialog .mx_SettingsDialog p,
html.ga-shell .mx_Dialog .mx_SettingsDialog span,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_SettingsTab_subheading,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_SettingsTab_heading,
html.ga-shell .mx_Dialog .mx_TabbedView_tab,
html.ga-shell .mx_Dialog .mx_TabbedView_tabLabel,
html.ga-shell .mx_CompleteSecurityBody h1,
html.ga-shell .mx_CompleteSecurityBody h2,
html.ga-shell .mx_CompleteSecurityBody p,
html.ga-shell .mx_CompleteSecurityBody span {
  color: #ffffff !important;
}

/* Settings layout tone like reference: deep dark surface */
html.ga-shell .mx_Dialog .mx_SettingsDialog,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_SettingsDialog_content,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_SettingsDialog_tabContainer,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel {
  background: #070d17 !important;
}

/* Right settings content: force readable text (no dimming) */
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Extra guard: right settings content can inherit dim theme tokens; force readable white text */
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_SettingsTab,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_SettingsTab_section,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_AutoHideScrollbar {
  color: #ffffff !important;
  opacity: 1 !important;
  --cpd-color-text-primary: #ffffff;
  --cpd-color-text-secondary: #d9e5ff;
  --cpd-color-text-action-primary: #ffffff;
}

html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel h1,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel h2,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel h3,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel h4,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel p,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel label,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel span,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel li,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel a,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_SettingsTab_subheading,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_SettingsTab_heading,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_Heading,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tabPanel .mx_Subtitle {
  color: #ffffff !important;
  opacity: 1 !important;
}

html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tab {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 220ms ease, background-color 220ms ease, fill 220ms ease;
}

html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tab .mx_TabbedView_tabLabel,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tab svg {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: color 220ms ease, fill 220ms ease;
}

html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_TabbedView_tab:not(.mx_TabbedView_tab_selected):hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Keep input text dark where background is light (nickname/display name fields) */
html.ga-shell .mx_Dialog .mx_TextInput input,
html.ga-shell .mx_Dialog input[type="text"],
html.ga-shell .mx_Dialog input[type="search"],
html.ga-shell .mx_Dialog input[type="email"],
html.ga-shell .mx_Dialog input[type="password"] {
  color: #121722 !important;
}

/* Left settings menu: selected item has light background, so text/icon must be dark */
html.ga-shell .mx_Dialog .mx_TabbedView_tab.mx_TabbedView_tab_selected,
html.ga-shell .mx_Dialog .mx_TabbedView_tab.mx_TabbedView_tab_selected .mx_TabbedView_tabLabel,
html.ga-shell .mx_Dialog .mx_TabbedView_tab.mx_TabbedView_tab_selected .mx_AccessibleButton,
html.ga-shell .mx_Dialog .mx_TabbedView_tab.mx_TabbedView_tab_selected svg,
html.ga-shell .mx_Dialog .mx_SettingsDialog .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
  color: #121722 !important;
}

html.ga-shell .mx_Dialog .mx_TabbedView_tab:not(.mx_TabbedView_tab_selected),
html.ga-shell .mx_Dialog .mx_TabbedView_tab:not(.mx_TabbedView_tab_selected) .mx_TabbedView_tabLabel,
html.ga-shell .mx_Dialog .mx_TabbedView_tab:not(.mx_TabbedView_tab_selected) svg {
  color: #ffffff !important;
}

html.ga-shell .mx_Dialog .mx_TabbedView_tab.mx_TabbedView_tab_selected {
  background: #eef2f7 !important;
  border-color: transparent !important;
}

/* Hide "Powered by Matrix" / "На технологии Matrix" footer */
html.ga-shell .mx_AuthFooter,
html.ga-shell .mx_AuthFooter * {
  display: none !important;
}

/* QR branding: add centered round Galyagram logo on all QR containers */
html.ga-shell .mx_QRCode,
html.ga-auth .mx_QRCode,
html.ga-shell .mx_VerificationPanel_qrCode,
html.ga-shell .mx_LoginWithQR_qrWrapper {
  position: relative;
}

html.ga-shell .ga-qr-brand-wrap,
html.ga-auth .ga-qr-brand-wrap {
  position: relative;
  display: inline-block;
}

html.ga-shell .ga-qr-brand-wrap > .ga-qr-center-logo,
html.ga-auth .ga-qr-brand-wrap > .ga-qr-center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 19%, 52px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-image: url("https://i.pinimg.com/736x/99/11/e3/9911e35de12022d64c8cb3c5386c7f96.jpg");
  background-size: cover;
  background-position: center;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(5, 13, 26, 0.32);
  pointer-events: none;
  z-index: 4;
}

html.ga-shell .mx_QRCode::after,
html.ga-auth .mx_QRCode::after,
html.ga-shell .mx_VerificationPanel_qrCode::after,
html.ga-shell .mx_LoginWithQR_qrWrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 19%, 52px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-image: url("https://i.pinimg.com/736x/99/11/e3/9911e35de12022d64c8cb3c5386c7f96.jpg");
  background-size: cover;
  background-position: center;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(5, 13, 26, 0.32);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 900px) {
  .galyagram-brand--auth {
    left: 10px;
    top: 10px;
    gap: 8px;
  }

  .galyagram-brand--auth .galyagram-brand__logo,
  .galyagram-brand--shell .galyagram-brand__logo {
    width: 32px;
    height: 32px;
  }

  .galyagram-brand--auth .galyagram-brand__text,
  .galyagram-brand--shell .galyagram-brand__text {
    font-size: 19px;
  }

  .galyagram-brand--shell .galyagram-brand__beta {
    min-height: 16px;
    padding: 1px 8px;
    font-size: 9px;
  }

  .galyagram-brand--shell {
    margin: 2px 0 4px;
    padding: 4px 0;
  }

  html.ga-auth .mx_AuthBody {
    width: min(96vw, 520px);
    padding: 20px 16px 16px !important;
    border-radius: 16px !important;
  }

  html.ga-auth.ga-welcome .mx_Parent {
    padding: 22px 16px 16px;
  }

  html.ga-auth.ga-welcome .mx_ButtonParent {
    width: 100%;
  }
}