/* Scoped mascot control: no shared button/card selectors. */
.translation-owl { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 1040; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #28242a; }
.translation-owl-trigger { display: flex; flex-direction: column; align-items: center; width: 120px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.translation-owl-mascot { display: block; width: 110px; height: auto; margin-bottom: -9px; position: relative; z-index: 1; transform-origin: 50% 95%; filter: drop-shadow(0 5px 6px rgba(67,23,37,.15)); transition: transform .28s ease; pointer-events: none; }
.translation-owl-pill { display: flex; align-items: center; justify-content: center; gap: 9px; width: 120px; min-height: 46px; border-radius: 999px; border: 1px solid #a45a70; background: linear-gradient(165deg, #8b304c, #59172c); color: #fff; box-shadow: 0 6px 20px rgba(67,23,37,.22), inset 0 1px 0 rgba(255,255,255,.2); font-size: 14px; font-weight: 650; transition: box-shadow .2s ease; }
.translation-owl-pill svg { padding-right: 8px; box-sizing: content-box; border-right: 1px solid rgba(255,255,255,.35); }
.translation-owl-trigger:hover .translation-owl-mascot, .translation-owl-trigger:focus-visible .translation-owl-mascot { transform: rotate(-7deg) translateY(-2px); }
.translation-owl-trigger[aria-expanded="true"] .translation-owl-mascot { transform: rotate(9deg); }
.translation-owl-trigger:active .translation-owl-pill { transform: scale(.97); }
.translation-owl button:focus-visible { outline: 3px solid #c49a61; outline-offset: 4px; }
.translation-owl-panel { position: absolute; right: 0; bottom: calc(100% + 16px); width: min(280px, calc(100vw - 32px)); padding: 20px; border: 1px solid #e9dcda; border-radius: 22px; background: #fffdfa; box-shadow: 0 16px 48px rgba(49,23,33,.18); transform-origin: 85% 100%; animation: owl-panel-in .18s ease-out; }
.translation-owl-panel[hidden] { display: none; }
.translation-owl-panel::after { content: ""; position: absolute; right: 49px; bottom: -7px; width: 13px; height: 13px; transform: rotate(45deg); background: #fffdfa; border-right: 1px solid #e9dcda; border-bottom: 1px solid #e9dcda; }
.translation-owl-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.translation-owl-heading h2 { margin: 0; color: #28242a; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.translation-owl-close { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f3ebe9; color: #702038; font-size: 23px; cursor: pointer; }
.translation-owl-hint { margin: 5px 0 15px; font-size: 12px; color: #75686d; }
.translation-owl-options { display: grid; gap: 4px; }
.translation-owl-options button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; color: #28242a; font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.translation-owl-options button:hover, .translation-owl-options button[aria-pressed="true"] { background: #f7eeee; }
.translation-owl-code { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: #eee7e4; color: #655259; font-size: 13px; font-weight: 700; }
.translation-owl-options button[aria-pressed="true"] .translation-owl-code { background: #702038; color: #fff; }
.translation-owl-check { margin-left: auto; color: #702038; visibility: hidden; }
.translation-owl-options button[aria-pressed="true"] .translation-owl-check { visibility: visible; }
.translation-owl-panel[dir="rtl"] .translation-owl-options button { text-align: right; }
.translation-owl-panel[dir="rtl"] .translation-owl-check { margin-left: 0; margin-right: auto; }
@keyframes owl-panel-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .translation-owl { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .translation-owl-trigger, .translation-owl-pill { width: 96px; }
    .translation-owl-mascot { width: 76px; margin-bottom: -7px; }
    .translation-owl-pill { min-height: 44px; font-size: 12px; gap: 6px; }
    .translation-owl-panel { padding: 16px; }
    .translation-owl-panel::after { right: 38px; }
}
@media (max-height: 520px) {
    .translation-owl-mascot { width: 60px; }
    .translation-owl-panel { padding: 12px; max-height: calc(100dvh - 145px); overflow-y: auto; }
    .translation-owl-hint { display: none; }
    .translation-owl-options button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .translation-owl *, .translation-owl *::after { animation: none !important; transition: none !important; transform: none !important; } }