/* =========================================================================
 * Text Studio (self-hosted tiered translation) — view styles.
 *
 * Uses the app's existing design tokens so the page cannot drift from the rest
 * of the shell. Logical properties (inline-start/end) keep the Farsi layout
 * correct: this view is reached from an RTL interface and its own output pane
 * switches direction per target language.
 * ========================================================================= */

.ts-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ---- model-server status strip ---- */
.ts-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 13px; color: var(--text-2, #475569);
}
.ts-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 12.5px;
  padding: 4px 10px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; white-space: nowrap;
}
.ts-pill-ok { background: #dcfce7; color: #166534; }
.ts-pill-warn { background: #fef3c7; color: #92400e; }
.ts-pill-bad { background: #fee2e2; color: #991b1b; }
.ts-detail { color: var(--text-3, #94a3b8); }
.ts-hint { color: var(--text-2, #475569); font-style: italic; }

/* ---- two columns (input | result) ---- */
.ts-grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.ts-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .ts-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- the result page's summary ("what you asked for") ------------------- */
/* The popup asks the questions now, so the page has to SAY what was asked —
   otherwise a wrong answer is invisible until the translation comes out wrong,
   and "Edit the setup" has nothing to point at. One line per answer, with the
   two doors under them. */
.ts-summary { display: flex; flex-direction: column; gap: 6px; }
.ts-sum-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--text-2, #475569);
}
.ts-sum-row span { width: 18px; text-align: center; }
.ts-sum-row b { color: var(--text, #0f172a); font-weight: 700; }
.ts-sum-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border, #e2e8f0);
}

.ts-card h3 { font-size: 14.5px; font-weight: 700; color: var(--text, #0f172a); margin: 0; }
.ts-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.ts-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-mini {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff; color: var(--text-2, #475569);
}
.ts-mini:hover:not(:disabled) { border-color: var(--brand-500, #6366f1); color: var(--brand-600, #4f46e5); }
.ts-mini:disabled { opacity: .45; cursor: not-allowed; }

/* "＋ New translation" in the status strip: pushed to the far end of the row (a
   LOGICAL margin, so it is the far end in Farsi too) and tinted like the brand, because
   it is the page's way IN — the two doors on "What you asked for" belong to the result
   that is already there. */
.ts-new {
  margin-inline-start: auto;
  border-color: var(--brand-500, #6366f1);
  color: var(--brand-600, #4f46e5);
  font-weight: 700;
}
.ts-new:hover { background: #eef2ff; }

.ts-file { position: relative; overflow: hidden; display: inline-block; }
.ts-file span {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  color: var(--text-2, #475569);
}
.ts-file:hover span { border-color: var(--brand-500, #6366f1); color: var(--brand-600, #4f46e5); }
.ts-file input { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---- input ---- */
.ts-input {
  width: 100%; min-height: 260px; resize: vertical;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff; color: var(--text, #0f172a);
  font: inherit; font-size: 14px; line-height: 1.7;
}
.ts-input:focus { outline: none; border-color: var(--brand-500, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.ts-counts {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--text-3, #94a3b8);
}
.ts-note { color: #92400e; }

/* ---- level picker ---- */
.ts-levels { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ts-level {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  transition: border-color .15s, background .15s;
}
.ts-level:hover { border-color: #c7d2fe; }
.ts-level:has(input:checked) { border-color: var(--brand-500, #6366f1); background: #f5f6ff; }
.ts-level input { margin-top: 3px; accent-color: var(--brand-600, #4f46e5); }
.ts-level-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ts-level-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ts-level-top b { font-size: 13.5px; color: var(--text, #0f172a); }
.ts-level-model {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--text-3, #94a3b8);
  background: var(--surface, #f8fafc); padding: 1px 6px; border-radius: 6px;
}
.ts-level-blurb { font-size: 12.5px; color: var(--text-2, #475569); }
.ts-level-cap { font-size: 11.5px; color: var(--text-3, #94a3b8); }
.ts-level-cap.ts-over { color: #b91c1c; font-weight: 600; }

/* ---- monthly allowance meter (per level) ----
   "How much of this month's plan is already spent", sitting next to the level it
   belongs to. Themed with the app's own tokens (brand → accent, the same gradient as
   the progress bar) so it looks like part of the product rather than a bolted-on
   widget, and it follows the dark/light surface variables automatically. */
.ts-meter { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ts-meter-bar {
  flex: 1 1 auto; max-width: 190px; height: 5px; border-radius: 999px;
  background: var(--border, #e2e8f0); overflow: hidden;
}
.ts-meter-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
  transition: width .25s ease;
}
/* Out of words: the bar stops being decorative. Red is the only colour that says
   "this level will refuse you" without a sentence. */
.ts-meter-bar i.is-full { background: #dc2626; }
.ts-meter-txt { font-size: 11px; color: var(--text-3, #94a3b8); white-space: nowrap; }
.ts-meter-txt.is-full { color: #b91c1c; font-weight: 600; }
.ts-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-chip {
  font-style: normal; font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca;
}
.ts-chip-ok { background: #dcfce7; color: #166534; }
.ts-chip-warn { background: #fef3c7; color: #92400e; }

/* ---- fields ---- */
.ts-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .ts-row { grid-template-columns: minmax(0, 1fr); } }
.ts-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2, #475569); }
.ts-field select {
  padding: 9px 11px; border-radius: 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border, #e2e8f0); background: #fff; color: var(--text, #0f172a);
}
.ts-field select:focus { outline: none; border-color: var(--brand-500, #6366f1); }

.ts-est {
  margin: 12px 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  font-size: 12.5px; color: var(--text-2, #475569); min-height: 40px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* The one action in a failed card that is a FIX rather than a repeat: switch the
   level that refused the document. */
.ts-mini.ts-mini-strong {
  border-color: var(--brand-500, #6366f1);
  color: var(--brand-600, #4f46e5);
  font-weight: 700;
}

.ts-go {
  width: 100%; padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-600, #4f46e5), var(--accent-500, #06b6d4));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ts-go:hover:not(:disabled) { filter: brightness(1.06); }
.ts-go:disabled { opacity: .65; cursor: progress; }

/* ---- result ---- */
.ts-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ts-out {
  min-height: 240px; max-height: 62vh; overflow: auto;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surface, #f8fafc);
  color: var(--text, #0f172a); font-size: 14px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
}
.ts-out[dir="rtl"] { text-align: right; }
/* The app shell is RTL in Persian, so an LTR target (English) inherits right-aligned
   text and its punctuation lands at the wrong end. Say it explicitly rather than
   relying on the inherited value resolving against the element's own direction. */
.ts-out[dir="ltr"] { text-align: left; direction: ltr; }
.ts-empty { color: var(--text-3, #94a3b8); }

.ts-progress { margin-bottom: 10px; }
.ts-bar { height: 6px; border-radius: 999px; background: var(--border, #e2e8f0); overflow: hidden; }
.ts-bar i { display: block; height: 100%; width: 4%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
  transition: width .4s; }
.ts-stage { margin-top: 6px; font-size: 12px; color: var(--text-2, #475569); }

/* ---- recent list: files & translations ---------------------------------- */
.ts-jobs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* The other half of the shared ▦/☰ toggle: the very same job cards laid out as a
   responsive grid. Only the container changes — a card is a card, so no action or
   progress bar can go missing in one of the two views. `st-list` (the DEFAULT, and
   what this studio showed before the toggle existed) keeps the single column. */
.ts-jobs:not(.st-list) {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ts-job {
  border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  background: #fff; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ts-job-bad { border-color: #fecaca; background: #fff7f7; }
.ts-job-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-job-ico { font-size: 15px; }
.ts-job-name { font-size: 13.5px; font-weight: 700; color: var(--text, #0f172a);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-inline-end: auto; }
.ts-job-meta { font-size: 12px; color: var(--text-3, #94a3b8); }
.ts-job-error { font-size: 12px; color: #b91c1c; }
.ts-job-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ts-job-actions .ts-mini { text-decoration: none; }
.ts-mini-danger {
  color: #fff; background: var(--danger, #dc2626); border-color: var(--danger, #dc2626);
  font-weight: 700;
}
.ts-mini-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.ts-job-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; white-space: nowrap;
}
.ts-badge-done { background: #dcfce7; color: #166534; }
.ts-badge-failed, .ts-badge-interrupted { background: #fee2e2; color: #991b1b; }
.ts-badge-running, .ts-badge-queued { background: #fef3c7; color: #92400e; }
.ts-badge-cancelled { background: #e2e8f0; color: #334155; }
.ts-badge-draft { background: var(--surface, #f8fafc); color: var(--text-2, #475569); }
/* The ticking clock next to a running job: quiet, but the one thing on screen that
   proves a ten-minute chunk is still being worked on. */
.ts-elapsed { opacity: 0.6; font-variant-numeric: tabular-nums; }
.ts-bar-sm { height: 4px; }

/* ---- mode switch: text OR file, never both ------------------------------ */
.ts-modes {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px;
  background: var(--surface, #f8fafc); border: 1px solid var(--border, #e2e8f0);
}
.ts-mode {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-2, #475569);
}
.ts-mode:hover { color: var(--brand-600, #4f46e5); }
.ts-mode.active { background: #fff; color: var(--brand-600, #4f46e5);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* ---- the file drop zone + the card it produces -------------------------- */
.ts-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; cursor: pointer;
  padding: 26px 16px; border-radius: 12px;
  border: 2px dashed var(--border, #e2e8f0);
  background: #fff; transition: border-color .15s, background .15s;
}
.ts-drop:hover, .ts-drop.hot { border-color: var(--brand-500, #6366f1); background: #f5f6ff; }
.ts-drop-ico { font-size: 26px; }
.ts-drop-main { font-size: 13.5px; font-weight: 600; color: var(--text, #0f172a); }
.ts-drop-sub { font-size: 11.5px; color: var(--text-3, #94a3b8); }
.ts-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ts-filecard {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--brand-500, #6366f1); background: #f5f6ff;
}
.ts-filecard-ico { font-size: 22px; }
.ts-filecard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  margin-inline-end: auto; }
.ts-filecard-body b { font-size: 13.5px; color: var(--text, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-filecard-meta { font-size: 11.5px; color: var(--text-2, #475569); }
.ts-filecard-note { font-size: 11.5px; color: #92400e; }
.ts-x {
  border: 1px solid var(--border, #e2e8f0); background: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; color: var(--text-2, #475569);
  font-size: 13px; line-height: 1; flex: none;
}
.ts-x:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }

/* ---- "you can walk away" note ------------------------------------------- */
.ts-away {
  margin-top: 10px; font-size: 11.5px; line-height: 1.6;
  color: var(--text-3, #94a3b8); text-align: center;
}

/* ===========================================================================
   SUMMARY & CHART (additive)
   The panels, the prose, the chart tabs and the combine modal are styles from
   audio_studio.css: `.as-mixwrap` is deliberately UNSCOPED there, so the Text
   Studio can render the very same result without a second implementation.
   Only the picker over the files list belongs here.
   =========================================================================== */
#textStudioView .ts-pick {
  width: 15px; height: 15px; accent-color: #0ea5e9; cursor: pointer;
  flex: 0 0 auto; margin-inline-end: 2px;
}
#textStudioView .ts-job-picked {
  border-color: #7dd3fc; box-shadow: 0 0 0 2px rgba(14, 165, 233, .14);
}
#textStudioView .ts-insbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 10px;
  padding: 8px 10px; margin: 0 0 10px;
}
#textStudioView .ts-inscount { font-weight: 700; font-size: 13px; color: #075985; }

/* ---- the wizard's "Summary or chart?" + "Chart type" screens --------------
   Two answers that are purely a PREFERENCE (nothing exists to summarise yet),
   so they are plain rows and tiles rather than another form. */
.ts-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  padding: 10px 12px; margin-top: 8px; border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  font-size: 13px; color: var(--text, #0f172a);
}
.ts-check:hover { border-color: var(--brand-500, #6366f1); background: #f8faff; }
.ts-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #6366f1;
  cursor: pointer; flex: none; }
.ts-check b { font-weight: 700; }
.ts-note-inline { display: block; font-size: 11.5px; color: var(--text-3, #94a3b8); }
.ts-note { font-size: 12px; color: var(--text-2, #475569); margin: 0 0 4px; }

.ts-charttypes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .ts-charttypes { grid-template-columns: 1fr; } }
.ts-charttype {
  display: flex; flex-direction: column; gap: 4px; text-align: start; cursor: pointer;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border, #e2e8f0); background: #fff;
  font: inherit; color: var(--text-2, #475569);
}
.ts-charttype:hover { background: #f8fafc; }
.ts-charttype.is-on { border-color: #93c5fd; background: #eff6ff; color: #1b74bc; }
.ts-charttype b { font-size: 13.5px; color: var(--text, #0f172a); }
.ts-charttype.is-on b { color: #1b74bc; }
.ts-charttype span { font-size: 11.5px; color: var(--text-3, #94a3b8); line-height: 1.5; }