/* styles.css - Modern Chat UI with Gumroad-inspired design */

:root {
  color-scheme: light only;

  /* === WARM PREMIUM PALETTE === */
  --color-pink: #ff5100a5;
  /* International Orange (Primary Action) */
  --color-blue: #a9bdff;
  /* Deep Brutal Blue */
  --color-yellow: #facc15;
  /* Highlighter Yellow */
  --color-green: #059668a3;
  /* Retro Green */
  --color-purple: #f755eaaf;
  /* Vivid Purple */

  /* === SURFACES (Warm Paper) === */
  --color-text: #1c1917;
  /* Near Black (Standard Text) */
  --color-text-muted: #57534e;
  /* Warm Gray */
  --color-text-reversed: #302b2b;
  /* White text (for buttons/dark bgs) */

  --color-bg: #fefdfb;
  /* MAIN BG: Warm Cream */
  --color-bg-light: #ffffff;
  /* Pure White Cards */
  --color-bg-lighter: #f4f4f0;
  /* Darker Cream Accents */

  /* === BRUTALIST CORE === */
  --color-link: var(--color-text);
  --color-selected: var(--color-yellow);

  --color-border: #000000;
  /* PURE BLACK BORDERS */
  --color-border-light: #000000;
  /* Keep it black for this style */

  --color-accent: var(--color-pink);
  --color-accent-hover: #e64600;
  --color-negative: #dc2626;

  /* === HARD SHADOWS (No Blur) === */
  --shadow-gumroad: 4px 4px 0px var(--color-border);
  --shadow-gumroad-hover: 6px 6px 0px var(--color-border);

  /* === SPACING & SIZING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* === TYPOGRAPHY === */
  --font-primary: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-heading: "Literata", serif;
  --font-mono: "Cascadia Code", monospace;

  /* === UI ELEMENTS === */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 999px;

  /* === ANIMATIONS === */
  --transition-fast: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --sidebar-width: clamp(280px, 25vw, 350px);
  --sidebar-width-mobile: 85vw;
}

span {
  font-size: 1rem;
  /* Base font size */
  color: var(--color-text-muted);
}

/* === DARK MODE OVERRIDES === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-pink: #262728;
    /* International Orange (Primary Action) */
    --color-blue: #1616166e;
    /* Deep Brutal Blue */
    --color-yellow: #000000;
    /* Highlighter Yellow */
    --color-green: #059668;
    /* Retro Green */
    --color-purple: #2c2c2c4a;
    /* Vivid Purple */

    /* === SURFACES (Warm Paper) === */
    --color-text: #574e48;
    /* Near Black (Standard Text) */
    --color-text-muted: #e7e7e7;
    /* Warm Gray */
    --color-text-reversed: #d0d0d0;
    /* White text (for buttons/dark bgs) */

    --color-bg: #010101;
    /* MAIN BG: Warm Cream */
    --color-bg-light: #070707;
    /* Pure White Cards */
    --color-bg-lighter: #050505;
    /* Darker Cream Accents */

    /* === BRUTALIST CORE === */
    --color-link: var(--color-text);
    --color-selected: var(--color-yellow);

    --color-border: #606060;
    /* PURE BLACK BORDERS */
    --color-border-light: #606060;
    /* Keep it black for this style */

    --color-accent: var(--color-pink);
    --color-accent-hover: #e64600;
    --color-negative: #dc2626;

    /* === HARD SHADOWS (No Blur) === */
    --shadow-gumroad: 4px 4px 0px var(--color-border);
    --shadow-gumroad-hover: 6px 6px 0px var(--color-border);
  }
}



body {
  background-color: var(--color-bg);
  color: var(--color-text);
  /* Fixed: Ensures dark text on light BG */
  font-family: var(--font-primary);
  line-height: 1.6;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Premium Grain Texture Overlay */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.05'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

/* Layout: sidebar + main using logical properties */
.app-container {
  display: flex;
  block-size: 100vh;
  block-size: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Sidebar with Gumroad styling - bold border and colorful background */
.sidebar {
  inline-size: 350px;
  /* Use CSS variable for responsive width */
  background: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-md);
  border-inline-start: 1px solid var(--color-border);
  box-sizing: border-box;
  order: 2;
  /* This makes the sidebar appear after the main content */
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
}


/* Main content with logical properties */
.main {
  flex: 1;
  order: 1;
}

/* Increased height and visibility for online users list */
.sidebar .online-users-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-md);
  /* Increased gap for better spacing */
  inline-size: 100%;
  padding: var(--space-md);
  /* Increased padding */
  margin-block-end: var(--space-lg);
  /* More bottom margin */
  min-block-size: 100px;
  /* Ensure minimum height to show users */
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  align-items: center;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  box-sizing: border-box;
}

.sidebar .online-users-list::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome/Safari/Edge */
}

/* Increased avatar size and improved spacing */
.sidebar .online-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  /* Increased gap */
  min-width: fit-content;
  /* Allow flexible width based on content */
  inline-size: 60px;
  /* Increased from 50px */
  flex-shrink: 0;
  /* Prevent shrinking */
}

/* Larger avatar with better visibility */
.sidebar .online-user .avatar {
  inline-size: 56px;
  /* Increased from 45px */
  block-size: 56px;
  /* Increased from 45px */
  border-radius: var(--border-radius-full);
  background: var(--color-bg-lighter);
  position: relative;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar .online-user .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-full);
  display: block;
}

/* Animations for online user pop-in / pop-out */
.sidebar .online-user {
  transition: transform 220ms var(--transition-normal), opacity 220ms var(--transition-normal);
}

.online-user--enter {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}

.online-user--leave {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}

/* When a user is leaving, show a softer 'gone' state briefly before removal */
.online-user--leaving {
  opacity: 0.85;
  transform: translateY(0) scale(0.995);
  filter: grayscale(30%);
}

.online-user--leaving .username {
  color: var(--color-text-muted);
  font-style: italic;
}

.online-user--leaving .status-indicator {
  background: var(--color-text-muted) !important;
  box-shadow: none !important;
}

/* subtle bounce for enter (only when JS removes the helper class) */
@keyframes online-user-bounce {
  0% {
    transform: translateY(-10px) scale(0.97);
    opacity: 0;
  }

  60% {
    transform: translateY(2px) scale(1.02);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.online-user.animate-bounce {
  animation: online-user-bounce 320ms cubic-bezier(.2, .9, .2, 1);
}

.sidebar .online-user .avatar .avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-reversed);
}

.sidebar .online-user .avatar:has(img) .avatar-initials {
  display: none;
}

.sidebar .online-user .username {
  font-size: var(--font-size-sm);
  color: var(--color-text-reversed);
  text-align: center;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .online-user[role="button"] {
  cursor: pointer;
}

.sidebar .online-user[role="button"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Status indicator with green color */
.sidebar .online-user .status-indicator {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  position: absolute;
  bottom: -4px;
  right: -4px;
  border: 2px solid var(--color-bg-light);
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25);
  z-index: 10;
  background: var(--color-green);
}

/* Fix missing dot in selector */
.sidebar .channels-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-sm);
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  margin-left: 0;
}

