/* Discord dark theme — BetterDiscord variable names + computed hex */
:root {
  /* Background layers (dark theme) */
  --background-primary: #313338;
  --background-secondary: #2b2d31;
  --background-secondary-alt: #232428;
  --background-tertiary: #1e1f22;
  --background-floating: #111214;
  --background-accent: #4e5058;
  --background-modifier-hover: rgba(79,84,92,0.16);
  --background-modifier-active: rgba(79,84,92,0.24);
  --background-modifier-selected: rgba(79,84,92,0.32);
  --background-modifier-accent: rgba(79,84,92,0.48);

  /* Text colors */
  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-link: #00a8fc;
  --header-primary: #f2f3f5;
  --header-secondary: #b5bac1;

  /* Interactive (icons, channel names) */
  --interactive-normal: #b5bac1;
  --interactive-hover: #dbdee1;
  --interactive-active: #f2f3f5;
  --interactive-muted: #4e5058;

  /* Channel colors */
  --channels-default: #949ba4;

  /* Brand */
  --brand-500: #5865f2;
  --brand-560: #4752c4;
  --brand-600: #3c45a5;

  /* Status */
  --status-positive: #23a55a;
  --status-danger: #ed4245;
  --status-warning: #fee75c;

  /* Input */
  --input-background: #1e1f22;
  --input-placeholder-text: #87898c;

  /* Scrollbar */
  --scrollbar-thin-thumb: #1a1b1e;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #1a1b1e;
  --scrollbar-auto-track: #2b2d31;

  /* Deprecated aliases kept for reference */
  --channeltextarea-background: #383a40;

  /* Fonts */
  --font-primary: 'Whitney Book', 'Whitney', 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Whitney Book', 'Whitney', 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 32px;
  --radius-round: 2147483647px;
  --button-border-radius: 2147483647px;
  --guildbar-avatar-size: 40px;
  --guildbar-folder-size: 48px;
  --guild-list-padding: 16px;
  --guild-list-width: 72px;
  --guild-sidebar-width: 310px;
  --channel-header-height: 48px;
  --member-list-width: 264px;
  --rtc-account-height: 44px;
  --chat-avatar-size: 40px;
  --chat-input-icon-size: 20px;
  --chat-markup-line-height: 1.375rem;
  --chat-textarea-height: 56px;
  --channels-name-line-height: 24px;
  --icon-size-lg: 32px;
  --icon-size-md: 24px;
  --icon-size-sm: 18px;
  --icon-size-xs: 16px;
  --icon-size-xxs: 12px;
  --scrollbar-width: 10px;
  --modal-width-large: 800px;
  --modal-width-medium: 602px;
  --modal-width-small: 442px;
  --modal-h-padding: 24px;
  --modal-v-padding: 16px;
  --expand-duration: 100ms;
  --expand-fade: 200ms;
  --expand-ease: ease-out;
  --collapse-duration: 150ms;
  --collapse-fade: 150ms;
  --collapse-ease: ease-in;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  background: var(--background-primary);
  color: var(--text-normal);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-size: 16px;
  line-height: 1.375;
}

.discord-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  /* Lock minimum width so nothing squishes — 72 + 268 + 400 chat min */
  min-width: 740px;
  background: #1e1f22;
}

/* Left column wraps server list + channel sidebar + bottom panel */
.left-column {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.left-column.off-screen {
  transform: translateX(-100%);
}

.chat-area {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-area.off-screen {
  transform: translateX(100vw);
}

.left-column-top {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.left-column-bottom {
  flex-shrink: 0;
  background: var(--background-secondary-alt);
  width: calc(var(--guild-list-width) + var(--guild-sidebar-width));
  position: relative;
  z-index: 6;
}

.hidden {
  display: none !important;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-auto-track);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-auto-thumb);
  border-radius: 6px;
  border: 2px solid var(--scrollbar-auto-track);
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
}

img {
  display: block;
}

.dimmed {
  position: relative;
}

.dimmed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  pointer-events: none;
  animation: dimFadeIn 0.5s ease both;
}

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

.dimmed-heavy {
  position: relative;
}

.dimmed-heavy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 5;
  pointer-events: none;
  animation: dimFadeIn 0.5s ease both;
}

.highlight-glow {
  position: relative;
  z-index: 10;
  box-shadow:
    0 0 0 2px rgba(88, 101, 242, 0.4),
    0 0 30px rgba(88, 101, 242, 0.2);
  transition: box-shadow 0.4s ease;
}

#walkthrough-dimmer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 50;
  pointer-events: none;
}

/* Demo Version cursor */
.demo-cursor {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  gap: 2px;
}

.demo-cursor i {
  font-size: 24px;
  color: #ed4245;
}

.demo-cursor span {
  font-size: 11px;
  font-weight: 600;
  color: #f2f3f5;
  white-space: nowrap;
}

.demo-cursor-fade {
  animation: demoCursorFade 0.6s ease-out forwards;
}

@keyframes demoCursorFade {
  0% { opacity: 1; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

/* Mobile device gate overlay */
.mobile-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.mobile-gate-content {
  text-align: center;
  max-width: 340px;
}

.mobile-gate-icon {
  font-size: 48px;
  color: #5865f2;
  margin-bottom: 20px;
}

.mobile-gate-title {
  font-size: 22px;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 12px;
}

.mobile-gate-desc {
  font-size: 15px;
  color: #949ba4;
  line-height: 1.5;
}