/* aelo.io — модуль мовних застосунків (09.11.2026). Кольори беруться з токенів застосунку, з запасними значеннями. */
.lpx{--x-bg:var(--bg,#F5EEE3);--x-card:var(--card,#FBF8F3);--x-ink:var(--ink,#1A1A18);--x-soft:var(--ink-soft,#5d5850);--x-line:var(--line,rgba(26,26,24,.12));
  --x-acc:var(--terra,#D9663A);--x-wash:var(--peach-wash,rgba(217,102,58,.12));--x-ok:#2F8F5B;--x-bad:#C2452D;
  font-family:var(--font-sans,system-ui,-apple-system,"Segoe UI",sans-serif);color:var(--x-ink);font-size:15px;line-height:1.45}
.lpx[data-app="lingo"]{--x-bg:#F4ECE0;--x-card:#FFFBF5;--x-ink:#2E2018;--x-soft:#6E5B4C;--x-line:rgba(46,32,24,.14);--x-acc:#B5703C;--x-wash:rgba(181,112,60,.12)}
.lpx *{box-sizing:border-box}
.lpx button,.lpx input,.lpx select,.lpx textarea{font:inherit;color:inherit}
.lpx-back{position:fixed;inset:0;z-index:2147482900;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.lpx-panel{position:fixed;z-index:2147482910;left:0;right:0;bottom:0;margin:0 auto;width:100%;max-width:640px;height:min(92dvh,760px);
  display:flex;flex-direction:column;background:var(--x-bg);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);
  transform:translateY(102%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s;padding-bottom:env(safe-area-inset-bottom,0px)}
.lpx.on .lpx-back{opacity:1;visibility:visible;transition-delay:0s}
.lpx.on .lpx-panel{transform:none;visibility:visible;transition-delay:0s}
@media (min-width:720px) and (min-height:620px){.lpx-panel{bottom:auto;top:50%;border-radius:20px;transform:translateY(-46%);opacity:0;transition:transform .22s,opacity .2s,visibility 0s linear .22s}
  .lpx.on .lpx-panel{transform:translateY(-50%);opacity:1}}
@media (prefers-reduced-motion:reduce){.lpx-back,.lpx-panel{transition:none!important}}
html.lpx-open{overflow:hidden}
.lpx-head{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.lpx-title{flex:1;margin:0;font:600 19px/1.2 var(--font-display,inherit);letter-spacing:-.01em}
.lpx-x{width:38px;height:38px;border:0;border-radius:50%;background:var(--x-wash);font-size:22px!important;line-height:1!important;cursor:pointer;flex:none}
.lpx-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:6px 16px 16px;overflow:auto;overscroll-behavior:contain}
.lpx-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none}
.lpx-tabs::-webkit-scrollbar{display:none}
.lpx-tab{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--x-line);background:transparent;cursor:pointer;font-weight:600!important;font-size:13.5px!important;color:var(--x-soft)!important}
.lpx-tab.on{background:var(--x-ink);border-color:var(--x-ink);color:var(--x-bg)!important}
.lpx-lead{margin:0;color:var(--x-soft)}
.lpx-note{margin:0;font-size:12.5px;color:var(--x-soft)}
.lpx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lpx-card{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;text-align:left;background:var(--x-card);border:1px solid var(--x-line);border-radius:14px;cursor:pointer}
.lpx-card:hover{border-color:var(--x-acc)}
.lpx-e{font-size:22px;flex:none}
.lpx-ct{font-weight:600;font-size:14.5px;line-height:1.25}
.lpx-log{flex:1;min-height:180px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px}
.lpx-msg{max-width:88%;padding:10px 12px;border-radius:16px;background:var(--x-card);border:1px solid var(--x-line);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-start}
.lpx-msg.me{align-self:flex-end;background:var(--x-ink);color:var(--x-bg);border-color:var(--x-ink)}
.lpx-msg.ai{align-self:flex-start}
.lpx-msg.wait{opacity:.6}
.lpx-msg.err{border-color:var(--x-bad);color:var(--x-bad)}
.lpx-txt{flex:1;min-width:0}
.lpx-say{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--x-wash);cursor:pointer;font-size:14px!important}
.lpx-fb{flex-basis:100%;font-size:13px;line-height:1.4;padding:8px 10px;border-radius:10px;background:rgba(194,69,45,.08);color:var(--x-ink)}
.lpx-fb.ok{background:rgba(47,143,91,.1)}
.lpx-fb b{font-weight:600}
.lpx-sum{align-self:stretch;padding:12px;border-radius:14px;background:var(--x-wash);font-weight:600}
.lpx-bar{display:flex;gap:8px;align-items:flex-end;flex:none}
.lpx-in{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;padding:11px 12px;border-radius:12px;border:1px solid var(--x-line);background:var(--x-card);font-size:16px!important}
.lpx-mic,.lpx-send,.lpx-btn,.lpx-ghost,.lpx-play{min-height:44px;padding:0 14px;border-radius:12px;border:0;cursor:pointer;font-weight:600!important;font-size:14px!important;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.lpx-mic{background:var(--x-wash);color:var(--x-acc)!important}
.lpx-mic.on{background:var(--x-acc);color:#fff!important}
.lpx-mic[disabled]{opacity:.45;cursor:default}
.lpx-send,.lpx-btn,.lpx-play{background:var(--x-acc);color:#fff!important}
.lpx-ghost{background:transparent;border:1px solid var(--x-line);color:var(--x-ink)!important}
@media (max-width:420px){.lpx-bar{flex-wrap:wrap}.lpx-in{flex-basis:100%}.lpx-mic,.lpx-send{flex:1}}
.lpx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.lpx-sel,.lpx-time{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--x-line);background:var(--x-card);font-size:16px!important}
.lpx-pron{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 14px;background:var(--x-card);border:1px solid var(--x-line);border-radius:18px;text-align:center}
.lpx-prog{font:500 12px/1.2 var(--font-mono,ui-monospace,monospace);color:var(--x-soft);letter-spacing:.04em}
.lpx-big{font:600 clamp(24px,6vw,32px)/1.15 var(--font-display,inherit);letter-spacing:-.02em;overflow-wrap:anywhere}
.lpx-sub{color:var(--x-soft)}
.lpx-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lpx-res{min-height:22px;font-weight:600}
.lpx-res.ok{color:var(--x-ok)}.lpx-res.bad{color:var(--x-bad)}
.lpx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:none}
.lpx-chips::-webkit-scrollbar{display:none}
.lpx-chip{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--x-line);background:var(--x-card);cursor:pointer;font-size:13.5px!important}
.lpx-chip.on{border-color:var(--x-acc);background:var(--x-wash);color:var(--x-acc)!important;font-weight:600!important}
.lpx-list{display:flex;flex-direction:column;gap:8px}
.lpx-ph{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:11px 12px;background:var(--x-card);border:1px solid var(--x-line);border-radius:12px;cursor:pointer}
.lpx-ph-t{font-weight:600;font-size:16px}
.lpx-ph-tr{font-size:12.5px;color:var(--x-acc)}
.lpx-ph-m{font-size:13.5px;color:var(--x-soft)}
.lpx-opt{width:100%;min-height:46px;padding:10px 12px;border-radius:12px;border:1px solid var(--x-line);background:var(--x-bg);cursor:pointer;text-align:left}
.lpx-opt.ok{border-color:var(--x-ok);background:rgba(47,143,91,.12)}
.lpx-opt.bad{border-color:var(--x-bad);background:rgba(194,69,45,.1)}
.lpx-lab{display:flex;align-items:center;gap:12px;font-weight:600}

/* Lingo: кнопка входу в шапці — як «рів. 1» */
.lpx-entry{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;margin-right:6px;border-radius:999px;border:1px solid rgba(46,32,24,.18);
  background:rgba(255,251,245,.7);color:#6E4A2A;font:600 12.5px/1 inherit;cursor:pointer;white-space:nowrap}
.lpx-entry:hover{border-color:#B5703C}
body:has(.onb-overlay) .lpx-entry{display:none}