/* Breakpoint-note (#tabletfix): denne "calm mobile"-fil stoppede ved 640px, mens
   selve mobil-stakken i translator.bundle.min.css loeber til 767px. Baandet
   641-767 (telefoner i landskab, smaa tablets i portraet) fik derfor stakken
   UDEN skinnet: ingen Foto/Dikter/Indsaet-chips og ingen Kopier/Laes op/Ryd-pille
   (bundlen skjuler .st-floating-actions i hele <=767, og genskabelsen laa her
   under 640). Alle <=640 i denne fil er derfor rykket til <=767; det samme er
   MQ i assets/js/oversaettelse-mobile.js, som injicerer Ryd-knappen. */

/* oversaettelse-mobile.css — #2522 mobile language bar & target actions */

.calm-source-pills,
.calm-quickpaste-btn,
.calm-stt-btn,
.calm-img-btn,
.calm-target-actions,
.calm-copy-toast {
  display: none;
}

/* ── calm-quickpaste-stt-polish ── */
.st-editor-wrap {
  position: relative;
}

/* ── #4028 regression fix: symmetric mobile gutter ──
   skrivsikkert-shared.css gives `.bb-oversaettelse .split-translator` an ASYMMETRIC
   desktop gutter — padding-left: var(--bb-rail-gutter) (= 22px, the rail->content
   gutter every robot shares), padding-right: var(--bb-content-gutter) (= 32px).
   The left value exists to clear the 104px desktop sidebar RAIL. On mobile
   (<=767px) that rail is replaced by the bottom nav, so the asymmetry compensates
   for nothing and just leaves a fat gap on the right (reported regression). Restore
   a symmetric gutter once the rail is gone. This file loads after
   skrivsikkert-shared.css and the selector is one element deeper, so it wins;
   desktop (>=768px) is untouched. */
@media (max-width: 767px) {
  html body .bb-oversaettelse .split-translator {
    padding-left: var(--space-2, 8px) !important;
    padding-right: var(--space-2, 8px) !important;
  }
}

@media (max-width: 767px) {
  .st-editor-wrap > .calm-source-pills {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    gap: 8px;
  }

  .calm-source-pills > .calm-quickpaste-btn,
  .calm-source-pills > .calm-stt-btn,
  .calm-source-pills > .calm-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(200, 180, 160, 0.35);
    border-radius: 16px;
    background: rgba(255, 254, 251, 0.82);
    color: #4A7A68;
    font: 600 12.5px / 1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .calm-source-pills > .calm-quickpaste-btn svg,
  .calm-source-pills > .calm-stt-btn svg,
  .calm-source-pills > .calm-img-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .st-editor-wrap .ql-editor {
    padding-bottom: 56px !important;
  }

  .calm-source-pills > .calm-quickpaste-btn:hover,
  .calm-source-pills > .calm-stt-btn:hover,
  .calm-source-pills > .calm-img-btn:hover {
    background: rgba(74, 122, 104, 0.06);
    border-color: rgba(74, 122, 104, 0.25);
    transform: translateY(-1px);
  }

  .calm-source-pills > .calm-quickpaste-btn:active,
  .calm-source-pills > .calm-stt-btn:active,
  .calm-source-pills > .calm-img-btn:active {
    background: rgba(74, 122, 104, 0.10);
    transform: translateY(0);
  }

  .calm-source-pills > .calm-quickpaste-btn:focus-visible,
  .calm-source-pills > .calm-stt-btn:focus-visible,
  .calm-source-pills > .calm-img-btn:focus-visible {
    outline: 2px solid #4A7A68;
    outline-offset: 2px;
  }

  .calm-source-pills > .calm-quickpaste-btn:focus:not(:focus-visible),
  .calm-source-pills > .calm-stt-btn:focus:not(:focus-visible),
  .calm-source-pills > .calm-img-btn:focus:not(:focus-visible) {
    outline: none;
  }

  .calm-source-pills > .calm-stt-btn[data-recording="1"] {
    color: #A6594B;
    border-color: rgba(166, 89, 75, 0.42);
    background: rgba(166, 89, 75, 0.08);
  }
}