.sidebar .channel-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  /* Use fluid typography */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-md) 0;
  margin-bottom: var(--space-xs);
}

.sidebar .channel-divider__line {
  flex: 1;
  height: 2px;
  background: var(--color-border-light);
}

.sidebar .channel-divider__label {
  white-space: nowrap;
  font-weight: 700;
}

/* Channel tiles with Gumroad hard shadow effect and bold borders */
.sidebar .channel-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  margin-bottom: 0;
  padding: var(--space-sm) var(--space-lg);
  /* Reduced padding for better mobile fit */
  background: var(--color-bg);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-border);
  color: var(--color-text-reversed);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: visible;
  text-decoration: none;
  white-space: nowrap;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  /* Ensure minimum touch target */
  min-height: 44px;
}

/* Gumroad hover effect with hard shadow */
.sidebar .channel-icon:hover {
  /* Reduced transform to prevent flickering when cursor is on edge */
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
  border-color: var(--color-border);
  background: var(--color-yellow);
}

/* Add invisible hover buffer zone to prevent flickering */
.sidebar .channel-icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  /* Extends 6px beyond element - larger than transform distance */
  pointer-events: auto;
  z-index: -1;
  border-radius: var(--border-radius-full);
}

/* Active state with pink background and hard shadow */
.sidebar .channel-icon.active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-gumroad);
  /* Reduced transform to match hover state */
  transform: translate(-2px, -2px);
}

/* Channel emoji */
.sidebar .channel-icon .channel-emoji {
  margin-right: var(--space-sm);
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  flex-shrink: 0;
}

/* Channel avatar with bold styling */
.sidebar .channel-icon .channel-avatar {
  width: 28px;
  height: 28px;
  padding: 0.25%;
  border-radius: var(--border-radius-full);
  background: var(--color-blue);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  margin-right: var(--space-sm);
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.sidebar .channel-icon:hover .channel-avatar,
.sidebar .channel-icon.active .channel-avatar {
  border-color: var(--color-border);
  background: var(--color-purple);
  color: var(--color-bg);
}

.sidebar .channel-icon .channel-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unread indicator with red color */
.sidebar .channel-icon .channel-unread-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-negative);
  border: 2px solid var(--color-bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sidebar .channel-icon.is-unread .channel-unread-indicator {
  opacity: 1;
  transform: scale(1);
}

/* JS-inserted unread indicator fallback: .unread-indicator
   Some browsers/projects insert a simple element with this class name.
   Keep it visually consistent with the existing channel-unread-indicator
   while ensuring good touch hitbox and high-contrast on light backgrounds. */
.sidebar .channel-icon .unread-indicator {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  background: var(--color-negative);
  border: 2px solid var(--color-bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  display: inline-block;
  transform: scale(0.8);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  opacity: 0;
  pointer-events: none;
  /* decorative only */
  z-index: 20;
}

.sidebar .channel-icon.is-unread .unread-indicator,
.sidebar .channel-icon[data-unread="true"] .unread-indicator {
  opacity: 1;
  transform: scale(1);
}

@media (hover: none) {

  /* Slightly increase indicator size on touch devices for visibility */
  .sidebar .channel-icon .unread-indicator {
    width: 14px;
    height: 14px;
  }
}

/* Remove gradient hover effect, keep it simple */
.sidebar .channel-icon::before {
  display: none;
}

/* Add channel button with Gumroad styling */
.sidebar .add-channel {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  margin-left: 0;
  align-self: flex-start;
  inline-size: auto;
  min-width: 140px;
  block-size: 44px;
  background: var(--color-bg);
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  color: var(--color-text-reversed);
  font-size: var(--font-size-md);
  font-weight: 700;
  cursor: pointer;
  border: 2px dashed var(--color-border);
  transition: all var(--transition-fast);
}

.sidebar .add-channel:hover {
  background: var(--color-green);
  color: var(--color-bg);
  border-color: var(--color-border);
  border-style: solid;
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-gumroad);
}

/* User avatars at bottom */
.sidebar .users {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  inline-size: 100%;
  padding-block-end: var(--space-md);
}

/* Avatar with bold border */
.avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--border-radius-full);
  background: var(--color-bg-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-reversed);
  font-weight: bold;
  font-size: var(--font-size-md);
  border: 2px solid var(--color-border);
  transition: border var(--transition-fast);
}

/* Avatar active/hover states using :where for lower specificity */
.sidebar .avatar:where(.active),
.sidebar .avatar:where(:hover) {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Avatar groups with modern CSS grid and :where selectors */
.avatar__group {
  --avatar-size: 2.5ch;

  block-size: 5ch;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content;
  inline-size: 5ch;
  place-content: center;
}

.avatar__group .avatar {
  margin: auto;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  font-size: calc(var(--avatar-size) * 0.4);
}

/* Two avatars */
.avatar__group:where(:has(> :last-child:nth-child(2))) {
  --avatar-size: 3.5ch;
}

.avatar__group:where(:has(> :last-child:nth-child(2)))> :first-child {
  margin-block-end: 1.5ch;
  margin-inline-end: -0.75ch;
}

.avatar__group:where(:has(> :last-child:nth-child(2)))> :last-child {
  margin-block-start: 1.5ch;
  margin-inline-start: -0.75ch;
}

/* Three avatars */
.avatar__group:where(:has(> :last-child:nth-child(3)))> :last-child {
  margin-inline: 1.25ch -1.25ch;
}

/* Touch/mobile optimizations */
@media (hover: none) {

  /* Increase touch targets for better accessibility */
  .avatar,
  .btn,
  .channel-icon,
  .add-channel {
    /* Minimum touch target size of 44px as per WCAG guidelines */
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  /* Add slightly larger tap area to interactive elements */
  .btn::after,
  .avatar::after,
  .channel-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
  }
}

/* Main chat area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  block-size: 100dvh;
  background: var(--color-bg);
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Header with bold border */
.header {
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: bold;
  background: var(--color-bg);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Allow wrapping on small screens */
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .header {
    display: none !important;
  }
}

/* Header channel info with avatar support */
.header-channel-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  /* Prevent shrinking below content size */
  min-width: 0;
}

/* Header avatar with colorful background */
.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-full);
  background: var(--color-purple);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.header-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Header title with blue background and bold border */
.header-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid var(--color-border);
  background: var(--color-blue);
  color: var(--color-text-reversed);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-gumroad);
  /* Allow text to wrap on small screens */
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Allow wrapping on very small screens */
  flex-wrap: wrap;
}



.btn.btn--sm:hover {
  background: var(--color-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}





.user-menu {
  position: relative;
}

.user-menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-bg-light);
  color: var(--color-text-reversed);
  border: 1px solid var(--color-border-light);
  padding: 6px 10px;
  border-radius: var(--border-radius-md);
  /* Ensure minimum touch target */
  min-height: 44px;
}

/* Center user menu on small screens */
@media (max-width: 768px) {
  .header-actions {
    justify-content: center;
    width: 100%;
  }

  .user-menu {
    position: static;
    transform: none;
  }
}


.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 260px;
  /* Adjust width on small screens */
  max-width: 90vw;
  z-index: 100;
  overflow: hidden;
}

