/* The current-node panel (Node Assistant): one scrolling body of sections; prompts; the parameters
   (saved sets as cards with their picture and source, or side by side). */

.anomalous-node-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
}

.anomalous-node-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 16px 0;
}

.anomalous-node-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.anomalous-node-section-head h3 {
    margin: 0;
    color: var(--amb-text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.anomalous-node-section-btn {
    padding: 4px 10px;
    border: 1px solid var(--amb-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--amb-text-soft);
    font-size: 11.5px;
    cursor: pointer;
}

.anomalous-node-section-btn:hover {
    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
    color: var(--amb-text-main);
}

.anomalous-node-param-search {
    padding: 7px 10px;
    border: 1px solid var(--amb-border);
    border-radius: 8px;
    background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
    color: var(--amb-text-main);
    font-size: 12px;
}

.anomalous-node-param-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cards or side by side. */
.anomalous-node-param-views {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--amb-border);
    border-radius: 999px;
}

.anomalous-node-param-views[hidden] { display: none; }

.anomalous-node-param-view {
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--amb-text-muted);
    font-size: 11px;
    cursor: pointer;
}

.anomalous-node-param-view:hover { color: var(--amb-text-main); }

.anomalous-node-param-view.is-on {
    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
    color: var(--amb-text-main);
    font-weight: 600;
}

.anomalous-node-param-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* On top: the set last put into this node and what changed since, or the set the values match. */
.anomalous-node-param-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--amb-link) 30%, var(--amb-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--amb-link) 7%, transparent);
    color: var(--amb-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.anomalous-node-param-history > .anomalous-node-param-icon {
    width: 15px;
    height: 15px;
    color: var(--amb-link);
}

.anomalous-node-param-history-main { color: var(--amb-text-main); }
.anomalous-node-param-history-note.is-same { color: var(--amb-ok-text); }
.anomalous-node-param-history > .anomalous-node-param-link { margin-left: auto; }

/* The card (or column) of the set last put in. */
.anomalous-node-param-last {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amb-link) 18%, transparent);
    color: var(--amb-text-main);
    font-size: 10px;
    font-weight: 600;
}

.anomalous-node-param-table .anomalous-node-param-last {
    display: inline-block;
    margin-top: 3px;
}

.anomalous-node-param {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--amb-border);
    border-radius: 10px;
    background: rgba(var(--amb-ink-rgb), 0.035);
}

/* The picture made with the values, and where they came from. */
.anomalous-node-param-top {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.anomalous-node-param-thumb {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 68px;
    padding: 0;
    border: 1px solid var(--amb-border);
    border-radius: 8px;
    background: rgba(var(--amb-ink-rgb), 0.05);
    color: var(--amb-text-dim);
    overflow: hidden;
    cursor: zoom-in;
}

.anomalous-node-param-thumb.is-empty { cursor: default; }

.anomalous-node-param-thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anomalous-node-param-thumb > .anomalous-node-param-icon {
    width: 20px;
    height: 20px;
}

.anomalous-node-param-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.anomalous-node-param-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.anomalous-node-param-name {
    overflow: hidden;
    color: var(--amb-text-main);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anomalous-node-param-role {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--amb-ink-rgb), 0.06);
    color: var(--amb-link);
    font-size: 10px;
}

.anomalous-node-param-role.is-positive { color: var(--amb-ok-text); }
.anomalous-node-param-role.is-negative { color: var(--amb-danger-text); }

.anomalous-node-param-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.anomalous-node-param-icon > svg {
    width: 100%;
    height: 100%;
}

/* Where a set came from: a chip per channel, each its own colour. */
.anomalous-node-param-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.anomalous-node-param-source {
    --source: var(--amb-text-soft);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--source) 35%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--source) 12%, transparent);
    color: var(--amb-text-main);
    font: inherit;
    font-size: 11.5px;
}

.anomalous-node-param-source.is-workflow { --source: var(--amb-link); }
.anomalous-node-param-source.is-combo { --source: var(--amb-warn); }
.anomalous-node-param-source.is-picture { --source: var(--amb-ok); }
.anomalous-node-param-source > .anomalous-node-param-icon { color: var(--source); }
button.anomalous-node-param-source { cursor: pointer; }
button.anomalous-node-param-source:hover { background: color-mix(in srgb, var(--source) 24%, transparent); }
.anomalous-node-param-source-count { font-weight: 700; }
.anomalous-node-param-source-go { color: var(--amb-text-soft); }
.anomalous-node-param-day { color: var(--amb-text-dim); font-size: 11px; }

.anomalous-node-param-link {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--amb-link);
    font: inherit;
    cursor: pointer;
}

.anomalous-node-param-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The values: the name, then a picture of the change (two bars for numbers, old → new otherwise). */
.anomalous-node-param-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.anomalous-node-param-row {
    display: grid;
    grid-template-columns: minmax(56px, 112px) minmax(48px, 200px) auto;
    justify-content: start;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--amb-text-soft);
    font-size: 11.5px;
}

