/* LLM-Live: Beweis-Box mit echtem Mistral-Roundtrip */

.tb-llm-live {
  padding-block: var(--space-12);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tb-primary-50) 50%, var(--tb-bg)) 0%,
    var(--tb-bg) 100%);
}
.tb-llm-live__inner {
  max-width: min(820px, 92vw);
  margin: 0 auto;
}

.tb-llm-live__box {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--tb-bg-card);
  border: 1px solid var(--tb-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.tb-llm-live__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
@media (max-width: 560px) {
  .tb-llm-live__form { grid-template-columns: 1fr; }
}

.tb-llm-live__input {
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--tb-line);
  background: var(--tb-bg);
  color: var(--tb-ink-900);
  min-height: 44px;
}
.tb-llm-live__input:focus {
  outline: none;
  border-color: var(--tb-primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-primary-500) 20%, transparent);
}

.tb-llm-live__send {
  position: relative;
  min-width: 140px;
  justify-content: center;
}
.tb-llm-live__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tb-llm-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes tb-llm-spin {
  to { transform: rotate(360deg); }
}

.tb-llm-live__meta {
  margin: var(--space-3) 0 0;
  font-size: 0.825rem;
  color: var(--tb-ink-500);
}
.tb-llm-live__meta strong { color: var(--tb-ink-700); font-weight: 600; }
.tb-llm-live__latency {
  font-variant-numeric: tabular-nums;
}
.tb-llm-live__latency--ok { color: var(--tb-accent-emerald, #10B981); font-weight: 700; }
.tb-llm-live__latency--err { color: var(--tb-accent-rose, #E5447D); font-weight: 700; }

.tb-llm-live__answer {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--tb-primary-50) 60%, var(--tb-bg-card));
  border-left: 3px solid var(--tb-primary-700);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.tb-llm-live__answer.is-error {
  background: color-mix(in srgb, var(--tb-accent-rose, #E5447D) 10%, var(--tb-bg-card));
  border-left-color: var(--tb-accent-rose, #E5447D);
  color: var(--tb-ink-900);
}

.tb-llm-live__hint {
  margin: var(--space-4) 0 0;
  font-size: 0.825rem;
  color: var(--tb-ink-500);
  font-style: italic;
}

/* Counter-Stat (kann in Trust-Bar eingebunden werden) */
.tb-llm-counter {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: Geist, Inter, sans-serif;
}
.tb-llm-counter__num {
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tb-accent-emerald, #10B981);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tb-llm-counter__lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tb-ink-500);
  margin-top: 4px;
}

/* Mode-Toggle (Lokale KI vs OpenAI-Cloud) im Live-Demo-Box */
.tb-llm-live__modes {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.tb-llm-live__mode {
  flex: 1 1 220px;
  display: block;
  padding: 10px 14px;
  background: var(--tb-bg-card);
  border: 1px solid var(--tb-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 13px;
  color: var(--tb-ink-700);
}
.tb-llm-live__mode input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tb-llm-live__mode:hover { border-color: var(--tb-primary-200); }
.tb-llm-live__mode.is-active {
  background: color-mix(in srgb, var(--tb-primary-700) 8%, var(--tb-bg-card));
  border-color: var(--tb-primary-700);
  color: var(--tb-primary-700);
  font-weight: 700;
}
.tb-llm-live__mode small {
  display: block;
  font-weight: 400;
  color: var(--tb-ink-500);
  font-size: 11px;
  margin-top: 2px;
}
.tb-llm-live__mode.is-active small { color: color-mix(in srgb, var(--tb-primary-700) 70%, var(--tb-ink-500)); }