/* Traducto — componenti riusabili.
   Carica DOPO tokens.css. */

/* ── Reset minimal + body root ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* td-root — wrapper opzionale per artboard isolati (es. modali) */
.td-root {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
}
.td-root *, .td-root *::before, .td-root *::after { box-sizing: border-box; }

/* Mono utility */
.mono {
  font-family: var(--ff-mono);
  font-feature-settings: "zero", "ss03";
}

/* Focus visible globale */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-lg { height: 48px; padding: 0 var(--sp-6); font-size: 16px; }
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-small); }
.btn-icon { width: 40px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-ink); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
}

.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: oklch(0.50 0.19 25); }

/* ── Inputs ────────────────────────────────────────────────────────────── */

.fld {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.fld:focus, .fld:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.fld::placeholder { color: var(--ink-4); }
.fld-lg { height: 56px; padding: 0 var(--sp-5); font-size: 18px; }

textarea.fld {
  height: auto;
  padding: var(--sp-3) var(--sp-4);
  min-height: 88px;
  resize: none;
}

select.fld {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* Label / eyebrow */
.lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-2);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.card-padded { padding: var(--sp-6); }

/* ── Badge ─────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-1);
  font-size: var(--fs-caption);
  font-weight: 500;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-live { background: var(--danger-soft); color: var(--danger); }
.badge-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: td-pulse 1.6s ease-in-out infinite;
}
@keyframes td-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Flag + dot ────────────────────────────────────────────────────────── */

.flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.flag-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
}

/* Generata da JS via inline gradient — preset comuni in app.css per perf */
.flag-dot[data-code="IT"] { background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66%); }
.flag-dot[data-code="EN"] { background: linear-gradient(90deg, #012169 0 33%, #fff 33% 66%, #c8102e 66%); }
.flag-dot[data-code="US"] { background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #3c3b6e 66%); }
.flag-dot[data-code="ES"] { background: linear-gradient(90deg, #aa151b 0 33%, #f1bf00 33% 66%, #aa151b 66%); }
.flag-dot[data-code="FR"] { background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66%); }
.flag-dot[data-code="DE"] { background: linear-gradient(90deg, #000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-dot[data-code="PT"] { background: linear-gradient(90deg, #046a38 0 33%, #046a38 33% 66%, #da291c 66%); }
.flag-dot[data-code="NL"] { background: linear-gradient(90deg, #ae1c28 0 33%, #fff 33% 66%, #21468b 66%); }
.flag-dot[data-code="PL"] { background: linear-gradient(90deg, #fff 0 50%, #dc143c 50%); }
.flag-dot[data-code="TR"] { background: #e30a17; }
.flag-dot[data-code="EL"], .flag-dot[data-code="GR"] { background: linear-gradient(90deg, #0d5eaf 0 33%, #fff 33% 66%, #0d5eaf 66%); }
.flag-dot[data-code="RU"] { background: linear-gradient(180deg, #fff 0 33%, #0039a6 33% 66%, #d52b1e 66%); }
.flag-dot[data-code="UK"], .flag-dot[data-code="UA"] { background: linear-gradient(180deg, #0057b7 0 50%, #ffd700 50%); }
.flag-dot[data-code="AR"] { background: linear-gradient(180deg, #007a3d 0 33%, #fff 33% 66%, #ce1126 66%); }
.flag-dot[data-code="HE"] { background: linear-gradient(180deg, #fff 0 33%, #0038b8 33% 66%, #fff 66%); }
.flag-dot[data-code="HI"] { background: linear-gradient(180deg, #ff9933 0 33%, #fff 33% 66%, #138808 66%); }
.flag-dot[data-code="BN"] { background: linear-gradient(90deg, #006a4e 0 33%, #f42a41 33% 66%, #006a4e 66%); }
.flag-dot[data-code="UR"] { background: linear-gradient(90deg, #01411c 0 66%, #fff 66%); }
.flag-dot[data-code="SQ"], .flag-dot[data-code="AL"] { background: #e41e20; }
.flag-dot[data-code="RO"] { background: linear-gradient(90deg, #002b7f 0 33%, #fcd116 33% 66%, #ce1126 66%); }
.flag-dot[data-code="ZH"] { background: #de2910; }
.flag-dot[data-code="JA"] { background: radial-gradient(circle, #bc002d 25%, #fff 25%); }
.flag-dot[data-code="KO"] { background: linear-gradient(180deg, #fff 0 50%, #0047a0 50%); }

/* ── Session code (XX-XX-XX) ──────────────────────────────────────────── */

.code-block {
  font-family: var(--ff-mono);
  font-size: 44px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.code-block .sep { color: var(--ink-4); font-weight: 400; }

/* ── Waveform — 5 bars animated ───────────────────────────────────────── */

.waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  color: currentColor;
}
.waveform i {
  display: block;
  width: 3px;
  height: 100%;
  background: currentColor;
  border-radius: 1.5px;
  animation: td-wave 1s ease-in-out infinite;
}
.waveform i:nth-child(1) { animation-delay: 0s;    height: 40%; }
.waveform i:nth-child(2) { animation-delay: 0.12s; height: 80%; }
.waveform i:nth-child(3) { animation-delay: 0.24s; height: 60%; }
.waveform i:nth-child(4) { animation-delay: 0.36s; height: 90%; }
.waveform i:nth-child(5) { animation-delay: 0.48s; height: 55%; }
@keyframes td-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.waveform.is-idle i { animation: none; height: 30%; opacity: 0.5; }

/* ── Mic button ───────────────────────────────────────────────────────── */

.mic-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform .12s, box-shadow .12s, background .12s;
  position: relative;
}
.mic-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}
.mic-btn.is-recording { background: var(--danger); }
.mic-btn.is-recording::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--danger);
  opacity: 0.4;
  animation: td-mic-pulse 1.6s ease-out infinite;
}
@keyframes td-mic-pulse {
  0%   { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.3);  opacity: 0; }
}

/* ── QR placeholder (sostituibile da generatore JS lato pagina) ───────── */

.qr {
  width: 144px;
  height: 144px;
  background: var(--surface);
  border-radius: var(--r-2);
  padding: 8px;
  border: 1px solid var(--line);
  display: inline-block;
}
.qr svg { display: block; width: 100%; height: 100%; }

/* ── Chat bubble (conversazione 1:1) ──────────────────────────────────── */

.bubble {
  max-width: 76%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  background: var(--paper-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.bubble.is-translated {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: none;
  margin-top: 2px;
}

.bubble-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.bubble-row.right { align-items: flex-end; }
.bubble-row.right .bubble {
  background: var(--ink);
  color: var(--paper);
}
.bubble-row.right .bubble.is-translated {
  background: var(--accent);
  color: var(--accent-fg);
}

.bubble-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* RTL su bubble target (testo originale in arabo/ebraico/urdu) */
.bubble[dir="rtl"], [dir="rtl"] .bubble {
  text-align: right;
}