/* Lagoinha Connect — Legenda ao Vivo V2.2 */
:root {
  --caption-gold: #b79a55;
  --caption-ink: #141414;
  --caption-paper: #fff;
  --caption-soft: #f5f3ee;
  --caption-line: #dedbd2;
  --caption-good: #237a4a;
  --caption-warn: #8a6110;
  --caption-danger: #a12b2b;
}

.live-caption-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
}
.live-caption-hero h2,
.live-caption-hero p { margin: 0; }
.live-caption-hero h2 { margin-top: 4px; font-size: clamp(1.35rem, 3vw, 2rem); }
.live-caption-hero p { margin-top: 8px; color: var(--muted, #6f706c); line-height: 1.5; }
.live-caption-hero-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--caption-ink);
  color: #f0cf75;
  font-size: 1.7rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.live-caption-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  background: #f2eee2;
  color: #725a20;
  white-space: nowrap;
}
.live-caption-provider-badge span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(183,154,85,.13);
}
.live-caption-provider-badge.ready { color: var(--caption-good); background: #eaf5ef; }
.live-caption-provider-badge.warning { color: var(--caption-warn); background: #fff4d8; }

.live-caption-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 6px;
  border: 1px solid var(--caption-line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  overflow-x: auto;
  scrollbar-width: none;
}
.live-caption-tabs::-webkit-scrollbar { display: none; }
.live-caption-tabs button {
  flex: 1 0 auto;
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  padding: 11px 14px;
  background: transparent;
  color: #696a66;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.live-caption-tabs button b { font-size: 1rem; }
.live-caption-tabs button.active { background: var(--caption-ink); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.13); }

.live-caption-operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: start;
}
.live-caption-main-column,
.live-caption-side-column { display: grid; gap: 18px; min-width: 0; }
.live-caption-side-column { position: sticky; top: 18px; }
.live-caption-start-card,
.live-caption-live-card,
.live-caption-audio-card,
.live-caption-transcript-card,
.live-caption-status-card,
.live-caption-links-card,
.live-caption-readiness-card,
.live-caption-privacy-card,
.live-caption-history-section,
.live-caption-settings-form { padding: 20px; }

.live-caption-start-actions,
.live-caption-test-actions,
.live-caption-link-actions,
.live-caption-report-actions,
.live-caption-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.live-caption-start-actions .btn,
.live-caption-test-actions .btn { min-height: 46px; }
.live-caption-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.live-caption-control-grid .btn { min-height: 48px; }

.live-caption-callout {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #ded6bd;
  border-radius: 15px;
  background: #faf7ed;
  color: #5f5332;
  line-height: 1.42;
}
.live-caption-callout.warning { background: #fff4d8; border-color: #ead69b; color: #6c5010; }
.live-caption-callout.danger { background: #fff0f0; border-color: #e8bcbc; color: #7b2424; }
.live-caption-callout.good { background: #edf8f1; border-color: #bfe1cb; color: #1f6540; }
.live-caption-callout code { word-break: break-word; }

.live-caption-audio-card .card-header,
.live-caption-history-section .card-header,
.live-caption-settings-form .card-header { align-items: flex-start; }
.live-caption-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.live-caption-device-row label { min-width: 0; }
.live-caption-device-row select { width: 100%; }
.live-caption-meter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--caption-soft);
  border: 1px solid var(--caption-line);
}
.live-caption-meter {
  position: relative;
  height: 38px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8dbd8 0 16%, #8fcaaa 16% 76%, #e4c66f 76% 90%, #d77979 90% 100%);
}
.live-caption-meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(20,20,20,.72);
  border-radius: inherit;
  transition: width .09s linear;
  mix-blend-mode: multiply;
}
.live-caption-meter > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.72);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  pointer-events: none;
}
.live-caption-meter > .low { left: 5%; }
.live-caption-meter > .good { left: 49%; }
.live-caption-meter > .clip { right: 4%; }

