/* Shared language dropdown — used on both the landing page and the app. */
#lang-switcher {
  position: relative;
}

.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #f4f2fa);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(217, 70, 239, 0.4);
}
.lang-switcher-btn svg { opacity: 0.6; transition: transform 0.2s ease; }
.lang-switcher-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-code { letter-spacing: 0.02em; }

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  background: #14101c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 6px;
  margin: 0;
  list-style: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 80;
}
[dir="rtl"] .lang-switcher-menu { right: auto; left: 0; }

/* Branded thin scrollbar for the dropdown list itself — site.css defines this
   globally for the landing page, but app.css doesn't, so without this the
   app page's dropdown falls back to the bare OS scrollbar. */
.lang-switcher-menu { scrollbar-width: thin; scrollbar-color: var(--magenta, #d946ef) transparent; }
.lang-switcher-menu::-webkit-scrollbar { width: 8px; }
.lang-switcher-menu::-webkit-scrollbar-track { background: transparent; }
.lang-switcher-menu::-webkit-scrollbar-thumb {
  background-image: var(--gradient, linear-gradient(120deg, #29b6f6, #d946ef));
  border-radius: 999px;
  border: 2px solid var(--bg, #0a0712);
  background-clip: padding-box;
}
.lang-switcher-menu::-webkit-scrollbar-thumb:hover { border-width: 1px; }

.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.86rem;
  color: var(--muted, #a29cb8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switcher-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--text, #f4f2fa); }
.lang-switcher-item.is-active {
  color: var(--text, #f4f2fa);
  background: linear-gradient(120deg, rgba(41, 182, 246, 0.16), rgba(217, 70, 239, 0.16));
}

/* App screens: no nav bar to sit in, so float the switcher top-right of the
   viewport. Specificity note: #lang-switcher (ID, 1-0-0) sets position:relative
   for the nav-mounted landing-page use — this rule must out-specificity it
   (ID+class, 1-1-0) or it silently loses and the switcher renders inline
   instead of fixed. */
#lang-switcher.lang-switcher-floating {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 50;
}
[dir="rtl"] #lang-switcher.lang-switcher-floating { right: auto; left: calc(20px + env(safe-area-inset-left)); }

/* Back button: mirrors the language switcher on the opposite corner. */
.back-btn-floating {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: calc(20px + env(safe-area-inset-left));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #f4f2fa);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.back-btn-floating:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(41, 182, 246, 0.4); }
[dir="rtl"] .back-btn-floating { left: auto; right: calc(20px + env(safe-area-inset-right)); }
[dir="rtl"] .back-btn-floating svg { transform: scaleX(-1); }

@media (max-width: 480px) {
  .lang-switcher-btn { padding: 7px 10px; font-size: 0.76rem; }
}