.anomalous-node-param-row.is-kept,
.anomalous-node-param-row.is-same {
    grid-template-columns: minmax(56px, 112px) minmax(0, 1fr);
    justify-content: stretch;
    color: var(--amb-text-dim);
}

.anomalous-node-param-label {
    overflow: hidden;
    color: var(--amb-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anomalous-node-param-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 40px;
}

.anomalous-node-param-bar {
    height: 5px;
    border-radius: 3px;
}

.anomalous-node-param-bar.is-now { background: rgba(var(--amb-ink-rgb), 0.22); }
.anomalous-node-param-bar.is-then { background: var(--amb-link); }

.anomalous-node-param-nums {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.anomalous-node-param-nums > .is-now { color: var(--amb-text-dim); }

.anomalous-node-param-nums > strong {
    color: var(--amb-text-main);
    font-weight: 600;
}

.anomalous-node-param-trend {
    margin-left: 3px;
    color: var(--amb-link);
}

.anomalous-node-param-swap {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / -1;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--amb-text-dim);
}

.anomalous-node-param-pill {
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anomalous-node-param-pill.is-now {
    background: rgba(var(--amb-ink-rgb), 0.06);
    color: var(--amb-text-dim);
    text-decoration: line-through;
}

.anomalous-node-param-pill.is-then {
    background: color-mix(in srgb, var(--amb-link) 16%, transparent);
    color: var(--amb-text-main);
}

.anomalous-node-param-quiet {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The one line on what stays, across the whole row. */
.anomalous-node-param-quiet:only-child {
    grid-column: 1 / -1;
    white-space: normal;
}

.anomalous-node-muted {
    margin: 0;
    color: var(--amb-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.anomalous-node-muted.is-error { color: var(--amb-danger-text); }

/* Show all, compare, delete, apply. */
.anomalous-node-param-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.anomalous-node-param-gap { flex: 1; }

.anomalous-node-param-more {
    padding: 0;
    border: none;
    background: none;
    color: var(--amb-text-muted);
    font-size: 11.5px;
    cursor: pointer;
}

.anomalous-node-param-more:hover { color: var(--amb-text-main); }

.anomalous-node-param-secondary,
.anomalous-node-param-delete {
    padding: 5px 10px;
    border: 1px solid var(--amb-border);
    border-radius: 7px;
    background: transparent;
    color: var(--amb-text-muted);
    font-size: 11.5px;
    cursor: pointer;
}

.anomalous-node-param-secondary:hover {
    border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
    color: var(--amb-text-main);
}

.anomalous-node-param-delete:hover {
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--amb-danger-text);
}

.anomalous-node-param-apply {
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--amb-link) 14%, transparent);
    color: var(--amb-text-main);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.anomalous-node-param-apply:disabled {
    border-color: var(--amb-border);
    background: transparent;
    color: var(--amb-text-dim);
    cursor: default;
}

/* Side by side: a column for now and for each set, the values a set would put in marked. */
.anomalous-node-param-table-wrap {
    border: 1px solid var(--amb-border);
    border-radius: 10px;
    overflow-x: auto;
}

.anomalous-node-param-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.anomalous-node-param-table th,
.anomalous-node-param-table td {
    max-width: 150px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--amb-border);
    overflow: hidden;
    color: var(--amb-text-soft);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anomalous-node-param-table th {
    vertical-align: bottom;
    font-weight: 600;
}

.anomalous-node-param-table .is-now { color: var(--amb-text-muted); }

.anomalous-node-param-table td.is-change {
    background: color-mix(in srgb, var(--amb-link) 13%, transparent);
    color: var(--amb-text-main);
}

.anomalous-node-param-table td.is-same,
.anomalous-node-param-table td.is-none { color: var(--amb-text-dim); }

.anomalous-node-param-table td.is-seed,
.anomalous-node-param-table td.is-model,
.anomalous-node-param-table td.is-missing {
    color: var(--amb-text-dim);
    font-style: italic;
}

.anomalous-node-param-table-thumb {
    display: block;
    width: 44px;
    height: 56px;
    margin-bottom: 5px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(var(--amb-ink-rgb), 0.05);
    overflow: hidden;
}

button.anomalous-node-param-table-thumb { cursor: zoom-in; }

.anomalous-node-param-table-thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anomalous-node-param-table-name {
    display: block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anomalous-node-param-table-foot td { border-bottom: none; }

/* A prompt box of the node, with its translation. */
.anomalous-node-prompt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--amb-border);
    border-radius: 10px;
    background: rgba(var(--amb-ink-rgb), 0.035);
}

.anomalous-node-param-role.is-plain { color: var(--amb-text-soft); }

.anomalous-node-prompt-name {
    color: var(--amb-text-dim);
    font-size: 10.5px;
}

.anomalous-node-prompt-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--amb-text-main);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.anomalous-node-prompt-text.is-empty { color: var(--amb-text-dim); }