/* T_ROOM - tradução simultânea (js/traducao.js): balão de 2 linhas, faixa do campo, painel. Tema escuro premium, usa as
 * variáveis do tema (nada de cor fixa). Carregado com o T_CHAT, a sala e o T_FEED (TM_ADIADOS.traducao). */

/* ---------- o balão: TRADUÇÃO em cima e MAIOR; ORIGINAL embaixo e MENOR, linha tracejada, etiqueta de sentido ---------- */
.tr-bal { display: flex; flex-direction: column; gap: 0; cursor: default; min-width: 0; }
.tr-bal .tr-tx { font-size: 1.07em; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.tr-bal .tr-orig { order: 2; font-size: var(--tr-orig, 12px); line-height: 1.35; opacity: .74; margin-top: 5px; padding-top: 5px; border-top: 1px dashed color-mix(in srgb, currentColor 32%, transparent); overflow-wrap: anywhere; }
.tr-bal .tr-meta { order: 3; display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.tr-bal .tr-lang { white-space: nowrap; }
.tr-bal .tr-ia { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .85; }
.tr-bal .tr-ia::before { content: "·"; margin-right: 6px; }
html[data-tr-ind="off"] .tr-bal .tr-ia { display: none; }
html[data-tr-pos="cima"] .tr-bal .tr-orig { order: 0; margin: 0 0 5px; padding: 0 0 5px; border-top: 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 32%, transparent); }
html[data-tr-pos="cima"] .tr-bal .tr-tx { order: 1; }
html[data-tr-orig="off"] .tr-bal:not(.tr-mod):not(.so-orig) .tr-orig { display: none; }
html[data-tr-orig="off"] .tr-bal:not(.tr-mod):not(.so-orig) .tr-meta { margin-top: 5px; }
.tr-bal.tr-mod .tr-orig { display: block; }
/* toque: só o original (tamanho normal) */
.tr-bal.so-orig .tr-tx { display: none; }
.tr-bal.so-orig .tr-orig { order: 0; font-size: 1em; opacity: 1; margin: 0; padding: 0; border: 0; }
.tr-bal.so-orig .tr-meta { opacity: .6; }
.tr-bal[data-tr-bal] { cursor: pointer; }
/* esqueleto enquanto traduz (a mensagem original já está visível) */
.tr-slot.tr-carregando { position: relative; display: inline-block; max-width: 100%; }
.tr-slot.tr-carregando::after { content: ""; display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent); background-size: 220% 100%; animation: tr-brilho 1.1s linear infinite; }
@keyframes tr-brilho { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .tr-slot.tr-carregando::after { animation: none; opacity: .6; } .tr-giro { animation: none !important; } }
.tr-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--danger-text); }
.tr-bt { font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tr-bt:hover { border-color: var(--accent); color: var(--accent-text); }
.tr-bt.tr-bt-pri { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-text); }
.tr-sobw { display: inline; }
.tr-sobw .tr-bt { margin-left: 8px; vertical-align: baseline; padding: 1px 9px; font-size: 11.5px; }
.tr-ic { width: 14px; height: 14px; flex: none; }

/* ---------- botão do globo (ao lado do campo) ---------- */
.tr-globo { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--h-btn); height: var(--h-btn); padding: 0 7px; border-radius: 10px; background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.pc-bubble .pc-txt { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog.tr-painel input:disabled, dialog.tr-painel select:disabled { opacity: .5; cursor: not-allowed; }
.tr-globo:hover { color: var(--text); background: var(--surface-3); }
.tr-globo.on { color: var(--accent-text); background: var(--accent-soft); }
.tr-globo .tr-ic { width: 18px; height: 18px; }
.tr-globo small { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

/* ---------- faixa acima do campo: prévia, erro, ações ---------- */
.tr-faixa { margin: 6px 10px 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); display: grid; gap: 6px; min-width: 0; font-size: 13px; color: var(--text); }
.tr-faixa[hidden] { display: none; }
.tr-faixa.erro { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.tr-faixa.pulo { border-color: var(--border); }
.tr-fx-rot { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
.tr-fx-mais { margin-left: auto; font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; }
.tr-fx-edit { width: 100%; resize: vertical; min-height: 44px; max-height: 140px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--text); background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: 8px; padding: 6px 8px; box-sizing: border-box; }
.tr-fx-edit:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-style: solid; }
.tr-fx-tx { color: var(--accent-text); overflow-wrap: anywhere; }
.tr-fx-linha { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.tr-fx-nota { color: var(--muted); font-size: 12px; }
.tr-fx-erro { color: var(--danger-text); }
.tr-fx-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: tr-gira .8s linear infinite; flex: none; }
@keyframes tr-gira { to { transform: rotate(360deg); } }

/* ---------- janela "Tradução simultânea" (móvel e redimensionável pelo sistema de janelas) ---------- */
.modal.tr-painel { width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 860px); display: flex; flex-direction: column; overflow: hidden; }
.tr-painel .modal-inner { padding: 0; gap: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tr-cab { padding: 12px 14px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.tr-cab h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; justify-self: start; }
.tr-voltar { padding: 5px 12px; }
.tr-corpo { overflow: auto; padding: 12px 16px 18px; display: grid; gap: 14px; min-height: 0; overscroll-behavior: contain; }
.tr-sec h3 { margin: 0 0 4px; font-size: 13.5px; letter-spacing: .01em; }
.tr-sec h3 small { color: var(--muted); font-weight: 500; }
.tr-lin { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); min-width: 0; }
.tr-sec h3 + .tr-lin { border-top: 0; }
.tr-lin-tx { display: grid; gap: 1px; min-width: 0; }
.tr-lin-tx b { font-size: 13.5px; font-weight: 600; }
.tr-lin-tx small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.tr-lin-ctl { display: flex; align-items: center; gap: 6px; flex: none; }
.tr-lin-ctl select, .tr-num input, .tr-glos-add input { font: inherit; font-size: 13px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.tr-lin-ctl select:focus-visible, .tr-num input:focus-visible, .tr-glos-add input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tr-num { display: inline-flex; align-items: center; gap: 6px; } .tr-num input { width: 76px; } .tr-num small { color: var(--muted); font-size: 11px; max-width: 70px; line-height: 1.1; }
.tr-sw.switch { padding: 0; background: none; border: 0; }
.tr-rst { width: var(--h-btn-sm); height: var(--h-btn-sm); border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.tr-rst:hover { color: var(--accent-text); border-color: var(--accent); }
.tr-rst[hidden] { display: none; }
.tr-aviso { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--violet) 14%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent); color: var(--text-soft); }
.tr-aviso b { color: var(--text); font-size: 14px; } .tr-aviso small { color: var(--muted); } .tr-aviso .btn { justify-self: start; }
.tr-ia-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.tr-ia-box span { color: var(--muted); } .tr-ia-box b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-glos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.tr-glos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.tr-glos li.vazio { color: var(--muted); background: none; padding-left: 0; }
.tr-glos-add { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 6px; }
.tr-uso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0; }
.tr-uso span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.tr-uso b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-rodape { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tr-fim { border-top: 1px solid var(--border); padding-top: 12px; }
.tr-conf .modal-inner { gap: 10px; } .tr-conf-rot { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
.tr-conf-bal { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.modal.tr-conf { width: min(480px, calc(100vw - 24px)); }
.modal.tr-conf .modal-actions { flex-wrap: wrap; }

@media (max-width: 520px) {
  .modal.tr-painel { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .tr-cab { grid-template-columns: auto 1fr auto; padding: 10px 10px; }
  .tr-cab h2 { font-size: 14.5px; }
  .tr-lin { flex-wrap: wrap; align-items: flex-start; }
  .tr-lin-ctl { margin-left: auto; }
  .tr-glos-add { grid-template-columns: 1fr; }
  .tr-uso { grid-template-columns: repeat(2, 1fr); }
  .tr-faixa { margin: 6px 6px 0; }
}
.tr-conf .modal-head h2 { display: flex; align-items: center; gap: 8px; }