/* ==========================================================================
   OverLoaded Theme (shared across all hub pages)
   URL: /theme/theme.css
   ========================================================================== */

/* ---------------- Tokens ---------------- */
:root {
  /* Colors - OverLoaded dark theme */
  --ol-bg: #0a0b0d;
  --ol-surface-1: #0f1115;
  --ol-surface-2: #13161c;
  --ol-surface-sidebar: #0f1115;
  --ol-surface-rail: #0a0b0d;
  --ol-surface-elevated: #1a1d23; /* User panel, cards that need to stand out */
  --ol-text: #ffffff;
  --ol-text-muted: #ffffff70;
  --ol-text-link: #7aa63a; /* Green primary for links */
  --ol-muted: #ffffff70;
  --ol-border: rgba(255,255,255,0.10);
  --ol-primary: #65882C;
  --ol-primary-2: #7aa63a;
  --ol-ring: rgba(227,229,232,0.20);

  --ol-success: #2db675;
  --ol-danger: #ff5c5c;
  --ol-info: #3aa8ff;
  --ol-warning: #e2a400;

  --ol-hover-bg: rgba(255,255,255,0.04);
  --ol-active-bg: rgba(255,255,255,0.08);
  --ol-interactive: #b5bac1;
  --ol-interactive-hover: #dcddde;
  --ol-interactive-active: #fff;

  /* Type */
  --ol-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ol-font-condensed: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ol-font-mono: Consolas, "Courier New", monospace;
  --ol-fs-base: 16px;
  --ol-fs-xs: 12px;
  --ol-fs-sm: 14px;
  --ol-fs-md: 16px;
  --ol-fs-lg: 20px;
  --ol-fs-xl: 28px;
  --ol-fw-reg: 400;
  --ol-fw-med: 500;
  --ol-fw-bold: 600;

  /* Radius - Discord uses subtle rounded corners */
  --ol-r-4: 4px;
  --ol-r-6: 6px;
  --ol-r-8: 8px;
  --ol-r-12: 12px;
  --ol-r-16: 16px;
  --ol-r-20: 20px;
  --ol-r-round: 50%;

  /* Shadow - Discord's subtle depth */
  --ol-shadow-1: 0 1px 0 rgba(4,4,5,0.2), 0 1.5px 0 rgba(6,6,7,0.05), 0 2px 0 rgba(4,4,5,0.05);
  --ol-shadow-2: 0 2px 10px 0 rgba(0,0,0,0.2);
  --ol-shadow-3: 0 8px 16px rgba(0,0,0,0.24);

  /* Layout / motion */
  --ol-container: 1120px;
  --ol-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ol-t: all .15s var(--ol-ease);
  
  /* Animation timing - consistent across all mobile transitions */
  --ol-mobile-transition-duration: 300ms;
  --ol-mobile-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing scale */
  --s-0: 0px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-72: 72px;
  --s-80: 80px;
  --s-96: 96px;
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ol-font);
  font-size: var(--ol-fs-base);
  line-height: 1.5;
  color: var(--ol-text);
  background: var(--ol-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- Loading Screen (Professional Branded) ---------------- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ol-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  overflow: hidden;
  pointer-events: all;
  touch-action: none;
}

.loading-screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-logo-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
}

.loading-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  opacity: 0.9;
}

.loading-logo-wrapper::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 18px;
  border: 2px solid var(--loading-ring-color, var(--ol-primary));
  opacity: 0;
  animation: loadingPulse 2s ease-in-out infinite;
}

.loading-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ol-muted);
  letter-spacing: 0.02em;
  opacity: 0.6;
  max-width: 300px;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.loading-bar {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 8px;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--ol-primary);
  border-radius: 1px;
  transition: width 0.2s ease-out;
}

.loading-message {
  font-size: 13px;
  color: var(--ol-muted);
  opacity: 0.5;
  margin-top: 8px;
  letter-spacing: 0.01em;
}

@keyframes loadingPulse {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.1);
  }
}

.loading-screen.loaded {
  animation: loadingFadeOut 0.3s ease-out forwards;
  pointer-events: none;
}

.loading-screen.loaded .loading-bar-fill {
  width: 100% !important;
  transition: width 0.15s ease-out;
}

@keyframes loadingFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .loading-logo-wrapper {
    width: 56px;
    height: 56px;
  }
  
  .loading-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  
  .loading-logo-wrapper::after {
    border-radius: 16px;
  }
  
  .loading-title {
    font-size: 15px;
    max-width: 250px;
  }
  
  .loading-bar {
    width: 180px;
  }
  
  .loading-message {
    font-size: 12px;
  }
}

/* ---------------- Discord-Style Skeleton Screens ---------------- */
/* Animated shimmer effect for loading states */

@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.skeleton {
  animation: shimmer 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--ol-bg-secondary) 0%,
    var(--ol-hover) 20%,
    var(--ol-bg-secondary) 40%,
    var(--ol-bg-secondary) 100%
  );
  background-size: 800px 100px;
  border-radius: 4px;
}

/* Skeleton channel list */
.skeleton-channels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.skeleton-channel {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--ol-bg-secondary);
}

.skeleton-channel-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.skeleton-channel-name {
  height: 14px;
  flex: 1;
  border-radius: 4px;
  max-width: 120px;
}

/* Skeleton message list */
.skeleton-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.skeleton-message {
  display: flex;
  gap: 12px;
}

.skeleton-message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-message-header {
  height: 16px;
  width: 140px;
  border-radius: 4px;
}

.skeleton-message-text {
  height: 14px;
  border-radius: 4px;
}

.skeleton-message-text.short {
  width: 60%;
}

.skeleton-message-text.medium {
  width: 80%;
}

.skeleton-message-text.long {
  width: 95%;
}

/* ---------------- Discord-Style Typing Indicators ---------------- */
#typingIndicator {
  padding: 0 16px 8px;
  display: none;
  animation: fadeIn 0.2s ease;
}

.typing-indicator-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ol-muted);
  font-size: 13px;
}

.typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: var(--ol-muted);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}

.typing-text {
  font-weight: 500;
}

/* Discord-style Scroll to Bottom Button */
.scroll-to-bottom-btn {
  position: absolute;
  bottom: 100px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: none;
  color: #4f545c;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 1px 0 rgba(4, 4, 5, 0.2),
    0 1.5px 0 rgba(6, 6, 7, 0.05),
    0 2px 0 rgba(4, 4, 5, 0.05);
  z-index: 10;
  transition: all 0.15s ease-out;
  animation: slideUpBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.95;
  will-change: transform;
}

/* Dark theme variant */
@media (prefers-color-scheme: dark) {
  .scroll-to-bottom-btn {
    background: #2b2d31;
    color: #dbdee1;
    box-shadow: 
      0 1px 0 rgba(0, 0, 0, 0.4),
      0 1.5px 0 rgba(0, 0, 0, 0.15),
      0 2px 0 rgba(0, 0, 0, 0.15);
  }
}

.scroll-to-bottom-btn:hover {
  transform: translateY(-1px);
  opacity: 1;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .scroll-to-bottom-btn:hover {
    background: #35373c;
    box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.4),
      0 4px 8px rgba(0, 0, 0, 0.3);
  }
}

.scroll-to-bottom-btn:active {
  transform: translateY(0);
  transition-duration: 0.05s;
  box-shadow: 
    0 1px 0 rgba(4, 4, 5, 0.2);
}

.scroll-to-bottom-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  transition: transform 0.1s ease;
}

.scroll-to-bottom-btn:hover svg {
  transform: translateY(1px);
}

/* Smooth bounce entrance animation */
@keyframes slideUpBounce {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.05);
  }
  100% {
    opacity: 0.95;
    transform: translateY(0) scale(1);
  }
}

/* Unread count badge on scroll button */
.scroll-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f23f43;
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--ol-bg);
  animation: badgePop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 16px;
}

@keyframes badgePop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

html:has(.loading-screen:not(.loaded)),
body:has(.loading-screen:not(.loaded)) {
  background: var(--ol-bg) !important;
  overflow: hidden;
}

/* Mobile PWA: Match safe area background to loading screen */
@media (max-width: 768px) {
  html:has(.loading-screen:not(.loaded)) {
    background: var(--ol-bg) !important;
  }
  
  body:has(.loading-screen:not(.loaded)) {
    background: var(--ol-bg) !important;
  }
}

/* Global link defaults */
a{
  color: var(--ol-text-link);
  font-size: inherit;
  font-weight: var(--ol-fw-reg);
  text-decoration: none;
  transition: var(--ol-t);
}
a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ol-nav__item, .ol-btn { text-decoration: none !important; }

/* Optional page-level scroll lock */
.ol-no-scroll, .ol-no-scroll html, .ol-no-scroll body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}

/* ---------------- Spacing utilities ---------------- */
.ol-m-0{margin:var(--s-0)} .ol-m-2{margin:var(--s-2)} .ol-m-4{margin:var(--s-4)} .ol-m-6{margin:var(--s-6)} .ol-m-8{margin:var(--s-8)} .ol-m-10{margin:var(--s-10)} .ol-m-12{margin:var(--s-12)} .ol-m-16{margin:var(--s-16)} .ol-m-20{margin:var(--s-20)} .ol-m-24{margin:var(--s-24)} .ol-m-32{margin:var(--s-32)} .ol-m-40{margin:var(--s-40)} .ol-m-48{margin:var(--s-48)} .ol-m-64{margin:var(--s-64)}
.ol-mt-0{margin-top:var(--s-0)} .ol-mt-2{margin-top:var(--s-2)} .ol-mt-4{margin-top:var(--s-4)} .ol-mt-6{margin-top:var(--s-6)} .ol-mt-8{margin-top:var(--s-8)} .ol-mt-10{margin-top:var(--s-10)} .ol-mt-12{margin-top:var(--s-12)} .ol-mt-16{margin-top:var(--s-16)} .ol-mt-20{margin-top:var(--s-20)} .ol-mt-24{margin-top:var(--s-24)} .ol-mt-32{margin-top:var(--s-32)} .ol-mt-40{margin-top:var(--s-40)}
.ol-mb-0{margin-bottom:var(--s-0)} .ol-mb-2{margin-bottom:var(--s-2)} .ol-mb-4{margin-bottom:var(--s-4)} .ol-mb-6{margin-bottom:var(--s-6)} .ol-mb-8{margin-bottom:var(--s-8)} .ol-mb-10{margin-bottom:var(--s-10)} .ol-mb-12{margin-bottom:var(--s-12)} .ol-mb-16{margin-bottom:var(--s-16)} .ol-mb-20{margin-bottom:var(--s-20)} .ol-mb-24{margin-bottom:var(--s-24)} .ol-mb-32{margin-bottom:var(--s-32)} .ol-mb-40{margin-bottom:var(--s-40)}
.ol-ml-4{margin-left:var(--s-4)} .ol-ml-8{margin-left:var(--s-8)} .ol-ml-12{margin-left:var(--s-12)} .ol-ml-16{margin-left:var(--s-16)} .ol-ml-24{margin-left:var(--s-24)}
.ol-mr-4{margin-right:var(--s-4)} .ol-mr-8{margin-right:var(--s-8)} .ol-mr-12{margin-right:var(--s-12)} .ol-mr-16{margin-right:var(--s-16)} .ol-mr-24{margin-right:var(--s-24)}
.ol-mx-8{margin-left:var(--s-8);margin-right:var(--s-8)} .ol-mx-12{margin-left:var(--s-12);margin-right:var(--s-12)} .ol-mx-16{margin-left:var(--s-16);margin-right:var(--s-16)} .ol-mx-24{margin-left:var(--s-24);margin-right:var(--s-24)}
.ol-my-4{margin-top:var(--s-4);margin-bottom:var(--s-4)} .ol-my-8{margin-top:var(--s-8);margin-bottom:var(--s-8)} .ol-my-12{margin-top:var(--s-12);margin-bottom:var(--s-12)} .ol-my-16{margin-top:var(--s-16);margin-bottom:var(--s-16)} .ol-my-24{margin-top:var(--s-24);margin-bottom:var(--s-24)} .ol-my-32{margin-top:var(--s-32);margin-bottom:var(--s-32)}

