/* ---------------------------------------------------------------------------
   Translate control.

   Sits beside the chat bubble at the bottom-left. Google's own furniture — the
   grey select, the top banner and the tooltip balloon — is suppressed, because
   it overlays the site and ignores the brand entirely.
   --------------------------------------------------------------------------- */

/* Sits BESIDE the chat launcher rather than stacked above it. Stacking made
   the fixed column ~136px tall, which then had to be reserved as empty space
   at the bottom of every page so the footer's copyright line stayed clear.
   Side by side, the pair is one launcher tall and the reserved area halves. */
.translate-widget {
    position: fixed;
    left: 96px;
    bottom: 24px;
    z-index: 1079;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.translate-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid var(--line, #e2e8f2);
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #181d38);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(16, 35, 63, .14);
    transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.translate-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--brand, #06BBCC);
    color: var(--brand, #06BBCC);
}
.translate-toggle:focus-visible {
    outline: 3px solid rgba(6, 187, 204, .45);
    outline-offset: 2px;
}
.translate-toggle i { font-size: 1.05rem; color: var(--brand, #06BBCC); }

.translate-widget.is-translated .translate-toggle {
    border-color: var(--accent, #F57905);
    color: var(--accent, #F57905);
}
.translate-widget.is-translated .translate-toggle i { color: var(--accent, #F57905); }

/* --- Menu ------------------------------------------------------------------ */

.translate-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: 220px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--line, #e2e8f2);
    border-radius: .75rem;
    box-shadow: 0 20px 48px rgba(16, 35, 63, .24);

    scrollbar-width: thin;
    scrollbar-color: #c3cede transparent;
}
.translate-menu::-webkit-scrollbar { width: 8px; }
.translate-menu::-webkit-scrollbar-thumb {
    background: #c3cede;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.translate-menu__head {
    margin: .25rem .5rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #64708a);
}

.translate-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .65rem;
    border: 0;
    border-radius: .4rem;
    background: none;
    font: inherit;
    font-size: .9rem;
    color: var(--ink, #181d38);
    cursor: pointer;
}
.translate-option:hover { background: #f1f5fa; }
.translate-option.is-active {
    background: var(--brand, #06BBCC);
    color: #fff;
    font-weight: 600;
}

.translate-menu__note {
    margin: .5rem .5rem 0;
    padding-top: .5rem;
    border-top: 1px solid var(--line, #e2e8f2);
    font-size: .72rem;
    line-height: 1.5;
    color: var(--muted, #64708a);
}

/* --- Suppress Google's own chrome ------------------------------------------
   The container is moved off-screen rather than hidden with display:none.
   Google's translation is driven through the <select class="goog-te-combo"> it
   renders in here, and a display:none ancestor leaves that control inert — the
   menu appears to do nothing at all. Clipping keeps it functional and
   invisible. */

#google_translate_element {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.goog-te-banner-frame,
.skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }

/* Google shifts <body> down by the height of its banner. */
body { top: 0 !important; position: static !important; }

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 480px) {
    .translate-widget { left: 78px; bottom: 14px; }
    .translate-toggle { padding: .8rem; border-radius: 50%; }
    .translate-toggle__label { display: none; }
    .translate-menu { width: calc(100vw - 92px); }
}

/* Right-to-left page: mirror to match the chat bubble. */
[dir="rtl"] .translate-widget { left: auto; right: 96px; }
[dir="rtl"] .translate-menu { left: auto; right: 0; }
@media (max-width: 480px) {
    [dir="rtl"] .translate-widget { left: auto; right: 78px; }
}
[dir="rtl"] .translate-option { text-align: right; }

@media (prefers-reduced-motion: reduce) {
    .translate-toggle { transition: none; }
    .translate-toggle:hover { transform: none; }
}