:root {
    --term-bg:    #0d120f;
    --term-bg2:   #121a15;
    --term-panel: #141d18;
    --term-line:  #294035;
    --term-fg:    #dfe8e2;   /* primary text: high-contrast, near-white */
    --term-green: #5fe39a;   /* accent (borders, buttons, headings) */
    --term-dim:   #8aa596;   /* muted/secondary text, still legible */
    --term-amber: #f0c453;
    --term-red:   #ff8585;
    --term-cyan:  #7fd6e6;
    --term-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Point Bootstrap's theme variables at the terminal palette so components
       (cards, labels, muted text, borders) stop using the light-theme dark greys. */
    --bs-body-color: #dfe8e2;
    --bs-body-color-rgb: 223, 232, 226;
    --bs-body-bg: #0d120f;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #8aa596;
    --bs-tertiary-color: #8aa596;
    --bs-border-color: #294035;
    --bs-secondary-bg: #141d18;
    --bs-tertiary-bg: #121a15;
}

html, body {
    font-family: var(--term-mono);
    background: var(--term-bg);
    color: var(--term-fg);
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: .1px;
}

a, .btn-link { color: var(--term-cyan); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--term-green); }

h1, h2, h3, h4, h5 { color: var(--term-green); }
.text-muted { color: var(--term-dim) !important; }
code, pre, .font-monospace { font-family: var(--term-mono); color: var(--term-cyan); }

.btn-primary, .term-btn {
    color: #07150d;
    background: #41c47e;
    border: 1px solid #41c47e;
    font-weight: 600; letter-spacing: .2px;
}
.btn-primary:hover, .term-btn:hover { background: #5fe39a; border-color: #5fe39a; color: #07150d; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light {
    color: var(--term-green); border-color: var(--term-line); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover {
    color: #04120a; background: var(--term-green); border-color: var(--term-green);
}

.card {
    background: var(--term-panel);
    border: 1px solid var(--term-line);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(61,255,132,.04), 0 10px 30px rgba(0,0,0,.5);
}
.card-title { color: var(--term-green); }

.form-control, .form-select, textarea {
    background: #06100a; color: var(--term-fg);
    border: 1px solid var(--term-line); border-radius: 6px;
    font-family: var(--term-mono);
}
.form-control::placeholder { color: #3c5e46; }
.form-control:focus, .form-select:focus {
    background: #06100a; color: var(--term-fg);
    border-color: var(--term-green);
    box-shadow: 0 0 0 .15rem rgba(61,255,132,.2);
}
.form-label { color: var(--term-dim); text-transform: uppercase; font-size: .72rem; letter-spacing: .6px; }

.table { color: var(--term-fg); }
.table > :not(caption) > * > * { border-color: var(--term-line); }
.table-danger { --bs-table-bg: #2a0d0d; --bs-table-color: #ffb3b3; }
.table-warning { --bs-table-bg: #2a230a; --bs-table-color: var(--term-amber); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .15rem rgba(61,255,132,.35);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Login ---- */
.empty-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1000px 500px at 50% -10%, #0c2417 0%, #081109 60%, #050805 100%); }
.login-wrap { width: 100%; max-width: 400px; padding: 1rem; }
.login-card {
    background: var(--term-panel); color: var(--term-fg);
    border: 1px solid var(--term-line); border-radius: 12px; padding: 2rem;
    box-shadow: 0 0 0 1px rgba(61,255,132,.05), 0 20px 60px rgba(0,0,0,.6);
}
.login-card h1, .login-card h2, .login-card h3 { color: var(--term-green); }
.login-local summary { cursor: pointer; list-style: none; }
.login-local summary::before { content: "▸ "; }
.login-local[open] summary::before { content: "▾ "; }

/* ---- Nav footer: signed-in user + sign out, language switch ---- */
.nav-footer {
    margin-top: auto;
    padding: 1rem 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    color: #d7d7d7;
    display: flex; flex-direction: column; gap: 1rem;
}
.nav-footer-block { display: flex; flex-direction: column; gap: .4rem; }
.nav-footer-label {
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--term-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-footer .btn { font-size: .85rem; }
/* the buttons sit inside forms, so Bootstrap's button-group rounding does not reach them: join them here */
.nav-lang-switch form { display: contents; }
.nav-lang-switch form:not(:first-child) .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.nav-lang-switch form:not(:last-child) .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---- Connector card: secret fields ---- */
.secret-badge-set { background: #12301f; color: var(--term-green); border: 1px solid #1f6b3a; font-weight: 500; }
.secret-badge-unset { background: #1a221d; color: var(--term-dim); border: 1px solid var(--term-line); font-weight: 500; }
.secret-masked { letter-spacing: .15em; color: var(--term-green); }

/* ---- Connector overview (radial) ---- */
.pg-pill { display: inline-block; font-size: .68rem; padding: .1rem .5rem; border-radius: 999px; letter-spacing: .3px; }
.pg-pill-green { background: #12301f; color: var(--term-green); border: 1px solid #1f6b3a; }
.pg-pill-amber { background: #2e2710; color: var(--term-amber); border: 1px solid #6b541f; }
.pg-pill-grey  { background: #1a221d; color: var(--term-dim); border: 1px solid var(--term-line); }

.pg-radial {
    position: relative;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 1 / 1;
    margin: 1rem auto 0;
}

/* spokes from the hub to each connector */
.pg-spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.pg-spoke { stroke: var(--term-line); stroke-width: 2; }
.pg-spoke.is-active {
    stroke: var(--term-green); stroke-width: 2.5; stroke-dasharray: 5 6;
    filter: drop-shadow(0 0 3px rgba(95,227,154,.5));
    animation: pg-dash 1s linear infinite;
}
@keyframes pg-dash { to { stroke-dashoffset: -11; } }

/* Interval-scheduled flows run continuously rather than at a wall-clock moment: the dashes travel
   faster and a pulse rides the spoke, so "every few seconds" reads differently from "daily at 04:00". */
.pg-spoke.is-interval { animation-duration: .35s; }
.pg-conn-cadence {
    display: inline-flex; align-items: center; gap: .35rem;
}
.pg-conn-cadence::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--term-green); animation: pg-pulse 1.6s ease-in-out infinite;
}
@keyframes pg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
    .pg-spoke.is-active, .pg-conn-cadence::before { animation: none; }
}

/* DeriQ hub, centered */
.pg-hub-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: 150px; height: 150px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 35%, #14b677 0%, #0b5e40 72%);
    color: #fff; text-align: center;
    border: 1px solid rgba(95,227,154,.5);
    box-shadow: 0 0 40px rgba(13,120,82,.45), inset 0 0 24px rgba(0,0,0,.25);
}
.pg-hub-logo { font-size: 1.7rem; font-weight: 800; letter-spacing: .5px; }
.pg-hub-sub { font-size: .68rem; opacity: .85; margin-bottom: .25rem; }

/* connector nodes positioned around the circle (inline left/top %) */
.pg-conn {
    position: absolute; transform: translate(-50%, -50%); z-index: 2;
    width: 150px; text-align: center;
    background: var(--term-panel); border: 1px solid var(--term-line);
    border-radius: 12px; padding: .5rem .55rem;
}
.pg-conn.is-active { border-color: var(--term-green); box-shadow: 0 0 16px rgba(95,227,154,.22); }
.pg-conn.is-planned { opacity: .55; }
.pg-conn-name { font-weight: 600; color: var(--term-fg); }
.pg-conn-meta { font-size: .68rem; color: var(--term-dim); margin-top: .25rem; line-height: 1.3; }
.pg-conn-sync { color: var(--term-cyan); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Terminal shell (shared by Logs + Database) ---- */
.term-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.term-title { font-size: 1.3rem; margin: 0; }
.term-actions { display: flex; align-items: center; gap: .6rem; }
.term-check { color: var(--term-dim); font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.term-dim { color: var(--term-dim); }
.term-error { color: var(--term-red); background: #1a0808; border: 1px solid #5a1d1d; border-radius: 6px; padding: .6rem .8rem; white-space: pre-wrap; }
.term-btn { font-size: .78rem; padding: .15rem .6rem; }
.term-input { font-family: var(--term-mono); }

/* ---- Logs ---- */
.term-toolbar { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.term-levels { display: flex; gap: .35rem; }
.term-pill {
    font-size: .72rem; letter-spacing: .5px; padding: .15rem .55rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--term-line); color: var(--term-dim); cursor: pointer;
}
.term-pill.is-on { color: #04120a; background: var(--term-green); border-color: var(--term-green); font-weight: 700; }
.term-toolbar .term-input { flex: 1; min-width: 180px; }

.term-screen {
    background: #0a100c; border: 1px solid var(--term-line); border-radius: 8px;
    padding: .6rem .8rem; min-height: 50vh; max-height: 68vh; overflow-y: auto;
}
.term-line { display: grid; grid-template-columns: 11.5rem 7rem 10rem 1fr; gap: .6rem; padding: .12rem 0; align-items: baseline; border-bottom: 1px dotted rgba(61,255,132,.06); white-space: nowrap; }
.term-line .term-msg { white-space: pre-wrap; word-break: break-word; }
.term-ts { color: var(--term-dim); overflow: hidden; text-overflow: ellipsis; }
.term-cat { color: var(--term-cyan); overflow: hidden; text-overflow: ellipsis; }
.term-badge { overflow: hidden; text-overflow: ellipsis; }
.term-msg { color: var(--term-fg); }
.term-badge { font-size: .68rem; font-weight: 700; letter-spacing: .5px; }
.term-exc { grid-column: 4; }
.term-exc pre { color: var(--term-red); font-size: .76rem; margin: .3rem 0 0; white-space: pre-wrap; }
.term-foot { margin-top: .5rem; font-size: .78rem; }

/* per-level coloring */
.term-lvl-information .term-badge, .term-lvl-information .term-msg { color: var(--term-fg); }
.term-lvl-warning .term-badge, .term-lvl-warning .term-msg { color: var(--term-amber); }
.term-lvl-error .term-badge, .term-lvl-error .term-msg,
.term-lvl-critical .term-badge, .term-lvl-critical .term-msg { color: var(--term-red); }
.term-lvl-debug .term-msg, .term-lvl-trace .term-msg { color: var(--term-dim); }

/* ---- Database browser ---- */
.db-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.db-tables { background: var(--term-panel); border: 1px solid var(--term-line); border-radius: 8px; padding: .6rem; max-height: 75vh; overflow-y: auto; }
.db-table {
    display: block; width: 100%; text-align: left; font-family: var(--term-mono); font-size: .82rem;
    background: transparent; color: var(--term-fg); border: 0; border-radius: 5px; padding: .25rem .45rem; cursor: pointer;
}
.db-table:hover { background: rgba(61,255,132,.08); }
.db-table.is-on { background: var(--term-green); color: #04120a; font-weight: 700; }
.db-main { min-width: 0; }
.db-sql { margin-bottom: .7rem; }
.db-sql-actions { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.db-grid-wrap { overflow: auto; max-height: 65vh; border: 1px solid var(--term-line); border-radius: 8px; }
.db-grid { width: 100%; border-collapse: collapse; font-size: .8rem; }
.db-grid th, .db-grid td { border: 1px solid var(--term-line); padding: .25rem .5rem; text-align: left; white-space: nowrap; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; }
.db-grid th { position: sticky; top: 0; background: #0b1a0f; color: var(--term-green); z-index: 1; }
.db-grid tbody tr:nth-child(odd), .db-grid tbody tr:nth-child(odd) { background: rgba(255,255,255,.012); }
.db-grid .db-null { color: #355a40; font-style: italic; }
/* ---- Sync-log reference chips ---- */
.log-chip {
    display: inline-flex; align-items: baseline; gap: .3rem;
    font-family: var(--term-mono); font-size: .78rem; line-height: 1.2;
    background: rgba(127,214,230,.10); color: var(--term-fg);
    border: 1px solid var(--term-line); border-radius: 5px;
    padding: .05rem .35rem; margin: 0 .1rem; cursor: pointer;
}
.log-chip:hover { background: rgba(127,214,230,.22); border-color: var(--term-cyan); }
.log-chip-label { font-weight: 600; }
.log-chip-id { color: var(--term-dim); }
/* Refs the message text does not itself name, appended after it. */
.log-chip-extra { border-style: dashed; }

/* ---- Build / About ---- */
.app-build-summary { color: var(--term-dim); font-size: .72rem; white-space: nowrap; }
.about-page { max-width: 980px; }
.about-kicker { color: var(--term-dim); font-size: .7rem; letter-spacing: .7px; text-transform: uppercase; margin-bottom: .2rem; }
.about-version { color: #07150d; background: var(--term-green); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; font-weight: 700; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.about-card { box-shadow: none; }
.about-heading { color: var(--term-green); font-size: .95rem; margin-bottom: 1rem; }
.about-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1rem; font-size: .82rem; }
.about-facts dt { color: var(--term-dim); font-weight: 500; }
.about-facts dd { color: var(--term-fg); margin: 0; overflow-wrap: anywhere; }
.about-updates { padding-left: 1.15rem; color: var(--term-fg); font-size: .82rem; }
.about-updates li + li { margin-top: .55rem; }

/* ---- Deriq AI fix panel ---- */
.ai-fix-panel {
    visibility: visible;
    width: min(46rem, 100vw) !important;
    height: 100dvh;
    color: var(--term-fg);
    background: var(--term-bg);
    border-left: 1px solid var(--term-line) !important;
    box-shadow: -14px 0 40px rgba(0,0,0,.35);
}
.ai-fix-header { flex: none; min-height: 4.25rem; padding: .8rem 1.35rem; background: var(--term-bg); border-bottom: 1px solid var(--term-line); }
.ai-fix-header > div { min-width: 0; }
.ai-fix-run { color: var(--term-dim); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-fix-body { display: flex; flex-direction: column; gap: .75rem; min-height: 0; overflow: hidden; padding: .85rem 1.35rem 1rem; }
.ai-sign-in { overflow-y: auto; }
.ai-fix-body .alert-info { color: var(--term-cyan); background: #0c1f22; border-color: #24545c; }
.ai-account-strip { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; color: var(--term-dim); font-size: .75rem; }
.ai-account-state { display: inline-flex; align-items: center; gap: .45rem; }
.ai-state-dot { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--term-green); box-shadow: 0 0 0 3px rgba(95,227,154,.09); }
.ai-analysis-card { flex: none; border-color: #6b541f; box-shadow: none; }
.ai-analysis-card .card-body { padding: .85rem 1rem; }
.ai-analysis-card .card-title { color: var(--term-amber); font-size: .88rem; }

.ai-chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: .7rem; min-height: 8rem; overflow-y: auto; overscroll-behavior: contain; padding: .1rem .3rem .35rem 0; scrollbar-color: var(--term-line) transparent; }
.ai-chat-turn { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ai-chat-turn.is-user { align-items: flex-end; }
.ai-chat-turn.is-assistant { align-items: flex-start; }
.ai-chat-bubble { max-width: 93%; padding: .72rem .8rem; border-radius: 6px; font-size: .78rem; overflow-wrap: anywhere; }
.is-user > .ai-chat-bubble { margin-left: 3.25rem; color: var(--term-fg); background: #173522; }
.is-assistant > .ai-chat-bubble { margin-right: 1.6rem; background: var(--term-bg2); border: 1px solid var(--term-line); }
.ai-chat-label { display: flex; align-items: center; gap: .4rem; color: var(--term-green); font-size: .7rem; font-weight: 600; margin-bottom: .45rem; }
.is-user .ai-chat-label { color: var(--term-fg); }
.ai-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; color: var(--term-green); background: #12301f; border: 1px solid #1f6b3a; border-radius: 50%; font-size: .65rem; }
.ai-user-content { white-space: pre-wrap; }

.ai-rich-content { line-height: 1.55; }
.ai-rich-content > :first-child, .ai-rich-html > :first-child { margin-top: 0; }
.ai-rich-content > :last-child, .ai-rich-html > :last-child { margin-bottom: 0; }
.ai-rich-content h1, .ai-rich-content h2, .ai-rich-content h3, .ai-rich-content h4, .ai-rich-content h5, .ai-rich-content h6 { color: var(--term-green); font-size: .9rem; margin: .15rem 0 .55rem; line-height: 1.35; }
.ai-rich-content p { margin: 0 0 .55rem; }
.ai-rich-content ul, .ai-rich-content ol { margin: .25rem 0 .65rem; padding-left: 1.25rem; }
.ai-rich-content li + li { margin-top: .2rem; }
.ai-rich-content blockquote { margin: .55rem 0; padding: .4rem .65rem; color: var(--term-dim); border-left: 2px solid var(--term-green); background: rgba(95,227,154,.04); }
.ai-rich-content code { color: var(--term-cyan); background: #06100a; border: 1px solid var(--term-line); border-radius: 3px; padding: .05rem .25rem; font-size: .72rem; }
/* Sideways-scrollable blocks reserve a lane at the bottom for the scrollbar and
   keep a clear margin under them. With "always show scrollbars" (a macOS setting)
   the thumb is drawn inside the block's bottom edge, where it otherwise sits on
   the code and crowds the line that follows. */
.ai-rich-content pre { max-width: 100%; margin: .55rem 0 .9rem; padding: .55rem .55rem 1rem; overflow: auto; color: var(--term-cyan); background: #0a100c; border: 1px solid var(--term-line); border-radius: 5px; font-size: .7rem; white-space: pre; scrollbar-color: var(--term-line) transparent; }
.ai-rich-content pre code { padding: 0; background: transparent; border: 0; white-space: pre; }
.ai-rich-html { max-width: 100%; margin: .6rem 0 .9rem; padding-bottom: .45rem; overflow-x: auto; border: 1px solid var(--term-line); border-radius: 5px; scrollbar-color: var(--term-line) transparent; }
.ai-rich-html > table, .ai-rich-content > table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: .7rem; }
.ai-rich-html th, .ai-rich-html td, .ai-rich-content > table th, .ai-rich-content > table td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--term-line); white-space: nowrap; }
.ai-rich-html th, .ai-rich-content > table th { color: var(--term-green); background: #0b1a0f; font-weight: 600; }
.ai-rich-html tr:last-child td, .ai-rich-content > table tr:last-child td { border-bottom: 0; }
.ai-rich-content .deriq-ref { display: inline-flex; align-items: center; color: var(--term-green); background: #12301f; border: 1px solid #1f6b3a; border-radius: 999px; padding: .05rem .4rem; font-size: .7rem; font-weight: 600; }
.ai-rich-card { margin: .55rem 0; padding: .6rem .7rem; color: var(--term-fg); background: #101812; border: 1px solid var(--term-line); border-radius: 6px; }
.ai-rich-card > strong { display: block; color: var(--term-green); margin-bottom: .3rem; }

/* Tool-call group: one collapsed line by default so a long tool run costs a line
   instead of pushing the assistant's answer off screen. Sits ABOVE the answer. */
.ai-tool-group { width: calc(100% - 1.6rem); margin-bottom: .4rem; border: 1px solid var(--term-line); border-radius: 6px; background: #0d140f; font-size: .72rem; }
.ai-tool-group.is-error { border-color: #5a1d1d; }
.ai-tool-group-summary { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; cursor: pointer; list-style: none; color: var(--term-dim); }
.ai-tool-group-summary::-webkit-details-marker { display: none; }
.ai-tool-group-summary::before { content: "\25b8"; display: inline-block; transition: transform .12s ease; }
.ai-tool-group[open] > .ai-tool-group-summary::before { transform: rotate(90deg); }
.ai-tool-group-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tool-expand-all { align-self: flex-start; margin-bottom: .1rem; padding: 0; color: var(--term-cyan); background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
/* Cap the open group so it always fits: the window keeps it short, this keeps a
   wide result payload from doing the same damage vertically. */
.ai-tool-group-body { display: flex; flex-direction: column; gap: .35rem; max-height: 22rem; padding: 0 .55rem .5rem; overflow-y: auto; scrollbar-color: var(--term-line) transparent; }
/* "alles uitklappen" means show everything: the cap exists to stop an unread tool
   run from eating the panel, not to fight a reader who asked to see it all. The
   message list scrolls instead. */
.ai-tool-group.is-expanded > .ai-tool-group-body { max-height: none; overflow-y: visible; }
.ai-tool-group .ai-tool-call { width: 100%; }
.ai-tool-call { width: calc(100% - 1.6rem); padding: .45rem .55rem; color: var(--term-dim); background: #101812; border: 1px solid var(--term-line); border-radius: 6px; font-size: .72rem; }
.ai-tool-call.is-error { border-color: #5a1d1d; }
.ai-tool-call summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; }
.ai-tool-call summary::-webkit-details-marker { display: none; }
.ai-tool-status { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--term-green); border: 1px solid #1f6b3a; border-radius: 50%; font-size: .65rem; }
.ai-tool-call.is-error .ai-tool-status { color: var(--term-red); border-color: #6b1f1f; }
.ai-tool-meta { color: var(--term-dim); }
.ai-tool-section-label { margin-top: .55rem; color: var(--term-dim); font-size: .68rem; text-transform: uppercase; }
.ai-tool-call pre { max-height: 13rem; margin: .25rem 0 .45rem; padding: .45rem .45rem .8rem; overflow: auto; color: var(--term-cyan); background: #08100b; border-radius: 4px; font-size: .68rem; white-space: pre-wrap; scrollbar-color: var(--term-line) transparent; }

.ai-chat-failure { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex: none; padding: .5rem .65rem; color: var(--term-red); background: #1a0808; border: 1px solid #5a1d1d; border-radius: 6px; font-size: .72rem; }
.ai-retry { flex: none; padding: .2rem .45rem; color: var(--term-red); background: transparent; border: 1px solid #6b1f1f; font-size: .7rem; }
.ai-retry:hover { color: #fff; background: #5a1d1d; }
.ai-chat-status { display: flex; align-items: center; gap: .4rem; flex: none; color: var(--term-dim); font-size: .72rem; }
.ai-typing { display: inline-flex; align-items: center; gap: .18rem; min-height: .8rem; }
.ai-typing i { width: .3rem; height: .3rem; background: var(--term-green); border-radius: 50%; animation: ai-dot 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 50% { opacity: .25; transform: translateY(-1px); } }

.ai-composer { display: flex; flex: none; }
.ai-composer textarea { flex: 1; min-width: 0; height: 3.65rem; resize: none; padding: .55rem; border-radius: 6px 0 0 6px; font-size: .76rem; }
.ai-composer .btn { width: 5.5rem; border-radius: 0 6px 6px 0; font-size: .76rem; }

/* Full-page chat: the fix panel's column layout, sized to the viewport instead of an offcanvas. */
/* 3.5rem top row + the content article's 0.6rem/0.7rem vertical padding, so the page itself never scrolls. */
.ai-chat-page { display: flex; flex-direction: column; height: calc(100dvh - 4.8rem); min-height: 0; }
.ai-chat-page-body { flex: 1 1 auto; padding: .85rem 0 0; border-top: 1px solid var(--term-line); }

@media (max-width: 640.98px) {
    .app-build-summary { display: none; }
    .about-grid { grid-template-columns: 1fr; }
    .about-facts { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .ai-fix-header { padding: .75rem 1rem; }
    .ai-fix-body { padding: .75rem 1rem; }
    .ai-account-strip { align-items: flex-start; }
    .ai-chat-bubble { max-width: 96%; }
    .is-user > .ai-chat-bubble { margin-left: 1.25rem; }
    .is-assistant > .ai-chat-bubble { margin-right: .6rem; }
    .ai-tool-call { width: calc(100% - .6rem); }
    .ai-tool-group { width: calc(100% - .6rem); }
    .ai-tool-group .ai-tool-call { width: 100%; }
    .ai-chat-failure { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-typing i { animation: none; }
}

/* Recent-runs hourly grouping: a flow scheduled every few seconds fills the page,
   so a busy hour collapses to one row that expands into its runs. */
.run-bucket > td { background: #101812; }
.run-bucket-toggle { color: var(--term-green); text-decoration: none; white-space: nowrap; }
.run-bucket-toggle:hover { text-decoration: underline; }
.run-bucket-caret { display: inline-block; width: .8rem; color: var(--term-dim); }
/* Child rows are the same shape as an ordinary run row, marked as belonging to the
   group above by an accent rail rather than by indentation alone. */
.run-in-bucket > td:first-child { box-shadow: inset .18rem 0 0 var(--term-line); }
.run-in-bucket > td { color: var(--term-dim); }
.run-in-bucket a.btn { --bs-btn-color: var(--term-dim); }

/* Connector tiles: a compact grid of what this instance runs, with the + offering what it
   does not. No "connected" styling on purpose — nothing measures reachability. */
.connector-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.connector-tile { display: flex; flex-direction: column; gap: .2rem; min-height: 5.2rem; padding: .6rem .7rem; text-align: left; color: var(--term-fg); background: var(--term-panel); border: 1px solid var(--term-line); border-radius: 7px; cursor: pointer; }
.connector-tile:hover { border-color: var(--term-green); }
.connector-tile.is-open { border-color: var(--term-green); box-shadow: inset 0 0 0 1px var(--term-green); }
.connector-tile-name { color: var(--term-green); font-weight: 600; font-size: .82rem; }
.connector-tile-state { display: flex; align-items: center; gap: .35rem; color: var(--term-dim); font-size: .72rem; }
.connector-tile-used { color: var(--term-dim); font-size: .68rem; }
.connector-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--term-dim); }
.connector-tile.is-configured .connector-dot { background: var(--term-green); }
.connector-tile.is-incomplete .connector-dot { background: var(--term-amber); }
.connector-tile.is-unconfigured .connector-dot { background: transparent; border: 1px solid var(--term-dim); }
.connector-tile.is-incomplete .connector-tile-state { color: var(--term-amber); }
.connector-tile-add { align-items: stretch; justify-content: center; cursor: default; border-style: dashed; }
.connector-add-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 100%; height: 100%; padding: 0; color: var(--term-dim); background: none; border: 0; cursor: pointer; font-size: .72rem; }
.connector-add-btn:hover { color: var(--term-green); }
.connector-add-plus { font-size: 1.3rem; line-height: 1; }
.connector-add-list { display: flex; flex-direction: column; gap: .15rem; }
.connector-detail { margin-bottom: 1rem; }

/* Sync flows grouped per connector. */
.flow-group-title { margin: 1.2rem 0 .5rem; color: var(--term-green); font-size: .95rem; border-bottom: 1px solid var(--term-line); padding-bottom: .25rem; }
.flow-group-title:first-of-type { margin-top: 0; }
.flow-group-count { font-size: .72rem; font-weight: 400; }