/* ---------- результат ---------- */
.result { display: grid; gap: var(--s4); margin-top: var(--s2); scroll-margin-top: 80px; }
.res-card { animation: res-in 520ms var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes res-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.res-head__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.res-title { font-size: var(--fs-xl); }
.res-meta { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); }
.res-summary { font-size: var(--fs-lg); line-height: 1.55; }
.res-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.res-list li::marker { color: var(--accent); }
.res-sub { font-size: var(--fs-md); margin-top: var(--s2); color: var(--text-2); }
.res-details summary { cursor: pointer; font-weight: 600; color: var(--text-2); padding: var(--s2) 0; }
.approx { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 13px; vertical-align: middle; }

/* markdown */
.md { display: grid; gap: var(--s2); overflow-wrap: anywhere; }
.md h2, .md h3, .md h4 { margin-top: var(--s2); }
.md ul, .md ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.md pre { margin: 0; padding: var(--s3); border-radius: 12px; background: var(--code-bg); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--hairline); width: 100%; }

/* семейства операторов */
[data-fam="TOP"] { --fam: var(--fam-top); }
[data-fam="CHOP"] { --fam: var(--fam-chop); }
[data-fam="SOP"] { --fam: var(--fam-sop); }
[data-fam="DAT"] { --fam: var(--fam-dat); }
[data-fam="COMP"] { --fam: var(--fam-comp); }
[data-fam="MAT"] { --fam: var(--fam-mat); }

/* граф */
:root { --ref-edge: #b45309; --node-fill: rgba(255, 255, 255, .72); --node-stroke: rgba(255, 255, 255, .95); --edge: #6b7390; --graph-bg: rgba(255, 255, 255, .35); --graph-export-bg: #f6f7fb; }
html[data-theme="dark"] { --ref-edge: #f0b443; --node-fill: rgba(30, 33, 46, .78); --node-stroke: rgba(255, 255, 255, .18); --edge: #8d95b3; --graph-bg: rgba(0, 0, 0, .18); --graph-export-bg: #12141c; }
.graph-wrap { overflow: auto; border-radius: 18px; background: var(--graph-bg); border: 1px solid var(--hairline); padding: var(--s2); outline: none; -webkit-overflow-scrolling: touch; }
.graph { display: block; margin: 0 auto; max-width: none; font-family: var(--font); }
.g-body { fill: var(--node-fill); stroke: var(--fam); stroke-opacity: .55; stroke-width: 1.25; transition: stroke-opacity var(--t-fast) ease, stroke-width var(--t-fast) ease; }
.g-head { fill: var(--fam); }
html[data-theme="dark"] .g-type { fill: #0b0d14; }
.g-type { fill: #fff; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.g-id { fill: var(--text); font-size: 15px; font-weight: 600; font-family: var(--font-mono); }
.g-port { fill: var(--node-fill); stroke: var(--fam); stroke-width: 1.5; }
.g-portn { fill: var(--text-2); font-size: 10px; font-weight: 600; }
.g-step { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.g-stepn { fill: var(--text); font-size: 11px; font-weight: 700; text-anchor: middle; }
.g-node { cursor: pointer; transition: opacity var(--t-med) ease; }
.g-node:focus { outline: none; }
.g-node:focus-visible .g-body { stroke: var(--focus); stroke-opacity: 1; stroke-width: 3; }
@media (hover: hover) { .g-node:hover .g-body { stroke-opacity: 1; stroke-width: 2; } }
.g-edge { fill: none; stroke: var(--edge); stroke-width: 2; opacity: .85; transition: opacity var(--t-med) ease, stroke-width var(--t-fast) ease; }
.g-edge.is-uncertain { stroke-dasharray: 6 5; }
.g-edge.is-ref, .g-edge.is-back { stroke: var(--ref-edge); stroke-dasharray: 2 5; stroke-linecap: round; stroke-width: 2; }
.g-arrow { fill: var(--edge); }
.g-arrow-ref { fill: var(--ref-edge); }
.graph.has-focus .g-node:not(.is-active) { opacity: .35; }
.graph.has-focus .g-edge:not(.is-active) { opacity: .2; }
.g-node.is-active .g-body { stroke-opacity: 1; stroke-width: 2.5; }
.g-edge.is-active { stroke: var(--accent); stroke-width: 2.5; opacity: 1; }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--fam); }
.legend__line { width: 22px; border-top: 2px dashed var(--edge); }
.legend__line--wire { border-top-style: solid; }
.legend__line--ref { border-top: 2px dotted var(--ref-edge); }
.tutorials { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* шаги */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.step { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: 18px; background: var(--glass-fill-inset); border: 1px solid var(--hairline); transition: border-color var(--t-med) ease, background-color var(--t-med) ease, box-shadow var(--t-med) ease; scroll-margin: 90px; }
.step.is-linked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step.is-done .step__title, .step.is-done .step__details { opacity: .6; }
.step.is-done .step__n { background: var(--ok); color: #fff; }
.step__head { display: flex; align-items: center; gap: var(--s3); }
.step__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--text); font-weight: 700; font-size: var(--fs-sm); transition: background-color var(--t-med) ease; }
.step__title { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 6px 0; font-weight: 600; font-size: var(--fs-md); color: var(--text); border-radius: 8px; }
@media (hover: hover) { .step__title:hover { color: var(--accent); } }
.step__details { color: var(--text); padding-left: 42px; }
.step__nodes { display: grid; gap: var(--s2); padding-left: 42px; }
@media (max-width: 520px) { .step__details, .step__nodes { padding-left: 0; } }

.node-block { display: grid; gap: 6px; }
.node-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--glass-fill-inset); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); max-width: 100%; }
.node-chip__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--fam); flex: none; }
.node-chip__type { font-family: var(--font); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .node-chip:hover { border-color: var(--fam); } }
.params { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 4px var(--s3); margin: 0; font-size: var(--fs-sm); }
.params dt { color: var(--text-2); }
.params dd { margin: 0; overflow-wrap: anywhere; }

/* iOS-переключатель */
.switch-wrap { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: var(--r-pill); background: var(--hairline); cursor: pointer; transition: background-color var(--t-med) ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.05); transition: transform var(--t-spring) var(--spring); }
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(20px); }
.switch:active::after { width: 31px; }
.switch:checked:active::after { transform: translateX(16px); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-theme="dark"] .switch:not(:checked) { background: rgba(255,255,255,.18); }
@media (forced-colors: active) { .switch { border: 1px solid CanvasText; } }

/* чат */
.chat__log { display: grid; gap: var(--s3); }
.chat__log:empty { display: none; }
.msg { max-width: 92%; padding: var(--s3) var(--s4); border-radius: 20px; overflow-wrap: anywhere; }
.msg--user { justify-self: end; background: var(--accent-fill); color: var(--on-accent); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg--model { justify-self: start; background: var(--glass-fill-inset); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.chat__form { display: flex; gap: var(--s2); align-items: flex-end; }
.chat__input { flex: 1; min-height: 52px; }
@media (max-width: 520px) { .chat__form { flex-direction: column; align-items: stretch; } }

/* история */
.history__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: 22px; }
.spacer { flex: 1; }
.history__list { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .history__list { grid-template-columns: 1fr 1fr; } }
.history__empty { justify-items: center; text-align: center; color: var(--text-2); padding: var(--s7) var(--s4); }
.hcard { padding: 0; overflow: hidden; gap: 0; }
.hcard__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 96px; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.hcard__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.hcard__body { display: grid; gap: var(--s2); padding: var(--s4); }
.hcard__title { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard__meta { font-size: var(--fs-xs); color: var(--text-2); }
.hcard__summary { font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }