/* The live demo: three machines — NetGet, a client, the model — and what joins them. */

.hero-demo { padding-bottom: 0.5rem; }

.demo {
    margin: 0 auto;
    max-width: 1320px;
    padding-inline: 1rem;
}

.demo-banner {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin: 0.5rem 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.muted { color: var(--text); opacity: 0.55; }
.spacer { flex: 1; }

/* ---- the three marks, shared by the diagram and the machines ---------------------- */

.section-how { max-width: 780px; margin: 0 auto; padding: 0.5rem 1.25rem 1rem; }

.dg .box.client { stroke: var(--cyan); stroke-width: 2; }
.dg .client-t { fill: var(--cyan); }
.dg .box.model { stroke: var(--yellow); stroke-width: 2; }
.dg .model-t { fill: var(--yellow); }

.mark {
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 0.05em 0.45em;
    border-radius: 6px;
    border: 1.5px solid currentColor;
    white-space: nowrap;
}
.mark-client { color: var(--cyan); border-style: dashed; }
.mark-netget { color: var(--green); }
.mark-model { color: var(--yellow); }

/* ---- machines ------------------------------------------------------------------------- */

.machine {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow);
    overflow: hidden;
    min-width: 0;
}

.machine-netget { border-color: var(--green); border-width: 2px; }
.machine-client { border-color: var(--cyan); border-style: dashed; border-width: 2px; }
.machine-model { border-color: var(--yellow); border-width: 2px; }
.machine-netget .machine-label { color: var(--green); }
.machine-client .machine-label { color: var(--cyan); }
.machine-model .machine-label { color: var(--yellow); }
.machine-netget .machine-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.machine-client .machine-dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.machine-model .machine-dot { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }

.machine-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.machine-label .muted { font-weight: 400; }

.machine-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}

.screen {
    background: var(--term-bg);
    padding: 0.5rem;
    margin: 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.term-host { background: var(--term-bg); }

#dash-term { height: 600px; }
#telnet-term { height: 280px; }

@media (max-width: 900px) {
    #dash-term { height: 440px; }
}

.xterm .xterm-viewport { background: transparent !important; }

.machine-base {
    padding: 0.4rem 0.9rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.base-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.base-key {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    min-width: 6.5rem;
}

.base-row.keys { color: var(--muted); }

.demo kbd {
    font-family: var(--mono);
    font-size: 0.72rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 0.3rem;
    color: var(--text);
}

/* the two cables from the NetGet machine down to the two machines below it */

.cables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 2.6rem;
    margin: 0 15%;
}

.cable {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.cable-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 2px dashed var(--muted);
}

.cable-tag {
    position: relative;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    background: var(--bg);
    padding: 0 0.4rem;
}

.cable-client .cable-line { border-color: var(--cyan); }
.cable-client .cable-tag { color: var(--cyan); }
.cable-model .cable-line { border-color: var(--yellow); }
.cable-model .cable-tag { color: var(--yellow); }

.machines-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .machines-row { grid-template-columns: minmax(0, 1fr); }
    .cables { margin: 0 25%; }
}

.model-badge {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    white-space: nowrap;
}

.model-badge.is-you { border-color: var(--yellow); color: var(--yellow); }
.model-badge.is-webllm { border-color: var(--green); color: var(--green); }
.model-badge.is-ollama { border-color: var(--cyan); color: var(--cyan); }

/* ---- controls ------------------------------------------------------------------------- */

.btn {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
}

.btn:hover { border-color: var(--cyan); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--cyan); color: #0b0e14; border-color: transparent; font-weight: 600; }

.demo input[type="text"],
.demo select,
.demo textarea {
    font: inherit;
    font-family: var(--mono);
    font-size: 0.85rem;
    background: var(--term-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    min-width: 0;
}

.demo textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.demo input.port { width: 5.5em; }
.demo label { font-size: 0.85rem; color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }

.server-list { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; align-items: center; }

.server-chip {
    font-family: var(--mono);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.server-chip.is-up { border-color: var(--green); color: var(--text); }
.server-chip small { color: var(--muted); }

/* ---- tabs and client panels ----------------------------------------------------------- */

.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem 0;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
}

.tabs button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.tabs button.is-active { background: var(--panel); color: var(--text); border-color: var(--border); }

.screen-client, .screen-model { padding: 0.7rem 0.8rem; }
[data-panel] .row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.55rem; }
[data-panel] .row .grow { flex: 1; }