.ol-p-0{padding:var(--s-0)} .ol-p-4{padding:var(--s-4)} .ol-p-6{padding:var(--s-6)} .ol-p-8{padding:var(--s-8)} .ol-p-10{padding:var(--s-10)} .ol-p-12{padding:var(--s-12)} .ol-p-16{padding:var(--s-16)} .ol-p-20{padding:var(--s-20)} .ol-p-24{padding:var(--s-24)} .ol-p-32{padding:var(--s-32)} .ol-p-48{padding:var(--s-48)}
.ol-pt-4{padding-top:var(--s-4)} .ol-pt-8{padding-top:var(--s-8)} .ol-pt-12{padding-top:var(--s-12)} .ol-pt-16{padding-top:var(--s-16)} .ol-pt-20{padding-top:var(--s-20)} .ol-pt-24{padding-top:var(--s-24)}
.ol-pb-4{padding-bottom:var(--s-4)} .ol-pb-8{padding-bottom:var(--s-8)} .ol-pb-12{padding-bottom:var(--s-12)} .ol-pb-16{padding-bottom:var(--s-16)} .ol-pb-20{padding-bottom:var(--s-20)} .ol-pb-24{padding-bottom:var(--s-24)}
.ol-pl-6{padding-left:var(--s-6)} .ol-pl-8{padding-left:var(--s-8)} .ol-pl-12{padding-left:var(--s-12)} .ol-pl-16{padding-left:var(--s-16)} .ol-pl-24{padding-left:var(--s-24)}
.ol-pr-6{padding-right:var(--s-6)} .ol-pr-8{padding-right:var(--s-8)} .ol-pr-12{padding-right:var(--s-12)} .ol-pr-16{padding-right:var(--s-16)} .ol-pr-24{padding-right:var(--s-24)}
.ol-px-8{padding-left:var(--s-8);padding-right:var(--s-8)} .ol-px-12{padding-left:var(--s-12);padding-right:var(--s-12)} .ol-px-16{padding-left:var(--s-16);padding-right:var(--s-16)} .ol-px-24{padding-left:var(--s-24);padding-right:var(--s-24)}
.ol-py-6{padding-top:var(--s-6);padding-bottom:var(--s-6)} .ol-py-8{padding-top:var(--s-8);padding-bottom:var(--s-8)} .ol-py-10{padding-top:var(--s-10);padding-bottom:var(--s-10)} .ol-py-12{padding-top:var(--s-12);padding-bottom:var(--s-12)} .ol-py-16{padding-top:var(--s-16);padding-bottom:var(--s-16)} .ol-py-24{padding-top:var(--s-24);padding-bottom:var(--s-24)}

.ol-gap-4{gap:var(--s-4)} .ol-gap-6{gap:var(--s-6)} .ol-gap-8{gap:var(--s-8)} .ol-gap-12{gap:var(--s-12)} .ol-gap-16{gap:var(--s-16)} .ol-gap-24{gap:var(--s-24)} .ol-gap-32{gap:var(--s-32)}

/* ---------------- Helpers / Layout ---------------- */
.ol-wrap { max-width: var(--ol-container); margin: 0 auto; padding: 0 24px; }
.ol-center { text-align: center; }
.muted, .ol-muted { color: var(--ol-muted); }

.ol-row { display: flex; }
.ol-col { display: flex; flex-direction: column; }
.ol-center-y { 
  align-items: center;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
/* Fade-out effect for text overflow in rows - only when needed */
.ol-row.ol-center-y::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(20px, 8%, 50px);
  background: linear-gradient(to right, transparent, var(--ol-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ol-row.ol-center-y.has-overflow::after {
  opacity: 1;
}
.ol-center-x { justify-content: center; }
.ol-space-between { justify-content: space-between; }

.ol-grid{display:grid;gap:var(--s-16)}
.ol-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 760px){ .ol-grid--2{grid-template-columns:1fr} }

/* ---------------- Surfaces ---------------- */
.ol-surface {
  background: var(--ol-surface-1);
  border: 1px solid var(--ol-border);
  border-radius: var(--ol-r-8);
  box-shadow: var(--ol-shadow-2);
}
.ol-card { padding: 20px 22px 18px; }
.ol-divider { height: 1px; background: var(--ol-border); width: 100%; }

/* ---------------- Text ---------------- */
.ol-title { font-size: var(--ol-fs-xl); font-weight: var(--ol-fw-bold); margin: 0; }
.ol-subtitle { font-size: var(--ol-fs-lg); color: var(--ol-muted); margin: 0; }
.ol-fine { font-size: var(--ol-fs-xs); }

.ol-condense, h1.ol-condense, h2.ol-condense, h3.ol-condense, h4.ol-condense, h5.ol-condense {
  font-family: var(--ol-font-condensed);
  font-weight: 600;
  line-height: 1.2;
}

/* ---------------- Buttons ---------------- */
.ol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 16px;
  height: 32px;
  border-radius: var(--ol-r-4);
  border: none;
  background: transparent;
  color: var(--ol-interactive);
  text-decoration: none;
  font-weight: var(--ol-fw-med);
  font-size: var(--ol-fs-sm);
  transition: var(--ol-t);
  cursor: pointer;
  line-height: 1;
}
.ol-btn:hover { 
  color: var(--ol-interactive-hover);
  background: var(--ol-hover-bg);
}
.ol-btn--sm{padding:2px 12px;height:28px;font-size:var(--ol-fs-xs)}
.ol-btn--primary { 
  background: var(--ol-primary);
  color: #fff;
}
.ol-btn--primary:hover {
  background: var(--ol-primary-2);
  color: #fff;
}
.ol-btn--subtle { 
  color: var(--ol-interactive);
}
.ol-btn--icon{
  width:32px;
  height:32px;
  padding:0;
  border-radius:var(--ol-r-4);
}

/* ---------------- Forms ---------------- */
.ol-input,
.ol-textarea,
.ol-select {
  width: 100%;
  background: var(--ol-surface-2);
  border: 1px solid rgba(0,0,0,0.3);
  color: var(--ol-text);
  border-radius: var(--ol-r-4);
  padding: 10px;
  font-size: var(--ol-fs-md);
  transition: var(--ol-t);
}
.ol-input::placeholder, .ol-textarea::placeholder { color: var(--ol-muted); }
.ol-input:focus, .ol-textarea:focus, .ol-select:focus { 
  outline: 0; 
  border-color: var(--ol-text-link);
}

/* ---------------- Badges ---------------- */
.ol-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 4px;
  border-radius:var(--ol-r-4);
  background:var(--ol-primary);
  font-size:10px;
  font-weight:600;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* ---------------- Modal System (Global & Reusable) ---------------- */
.ol-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.15s ease-out;
}

.ol-modal.is-open {
  display: flex;
}

.ol-modal__content {
  background: var(--ol-surface-1);
  border-radius: var(--ol-r-8);
  border: 1px solid var(--ol-border);
  box-shadow: var(--ol-shadow-3);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: modalSlideIn 0.2s ease-out;
}

.ol-modal__header {
  padding: 16px 16px 0 16px;
}

.ol-modal__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ol-text);
  margin: 0 0 16px 0;
}

.ol-modal__body {
  padding: 0 16px 16px 16px;
}

.ol-modal__footer {
  padding: 0 16px 16px 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from { 
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile modal adjustments - keep centered, just adjust sizing */
@media (max-width: 768px) {
  .ol-modal {
    padding: 12px;
  }
  
  .ol-modal__content {
    max-width: 100%;
    max-height: calc(100vh - 24px);
  }
}

/* ---------------- Toast Notification System ---------------- */
.ol-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ol-surface-2, #13161c);
  color: var(--ol-text, #ffffff);
  padding: 12px 20px;
  border-radius: var(--ol-r-8, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: calc(100vw - 40px);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

.ol-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ol-toast[data-type="error"] {
  background: #ed4245;
  color: #fff;
}

.ol-toast[data-type="success"] {
  background: var(--ol-primary, #7aa63a);
  color: #fff;
}

.ol-toast[data-type="warning"] {
  background: #f0b232;
  color: #000;
}

.ol-toast[data-type="info"] {
  background: var(--ol-surface-2, #13161c);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------------- Custom Confirm Dialog ---------------- */
.ol-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}

.ol-confirm-overlay.is-visible {
  opacity: 1;
}

.ol-confirm-dialog {
  background: var(--ol-surface-2, #2b2d31);
  border-radius: 8px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.ol-confirm-overlay.is-visible .ol-confirm-dialog {
  transform: scale(1);
}

.ol-confirm-message {
  color: var(--ol-text, #ffffff);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
  white-space: pre-wrap;
}

.ol-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.ol-confirm-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 80px;
}

.ol-confirm-btn-cancel {
  background: transparent;
  color: var(--ol-text, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ol-confirm-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ol-confirm-btn-confirm {
  background: #ed4245;
  color: #fff;
}

.ol-confirm-btn-confirm:hover {
  background: #da373c;
}

.ol-confirm-btn:active {
  transform: scale(0.95);
}

/* ---------------- Markdown Styles (Discord-like) ---------------- */

/* Message bubble - ensure proper formatting for markdown content */
.ol-chat__bubble {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Bold text */
.ol-chat__bubble strong {
  font-weight: 600;
  color: var(--ol-text);
}

/* Italic text */
.ol-chat__bubble em {
  font-style: italic;
}

/* Bold + Italic */
.ol-chat__bubble strong em,
.ol-chat__bubble em strong {
  font-weight: 600;
  font-style: italic;
}

/* Strikethrough */
.ol-chat__bubble del {
  text-decoration: line-through;
  opacity: 0.75;
}

/* Inline code */
.ol-inline-code {
  background: rgba(0, 0, 0, 0.3);
  color: #f0f0f0;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
  font-family: var(--ol-font-mono);
  line-height: 1.125;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Code blocks */
.ol-code-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 0;
  margin: 8px 0;
  overflow: hidden;
  max-width: 100%;
}

.ol-code-block code {
  display: block;
  padding: 10px;
  overflow-x: auto;
  font-family: var(--ol-font-mono);
  font-size: 0.875em;
  line-height: 1.375;
  color: #f0f0f0;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* Code block language label */
.ol-code-lang {
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 10px;
  font-size: 0.75em;
  font-family: var(--ol-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ol-muted);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-weight: 600;
}

/* Block quotes */
.ol-blockquote {
  border-left: 4px solid rgba(79, 84, 92, 1);
  padding-left: 12px;
  margin: 4px 0;
  color: var(--ol-text);
  position: relative;
}

/* Loading spinner for older messages (top of chat) */
.loading-messages-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  color: var(--ol-text-muted);
  font-size: 14px;
  animation: fadeIn 0.2s ease-out;
}

.loading-messages-top .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ol-border);
  border-top-color: var(--ol-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.ol-blockquote::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(79, 84, 92, 1), rgba(79, 84, 92, 0.3));
  border-radius: 2px 0 0 2px;
}

/* Spoilers - Discord style (click to reveal) */
.ol-spoiler {
  background: rgba(0, 0, 0, 0.6);
  color: transparent;
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
  transition: all 0.1s ease;
  user-select: none;
}

.ol-spoiler::selection {
  color: transparent;
  background: rgba(0, 0, 0, 0.6);
}

.ol-spoiler:hover {
  background: rgba(0, 0, 0, 0.8);
}

.ol-spoiler.is-revealed {
  background: rgba(0, 0, 0, 0.3);
  color: var(--ol-text);
  cursor: text;
  user-select: text;
}

.ol-spoiler.is-revealed::selection {
  color: var(--ol-text);
  background: rgba(255, 255, 255, 0.2);
}

/* Links in messages */
.ol-message-link {
  color: var(--ol-text-link);
  text-decoration: none;
  transition: text-decoration 0.1s ease;
}

.ol-message-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Prevent markdown breaking on mobile */
@media (max-width: 768px) {
  .ol-code-block code {
    font-size: 0.8125em;
    padding: 8px;
  }
  
  .ol-inline-code {
    font-size: 0.8125em;
  }
}

/* ---------------- App Shell (Discord-like) ---------------- */
.ol-app{
  display:grid;
  grid-template-columns:72px 240px minmax(0,1fr) 240px;
  grid-template-rows:48px auto;
  height:100vh;
  background:var(--ol-bg);
}

.ol-app__rail{
  grid-row:1 / span 2;
  background:var(--ol-surface-rail);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  gap:8px;
  overflow-y:auto;
  overflow-x:hidden;
}
.ol-app__rail::-webkit-scrollbar { width: 0; }

.ol-guild{
  width:48px;
  height:48px;
  border-radius:50%; /* Full circle by default */
  background:var(--ol-surface-1);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  margin:8px 0; /* Spacing between servers */
  will-change:border-radius; /* GPU acceleration for smooth transitions */
}

/* Prevent icon images from glitching during transitions */
.ol-guild img {
  pointer-events:none; /* Prevent reflows during hover */
  backface-visibility:hidden; /* Prevent flickering */
  transform:translateZ(0); /* Force GPU rendering */
}
.ol-guild:hover{
  border-radius:var(--ol-r-12); /* Squircle on hover */
  background:var(--ol-primary);
}
.ol-guild.is-active{
  border-radius:var(--ol-r-12); /* Squircle when active */
  background:var(--ol-primary);
}
.ol-guild.is-active::before{
  content:'';
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
  width:4px; /* Thinner pill */
  height:40px;
  background:#fff;
  border-radius:0 4px 4px 0;
  animation:slideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Unread indicator (left pill - hidden for now, can be used later) */
.ol-guild:not(.is-active)::before{
  content:'';
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:8px;
  background:#fff;
  border-radius:0 4px 4px 0;
  opacity:0;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ol-guild:not(.is-active):hover::before{
  height:20px;
  opacity:1;
}
.ol-guild.dragging{
  opacity:0.5;
  cursor:grabbing;
  transform:scale(1.05);
}

/* Server unread indicator (white dot - Discord style) */
.server-unread-dot{
  position:absolute;
  bottom:0;
  right:0;
  width:16px;
  height:16px;
  background:#fff;
  border:3px solid var(--ol-background-0); /* Background color border for separation */
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}

@keyframes slideIn {
  from {
    height: 8px;
  }
  to {
    height: 40px;
  }
}

.ol-app__sidebar{
  grid-column:2;
  grid-row:1 / span 2;
  background:var(--ol-surface-sidebar);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow: hidden; /* Prevent overflow, let ol-scroll handle it */
}

.ol-sidebar-header{
  padding:12px 16px;
  border-bottom:1px solid var(--ol-border);
  box-shadow:var(--ol-shadow-1);
  font-weight:600;
  font-size:15px;
  color:var(--ol-text);
  cursor:pointer;
  transition:var(--ol-t);
  flex-shrink: 0; /* Don't shrink header */
  min-height: 48px; /* Maintain height even when empty */
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
/* Fade-out gradient for server title overflow */
.ol-sidebar-header.has-overflow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(20px, 8%, 50px);
  background: linear-gradient(to right, transparent, var(--ol-surface-sidebar));
  pointer-events: none;
  opacity: 1;
}
.ol-sidebar-header:hover{
  background:var(--ol-hover-bg);
}

.ol-app__topbar{
  grid-column:3 / span 2;
  background:var(--ol-bg);
  border-bottom:1px solid var(--ol-border);
  box-shadow:var(--ol-shadow-1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  height:48px;
}

.ol-app__chat{
  grid-column:3;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--ol-bg);
  padding:0;
  position: relative; /* For scroll button positioning */
}

.ol-app__members{
  grid-column:4;
  background:var(--ol-surface-sidebar);
  overflow-y:auto;
  overflow-x:hidden;
  user-select: none; /* Prevent text selection in entire members list */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.ol-app__members::-webkit-scrollbar { width: 4px; }
.ol-app__members::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 4px; }

/* Channel list */
.ol-channel-group{
  padding:16px 8px 4px 16px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--ol-muted);
}

.ol-channel{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  margin:1px 8px;
  border-radius:var(--ol-r-4);
  color:var(--ol-interactive);
  cursor:pointer;
  font-size:15px;
  transition: background-color .15s var(--ol-ease), color .15s var(--ol-ease), max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  position:relative;
  max-height: 36px;
  opacity: 1;
  overflow: hidden;
  /* DISCORD: GPU acceleration for smooth channel list scrolling */
  will-change: background-color, transform;
  transform: translateZ(0);
}
.ol-channel:hover{
  background:var(--ol-hover-bg);
  color:var(--ol-interactive-hover);
}
.ol-channel.is-active{
  background:var(--ol-active-bg);
  color:var(--ol-interactive-active);
}
.ol-channel.is-active::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  background:var(--ol-text-link);
  border-radius:0 2px 2px 0;
}

/* Unread channel styling */
.ol-channel.has-unread{
  color: var(--ol-text);
  font-weight: 600;
}

.ol-channel.has-unread::after{
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--ol-text);
  border-radius: 50%;
}

.ol-channel.is-active.has-unread{
  color: var(--ol-interactive-active);
}

.ol-channel.is-active.has-unread::after{
  background: var(--ol-interactive-active);
}

/* Show unread channels and active channel even in collapsed categories with smooth animation */
.category-section.collapsed .ol-channel:not(.has-unread):not(.is-active){
  max-height: 0;
  opacity: 0;
  margin: 0 8px;
  padding: 0 8px;
  overflow: hidden;
}

.category-section.collapsed .ol-channel.has-unread,
.category-section.collapsed .ol-channel.is-active{
  max-height: 36px;
  opacity: 1;
}

/* New messages banner */
.new-messages-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ol-primary);
  color: #fff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.new-messages-banner:hover {
  background: var(--ol-primary-2);
}

.new-messages-banner:active {
  transform: scale(0.99);
}

.new-messages-banner__text {
  flex: 1;
}

.new-messages-banner__close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-left: 8px;
}

.new-messages-banner__close:hover {
  background: rgba(0,0,0,0.3);
}

/* Chat messages - DISCORD: GPU-accelerated for buttery smooth scrolling */
.ol-chat__message{
  padding: 8px 16px;
  padding-right: 16px;
  margin-top: 16px;
  display: flex;
  gap: 16px;
  transition: background 0.06s ease;
  position: relative;
  /* DISCORD TRICK: Force GPU acceleration */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.ol-chat__message:hover{
  background: var(--ol-hover-bg);
}

.ol-chat__avatar{
  width: 40px;
  height: 40px;
  border-radius: var(--ol-r-round);
  background: var(--ol-primary);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Discord-style lazy loading states */
.ol-chat__avatar.lazy-loading::before,
.lazy-image.lazy-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ol-surface-2);
  animation: pulse 1.5s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ol-chat__avatar.lazy-loaded,
.lazy-image.lazy-loaded {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ol-chat__avatar.lazy-error,
.lazy-image.lazy-error {
  background: var(--ol-surface-2);
}

.ol-chat__content{
  flex:1;
  min-width:0;
}

.ol-chat__meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
  flex-wrap:nowrap;
}

.ol-chat__author{
  font-weight:500;
  font-size:15px;
  color:var(--ol-text);
  flex-shrink:0;
}

.ol-chat__timestamp{
  font-size:12px;
  color:var(--ol-muted);
  font-weight:400;
  flex-shrink:0;
  white-space:nowrap;
}

.ol-chat__bubble{
  color:var(--ol-text);
  font-size:15px;
  line-height:1.375;
  margin:0;
  word-wrap:break-word;
}

/* ---------------- Home Page Components ---------------- */

/* User panel - Discord-style floating card */
.user-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--ol-surface-elevated); /* Elevated surface for visual hierarchy */
  margin: 0;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.user-panel:hover {
  background: #1e212a; /* Slightly lighter on hover */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.user-panel:active {
  background: #171a20; /* Slightly darker on press */
  transform: translateY(1px);
}
.user-panel__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ol-primary);
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.user-panel__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.user-panel__name {
  font-size: 14px;
  font-weight: 600;
  color: #f2f3f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 18px;
}
.user-panel__status {
  font-size: 12px;
  color: #949ba4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 13px;
}
.user-panel__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.user-panel__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: #b5bac1;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.15s ease;
  padding: 0;
}
.user-panel__btn:hover {
  background: rgba(79,84,92,0.3);
  color: #dbdee1;
}

/* ==========================================================================
   Auth Modal - Sign In / Sign Up
   ========================================================================== */

.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal.is-open {
  display: flex;
}

.auth-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.auth-modal-content {
  position: relative;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  padding: 32px;
}

/* Auth form container */
.auth-modal .auth-container {
  width: 100%;
  max-width: 100%;
}

.auth-modal .auth-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Auth header */
.auth-modal .auth-header {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.auth-modal .auth-icon {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.auth-modal .auth-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--ol-text);
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Form elements */
.auth-modal .form-group {
  margin-bottom: 16px;
}

.auth-modal .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
  letter-spacing: 0;
}

.auth-modal .form-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px;
  color: var(--ol-text) !important;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.auth-modal .form-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.5);
}

.auth-modal .form-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
}