.user-info {
  padding: 12px 16px;
}

.user-name {
  font-weight: 600;
  color: var(--color-text-reversed);
  margin-bottom: 2px;
}

.user-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.user-dropdown hr {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-border-light);
}

.logout-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: var(--color-text-reversed);
  text-decoration: none;
  transition: background-color 0.2s ease;
  /* Ensure minimum touch target */
  min-height: 44px;
}

.logout-btn:hover {
  background-color: var(--color-bg);
}

.timezone-selector {
  position: relative;
}

.timezone-selector button {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-bg-light);
  color: var(--color-text-reversed);
  border: 1px solid var(--color-border-light);
  padding: 6px 10px;
  border-radius: var(--border-radius-md);
  /* Ensure minimum touch target */
  min-height: 44px;
}

.timezone-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 260px;
  /* Adjust width on small screens */
  max-width: 90vw;
  z-index: 100;
  overflow: hidden;
}

.timezone-menu-header {
  padding: 12px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-reversed);
}

.timezone-menu-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.timezone-menu-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.timezone-menu-value {
  font-size: var(--font-size-md);
  color: var(--color-text-reversed);
}

.timezone-menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timezone-menu-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-reversed);
  font-size: var(--font-size-sm);
  cursor: pointer;
  /* Ensure minimum touch target */
  min-height: 44px;
}

#messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  margin: 0;
  list-style: none;
  background: var(--color-bg);
  border: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-light) var(--color-bg);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  overscroll-behavior: contain;
  /* Prevent pull-to-refresh */
}

.history-loader {
  display: none;
  justify-content: center;
  margin-bottom: var(--space-md);
  list-style: none;
}

.history-loader--visible {
  display: flex;
}

.history-loader__button {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-full);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  color: var(--color-text-reversed);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  /* Ensure minimum touch target */
  min-height: 44px;
}

.history-loader__button:where(:not(:disabled):hover) {
  background: var(--color-bg-lighter);
}

.history-loader__button:disabled {
  opacity: 0.6;
  cursor: default;
}

.dm-invite-body {
  background: inherit;
  padding: 2em;
  text-align: center;
}

.dm-invite__actions {
  margin-top: 1.5em;
  text-align: center;
}

/* Using more semantic class names with modern selectors */
.message {
  margin-block-end: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  background: var(--color-bg-light);
  max-inline-size: 80%;
  margin-bottom: 2.5rem;
  border: 2px solid var(--color-border);
}

/* Link preview cards for Open Graph content */
.link-preview {
  margin-block-start: var(--space-sm);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-lighter);
  transition: transform var(--transition-fast);
  max-width: 100%;
}

.link-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.link-preview__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-darker);
}

.link-preview__content {
  padding: var(--space-md);
}

.link-preview__title {
  font-weight: bold;
  font-size: var(--font-size-md);
  margin-block-end: var(--space-xs);
  color: var(--color-text-reversed);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-xs);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview__domain {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Video preview specific styles */
.link-preview--video .link-preview__image {
  position: relative;
}

.link-preview--video .link-preview__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-preview--video .link-preview__image::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--border-radius-full);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1;
}

/* Media preview (direct files) styling - ensure media fits inside the message frame */
.media-preview {
  margin-block-start: var(--space-sm);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  /* Prevent inner media from overflowing the card */
  background: transparent;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

.media-preview img,
.media-preview video,
.media-preview iframe,
.media-preview audio {
  display: block;
  width: 100%;
  /* fill available width */
  max-width: 100%;
  height: auto;
  /* keep aspect ratio */
  max-height: 60vh;
  /* avoid huge media on tall screens */
  object-fit: contain;
  /* show whole image/video when possible */
  border: 0;
}

.media-preview--video video {
  background: #000;
  /* black backdrop for videos */
}

/* For embedded PDFs we prefer a fixed-ish height but constrained to viewport */
.media-preview--iframe {
  max-height: 60vh;
}

.media-preview--iframe iframe {
  width: 100%;
  height: 480px;
  max-height: 60vh;
}

/* Small touch padding so media doesn't butt up to edges */
.media-preview__img,
.media-preview__video,
.media-preview__audio,
.media-preview__iframe {
  display: block;
  width: 100%;
}


/* Message bubbles with different colors for sent vs received */
/* Message bubbles with Gumroad styling */
.message--sent {
  align-self: flex-end;
  background: var(--color-yellow);
  border-end-end-radius: var(--border-radius-lg);
  border-start-start-radius: var(--border-radius-lg);
  border-start-end-radius: var(--border-radius-lg);
  border-end-start-radius: var(--border-radius-lg);
  margin-inline-start: 20%;
  margin-inline-end: 45px;
  /* Space for avatar on right */
  position: relative;
  color: var(--color-text-reversed);
  border: 2px solid var(--color-border);
  box-shadow: 8px 8px #262626;
}

.message--sent .mention-chip {
  background: rgba(0, 0, 0, 0.15);
  border-color: var(--color-text-reversed);
  color: var(--color-text-reversed);
  font-weight: 700;
}

.message--received {
  align-self: flex-start;
  background: var(--color-bg-lighter);
  border-end-start-radius: var(--border-radius-lg);
  border-start-start-radius: var(--border-radius-lg);
  border-start-end-radius: var(--border-radius-lg);
  border-end-end-radius: var(--border-radius-lg);
  margin-inline-end: 20%;
  border: 2px solid var(--color-border);
  box-shadow: -9px 10px #232323;
}

.message--received .mention-chip {
  background: var(--color-purple-light, #e9d5ff);
  border-color: var(--color-purple, #a855f7);
  color: var(--color-text);
  font-weight: 700;
}

/* Message avatar with bold border */
.message .avatar {
  flex-shrink: 0;
  inline-size: 36px;
  block-size: 36px;
  font-size: 0.85em;
  align-self: flex-start;
  /* Align avatar to the top */
  position: absolute;
  top: 0;
  /* Position at the top */
  border: 2px solid var(--color-border);
  background: var(--color-yellow);
  color: var(--color-text-reversed);
  font-weight: 700;
}

.message--sent .avatar {
  top: -20px;
  right: -20px;
  /* Position avatar to the right of sent messages */
}

.message--received .avatar {
  top: -20px;
  left: -20px;
  /* Position avatar to the left of received messages */
}

/* Extra space around message to make room for avatar */
.message--sent {
  padding-inline-end: var(--space-md);
  margin-inline-end: 45px;
  /* Space for avatar on right */
  position: relative;
}

.message--received {
  padding-inline-start: var(--space-md);
  margin-inline-start: 45px;
  /* Space for avatar on left */
  position: relative;
}

.message__content {
  flex: 1;
  margin-block-start: 4px;
  /* Add slight offset to align with avatar */
}

.message--sent .message__content {
  text-align: right;
  padding-inline-end: var(--space-sm);
}

.message__user {
  color: var(--color-text-reversed);
  font-weight: 700;
  margin-inline-end: var(--space-xs);
  font-size: var(--font-size-md);
}

.message__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-inline-start: var(--space-xs);
  font-weight: normal;
}

.message__text {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--color-text-reversed);
  font-size: var(--font-size-md);
  word-break: break-word;
  line-height: 1.5;
}

/* Message menu (three dots) styling */
.message__menu {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 10;
}

.message:hover .message__menu {
  opacity: 1;
  visibility: visible;
}

.message__menu-trigger {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: bold;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Ensure minimum touch target */
  min-width: 44px;
  min-height: 44px;
}

.message__menu-trigger:hover {
  background: var(--color-bg-lighter);
  color: var(--color-text-reversed);
  transform: scale(1.05);
}

.message__menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  z-index: 20;
  min-width: 160px;
  /* Slightly wider to accommodate borders */
  overflow: hidden;

  /* Neobrutal Container Styles (matched to invite-options-menu) */
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-gumroad);
  padding: var(--space-sm);

  /* Animation states */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.message__menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.message__menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.8rem;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  /* Touch target */

  /* Neobrutal Item Styles (matched to invite-option) */
  background: var(--color-bg-lighter);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 6px;
  /* Space between chunky items */
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: all 0.15s ease;
}

