:root { 
  --blue: #1da1f2; 
  --gray: #6c757d; 
  --glow: 0 0 5px var(--blue); 
  --black: #000;
  --white: #fff;
  --dark-green: #006400;
  --dark-blue: #00008b;
  --cyan: #00bfff;
  --silver: #c0c0c0;
  --gold: #ffd700;
}

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

body { 
  background: var(--black); 
  color: var(--white); 
  font-family: system-ui, sans-serif; 
  height: 100vh; 
  overflow: hidden; 
  -webkit-text-size-adjust: 100%; /* Prevent iOS zoom on rotation */
  -webkit-touch-callout: none; /* Disable callout on long press */
  -webkit-user-select: none; /* Disable selection */
  user-select: none;
}

.sticky-header { 
  position: sticky; top: 0; 
  background: var(--black); 
  padding: 0.5rem 1rem; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-bottom: 1px solid #333; 
  z-index: 100; 
}

.sticky-header h1 { font-size: 1.5rem; }

.header-menu { display: flex; align-items: center; gap: 1rem; }

#main-menu { 
  display: flex; list-style: none; gap: 1rem; 
}

#main-menu a { color: var(--white); text-decoration: none; padding: 0.5rem; border-radius: 0.25rem; transition: background 0.2s; }

#main-menu a:hover { background: #333; }

#user-status { font-weight: bold; }

#menu-toggle { 
  display: none; 
  background: none; 
  border: none; 
  color: var(--white); 
  font-size: 1.5rem; 
  cursor: pointer; 
}

.app-container { 
  display: flex; 
  height: calc(100vh - 60px);  
}

.sidebar { 
  width: 250px; 
  background: #111; 
  padding: 1rem; 
  overflow-y: auto; 
  border-right: 1px solid #333; 
  flex-shrink: 0; 
}

#user-list { list-style: none; }

#user-list li { 
  padding: 0.5rem; 
  cursor: pointer; 
  border-radius: 0.25rem; 
  transition: background 0.2s; 
}

#user-list li:hover { background: #333; }

#user-list li.current { 
  background: var(--cyan); 
  font-weight: bold; 
}

#user-list li.current::after { content: ' 👑'; }

.main-content { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
}

.login-section { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  gap: 1rem; 
  padding: 2rem; 
  text-align: center; 
}

.login-btn { 
  padding: 1rem 2rem; 
  font-size: 1rem; 
  border: none; 
  border-radius: 0.5rem; 
  cursor: pointer; 
  box-shadow: var(--glow); 
  transition: box-shadow 0.2s; 
  min-height: 44px; /* Native touch target */
  font-size: 16px; /* Prevent zoom on focus */
}

.login-btn:hover { box-shadow: 0 0 10px var(--blue); }

#guest-login { background: var(--gray); color: var(--white); }

#x-login { background: var(--blue); color: var(--white); }

.chat-section { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  border: 2px solid #333; 
  border-radius: 1rem; 
  margin: 1rem; 
  overflow: hidden; 
  background: #111; 
  box-shadow: 0 0 20px rgba(29, 161, 242, 0.1); 
}

.messages-frame { 
  flex: 1; 
  overflow-y: auto; 
  padding: 1rem; 
  display: flex; 
  flex-direction: column; 
  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

.message { 
  max-width: 70%; 
  margin: 0.5rem 0; 
  padding: 0.75rem; 
  border-radius: 1rem; 
  word-break: break-word; 
  color: var(--white); 
}

.dark-green-bubble { background: var(--dark-green); }

.dark-blue-bubble { background: var(--dark-blue); }

.cyan-bubble { background: var(--cyan); }

.silver-superchat { background: var(--silver); color: var(--black); border: 2px solid #a9a9a9; }

.gold-superchat { background: var(--gold); color: var(--black); font-weight: bold; border: 2px solid #ffcc00; }

.amount { font-size: 0.8em; color: #cc0000; }

.input-area { 
  display: flex; 
  padding: 1rem; 
  background: #222; 
  border-top: 1px solid #333; 
  gap: 0.5rem; 
}

#message { 
  flex: 1; 
  padding: 0.75rem; 
  background: #333; 
  color: var(--white); 
  border: none; 
  border-radius: 0.25rem; 
  font-size: 16px; /* Prevent zoom */
  min-height: 44px;
  -webkit-appearance: none; /* Native look */
}

button { 
  padding: 0.75rem 1rem; 
  background: var(--blue); 
  color: var(--white); 
  border: none; 
  border-radius: 0.25rem; 
  cursor: pointer; 
  box-shadow: var(--glow); 
  transition: box-shadow 0.2s; 
  font-weight: bold; 
  font-size: 16px; /* Prevent zoom */
  min-height: 44px;
}

button:hover { box-shadow: 0 0 10px var(--blue); }

#superchat { background: var(--gold); color: var(--black); }

.modal { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background: #111; 
  padding: 2rem; 
  border-radius: 1rem; 
  z-index: 1000; 
  box-shadow: 0 0 20px var(--blue); 
  border: 1px solid #333; 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal input { 
  padding: 0.75rem; 
  background: #333; 
  color: var(--white); 
  border: none; 
  border-radius: 0.25rem; 
  font-size: 16px; /* Prevent zoom */
  min-height: 44px;
}

.mod-controls { 
  display: none; 
  padding: 1rem; 
  background: #222; 
  border-top: 1px solid #333; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
}

.mod-controls input, .mod-controls select { 
  padding: 0.5rem; 
  background: #333; 
  color: var(--white); 
  border: 1px solid #555; 
  border-radius: 0.25rem; 
  flex: 1; 
  min-width: 100px; 
  font-size: 16px;
}

#typing-indicator { 
  font-style: italic; 
  color: var(--cyan); 
  padding: 0.5rem; 
  text-align: center; 
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .app-container { flex-direction: column; height: 100vh; }
  .sidebar { 
    width: 100%; 
    height: auto; 
    display: none;  
  }
  .sidebar.open { display: block; }  
  #menu-toggle { display: block; }
  #main-menu { display: none; }  
  .login-section, .chat-section { margin: 0.5rem; }
  .input-area { flex-direction: column; gap: 0.5rem; }
  .message { max-width: 90%; }
  .modal { width: 90%; max-width: 400px; }
  body { touch-action: manipulation; } /* Fast taps */
}

/* Accessibility & Polish */
button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); }
input:focus { outline: none; box-shadow: 0 0 0 2px var(--blue); }
.messages-frame { scrollbar-width: thin; scrollbar-color: var(--blue) #333; }
.messages-frame::-webkit-scrollbar { width: 6px; }
.messages-frame::-webkit-scrollbar-track { background: #333; }
.messages-frame::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }