/* Language picker styles for nova-translate.js.
 *
 * They used to be injected as a runtime <style> element. The worker's CSP now
 * refuses inline stylesheets (`style-src 'self'`), so the rules live in a real
 * file that the page links; nova-translate.js only adds the <link> if the page
 * did not already have it. A platform that copies nova-translate.js must copy
 * this file too. */

.nv-lang { position: relative; display: inline-block; font: inherit; z-index: 60; }

.nv-lang summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; line-height: 1; user-select: none;
}
.nv-lang summary::-webkit-details-marker { display: none; }
.nv-lang[open] summary { border-color: var(--accent); color: var(--text); }

.nv-lang-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(320px, 86vw); max-height: min(420px, 70vh); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; z-index: 80;
}
.nv-lang-panel input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--text); padding: 9px 10px; font: inherit; font-size: 13px; margin-bottom: 8px;
}
.nv-lang-panel input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.nv-lang-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: 0; color: var(--text-2); font: inherit; font-size: 13px;
  padding: 8px 9px; border-radius: 8px; cursor: pointer;
  overflow-wrap: anywhere; white-space: normal;
}
.nv-lang-btn:hover, .nv-lang-btn:focus { background: var(--hover); outline: none; }
.nv-lang-btn[aria-current='true'] { background: var(--accent-soft); color: var(--text); font-weight: 700; }
.nv-lang-btn small { color: var(--muted); margin-left: 6px; font-size: 11px; }

.nv-lang-float { position: fixed; right: 16px; bottom: 16px; z-index: 70; }

@media (min-width: 641px) {
  .nv-lang-float .nv-lang-panel { top: auto; bottom: calc(100% + 8px); max-height: min(420px, 60vh); }
}
@media (max-width: 640px) {
  .nv-lang-panel { position: fixed; left: 10px; right: 10px; top: 66px; bottom: auto; width: auto; max-height: calc(100vh - 84px); }
  .nv-lang-float { right: 12px; bottom: 12px; }
  .nv-lang-float .nv-lang-panel { top: auto; bottom: 10px; max-height: 64vh; }
}