@media (max-width: 520px) {
  .st-editor-wrap > .calm-source-pills {
    right: 10px;
    bottom: 10px;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calm-source-pills > .calm-quickpaste-btn,
  .calm-source-pills > .calm-stt-btn,
  .calm-source-pills > .calm-img-btn {
    transition: none !important;
  }
  .calm-source-pills > .calm-quickpaste-btn:hover,
  .calm-source-pills > .calm-stt-btn:hover,
  .calm-source-pills > .calm-img-btn:hover {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  /* #3050 — dark mode: the source pills are a bright rgba(255, 254, 251, 0.82)
     in light mode; on the dark source editor they must read as a dark chip,
     not a bright pill. Sage matches the translator dark controls (#8BC4A9). */
  [data-theme="dark"] .calm-source-pills > .calm-quickpaste-btn,
  [data-theme="dark"] .calm-source-pills > .calm-stt-btn,
  [data-theme="dark"] .calm-source-pills > .calm-img-btn {
    background-color: rgba(42, 38, 34, 0.92) !important;
    background-image: none !important;
    border-color: rgba(232, 224, 216, 0.18) !important;
    color: #8BC4A9;
  }
  [data-theme="dark"] .calm-source-pills > .calm-quickpaste-btn:hover,
  [data-theme="dark"] .calm-source-pills > .calm-stt-btn:hover,
  [data-theme="dark"] .calm-source-pills > .calm-img-btn:hover {
    background: rgba(139, 196, 169, 0.14);
    border-color: rgba(139, 196, 169, 0.35);
  }
}
/* ── end calm-quickpaste-stt-polish ── */

@media (max-width: 767px) {
  html, body {
    overscroll-behavior-y: contain;
  }

  /* ── Sticky language bar 65px ── */
  .translate-page .split-translator .st-language-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    min-height: 65px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  [data-theme="dark"] .translate-page .split-translator .st-language-bar,
  .translate-page[data-theme="dark"] .split-translator .st-language-bar {
    background: transparent !important;
    border-bottom-color: transparent !important;
  }

  /* ── Equal-width language groups ── */
  .st-language-bar .st-lang-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 22px) !important;
  }

  .st-language-bar .st-lang-selector {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
    gap: 9px !important;
  }

  .st-language-bar .st-lang-name {
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* ── Hide detected hint on mobile ── */
  .st-detected-hint {
    display: none !important;
  }

  /* ── Rectangular flags ── */
  .st-language-bar .st-flag {
    border-radius: 3px !important;
    object-fit: cover !important;
  }

  /* ── Hide langbar tools and overflow on mobile ── */
  .st-langbar-tools {
    display: none !important;
  }

  .st-overflow-btn {
    display: none !important;
  }

  /* ── Mobile language dropdown positioning ── */
  .st-lang-dropdown.open {
    position: fixed !important;
    top: 65px !important;
    margin-top: 0 !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 80px) !important;
    z-index: 9000 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  }

  [data-theme="dark"] .st-lang-dropdown.open {
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
  }

  .st-lang-dropdown.open .st-lang-search {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* ── Target padding cleanup ── */
  .st-target-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }

  .st-target-output {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .st-target-output .ql-editor {
    padding-bottom: 16px !important;
  }

  /* ── Hide download, chat, divider, T-trigger popover on mobile ── */
  #downloadBtn,
  .st-download-wrap,
  #chatIconBtn,
  .st-float-chat,
  .st-float-divider {
    display: none !important;
  }

  .st-calm-heading-popover {
    display: none !important;
  }

  /* ── Output-box action toolbar ── */
  .translate-page .split-translator .st-target-wrap > .st-floating-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto 30px !important;
    padding: 4px !important;
    gap: 2px !important;
    background: #FFFEFB !important;
    border: 1px solid #E8DDD4 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(58, 47, 38, 0.06) !important;
    backdrop-filter: none !important;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .translate-page .split-translator .st-target-wrap > .st-floating-actions.is-hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }

  [data-theme="dark"] .translate-page .split-translator .st-target-wrap > .st-floating-actions {
    background: #2A2520 !important;
    border-color: #3D3530 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  }

  /* ── Float buttons: 32x32, transparent, warm text ── */
  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    color: #5C4D43 !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background 0.15s ease;
  }

  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn:hover {
    background: rgba(74, 122, 104, 0.08) !important;
  }

  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn:active {
    background: rgba(74, 122, 104, 0.14) !important;
  }

  [data-theme="dark"] .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn {
    color: #C4B8AE !important;
  }

  [data-theme="dark"] .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn:hover {
    background: rgba(139, 196, 169, 0.1) !important;
  }

  /* ── Copy button copied state ── */
  .translate-page .split-translator .st-target-wrap > .st-floating-actions #copyBtn.active {
    color: #4A7A68 !important;
    background: rgba(74, 122, 104, 0.10) !important;
  }

  [data-theme="dark"] .translate-page .split-translator .st-target-wrap > .st-floating-actions #copyBtn.active {
    color: #8BC4A9 !important;
    background: rgba(139, 196, 169, 0.14) !important;
  }

  /* ── Clear button destructive press ── */
  .translate-page .split-translator .st-target-wrap > .st-floating-actions .calm-clear-btn:active {
    color: #A6594B !important;
    background: rgba(166, 89, 75, 0.1) !important;
  }

  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Ryd-knappen deler nu de 16px med Kopier/Laes op (samme 24-viewBox-ikon).
     De gamle 15px hoerte til den skaeve 18x20-tegning og gjorde ikonet mindre. */

  /* ── Kopieret toast ── */
  .calm-copy-toast {
    position: fixed;
    bottom: 132px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    padding: 8px 20px;
    background: #4A7A68;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .calm-copy-toast.is-visible {
    opacity: 1;
  }

  [data-theme="dark"] .calm-copy-toast {
    background: #8BC4A9;
    color: #1A1714;
  }

  /* ── Focus-visible rings ── */
  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn:focus-visible {
    outline: 2px solid #4A7A68;
    outline-offset: 2px;
  }

  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn:focus:not(:focus-visible) {
    outline: none;
  }
}