/* Remove margin from last item so it fits snugly in container */
.message__menu-item:last-child {
  margin-bottom: 0;
}

.message__menu-item:hover {
  background: var(--color-tertiary);
  /* Yellow highlight on hover (or use --color-pink to exactly match invite) */
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad-sm);
  color: var(--color-text);
}

.message__menu-item:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.message__menu-item--danger {
  color: var(--color-negative);
  border-color: var(--color-negative);
  /* Optional: make danger border red too */
}

.message__menu-item--danger:hover {
  background: var(--color-negative);
  color: var(--color-bg);
  border-color: var(--color-border);
}

/* Unsent message styling */
.message--unsent {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.message--unsent::after {
  content: "Message deleted";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg-lighter);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Hide menu for unsent messages */
.message--unsent .message__menu {
  display: none;
}

/* Deleted message styling (WhatsApp style) */
.message--deleted {
  opacity: 0.7;
}

.message--deleted .message__text {
  font-style: italic;
  color: var(--color-text-muted) !important;
}

.message--deleted .link-preview {
  display: none;
}

.message--deleted .message__menu {
  display: none;
}

/* Date divider with bold styling */
.date-divider {
  text-align: center;
  margin-block: var(--space-xl);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.date-divider::before {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: var(--color-border-light);
  margin-inline-end: var(--space-md);
}

.date-divider::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: var(--color-border-light);
  margin-inline-start: var(--space-md);
}

.message-form {
  position: relative;
  /* Make the form stick to the viewport */
  bottom: 0;
  /* Align it to the bottom */
  left: 0;
  /* Align it to the left */
  width: 100%;
  /* Ensure it spans the full width */
  z-index: 100;
  /* Ensure it's above other content */
  /* The rest of your styles */
  display: flex;
  padding: var(--space-lg) var(--space-xl);
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  background: var(--color-pink);
  border-block-start: 1spx solid var(--color-border);
  gap: var(--space-sm);
  align-items: center;
  flex-shrink: 0;
}

/* Message input with bold border and Gumroad styling */
.message-input {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  padding-inline-start: calc(var(--space-lg) + 32px);
  /* Space for icon */
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-bg);
  color: var(--color-text-reversed);
  font-size: var(--font-size-md);
  font-weight: 500;
  outline: none;
  transition: all var(--transition-fast);
  position: relative;
  /* Ensure minimum height for touch */
  min-height: 46px;
}

/* Message input icon */
.message-input::before {
  content: "";
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-md);
  z-index: 2;
  pointer-events: none;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* Focus state with modern shadow effect */
.message-input:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

/* Placeholder styling */
.message-input::placeholder {
  color: var(--color-text-muted);
  font-weight: normal;
  font-family: var(--font-primary);
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
  .message-form {
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  }

  .message-input {
    padding-inline-start: calc(var(--space-md) + 28px);
  }

  .message-input::before {
    left: var(--space-sm);
    width: 18px;
    height: 18px;
  }
}

/* Button base styles using CSS custom properties */
/* Button with Gumroad hard shadow */
.btn {
  --btn-background: var(--color-bg);
  --btn-border-color: var(--color-border);
  --btn-border-radius: var(--border-radius-xl);
  --btn-border-size: 2px;
  --btn-color: var(--color-text-reversed);
  --btn-padding: 0.6em 1.3em;

  align-items: center;
  background-color: var(--btn-background);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-size) solid var(--btn-border-color);
  color: var(--btn-color);
  display: inline-flex;
  gap: 0.5em;
  justify-content: center;
  padding: var(--btn-padding);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 700;
  position: relative;
  /* Ensure minimum touch target */
  min-height: 44px;
}

/* Primary button with pink background */
.btn--primary {
  --btn-background: var(--color-accent);
  --btn-color: var(--color-bg);
  --btn-border-color: var(--color-border);
}

.btn--primary:where(:not(:disabled):hover) {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-gumroad);
}

.btn--secondary {
  --btn-background: var(--color-blue);
  --btn-border-color: var(--color-border);
  --btn-color: var(--color-bg);
}

.btn--secondary:where(:not(:disabled):hover) {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-gumroad);
}

/* Button sizes */
.btn--sm {
  --btn-padding: 0.3em 0.8em;
  font-size: var(--font-size-sm);
}

.btn--lg {
  --btn-padding: 0.7em 1.5em;
  font-size: var(--font-size-md);
}

/* Button with notification indicator using ::after pseudo-element */
.btn:where(.has-notification)::after {
  aspect-ratio: 1;
  background-color: var(--color-negative);
  block-size: 1em;
  border-radius: 2em;
  content: "";
  flex-shrink: 0;
  inline-size: 1em;
  inset-block-start: -0.25em;
  inset-inline-end: -0.25em;
  position: absolute;
}

/* Message form button with yellow background */
.message-form button {
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  background: var(--color-yellow);
  color: var(--color-text-reversed);
  font-weight: 700;
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Using :where pseudo selector for lower specificity and no hover on mobile */
@media (any-hover: hover) {
  .message-form button:where(:not(:disabled):hover) {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-gumroad);
  }
}

/* Dialog with Gumroad styling */
.dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  /* Add padding for mobile */
  padding: var(--space-md);
}

.dialog.active {
  opacity: 1;
  visibility: visible;
}

/* Dialog content with bold border */
.dialog-content {
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  inline-size: 90%;
  max-inline-size: 400px;
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-gumroad-hover);
  transform: translateY(-20px);
  transition: transform var(--transition-normal);
  /* Ensure it doesn't overflow on small screens */
  max-height: 90vh;
  overflow-y: auto;
}

.dialog.active .dialog-content {
  transform: translateY(0);
}

.dialog h3 {
  margin-block-start: 0;
  color: var(--color-text-reversed);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* Dialog input with bold border */
.dialog input[type="text"] {
  inline-size: 100%;
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-bg);
  color: var(--color-text-reversed);
  font-size: var(--font-size-md);
  font-weight: 500;
  box-sizing: border-box;
  /* Prevent zoom on iOS */
  font-size: 16px;
  /* Ensure minimum height for touch */
  min-height: 44px;
}