.auth-modal .form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Auth button group */
.auth-modal .auth-button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Auth button styles */
.auth-modal .auth-btn,
.auth-modal button[type="submit"],
.auth-modal .instance-realm__enter {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--ol-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%;
  outline: none;
  box-sizing: border-box;
}

.auth-modal .auth-btn:hover,
.auth-modal button[type="submit"]:hover,
.auth-modal .instance-realm__enter:hover {
  background: var(--ol-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.auth-modal .auth-btn:active,
.auth-modal button[type="submit"]:active,
.auth-modal .instance-realm__enter:active {
  transform: translateY(0);
}

.auth-modal .auth-btn:disabled,
.auth-modal button[type="submit"]:disabled,
.auth-modal .instance-realm__enter:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Discord icon */
.auth-modal .discord-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Divider */
.auth-modal .divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.auth-modal .divider::before,
.auth-modal .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-modal .divider span {
  padding: 0 12px;
  color: var(--ol-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

/* Error message */
.auth-modal .error-message {
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(237, 66, 69, 0.1);
  border: 1px solid rgba(237, 66, 69, 0.3);
  border-radius: 4px;
  color: #ed4245;
  font-size: 13px;
  transition: all 0.2s ease;
}

.auth-modal .error-message.hidden {
  display: none;
}

/* Toggle text */
.auth-modal .toggle-text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--ol-muted);
}

.auth-modal .toggle-text a {
  color: var(--ol-text);
  text-decoration: none;
  font-weight: 500;
}

.auth-modal .toggle-text a:hover {
  text-decoration: underline;
}

/* Form hint text */
.auth-modal .form-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ol-muted);
}

/* Back link */
.auth-modal .auth-back-link {
  text-align: center;
  margin-top: 16px;
}

.auth-modal .auth-back-link a {
  color: var(--ol-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.auth-modal .auth-back-link a:hover {
  color: var(--ol-text);
}

/* Hidden utility */
.auth-modal .hidden {
  display: none !important;
}



.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 4px;
  color: var(--ol-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10;
}

.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ol-text);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Mobile responsive */
@media (max-width: 640px) {
  .auth-modal-content {
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    animation: slideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 24px 20px;
  }
  
  .auth-modal .auth-header {
    margin-bottom: 24px;
    gap: 12px;
  }
  
  .auth-modal .auth-icon {
    width: 64px;
    height: 64px;
  }
  
  .auth-modal .auth-title {
    font-size: 24px;
  }
  
  .auth-modal .auth-button-group {
    margin-top: 16px;
  }
  
  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Channel header */
.channel-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f2f3f5;
  font-weight: 600;
  font-size: 16px;
}
.channel-header__hash {
  color: #80848e;
  font-size: 20px;
  font-weight: 400;
}

/* Toolbar icons */
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.toolbar__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b5bac1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.toolbar__icon:hover {
  color: #dbdee1;
}
.toolbar__icon svg {
  width: 20px;
  height: 20px;
}

/* Members sidebar */
.members-section {
  padding: 24px 8px 8px 16px;
  will-change: transform;
}
.members-section__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ol-muted);
  padding: 0 8px 4px 0;
  margin-bottom: 8px;
  transition: color 0.15s ease;
}
.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
  margin-bottom: 1px;
  will-change: transform, opacity;
  transform: translateZ(0); /* GPU acceleration */
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.member-item:hover {
  background: var(--ol-hover-bg);
}
.member-item__avatar-wrapper {
  width: 32px;
  height: 32px;
  position: relative;
  flex-shrink: 0;
}
.member-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ol-primary);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  transition: opacity 0.15s ease;
}
.member-item__status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid var(--ol-surface-sidebar);
  transition: background 0.2s ease, transform 0.15s ease;
  will-change: background;
}
.member-item__status--online {
  background: #23a559;
  box-shadow: 0 0 0 2px var(--ol-surface-sidebar), 0 0 4px rgba(35, 165, 89, 0.3);
  animation: statusPulse 0.6s ease-out;
}
.member-item__status--idle {
  background: #f0b232;
  box-shadow: 0 0 0 2px var(--ol-surface-sidebar), 0 0 4px rgba(240, 178, 50, 0.3);
  animation: statusPulse 0.6s ease-out;
}
.member-item__status--offline {
  background: #80848e;
}

/* Pulse animation for status changes (Discord-style) */
@keyframes statusPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--ol-surface-sidebar), 0 0 4px rgba(35, 165, 89, 0.3);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--ol-surface-sidebar), 0 0 8px rgba(35, 165, 89, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--ol-surface-sidebar), 0 0 4px rgba(35, 165, 89, 0.3);
  }
}
.member-item__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ol-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* Hover effects for member items (Discord-style) */
.member-item:hover .member-item__name {
  color: var(--ol-text-bright);
}
.member-item:hover .member-item__avatar {
  opacity: 0.85;
}

/* Members empty state */
.members-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--ol-muted);
}
.members-empty__icon {
  margin-bottom: 12px;
  opacity: 0.5;
}
.members-empty__text {
  font-size: 14px;
  font-weight: 500;
}

/* Mobile back button */
.mobile-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: #f2f3f5;
  cursor: pointer;
  font-size: 20px;
  margin-right: 4px;
  padding: 0;
  flex-shrink: 0;
}

/* User panel wrapper - Desktop: floating Discord-style card */
.user-panel-wrapper {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  flex-shrink: 0; /* Don't shrink */
  z-index: 10; /* Above scroll content */
}

/* Desktop: Add scrollable container for channels */
.ol-app__sidebar .ol-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Allow flex shrinking */
  /* Reserve space for user panel */
  padding-bottom: 64px;
}

/* Mobile bottom navigation - Discord style */
.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  /* Hide desktop user panel on mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile bottom nav - ALWAYS VISIBLE */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--ol-surface-1);
    border-top: 1px solid var(--ol-border);
    z-index: 50; /* BELOW chat (chat is z-index 100) so chat overlaps it */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  }
  
  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--ol-interactive);
    cursor: pointer;
    padding: 8px;
    transition: all 0.15s ease;
    position: relative;
  }
  
  .mobile-nav-btn.active {
    color: var(--ol-text);
  }
  
  .mobile-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--ol-primary);
    border-radius: 0 0 2px 2px;
  }
  
  .mobile-nav-icon {
    width: 24px;
    height: 24px;
    color: inherit;
  }
  
  .mobile-nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ol-primary);
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
  }
  
  .mobile-nav-btn.active .mobile-nav-avatar {
    border-color: var(--ol-primary);
  }
  
  .mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
  }
}

/* Responsive - Desktop first, then tablet, then mobile */
@media (max-width: 1100px){
  .ol-app{
    grid-template-columns:72px 240px minmax(0,1fr);
  }
  .ol-app__topbar{
    grid-column:3;
  }
  .ol-app__members{
    display:none;
  }
}