/* ── #2613/#3190: translate CTA remains viewport-level; output actions stay in output box ── */
@media (max-width: 767px) {
  html body .translate-page .split-translator .st-floating-translate:not([style*="display: none"]):not([style*="display:none"]) {
    left: 16px !important;
    right: auto !important;
    transform: none !important;
    width: calc((100vw - 42px) * 0.60) !important;
    max-width: calc((100vw - 42px) * 0.60) !important;
  }

  html body .translate-page .split-translator:has(.st-floating-translate:not([hidden]):not([style*="display: none"]):not([style*="display:none"])) .st-target-wrap > .st-floating-actions {
    margin-bottom: 62px !important;
  }

  /* The bottom mobile nav (#bb-mobile-nav) grows its height by the home-indicator
     safe area: calc(60px + env(safe-area-inset-bottom)). The CTA must track that
     same inset, or on home-indicator iPhones (14/15/Pro) its bottom ~22px slides
     behind the nav (which sits at z-index 9000), cutting off the primary translate
     action and letting nav taps steal the lower CTA. env() resolves to 0 on
     devices without an inset, so this is a no-op there. */
  html body.has-mn-bar .translate-page .split-translator .st-floating-translate:not([style*="display: none"]):not([style*="display:none"]) {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Reduced motion ── */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .translate-page .split-translator .st-target-wrap > .st-floating-actions,
  .translate-page .split-translator .st-target-wrap > .st-floating-actions .st-float-btn,
  .calm-copy-toast,
  html body .translate-page .split-translator .st-floating-translate {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS keyboard: pin the shell to the visual viewport (#translator-kb-gap)

   Reported on iPhone: opening the keyboard leaves a gap of page background
   between the bottom card and the mobile nav — the layout "does not adjust".

   iOS does not resize the LAYOUT viewport for the virtual keyboard. The
   document keeps its full height, .split-translator keeps its calc(100dvh - 60px)
   box, and iOS just pans the smaller VISUAL viewport around inside it. The part
   of the app pushed below the visible area is dead space; the strip the user
   sees above the nav is background the pan exposed. No CSS length on iOS tracks
   the keyboard, so nothing reacts on its own.

   Same fix as /chat/ (chat-ny-blod-bolge.css:5311) and /email/
   (email-responsive.css:2568): while a translator text field is focused,
   position:fixed <html>/<body> onto the visual viewport that
   js/mobile-viewport.js measures — height = --ss-vv-height, top = --ss-vv-offset,
   rewritten on every visualViewport resize/scroll. The app then ends exactly
   where the keyboard begins.

   Scoped to the keyboard: the classes exist only while typing, so the idle
   layout keeps behaving exactly as before.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html.ss-mobile-input-active,
  html.ss-mobile-kb-open {
    position: fixed !important;
    top: var(--ss-vv-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.ss-mobile-input-active > body,
  html.ss-mobile-kb-open > body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* The app chain follows the visual viewport, overriding the bundle's
     calc(100dvh - 60px) (which is right when the keyboard is DOWN). The mobile
     nav is hidden below, so its 60px is not reserved here — that reservation is
     exactly what would reappear as the gap. */
  html.ss-mobile-kb-open body .translate-page .robot-container,
  html.ss-mobile-kb-open body .translate-page .split-translator {
    height: var(--ss-vv-height, 100dvh) !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
  }

  /* With the shell pinned to the visual viewport the nav would sit on top of the
     editor, stealing the row right above the keyboard. Same call as /email/,
     which hides it for the open reader (email-responsive.css:1484). It returns
     the moment the keyboard closes. */
  html.ss-mobile-kb-open #bb-mobile-nav,
  html.ss-mobile-kb-open .mn-fab-group {
    display: none !important;
  }

  /* The floating translate CTA reserves room for the nav (72px + safe area);
     with the nav gone it must sit on the editor's own bottom edge instead. */
  html.ss-mobile-kb-open body.has-mn-bar .translate-page .split-translator .st-floating-translate:not([style*="display: none"]):not([style*="display:none"]) {
    bottom: 16px !important;
  }
}

/* ── iOS focus auto-zoom (#translator-kb-zoom) ─────────────────────────────
   Reported after the keyboard fix landed: the keyboard adjusts, but the page no
   longer fills the screen — everything looks enlarged and the right edge
   (Paste chip, target-language selector, nav) is cut off.

   That is Safari's focus auto-zoom, not a layout bug: iOS zooms the page in
   whenever a focused editable has a computed font-size BELOW 16px, and it does
   not always zoom back out on blur. The translator's mobile stack sets the two
   editors to 15px (main.css:2621 and :2806, both inside max-width:767px), so
   every tap into the text field zooms the page by ~1.07 and everything outside
   the new visual viewport is cut off.

   Fix: 16px on the editable surfaces at mobile — the canonical fix, and the one
   this file already applies to the language-search field (line ~251).
   maximum-scale/user-scalable=no would also stop the zoom, but it disables pinch
   zoom for everyone and iOS ignores it anyway. 1px larger text on mobile is the
   whole visible cost. */
@media (max-width: 767px) {
  html body .translate-page .split-translator .st-source-editor .ql-editor,
  html body .translate-page .split-translator .st-target-output .ql-editor,
  html body .translate-page .split-translator .ql-editor,
  html body .translate-page .split-translator textarea,
  html body .translate-page .split-translator input[type="text"],
  html body .translate-page .split-translator input[type="search"],
  html body .translate-page .split-translator input:not([type]) {
    font-size: 16px !important;
  }

  /* The placeholder inherits its own size in the bundle — keep it in step so the
     empty state does not change size the moment the user starts typing. */
  html body .translate-page .split-translator .st-source-editor .ql-editor.ql-blank:before,
  html body .translate-page .split-translator .st-target-output .ql-editor.ql-blank:before {
    font-size: 16px !important;
  }
}