.dialog input[type="text"]:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

/* Emoji selector for channel creation */
/* Emoji selector with Gumroad styling */
.emoji-selector {
  margin-block: var(--space-md);
}

.emoji-selector label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-text-reversed);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.emoji-grid {
  display: grid;
  /* Responsive grid columns */
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Emoji option with bold border */
.emoji-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-bg);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 1.3em;
  transition: all var(--transition-fast);
  border: 2px solid var(--color-border);
  /* Ensure minimum touch target */
  min-width: 44px;
  min-height: 44px;
}

.emoji-option:hover {
  background-color: var(--color-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

.emoji-option.selected {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
  /* Allow wrapping on small screens */
  flex-wrap: wrap;
}

/* Using the global button classes instead of dialog-specific ones */
.dialog .btn--cancel {
  --btn-background: var(--color-bg-lighter);
  --btn-color: var(--color-text-reversed);
}

.dialog .btn--cancel:where(:not(:disabled):hover) {
  filter: brightness(1.1);
}

.dialog .btn--submit {
  --btn-background: var(--color-accent);
  --btn-color: var(--color-text-reversed);
}

.dialog .btn--submit:where(:not(:disabled):hover) {
  --btn-background: var(--color-accent-hover);
}

/* Connection status indicator */
.connection-status {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--border-radius-full);
  color: transparent;
  transition: all var(--transition-normal);
  opacity: 0;
}

.connection-status--connected {
  background-color: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  opacity: 1;
}

.connection-status--disconnected {
  background-color: var(--color-negative);
  box-shadow: 0 0 10px var(--color-negative);
  opacity: 1;
}

/* Status message notifications with logical properties */
.status {
  position: fixed;
  border: 2px solid var(--color-border);
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-light);
  border-inline-start: 5px solid var(--color-accent);
  border-radius: var(--border-radius-md);
  z-index: 1000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  font-size: var(--font-size-sm);
  max-inline-size: 300px;
  /* Adjust for mobile */
  max-inline-size: calc(100vw - 2 * var(--space-lg));
}

/* Status variants */
.status--error {
  border-inline-start-color: var(--color-negative);
}

.status--warning {
  border-inline-start-color: oklch(80% 0.15 80);
}

/* Status animation states */
.status--fade-out {
  opacity: 0;
}

/* Hamburger menu styles */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(140, 204, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(140, 204, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(140, 204, 255, 0);
  }
}

/* Hamburger menu with Gumroad styling */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  inline-size: 3rem;
  block-size: 3rem;
  background: var(--color-purple);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  padding: 0.6rem;
  position: fixed;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 1100;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-gumroad);
  animation: pulse 2s infinite;
  /* Ensure minimum touch target */
  min-width: 48px;
  min-height: 48px;
}

.hamburger-menu:hover {
  background-color: var(--color-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-border);
}

.hamburger-line {
  inline-size: 1.8rem;
  block-size: 0.25rem;
  background-color: #262626;
  border-radius: var(--border-radius-full);
  transition: all 0.3s ease;
  transform-origin: center;
  margin: 0 auto;
}

/* Active state for hamburger menu */
.hamburger-menu--active {
  background-color: var(--color-accent);
  border-color: var(--color-border);
}

.hamburger-menu--active .hamburger-line:nth-child(1) {
  transform: translateY(0.45rem) rotate(45deg);
  width: 1.8rem;
  background-color: var(--color-bg);
}

.hamburger-menu--active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.hamburger-menu--active .hamburger-line:nth-child(3) {
  transform: translateY(-0.45rem) rotate(-45deg);
  width: 1.8rem;
  background-color: var(--color-bg);
}

/* Typing indicator styles */
.typing-indicator {
  padding: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.typing-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

.typing-indicator__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  max-width: fit-content;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.typing-indicator__user {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.typing-indicator__dots {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.typing-indicator__dots span {
  width: 8px;
  height: 8px;
  background-color: #666;
  /* Darker for better visibility */
  border-radius: 50%;
  display: inline-block;
  animation: typing-bounce 1.4s infinite ease-in-out both;
  will-change: transform;
  /* GPU acceleration */
}

/* Typing indicator dots animation */
@keyframes typing-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }

  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Typing bubble fade in animation */
@keyframes typingBubbleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Typing bubble fade out animation */
@keyframes typingBubbleFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Hide typing indicator when message list is empty */
#messages:empty+.typing-indicator {
  margin-top: var(--space-xl);
}

/* Typing indicator as message bubble */
.message {
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.message--typing {
  opacity: 0;
  animation: typingBubbleFadeIn 0.2s ease-in forwards;
}

.message--typing-fade-out {
  animation: typingBubbleFadeOut 0.2s ease-in forwards !important;
}

.message--typing .message__content {
  /* 
   background-color: #666 !important;
  border-radius: 50%; */
  padding: 12px 16px;
  border-radius: 18px;
  display: inline-block;
}

.message--typing .message__user {
  display: none;
}

.message--typing .typing-indicator__dots {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  min-height: 20px;
  visibility: visible !important;
}

.message--typing .typing-indicator__dots span {
  width: 8px;
  height: 8px;
  background-color: #666 !important;
  border-radius: 50%;
  display: inline-block !important;
  animation: typing-bounce 1.4s infinite ease-in-out both !important;
  animation-play-state: running !important;
}

.message--typing .typing-indicator__dots span:nth-child(1) {
  animation-delay: 0s !important;
}

.message--typing .typing-indicator__dots span:nth-child(2) {
  animation-delay: 0.2s !important;
}

.message--typing .typing-indicator__dots span:nth-child(3) {
  animation-delay: 0.4s !important;
}

/* Enhanced responsive design with better breakpoints */

/* Extra small devices (phones, less than 400px) */
@media (max-width: 399px) {
  :root {
    --space-xs: 0.2rem;
    --space-sm: 0.4rem;
    --space-md: 0.8rem;
    --space-lg: 1.2rem;
    --space-xl: 1.6rem;
  }

  .sidebar .channels-list {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  .sidebar .channel-icon {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
  }

  .emoji-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .message {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* Small devices (phones, 400px to 575px) */
@media (min-width: 400px) and (max-width: 575px) {
  .sidebar {
    inline-size: 100vw;
  }

  .message {
    max-inline-size: 90%;
    padding: var(--space-sm);
  }

  .message__text {
    font-size: 0.9rem;
  }

  .header-title {
    font-size: 1rem;
  }

  .header {
    padding: var(--space-md) var(--space-md);
    padding-top: max(var(--space-md), env(safe-area-inset-top));
  }

  .message-form {
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    flex-wrap: nowrap;
  }

  .message-input {
    font-size: 16px;
    /* Prevent zoom on iOS */
    min-height: 44px;
  }

  .message-form button {
    min-width: 80px;
    padding: var(--space-sm) var(--space-md);
  }

  #messages {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
  }

  .emoji-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Medium devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .sidebar {
    inline-size: var(--sidebar-width-mobile);
  }

  .message {
    max-inline-size: 85%;
  }

  .emoji-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .header {
    padding: var(--space-sm) var(--space-md);
  }

  #messages {
    padding: var(--space-md) var(--space-lg);
  }

  .message-form {
    padding: var(--space-sm) var(--space-md);
  }

  .sidebar {
    inline-size: 60vw;
    max-inline-size: 400px;
  }

  .dialog-content {
    max-height: 80vh;
  }
}

/* Tablets and below (768px and below) */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .hamburger-menu {
    display: flex;
    top: max(var(--space-md), env(safe-area-inset-top));
  }

  .sidebar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    flex-direction: column;
    inline-size: var(--sidebar-width-mobile);
    max-inline-size: 400px;
    block-size: 100vh;
    block-size: 100dvh;
    background: var(--color-bg-light);
    z-index: 1050;
    transform: translateX(100%);
    transition: transform var(--transition-normal) ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    padding: var(--space-xl) var(--space-md);
    padding-top: max(var(--space-xl), calc(env(safe-area-inset-top) + var(--space-md)));
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .main {
    padding-block-start: 0;
    height: 100vh;
    height: 100dvh;
  }

  .header {
    padding: var(--space-md);
    padding-top: max(var(--space-md), calc(env(safe-area-inset-top) + var(--space-xs)));
    padding-inline-end: 4rem;
  }

  .message-form {
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  }

  #messages {
    padding-inline: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .message {
    padding: var(--space-sm);
    max-inline-size: 85%;
  }

  .message__text {
    font-size: var(--font-size-sm);
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
  }

  .sidebar-overlay--visible {
    opacity: 1;
    visibility: visible;
  }
}

/* Tablet-specific optimizations (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .sidebar {
    inline-size: 280px;
  }

  .message {
    max-inline-size: 75%;
  }

  .header {
    padding: var(--space-md) var(--space-lg);
  }

  #messages {
    padding: var(--space-lg) var(--space-xl);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .sidebar {
    inline-size: 300px;
  }

  .message {
    max-inline-size: 70%;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .sidebar {
    inline-size: var(--sidebar-width);
  }

  .message {
    max-inline-size: 65%;
  }

  .header {
    padding: var(--space-xl) var(--space-xl);
  }

  #messages {
    padding: var(--space-xl) 10%;
  }
}

/* Ultra-wide screens (1600px and up) */
@media (min-width: 1600px) {
  .sidebar {
    inline-size: 400px;
  }

  .message {
    max-inline-size: 55%;
  }

  #messages {
    padding: var(--space-xl) 15%;
  }
}

/* Container queries for adaptive components */
@supports (container-type: inline-size) {
  .message-list {
    container-type: inline-size;
    container-name: message-list;
  }

  @container message-list (max-width: 400px) {
    .message {
      padding: var(--space-xs);
    }

    .message .avatar {
      inline-size: 30px;
      block-size: 30px;
    }
  }
}

/* Print styles */
@media print {

  .sidebar,
  .hamburger-menu,
  .message-form,
  .header-actions {
    display: none;
  }

  .main {
    width: 100%;
  }

  .message {
    page-break-inside: avoid;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sidebar .channel-icon {
    border-width: 2px;
  }

  .message {
    border: 2px solid var(--color-border);
  }

  .btn {
    border-width: 2px;
  }
}

/* User search modal for DMs */
.user-search-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg-light);
  border: 3px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 400px;
  max-width: 90vw;
  max-height: 500px;
  display: none;
  flex-direction: column;
  z-index: 1100;
  overflow: hidden;
}