@media (max-width: 768px){
  /* Reset grid to static positioning for mobile */
  .ol-app {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  /* Default: body background matches user panel for server/channel view */
  body {
    background: var(--ol-surface-sidebar) !important;
    transition: background var(--ol-mobile-transition-duration) var(--ol-mobile-transition-ease);
  }
  
  /* When in chat view: body background matches chat (dark) */
  body.mobile-view-chat {
    background: var(--ol-bg) !important;
  }

  /* Hide everything by default */
  .ol-app__rail,
  .ol-app__sidebar,
  .ol-app__topbar,
  .ol-app__chat,
  .ol-app__members {
    position: absolute;
    display: none;
  }

  /* Show mobile back button */
  .mobile-back-btn {
    display: flex;
  }

  /* Mobile View: Servers + Channels - ALWAYS VISIBLE AS BASE LAYER */
  .ol-app__rail {
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    bottom: 48px; /* Reserve space for bottom nav */
    width: 72px;
    z-index: 1;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: 8px; /* Small padding at bottom */
    /* Explicit background so body color doesn't show through */
    background: var(--ol-surface-rail);
  }
  
  .ol-app__sidebar {
    display: flex;
    flex-direction: column;
    left: 72px;
    right: 0;
    top: 0;
    bottom: 48px; /* Reserve space for bottom nav */
    z-index: 1;
    /* Explicit background so body color doesn't show through */
    background: var(--ol-surface-sidebar);
  }

  .ol-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: env(safe-area-inset-top, 0px) 16px 0 16px; /* No bottom padding */
    margin-bottom: 0;
    background: var(--ol-surface-sidebar);
    border-bottom: 1px solid var(--ol-border);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
  }

  /* Mobile View: Chat Layer - SITS ON TOP, CAN BE SWIPED */
  .mobile-view-chat .ol-app__topbar {
    position: fixed; /* CRITICAL: Always fixed to prevent flicker */
    display: flex;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 100;
    padding: env(safe-area-inset-top, 0px) 8px 0 8px;
    background: var(--ol-bg);
    border-bottom: 1px solid var(--ol-border);
    box-shadow: var(--ol-shadow-1);
    /* Smooth transition for top changes (Discord-style) */
    transition: top 0.2s ease-out;
  }
  
  .mobile-view-chat .ol-app__chat {
    position: fixed; /* CRITICAL: Always fixed to prevent flicker */
    display: flex;
    flex-direction: column;
    left: 0;
    right: 0;
    top: calc(56px + env(safe-area-inset-top, 0px));
    bottom: 0; /* No bottom nav in chat view - input goes to absolute bottom */
    z-index: 100;
    background: var(--ol-bg);
    will-change: transform;
    /* Smooth transition for top changes (Discord-style) */
    transition: top 0.2s ease-out;
  }
  
  /* CRITICAL iOS FIX: When keyboard is open, topbar must stay fixed to VISUAL viewport */
  /* This is controlled by JavaScript using Visual Viewport API (Discord-style fix) */
  /* The JS will apply inline styles that override these when keyboard opens */
  
  /* Prevent body scroll/shift in mobile chat view */
  .mobile-view-chat {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Swipe reveal effect - chat slides over to reveal server/channel list */
  .mobile-view-chat.is-swiping .ol-app__chat,
  .mobile-view-chat.is-swiping .ol-app__topbar {
    transition: none !important;
  }

  /* Consistent animation timing for ALL mobile transitions */
  .mobile-view-chat:not(.is-swiping) .ol-app__chat,
  .mobile-view-chat:not(.is-swiping) .ol-app__topbar {
    transition: transform var(--ol-mobile-transition-duration) var(--ol-mobile-transition-ease);
  }
  
  /* Scroll container - add bottom padding for mobile nav clearance */
  .ol-app__sidebar .ol-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 128px !important; /* Extra padding so bottom nav doesn't cover channels */
    background: var(--ol-surface-sidebar) !important;
    min-height: 0 !important;
  }

  /* Mobile chat adjustments */
  .mobile-view-chat .ol-chat__message {
    padding: 12px 16px;
    margin-top: 0;
  }

  .mobile-view-chat .ol-chat__message:first-child {
    margin-top: 16px;
  }
}

/* PWA-specific: Tighter spacing */
@media (max-width: 768px) and (display-mode: standalone) {
  .mobile-bottom-nav {
    box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
  }
  
  .ol-sidebar-header {
    padding-bottom: 8px !important;
  }
}

@media (min-width: 769px) {
  .user-panel-wrapper {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }
  .mobile-back-btn {
    display: none !important;
  }
  .mobile-bottom-nav {
    display: none !important; /* Hide mobile bottom nav on desktop */
  }
}

/* ---------------- Motion Safety ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Page lock */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent double-tap zoom */
* {
  touch-action: manipulation;
}

.ol-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* CRITICAL: Allow horizontal swipes on sidebar in mobile server view for forward swipe gesture */
@media (max-width: 768px) {
  .mobile-view-servers .ol-app__sidebar .ol-scroll {
    touch-action: pan-x pan-y !important;
  }
  
  .mobile-view-servers .ol-app__sidebar {
    touch-action: pan-x pan-y !important;
  }
}

.ol-scroll::-webkit-scrollbar { width: 8px; }
.ol-scroll::-webkit-scrollbar-track { background: transparent; }
.ol-scroll::-webkit-scrollbar-thumb { 
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  min-height: 40px;
}
.ol-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); }

/* CRITICAL: Allow text input on mobile */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

/* Remove global user-select blocking */
html, body {
  -webkit-user-select: auto;
  user-select: auto;
}

/* ==========================================================================
   iOS PWA Input Fix
   ========================================================================== */

/* Override global touch/select restrictions for inputs */
input,
textarea,
select,
.ol-input,
.ol-textarea,
.ol-select,
.message-input {
  -webkit-user-select: text !important;
  user-select: text !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure input containers don't block interaction */
.message-input-wrapper,
.message-input-container,
.ol-field {
  touch-action: auto !important;
}

/* ================= Markdown (Discord-like) ================= */
.ol-md {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Headings inside bubbles */
.ol-md h1, .ol-md h2, .ol-md h3, .ol-md h4, .ol-md h5, .ol-md h6 {
  margin: 8px 0 6px;
  font-weight: 600;
}
.ol-md h1 { font-size: 18px; }
.ol-md h2 { font-size: 16px; }
.ol-md h3, .ol-md h4, .ol-md h5, .ol-md h6 { font-size: 15px; }

/* Paragraphs and spacing */
.ol-md p { margin: 6px 0; }
.ol-md ul { margin: 6px 0 6px 18px; padding: 0; }
.ol-md li { margin: 4px 0; }

/* Links */
.ol-md a {
  color: var(--ol-text-link);
  text-decoration: none;
}
.ol-md a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Inline code + fenced code */
.ol-md .md-code {
  font-family: var(--ol-font-mono);
  font-size: 0.95em;
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
}
.ol-md .md-pre {
  margin: 8px 0;
  padding: 0;
  background: var(--ol-surface-1);
  border: 1px solid var(--ol-border);
  border-radius: 8px;
  overflow: auto;
}
.ol-md .md-pre > .md-code {
  display: block;
  padding: 10px 12px;
  background: transparent;
  border: 0;
}

/* Blockquotes */
.ol-md .md-quote {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  color: var(--ol-text);
}

/* Spoilers */
.ol-md .md-spoiler {
  background: #202225;
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  position: relative;
  cursor: pointer;
}
.ol-md .md-spoiler::before {
  content: "Spoiler";
  color: #b9bbbe;
  position: relative;
}
.ol-md .md-spoiler.revealed {
  background: rgba(255,255,255,0.08);
  color: var(--ol-text);
}
.ol-md .md-spoiler.revealed::before { content: ""; }

/* Make sure bubbles still look right on mobile */
@media (max-width: 768px) {
  .mobile-view-chat .ol-chat__message {
    padding: 12px 16px;
  }
}

/* ==========================================================================
   Profile Modal - Username Management
   ========================================================================== */

/* Username tag container - ensure it doesn't overflow */
.profile-modal-user-tag-container {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0; /* Allow flexbox to shrink children */
}

.profile-modal-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Allow text truncation */
}

/* Show username edit button */
.show-username-btn {
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--ol-muted);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0; /* Never shrink the button */
  min-width: 22px; /* Ensure button is never cut off */
  min-height: 22px;
}

.show-username-btn:hover {
  background: var(--ol-hover-bg);
  color: var(--ol-text);
}

.show-username-btn:active {
  transform: scale(0.95);
}

/* Username change container animation */
#usernameChangeContainer {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

#usernameChangeContainer[style*="display: block"] {
  opacity: 1;
  max-height: 500px;
}

/* Username edit section */
.username-edit-section {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: stretch; /* Ensure both items stretch to same height */
}

.username-input {
  flex: 1;
  min-width: 0; /* Allow input to shrink below content size */
  background: var(--ol-surface-2);
  border: 1px solid var(--ol-border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--ol-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.username-input:focus {
  outline: none;
  border-color: var(--ol-text-link);
}

.username-input::placeholder {
  color: var(--ol-muted);
}

.username-change-btn {
  padding: 8px 12px; /* Reduced from 8px 16px */
  background: var(--ol-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0; /* Never shrink the button */
  min-width: fit-content; /* Ensure button fits its content */
}

.username-change-btn:hover:not(:disabled) {
  background: var(--ol-primary-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(101, 136, 44, 0.3);
}

.username-change-btn:active:not(:disabled) {
  transform: translateY(0);
}

.username-change-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.username-error {
  font-size: 12px;
  color: #ff4545;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(255, 69, 69, 0.1);
  border-radius: 4px;
}

.username-success {
  font-size: 12px;
  color: #3ba55d;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(59, 165, 93, 0.1);
  border-radius: 4px;
}

.username-hint {
  font-size: 11px;
  color: var(--ol-muted);
  line-height: 1.4;
}

/* ==========================================================================
   Confirmation Modal (Discord-style)
   ========================================================================== */
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.confirm-modal.is-open {
  display: flex;
}

.confirm-modal-content {
  background: var(--ol-surface-1);
  border-radius: 8px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: confirmModalSlideIn 0.15s ease-out;
}

@keyframes confirmModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.confirm-modal-header {
  padding: 24px 24px 16px 24px;
}

.confirm-modal-header h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ol-text);
  margin: 0;
}

.confirm-modal-body {
  padding: 0 24px 24px 24px;
}

.confirm-modal-body p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ol-muted);
  margin: 0 0 12px 0;
}

.confirm-modal-body p:last-child {
  margin-bottom: 0;
}

.confirm-modal-body strong {
  color: var(--ol-text);
  font-weight: 600;
}

.confirm-modal-warning {
  font-size: 14px !important;
  color: var(--ol-danger) !important;
  font-weight: 500;
}

.confirm-modal-actions {
  padding: 16px;
  background: var(--ol-bg);
  border-radius: 0 0 8px 8px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-modal-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
  font-family: var(--ol-font);
}

.confirm-modal-btn-cancel {
  background: transparent;
  color: var(--ol-text);
}

.confirm-modal-btn-cancel:hover {
  background: var(--ol-hover-bg);
  text-decoration: underline;
}

.confirm-modal-btn-danger {
  background: var(--ol-danger);
  color: white;
}

.confirm-modal-btn-danger:hover {
  background: #e04b4b;
}

.confirm-modal-btn-danger:active {
  background: #c93f3f;
}

/* ==========================================================================
   Profile Modal Styles
   ========================================================================== */

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}

.profile-modal.is-open {
  display: block;
}

.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-modal.is-open .profile-modal-backdrop {
  opacity: 1;
}

.profile-modal-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 312px; /* 72px (rail) + 240px (sidebar) = 312px */
  /* Premium Liquid Glass Effect - Intricate Background Visible */
  background: rgba(10, 12, 16, 0.45);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 2px 0 0 rgba(255, 255, 255, 0.15) inset;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.profile-modal.is-open .profile-modal-content {
  transform: translateY(0);
}

.profile-modal-header {
  position: relative;
  padding-bottom: 16px;
}

.profile-modal-banner {
  width: 100%;
  height: 100px;
  background: linear-gradient(135deg, var(--ol-primary) 0%, var(--ol-primary-2) 100%);
  position: relative;
}

.profile-modal-avatar-wrapper {
  position: absolute;
  bottom: -40px;
  left: 16px;
  padding: 6px;
  background: var(--ol-surface-1);
  border-radius: 50%;
}

.profile-modal-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ol-primary);
  object-fit: cover;
  display: block;
}

.profile-modal-body {
  padding: 48px 16px 16px 16px;
  flex: 1;
  overflow-x: hidden;
  min-width: 0;
}

.profile-modal-section {
  margin-bottom: 16px;
}

.profile-modal-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ol-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.profile-username-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-modal-username-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--ol-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
  line-height: 1.2;
}

.show-username-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ol-secondary-bg);
  border: none;
  border-radius: 4px;
  color: var(--ol-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.show-username-btn:hover {
  background: var(--ol-hover-bg);
  color: var(--ol-text);
}

.profile-modal-tag {
  font-size: 14px;
  color: var(--ol-muted);
  margin-top: 4px;
  line-height: 1.2;
}

.profile-modal-divider {
  height: 1px;
  background: var(--ol-border);
  margin: 16px 0;
}

.profile-modal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ol-surface-2);
  border-radius: 6px;
  color: var(--ol-text);
  font-size: 14px;
  font-weight: 500;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-online {
  background: #23a559;
}

