/* =================================================================
   UXOVIA · VOICE-AGENT · INTERFACE-MOCKUP
   Stile des nachgebauten Anrufprotokolls auf der Voice-Agent-Seite.
   Ausgelagert am 21.08.2026 aus dem <style>-Block der Seite. Die
   Einbindung steht an derselben Stelle im Dokument wie vorher der
   Block, damit die Kaskade unveraendert bleibt.
   ================================================================= */

/* ── Voice-Agent · Interface-Mockup (nur Design-System-Tokens) ── */
    .ve-frame { max-width: var(--container); margin-inline: auto; }
    .ve-app { border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); box-shadow: var(--shadow-card), 0 40px 120px -50px var(--brand-glow); }
    .ve-topbar { display: flex; align-items: center; gap: var(--s-3); padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-ink); }
    .ve-dots { display: flex; gap: 6px; }
    .ve-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); display: block; }
    .ve-url { margin-inline: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-legible); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.3rem 0.9rem; }
    .ve-body { display: grid; grid-template-columns: 208px 1fr; }
    .ve-side { border-right: 1px solid var(--border); padding: var(--s-5) var(--s-4); background: var(--bg-ink); display: flex; flex-direction: column; gap: var(--s-5); }
    .ve-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: var(--w-semi); font-size: 0.9rem; color: var(--text); }
    .ve-brand img { width: 22px; height: 22px; }
    .ve-nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
    .ve-nav li { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: var(--r-sm); font-size: 0.85rem; color: var(--text-legible); }
    .ve-nav li svg { width: 17px; height: 17px; flex-shrink: 0; }
    .ve-nav li.is-active { background: rgba(0,200,238,.14); color: var(--cyan-zart); border: 1px solid rgba(0,200,238,.4); }
    .ve-main { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
    .ve-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
    .ve-kpi { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); background: linear-gradient(180deg, var(--surface-2), transparent); }
    .ve-kpi .lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-legible); }
    .ve-kpi .val { font-size: 1.65rem; font-weight: var(--w-medium); letter-spacing: -0.02em; margin: 0.3rem 0 0.25rem; color: var(--text); }
    .ve-kpi .sub { font-size: 0.72rem; color: var(--text-legible); }
    .ve-kpi .sub b { color: var(--gruen-hell); font-weight: var(--w-medium); }
    .ve-cols { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--s-4); }
    .ve-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
    .ve-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.85rem var(--s-4); border-bottom: 1px solid var(--border); }
    .ve-card-h .ttl { font-size: 0.85rem; font-weight: var(--w-medium); color: var(--text); }
    .ve-pill { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-legible); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.25rem 0.6rem; }
    .ve-tablewrap { overflow-x: auto; }
    table.ve-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 520px; }
    .ve-table th { text-align: left; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-legible); font-weight: var(--w-medium); padding: 0.65rem 0.55rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .ve-table td { padding: 0.7rem 0.55rem; border-bottom: 1px solid var(--border-faint); color: var(--text-2); white-space: nowrap; }
    .ve-table th:first-child, .ve-table td:first-child { padding-left: var(--s-4); }
    .ve-table th:last-child, .ve-table td:last-child { padding-right: var(--s-4); }
    .ve-table tr:last-child td { border-bottom: none; }
    .ve-table td.strong { color: var(--text); }
    .ve-st { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: var(--w-medium); }
    .ve-st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .ve-st.done { background: rgba(31,203,122,.15); color: var(--gruen-hell); border: 1px solid rgba(31,203,122,.4); }
    .ve-st.fwd { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
    .ve-chart-foot { font-size: 0.75rem; color: var(--text-legible); padding: 0 var(--s-4) var(--s-4); }
    .ve-chart-foot b { color: var(--text); }
    .ve-chart-svg { display: block; width: 100%; height: auto; padding: var(--s-4) var(--s-4) 0; }
    @media (max-width: 860px) {
      .ve-body { grid-template-columns: 1fr; }
      .ve-side { flex-direction: row; align-items: center; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); gap: var(--s-4); padding: 0.75rem var(--s-4); }
      .ve-nav { flex-direction: row; gap: 4px; }
      .ve-nav li span { display: none; }
      .ve-cols { grid-template-columns: 1fr; }
      .ve-kpis { grid-template-columns: 1fr 1fr; }
    }