/* Backdrop overlay for modal */
.user-search-modal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.user-search-modal.show {
  display: flex;
  animation: modalFadeIn 0.2s ease;
}

.user-search-modal.show::before {
  opacity: 1;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.user-search-modal__header {
  padding: var(--space-md);
  border-bottom: 2px solid var(--color-border);
  background: var(--color-purple);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-search-modal__close {
  background: none;
  border: none;
  color: var(--color-bg);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  transition: all var(--transition-fast);
}



.user-search-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-search-modal__search {
  padding: var(--space-md);
  border-bottom: 2px solid var(--color-border-light);
  background: var(--color-bg-light)
}

.user-search-modal__search input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: var(--color-bg);
  color: var(--color-text-reversed);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
  font-size: 16px;
}

.user-search-modal__search input:focus {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

.user-search-modal__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-sm);
  background-color: var(--color-bg);
}

/* Message search modal tweaks */
.message-search-modal .message-result-snippet {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.message-search-modal .user-search-modal__user {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.6rem;
}

.message-search-modal .message-result-time {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: 8px;
}

.user-search-modal__user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
  min-height: 52px;
}

.user-search-modal__user:hover {
  background: var(--color-yellow);
  border-color: var(--color-border);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

.user-search-modal__user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-full);
  background: var(--color-blue);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.user-search-modal__user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-full);
}

.user-search-modal__user-info {
  flex: 1;
  min-width: 0;
}

.user-search-modal__user-name {
  font-weight: 600;
  color: var(--color-text-reversed);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-search-modal__user-email {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-search-modal__empty {
  padding: var(--space-xl);
  text-align: center;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.user-search-modal__loading {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Notification settings modal tweaks - reuse user-search-modal styles */
.notif-settings-modal {
  width: 540px;
  /* medium size per request */
  max-width: 96vw;
  max-height: 96vh;
  display: none;
  padding: 0;
  border-radius: 14px;
}

/* Ensure notification settings modal becomes visible when 'show' is added.
   This is needed because .notif-settings-modal previously declared display:none
   later in the stylesheet and could override the generic .user-search-modal.show rule.
*/
.notif-settings-modal.show {
  display: flex;
}

.notif-settings-modal .user-search-modal__header {
  /* keep header style but slightly larger */
  font-size: var(--font-size-lg);
}

.notif-settings__body {
  display: block;
  padding: var(--space-md);
  box-sizing: border-box;
  background: inherit;
}

.notif-settings__left {
  width: 100%;
  display: block;
}

.notif-user-info {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
}

.notif-user-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--space-md);
}

.notif-user-info-left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.notif-user-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.notif-user-name {
  font-weight: 700;
  color: var(--color-text-reversed);
}

.notif-user-email {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.notif-channels-list {
  overflow-y: auto;
  max-height: 64vh;
  padding: var(--space-sm);
}

/* Minimal single-column list for notification modal */
.notif-simple-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.notif-simple-item.selected {
  background: color-mix(in oklch, var(--color-border) 6%, transparent);
}

.notif-simple-item .notif-avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--border-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-blue);
  border: 2px solid var(--color-border);
}

.notif-simple-label {
  font-weight: 600;
  color: var(--color-text-reversed);
}

.notif-simple-divider {
  padding: 10px 12px;
  color: var(--color-text-muted);
  font-weight: 700;
}

.notif-bell-toggle {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

.notif-bell-toggle:focus {
  outline: 2px solid color-mix(in oklch, var(--color-border) 12%, transparent);
}

/* UL/LI single-column list styles */
.notif-simple-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-simple-li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in oklch, var(--color-border) 6%, transparent);
}

.notif-simple-li .notif-simple-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notif-simple-li .notif-simple-label {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Make sure bell is aligned like a small icon button to the left */
.notif-simple-li .notif-bell-toggle {
  font-size: 18px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--color-accent);
}

