/* tb-chat-demo: Layout fuer die Vergleichsdemo.
   Drei Spalten gleichzeitig auf Desktop, Stack auf Mobile.
   Bricht aus dem WP-Constrained-Layout (760px contentSize) aus damit
   die drei Spalten echten Platz bekommen. */

.tb-chatdemo {
    --tb-cd-bg:     #f8fafc;
    --tb-cd-card:   #ffffff;
    --tb-cd-border: #e2e8f0;
    --tb-cd-ink:    #0e0e2a;
    --tb-cd-muted:  #64748b;
    --tb-cd-off:    #475569;
    --tb-cd-on:     #2563eb;
    --tb-cd-turbo:  #7c3aed;

    /* Container-Breakout: WordPress contentSize ist 760px, die Section
       braucht aber bis zu 1320px Breite. margin-left:50% + translateX
       zentriert sie wieder relativ zum Viewport. */
    width: min(1320px, calc(100vw - 2.5rem));
    max-width: none;
    margin-block: 2rem;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
    position: relative;

    padding: 0;
    color: var(--tb-cd-ink);
    font-size: 16px;
    line-height: 1.5;
}

.tb-chatdemo__head { margin-bottom: 1.75rem; }
.tb-chatdemo__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 .65rem;
}
.tb-chatdemo__lead {
    font-size: 1.05rem;
    max-width: 880px;
    color: #1f2937;
    margin: 0 0 .6rem;
}
.tb-chatdemo__note {
    font-size: .9rem;
    color: var(--tb-cd-muted);
    max-width: 880px;
    margin: 0;
}

/* Frage-Buttons */
.tb-chatdemo__questions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.5rem 0 1.25rem;
}
.tb-chatdemo__qbtn {
    appearance: none;
    border: 1px solid var(--tb-cd-border);
    background: var(--tb-cd-card);
    border-radius: 999px;
    padding: .55rem 1.05rem;
    font: inherit;
    font-size: .95rem;
    color: #334155;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tb-chatdemo__qbtn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.tb-chatdemo__qbtn.is-active {
    background: var(--tb-cd-ink);
    color: #ffffff;
    border-color: var(--tb-cd-ink);
}

/* Investment-Slider */
.tb-chatdemo__slider-wrap {
    background: var(--tb-cd-bg);
    border: 1px solid var(--tb-cd-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}
.tb-chatdemo__slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    margin-bottom: .5rem;
}
.tb-chatdemo__slider-value {
    color: var(--tb-cd-on);
    font-variant-numeric: tabular-nums;
}
.tb-chatdemo__slider {
    width: 100%;
    accent-color: var(--tb-cd-on);
}
.tb-chatdemo__slider-tier {
    margin-top: .5rem;
    font-size: .92rem;
    color: var(--tb-cd-ink);
    font-weight: 600;
}
.tb-chatdemo__slider-help {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--tb-cd-muted);
}

/* Drei-Spalten-Layout */
.tb-chatdemo__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 980px) {
    .tb-chatdemo__columns { grid-template-columns: 1fr; }
}

.tb-chatdemo__col {
    background: var(--tb-cd-card);
    border: 1px solid var(--tb-cd-border);
    border-radius: 14px;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}
.tb-chatdemo__col-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}
.tb-chatdemo__col-status {
    margin-left: auto;
    font-size: .8rem;
    color: var(--tb-cd-muted);
    text-transform: lowercase;
}
.tb-chatdemo__col-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.tb-chatdemo__col-led--req {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
    animation: tb-cd-pulse 1s ease-in-out infinite;
}
.tb-chatdemo__col-led--res {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
    animation: tb-cd-pulse 1s ease-in-out infinite;
}
.tb-chatdemo__col-led--done {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}
@keyframes tb-cd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

.tb-chatdemo__pill {
    display: inline-flex;
    align-items: center;
    padding: .15em .7em;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
}
.tb-chatdemo__pill--offline { background: #e2e8f0; color: var(--tb-cd-off); }
.tb-chatdemo__pill--online  { background: #dbeafe; color: var(--tb-cd-on); }
.tb-chatdemo__pill--turbo   { background: #ede9fe; color: var(--tb-cd-turbo); }

.tb-chatdemo__col-model {
    font-size: .85rem;
    color: var(--tb-cd-muted);
    margin-bottom: .75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-chatdemo__col-model-name { color: #334155; font-weight: 600; }
.tb-chatdemo__col-host { font-size: .8rem; }

.tb-chatdemo__bubble {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .95rem;
    line-height: 1.5;
    color: #1f2937;
    min-height: 180px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.tb-chatdemo__bubble--active { background: #ffffff; border-color: #ddd6fe; }
.tb-chatdemo__bubble-empty {
    color: var(--tb-cd-muted);
    font-style: italic;
}
.tb-chatdemo__caret {
    display: inline-block;
    width: 6px;
    height: 1em;
    background: var(--tb-cd-ink);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: tb-cd-caret 1s steps(2) infinite;
}
@keyframes tb-cd-caret {
    50% { opacity: 0; }
}

.tb-chatdemo__col-foot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--tb-cd-border);
}
.tb-chatdemo__metric {
    display: flex;
    flex-direction: column;
}
.tb-chatdemo__metric span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb-cd-muted);
    font-weight: 700;
}
.tb-chatdemo__metric strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tb-cd-ink);
    font-variant-numeric: tabular-nums;
}

/* History-Tabelle */
.tb-chatdemo__history {
    background: var(--tb-cd-card);
    border: 1px solid var(--tb-cd-border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.tb-chatdemo__history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.tb-chatdemo__history-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.tb-chatdemo__history-reset {
    appearance: none;
    border: 1px solid var(--tb-cd-border);
    background: #ffffff;
    border-radius: 8px;
    padding: .35rem .85rem;
    font: inherit;
    font-size: .85rem;
    color: #334155;
    cursor: pointer;
}
.tb-chatdemo__history-reset:hover { background: #f1f5f9; }

.tb-chatdemo__history-tablewrap { overflow-x: auto; }
.tb-chatdemo__history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.tb-chatdemo__history-table thead th {
    text-align: left;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--tb-cd-border);
    white-space: nowrap;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tb-chatdemo__history-table tbody td {
    padding: .55rem .75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.tb-chatdemo__history-table tbody tr:hover { background: #fafbff; }
.tb-chatdemo__history-table code {
    background: #f1f5f9;
    color: #334155;
    padding: .1em .4em;
    border-radius: 4px;
    font-size: .82em;
}
.tb-chatdemo__history-empty td {
    text-align: center;
    color: var(--tb-cd-muted);
    padding: 1.5rem 0 !important;
    font-style: italic;
}
.tb-chatdemo__nowrap { white-space: nowrap; }

/* Code-Block + Syntax-Highlighting */
.tb-cd-code {
    background: #0f172a;
    color: #e2e8f0;
    padding: .85rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font: 12.5px/1.5 ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    margin: .65rem 0;
    white-space: pre;
    word-wrap: normal;
    word-break: normal;
}
.tb-cd-kw  { color: #c4b5fd; font-weight: 600; }
.tb-cd-fn  { color: #93c5fd; font-weight: 600; }
.tb-cd-str { color: #86efac; }
.tb-cd-com { color: #94a3b8; font-style: italic; }
.tb-cd-num { color: #fbbf24; }

/* MathML-Box: ruhig, akzentuiert, mit etwas Innenraum */
.tb-cd-math {
    margin: .75rem 0;
    padding: .9rem 1.1rem;
    background: linear-gradient(180deg, #f5f3ff, #ede9fe);
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
}
.tb-cd-math math {
    font-size: 1.15em;
    color: #1e1b4b;
}
.tb-cd-math math[display="block"] {
    display: block;
    margin: 0 auto;
}