/* tidewrath pixel-art theme for element web
   all rules scoped to .tidewrath-theme — only active when custom theme selected.
   switching to built-in Dark/Light/HC removes the class and reverts to stock. */

/* ============================================
   css variables
   ============================================ */
.tidewrath-theme {
  --tw-void: #0d1117;
  --tw-void-light: #161b22;
  --tw-void-lighter: #1e2830;
  --tw-tide: #5a8090;
  --tw-tide-hover: #6a8898;
  --tw-tide-muted: #4a6068;
  --tw-wrath: #b87060;
  --tw-wrath-light: #c88070;
  --tw-border: #3a4858;
  --tw-border-light: #4a5868;
  --tw-text: #c0c8d0;
  --tw-text-bright: #e8ecf0;
  --tw-text-muted: #6a7a88;
  --tw-text-dark: #485058;
  --tw-danger: #c06060;
  --tw-success: #60a868;
  --tw-pixel-font: 'Press Start 2P', monospace;
  --tw-body-font: 'Courier New', 'Courier', monospace;
}

/* ============================================
   font loading — self-hosted, no external CDN
   ============================================ */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/PressStart2P-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/PressStart2P-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   global reset — zero border-radius
   ============================================ */
.tidewrath-theme *,
.tidewrath-theme *::before,
.tidewrath-theme *::after {
  border-radius: 0 !important;
}

/* ============================================
   selective fonts
   pixel font: ui chrome (headers, buttons, room names, timestamps, sender)
   courier: message bodies for readability
   ============================================ */

/* pixel font on ui chrome */
.tidewrath-theme .mx_RoomSublist_headerText,
.tidewrath-theme .mx_RoomTile_title,
.tidewrath-theme .mx_RoomHeader_name,
.tidewrath-theme .mx_RoomHeader_topic,
.tidewrath-theme .mx_DisambiguatedProfile_displayName,
.tidewrath-theme .mx_SenderProfile_displayName,
.tidewrath-theme .mx_EventTile_msgOption .mx_MessageTimestamp,
.tidewrath-theme .mx_MessageTimestamp,
.tidewrath-theme .mx_AccessibleButton,
.tidewrath-theme .mx_Dialog_title,
.tidewrath-theme .mx_RightPanel_headerButton_title,
.tidewrath-theme .mx_BaseCard_header,
.tidewrath-theme .mx_UserMenu_name,
.tidewrath-theme .mx_SpacePanel,
.tidewrath-theme h1, .tidewrath-theme h2, .tidewrath-theme h3,
.tidewrath-theme h4, .tidewrath-theme h5, .tidewrath-theme h6 {
  font-family: var(--tw-pixel-font) !important;
}

/* readable body font for messages */
.tidewrath-theme .mx_EventTile_body,
.tidewrath-theme .mx_EventTile_content,
.tidewrath-theme .mx_MTextBody,
.tidewrath-theme .mx_BasicMessageComposer_input,
.tidewrath-theme .mx_SendMessageComposer,
.tidewrath-theme .mx_EditMessageComposer,
.tidewrath-theme textarea,
.tidewrath-theme input[type="text"],
.tidewrath-theme input[type="search"],
.tidewrath-theme input[type="password"] {
  font-family: var(--tw-body-font) !important;
}

/* scale down pixel font where it's too chunky */
.tidewrath-theme .mx_RoomSublist_headerText {
  font-size: 9px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tidewrath-theme .mx_RoomTile_title {
  font-size: 10px !important;
}

.tidewrath-theme .mx_MessageTimestamp {
  font-size: 8px !important;
  color: var(--tw-text-muted) !important;
}

.tidewrath-theme .mx_DisambiguatedProfile_displayName,
.tidewrath-theme .mx_SenderProfile_displayName {
  font-size: 10px !important;
}

/* ============================================
   pixel borders on panels
   ============================================ */
.tidewrath-theme .mx_LeftPanel,
.tidewrath-theme .mx_SpacePanel {
  border-right: 2px solid var(--tw-border) !important;
}

.tidewrath-theme .mx_RightPanel {
  border-left: 2px solid var(--tw-border) !important;
}

.tidewrath-theme .mx_RoomHeader {
  border-bottom: 2px solid var(--tw-border) !important;
}

.tidewrath-theme .mx_MessageComposer {
  border-top: 2px solid var(--tw-border) !important;
}

/* ============================================
   panel backgrounds
   ============================================ */
.tidewrath-theme .mx_LeftPanel,
.tidewrath-theme .mx_SpacePanel {
  background-color: var(--tw-void) !important;
}

.tidewrath-theme .mx_RoomView,
.tidewrath-theme .mx_MainSplit {
  background-color: var(--tw-void-light) !important;
}

.tidewrath-theme .mx_RightPanel {
  background-color: var(--tw-void-light) !important;
}

/* ============================================
   scrollbars — chunky pixel style
   ============================================ */
.tidewrath-theme * {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border) var(--tw-void);
}