.notif-simple-li .notif-bell-toggle[aria-pressed="false"] {
  color: var(--color-text-muted);
}

.notif-settings__right {
  width: 56%;
  padding: var(--space-sm) var(--space-md);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

/* Sound toggle button for notification settings */
/* Sound toggle button for notification settings (minimal, robust)
   - Keeps the button circular with a visible border
   - Ensures the SVG icon renders above the muted stripe (::after)
   - Supports both aria-pressed and .muted class states
*/
#sound-toggle {
  position: relative;
  /* create stacking context for pseudo-elements */
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--color-border, #000);
  background: transparent;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.08s ease, color 0.12s ease;
  color: #000;
  /* icon color */
  padding: 0;
  overflow: visible;
}

/* Make sure the SVG sits above the stripe */
#sound-toggle .sound-icon svg {
  position: relative;
  z-index: 3;
  /* above the ::after stripe */
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Muted indicator: thin pink stripe centered across icon (behind SVG) */
#sound-toggle[aria-pressed="true"]::after,
#sound-toggle.muted::after,
.sound-toggle.muted::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(140deg);
  width: 30px;
  height: 4px;
  background: rgba(255, 105, 180, 0.9);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  /* under the svg */

}


.notif-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px dashed var(--color-border-light);
}

.notif-channel-item__label {
  font-weight: 600;
  color: var(--color-text-reversed);
  margin-right: var(--space-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-channel-toggle {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

#start-dm-btn {
  position: relative;
  color: var(--color-text-muted)
}

/* Reply-to-message feature */
/* Reply context shown in message bubble */
.message__reply-context {
  background: rgba(0, 0, 0, 0.05);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.message__reply-context:hover {
  background: rgba(0, 0, 0, 0.08);
}

.message__reply-user {
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 2px;
}

.message__reply-text {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}




/* Reply preview bar at bottom of chat */
.reply-preview {
  display: none;
  background: var(--color-yellow);
  border-top: 2px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  flex-shrink: 0;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.reply-preview.show {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  animation: slideUpBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpBounce {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.reply-preview__icon {
  width: 3px;
  height: 100%;
  padding: 5px;
  border-radius: var(--border-radius-full);
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 5px;

}

.reply-preview__content {
  flex: 1;
  min-width: 0;
  padding-left: var(--space-sm);
}

.reply-preview__user {
  font-weight: 700;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.reply-preview__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-preview__close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  transition: all var(--transition-fast);
  border: 2px solid var(--color-border);
  min-width: 32px;
  min-height: 32px;
}

.reply-preview__close:hover {
  background: var(--color-negative);
  color: var(--color-bg);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--color-border);
}

/* Reply mode active - highlight the message being replied to */
/* Reply mode active - static highlight while replying.
   Animations are intentionally disabled here so that the visual
   arrival/attention animation only runs when animateArrival() is
   explicitly invoked. */
.message--replying-to {
  /* Disable pulsing animation; keep a subtle static highlight */
  animation: none !important;
  position: relative;
  background: color-mix(in oklch, var(--color-yellow) 12%, transparent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.message--replying-to::before {
  /* Static subtle gradient indicator instead of an animated pulse */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: -webkit-fill-available;
  background: linear-gradient(to bottom,
      color-mix(in oklch, var(--color-accent) 28%, transparent) 0%,
      color-mix(in oklch, var(--color-yellow) 22%, transparent) 50%,
      color-mix(in oklch, var(--color-accent) 28%, transparent) 100%);
  border-radius: var(--border-radius-lg);
  animation: none !important;
  opacity: 0.18;
  pointer-events: none;
}

/* Highlight animation for scrolling to message */
.message--highlighted {
  animation: messageHighlight 2s ease-out;
}

@keyframes messageHighlight {

  0%,
  30% {
    background: color-mix(in oklch, var(--color-yellow) 70%, transparent);
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.45);
  }

  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* Arrival animation when jumping to a message (used for search/reply navigation)
   - Subtle lift + scale + warm glow to call attention to the message after it
   has scrolled into view. Respects prefers-reduced-motion. */
.message--arrived {
  animation: messageArrive 1.0s cubic-bezier(0.2, 0.9, 0.2, 1) both;
  position: relative;
  /* make sure z-index applies to the element */
  z-index: 6;
  will-change: transform, box-shadow, background;
}

/* Overlay pseudo-element for strong arrival visual that won't be clipped by
   ancestor stacking contexts. Keeps pointer-events disabled so it doesn't
   interfere with user interaction. */
.message--arrived::after {
  content: "";
  position: absolute;
  inset: -6px;
  /* extend slightly outside for visible glow */
  border-radius: inherit;
  pointer-events: none;
  z-index: 8;
  background: transparent;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  animation: messageArriveOverlay 1s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* Temporary dotted border for arrival emphasis (visible even when themes
   override backgrounds). This is a simple, high-contrast change that will be
   added briefly by JS to draw attention. */
.message--arrived-border {
  /* Intentionally minimal: visual dotted border is rendered via ::before so
     we don't change the element's original border color — only overlay a
     dotted outline that fades. */
  position: relative;
}

/* Dotted outline overlay that fades in/out. Uses the channel's border
   color variable so the color remains the same; only style and opacity
   change. */
.message--arrived-border::before {
  content: "";
  position: absolute;
  inset: -6px;
  /* slightly outside the element so it is clearly visible */
  border-radius: inherit;
  pointer-events: none;
  z-index: 20;
  /* higher so it sits above other overlays */
  border: 5px dotted var(--message-arrival-border-color, var(--color-border));
  opacity: 0;
  transform: scale(1);
  transform-origin: center center;
  animation: messageDottedFade 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin-left: var(--space-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  padding: 0;
}



.send-icon {
  width: 28px;
  height: 28px;
  display: block;
  fill: var(--color-border);
  transition: fill var(--transition-fast);
}

.send-btn:hover .send-icon,
.send-btn:focus .send-icon {
  fill: var(--color-bg);
}


/* Make the element's real border switch to dotted during arrival. We keep
   the original border color and only change the style so the color remains
   the same. We add a short blink using box-shadow to emphasize the change. */
.message--dotted-border {
  border-style: dotted !important;
}

@keyframes messageDottedBlink {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }

  15% {
    box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.28);
  }

  35% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }

  55% {
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.22);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

.message--dotted-border {
  animation: messageDottedBlink 1.2s ease both;
}

@keyframes messageDottedFade {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  /* first blink */
  18% {
    opacity: 1;
    transform: scale(1.03);
  }

  30% {
    opacity: 0;
    transform: scale(1.03);
  }

  /* second blink and hold */
  48% {
    opacity: 1;
    transform: scale(1.03);
  }

  68% {
    opacity: 1;
    transform: scale(1.03);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes messageArriveOverlay {
  0% {
    opacity: 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
  }

  20% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 22px 44px rgba(255, 193, 7, 0.5);
  }

  60% {
    opacity: 0.85;
    transform: scale(1.01);
    box-shadow: 0 10px 26px rgba(255, 193, 7, 0.25);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

@keyframes messageArrive {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
  }

  /* Grow quickly to peak */
  20% {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 20px 44px rgba(255, 193, 7, 0.5);
  }

  /* Hold at peak so it 'sticks' */
  50% {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 18px 40px rgba(255, 193, 7, 0.45);
  }

  /* Relax and return */
  80% {
    transform: translateY(0) scale(1.03);
    box-shadow: 0 10px 26px rgba(255, 193, 7, 0.26);
  }

  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message--arrived {
    animation: none !important;
  }
}

/* Add Reply option to message menu */
.message__menu-item--reply {
  color: var(--color-accent);
}

.message__menu-item--reply:hover {
  background: rgba(255, 105, 180, 0.1);
}

/* ============================================
   NOTIFICATION PROMPT
   ============================================ */

.notification-prompt {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: 4px 4px 0 var(--color-border);
  padding: var(--space-md);
  max-width: 400px;
  z-index: 9999;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.notification-prompt.show {
  transform: translateY(0);
  opacity: 1;
}

.notification-prompt__content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.notification-prompt__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.notification-prompt__text {
  flex: 1;
}

.notification-prompt__text strong {
  display: block;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.notification-prompt__text p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.notification-prompt__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Message search modal small tweaks */
.message-search-modal .message-result-snippet {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.message-search-modal .user-search-modal__user {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.6rem;
}

.message-search-modal .message-result-time {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: 8px;
}

/* Reactions UI */
.message__reactions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text-reversed);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  min-height: 30px;
}

.reaction-chip__emoji {
  font-size: 1.05em;
}

.reaction-chip__count {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.reaction-chip:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
}

.reaction-chip.reacted {
  background: color-mix(in oklch, var(--color-accent) 12%, var(--color-bg));
  border-color: var(--color-border);
}

.reaction-chip.reacted .reaction-chip__count {
  color: var(--color-text-reversed);
}

.reaction-chip--overflow {
  background: transparent;
  border: 1px dashed var(--color-border-light);
  padding: 4px 6px;
}

.reaction-chip--add {
  background: transparent;
  border: 1px dashed var(--color-border-light);
  padding: 4px 8px;
  font-weight: 700;
}

/* Reaction modal overlay */
.reaction-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
}

.reaction-modal {
  background: var(--color-bg-light);
  border: 3px solid var(--color-border);
  border-radius: var(--border-radius-md);
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  padding: var(--space-md);
}

.reaction-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.reaction-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reaction-modal__section {
  border-top: 1px dashed var(--color-border-light);
  padding-top: 8px;
}

.reaction-modal__heading {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reaction-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.reaction-modal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}

.reaction-modal__avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.reaction-modal__name {
  font-weight: 600;
}

/* Emoji picker popover (anchored near the message) */
.emoji-picker-popover {
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 1300;
  /* Prevent the picker from overflowing the viewport: cap height and scroll internally */
  max-width: 360px;
  max-height: 340px;
  overflow: auto;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 4px;
}

.emoji-picker__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 6px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.emoji-picker__item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
  background: var(--color-yellow);
}

@media (max-width: 600px) {
  .emoji-picker-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .emoji-picker-popover {
    max-width: 92vw;
    max-height: 260px;
  }
}



.reaction-chip--add {
  position: absolute;
  bottom: 8px;
  right: 8px;
  filter: opacity(0);
}

.message:hover .reaction-chip--add {
  display: inline-flex;
  filter: opacity(1);
}

.message--sent .reaction-chip--add {
  position: absolute;
  bottom: 8px;
  right: 18px;
  filter: opacity(0);
}

.message--sent:hover .reaction-chip--add {
  display: inline-flex;
  filter: opacity(1);
}

/* ============================================
   INVITE OPTIONS MENU
   ============================================ */
.invite-options-menu {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-gumroad);
  border-radius: 8px;
  padding: var(--space-sm);
  min-width: 200px;
  animation: slideIn 0.2s ease-out;
}

.invite-options-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}

.invite-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg-lighter);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: var(--space-xs);
  transition: all 0.15s ease;
  text-align: left;
}

.invite-option:hover {
  background: var(--color-pink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
}

.invite-option:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.invite-option--close {
  background: var(--color-bg-light);
  margin-top: var(--space-sm);
  border-style: dashed;
}

.invite-option--close:hover {
  background: var(--color-border-light);
}

.channel-invite-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-md);
}

.channel-invite-item {
  display: block;
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg-lighter);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-align: left;
}

.channel-invite-item:hover {
  background: var(--color-blue);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
}

.channel-invite-item:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.channel-invite-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
  }
}

