/* css/oferta.css — Оферта: дъската на офертното досие (#424 стъпка 0.8, #431).
   Работилница (скилът ux): плътна, бърза, без декорация. Само токените от
   css/base.css — светлата и тъмната тема идват наготово. Баджовете .proc-src-*
   се преизползват от css/procedura.css; тук е само липсващият модификатор
   .proc-src-client + компонентите на дъската. */

/* Бадж за произход „вашето решение“ (§2.9) — по образеца на .proc-src-* в
   procedura.css (ред ~352): плътен малък етикет, един цвят на източник. */
.proc-src-client { background: #e0f2fe; color: #0b6aa6; }

.of-shell { max-width: 1100px; margin: 0 auto; }
.of-header { margin-bottom: 1rem; }
.of-new-link { font-size: 0.85rem; white-space: nowrap; }

/* ============ Празно състояние (0.8.6) ============ */

.of-start-card { margin-bottom: 1rem; }
.of-picked {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-alt);
    font-size: 0.9rem;
    line-height: 1.5;
}
.of-picked[hidden] { display: none; }
.of-picked .link-btn { margin-inline-start: 0.6rem; }

.of-start-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0;
}
.of-start-opt {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.of-cap-input { max-width: 180px; }
.of-start-actions { margin-top: 0.5rem; }

.of-recent-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
}
.of-recent-item:last-child { border-bottom: 0; }
.of-recent-item:hover { background: var(--surface-alt); }
.of-recent-title {
    flex: 1 1 240px;
    min-width: 0;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-recent-date { color: var(--text-muted); font-size: 0.8rem; }

/* ============ Лентата на напредъка (0.8.2) ============ */

.of-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0.5rem 0 0.75rem;
}
.of-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--surface);
    white-space: nowrap;
}
.of-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--surface-alt);
    font-size: 0.7rem;
    font-weight: 600;
}
.of-step-done { color: var(--success); border-color: var(--success-light, #dcfce7); }
.of-step-done .of-step-num { background: var(--success-light, #dcfce7); color: var(--success); }
.of-step-current {
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}
.of-step-current .of-step-num { background: var(--primary-light, #dbeafe); color: var(--primary); }
.of-step-off { opacity: 0.5; }

.of-statusline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.of-status-msg { color: var(--text-secondary); font-size: 0.88rem; }
.of-refresh { margin-inline-start: auto; }

.of-board-error {
    border: 1px solid var(--danger);
    background: var(--danger-light, #fef2f2);
    color: var(--danger);
    border-radius: var(--radius-md, 8px);
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}
.of-board-error[hidden] { display: none; }

/* Статус чипове */
.of-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-secondary);
    white-space: nowrap;
}
.of-chip-ready { background: var(--success-light, #dcfce7); color: var(--success); }
.of-chip-error, .of-chip-step-failed, .of-chip-step-blocked { background: var(--danger-light, #fef2f2); color: var(--danger); }
.of-chip-cancelled { background: var(--surface-alt); color: var(--text-muted); }
.of-chip-generating, .of-chip-verifying, .of-chip-step-running, .of-chip-step-waiting {
    background: var(--warning-light, #fef3c7); color: var(--warning);
}
.of-chip-decisions { background: var(--primary-light, #dbeafe); color: var(--primary); }
.of-chip-step-done { background: var(--success-light, #dcfce7); color: var(--success); }

/* ============ Колоните и табовете (0.8.7) ============ */

.of-tabs { display: none; gap: 0.25rem; margin-bottom: 0.75rem; }
.of-tab {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}
.of-tab[aria-selected="true"] {
    background: var(--primary-light, #dbeafe);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.of-pane { margin-bottom: 1rem; }
.of-pane h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }

/* Две колони при широк екран (≥900 px): индексът отляво, разговорът отдясно. */
@media (min-width: 900px) {
    .of-columns {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
}

/* Тесен екран: табове, една колона, разговорът на цял екран по подразбиране. */
@media (max-width: 899.98px) {
    .of-tabs { display: flex; }
    #of-board[data-tab="chat"] .of-pane-docs,
    #of-board[data-tab="chat"] .of-pane-decisions,
    #of-board[data-tab="docs"] .of-pane-chat,
    #of-board[data-tab="docs"] .of-pane-decisions,
    #of-board[data-tab="decisions"] .of-pane-docs,
    #of-board[data-tab="decisions"] .of-pane-chat { display: none; }
}

/* ============ Огледалният индекс (0.8.3) ============ */

.of-index-group { margin-bottom: 1rem; }
.of-index-list { list-style: none; margin: 0; padding: 0; }
.of-index-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.25rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.86rem;
    line-height: 1.45;
}
.of-index-row:last-child { border-bottom: 0; }
.of-index-label { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.of-index-doc { color: var(--text); }
.of-index-meta { color: var(--text-muted); font-size: 0.78rem; }
.of-index-flags { color: var(--text-muted); font-size: 0.78rem; font-style: italic; }
.of-index-error { color: var(--danger); }
.of-index-empty { color: var(--text-muted); font-size: 0.86rem; padding: 0.4rem 0.25rem; }

.of-mark { flex: 0 0 auto; }
.of-mark svg { display: inline-block; vertical-align: -0.15em; }
.of-mark-done { color: var(--success); }
.of-mark-busy { color: var(--warning); }
.of-mark-problem { color: var(--danger); }
.of-mark-none { color: var(--caption-muted, #94a3b8); }

.of-legend {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.of-badge-changed {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 4px;
    background: var(--warning-light, #fef3c7);
    color: var(--warning);
    font-size: 0.74rem;
    font-weight: 600;
}

.of-read { font-size: 0.86rem; }
.of-read > summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; }
.of-read-counts { color: var(--text-muted); font-size: 0.8rem; margin: 0.4rem 0; }
.of-read-list { list-style: none; margin: 0; padding: 0; }
.of-read-list li {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-light);
}
.of-read-list li:last-child { border-bottom: 0; }
.of-read-name { color: var(--text); overflow-wrap: anywhere; }
.of-read-meta { color: var(--text-muted); font-size: 0.78rem; }
.of-read-skipped { color: var(--text-muted); font-size: 0.8rem; margin: 0.4rem 0 0; }

/* ============ Разговорът (0.8.4) ============ */

.of-q { margin-bottom: 0.75rem; padding: 0.9rem 1rem; }
.of-q-prompt { margin: 0 0 0.5rem; font-weight: 600; line-height: 1.5; }
.of-q-suggestion { margin: 0 0 0.5rem; font-size: 0.86rem; color: var(--text-secondary); }
.of-q-ref {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}
.of-q-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.of-q-note { width: 100%; margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.of-opt-suggested { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.of-q-inline { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.of-q-input { max-width: 220px; }
.of-q-text { max-width: none; width: 100%; min-width: 240px; }
.of-q-empty { color: var(--text-secondary); }
.of-q-state { color: var(--text-muted); font-size: 0.85rem; }

.of-free { margin-top: 0.75rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.of-free-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.of-free-fail { color: var(--warning); font-size: 0.86rem; margin: 0.5rem 0 0; }
.of-free-parsed {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-alt);
    font-size: 0.9rem;
}
.of-free-parsed p { margin: 0 0 0.5rem; }

.of-history { margin-top: 0.75rem; font-size: 0.86rem; }
.of-history > summary { cursor: pointer; color: var(--text-secondary); }
.of-history-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
}
.of-history-item:last-child { border-bottom: 0; }
.of-history-q { color: var(--text-muted); }

/* ============ Решенията (0.8.5) и паметта (§2.10) ============ */

.of-dec, .of-mem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.88rem;
}
.of-dec:last-child, .of-mem:last-child { border-bottom: 0; }
.of-dec-label { flex: 0 0 170px; color: var(--text-secondary); }
.of-dec-body { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.of-dec-actions { display: inline-flex; gap: 0.6rem; }
.of-dec-input { max-width: 220px; }
.of-memory-wrap { margin-top: 1rem; }
.of-memory-wrap h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }

@media (max-width: 480px) {
    .of-dec-label { flex-basis: 100%; }
}