.live-caption-meter-copy { display: grid; gap: 3px; }
.live-caption-meter-copy strong { color: var(--caption-ink); }
.live-caption-meter-copy span { color: #777873; font-size: .88rem; }
.live-caption-meter-copy.low strong { color: var(--caption-warn); }
.live-caption-meter-copy.good strong { color: var(--caption-good); }
.live-caption-meter-copy.danger strong { color: var(--caption-danger); }

.live-caption-live-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.live-caption-live-header h2 { margin: 5px 0 4px; }
.live-caption-live-header p { margin: 0; color: #767772; }
.live-caption-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e23f3f;
  box-shadow: 0 0 0 7px rgba(226,63,63,.12);
  animation: captionPulse 1.6s infinite;
}
.live-caption-live-dot.paused { background: #b78b2d; box-shadow: 0 0 0 7px rgba(183,139,45,.13); animation: none; }
@keyframes captionPulse { 50% { box-shadow: 0 0 0 11px rgba(226,63,63,0); } }
.live-caption-elapsed { display: grid; gap: 2px; text-align: right; }
.live-caption-elapsed small,
.live-caption-elapsed span { color: #777873; }
.live-caption-elapsed strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }

.live-caption-status-card h3,
.live-caption-links-card h3,
.live-caption-readiness-card h3,
.live-caption-privacy-card h3 { margin: 0 0 12px; }
.live-caption-status-row {
  display: grid;
  grid-template-columns: 12px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #ece9e1;
}
.live-caption-status-row:last-child { border-bottom: 0; }
.live-caption-status-row > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9b9c98;
  box-shadow: 0 0 0 5px rgba(155,156,152,.11);
}
.live-caption-status-row > i.ok { background: var(--caption-good); box-shadow: 0 0 0 5px rgba(35,122,74,.11); }
.live-caption-status-row > i.warning { background: #c1902e; box-shadow: 0 0 0 5px rgba(193,144,46,.12); }
.live-caption-status-row > i.error { background: var(--caption-danger); box-shadow: 0 0 0 5px rgba(161,43,43,.11); }
.live-caption-status-row > span { min-width: 0; color: #585955; font-size: .9rem; font-weight: 750; }
.live-caption-status-row > strong { max-width: 145px; text-align: right; color: #777873; font-size: .76rem; line-height: 1.25; }

.live-caption-current-text { display: grid; gap: 10px; }
.live-caption-current-text .partial { opacity: .64; font-style: italic; }
.live-caption-current-text textarea,
.live-caption-large-textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.live-caption-transcript-card .live-caption-current-text {
  padding: 16px;
  border-radius: 16px;
  background: #171717;
  color: #fff;
}
.live-caption-transcript-card .live-caption-current-text p { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.65rem); line-height: 1.48; }
.live-caption-manual-form { margin-top: 16px; }
.live-caption-toggle-grid,
.live-caption-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.live-caption-toggle-grid { margin-top: 14px; }
.live-caption-manual-form .form-grid { margin-top: 12px; }

.live-caption-recent-segments { display: grid; gap: 8px; margin-top: 16px; }
.live-caption-recent-segments article {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--caption-line);
  border-radius: 13px;
  background: #fff;
}
.live-caption-recent-segments p { margin: 0; line-height: 1.42; }
.live-caption-recent-segments .partial { color: #777873; font-style: italic; }
.live-caption-recent-segments .btn { min-height: 34px; padding: 7px 9px; }

.live-caption-history-list,
.live-caption-word-list { display: grid; gap: 12px; margin-top: 14px; }
.live-caption-history-card,
.live-caption-word {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--caption-line);
  border-radius: 16px;
  background: #fff;
}
.live-caption-history-card h3,
.live-caption-word h3 { margin: 0; }
.live-caption-history-card p,
.live-caption-word p { margin: 5px 0 0; color: #747570; line-height: 1.45; }
.live-caption-history-date { display: inline-block; margin-bottom: 4px; color: #8a712f; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.live-caption-history-actions { justify-content: flex-end; margin: 0; }
.live-caption-word .live-caption-history-actions { min-width: 140px; }

.live-caption-report { display: grid; gap: 16px; }
.live-caption-report .report-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
.live-caption-report-text {
  max-height: 46vh;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.65;
  padding: 16px;
  border: 1px solid var(--caption-line);
  border-radius: 14px;
  background: #faf9f6;
}
.live-caption-report-actions { margin-top: 0; }

.live-caption-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.live-caption-steps,
.live-caption-checklist { margin: 12px 0 0; padding-left: 1.25rem; line-height: 1.65; }
.live-caption-steps li,
.live-caption-checklist li { margin: 7px 0; }
.live-caption-checklist > div {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid #ece9e1;
}
.live-caption-checklist > div:last-child { border-bottom: 0; }
.live-caption-checklist > div > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #171717;
  color: #f1d177;
  font-weight: 900;
}
.live-caption-checklist > div p { margin: 0; }
.live-caption-checklist > div small { display: block; margin-top: 4px; color: #777873; line-height: 1.45; }
.live-caption-tech-note { margin-top: 14px; padding: 13px 15px; border-radius: 13px; background: #fff3d2; color: #6e5316; line-height: 1.5; }
.live-caption-obs-preview {
  min-height: 160px;
  display: grid;
  place-items: end center;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #31544d, #1d2826);
  overflow: hidden;
}
.live-caption-obs-preview span {
  width: 100%;
  padding: 8px 12px;
  text-align: center;
  color: white;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 2px 4px #000, 0 0 3px #000;
}

.live-caption-preflight { display: grid; gap: 10px; }
.live-caption-preflight li { line-height: 1.5; }
.live-caption-readiness-card .live-caption-checklist { padding-left: 0; list-style: none; }
.live-caption-readiness-card .live-caption-checklist li::before { content: "✓"; display: inline-grid; place-items:center; width: 20px; height:20px; margin-right:8px; border-radius:50%; background:#eaf5ef; color:var(--caption-good); font-weight:900; }
.live-caption-delay { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:7px 10px; border-radius:999px; background:#f0eee8; color:#666762; font-size:.82rem; font-weight:800; }
.field-help, .muted-small { color:#777873; font-size:.84rem; line-height:1.45; }

@media (max-width: 980px) {
  .live-caption-operator-grid { grid-template-columns: 1fr; }
  .live-caption-side-column { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .live-caption-privacy-card { grid-column: 1 / -1; }
  .live-caption-hero { grid-template-columns: auto minmax(0,1fr); }
  .live-caption-provider-badge { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 720px) {
  .live-caption-hero { padding: 17px; gap: 13px; }
  .live-caption-hero-icon { width: 48px; height: 48px; border-radius: 15px; }
  .live-caption-tabs { margin-inline: -2px; }
  .live-caption-tabs button { min-width: 94px; padding: 10px 11px; }
  .live-caption-tabs button b { display: none; }
  .live-caption-start-card,
  .live-caption-live-card,
  .live-caption-audio-card,
  .live-caption-transcript-card,
  .live-caption-status-card,
  .live-caption-links-card,
  .live-caption-readiness-card,
  .live-caption-privacy-card,
  .live-caption-history-section,
  .live-caption-settings-form { padding: 16px; }
  .live-caption-side-column,
  .live-caption-guide-grid,
  .live-caption-settings-grid,
  .live-caption-toggle-grid,
  .live-caption-report .report-summary { grid-template-columns: 1fr; }
  .live-caption-control-grid { grid-template-columns: 1fr 1fr; }
  .live-caption-control-grid .btn.btn-danger { grid-column: 1 / -1; }
  .live-caption-device-row { grid-template-columns: 1fr; }
  .live-caption-device-row .btn { width: 100%; }
  .live-caption-meter-panel { grid-template-columns: 1fr; }
  .live-caption-live-header { grid-template-columns: 1fr; }
  .live-caption-elapsed { text-align: left; }
  .live-caption-history-card,
  .live-caption-word { grid-template-columns: 1fr; }
  .live-caption-history-actions { justify-content: flex-start; }
  .live-caption-start-actions .btn,
  .live-caption-test-actions .btn,
  .live-caption-link-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .live-caption-control-grid { grid-template-columns: 1fr; }
  .live-caption-control-grid .btn.btn-danger { grid-column: auto; }
  .live-caption-hero { grid-template-columns: 1fr; }
  .live-caption-hero-icon { display: none; }
  .live-caption-provider-badge { grid-column: auto; white-space: normal; }
}

@media print {
  .live-caption-tabs, .live-caption-hero, .bottom-nav, .sidebar, .topbar, .no-print { display: none !important; }
  .live-caption-report-text { max-height: none; overflow: visible; border: 0; }
}

/* V2.3 — conexão da Smart TV por código */
.live-caption-tv-address {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.live-caption-tv-address span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.live-caption-tv-address code {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  user-select: all;
}
.live-caption-pair-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 15px;
}
.live-caption-pair-form input {
  min-height: 52px;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}
.live-caption-pair-form .btn { min-height: 52px; }
.live-caption-pair-result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f5f2ea;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
  text-align: center;
}
.live-caption-pair-result.connected {
  background: #e7f4ed;
  color: var(--success);
}
.live-caption-links-card hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}
@media(max-width:680px) {
  .live-caption-pair-form { grid-template-columns: 1fr; }
  .live-caption-pair-form .btn { width: 100%; }
}