.profile-modal-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-modal-settings {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ol-surface-1);
  color: var(--ol-text);
  border: 1px solid var(--ol-border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-modal-settings:hover {
  background: var(--ol-surface-2);
  border-color: var(--ol-primary);
}

.profile-modal-settings:active {
  transform: translateY(0);
}

/* ==========================================================================
   User Profile Modal (Discord-style popup for any user)
   ========================================================================== */

.user-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 10000; /* Above everything */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.user-profile-modal.is-open {
  display: flex;
  pointer-events: auto;
}

.user-profile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.user-profile-modal__content {
  position: relative;
  width: 340px;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--ol-surface-1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-profile-modal__header {
  position: relative;
  padding-bottom: 16px;
  flex-shrink: 0;
}

.user-profile-modal__banner {
  width: 100%;
  height: 100px;
  background: linear-gradient(135deg, var(--ol-primary) 0%, var(--ol-primary-2) 100%);
  position: relative;
}

.user-profile-modal__avatar-wrapper {
  position: absolute;
  bottom: -40px;
  left: 16px;
  padding: 6px;
  background: var(--ol-surface-1);
  border-radius: 50%;
}

.user-profile-modal__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ol-primary);
  object-fit: cover;
  display: block;
}

.user-profile-modal__body {
  padding: 48px 16px 16px 16px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.user-profile-modal__section {
  margin-bottom: 16px;
}

.user-profile-modal__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ol-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.user-profile-modal__display-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ol-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.user-profile-modal__username {
  font-size: 14px;
  color: var(--ol-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 4px;
  line-height: 1.2;
}

.user-profile-modal__divider {
  height: 1px;
  background: var(--ol-border);
  margin: 16px 0;
}

.user-profile-modal__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ol-surface-2);
  border-radius: 6px;
  color: var(--ol-text);
  font-size: 14px;
  font-weight: 500;
}

.user-profile-modal__status--online {
  background: #23a559;
}

.user-profile-modal__status--idle {
  background: #f0b232;
}

.user-profile-modal__status--offline {
  background: #80848e;
}

.user-profile-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 4px;
  color: #dbdee1;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10;
}

.user-profile-modal__close:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}

.user-profile-modal__menu {
  position: absolute;
  top: 8px;
  right: 48px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 4px;
  color: #dbdee1;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10;
}

.user-profile-modal__menu:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}

.user-profile-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--ol-muted);
  font-size: 14px;
}

.user-profile-modal__error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--ol-error);
  font-size: 14px;
  text-align: center;
}

/* Mobile adjustments - Discord-style centered modal */
@media (max-width: 768px) {
  .user-profile-modal__content {
    width: 85%; /* Better UX: Not full width, centered with margins */
    max-width: 360px;
    border-radius: 12px;
    margin: 0 16px; /* Spacing from edges */
  }
  
  .user-profile-modal__close {
    background: rgba(0, 0, 0, 0.6);
    width: 36px;
    height: 36px;
  }
  
  .user-profile-modal__close:active {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .user-profile-modal__banner {
    height: 80px; /* Slightly shorter on mobile */
  }
  
  .user-profile-modal__avatar {
    width: 64px; /* Slightly smaller on mobile */
    height: 64px;
  }
  
  .user-profile-modal__avatar-wrapper {
    padding: 4px;
  }
}

/* Prevent body scrolling when modal is open */
body.user-profile-modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Create Server Modal Styles
   ========================================================================== */

.create-server-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.create-server-modal.is-open {
  display: flex;
}

.create-server-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.create-server-modal-content {
  position: relative;
  background: var(--ol-surface-1);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.create-server-modal.is-open .create-server-modal-content {
  transform: scale(1);
}

.create-server-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ol-text);
  margin-bottom: 8px;
  text-align: center;
}

.create-server-modal-subtitle {
  font-size: 14px;
  color: var(--ol-muted);
  margin-bottom: 24px;
  text-align: center;
}

.create-server-modal-form-group {
  margin-bottom: 20px;
}

.create-server-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ol-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.create-server-modal-input {
  width: 100%;
  background: var(--ol-surface-2);
  border: 1px solid var(--ol-border);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--ol-text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.create-server-modal-input:focus {
  outline: none;
  border-color: var(--ol-text-link);
}

.create-server-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.create-server-modal-btn {
  flex: 1;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: var(--ol-font);
}

.create-server-modal-btn-cancel {
  background: var(--ol-surface-1);
  color: var(--ol-text);
  border: 1px solid var(--ol-border);
}

.create-server-modal-btn-cancel:hover {
  background: var(--ol-surface-2);
  border-color: var(--ol-primary);
}

.create-server-modal-btn-create {
  background: var(--ol-primary);
  color: white;
  border: none;
}

.create-server-modal-btn-create:hover:not(:disabled) {
  background: var(--ol-primary-2);
}

.create-server-modal-btn-create:active:not(:disabled) {
  background: #5a7426;
}

.create-server-modal-btn-create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}







/* ==========================================================================
   Home Page Styles (extracted from inline styles)
   ========================================================================== */

