/* Random Kick - New Layout Stylesheet */

/* CSS Custom Properties */
:root {
  /* Colors - Updated to match modern Kick-inspired aesthetic */
  --background-color: #141517;
  --color-primary: #53FC18;
  --color-primary-hover: #43c914;
  --color-bg: var(--background-color);
  --color-bg-input: #141517;
  --color-bg-sidebar: var(--background-color);
  --color-bg-header: #141517;
  --color-text: #fff;
  --color-text-primary: #fff;
  --color-text-secondary: #929EA6;
  --color-text-muted: #929EA6;
  --color-disabled: #444;
  --color-disabled-text: #191919;
  --color-toggle-bg: #555;
  --color-toggle-slider: #fff;
  --color-border: #333;
  --color-border-subtle: #2a2b2e;
  
  /* Typography */
  --chatroom-font-size: 13px;
  --text-sm-size: 0.875rem;
  --text-sm-line-height: 1.25rem;
  
  /* Layout */
  --sidebar-width: 320px;
  --sidebar-width-mobile: 280px;
  
  /* Surfaces */
  --color-surface-primary: #141517;
  --color-surface-secondary: #141517;
  
  /* Border radius */
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Font stacks - Modern system font approach */
html, :host {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif;
  background: var(--background-color);
  color: var(--color-text);
  overflow: hidden;
}

/* Font Face - Enhanced loading strategy with multiple sources */
@font-face {
  font-family: "Kick";
  src: url("kick.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-variant-ligatures: normal;
  /* Add unicode-range for better loading */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alternative font face with different loading strategy */
@font-face {
  font-family: "KickAlt";
  src: url("kick.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Force immediate loading */
  font-variant-ligatures: normal;
}

/* Text Utilities - Following modern Kick-inspired typography */
.text-primary { color: var(--color-primary); }
.text-subtle { color: var(--color-text-secondary); }
.text-sm { 
  font-size: var(--text-sm-size); 
  line-height: var(--text-sm-line-height); 
}
.font-bold { font-weight: 700; }

/* Chat specific styling */
.chat { font-size: var(--chatroom-font-size); }

/* Sidebar Header */
.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 1rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Kick", "KickAlt", "Arial Black", Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ensure fallback fonts work properly */
  font-display: swap;
  transition: all 0.3s ease;
}

/* Enhanced fallback styling when custom font fails */
.font-fallback .logo {
  font-family: "Arial Black", Arial, sans-serif;
  letter-spacing: 1.5px;
  font-weight: 900;
  /* Slightly adjust spacing for better fallback appearance */
}

/* Confirmed font loaded styling */
.font-loaded .logo {
  font-family: "Kick", "KickAlt", "Arial Black", Arial, sans-serif;
  letter-spacing: 2px;
}

.logo__bracket,
.logo__kick {
  color: var(--color-primary);
}

.logo__random {
  color: var(--color-text);
}

/* Live Indicator */
.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
  margin-top: 5px;
}

.live-indicator__dot {
  width: 6px;
  height: 6px;
  background-color: #00ff00;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

.live-indicator__count {
  color: var(--color-text);
  font-family: Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Rolling animation for live count changes */
.live-indicator__count.rolling {
  animation: rollNumber 0.6s ease-out;
}

@keyframes rollNumber {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-12px) scale(1.15);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Rolling animation for language counts */
.total-count,
.language-count {
  display: inline-block;
  transition: transform 0.2s ease-out;
  font-variant-numeric: tabular-nums; /* Ensures consistent width during animation */
}

.total-count.rolling,
.language-count.rolling {
  animation: rollNumber 0.6s ease-out;
}

@keyframes livePulse {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 
      0 0 8px var(--color-primary),
      0 0 16px rgba(83, 252, 24, 0.6),
      0 0 24px rgba(83, 252, 24, 0.4),
      0 0 32px rgba(83, 252, 24, 0.2);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.99);
    box-shadow: 
      0 0 7px var(--color-primary),
      0 0 14px rgba(83, 252, 24, 0.55),
      0 0 20px rgba(83, 252, 24, 0.4),
      0 0 26px rgba(83, 252, 24, 0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 
      0 0 8px var(--color-primary),
      0 0 16px rgba(83, 252, 24, 0.6),
      0 0 24px rgba(83, 252, 24, 0.4),
      0 0 32px rgba(83, 252, 24, 0.2);
  }
}

/* Main Layout */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
  grid-template-rows: 1fr;
  height: 100vh;
  background: var(--color-bg);
  gap: 0;
}

/* Layout when chat is hidden - expand main content */
.layout.chat-hidden {
  grid-template-columns: var(--sidebar-width) 1fr;
}

/* Hide mobile filters on desktop */
.mobile-filters {
  display: none;
}

/* Hide mobile disclaimer on desktop */
.mobile-disclaimer {
  display: none;
}

/* Sidebar */
.sidebar {
  background: var(--color-bg-sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.sidebar--left {
  order: 1;
}

.sidebar--right {
  order: 3;
}

.sidebar__content {
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

/* Wrapper for main sidebar content */
.sidebar__main-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-row: 1;
  overflow-y: auto;
}

/* Control Sections */
.control-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.control-section__title {
  margin: 0;
  font-family: Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  line-height: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 35px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #081902;
  font-weight: 600;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-hover);
}

.btn--primary:disabled {
  background: var(--color-disabled);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
}

.btn__icon {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  margin-top: 1px;
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  cursor: pointer;
}

.toggle-switch > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch__slider {
  width: 44px;
  height: 24px;
  border-radius: 24px;
  background: var(--color-toggle-bg);
  position: relative;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.toggle-switch__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-toggle-slider);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch > input:checked + .toggle-switch__slider {
  background: var(--color-primary);
}

.toggle-switch > input:checked + .toggle-switch__slider::before {
  transform: translateX(20px);
}

.toggle-switch__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch > input:checked ~ .toggle-switch__text {
  color: var(--color-primary);
}

/* Timer Controls */
.timer-controls {
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.timer-controls--hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.time-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}

.time-input__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.25px;
  line-height: 1.25rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.time-input__icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}


.time-input__inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.time-input__group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.time-input__unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  min-width: 1rem;
}

.time-input__input,
.time-input__value {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: var(--color-bg-input);
  color: var(--color-primary);
  width: 2.5rem;
  height: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.time-input__input {
  border: 1px solid var(--color-border);
  outline: none;
  caret-color: var(--color-primary);
  transition: all 0.2s;
}

.time-input__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(83, 252, 24, 0.3);
}

.time-input__value {
  background: #141517;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.time-input--next .time-input__value {
  color: var(--color-primary);
}

.time-input--every .time-input__input {
  color: var(--color-text);
}

/* Filter Groups */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.25px;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
}

