/* Phase 2 AI overlay styles for editor */
/* .btn-danger/.btn-ghost/.btn-sm/.btn-xs uklonjeni odavde — kanonski u app.css
   (pb-cta-pill aliasi). Ostaju samo ai-specifične delte (npr. .editor-actions svg). */

/* === Breadcrumbs (page navigation context) === */
/* STAMP-aligned: koristi semantic tokens iz foundation/tokens.css.
   Kompaktan kicker iznad pb-page-head__title, blago elevated chip na hover. */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1;
    color: var(--c-text-secondary);
    margin: 6px 0 4px;
    flex-wrap: wrap;
    letter-spacing: .01em;
}
.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-text-secondary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.breadcrumbs a:hover {
    color: var(--c-brand);
    background: var(--p-slate-100);
    border-color: var(--c-border-hairline);
}
.breadcrumbs a svg { opacity: .75; width: 13px; height: 13px; }
.breadcrumb-sep {
    color: var(--c-text-secondary);
    opacity: .55;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.breadcrumb-current {
    color: var(--c-text-primary);
    font-weight: 600;
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 2px;
}

/* Per-block AI menu */
.block-ai-wrap { position: relative; display: inline-block; z-index: 5; }
/* Ako je AI meni otvoren, parent .block-actions (opacity:.4 dok blok nije focused) mora biti 100% */
.block:has(.block-ai-menu:not([hidden])) .block-actions { opacity: 1 !important; }
.block:has(.block-ai-menu:not([hidden])) { z-index: 50; position: relative; }
.block-btn.ai {
    background: linear-gradient(135deg, var(--c-accent-violet), var(--c-accent-indigo-strong));
    color: var(--p-white);
    border: none;
    font-weight: 600;
}
.block-btn.ai:hover { filter: brightness(1.08); }
.block-btn.ai.has-selection {
    background: linear-gradient(135deg, var(--c-accent-sky), var(--c-success));
    box-shadow: 0 0 0 2px rgba(20, 184, 166, .25);
}

/* Vidljivi marker selekcije za AI - ostaje vidljiv i kad contenteditable izgubi fokus */
mark.ai-selection-mark {
    background: linear-gradient(180deg, rgba(20,184,166,.28), rgba(14,165,233,.28));
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 rgba(14,165,233,.55);
}

.block-ai-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 300px;
    background: var(--p-white);
    border: 1px solid var(--c-text-faint);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(20, 22, 50, .22), 0 2px 6px rgba(20,22,50,.08);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: none;
    opacity: 1 !important;
}
.block-ai-menu[hidden] { display: none !important; }
.block-ai-menu button {
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--p-ink-900);
    cursor: pointer;
}
.block-ai-menu button:hover { background: var(--c-border-faint); }
.block-ai-section-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-subtle);
    padding: 6px 10px 2px;
}
.block-ai-custom {
    display: flex;
    gap: 6px;
    padding: 6px 4px 2px;
    border-top: 1px solid var(--c-accent-violet-tint-1);
    margin-top: 4px;
}
.block-ai-custom-top {
    border-top: 0;
    margin-top: 0;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--c-accent-violet-tint-1);
    margin-bottom: 4px;
    background: linear-gradient(180deg, var(--c-surface-card-tint), var(--p-white));
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.block-ai-custom-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-accent-indigo-strong);
    display: flex;
    align-items: center;
    gap: 6px;
}
.block-ai-custom-label::before {
    content: "✨";
    font-size: 12px;
}
.block-ai-custom-row {
    display: flex;
    gap: 6px;
}
.block-ai-custom-row input {
    flex: 1;
    border: 1px solid var(--c-text-faint);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
}
.block-ai-custom-row input:focus {
    outline: none;
    border-color: var(--c-accent-indigo-strong);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.block-ai-custom-row button {
    background: var(--c-accent-indigo-strong);
    color: var(--p-white);
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    min-width: 36px;
}
.block-ai-custom-row button:hover { filter: brightness(1.08); }
.block-ai-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.block-ai-examples .block-ai-example {
    background: var(--c-brand-surface) !important;
    color: var(--c-accent-indigo-strong) !important;
    border: 1px solid var(--c-accent-indigo-tint-2);
    border-radius: 999px;
    padding: 3px 8px !important;
    font-size: 11px !important;
    cursor: pointer;
    line-height: 1.4;
}
.block-ai-examples .block-ai-example:hover {
    background: var(--c-brand-100) !important;
}

/* Compliance submenu inside AI menu */
.block-ai-comply-wrap { display: flex; flex-direction: column; }
.block-ai-comply-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.block-ai-comply-toggle .chev {
    color: var(--c-text-subtle);
    font-size: 11px;
    transition: transform .15s ease;
}
.block-ai-comply-wrap.open .block-ai-comply-toggle .chev { transform: rotate(90deg); }
.block-ai-comply-list {
    margin: 2px 4px 4px;
    padding: 4px;
    background: var(--c-surface-page-soft);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
}
.block-ai-comply-list[hidden] { display: none; }
.block-ai-comply-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 4px;
}
.block-ai-comply-list .muted { padding: 6px 8px; color: var(--c-text-subtle); }

/* AI diff panel inside a block */
.block-ai-diff {
    margin-top: 10px;
    border: 1px solid var(--c-accent-indigo-tint-2);
    background: var(--c-surface-page-soft);
    border-radius: 10px;
    padding: 10px 12px;
}
.block-ai-diff-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ai-pill {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-accent-violet), var(--c-accent-indigo-strong));
    color: var(--p-white);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    letter-spacing: .2px;
}
.block-ai-diff-body {
    background: var(--p-white);
    border: 1px solid var(--c-border-subtle);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--p-ink-900);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 420px;
    overflow-y: auto;
}
.block-ai-diff-body ins {
    background: var(--c-success-soft);
    color: var(--c-success-strong);
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
}
.block-ai-diff-body del {
    background: var(--c-danger-line);
    color: var(--c-danger-deep);
    text-decoration: line-through;
    padding: 0 2px;
    border-radius: 2px;
}
.block-ai-diff-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}
.ai-loading { color: var(--c-text-secondary); font-style: italic; padding: 8px 4px; }
.ai-error { color: var(--c-danger-deep); padding: 8px 4px; }

/* Side tabs (sticky, icon + label) */
.side-tabs {
    display: flex;
    gap: 2px;
    /* Stretch flush to panel edges (panel has no top padding on findings-panel) */
    margin: 0 -14px 14px;
    padding: 14px 14px 0;
    /* Solid white so list items don't bleed through when scrolling under the sticky tabs */
    background: var(--p-white);
    border-bottom: 1px solid var(--c-border-subtle);
    position: sticky;
    top: 0;
    z-index: 6;
}
.side-tab {
    background: transparent;
    border: 0;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px 6px 0 0;
    transition: background .15s ease, color .15s ease;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}
.side-tab:hover { background: var(--c-border-faint); color: var(--p-ink-900); }
.side-tab svg { flex-shrink: 0; opacity: .75; }
.side-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-tab.active {
    color: var(--c-accent-indigo-strong);
    border-bottom-color: var(--c-accent-indigo-strong);
    background: var(--p-white);
}
.side-tab.active svg { opacity: 1; }

/* Sidebar tabovi: ikona iznad + kratak label ispod (stacked). Panel je uzak (~360px). */
.editor-side.findings-panel .side-tab {
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px 8px;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .01em;
}
.editor-side.findings-panel .side-tab svg { width: 16px; height: 16px; opacity: .85; }
.editor-side.findings-panel .side-tab.active svg { opacity: 1; }
.editor-side.findings-panel .side-tab span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Unified side panel header (used across Variables / Compliance / Chat / Validation).
   NOTE: not sticky on purpose — only the tab bar is sticky so the header scrolls
   away cleanly under the (opaque) tab row instead of bleeding through it. */
.side-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-faint);
}
.side-panel-head h3 {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--p-ink-900);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.side-panel-head p { margin: 0; line-height: 1.35; }

/* AI chat */
.ai-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 460px;
}
.ai-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-chat-empty {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: var(--c-text-secondary);
    background: linear-gradient(180deg, var(--c-surface-card-tint) 0%, var(--c-surface-page-soft) 100%);
    border: 1px dashed var(--c-border-subtle);
    border-radius: 12px;
    margin-bottom: -15px;
}
.ai-chat-empty svg { color: var(--c-accent-indigo); opacity: .65; }
.ai-chat-empty strong { color: var(--p-ink-900); font-size: 13.5px; }
.ai-chat-empty p { margin: 4px 0 0; }

/* Predloženi početni razgovori (top 3 pitanja o dokumentu) */
.ai-chat-starters {
    border: 1px solid var(--border, var(--c-border-subtle));
    background: var(--p-app-surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-chat-starters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ai-chat-starters-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-chat-starter {
    text-align: left;
    background: var(--p-white);
    border: 1px solid var(--c-text-faint);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.85rem;
    line-height: 1.3;
    cursor: pointer;
    color: var(--c-text-primary);
    transition: border-color .15s ease, background .15s ease;
}
.ai-chat-starter:hover {
    border-color: var(--c-brand);
    background: var(--c-brand-surface);
}
.ai-chat-starter:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
}
.ai-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.ai-chat-msg.user { align-items: flex-end; }
.ai-chat-msg.assistant { align-items: flex-start; }
.ai-chat-bubble {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    max-width: 95%;
    word-wrap: break-word;
}
.ai-chat-msg.user .ai-chat-bubble {
    background: var(--c-accent-indigo-strong);
    color: var(--p-white);
    border-bottom-right-radius: 4px;
}
.ai-chat-msg.assistant .ai-chat-bubble {
    background: var(--c-border-faint);
    color: var(--p-ink-900);
    border-bottom-left-radius: 4px;
}
.ai-chat-proposed {
    margin-top: 6px;
    border: 1px solid var(--c-accent-indigo-tint-2);
    background: var(--c-surface-page-soft);
    border-radius: 10px;
    padding: 8px 10px;
    width: 100%;
}
.ai-chat-proposed-head { margin-bottom: 6px; }
.ai-chat-proposed pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--p-white);
    border: 1px solid var(--c-border-subtle);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 8px 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--p-ink-900);
}
.ai-chat-proposed-actions { display: flex; gap: 8px; justify-content: flex-end; }

.ai-chat-form {
    border-top: 1px solid var(--c-border-subtle);
    padding-top: 8px;
    margin-top: 8px;
}
.ai-chat-form textarea {
    width: 100%;
    border: 1px solid var(--c-text-faint);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 50px;
    box-sizing: border-box;
}
.ai-chat-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* === Phase 3: modals (consistency, snippets, save-snippet) === */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20,22,50,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    background: var(--p-white); border-radius: 12px;
    width: 100%; max-width: 720px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 56px rgba(20,22,50,.32);
    overflow: hidden;
}
.modal-card.snippets-modal, .modal-card.consistency-modal { max-width: 860px; }
.modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--c-border-subtle);
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close {
    background: transparent; border: 0; font-size: 24px; line-height: 1;
    color: var(--c-text-secondary); cursor: pointer; padding: 0 6px;
}
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.form-label {
    display: block; margin: 10px 0 4px;
    font-size: 12px; font-weight: 600; color: var(--p-slate-500);
}
.form-input {
    width: 100%; border: 1px solid var(--c-text-faint); border-radius: 8px;
    padding: 8px 10px; font-size: 13px; font-family: inherit; box-sizing: border-box;
}
textarea.form-input { resize: vertical; }

/* Consistency results */
.consistency-summary {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    padding: 10px 12px; background: var(--c-surface-page-soft); border-radius: 8px;
    border: 1px solid var(--c-accent-indigo-tint-2);
}
.consistency-score {
    font-size: 22px; font-weight: 700; color: var(--c-accent-indigo-strong);
    min-width: 60px; text-align: center;
}
.consistency-issue {
    border-left: 4px solid var(--c-accent-indigo-tint-2); padding: 8px 12px; margin-bottom: 10px;
    background: var(--c-surface-card-tint); border-radius: 4px;
}
.consistency-issue.sev-critical { border-color: var(--c-danger); background: var(--c-danger-soft); }
.consistency-issue.sev-warning { border-color: var(--c-state-warn); background: var(--c-warn-surface); }
.consistency-issue.sev-info { border-color: var(--c-accent-indigo-strong); }
.consistency-issue h4 { margin: 0 0 4px; font-size: 13px; }
.consistency-issue p { margin: 4px 0; font-size: 13px; color: var(--p-ink-900); }
.consistency-issue .quote {
    font-style: italic; color: var(--c-text-secondary); font-size: 12px;
    border-left: 2px solid var(--c-text-faint); padding-left: 8px; margin: 6px 0;
}
.consistency-issue .suggestion {
    background: var(--c-success-soft); border-radius: 6px; padding: 6px 10px;
    font-size: 12px; color: var(--c-success-strong); margin-top: 6px;
}
.sev-pill {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 99px; text-transform: uppercase;
    letter-spacing: .3px; margin-right: 6px;
}
.sev-pill.sev-critical { background: var(--c-danger); color: var(--p-white); }
.sev-pill.sev-warning { background: var(--c-state-warn); color: var(--p-white); }
.sev-pill.sev-info { background: var(--c-accent-indigo-strong); color: var(--p-white); }

/* Snippets list */
.snippets-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.snippets-toolbar input, .snippets-toolbar select {
    border: 1px solid var(--c-text-faint); border-radius: 8px;
    padding: 6px 10px; font-size: 13px;
}
.snippets-toolbar input { flex: 1; }
.snippet-card {
    border: 1px solid var(--c-border-subtle); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px; background: var(--p-white);
}
.snippet-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.snippet-card h4 { margin: 0; font-size: 14px; }
.snippet-card .snippet-meta {
    font-size: 11px; color: var(--c-text-secondary); display: flex; gap: 8px; flex-wrap: wrap;
}
.snippet-card .snippet-preview {
    font-size: 12px; color: var(--p-slate-500);
    white-space: pre-wrap; max-height: 80px; overflow: hidden;
    border-top: 1px dashed var(--c-border-subtle); padding-top: 6px; margin-top: 6px;
}
.snippet-card .snippet-actions {
    display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px;
}
.ai-loading {
    text-align: center; padding: 24px; color: var(--c-text-secondary); font-size: 13px;
}

/* === Finalna validacija ugovora === */
.val-verdict {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
    border: 1px solid var(--c-border-subtle); background: var(--p-white);
}
.val-verdict.val-ok { background: var(--c-success-soft); border-color: var(--c-success); }
.val-verdict.val-warn { background: var(--c-warn-surface); border-color: var(--c-state-warn); }
.val-verdict.val-error { background: var(--c-danger-soft); border-color: var(--c-danger); }
.val-overall {
    font-size: 28px; font-weight: 700; line-height: 1;
    padding: 6px 10px; border-radius: 8px; background: var(--p-white);
    border: 1px solid var(--c-border-subtle); min-width: 84px; text-align: center;
}
.val-verdict-text { font-size: 14px; font-weight: 600; }

.val-section {
    border: 1px solid var(--c-border-subtle); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: var(--p-white);
}
.val-section-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.val-section-head h4 { margin: 0; font-size: 13px; flex: 1; }

.val-badge {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid transparent;
}
.val-badge.val-ok { background: var(--c-success-soft); color: var(--c-success-strong); border-color: var(--c-success); }
.val-badge.val-warn { background: var(--c-state-warn-soft); color: var(--c-warn-deep); border-color: var(--c-state-warn); }
.val-badge.val-error { background: var(--c-state-alert-soft); color: var(--c-danger-deep); border-color: var(--c-danger); }
.val-badge.val-skip { background: var(--p-app-surface-2); color: var(--c-text-muted); border-color: var(--c-text-faint); }

.val-list { list-style: none; padding: 0; margin: 6px 0 0 0; font-size: 12px; }
.val-list li { padding: 3px 0; border-bottom: 1px dashed var(--c-border-faint); }
.val-list li:last-child { border-bottom: none; }

.val-issue {
    border-left: 3px solid var(--c-text-subtle);
    padding: 6px 10px; margin: 8px 0; background: var(--c-surface-card-tint); border-radius: 6px;
}
.val-issue.sev-critical { border-left-color: var(--c-danger); }
.val-issue.sev-warning { border-left-color: var(--c-state-warn); }
.val-issue.sev-info { border-left-color: var(--c-accent-indigo-strong); }
.val-issue-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.val-issue p { margin: 4px 0; font-size: 12px; }
.val-issue .quote {
    font-style: italic; color: var(--p-slate-500); font-size: 12px;
    border-left: 2px solid var(--c-text-faint); padding-left: 8px; margin: 4px 0;
}
.val-issue .suggestion { font-size: 12px; color: var(--c-success-strong); margin-top: 4px; }
.val-summary { font-size: 12px; color: var(--p-slate-600); margin: 4px 0 8px 0; }

/* === Uskladjenost sa zakonom === */
/* .btn-sm/.btn-xs veličine = app.css (pb-cta-pill--sm alias). Ovde samo ikon-delta. */
.btn-sm svg, .btn-xs svg { flex-shrink: 0; }

.compliance-intro {
    padding: 10px 12px;
    background: var(--c-surface-page-soft);
    border: 1px solid var(--c-accent-indigo-tint-1);
    border-radius: 8px;
    color: var(--p-slate-700);
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.compliance-empty {
    padding: 22px 16px;
    background: linear-gradient(180deg, var(--c-surface-card-tint) 0%, var(--c-surface-page-soft) 100%);
    border: 1px dashed var(--c-border-subtle);
    border-radius: 12px;
    color: var(--p-slate-500);
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.compliance-empty svg { color: var(--c-accent-indigo); opacity: .65; }

/* === Law panel header === */
.law-panel-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-faint);
    margin-bottom: 6px;
}
.law-panel-title h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--p-slate-500);
}
.law-panel-title p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
.law-panel-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.law-panel-actions .btn-sm { display: inline-flex; align-items: center; gap: 5px; }
.law-panel-actions #btn-link-law { margin-left: auto; }

/* === Status chips === */
.law-status {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px;
    letter-spacing: .02em;
    line-height: 1.5;
}
.law-status-pending { background: var(--p-app-surface-3); color: var(--p-slate-500); }
.law-status-busy    { background: var(--c-brand-surface); color: var(--c-accent-indigo-strong); }
.law-status-ok      { background: var(--c-success-soft); color: var(--c-success-deep); }
.law-status-warn    { background: var(--c-state-warn-soft); color: var(--c-warn-deep); }
.law-status-err     { background: var(--c-state-alert-soft); color: var(--c-danger-deep); }
.law-status-ai      { background: var(--c-accent-violet-tint-1); color: var(--c-accent-violet-strong); }

.compliance-card {
    border: 1px solid var(--c-border-subtle);
    border-left: 3px solid var(--c-text-faint);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--p-white);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: border-color .15s ease, box-shadow .15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.compliance-card:hover { border-color: var(--c-brand-200); box-shadow: 0 4px 12px rgba(79,70,229,.08); }
.compliance-card.law-card-pending { border-left-color: var(--c-text-faint); }
.compliance-card.law-card-busy    { border-left-color: var(--c-accent-indigo); }
.compliance-card.law-card-ok      { border-left-color: var(--c-success); }
.compliance-card.law-card-warn    { border-left-color: var(--c-state-warn); }
.compliance-card.law-card-err     { border-left-color: var(--c-danger); }

/* .btn-ghost kanonski u app.css (pb-cta-pill--ghost alias) — lokalni override uklonjen. */
.compliance-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.compliance-title {
    font-size: 13.5px;
    color: var(--c-text-primary);
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
}
.compliance-title strong {
    display: block;
    word-break: break-word;
    font-size: 13.5px;
    font-weight: 600;
}
.compliance-title .law-status { align-self: flex-start; }
.compliance-title-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.compliance-unlink {
    background: transparent; border: 0; color: var(--c-text-subtle);
    font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px;
    cursor: pointer; transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.compliance-unlink:hover { color: var(--c-danger); background: var(--c-danger-soft); }

.compliance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    margin: 0;
    font-size: 11.5px;
}
.compliance-summary {
    font-size: 12.5px; color: var(--p-slate-600);
    background: var(--p-app-surface-2); border-left: 3px solid var(--c-text-faint);
    padding: 8px 10px; border-radius: 0 6px 6px 0; margin: 0;
    line-height: 1.45;
    word-break: break-word;
}
.compliance-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}
.compliance-actions .btn-primary,
.compliance-actions .btn-secondary {
    flex: 0 1 auto;
}
.compliance-findings { display: flex; flex-direction: column; gap: 8px; margin: 0; }

/* Bar sa povezanim zakonima + unified analyze dugme */
.linked-laws-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--p-app-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: 10px;
}
.linked-laws-actions { display: flex; gap: 6px; }
.linked-laws-summary {
    flex: 1 1 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.linked-laws-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.linked-laws-summary .compliance-summary {
    margin: 0;
}
.linked-laws-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.linked-law-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--p-white);
    border: 1px solid var(--c-border-subtle);
    font-size: 12px;
    color: var(--p-slate-600);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.linked-law-chip .chip-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-faint); flex: 0 0 auto;
}
.linked-law-chip.law-status-ok .chip-dot { background: var(--c-success); }
.linked-law-chip.law-status-warn .chip-dot { background: var(--c-state-warn-strong); }
.linked-law-chip.law-status-busy .chip-dot { background: var(--c-brand); }
.linked-law-chip.law-status-err .chip-dot { background: var(--c-danger); }
.linked-law-chip.law-status-pending .chip-dot { background: var(--c-text-subtle); }

/* Relevantni clanovi i problemi unutar kartice */
.law-articles, .law-issues {
    border-top: 1px solid var(--c-border-faint);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.law-articles h5.subhead,
.law-issues h5.subhead {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-secondary);
    font-weight: 600;
}
.law-article {
    background: var(--p-app-surface-2);
    border: 1px solid var(--c-border-faint);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.law-article-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.law-article-head a { font-size: 13px; color: var(--c-accent-indigo-strong); text-decoration: none; }
.law-article-head a:hover { text-decoration: underline; }
.law-article-head .ai-pill { white-space: nowrap; }
.law-article p { margin: 0; word-break: break-word; }

.law-issues .finding-card.mini {
    background: var(--c-warn-surface);
    border: 1px solid var(--c-state-warn-soft);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.law-issues .finding-card.mini h4 {
    margin: 0;
    font-size: 13px;
    color: var(--c-warn-deep);
    word-break: break-word;
}
.law-issues .finding-card.mini p { margin: 0; font-size: 12.5px; color: var(--p-slate-600); word-break: break-word; }
.law-issues .finding-card.mini .finding-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.law-issues .finding-card.mini .suggested-text {
    background: var(--p-white);
    border: 1px solid var(--c-state-warn-soft);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--c-text-primary);
}
.law-issues .finding-card.mini.is-applied {
    background: var(--c-success-soft);
    border-color: var(--c-success-line);
}
.law-issues .finding-card.mini.is-applied h4 { color: var(--c-success-deep); }

.score-pill { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--c-border-subtle); color: var(--p-slate-600); letter-spacing: .02em; }
.score-pill.ok { background: var(--c-success-soft); color: var(--c-success-deep); }
.score-pill.warn { background: var(--c-state-warn-soft); color: var(--c-warn-deep); }
.score-pill.bad { background: var(--c-state-alert-soft); color: var(--c-danger-deep); }

/* Compliance search modal — koristi standardni modal-overlay */
.compliance-search-card { width: min(620px, 92vw); }
.compliance-search-input-wrap {
    position: relative;
    display: flex; align-items: center;
}
.compliance-search-input-wrap svg {
    position: absolute; left: 12px; color: var(--c-text-subtle); pointer-events: none;
}
.compliance-search-input-wrap input {
    flex: 1;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--c-text-faint);
    border-radius: 8px;
    font-size: 14px;
    background: var(--p-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.compliance-search-input-wrap input:focus {
    outline: none;
    border-color: var(--c-accent-indigo-strong);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.compliance-search-results {
    margin-top: 8px;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--c-border-faint);
    border-radius: 8px;
    background: var(--p-white);
}
.compliance-search-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--c-border-faint);
    transition: background .12s ease;
}
.compliance-search-row:last-child { border-bottom: 0; }
.compliance-search-row:hover { background: var(--c-surface-page-soft); }
.compliance-search-row > div { flex: 1; min-width: 0; }
.compliance-search-row strong { display: block; color: var(--p-ink-900); font-size: 13.5px; line-height: 1.3; }

/* Toolbar (page-header) — equalize icons in buttons */
.editor-actions .btn-primary,
.editor-actions .btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
}
.editor-actions svg { flex-shrink: 0; }

/* Save status with icon */
.save-status { display: inline-flex !important; align-items: center; gap: 5px; }
.save-status svg { color: var(--c-success); }
.save-status.saving svg { color: var(--c-state-warn); }


/* === Variable edit modal === */
.var-edit-card { width: min(460px, 92vw); }
.var-edit-token-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--c-surface-page-soft);
    border: 1px solid var(--c-accent-indigo-tint-1);
    border-radius: 8px;
}
.var-edit-label { font-size: 12px; color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.var-edit-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 700;
    color: var(--c-accent-indigo-strong);
    background: var(--p-white);
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--c-brand-200);
}
#var-edit-input {
    font-size: 15px;
    padding: 10px 12px;
}
#var-edit-input:focus {
    outline: none;
    border-color: var(--c-accent-indigo-strong);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.var-edit-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: var(--c-text-secondary);
    line-height: 1.45;
}
/* (Duplikat .btn-ghost sa crvenim hover-om uklonjen — app.css je kanonski izvor.) */

/* === Interna konzistentnost (u tabu Provera) === */
.consistency-section {
    margin-top: 28px;
    padding: 16px 14px 14px;
    background: var(--c-surface-page-soft);
    border: 1px solid var(--c-border-subtle);
    border-radius: 10px;
}
.consistency-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.consistency-head h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
}
.consistency-head .btn-secondary {
    white-space: nowrap;
    flex-shrink: 0;
}
.consistency-empty {
    margin: 0;
    line-height: 1.5;
}
.consistency-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 8px;
}


/* =====================================================================
   Preseljeno iz legal.css: AI Loading Overlay
   ===================================================================== */
/* =====================================================================
   AI Loading Overlay
   ===================================================================== */
.ai-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    animation: aiOverlayIn .15s ease-out;
}
.ai-overlay.is-visible { display: flex; }
@keyframes aiOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ai-overlay-card {
    background: var(--p-white);
    border-radius: 16px;
    padding: 28px 32px;
    min-width: 320px;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ai-spinner {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 4px solid var(--c-border-subtle);
    border-top-color: var(--c-brand);
    /* STAMP keyframe (pb-spin-rot) — lokalni @keyframes aiSpin uklonjen (duplikat) */
    animation: pb-spin-rot .8s linear infinite;
}
.ai-overlay-title {
    font-size: 16px; font-weight: 700; color: var(--c-text-primary); margin: 0;
}
.ai-overlay-sub {
    font-size: 13px; color: var(--p-slate-500); margin: 0;
    min-height: 18px;
}
.ai-overlay-steps {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; flex-direction: column; gap: 6px;
    width: 100%;
    text-align: left;
    font-size: 12.5px; color: var(--c-text-secondary);
}
.ai-overlay-steps li {
    display: flex; align-items: center; gap: 8px;
    opacity: .55;
    transition: opacity .2s ease, color .2s ease;
}
.ai-overlay-steps li::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-text-faint); flex: 0 0 auto;
}
.ai-overlay-steps li.is-active {
    opacity: 1; color: var(--c-text-primary); font-weight: 600;
}
.ai-overlay-steps li.is-active::before {
    background: var(--c-brand);
    /* old-brand rgba(37,99,235,…) → aktuelna brend plava (#2563eb / 37,99,235) */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
    animation: aiPulse 1.2s ease-in-out infinite;
}
.ai-overlay-steps li.is-done {
    opacity: 1; color: var(--c-success-deep);
}
.ai-overlay-steps li.is-done::before {
    background: var(--c-success);
}
@keyframes aiPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

.alert{padding:.85rem 1rem;border-radius:.5rem;margin:1rem 0;border:1px solid transparent;}
.alert-error{background:var(--c-danger-soft);border-color:var(--c-danger-line);color:var(--c-danger-deep);}
.alert-error strong{display:block;margin-bottom:.25rem;}

