/* Traduttore 翻译 — redesign. Namespace tx-*. Usa le variabili di tema del sito. */
.tx-wrap { max-width: 720px; }

/* niente doppio-tap-zoom sui controlli (i tap veloci sul mic attivavano lo zoom iOS); il pinch con 2 dita resta */
.tx-panel, .tx-panel button, .tx-foot, .wx-guide { touch-action: manipulation; }

/* PANNELLO unico: tutto il traduttore in una sezione con sfondo distinto dalla pagina.
   Altezza NATURALE (niente 100vh) → la tastiera del cellulare non sposta più la sezione. */
/* l'altezza (min-height) la imposta il JS (fitPanel) misurando lo spazio reale disponibile */
.tx-panel { position:relative; display:flex; flex-direction:column; box-sizing:border-box; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:.7rem 1rem .2rem; margin-top:.5rem; }
/* in fullscreen: angoli arrotondati con un piccolo margine (altezza sempre da JS) */
body.tx-focus .tx-panel { margin:.5rem; }

/* testata: tab modalità CENTRATI + utility in alto a destra */
/* testata: ⓘ a sinistra · tab modalità centrati · utility a destra, tutto su una riga */
.tx-head { display:flex; align-items:center; gap:.5rem; margin:.2rem 0 .6rem; }
.tx-actions-right { display:flex; gap:.35rem; }
.tx-modes { flex:1; display:flex; justify-content:center; gap:.5rem; }
/* modalità ATTIVA = colore pieno; NON attiva = neutra/grigia → si capisce subito quale è accesa */
.tx-mode { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line); padding:.5rem 1.05rem; border-radius:10px; cursor:pointer; font-size:1rem; font-weight:700; background:var(--tag-bg); color:var(--ink-soft); transition:background .15s, color .15s, box-shadow .15s; }
.tx-mode .tx-mi { color:currentColor; }
.tx-mode.cur { border-color:transparent; box-shadow:0 3px 9px rgba(0,0,0,.22); }
.tx-mi { width:18px; height:18px; flex:0 0 auto; }
#txModeSimple.cur { background:#2f6fad; color:#fff; }              /* blu */
#txModeSimple.cur .tx-mi { color:#cfe2f5; }
#txModeConv.cur { background:#1a9e78; color:#fff; }                /* verde */
#txModeConv.cur .tx-mi { color:#c7ebdb; }
.tx-info, .tx-full { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.3rem .5rem; cursor:pointer; font-size:1rem; color:var(--ink); }
/* in fullscreen il tasto diventa ✕: solo una X ROSSA, senza riquadro */
body.tx-focus .tx-full { background:none; border:0; color:#e74c3c; font-size:1.3rem; font-weight:700; }
/* condividi: solo icona SVG monocroma, senza sfondo, colore del tema */
.tx-share { background:none; border:0; padding:.3rem; cursor:pointer; color:var(--ink-soft); display:inline-flex; align-items:center; }
.tx-share svg { display:block; }
.tx-share[hidden]{ display:none; }
.tx-share.done { color:var(--accent); }

/* modalità semplice: colonna che riempie il pannello, input+microfoni in basso.
   niente padding-bottom: i tasti lingua restano attaccati al bordo del pannello (footer spostato fuori). */
#modeSemplice { display:flex; flex-direction:column; flex:1; }
/* l'ID #modeSemplice{display:flex} batteva il [hidden] di default → in face-to-face la modalità semplice restava visibile sopra. Ripristina il nascondiglio. */
#modeSemplice[hidden] { display:none; }

/* CORNICE unica attorno a traduzione (sopra) + input (sotto) */
.tx-frame { flex:1; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--card); margin:.3rem 0; overflow:hidden; }
/* area traduzione dentro la cornice (nessun box proprio) */
.tx-last { flex:1; min-height:5rem; margin:0; padding:.9rem; display:flex; gap:.6rem; align-items:flex-start; }
.tx-last-text { flex:1; margin:0; font-size:1.6rem; line-height:1.5; color:var(--ink); word-break:break-word; }
.tx-last-acts { display:flex; flex-direction:column; gap:.15rem; }
.tx-last-acts[hidden]{ display:none; }
.tx-ic { background:none; border:0; cursor:pointer; font-size:1.35rem; }

/* cronologia collassabile */
.tx-histtoggle { display:block; align-self:center; background:none; border:0; color:var(--ink-soft); cursor:pointer; font-size:1.4rem; line-height:1; padding:.15rem 1rem; margin:.2rem 0; }
.tx-histtoggle[hidden]{ display:none; }
.tx-hist { border:0; border-top:1px solid var(--line); max-height:35vh; overflow:auto; margin:0; }
.tx-hist[hidden]{ display:none; }
/* riga cronologia: testo a sinistra, 🔊 a destra */
.tx-row { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-bottom:1px solid var(--line); }
.tx-row:last-child{ border-bottom:0; }
.tx-rowtext { flex:1; min-width:0; }
.tx-src { font-size:.85rem; color:var(--ink-soft); word-break:break-word; }
.tx-out { font-size:1.1rem; color:var(--ink); margin-top:.15rem; word-break:break-word; }
.tx-rowaudio { background:none; border:0; cursor:pointer; font-size:1.25rem; flex:0 0 auto; }

/* casella input + Traduci integrato (centrato in altezza, lato destro) */
/* casella input = campo vero (bordo + angoli + tinta chiara) dentro la cornice */
.tx-inbox { position:relative; margin:.5rem; }
.tx-inbox textarea { width:100%; box-sizing:border-box; padding:.7rem 4.6rem .7rem .8rem; font-size:1.1rem; border:1px solid var(--line); border-radius:10px; resize:none; color:var(--ink); background:var(--tag-bg); }
.tx-go { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:var(--accent); color:#fff; border:0; border-radius:8px; padding:.45rem .8rem; cursor:pointer; font-size:1rem; }
.tx-go:disabled { opacity:.6; }

/* barra input + microfoni spinta in fondo alla colonna */
.tx-bottom { margin-top:auto; padding-top:.6rem; }
.tx-bottom .tx-inbox { margin:0 0 .5rem; }

/* fumetto elegante "parla ora" mentre il microfono ascolta (non tocca l'animazione del mic) */
.tx-speaking { position:relative; align-self:center; margin:.1rem auto .55rem; background:var(--accent); color:#fff; padding:.45rem 1rem; border-radius:16px; font-size:.95rem; font-weight:600; box-shadow:0 4px 12px rgba(47,111,173,.35); animation:txBubble .28s ease; }
.tx-speaking[hidden]{ display:none; }
.tx-speaking::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--accent); border-bottom:0; }
@keyframes txBubble { from{ opacity:0; transform:translateY(8px) scale(.92);} to{ opacity:1; transform:translateY(0) scale(1);} }

/* selettore 对方语言 (seconda lingua: it/en/es/fr/de) — usato in entrambe le modalità */
.tx-langB-row { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.5rem; font-size:.85rem; color:var(--ink-soft); }
.tx-langB-row select { padding:.3rem .55rem; border:1px solid var(--line); border-radius:8px; background:var(--tag-bg); color:var(--ink); font-size:.9rem; }

/* due tasti lingua = microfono, con bandiera */
.tx-langs { display:flex; gap:.6rem; margin-top:.6rem; }
/* footer SOTTO il pannello (fuori dalla cornice): © diritti d'autore + condividi pagina */
.tx-foot { display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin:.2rem .2rem .2rem; padding:0 .6rem; font-size:.8rem; color:var(--ink-soft); }
.tx-copy { white-space:nowrap; }
.tx-sharepage { background:none; border:0; padding:0; cursor:pointer; color:var(--ink-soft); font-size:.82rem; }
.tx-sharepage.done { color:var(--accent); }
.tx-lang { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.9rem; font-size:1.15rem; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; cursor:pointer; font-weight:600; }
/* bandiera SVG inline: si vede uguale su desktop e mobile (le emoji-bandiera su Windows escono come "CN"/"IT") */
.tx-flag { width:24px; height:16px; flex:0 0 auto; border-radius:2px; border:1px solid rgba(0,0,0,.15); }
.tx-lang-mic { font-size:1.05rem; }
.tx-lang.on { background:var(--accent); color:#fff; border-color:var(--accent); animation:txPulse 1s infinite; }
.tx-lang:disabled { opacity:.5; cursor:default; }
@keyframes txPulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── MODALITÀ 面对面 (face to face): due lati speculari, look coerente con la modalità singola ── */
#modeConversa { flex:1; min-height:0; }
#modeConversa[hidden] { display:none; }
#modeConversa:not([hidden]) { display:flex; flex-direction:column; gap:.5rem; }
.f2f-side { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:.5rem; padding:.7rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.f2f-top { transform:rotate(180deg); }                 /* leggibile da chi ti sta di fronte */
.f2f-bubble { flex:1; min-height:3rem; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.5rem; line-height:1.5; overflow:auto; color:var(--ink); word-break:break-word; }
.f2f-ph { color:var(--ink-soft); font-size:1rem; }
.f2f-live { align-self:center; max-width:100%; padding:.3rem .8rem; background:var(--tag-bg); border:1px solid var(--line); border-radius:12px; font-size:1rem; color:var(--ink-soft); word-break:break-word; }
.f2f-live[hidden] { display:none; }
.f2f-bar { display:flex; gap:.5rem; align-items:center; justify-content:center; }
.f2f-mic { flex:1; max-width:240px; padding:.7rem 1rem; background:var(--accent); color:#fff; border:0; border-radius:10px; cursor:pointer; font-size:1.05rem; font-weight:600; }
.f2f-mic.on { animation:txPulse 1s infinite; }
.f2f-mic:disabled { opacity:.5; cursor:default; }
/* 🔊 nell'angolo in alto a destra della bolla (fuori dal flusso, non cancellato dal testo) */
.f2f-speak { position:absolute; top:.45rem; right:.45rem; z-index:2; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--tag-bg); border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--ink); }
/* tasto CENTRALE inverti-lingue: bandiera lato-alto ⇅ bandiera lato-basso */
.f2f-swap { align-self:center; display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .95rem; background:var(--card); border:1px solid var(--line); border-radius:999px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.16); }
.f2f-swap .tx-flag { width:26px; height:18px; }
.f2f-flag-slot { display:inline-flex; }
.f2f-swap[data-top="zh"] .slot-top .flag-it { display:none; }
.f2f-swap[data-top="it"] .slot-top .flag-zh { display:none; }
.f2f-swap[data-bot="zh"] .slot-bot .flag-it { display:none; }
.f2f-swap[data-bot="it"] .slot-bot .flag-zh { display:none; }
.f2f-arrow { font-size:1.4rem; color:var(--accent); line-height:1; transition:transform .3s ease; }
.f2f-arrow.flip { transform:rotate(180deg); }

/* nota sicurezza (popover ⓘ) */
.tx-infopop { margin:.3rem 0; padding:.6rem .8rem; background:var(--tag-bg); border:1px solid var(--line); border-radius:8px; font-size:.85rem; color:var(--ink-soft); }
.tx-infopop[hidden]{ display:none; }

/* avviso voce non disponibile (browser interno WeChat ecc.) */
.tx-wechat { margin:.2rem 0 .5rem; padding:.6rem .8rem; background:var(--tag-bg); border:1px solid var(--gold); border-radius:10px; font-size:.9rem; color:var(--ink); line-height:1.55; }
.tx-wechat[hidden]{ display:none; }

/* guida "apri nel browser" per WeChat (overlay automatico) */
.wx-guide { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1.2rem; text-align:center; }
.wx-guide[hidden]{ display:none; }
.wx-arrow { position:absolute; top:6px; right:16px; font-size:2.8rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); animation:wxBounce 1s infinite; }
@keyframes wxBounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.wx-guide-card { background:var(--card); color:var(--ink); border-radius:16px; padding:1.4rem 1.2rem; max-width:340px; box-shadow:0 12px 44px rgba(0,0,0,.45); }
.wx-guide-t { font-size:1.25rem; font-weight:700; margin:.1rem 0 .7rem; line-height:1.6; }
.wx-guide-s { font-size:.95rem; color:var(--ink-soft); margin:0 0 1.1rem; line-height:1.6; }
.wx-guide-x { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:.6rem 1.1rem; font-size:.95rem; cursor:pointer; }

/* ── FOCUS sul traduttore: nascondi il rumore del sito (solo questa pagina) ── */
.subnav { display:none !important; }
footer { display:none !important; }
body.tx-focus .topbar,
body.tx-focus .masthead,
body.tx-focus nav:not(.subnav),
body.tx-focus .tabbar { display:none !important; }
body.tx-focus { padding-bottom:0 !important; } /* toglie i 64px riservati alla tab-bar (nascosta in fullscreen) → via il vuoto sotto */
body.tx-focus main { padding:0; }
body.tx-focus .wrap.tx-wrap { padding:0; max-width:100%; }