/* ==========================================================
   Anna Branding Override for Neko
   Hides default Neko chrome, applies Anna theme, mobile-first
   ========================================================== */

/* ----------------------------------------------------------
   CSS Variables - Anna palette
   ---------------------------------------------------------- */
:root {
  --anna-sage: #7C9A8E;
  --anna-sage-dark: #5A7A6E;
  --anna-sage-light: #A8C5B8;
  --anna-cream: #FAF8F5;
  --anna-cream-dark: #F5F3F0;
  --anna-text: #2D3436;
  --anna-text-secondary: #636E72;
  --anna-coral: #E8A598;
}

/* ----------------------------------------------------------
   1. HIDE ALL NEKO CHROME
   Header bar, bottom controls, members, emotes, settings
   ---------------------------------------------------------- */

/* Top header bar */
.header-container {
  display: none !important;
}

/* Bottom room container (controls, members, emotes, settings) */
.room-container {
  display: none !important;
}

/* Nuclear option: hide ALL children of neko-main except video */
.neko-main > *:not(.video-container) {
  display: none !important;
}

/* Target individual elements in case they escape their parent */
.settings,
.controls,
.emotes,
.members,
.room-menu {
  display: none !important;
}

/* Video overlay menus (?, en, clipboard, fullscreen, etc.) */
/* These are INSIDE .video-container so the nuclear option doesn't catch them */
/* On desktop: hide all video menus */
/* On mobile: keep the keyboard button visible for text input */
.video-menu,
ul.video-menu,
.video-menu.top,
.video-menu.bottom {
  display: none !important;
}

/* Mobile keyboard is handled by JS injection in the magic link wrapper
   (floating ⌨️ button) — no need to un-hide Neko's native keyboard here */

/* Help button, language selector */
.fa-question-circle,
i.fa-question-circle,
[class*="question"],
[class*="locale"] {
  display: none !important;
}

/* Tooltips - use high specificity to override Neko's .tooltip { display: block !important } */
#neko .tooltip,
body .tooltip,
.tooltip.popover,
div.tooltip,
.tooltip[x-placement] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Notification toasts - keep but restyle */
.vue-notification-group {
  z-index: 10000 !important;
}

/* ----------------------------------------------------------
   2. VIDEO - FILL ENTIRE VIEWPORT
   ---------------------------------------------------------- */

/* Root container */
#neko {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* dynamic viewport height for mobile */
  overflow: hidden !important;
  background: #000 !important;
}