/* =====================================================================
   AI in-progress indikatori (dx-*) - JEDAN izvor istine
   ---------------------------------------------------------------------
   Mini spinner + pulsirajuca tacka u pb-pill modifikatoru ("AI generise /
   U toku"). Klasa `dx-mini-spinner` je deo _Layout watcher ugovora
   (updateReviewRow skida je kad status predje u Completed/Failed).
   Ranije duplirano u pages/askpravna.css i pages/record-list.css.
   ===================================================================== */
.dx-mini-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: .5rem;
    vertical-align: -2px;
    border: 2px solid var(--c-accent-violet-tint-2);
    border-top-color: var(--c-accent-indigo-strong);
    border-radius: 50%;
    /* STAMP keyframe (pb-spin-rot) — lokalni @keyframes dx-spin uklonjen (duplikat) */
    animation: pb-spin-rot .9s linear infinite;
}

/* Pulse koristi STAMP @keyframes pb-pulse (lokalni dx-pulse uklonjen, vizuelno isto). */
.dx-pill-gen .pb-pill__dot,
.dx-pill-gen::before { animation: pb-pulse 1.2s ease-in-out infinite; }
.dx-pill-gen:not(:has(.pb-pill__dot))::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: .35rem;
    border-radius: 50%;
    background: currentColor;
}

/* =====================================================================
   RESPONSIVE — kanonski breakpoint-i (720 / 560) za ai.css-vlasništvo.
   Layout editora (grid/panel/toolbar) i .pb-modal__close ostaju u mobile.css;
   ovde su SAMO interne ai komponente koje mobile.css ne pokriva.
   ===================================================================== */
@media (max-width: 720px) {
    /* Div-modali (modal-overlay/modal-card) — puna širina, manje padding-a */
    .modal-overlay { padding: 12px; align-items: flex-start; }
    .modal-card,
    .modal-card.snippets-modal,
    .modal-card.consistency-modal,
    .modal-card.version-preview-card { max-width: 100%; max-height: 92vh; }
    .modal-head { padding: 12px 14px; }
    .modal-body { padding: 14px; }
    .modal-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

    /* Per-block AI meni — ne sme da curi van ekrana */
    .block-ai-menu { min-width: 0; width: min(300px, calc(100vw - 24px)); }

    /* Side tabovi: dozvoli prelom umesto stiskanja */
    .side-tabs { flex-wrap: wrap; }

    /* AI chat — manja min visina na telefonu */
    .ai-chat { min-height: 320px; }
    .ai-chat-bubble { max-width: 100%; }

    /* Toolbar-i i akcione trake — stack + touch */
    .snippets-toolbar { flex-wrap: wrap; }
    .snippets-toolbar input { flex: 1 1 100%; }
    .consistency-head { flex-direction: column; align-items: stretch; }
    .consistency-head .btn-secondary { width: 100%; justify-content: center; }
    .linked-laws-bar { flex-direction: column; align-items: stretch; }
    .linked-laws-actions { width: 100%; }
    .linked-laws-actions .pb-cta-pill,
    .linked-laws-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
    .linked-law-chip { max-width: 100%; }

    /* Validacija + konzistentnost rezultati — verdict u kolonu */
    .val-verdict { flex-direction: column; align-items: flex-start; gap: 8px; }
    .consistency-summary { flex-direction: column; align-items: flex-start; }

    /* Compliance search rezultati — niži panel na malom ekranu */
    .compliance-search-results { max-height: 40vh; }

    /* Touch target za unlink/ghost u karticama */
    .compliance-unlink { min-width: 36px; min-height: 36px; }
}

@media (max-width: 560px) {
    .modal-overlay { padding: 0; }
    .modal-card,
    .modal-card.snippets-modal,
    .modal-card.consistency-modal,
    .modal-card.version-preview-card {
        width: 100%; max-width: 100%;
        max-height: 100vh; height: 100%;
        border-radius: 0;
    }
    .modal-head h3 { font-size: 15px; }
    .compliance-actions { width: 100%; }
    .compliance-actions .btn-primary,
    .compliance-actions .btn-secondary { flex: 1 1 100%; justify-content: center; }
    .val-overall { font-size: 24px; min-width: 0; }
}