.browser-window { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--term-bg); }
.browser-window.is-loading { opacity: 0.6; }
.browser-chrome { display: flex; gap: 0.4rem; padding: 0.4rem; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.browser-chrome input { flex: 1; }
#browser-frame { width: 100%; height: 280px; border: 0; background: #fff; }
#browser-pre { margin: 0; padding: 0.6rem; max-height: 280px; overflow: auto; font-family: var(--mono); font-size: 0.8rem; white-space: pre-wrap; }
.browser-meta { padding: 0.4rem 0.6rem; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--border); }
.browser-meta summary { cursor: pointer; }
.browser-meta pre { margin: 0.3rem 0 0; white-space: pre-wrap; }

.raw-log {
    font-family: var(--mono);
    font-size: 0.8rem;
    background: var(--term-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 220px;
    overflow: auto;
    padding: 0.5rem;
    white-space: pre-wrap;
    margin-bottom: 0.55rem;
}

.raw-line.raw-in { color: var(--green); }
.raw-line.raw-out { color: var(--cyan); }
.raw-line.raw-sys { color: var(--muted); }

/* ---- the model ------------------------------------------------------------------------ */

.llm-modes { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.9rem 0.3rem; }
.llm-mode { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem; align-items: center; font-size: 0.85rem; }
.llm-mode > label { color: var(--text); }
.llm-mode .llm-mode-body { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.llm-mode .status { grid-column: 2; font-size: 0.78rem; color: var(--muted); }
.llm-mode .status code { font-family: var(--mono); font-size: 0.75rem; }

.llm-transcript {
    max-height: 560px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.llm-card { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); font-size: 0.82rem; }
.llm-card.is-pending { border-color: var(--yellow); }
.llm-card.is-manual { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); }
.llm-card.is-done { border-color: var(--green); }
.llm-card.is-error { border-color: var(--red); }

.llm-card-head { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0.6rem; font-family: var(--mono); font-size: 0.75rem; flex-wrap: wrap; }
.llm-id { color: var(--text); font-weight: 700; }
.llm-kind { color: var(--cyan); }
.llm-meta { color: var(--muted); }
.llm-status { margin-left: auto; color: var(--yellow); }
.is-done .llm-status { color: var(--green); }
.is-error .llm-status { color: var(--red); }

.llm-section { border-top: 1px solid var(--border); }
.llm-section summary { cursor: pointer; padding: 0.35rem 0.6rem; color: var(--muted); font-size: 0.78rem; }
.llm-section pre, .llm-reply pre {
    margin: 0;
    padding: 0.45rem 0.6rem;
    max-height: 260px;
    overflow: auto;
    font-family: var(--mono);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--term-bg);
}

.llm-msg { border-top: 1px dashed var(--border); }
.llm-role { display: block; padding: 0.2rem 0.6rem 0; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--muted); }
.llm-role-system .llm-role { color: var(--cyan); }
.llm-role-user .llm-role { color: var(--yellow); }

.llm-reply { border-top: 1px solid var(--border); }
.llm-reply:empty { display: none; }
.llm-reply-label { padding: 0.35rem 0.6rem 0.2rem; font-size: 0.78rem; color: var(--muted); }
.llm-hint { margin: 0; padding: 0 0.6rem 0.4rem; color: var(--muted); font-size: 0.78rem; }
.llm-hint code { font-family: var(--mono); }
.llm-input, .llm-tools-input { margin: 0 0.6rem 0.4rem; width: calc(100% - 1.2rem); }
.llm-tools-input.is-invalid { border-color: var(--red); }
.llm-actions { display: flex; gap: 0.4rem; padding: 0 0.6rem 0.6rem; }
.llm-dim { color: var(--muted); }
.llm-empty { padding: 0.6rem 0.2rem; color: var(--muted); font-size: 0.85rem; }

/* ---- notes ---------------------------------------------------------------------------- */

.demo-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.demo-notes strong { color: var(--text); display: block; margin-bottom: 0.2rem; }
.demo-notes code { font-family: var(--mono); font-size: 0.8rem; }

@media (max-width: 900px) {
    .demo-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the protocol table: the ones compiled into the demo ------------------------------ */

.proto-list .in-web {
    font-weight: 600;
    color: var(--green);
}