/* Main area - fill everything */
.neko-main {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Video container - take all available space */
.video-container {
  flex: 1 1 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

.video-container .video {
  width: 100% !important;
  height: 100% !important;
}

.video-container .video .player {
  width: 100% !important;
  height: 100% !important;
}

.video-container .video .player video,
.video-container .video .player canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ----------------------------------------------------------
   3. CONNECT / SPLASH SCREEN - Anna Branded
   ---------------------------------------------------------- */

/* Overlay background */
.connect {
  background: var(--anna-cream) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dialog window */
.connect .window {
  background: white !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(90, 122, 110, 0.15) !important;
  padding: 40px !important;
  max-width: 380px !important;
  width: 90% !important;
  border: none !important;
}

/* Logo area */
.connect .logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.connect .logo img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
}

/* Replace "n" + ".eko" text with "Anna" via CSS */
.connect .logo span {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--anna-text) !important;
  letter-spacing: -0.5px !important;
}

/* Hide the bold "n" separately - we want the span to show our replaced text */
.connect .logo span b {
  font-weight: 600 !important;
  color: var(--anna-text) !important;
}

/* Form container */
.connect .message {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* "Please Log In" text */
.connect .message > span {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: var(--anna-text-secondary) !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
}

/* Input fields */
.connect .message input[type="text"],
.connect .message input[type="password"] {
  background: var(--anna-cream) !important;
  border: 1.5px solid var(--anna-cream-dark) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 16px !important; /* prevents iOS zoom */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  color: var(--anna-text) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
}

.connect .message input:focus {
  border-color: var(--anna-sage) !important;
}

.connect .message input::placeholder {
  color: var(--anna-text-secondary) !important;
  opacity: 0.6 !important;
}

/* Connect button */
.connect .message button[type="submit"],
.connect .message button {
  background: var(--anna-sage) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 4px !important;
}

.connect .message button:hover {
  background: var(--anna-sage-dark) !important;
}

.connect .message button:active {
  transform: scale(0.98) !important;
}

/* ----------------------------------------------------------
   4. MOBILE OPTIMIZATIONS
   ---------------------------------------------------------- */

/* Prevent pull-to-refresh and overscroll */
html {
  overscroll-behavior: none !important;
  overflow: hidden !important;
  height: 100% !important;
  height: 100dvh !important;
}

body {
  overscroll-behavior: none !important;
  overflow: hidden !important;
  height: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Safe area insets for notched phones */
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  padding-left: env(safe-area-inset-left) !important;
  padding-right: env(safe-area-inset-right) !important;
  background: #000 !important;
}

/* Prevent text selection on UI elements (not on video) */
.connect, .header-container, .room-container {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Smooth touch interactions on video */
.video-container {
  touch-action: manipulation !important;
  -webkit-touch-callout: none !important;
}

/* Prevent iOS bounce/elastic scroll */
#neko {
  -webkit-overflow-scrolling: auto !important;
}

/* Handle landscape orientation - maximize video area */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .connect .window {
    padding: 20px 30px !important;
    flex-direction: row !important;
    max-width: 600px !important;
  }

  .connect .logo img {
    width: 50px !important;
    height: 50px !important;
  }

  .connect .logo span {
    font-size: 22px !important;
  }
}

/* Small mobile screens */
@media screen and (max-width: 480px) {
  .connect .window {
    padding: 30px 24px !important;
    border-radius: 16px !important;
    margin: 16px !important;
  }

  .connect .logo img {
    width: 64px !important;
    height: 64px !important;
  }

  .connect .logo span {
    font-size: 24px !important;
  }
}

/* ----------------------------------------------------------
   5. NOTIFICATION TOASTS - Anna styled
   ---------------------------------------------------------- */

.vue-notification-group .vue-notification {
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  margin: 8px !important;
  border-left: none !important;
}

/* ----------------------------------------------------------
   6. FULLSCREEN BUTTON - keep accessible but restyle
   ---------------------------------------------------------- */

/* If Neko has a fullscreen toggle, style it Anna-like */
.video-container .video .player .overlay {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.video-container .video .player:hover .overlay {
  opacity: 1 !important;
}

/* ----------------------------------------------------------
   7. CURSOR STYLING
   ---------------------------------------------------------- */

/* Let the remote cursor be visible but don't show local cursor indicators */
.video-container .video .player canvas {
  cursor: default !important;
}

/* ----------------------------------------------------------
   8. HIDE NOSCRIPT FALLBACK & MISC
   ---------------------------------------------------------- */

/* Hide the "A self hosted virtual browser..." noscript text */
noscript,
#neko > :not(main):not(.connect):not(.vue-notification-group) {
  display: none !important;
}

/* Hide any remaining Neko branding links */
a[href*="github.com/m1k1o/neko"] {
  pointer-events: none !important;
}

/* Hide the side panel if it somehow shows */
.side-container,
.chat-container {
  display: none !important;
}

/* ----------------------------------------------------------
   9. HIDE AUDIO / VOLUME / SPEAKER CONTROLS
   Neko V2 has audio streaming controls that appear as
   floating icons — hide them for a clean mobile experience
   ---------------------------------------------------------- */

/* Player overlay — Neko's "click to enable audio" screen.
   Shows a giant speaker icon (i.fas.fa-volume-up) that blocks all
   touch interaction on mobile, making the browser feel stuck. */
.player-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Volume/audio FontAwesome icons (fa-volume-up, fa-volume-down, etc.) */
i.fa-volume-up,
i.fa-volume-down,
i.fa-volume-mute,
i.fa-volume-off,
i[class*="fa-volume"] {
  display: none !important;
}

/* Generic volume/audio/speaker controls */
[class*="volume"],
[class*="audio"],
[class*="speaker"],
[class*="microphone"],
.volume,
.audio,
.speaker,
.mic {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Media player overlay controls (play/pause/volume in video area) */
.video-container .video .player .overlay .controls,
.video-container .video .player .overlay [class*="volume"],
.video-container .video .player .overlay [class*="audio"] {
  display: none !important;
}

/* iOS WebRTC audio indicator (PiP-style speaker badge) */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel {
  display: none !important;
}