.filter-input {
  width: 100%;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  outline: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  caret-color: var(--color-primary);
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.filter-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(83, 252, 24, 0.3);
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
}

.custom-dropdown__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.custom-dropdown__selected:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(83, 252, 24, 0.4);
}

.custom-dropdown.open .custom-dropdown__selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(83, 252, 24, 0.4);
}

.custom-dropdown.open {
  box-shadow: 0 0 0 2px rgba(83, 252, 24, 0.4);
  border-radius: 0.25rem;
}

.custom-dropdown.open .custom-dropdown__options {
  box-shadow: 0 0 0 2px rgba(83, 252, 24, 0.4);
  border-radius: 0 0 0.25rem 0.25rem;
}

.custom-dropdown__text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-dropdown__arrow {
  font-size: 0.8em;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.custom-dropdown.open .custom-dropdown__arrow {
  transform: rotate(180deg);
}

.custom-dropdown__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.custom-dropdown.open .custom-dropdown__options {
  display: block;
}

.custom-dropdown__option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 0.2s;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;
}

.custom-dropdown__option:hover {
  background: var(--color-primary);
  color: #081902;
}

.custom-dropdown__option.selected {
  background: var(--color-primary);
  color: #081902;
}

/* Main Content */
.main-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  order: 2;
  padding: 0;
  margin: 0;
  background: var(--color-bg);
}

.stream-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  min-width: 0; /* Allow flex item to shrink */
  padding: 0;
  margin: 0;
}

.chat-container {
  width: 100%;
  height: 100%;
  background: var(--color-bg-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.chat-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chat-hide-button {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.chat-hide-button:hover {
  background: rgba(83, 252, 24, 0.1);
}

.chat-hide-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chat-hide-button__icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
  pointer-events: none;
}

.chat-hide-button:hover .chat-hide-button__icon {
  filter: brightness(0) saturate(100%) invert(64%) sepia(100%) saturate(1000%) hue-rotate(90deg) brightness(1.2);
}

.chat-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25rem;
  flex: 1;
  text-align: center;
}

.chat-streamer {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.25rem;
}

.chat-container iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
}

/* Chat hidden state */
.chat-container.chat-hidden {
  display: none;
}

/* Hide popout button when chat is hidden */
.layout.chat-hidden .popout-chat-button {
  display: none;
}

.chat-show-button {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 35px;
  padding: 0 16px;
  background: #42474D;
  color: var(--color-text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  z-index: 1000;
  font-size: 0.875rem;
  font-weight: 600;
}


.chat-show-button:hover {
  background: #4a5056;
  transform: scale(1.05);
}

.chat-show-button:active {
  transform: scale(0.95);
}

.chat-show-button__icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  transform: scaleX(-1); /* Flip horizontally */
}

.chat-show-button__text {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}