.channel-invite-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================
   DM INVITES BADGE
   ============================================ */
.invites-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-pink);
  color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  box-shadow: var(--shadow-gumroad);
  animation: badgePulse 0.3s ease-out;
}

@keyframes badgePulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   DM ACCEPTED NOTIFICATION
   ============================================ */
.dm-accepted-notification {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-accepted-notification--show {
  opacity: 1;
  transform: translateX(0);
}

.dm-accepted-notification--fade-out {
  opacity: 0;
  transform: translateX(400px);
}

.dm-accepted-notification__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-gumroad);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  min-width: 320px;
  max-width: 400px;
}

.dm-accepted-notification__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.dm-accepted-notification__text {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.dm-accepted-notification__text strong {
  color: var(--color-text);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.dm-accepted-notification__button {
  background: var(--color-pink);
  color: var(--color-bg);
  border: 2px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-primary);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.dm-accepted-notification__button:hover {
  background: var(--color-accent-hover);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gumroad);
}

.dm-accepted-notification__button:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.dm-accepted-notification__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  flex-shrink: 0;
  margin-left: var(--space-xs);
}

.dm-accepted-notification__close:hover {
  color: var(--color-text);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .dm-accepted-notification {
    top: 60px;
    right: 10px;
    left: 10px;
  }

  .dm-accepted-notification__content {
    min-width: auto;
    max-width: none;
    padding: var(--space-sm) var(--space-md);
  }

  .dm-accepted-notification__button {
    padding: var(--space-xs) var(--space-sm);
    font-size: 12px;
  }
}

/* ============================================
   PINNED MESSAGES
   ============================================ */
.pinned-message-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s ease;
}

.pinned-message-item:hover {
  background: var(--color-bg-secondary);
}

.pinned-message-item:last-child {
  border-bottom: none;
}

.pinned-message-content {
  flex: 1;
  min-width: 0;
}

.pinned-message-header {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  align-items: baseline;
}

.pinned-message-text {
  color: var(--color-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pinned-message-actions {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

#view-pinned-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  padding: 4px 8px;
}



textarea#profile-about {
  width: -webkit-fill-available !important;
}


#messages {
  background-color: var(--color-bg-lighter);
  /* Use the slightly darker cream base */
  /* Creates faint diagonal lines */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  /* Low opacity to keep it readable */
  background-repeat: repeat;
  /* Note: If this fades your text too much, you need to apply it to a ::before pseudo-element instead */
}

#message-input {

  background-color: var(--color-bg);

  padding: 2rem;
}


.mention-modal-body {
  padding: 2rem;
  background: var(--color-bg-light);
}




.link-preview link-preview--embed {
  width: -webkit-fill-available;

}