/* ===== Discord-Style Scrollbar (Desktop Only) ===== */
    @media (min-width: 769px) {
      /* Webkit browsers (Chrome, Safari, Edge) */
      ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
      }
      
      ::-webkit-scrollbar-corner {
        background: transparent;
      }
      
      ::-webkit-scrollbar-thumb {
        background-color: rgba(32, 34, 37, 0.6);
        min-height: 40px;
        border: 4px solid transparent;
        background-clip: padding-box;
        border-radius: 8px;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(32, 34, 37, 0.8);
      }
      
      ::-webkit-scrollbar-thumb:active {
        background-color: rgba(32, 34, 37, 1);
      }
      
      ::-webkit-scrollbar-track {
        background: transparent;
        border: 4px solid transparent;
        background-clip: padding-box;
        border-radius: 8px;
      }
      
      /* Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: rgba(32, 34, 37, 0.6) transparent;
      }
      
      /* Auto-hide scrollbar - only show on hover for containers */
      .ol-scroll::-webkit-scrollbar-thumb,
      .server-settings-nav::-webkit-scrollbar-thumb,
      .server-settings-body::-webkit-scrollbar-thumb,
      .user-settings-nav::-webkit-scrollbar-thumb,
      .user-settings-body::-webkit-scrollbar-thumb,
      #messagesContainer::-webkit-scrollbar-thumb {
        background-color: transparent;
        transition: background-color 0.2s ease;
      }
      
      .ol-scroll:hover::-webkit-scrollbar-thumb,
      .server-settings-nav:hover::-webkit-scrollbar-thumb,
      .server-settings-body:hover::-webkit-scrollbar-thumb,
      .user-settings-nav:hover::-webkit-scrollbar-thumb,
      .user-settings-body:hover::-webkit-scrollbar-thumb,
      #messagesContainer:hover::-webkit-scrollbar-thumb {
        background-color: rgba(32, 34, 37, 0.6);
      }
      
      .ol-scroll:hover::-webkit-scrollbar-thumb:hover,
      .server-settings-nav:hover::-webkit-scrollbar-thumb:hover,
      .server-settings-body:hover::-webkit-scrollbar-thumb:hover,
      .user-settings-nav:hover::-webkit-scrollbar-thumb:hover,
      .user-settings-body:hover::-webkit-scrollbar-thumb:hover,
      #messagesContainer:hover::-webkit-scrollbar-thumb:hover {
        background-color: rgba(32, 34, 37, 0.8);
      }
    }
    
    /* Ensure safe area matches content background on mobile browser */
    @media (max-width: 768px) {
      html {
        background: var(--ol-surface-sidebar);
        transition: none !important;
      }
      
      /* Default: split gradient background for server/channel view to match rail + sidebar */
      body {
        background: linear-gradient(to right, var(--ol-surface-rail) 72px, var(--ol-surface-sidebar) 72px) !important;
        /* Instant background changes by default for safe areas (settings, modals, etc) */
        transition: none !important;
      }
      
      /* When in chat view - use smooth transition that matches slide animation */
      body.mobile-view-chat {
        background: var(--ol-bg) !important;
        /* Smooth transition when entering/exiting chat to match slide animation */
        transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      
      /* Disable transition while actively swiping for instant feedback */
      body.mobile-view-chat:has(.ol-app.is-swiping) {
        transition: none !important;
      }
      
      /* When context menu is open (safe area matches bottom sheet) */
      body.context-menu-open {
        background: var(--ol-surface-1) !important;
        transition: none !important;
      }
      
      /* When profile modal is open (safe area matches modal) */
      body.profile-modal-open {
        background: var(--ol-surface-1) !important;
        transition: none !important;
      }
      
      /* When server settings is open (safe area matches settings background) */
      body.server-settings-open {
        background: var(--ol-bg) !important;
        transition: none !important;
      }
      
      /* When user settings is open (safe area matches settings background) */
      body.user-settings-open {
        background: var(--ol-bg) !important;
        transition: none !important;
      }
    }
    
    /* Mobile touch controls - prevent zoom and text selection */
    @media (max-width: 768px) {
      * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      
      /* Prevent selection highlight visual feedback on long-press */
      *::selection {
        background: transparent;
        color: inherit;
      }
      
      *::-moz-selection {
        background: transparent;
        color: inherit;
      }
      
      /* Allow text selection ONLY on input fields (message typing) */
      input, textarea {
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
      }
      
      /* Allow selection highlight ONLY in input fields */
      input::selection,
      textarea::selection {
        background: rgba(var(--ol-primary-rgb), 0.3);
        color: inherit;
      }
      
      input::-moz-selection,
      textarea::-moz-selection {
        background: rgba(var(--ol-primary-rgb), 0.3);
        color: inherit;
      }
      
      /* Explicitly prevent text selection on usernames and timestamps */
      .ol-chat__author, .ol-chat__timestamp, .ol-chat__meta {
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        pointer-events: none;
      }
      
      /* Re-enable pointer events for the parent message container */
      .ol-chat__message {
        pointer-events: auto;
      }
      
      /* Prevent double-tap zoom */
      * {
        touch-action: manipulation;
      }
      
      /* Allow panning for scrollable areas + DISCORD: GPU acceleration */
      .ol-scroll, #messagesContainer {
        touch-action: pan-y;
        /* DISCORD: Force GPU layer for ultra-smooth 60fps scrolling */
        will-change: scroll-position;
        transform: translateZ(0);
        -webkit-overflow-scrolling: touch;
      }
    }

    /* Message input container - FIXED FOR PWA */
    .message-input-container {
      position: relative;
      padding: 16px;
      background: var(--ol-bg);
      border-top: 1px solid var(--ol-border);
    }
    
    .message-input-wrapper {
      position: relative;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      background: var(--ol-surface-2);
      border-radius: 8px;
      padding: 0;
      border: 1px solid rgba(0,0,0,0.3);
      transition: border-color 0.15s ease;
    }
    
    .message-input-wrapper:focus-within {
      border-color: var(--ol-text-link);
    }
    
    .message-input {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--ol-text);
      font-size: 15px;
      line-height: 1.375;
      padding: 11px 16px;
      resize: none;
      max-height: 200px;
      min-height: 44px;
      font-family: inherit;
    }
    
    .message-input:focus {
      outline: none;
    }
    
    .message-input::placeholder {
      color: var(--ol-muted);
    }
    
    .message-send-btn {
      padding: 0 16px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--ol-muted);
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    
    .message-send-btn:hover:not(:disabled) {
      color: var(--ol-text-link);
    }
    
    .message-send-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    
    .message-send-btn svg {
      width: 24px;
      height: 24px;
    }
    
    /* Message hover effect for context menu indication */
    .ol-chat__message {
      position: relative;
      cursor: pointer;
    }
    
    .ol-chat__message:hover {
      background: rgba(255, 255, 255, 0.02);
    }
    
    /* Channel drag handle (admin-only) */
    .channel-drag-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-right: 4px;
      color: var(--ol-muted);
      opacity: 0;
      cursor: grab;
      transition: opacity 0.15s ease;
      flex-shrink: 0;
    }
    
    .ol-channel:hover .channel-drag-handle {
      opacity: 0.6;
    }
    
    .channel-drag-handle:hover {
      opacity: 1 !important;
    }
    
    .ol-channel.dragging {
      opacity: 0.5;
    }
    
    .ol-channel.dragging .channel-drag-handle {
      cursor: grabbing;
    }
    
    /* Channel settings gear button (Discord-style) */
    .channel-settings-gear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-left: auto;
      padding: 0;
      background: transparent;
      border: none;
      color: var(--ol-muted);
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
    }
    
    .ol-channel:hover .channel-settings-gear {
      opacity: 0.6;
    }
    
    .channel-settings-gear:hover {
      opacity: 1 !important;
      color: var(--ol-text);
    }
    
    /* Mobile: Always show drag handles for better touch interaction */
    @media (max-width: 768px) {
      .channel-drag-handle {
        opacity: 0.4 !important;
      }
      
      .channel-drag-handle:active {
        opacity: 1 !important;
        transform: scale(1.1);
      }
    }
    
    .ol-channel.touch-dragging {
      opacity: 0.8;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      background: var(--ol-surface-2);
      position: relative;
      z-index: 10001 !important;
    }
    
    /* Drag-over indicators - simple insertion line like Discord */
    .ol-channel.drag-over-top::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ol-primary);
      z-index: 100;
    }
    
    .ol-channel.drag-over-bottom::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ol-primary);
      z-index: 100;
    }
    
    .ol-channel {
      position: relative; /* For absolute positioning of pseudo-elements */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
    }
    
    /* Channel actions */
    .channel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 8px 8px 16px;
      margin-bottom: 8px;
    }
    
    .channel-create-btn, .category-create-btn {
      flex: 1;
      padding: 8px 12px;
      background: var(--ol-primary);
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease;
      display: none; /* Hidden by default */
    }
    
    body.is-admin .channel-create-btn, 
    body.is-admin .category-create-btn {
      display: block; /* Only show for admins */
    }
    
    .channel-create-btn:hover, .category-create-btn:hover {
      background: var(--ol-primary-2);
    }
    
    /* Category styles */
    .category-section {
      margin-bottom: 8px;
    }
    
    .category-header {
      display: flex;
      align-items: center;
      padding: 8px 8px 8px 12px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease;
      gap: 4px;
    }
    
    .category-header:hover {
      background: rgba(255, 255, 255, 0.02);
    }
    
    .category-drag-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      color: var(--ol-muted);
      opacity: 0;
      cursor: grab;
      transition: opacity 0.15s ease, transform 0.15s ease;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    
    .category-header:hover .category-drag-handle {
      opacity: 0.6;
    }
    
    .category-drag-handle:hover {
      opacity: 1 !important;
      color: var(--ol-text);
    }
    
    .category-drag-handle:active {
      cursor: grabbing;
      transform: scale(0.95);
    }
    
    .category-section.dragging {
      opacity: 0.5;
    }
    
    .category-section.dragging .category-drag-handle {
      cursor: grabbing;
      opacity: 1;
    }
    
    /* Mobile: Always show category drag handles for better touch interaction */
    @media (max-width: 768px) {
      .category-drag-handle {
        opacity: 0.4 !important;
      }
      
      .category-drag-handle:active {
        opacity: 1 !important;
        transform: scale(1.1);
      }
    }
    
    .category-chevron {
      width: 12px;
      height: 12px;
      color: var(--ol-muted);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    
    .category-header.collapsed .category-chevron {
      transform: rotate(-90deg);
    }
    
    /* Also handle chevron when parent category section is collapsed */
    .category-section.collapsed .category-chevron {
      transform: rotate(-90deg);
    }
    
    .category-name {
      flex: 1;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--ol-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .category-add-channel-btn {
      width: 18px;
      height: 18px;
      display: none; /* Hidden by default, shown only for admins via JS */
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--ol-muted);
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.15s ease;
      padding: 0;
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
      opacity: 0;
    }
    
    body.is-admin .category-add-channel-btn {
      display: flex;
    }
    
    .category-header:hover .category-add-channel-btn {
      opacity: 1;
    }
    
    .category-add-channel-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--ol-text);
    }
    
    .category-add-channel-btn:active {
      transform: scale(0.9);
    }
    
    /* Mobile: Always show add button on categories for admins */
    @media (max-width: 768px) {
      body.is-admin .category-add-channel-btn {
        opacity: 0.6;
      }
      
      body.is-admin .category-header:hover .category-add-channel-btn {
        opacity: 1;
      }
    }
    
    .category-channels {
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.3s ease;
    }
    
    body.is-admin .category-channels {
      min-height: 40px; /* Ensure empty categories have drop space for admins */
    }
    
    body.is-admin .category-channels:empty {
      background: rgba(255, 255, 255, 0.02);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    body.is-admin .category-channels:empty::after {
      content: 'Drop channels here';
      color: var(--ol-muted);
      font-size: 12px;
      opacity: 0.4;
    }
    
    body.is-admin .category-channels.drag-over {
      background: rgba(88, 101, 242, 0.15);
      border: 2px dashed var(--ol-primary);
      min-height: 40px; /* Ensure empty categories have a visible drop zone */
      border-radius: 4px;
    }
    
    .uncategorized-section.drag-over {
      background: rgba(88, 101, 242, 0.15);
      border: 2px dashed var(--ol-primary);
      border-radius: 4px;
    }
    
    /* Ensure collapsed categories allow height animation for unread channels */
    .category-section.collapsed .category-channels {
      overflow: hidden;
      transition: max-height 0.3s ease;
      min-height: 0 !important; /* Remove min-height when collapsed to prevent extra space */
    }
    
    .category-section.dragging {
      opacity: 0.5;
    }
    
    .category-section.touch-dragging {
      opacity: 0.8;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      background: var(--ol-surface-2);
      position: relative;
      z-index: 10001 !important;
    }
    
    .category-section.drag-over-top::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ol-primary);
      z-index: 100;
    }
    
    .category-section.drag-over-bottom::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ol-primary);
      z-index: 100;
    }
    
    .category-section {
      position: relative; /* For absolute positioning of pseudo-elements */
    }
    
    .category-section.drag-over-center {
      background: rgba(88, 101, 242, 0.1);
      border: 2px dashed var(--ol-primary);
      border-radius: 4px;
    }
    
    /* Uncategorized channels section */
    .uncategorized-section {
      margin-top: 8px;
    }
    
    .channel-delete-btn {
      opacity: 0;
      margin-left: auto;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--ol-muted);
      font-size: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
      border-radius: 4px;
      flex-shrink: 0;
    }
    
    .channel-delete-btn:hover {
      background: rgba(240, 71, 71, 0.2);
      color: #ff5c5c;
    }
    
    .ol-channel:hover .channel-delete-btn {
      opacity: 1;
    }
    
    /* Mobile adjustments */
    @media (max-width: 768px) {
      /* Always show delete button on mobile (no hover) */
      .channel-delete-btn {
        opacity: 1;
      }
    }
    
    /* Loading state */
    .loading-messages {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: var(--ol-muted);
      font-size: 14px;
    }
    
    /* Loading skeleton - Discord/Revolt style */
    .loading-skeleton {
      width: 100%;
      padding: 16px 16px 0 16px;
    }
    
    .skeleton-message {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      animation: skeleton-pulse 1.5s ease-in-out infinite;
    }
    
    .skeleton-message::before {
      content: '';
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
    }
    
    .skeleton-message::after {
      content: '';
      flex: 1;
      height: 40px;
      border-radius: 4px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 100%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }
    
    @keyframes skeleton-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    
    @keyframes skeleton-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    /* Smooth fade-in for messages after loading */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .messages-loaded .ol-chat__message {
      animation: fadeIn 0.3s ease-out backwards;
    }
    
    .messages-loaded .ol-chat__message:nth-child(1) { animation-delay: 0ms; }
    .messages-loaded .ol-chat__message:nth-child(2) { animation-delay: 30ms; }
    .messages-loaded .ol-chat__message:nth-child(3) { animation-delay: 60ms; }
    .messages-loaded .ol-chat__message:nth-child(4) { animation-delay: 90ms; }
    .messages-loaded .ol-chat__message:nth-child(5) { animation-delay: 120ms; }
    .messages-loaded .ol-chat__message:nth-child(n+6) { animation-delay: 150ms; }

    /* Channel modal - ALWAYS CENTERED */
    #channelModal, #categoryModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    
    /* Message context menu - Discord-style */
    .message-context-menu {
      display: none;
      position: fixed;
      z-index: 10000;
      background: var(--ol-surface-1);
      border: 1px solid var(--ol-border);
      border-radius: 8px;
      box-shadow: var(--ol-shadow-3);
      min-width: 200px;
      overflow: hidden;
    }
    
    .context-menu-content {
      padding: 4px 0;
    }
    
    .context-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 8px 16px;
      background: transparent;
      border: none;
      color: var(--ol-text);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.15s ease;
      text-align: left;
    }
    
    .context-menu-item:hover {
      background: var(--ol-hover-bg);
    }
    
    .context-menu-item:active {
      background: var(--ol-active-bg);
    }
    
    .context-menu-item svg {
      flex-shrink: 0;
      opacity: 0.8;
    }
    
    .context-menu-item#deleteMessageBtn,
    .context-menu-item#deleteChannelBtn,
    .context-menu-item#deleteCategoryBtn,
    .context-menu-item-danger {
      color: var(--ol-danger);
    }
    
    .context-menu-item#deleteMessageBtn:hover,
    .context-menu-item#deleteChannelBtn:hover,
    .context-menu-item#deleteCategoryBtn:hover,
    .context-menu-item-danger:hover {
      background: rgba(255, 92, 92, 0.1);
    }
    
    /* Mobile Bottom Sheet Context Menu */
    .mobile-context-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      pointer-events: none;
    }
    
    .mobile-context-menu.is-open {
      display: block;
      pointer-events: auto;
    }
    
    .mobile-context-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .mobile-context-menu.is-open .mobile-context-backdrop {
      opacity: 1;
    }
    
    .mobile-context-sheet {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--ol-surface-1);
      border-radius: 16px 16px 0 0;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      max-height: 50vh;
      overflow: hidden;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }
    
    .mobile-context-menu.is-open .mobile-context-sheet {
      transform: translateY(0);
    }
    
    .mobile-context-handle {
      width: 40px;
      height: 4px;
      background: var(--ol-border);
      border-radius: 2px;
      margin: 12px auto 8px auto;
    }
    
    .mobile-context-content {
      padding: 8px 0 24px 0;
    }
    
    .mobile-context-item {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      padding: 16px 20px;
      background: transparent;
      border: none;
      color: var(--ol-text);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.15s ease;
      text-align: left;
    }
    
    .mobile-context-item:hover {
      background: var(--ol-hover-bg);
    }
    
    .mobile-context-item:active {
      background: var(--ol-active-bg);
    }
    
    .mobile-context-item svg {
      flex-shrink: 0;
      opacity: 0.8;
    }
    
    .mobile-context-item.mobile-context-danger {
      color: var(--ol-danger);
    }
    
    .mobile-context-item.mobile-context-danger:hover {
      background: rgba(255, 92, 92, 0.1);
    }
    
    /* Hide mobile context menu on desktop */
    @media (min-width: 769px) {
      .mobile-context-menu {
        display: none !important;
      }
    }
    
    /* Hide desktop context menu on mobile */
    @media (max-width: 768px) {
      .message-context-menu {
        display: none !important;
      }
    }
    
    #channelModal.is-open, #categoryModal.is-open {
      display: flex;
    }
    
    #channelModalContent, #categoryModalContent {
      background: var(--ol-surface-1);
      border-radius: 8px;
      padding: 24px;
      width: min(400px, 90vw);
      border: 1px solid var(--ol-border);
      box-shadow: 0 8px 16px rgba(0,0,0,0.24);
    }
    
    /* Mobile: slightly adjust padding and max width */
    @media (max-width: 768px) {
      #channelModal, #categoryModal {
        padding: 12px;
      }
      
      #channelModalContent, #categoryModalContent {
        width: calc(100vw - 24px);
        max-width: 400px;
        padding: 20px;
      }
    }

    /* Empty state */
    .empty-channels {
      padding: 40px 16px;
      text-align: center;
      color: var(--ol-muted);
    }
    
    .empty-channels h3 {
      margin: 0 0 8px 0;
      color: var(--ol-text);
    }
    
    /* Shake animation for error feedback */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
      20%, 40%, 60%, 80% { transform: translateX(8px); }
    }
    
    /* Profile Modal and Create Server Modal base styles moved to theme.css */
    
    /* Profile Modal - Additional styles specific to home.html */
    .profile-modal-logout {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      background: var(--ol-danger);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .profile-modal-logout:hover {
      background: #ff4545;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 92, 92, 0.3);
    }
    
    .profile-modal-logout:active {
      transform: translateY(0);
    }
    
    .profile-modal-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--ol-muted);
      cursor: pointer;
      transition: all 0.15s ease;
      z-index: 10;
    }
    
    .profile-modal-close:hover {
      background: var(--ol-hover-bg);
      color: var(--ol-text);
    }
    
    /* Mobile adjustments for profile modal */
    @media (max-width: 768px) {
      .profile-modal-content {
        width: 100%;
        border-right: none;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        max-height: 90vh;
      }
      
      .profile-modal-body {
        padding-bottom: 16px;
      }
    }
    
    /* PWA-specific: Make modal even taller for better mobile app feel */
    @media (max-width: 768px) and (display-mode: standalone) {
      .profile-modal-content {
        max-height: 95vh;
      }
    }
    
    /* Desktop: cover only rail + sidebar (312px wide) */
    @media (min-width: 769px) and (max-width: 1100px) {
      /* Tablet - no members sidebar */
      .profile-modal-content {
        width: 312px; /* 72px + 240px */
      }
    }
    
    @media (min-width: 1101px) {
      /* Desktop - show members sidebar but modal still only covers rail + sidebar */
      .profile-modal-content {
        width: 312px; /* 72px + 240px */
      }
    }
    
    /* Server rail create button */
    .server-add-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--ol-surface-1);
      border: 2px dashed var(--ol-border);
      color: var(--ol-text-link);
      display: none; /* Hidden by default, shown only for admins via JS */
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      margin: 8px auto;
      flex-shrink: 0;
    }
    
    .server-add-btn:hover {
      background: var(--ol-text-link);
      color: #fff;
      border-color: var(--ol-text-link);
      border-radius: 16px;
    }
    
    /* Admin dashboard button - top of server list */
    .admin-dashboard-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--ol-surface-2);
      border: none;
      color: var(--ol-text);
      display: none; /* Hidden by default, shown only for admins via JS */
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      margin: 0 0 8px 0; /* Spacing from servers below */
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      will-change: border-radius;
      /* Mobile touch fixes */
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation; /* Prevents delay on mobile */
    }
    
    .admin-dashboard-btn svg {
      width: 24px;
      height: 24px;
      pointer-events: none;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    
    .admin-dashboard-btn:hover {
      border-radius: var(--ol-r-12);
      background: var(--ol-primary);
      color: #fff;
    }
    
    .admin-dashboard-btn.is-active {
      border-radius: var(--ol-r-12);
      background: var(--ol-primary);
      color: #fff;
    }
    
    .admin-dashboard-btn.is-active::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 40px;
      background: #fff;
      border-radius: 0 4px 4px 0;
      animation: slideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .admin-dashboard-btn:not(.is-active):hover::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: #fff;
      border-radius: 0 4px 4px 0;
    }
    
    /* Separator line between admin button and servers */
    .admin-separator {
      width: 32px;
      height: 2px;
      background: var(--ol-border);
      border-radius: 1px;
      margin: 8px auto;
      display: none; /* Hidden by default, shown with admin button */
      flex-shrink: 0;
    }
    
    /* Server context menu */
    .server-context-menu {
      position: fixed;
      background: var(--ol-surface-2);
      border: 1px solid var(--ol-border);
      border-radius: 8px;
      padding: 8px;
      z-index: 10000;
      min-width: 180px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    
    .server-context-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 4px;
      color: var(--ol-text);
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      font-size: 14px;
    }
    
    .server-context-menu-item:hover {
      background: var(--ol-hover-bg);
    }
    
    .server-context-menu-item.danger {
      color: #ff4545;
    }
    
    .server-context-menu-item.danger:hover {
      background: rgba(255, 69, 69, 0.1);
    }
    
    /* Create Server Modal styles moved to theme.css */
    
    /* Server Header Dropdown Menu */
    .server-header-menu {
      position: absolute;
      top: 48px;
      left: 72px;
      width: 220px;
      background: var(--ol-surface-1);
      border: 1px solid var(--ol-border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      z-index: 9997;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      overflow: hidden;
    }
    
    .server-header-menu.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    .server-header-menu-content {
      padding: 8px;
    }
    
    .server-header-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--ol-text);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }
    
    .server-header-menu-item:hover {
      background: var(--ol-hover-bg);
    }
    
    .server-header-menu-item:active {
      background: var(--ol-active-bg);
    }
    
    .server-header-menu-item svg {
      flex-shrink: 0;
      opacity: 0.8;
    }
    
    .server-header-menu-item.admin-only {
      display: none;
    }
    
    body.is-admin .server-header-menu-item.admin-only {
      display: flex;
    }
    
    /* Backdrop for mobile server header menu */
    .server-header-menu-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9996;
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
    }
    
    .server-header-menu-backdrop.is-open {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Mobile: bottom sheet for server header menu */
    @media (max-width: 768px) {
      .server-header-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border: none;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
      }
      
      .server-header-menu.is-open {
        transform: translateY(0);
      }
      
      .server-header-menu-content {
        padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 8px) 0;
      }
      
      .server-header-menu-item {
        padding: 16px 20px;
        font-size: 16px;
        border-radius: 0;
      }
    }
    
    /* Server Settings Full-Screen Modal */
    .server-settings-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0, 0, 0, 0.85);
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    
    .server-settings-modal.is-open {
      display: flex;
    }
    
    .server-settings-container {
      display: flex;
      width: 100%;
      max-width: 1000px;
      height: 90vh;
      max-height: 740px;
      background: var(--ol-bg);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    
    .server-settings-sidebar {
      width: 240px;
      background: var(--ol-surface-sidebar);
      border-right: 1px solid var(--ol-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    
    .server-settings-header {
      padding: 16px;
      border-bottom: 1px solid var(--ol-border);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--ol-muted);
    }
    
    .server-settings-mobile-header {
      display: none;
    }
    
    .server-settings-nav {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }
    
    .server-settings-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 4px;
      color: var(--ol-muted);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 2px;
    }
    
    .server-settings-nav-item:hover {
      background: var(--ol-hover-bg);
      color: var(--ol-text);
    }
    
    .server-settings-nav-item.active {
      background: var(--ol-active-bg);
      color: var(--ol-text);
    }
    
    .server-settings-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    
    .server-settings-topbar {
      height: 56px;
      padding: 0 16px;
      border-bottom: 1px solid var(--ol-border);
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
      position: relative;
    }
    
    .server-settings-close-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--ol-muted);
      cursor: pointer;
      transition: all 0.15s ease;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .server-settings-close-btn:hover {
      background: var(--ol-hover-bg);
      color: var(--ol-text);
    }
    
    .server-settings-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ol-text);
      flex: 1;
    }
    
    .server-settings-body {
      flex: 1;
      padding: 40px;
      max-width: 800px;
      margin: 0 auto;
      width: 100%;
    }
    
    .server-settings-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      color: var(--ol-muted);
    }
    
    .server-settings-empty svg {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
      opacity: 0.3;
    }
    
    .server-settings-empty-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--ol-text);
      margin-bottom: 8px;
    }
    
    .server-settings-empty-text {
      font-size: 14px;
      max-width: 400px;
    }
    
    /* Server settings form styles */
    .server-settings-section {
      margin-bottom: 32px;
    }
    
    .server-settings-section-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--ol-muted);
      margin-bottom: 16px;
    }
    
    .server-settings-form-group {
      margin-bottom: 20px;
    }
    
    .server-settings-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--ol-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    
    .server-settings-input {
      width: 100%;
      background: var(--ol-surface-2);
      border: 1px solid var(--ol-border);
      border-radius: 4px;
      padding: 10px 12px;
      color: var(--ol-text);
      font-size: 16px;
      font-family: inherit;
      transition: border-color 0.15s ease;
    }
    
    .server-settings-input:focus {
      outline: none;
      border-color: var(--ol-text-link);
    }
    
    .server-settings-input::placeholder {
      color: var(--ol-muted);
      opacity: 0.6;
    }
    
    .server-settings-hint {
      font-size: 12px;
      color: var(--ol-muted);
      margin-top: 8px;
    }
    
    /* Character Counter - Discord style */
    .char-counter {
      font-size: 12px;
      color: var(--ol-muted);
      margin-top: 4px;
      text-align: right;
      transition: color 0.15s ease;
    }
    
    .char-counter.char-counter-warning {
      color: #faa61a;
    }
    
    .char-counter.char-counter-error {
      color: #f04747;
      font-weight: 500;
    }
    
    .server-settings-preview {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: var(--ol-surface-2);
      border-radius: 8px;
      margin-top: 12px;
    }
    
    .server-settings-preview-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--ol-surface-1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 700;
      color: var(--ol-text);
      flex-shrink: 0;
      overflow: hidden;
    }
    
    .server-settings-preview-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .server-settings-preview-info {
      flex: 1;
      min-width: 0;
    }
    
    .server-settings-preview-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--ol-text);
      margin-bottom: 4px;
      word-wrap: break-word;
    }
    
    .server-settings-preview-label {
      font-size: 12px;
      color: var(--ol-muted);
    }
    
    .server-settings-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--ol-border);
    }
    
    .server-settings-btn {
      padding: 10px 24px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
    }
    
    .server-settings-btn-primary {
      background: #65882C !important; /* Keep save buttons green, don't use var(--ol-primary) */
      color: #fff;
    }
    
    .server-settings-btn-primary:hover:not(:disabled) {
      background: #7aa63a !important; /* Keep save buttons green on hover */
    }
    
    .server-settings-btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .server-settings-btn-secondary {
      background: var(--ol-surface-1);
      color: var(--ol-text);
      border: 1px solid var(--ol-border);
    }
    
    .server-settings-btn-secondary:hover {
      background: var(--ol-surface-2);
      border-color: var(--ol-primary);
    }
    
    .server-settings-btn-danger {
      background: #ff5c5c;
      color: #fff;
      border: 1px solid #ff5c5c;
    }
    
    .server-settings-btn-danger:hover:not(:disabled) {
      background: #ff3838;
      border-color: #ff3838;
    }
    
    .server-settings-btn-danger:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    /* Settings Tabs */
    .settings-tab {
      display: none;
    }
    
    .settings-tab.active {
      display: block;
    }
    
    /* User Settings Full-Screen Modal (Same structure as server settings) */
    .user-settings-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0, 0, 0, 0.85);
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    
    .user-settings-modal.is-open {
      display: flex;
    }
    
    .user-settings-container {
      display: flex;
      width: 100%;
      max-width: 1000px;
      height: 90vh;
      max-height: 740px;
      background: var(--ol-bg);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    
    .user-settings-sidebar {
      width: 240px;
      background: var(--ol-surface-sidebar);
      border-right: 1px solid var(--ol-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    
    .user-settings-header {
      padding: 16px;
      border-bottom: 1px solid var(--ol-border);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--ol-muted);
    }
    
    .user-settings-mobile-header {
      display: none;
    }
    
    .user-settings-nav {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }
    
    .user-settings-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 4px;
      color: var(--ol-muted);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 2px;
    }
    
    .user-settings-nav-item:hover {
      background: var(--ol-surface-hover);
      color: var(--ol-text);
    }
    
    .user-settings-nav-item.active {
      background: var(--ol-surface-hover);
      color: var(--ol-text);
    }
    
    .user-settings-nav-item svg {
      flex-shrink: 0;
    }
    
    .user-settings-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .user-settings-topbar {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 56px;
      border-bottom: 1px solid var(--ol-border);
      background: var(--ol-bg);
      flex-shrink: 0;
      position: relative;
    }
    
    .user-settings-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ol-text);
      flex: 1;
    }
    
    .user-settings-close-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--ol-muted);
      cursor: pointer;
      transition: all 0.15s ease;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .user-settings-close-btn:hover {
      background: var(--ol-hover-bg);
      color: var(--ol-text);
    }
    
    .user-settings-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px 32px 32px;
      -webkit-overflow-scrolling: touch;
    }
    
    .user-settings-section {
      margin-bottom: 28px;
    }
    
    .user-settings-section-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--ol-muted);
      margin-bottom: 16px;
      padding: 0 4px;
    }
    
    .user-settings-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      padding: 20px;
      border-top: 1px solid var(--ol-border);
      background: var(--ol-surface-0);
    }
    
    .user-settings-preview {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      background: var(--ol-surface-1);
      border: 1px solid var(--ol-border);
      border-radius: 12px;
      margin-bottom: 24px;
    }
    
    .user-settings-preview-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 3px solid var(--ol-border);
      overflow: hidden;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.05);
    }
    
    .user-settings-preview-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .user-settings-preview-info {
      flex: 1;
      min-width: 0;
    }
    
    .user-settings-preview-name {
      font-size: 20px;
      font-weight: 700;
      color: var(--ol-text);
      margin-bottom: 4px;
      word-wrap: break-word;
    }
    
    .user-settings-preview-label {
      font-size: 12px;
      color: var(--ol-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
    }
    
    .user-settings-form-group {
      margin-bottom: 24px;
    }
    
    .user-settings-label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--ol-text);
      margin-bottom: 10px;
      padding: 0 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    
    .user-settings-input {
      width: 100%;
      min-height: 44px;
      font-size: 15px;
      border-radius: 6px;
      padding: 10px 14px;
      border: 1px solid var(--ol-border);
      background: var(--ol-surface-1);
      color: var(--ol-text);
      transition: all 0.15s ease;
    }
    
    .user-settings-input:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.4);
      background: var(--ol-bg);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    }
    
    .user-settings-hint {
      font-size: 13px;
      color: var(--ol-muted);
      margin-top: 8px;
      padding: 0 4px;
      line-height: 1.4;
    }
    
    .user-settings-hint strong {
      color: var(--ol-text);
      font-weight: 600;
    }
    
    .username-display-edit {
      width: 100%;
    }
    
    .settings-username-display {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--ol-surface-1);
      border: 1px solid var(--ol-border);
      border-radius: 6px;
      min-height: 44px;
    }
    
    .settings-username-display span {
      flex: 1;
      font-size: 15px;
      color: var(--ol-text);
      font-weight: 500;
    }
    
    .settings-edit-username-btn {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ol-secondary-bg);
      border: none;
      border-radius: 4px;
      color: var(--ol-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .settings-edit-username-btn:hover {
      background: var(--ol-hover-bg);
      color: var(--ol-text);
    }
    
    .user-settings-error,
    .user-settings-success {
      display: none;
      border-radius: 6px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 500;
      margin-top: 16px;
    }
    
    .user-settings-error {
      background: rgba(255, 92, 92, 0.1);
      border: 1px solid rgba(255, 92, 92, 0.3);
      color: #ff5c5c;
    }
    
    .user-settings-success {
      background: rgba(122, 166, 58, 0.1);
      border: 1px solid rgba(122, 166, 58, 0.3);
      color: #7aa63a; /* Keep success green, don't use var(--ol-primary) */
    }
    
    .user-settings-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 24px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.15s ease;
      cursor: pointer;
      border: none;
      min-height: 40px;
    }
    
    .user-settings-btn-primary {
      background: #65882C !important; /* Keep save buttons green, don't use var(--ol-primary) */
      color: white;
    }
    
    .user-settings-btn-primary:hover:not(:disabled) {
      background: #7aa63a !important; /* Keep save buttons green on hover */
    }
    
    .user-settings-btn-secondary {
      background: var(--ol-surface-1);
      color: var(--ol-text);
      border: 1px solid var(--ol-border);
    }
    
    .user-settings-btn-secondary:hover:not(:disabled) {
      background: var(--ol-surface-2);
      border-color: var(--ol-primary);
    }
    
    .user-settings-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .server-delete-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 10000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .server-delete-modal.is-open {
      display: flex;
    }
    
    .server-delete-modal-content {
      background: var(--ol-surface-1);
      border-radius: 12px;
      max-width: 480px;
      width: 100%;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      animation: modalSlideIn 0.2s ease-out;
    }
    
    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    
    .server-delete-modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--ol-border);
    }
    
    .server-delete-modal-header h3 {
      font-size: 20px;
      font-weight: 600;
      color: #ff5c5c;
      margin: 0;
    }
    
    .server-delete-modal-body {
      padding: 24px;
    }
    
    .server-delete-modal-actions {
      padding: 16px 24px;
      border-top: 1px solid var(--ol-border);
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    
    .server-delete-modal-actions .server-settings-btn {
      padding: 10px 20px;
      min-height: 40px;
    }
    
    .server-settings-error {
      background: rgba(255, 92, 92, 0.1);
      border: 1px solid rgba(255, 92, 92, 0.3);
      border-radius: 4px;
      padding: 12px;
      color: #ff5c5c;
      font-size: 14px;
      margin-top: 12px;
      display: none;
    }
    
    .server-settings-success {
      background: rgba(122, 166, 58, 0.1);
      border: 1px solid rgba(122, 166, 58, 0.3);
      border-radius: 4px;
      padding: 12px;
      color: #7aa63a; /* Keep success green, don't use var(--ol-primary-2) */
      font-size: 14px;
      margin-top: 12px;
      display: none;
    }
    
    /* Mobile adjustments for settings modal */
    @media (max-width: 768px) {
      .server-settings-modal {
        flex-direction: column;
        background: var(--ol-bg);
        overflow: hidden;
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
      }
      
      .server-settings-container {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        flex-direction: column;
      }
      
      .server-settings-sidebar {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: none;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--ol-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .server-settings-sidebar.mobile-hidden {
        transform: translateX(-100%);
        position: absolute;
        inset: 0;
      }
      
      .server-settings-header {
        display: none;
      }
      
      .server-settings-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--ol-border);
        background: var(--ol-surface-1);
        flex-shrink: 0;
      }
      
      .server-settings-mobile-header .server-settings-close-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 8px;
        transition: all 0.2s ease;
      }
      
      .server-settings-mobile-header .server-settings-close-btn:active {
        transform: scale(0.95);
        background: var(--ol-hover-bg);
      }
      
      .server-settings-mobile-header .server-settings-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--ol-text);
        flex: 1;
      }
      
      .server-settings-nav {
        padding: 0;
        background: var(--ol-bg);
        padding-top: 8px;
        min-height: auto;
      }
      
      .server-settings-nav-item {
        padding: 18px 20px;
        border-radius: 0;
        margin: 0 12px 4px 12px;
        background: var(--ol-surface-1);
        border: 1px solid var(--ol-border);
        border-radius: 8px;
        justify-content: space-between;
        min-height: 56px;
        transition: all 0.2s ease;
        font-size: 15px;
      }
      
      .server-settings-nav-item::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 6px solid var(--ol-muted);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        margin-left: auto;
        transition: transform 0.2s ease;
      }
      
      .server-settings-nav-item:active {
        transform: scale(0.98);
        background: var(--ol-hover-bg);
      }
      
      .server-settings-nav-item:hover {
        background: var(--ol-surface-2);
        border-color: var(--ol-text-muted);
      }
      
      .server-settings-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
      }
      
      .server-settings-content {
        display: flex;
        position: absolute;
        inset: 0;
        background: var(--ol-bg);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        overflow: hidden;
        flex-direction: column;
        pointer-events: none;
      }
      
      .server-settings-content.mobile-active {
        transform: translateX(0);
        pointer-events: auto;
      }
      
      .server-settings-topbar {
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--ol-border);
        background: var(--ol-surface-1);
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      
      .server-settings-close-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 8px;
        transition: all 0.2s ease;
        position: static;
        transform: none;
      }
      
      .server-settings-close-btn:active {
        transform: scale(0.95);
        background: var(--ol-hover-bg);
      }
      
      .server-settings-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--ol-text);
        flex: 1;
      }
      
      .server-settings-body {
        flex: 1;
        padding: 20px 16px;
        padding-bottom: 20px;
        background: var(--ol-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .server-settings-section {
        margin-bottom: 28px;
      }
      
      .server-settings-section-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--ol-muted);
        margin-bottom: 12px;
        padding: 0 4px;
      }
      
      .server-settings-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--ol-bg);
        padding: 12px 16px;
        border-top: 1px solid var(--ol-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100;
      }
      
      .server-settings-actions::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to top, var(--ol-bg) 0%, transparent 100%);
        pointer-events: none;
      }
      
      .server-settings-body {
        padding-bottom: 90px !important; /* Space for fixed buttons */
      }
      
      .server-settings-btn {
        flex: 1;
        width: auto;
        min-height: 48px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;
      }
      
      .server-settings-btn:active {
        transform: scale(0.98);
      }
      
      .server-settings-btn-primary {
        background: #65882C !important; /* Keep save buttons green, don't use var(--ol-primary) */
        box-shadow: 0 2px 8px rgba(101, 136, 44, 0.2);
      }
      
      .server-settings-btn-primary:hover {
        background: #7aa63a !important; /* Keep save buttons green on hover */
        box-shadow: 0 3px 12px rgba(101, 136, 44, 0.3);
      }
      
      .server-settings-preview {
        padding: 20px;
        background: var(--ol-surface-1);
        border: 1px solid var(--ol-border);
        border-radius: 12px;
        margin-bottom: 20px;
      }
      
      .server-settings-preview-icon {
        width: 96px;
        height: 96px;
        font-size: 40px;
        border-radius: 50%;
        border: 3px solid var(--ol-border);
      }
      
      .server-settings-preview-name {
        font-size: 18px;
        font-weight: 700;
      }
      
      .server-settings-form-group {
        margin-bottom: 24px;
      }
      
      .server-settings-label {
        font-size: 13px;
        margin-bottom: 10px;
        padding: 0 4px;
      }
      
      .server-settings-input {
        min-height: 48px;
        font-size: 16px;
        border-radius: 8px;
        padding: 12px 16px;
        border: 2px solid var(--ol-border);
        background: var(--ol-surface-1);
        transition: all 0.2s ease;
      }
      
      .server-settings-input:focus {
        border-color: var(--ol-primary);
        background: var(--ol-bg);
        box-shadow: 0 0 0 3px rgba(101, 136, 44, 0.1);
      }
      
      .server-settings-hint {
        font-size: 13px;
        padding: 0 4px;
      }
      
      .server-settings-error,
      .server-settings-success {
        border-radius: 8px;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 500;
      }
      
      /* User Settings Mobile */
      .user-settings-modal {
        flex-direction: column;
        background: var(--ol-bg);
        overflow: hidden;
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
      }
      
      .user-settings-container {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        flex-direction: column;
      }
      
      .user-settings-sidebar {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: none;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--ol-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .user-settings-sidebar.mobile-hidden {
        transform: translateX(-100%);
        position: absolute;
        inset: 0;
      }
      
      .user-settings-header {
        display: none;
      }
      
      .user-settings-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--ol-border);
        background: var(--ol-surface-1);
        flex-shrink: 0;
      }
      
      .user-settings-mobile-header .user-settings-close-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 8px;
        transition: all 0.2s ease;
      }
      
      .user-settings-mobile-header .user-settings-close-btn:active {
        transform: scale(0.95);
        background: var(--ol-hover-bg);
      }
      
      .user-settings-mobile-header .user-settings-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--ol-text);
        flex: 1;
      }
      
      .user-settings-nav {
        padding: 0;
        background: var(--ol-bg);
        padding-top: 8px;
        min-height: auto;
      }
      
      .user-settings-nav-item {
        padding: 18px 20px;
        border-radius: 0;
        margin: 0 12px 4px 12px;
        background: var(--ol-surface-1);
        border: 1px solid var(--ol-border);
        border-radius: 8px;
        justify-content: space-between;
        min-height: 56px;
        transition: all 0.2s ease;
        font-size: 15px;
      }
      
      .user-settings-nav-item::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 6px solid var(--ol-muted);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        margin-left: auto;
        transition: transform 0.2s ease;
      }
      
      .user-settings-nav-item:active {
        transform: scale(0.98);
        background: var(--ol-hover-bg);
      }
      
      .user-settings-nav-item:hover {
        background: var(--ol-surface-2);
        border-color: var(--ol-text-muted);
      }
      
      .user-settings-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
      }
      
      .user-settings-content {
        display: flex;
        position: absolute;
        inset: 0;
        background: var(--ol-bg);
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        overflow: hidden;
        flex-direction: column;
        pointer-events: none;
      }
      
      .user-settings-content.mobile-active {
        transform: translateX(0);
        pointer-events: auto;
      }
      
      .user-settings-topbar {
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--ol-border);
        background: var(--ol-surface-1);
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      
      .user-settings-close-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 8px;
        transition: all 0.2s ease;
        position: static;
        transform: none;
      }
      
      .user-settings-close-btn:active {
        transform: scale(0.95);
        background: var(--ol-hover-bg);
      }
      
      .user-settings-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--ol-text);
        flex: 1;
      }
      
      .user-settings-body {
        flex: 1;
        padding: 20px 16px;
        padding-bottom: 90px; /* Space for fixed buttons */
        background: var(--ol-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .user-settings-section {
        margin-bottom: 28px;
      }
      
      .user-settings-section-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--ol-muted);
        margin-bottom: 12px;
        padding: 0 4px;
      }
      
      .user-settings-actions {
        display: flex;
        flex-direction: row;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--ol-bg);
        padding: 12px 16px;
        border-top: 1px solid var(--ol-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100;
      }
      
      .user-settings-actions::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to top, var(--ol-bg) 0%, transparent 100%);
        pointer-events: none;
      }
      
      .user-settings-btn {
        flex: 1;
        width: auto;
        min-height: 48px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;
      }
      
      .user-settings-btn:active {
        transform: scale(0.98);
      }
      
      .user-settings-btn-primary {
        background: #65882C !important; /* Keep save buttons green, don't use var(--ol-primary) */
        box-shadow: 0 2px 8px rgba(101, 136, 44, 0.2);
      }
      
      .user-settings-btn-primary:hover {
        background: #7aa63a !important; /* Keep save buttons green on hover */
        box-shadow: 0 3px 12px rgba(101, 136, 44, 0.3);
      }
      
      .user-settings-preview {
        padding: 20px;
        background: var(--ol-surface-1);
        border: 1px solid var(--ol-border);
        border-radius: 12px;
        margin-bottom: 20px;
      }
      
      .user-settings-preview-avatar {
        width: 80px;
        height: 80px;
      }
      
      .user-settings-preview-name {
        font-size: 18px;
        font-weight: 700;
      }
      
      .user-settings-form-group {
        margin-bottom: 24px;
      }
      
      .user-settings-label {
        font-size: 13px;
        margin-bottom: 10px;
        padding: 0 4px;
      }
      
      .user-settings-input {
        min-height: 48px;
        font-size: 16px;
        border-radius: 8px;
        padding: 12px 16px;
        border: 2px solid var(--ol-border);
        background: var(--ol-surface-1);
        transition: all 0.2s ease;
      }
      
      .user-settings-input:focus {
        border-color: rgba(255, 255, 255, 0.4);
        background: var(--ol-bg);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
      }
      
      .user-settings-hint {
        font-size: 13px;
        padding: 0 4px;
      }
      
      .user-settings-error,
      .user-settings-success {
        border-radius: 8px;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 500;
      }
    }
    
    /* PWA safe area adjustments */
    @media (max-width: 768px) and (display-mode: standalone) {
      .server-settings-modal {
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ol-bg);
      }
      
      .server-settings-sidebar {
        background: var(--ol-bg);
      }
      
      .server-settings-content {
        background: var(--ol-bg);
      }
      
      .server-settings-mobile-header {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
      }
      
      .server-settings-topbar {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
      }
      
      .server-settings-actions {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }
      
      .user-settings-modal {
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ol-bg);
      }
      
      .user-settings-sidebar {
        background: var(--ol-bg);
      }
      
      .user-settings-content {
        background: var(--ol-bg);
      }
      
      /* PWA: Ensure entire viewport uses dark background for safe areas */
      html:has(body.server-settings-open),
      html:has(body.user-settings-open) {
        background: var(--ol-bg);
        transition: none !important;
      }
      
      /* Hide mobile nav when settings are open */
      body.server-settings-open .mobile-bottom-nav,
      body.user-settings-open .mobile-bottom-nav {
        display: none;
      }
      
      .user-settings-mobile-header {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
        background: var(--ol-surface-1); /* Slightly lighter for status bar */
      }
      
      .user-settings-topbar {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
        background: var(--ol-surface-1); /* Slightly lighter for status bar */
      }
      
      .user-settings-actions {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }
    }