/* Редактор диалогов: тёмная тема, без внешних ресурсов. */

:root {
    --bg: #14161c;
    --panel: #1c1f27;
    --panel2: #232733;
    --border: #3a3f4f;
    --text: #d6d9e0;
    --muted: #8a8fa0;
    --accent: #f0d878;
    --edge: #6a7185;
    --edge-choice: #d8b04a;
    --danger: #d88a8a;
    --ok: #8ad88f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 system-ui, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.muted { color: var(--muted); }
.spacer { flex: 1; }
.accent { border-color: var(--accent); color: var(--accent); }
.danger { border-color: var(--danger); color: var(--danger); }

button, select, input, textarea {
    background: var(--panel2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font: inherit;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
input, textarea { width: 100%; }

#topbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}
#topbar h1 { font-size: 15px; margin: 0; }

#layout {
    flex: 1;
    display: grid;
    grid-template-columns: 170px 1fr 340px;
    min-height: 0;
}

#graph-list {
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 8px;
    overflow-y: auto;
}
#graph-list button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    border: 1px solid transparent;
    background: none;
}
#graph-list button:hover { border-color: var(--border); }
#graph-list button.active { border-color: var(--accent); color: var(--accent); }

#canvas-wrap { position: relative; overflow: auto; min-width: 0; }
#canvas { width: 100%; height: 100%; min-height: 400px; }

/* Узел-карточка. */
.node-card rect {
    fill: var(--panel);
    stroke: var(--border);
    rx: 6;
}
.node-card.selected rect { stroke: var(--accent); stroke-width: 2; }
.node-card.ghost rect { stroke-dasharray: 4 3; stroke: var(--danger); }
.node-card text { fill: var(--text); font: 12px system-ui, sans-serif; }
.node-card .speaker { fill: var(--accent); font-weight: 600; }
.node-card .body { fill: var(--muted); }
.node-card .badge { fill: #4a5164; font: 10px monospace; }

#run-output, #problems {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: 40%;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    white-space: pre-wrap;
}
#problems .err { color: var(--danger); }
#problems .warn { color: var(--accent); }

#inspector {
    background: var(--panel);
    border-left: 1px solid var(--border);
    padding: 10px;
    overflow-y: auto;
}
#inspector .row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
#inspector label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); flex: 1; }
#inspector label.grow { flex: 2; }
#inspector details { margin-bottom: 8px; }
#inspector summary { cursor: pointer; color: var(--muted); margin-bottom: 6px; }
#inspector .buttons { justify-content: space-between; }
#inspector .buttons button { flex: 1; white-space: nowrap; }

.choice-edit {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 6px;
    background: var(--panel2);
}
.choice-edit .row { margin-bottom: 4px; }
.choice-edit button { margin-top: 4px; }

#status.ok { color: var(--ok); }
#status.err { color: var(--danger); }