.tidewrath-theme *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tidewrath-theme *::-webkit-scrollbar-track {
  background: var(--tw-void);
}

.tidewrath-theme *::-webkit-scrollbar-thumb {
  background: var(--tw-border);
  border: none;
}

.tidewrath-theme *::-webkit-scrollbar-thumb:hover {
  background: var(--tw-border-light);
}

/* ============================================
   buttons
   ============================================ */
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline {
  background-color: var(--tw-tide) !important;
  color: var(--tw-text-bright) !important;
  border: 2px solid var(--tw-tide) !important;
  font-size: 10px !important;
  padding: 8px 16px !important;
  transition: none !important;
}

.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover {
  background-color: var(--tw-tide-hover) !important;
  border-color: var(--tw-tide-hover) !important;
}

.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline {
  background-color: var(--tw-danger) !important;
  color: var(--tw-text-bright) !important;
  border: 2px solid var(--tw-danger) !important;
  font-size: 10px !important;
  padding: 8px 16px !important;
}

/* secondary/ghost buttons */
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_link {
  color: var(--tw-tide) !important;
  font-size: 10px !important;
}

.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
.tidewrath-theme .mx_AccessibleButton.mx_AccessibleButton_kind_link:hover {
  color: var(--tw-tide-hover) !important;
}

/* ============================================
   room list tiles
   ============================================ */
.tidewrath-theme .mx_RoomTile {
  border: 2px solid transparent !important;
  padding: 4px 8px !important;
  transition: none !important;
}

.tidewrath-theme .mx_RoomTile:hover {
  background-color: var(--tw-void-lighter) !important;
  border-color: var(--tw-border) !important;
}

.tidewrath-theme .mx_RoomTile.mx_RoomTile_selected,
.tidewrath-theme .mx_RoomTile[aria-selected="true"] {
  background-color: var(--tw-void-lighter) !important;
  border-color: var(--tw-tide) !important;
}

/* ============================================
   timeline messages
   ============================================ */
.tidewrath-theme .mx_EventTile:hover {
  background-color: var(--tw-void-lighter) !important;
}

.tidewrath-theme .mx_EventTile_line {
  padding: 4px 8px !important;
}

/* ============================================
   message composer
   ============================================ */
.tidewrath-theme .mx_MessageComposer_wrapper {
  border: 2px solid var(--tw-border) !important;
  background-color: var(--tw-void) !important;
  margin: 8px !important;
}

.tidewrath-theme .mx_BasicMessageComposer_input {
  color: var(--tw-text) !important;
  font-size: 13px !important;
}

.tidewrath-theme .mx_BasicMessageComposer_input::placeholder {
  color: var(--tw-text-muted) !important;
}

/* ============================================
   inputs and textareas
   ============================================ */
.tidewrath-theme input,
.tidewrath-theme textarea,
.tidewrath-theme select {
  border: 2px solid var(--tw-border) !important;
  background-color: var(--tw-void) !important;
  color: var(--tw-text) !important;
}

.tidewrath-theme input:focus,
.tidewrath-theme textarea:focus,
.tidewrath-theme select:focus {
  border-color: var(--tw-tide) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================
   dialogs and modals
   ============================================ */
.tidewrath-theme .mx_Dialog {
  background-color: var(--tw-void-light) !important;
  border: 2px solid var(--tw-border) !important;
}

.tidewrath-theme .mx_Dialog_background {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ============================================
   focus rings
   ============================================ */
.tidewrath-theme *:focus-visible {
  outline: 2px solid var(--tw-tide) !important;
  outline-offset: 0px !important;
  box-shadow: none !important;
}

/* ============================================
   avatars — pixelated rendering
   ============================================ */
.tidewrath-theme .mx_BaseAvatar_image,
.tidewrath-theme .mx_BaseAvatar img,
.tidewrath-theme img.mx_BaseAvatar_image {
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
}

/* ============================================
   notification badges
   ============================================ */
.tidewrath-theme .mx_NotificationBadge {
  background-color: var(--tw-wrath) !important;
  color: var(--tw-text-bright) !important;
  font-family: var(--tw-pixel-font) !important;
  font-size: 8px !important;
  border: 2px solid var(--tw-void) !important;
  min-width: 18px;
  height: 18px;
}

/* ============================================
   code blocks
   ============================================ */
.tidewrath-theme pre,
.tidewrath-theme code {
  background-color: var(--tw-void) !important;
  color: var(--tw-tide) !important;
  border: 2px solid var(--tw-border) !important;
  font-family: var(--tw-body-font) !important;
}

.tidewrath-theme code {
  padding: 1px 4px !important;
}

.tidewrath-theme pre {
  padding: 8px !important;
}

/* ============================================
   links
   ============================================ */
.tidewrath-theme a {
  color: var(--tw-tide) !important;
  text-decoration: none !important;
}

.tidewrath-theme a:hover {
  color: var(--tw-tide-hover) !important;
  text-decoration: underline !important;
}

.tidewrath-theme a:visited {
  color: var(--tw-tide-muted) !important;
}

/* ============================================
   room header
   ============================================ */
.tidewrath-theme .mx_RoomHeader {
  background-color: var(--tw-void) !important;
  padding: 8px 16px !important;
}

.tidewrath-theme .mx_RoomHeader_name {
  font-size: 11px !important;
}

/* ============================================
   user menu / space panel
   ============================================ */
.tidewrath-theme .mx_UserMenu {
  border-bottom: 2px solid var(--tw-border) !important;
}

.tidewrath-theme .mx_SpaceButton {
  border: 2px solid transparent !important;
}

.tidewrath-theme .mx_SpaceButton:hover {
  border-color: var(--tw-border) !important;
}

.tidewrath-theme .mx_SpaceButton.mx_SpaceButton_active {
  border-color: var(--tw-tide) !important;
}

/* ============================================
   context menus / tooltips
   ============================================ */
.tidewrath-theme .mx_ContextualMenu,
.tidewrath-theme .mx_Tooltip {
  background-color: var(--tw-void) !important;
  border: 2px solid var(--tw-border) !important;
  color: var(--tw-text) !important;
}

.tidewrath-theme .mx_ContextualMenu .mx_AccessibleButton:hover {
  background-color: var(--tw-void-lighter) !important;
}

/* ============================================
   reactions
   ============================================ */
.tidewrath-theme .mx_ReactionsRow_button {
  border: 2px solid var(--tw-border) !important;
  background-color: var(--tw-void) !important;
}

.tidewrath-theme .mx_ReactionsRow_button.mx_ReactionsRow_button_selected {
  border-color: var(--tw-tide) !important;
  background-color: var(--tw-void-lighter) !important;
}

/* ============================================
   pills (user mentions, room mentions)
   ============================================ */
.tidewrath-theme .mx_Pill {
  background-color: var(--tw-void-lighter) !important;
  border: 1px solid var(--tw-border) !important;
  color: var(--tw-tide) !important;
}

/* ============================================
   search
   ============================================ */
.tidewrath-theme .mx_SearchBar {
  background-color: var(--tw-void) !important;
  border-bottom: 2px solid var(--tw-border) !important;
}

/* ============================================
   settings panels
   ============================================ */
.tidewrath-theme .mx_TabbedView_tabLabel {
  border: 2px solid transparent !important;
  font-family: var(--tw-pixel-font) !important;
  font-size: 9px !important;
}

.tidewrath-theme .mx_TabbedView_tabLabel_active {
  border-color: var(--tw-tide) !important;
  background-color: var(--tw-void-lighter) !important;
}

.tidewrath-theme .mx_TabbedView_tabPanel {
  background-color: var(--tw-void-light) !important;
}

/* ============================================
   mobile responsive tweaks
   ============================================ */
@media (max-width: 768px) {
  .tidewrath-theme .mx_RoomTile_title {
    font-size: 11px !important;
  }

  .tidewrath-theme .mx_DisambiguatedProfile_displayName,
  .tidewrath-theme .mx_SenderProfile_displayName {
    font-size: 11px !important;
  }

  .tidewrath-theme .mx_EventTile_body {
    font-size: 14px !important;
  }

  .tidewrath-theme .mx_AccessibleButton {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .tidewrath-theme .mx_RoomSublist_headerText {
    font-size: 10px !important;
  }

  .tidewrath-theme .mx_MessageTimestamp {
    font-size: 9px !important;
  }
}

/* ============================================
   misc overrides
   ============================================ */

/* remove all transitions for pixel crispness */
.tidewrath-theme * {
  transition: none !important;
}

/* unread indicator dot */
.tidewrath-theme .mx_RoomTile_badge {
  background-color: var(--tw-wrath) !important;
}

/* typing indicator */
.tidewrath-theme .mx_WhoIsTypingTile {
  color: var(--tw-text-muted) !important;
  font-family: var(--tw-body-font) !important;
  font-size: 11px !important;
}

/* date separators */
.tidewrath-theme .mx_DateSeparator {
  color: var(--tw-text-muted) !important;
  font-family: var(--tw-pixel-font) !important;
  font-size: 8px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tidewrath-theme .mx_DateSeparator > hr {
  border-color: var(--tw-border) !important;
}

/* read receipts */
.tidewrath-theme .mx_ReadReceiptGroup {
  opacity: 0.7;
}

/* emoji picker */
.tidewrath-theme .mx_EmojiPicker {
  background-color: var(--tw-void) !important;
  border: 2px solid var(--tw-border) !important;
}

/* ============================================
   hide verification/encryption toasts and dialogs
   bridge users don't need cross-signing
   (unscoped — these render outside the themed container)
   ============================================ */
.mx_SetupEncryptionToast,
.mx_VerificationRequestToast,
.mx_CompleteSecurity,
.mx_SetupEncryptionDialog,
[class*="SetupEncryption"],
[class*="VerifySession"],
[class*="CompleteSecurity"] {
  display: none !important;
}