.popout-chat-button {
  position: fixed;
  right: 330px;
  bottom: 16px;
  width: 160px;
  height: 35px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popout-chat-button:hover {
  background: var(--color-primary-hover, #4ae014);
  color: var(--color-bg);
}

.popout-chat-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.popout-chat-button__arrow {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

.popout-chat-button.show {
  display: flex;
}


.stream-container iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .stream-container {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .stream-container iframe {
    width: 100%;
    height: 56.25vw; /* 16:9 aspect ratio based on viewport width */
    max-height: 50vh; /* Smaller max height on mobile to leave room for streamer info */
    border: none;
    margin: 0;
    padding: 0;
  }
}

/* Stream Error Message */
.stream-error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  color: var(--color-primary);
  padding: 0;
  border-radius: 0.5rem;
  border: 2px solid var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(83, 252, 24, 0.3);
  animation: errorMessageSlideIn 0.3s ease-out;
  max-width: 400px;
}

.stream-error-message__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
}

.stream-error-message__text {
  flex: 1;
  text-align: left;
}

.stream-error-message__close {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.stream-error-message__close:hover {
  background: rgba(83, 252, 24, 0.2);
  transform: scale(1.1);
}

.stream-error-message__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@keyframes errorMessageSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Hide hamburger menu on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Mobile header button - hidden on desktop */
.mobile-header-btn {
  display: none;
}

/* Desktop logo - shown on desktop */
.desktop-logo {
  display: flex;
}

/* Streamer Count Display */
.streamer-count-display {
  position: static;
  bottom: auto;
  left: auto;
  z-index: 1000;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: auto;
  /* Ensure disclaimer stays at bottom of sidebar using grid */
  grid-row: 2;
  align-self: end;
}

.streamer-count-display__text {
  font-size: 0.7rem;
  color: #9FA6AD;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  display: inline;
  margin-right: 0.3rem;
  pointer-events: none;
}

/* Language breakdown styles removed */

.streamer-count-display__disclaimer {
  font-size: 0.65rem;
  color: #9FA6AD;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  display: block;
  margin-top: 0.5rem;
  margin-bottom: -10px;
  opacity: 1;
  /* Ensure disclaimer doesn't overlap with sidebar content */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: var(--sidebar-width-mobile);
  }
  
  .logo {
    font-size: 1.75rem;
    letter-spacing: 1.5px;
  }
  
  .sidebar__content {
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }
}

/* Ensure disclaimer doesn't overlap with sidebar content */
.sidebar {
  position: relative;
  min-height: 100vh;
}

@media (max-width: 1080px) {
  /* Hide streamer count display on mobile */
  .streamer-count-display {
    display: none;
  }
  
  /* Override sidebar min-height on mobile to prevent full viewport height */
  .sidebar--left {
    min-height: auto;
    height: auto;
  }
  
  /* Mobile: Complete restructure with natural scrolling */
  body {
    overflow: auto; /* Allow body to scroll */
  }
  
  .layout {
    display: flex; /* Keep as flex to use order property */
    flex-direction: column; /* Stack elements vertically */
    height: auto; /* Remove fixed height */
    min-height: 100vh;
    gap: 0; /* Remove any default gap */
  }
  
  /* Mobile Header - Logo and Live Count */
  .sidebar--left {
    position: relative;
    width: 100%;
    background: var(--color-bg-sidebar);
    border-bottom: 1px solid var(--color-border);
  }
  
  .sidebar--left .sidebar__content {
    padding: 1rem;
    gap: 0;
    min-height: auto;
    height: auto;
    display: block; /* Override grid layout on mobile */
    grid-template-rows: none;
  }
  
  .sidebar--left .sidebar-header {
    padding: 0.5rem 0;
    margin-bottom: 0;
    border-bottom: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
  }
  
  /* Mobile: Show header button, hide desktop logo */
  .mobile-header-btn {
    display: flex;
    width: auto;
    height: 35px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    flex-shrink: 0;
    order: 1;
  }
  
  .mobile-header-btn .btn__icon {
    width: 1em;
    height: 1em;
  }
  
  .desktop-logo {
    display: none;
  }
  
  /* Group streamer count and hamburger menu together on the right */
  .sidebar--left .sidebar-header .live-indicator {
    margin-left: auto;
    margin-right: 0.5rem;
    margin-bottom: 0; /* Remove bottom margin for proper alignment */
    align-items: center; /* Ensure internal alignment */
    order: 2;
  }
  
  .sidebar--left .logo {
    font-size: 1.25rem;
    letter-spacing: 1px;
    line-height: 1; /* Ensure consistent line height for alignment */
  }
  
  .sidebar--left .live-indicator {
    font-size: 0.875rem;
    margin-bottom: 0; /* Override any inherited margin */
    margin-top: 0; /* Remove top margin for mobile */
  }
  
  .sidebar--left .live-indicator__count {
    line-height: 1; /* Ensure consistent line height */
    vertical-align: baseline; /* Align with other text elements */
  }
  
  .sidebar--left .live-indicator__dot {
    width: 5px;
    height: 5px;
  }
  
  /* Mobile Hamburger Menu */
  .mobile-menu-toggle {
    display: flex; /* Show on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: 4px;
    transition: all 0.2s ease;
    border-radius: 4px;
    order: 3;
  }
  
  .mobile-menu-toggle:hover {
    background: rgba(83, 252, 24, 0.1);
  }
  
  .mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  
  .hamburger-line {
    width: 18px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: all 0.2s ease;
  }
  
  /* Hamburger animation when active */
  .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  
  .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  
  /* Hide all controls in left sidebar on mobile */
  .sidebar--left .control-section {
    display: none;
  }
  
  /* Main Content - Stream */
  .main-content {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
  }
  
  .stream-container {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .stream-container iframe {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0;
    padding: 0;
  }
  
  /* Chat Section */
  .sidebar--right {
    width: 100%;
    height: 700px;
    background: var(--color-bg-sidebar);
    border-top: 1px solid var(--color-border);
  }
  
  .sidebar--right .chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .sidebar--right .chat-container iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
  }
  
  /* Mobile Filters Section - Overlay that covers stream and chat */
  .mobile-filters {
    display: none; /* Hidden by default, shown when menu is toggled */
    position: fixed;
    top: 80px; /* Start below header */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    overflow-y: auto;
    padding: 0;
  }
  
  .mobile-filters.show {
    display: block;
  }
  
  .mobile-filters__content {
    background: var(--color-bg-sidebar);
    border-top: 1px solid var(--color-border);
    padding: 1rem;
    margin-top: 0; /* No margin needed since overlay starts below header */
    min-height: calc(100vh - 80px); /* Fill remaining height */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
  }
  
  
  .mobile-filters .control-section {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .mobile-filters .control-section__title {
    font-size: 0.875rem;
  }
  
  .mobile-filters .logo {
    display: none; /* Hide logo in filters section */
  }
  
  .mobile-filters .sidebar-header {
    display: none; /* Hide header in filters section */
  }
  
  /* Make timer controls more compact on mobile */
  .mobile-filters .time-input__inputs {
    gap: 0.25rem;
  }
  
  .mobile-filters .time-input__input,
  .mobile-filters .time-input__value {
    width: 2rem;
    height: 1.75rem;
    font-size: 0.875rem;
  }
  
  .mobile-filters .time-input__unit {
    font-size: 0.7rem;
  }
}


/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: #141517;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Focus styles for accessibility */
.btn:focus-visible,
.toggle-switch:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Loading animation for stream changes */
.stream-container iframe.flash {
  animation: streamFlash 0.3s ease-out;
}

@keyframes streamFlash {
  0% { opacity: 0.7; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}


/* ============================================================================
   Horizontal Streamer Info Section
   ============================================================================ */

.streamer-info-horizontal {
  background: var(--color-bg-sidebar);
  border: none;
  border-radius: 0;
  padding: 1rem;
  margin: 0;
  display: none; /* Hidden by default, will be shown when stream loads */
  flex-shrink: 0;
}

.streamer-info-horizontal__content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.streamer-info-horizontal__category-image {
  width: auto;
  height: 90px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 5px;
}

.streamer-info-horizontal__details {
  flex: 1;
  min-width: 200px;
}

.streamer-info-horizontal__name-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.streamer-info-horizontal__name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.25px;
  line-height: 1.4rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.streamer-info-horizontal__name:hover {
  color: var(--color-primary);
}

.streamer-info-horizontal__title {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  margin-top: -3px;
  margin-bottom: 0.4rem;
  font-style: normal;
  line-height: 1.3rem;
}

.streamer-info-horizontal__game {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.streamer-info-horizontal__game:hover {
  color: var(--color-primary-hover);
}

.streamer-info-horizontal__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.streamer-info-horizontal__tag {
  background: #42474D;
  color: var(--color-text);
  padding: 0.2rem 0.4rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.streamer-info-horizontal__tag--live {
  position: relative;
}

.streamer-info-horizontal__live-indicator {
  width: 6px;
  height: 6px;
  background-color: #00ff00;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

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

.streamer-info-horizontal__viewers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  background: var(--color-bg-input);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: none;
}

.streamer-info-horizontal__viewers-icon {
  width: 12px;
  height: 12px;
}

.streamer-info-horizontal__viewers-count {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.streamer-info-horizontal__viewers-label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

/* Responsive adjustments for horizontal streamer info */
@media (max-width: 1080px) {
  .streamer-info-horizontal {
    padding: 1rem;
    background: var(--color-primary); /* Green background for mobile */
    border-top: 1px solid var(--color-border);
  }
  
  .streamer-info-horizontal__content {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .streamer-info-horizontal__category-image {
    width: auto;
    height: 110px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 0;
  }
  
  .streamer-info-horizontal__details {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  
  .streamer-info-horizontal__name-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .streamer-info-horizontal__name {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    margin-bottom: 0.5rem;
    color: #081902; /* Dark green text for mobile green background */
    font-family: Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.25px;
    line-height: 1.4rem;
    transition: color 0.2s ease;
  }
  
  .streamer-info-horizontal__name:hover {
    color: #0a1f03; /* Slightly lighter dark green on hover */
  }
  
  .streamer-info-horizontal__viewers {
    flex-shrink: 0;
    background: #0a1f03; /* Dark green background for mobile green section */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
  }
  
  .streamer-info-horizontal__viewers-icon {
    width: 10px;
    height: 10px;
  }
  
  .streamer-info-horizontal__viewers-count {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-primary); /* Light green text for mobile */
  }
  
  .streamer-info-horizontal__viewers-label {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--color-primary); /* Light green text for mobile */
  }
  
  .streamer-info-horizontal__title {
    font-size: 1rem;
    font-weight: 600;
    margin-top: -3px;
    margin-bottom: 0.4rem;
    line-height: 1.3rem;
    color: #0a1f03; /* Dark green text for mobile green background */
    font-style: normal;
  }
  
  .streamer-info-horizontal__game {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0;
    color: #0a1f03; /* Dark green text for mobile green background */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.25rem;
    transition: color 0.2s ease;
  }
  
  .streamer-info-horizontal__game:hover {
    color: #0d2a05; /* Slightly lighter dark green on hover */
  }
  
  .streamer-info-horizontal__tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .streamer-info-horizontal__tag {
    background: #0a1f03; /* Dark green background for mobile green section */
    color: #ffffff; /* White text for better contrast */
    padding: 0.2rem 0.4rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .streamer-info-horizontal__live-indicator {
    width: 6px;
    height: 6px;
  }
  
  /* Mobile popout chat button positioning */
  .popout-chat-button {
    position: static;
    right: auto;
    bottom: auto;
    width: 200px;
    height: 35px;
    margin: 0.5rem auto 0.5rem auto; /* Reduced bottom margin for better spacing */
    display: flex;
    align-items: center;
    justify-content: center;
    order: 4; /* Place after chat (order 3) */
    background: var(--color-primary);
    color: var(--color-bg);
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    z-index: 1000;
  }
  
  .popout-chat-button:hover {
    background: var(--color-primary-hover, #4ae014);
    color: var(--color-bg);
  }
  
  .popout-chat-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .popout-chat-button__arrow {
    width: 16px;
    height: 16px;
    margin-left: 8px;
  }
  
  
  /* Mobile chat show button positioning */
  .chat-show-button {
    top: 15px;
    right: 15px;
    height: 36px;
    padding: 0 14px;
    font-size: 0.8rem;
  }
  
  .chat-show-button__icon {
    width: 16px;
    height: 16px;
  }
  
  .chat-show-button__text {
    font-size: 0.8rem;
  }
  
  /* Mobile chat header styling */
  .chat-header {
    padding: 0.75rem;
  }
  
  /* Hide chat hide button on mobile */
  .chat-hide-button {
    display: none;
  }
  
  .chat-title {
    font-size: 0.8rem;
    text-align: left;
  }
  
  /* Ensure proper order for mobile layout */
  .sidebar--left {
    order: 1;
  }
  
  .main-content {
    order: 2;
  }
  
  .sidebar--right {
    order: 3;
  }
  
  .popout-chat-button {
    order: 4;
  }
  
  /* Mobile Disclaimer */
  .mobile-disclaimer {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem 0.25rem 1rem; /* Reduced bottom padding to minimize space after disclaimer */
    margin: 0.25rem 0 0 0; /* Reduced top margin for tighter spacing */
    order: 5;
    position: static; /* Changed from fixed to static to flow naturally after popout button */
    bottom: auto;
    left: auto;
    right: auto;
  }
  
  .mobile-disclaimer__count {
    font-size: 0.7rem;
    color: #9FA6AD;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .mobile-disclaimer__disclaimer {
    font-size: 0.7rem;
    color: #9FA6AD;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.25rem;
    margin-bottom: 0; /* Removed bottom margin to eliminate extra space */
  }
  
  /* Mobile disclaimer languages styles removed */
}

/* Additional mobile spacing for very small screens */
@media (max-width: 480px) {
  .popout-chat-button {
    margin: 1rem auto 0.5rem auto; /* Consistent bottom margin on small screens */
  }
}