/* projectBible.css — Библия проекта
   Радиусы: --ui-radius 6px / --ui-radius-sm 4px / --ui-radius-xs 2px
   Цвета:   --ui-bg #232323 / --ui-bg-deep #181818 / --ui-border #3d3d3d
*/

.pb-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    animation: pbFadeIn .15s ease;
}
@keyframes pbFadeIn { from { opacity:0 } to { opacity:1 } }

.pb-modal {
    background: var(--ui-bg, #232323);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius, 6px);
    width: min(1100px, 96vw);
    height: min(800px, 93vh);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

/* ── Header ── */
.pb-modal-header {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--ui-border, #3d3d3d);
    flex-shrink: 0;
    background: var(--ui-bg-deep, #181818);
}
.pb-modal-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600;
    color: var(--ui-text, rgba(255,255,255,.85));
    white-space: nowrap; padding-bottom: 10px;
}
.pb-tabs { display: flex; gap: 1px; flex: 1; }
.pb-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: none; background: transparent;
    color: var(--ui-text-dim, rgba(255,255,255,.4));
    cursor: pointer; border-radius: var(--ui-radius, 6px) var(--ui-radius, 6px) 0 0;
    font-size: 12px; font-family: inherit; transition: .14s;
}
.pb-tab:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); }
.pb-tab.active {
    color: rgba(255,255,255,.9);
    background: var(--ui-bg, #232323);
    border-bottom: 2px solid var(--ui-border-focus, #48827e);
}
.pb-tab-count {
    font-size: 10px; background: rgba(255,255,255,.08);
    border-radius: 99px; padding: 1px 6px;
    color: rgba(255,255,255,.4);
}
.pb-tab.active .pb-tab-count { background: rgba(72,130,126,.18); color: var(--ui-border-focus, #48827e); }
.pb-close {
    background: none; border: none; color: rgba(255,255,255,.35);
    font-size: 16px; cursor: pointer; padding: 4px 6px;
    border-radius: var(--ui-radius-sm, 4px);
    transition: .14s; flex-shrink: 0; margin-bottom: 10px;
}
.pb-close:hover { color: #fff; background: rgba(255,255,255,.07); }

/* ── Body ── */
.pb-modal-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.pb-tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; height: 100%; }

/* ── Two-pane layout ── */
.pb-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 100%; overflow: hidden;
}

/* ── Sidebar ── */
.pb-sidebar {
    border-right: 1px solid var(--ui-border, #3d3d3d);
    overflow-y: auto; padding: 8px 6px;
    display: flex; flex-direction: column; gap: 1px;
    background: var(--ui-bg-deep, #181818);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.pb-sidebar-item {
    padding: 7px 8px;
    border-radius: var(--ui-radius-sm, 4px);
    cursor: pointer; transition: background .12s;
    border: 1px solid transparent;
}
.pb-sidebar-item:hover { background: var(--ui-bg-hover, #333); }
.pb-sidebar-item.active {
    background: rgba(72,130,126,.1);
    border-color: rgba(72,130,126,.25);
}
.pb-si-row { display: flex; align-items: center; gap: 8px; }
.pb-si-avatar {
    width: 28px; height: 28px; border-radius: var(--ui-radius-sm, 4px);
    background: rgba(72,130,126,.15); color: var(--ui-border-focus, #48827e);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.pb-si-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.8); }
.pb-si-meta { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 1px; }
.pb-si-arch {
    background: rgba(255,255,255,.07); border-radius: var(--ui-radius-xs, 2px);
    padding: 0 4px; font-size: 9px; color: rgba(255,255,255,.4);
}
.pb-sidebar-group-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.22); padding: 8px 8px 3px; margin-top: 4px;
}
.pb-add-btn {
    width: 100%; padding: 6px; margin-bottom: 4px;
    border: 1px dashed rgba(255,255,255,.14);
    background: transparent; color: rgba(255,255,255,.4);
    border-radius: var(--ui-radius-sm, 4px);
    cursor: pointer; font-size: 11px; font-family: inherit; transition: .14s;
}
.pb-add-btn:hover { border-color: rgba(72,130,126,.45); color: var(--ui-border-focus, #48827e); }
.pb-search {
    width: 100%; box-sizing: border-box;
    padding: 6px 8px; margin-bottom: 6px;
    background: var(--ui-bg-input, #141414);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.8); font-size: 11px; font-family: inherit; outline: none;
    transition: .14s;
}
.pb-search:focus { border-color: var(--ui-border-focus, #48827e); }

/* ── Detail pane ── */
.pb-detail {
    overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.pb-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pb-detail-title { font-size: 16px; font-weight: 600; color: #fff; }
.pb-detail-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

/* ── Badges ── */
.pb-badge {
    font-size: 10px; padding: 1px 6px; border-radius: var(--ui-radius-xs, 2px);
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.45);
    border: 1px solid var(--ui-border, #3d3d3d);
}
.pb-badge-time  { background: rgba(180,130,20,.12); color: #c8921a; border-color: rgba(180,130,20,.2); }
.pb-badge-manual { background: rgba(72,130,126,.1); color: #48827e; border-color: rgba(72,130,126,.25); }

/* ── Scene chips ── */
.pb-scene-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.pb-chip {
    font-size: 10px; padding: 2px 6px;
    border-radius: var(--ui-radius-xs, 2px);
    background: rgba(72,130,126,.07); color: rgba(72,130,126,.7);
    border: 1px solid rgba(72,130,126,.15);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.pb-chip-more { font-size: 10px; color: rgba(255,255,255,.25); padding: 2px 3px; }

/* ── Fields ── */
.pb-fields { display: flex; flex-direction: column; gap: 10px; }
.pb-fields-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pb-field-full { grid-column: 1 / -1; }
.pb-field-row { display: flex; flex-direction: column; gap: 4px; }
.pb-field-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.3);
}
.pb-input, .pb-select {
    background: var(--ui-bg-input, #141414);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.85); font-size: 12px; font-family: inherit;
    padding: 6px 8px; outline: none; transition: .14s;
    width: 100%; box-sizing: border-box;
}
.pb-input:focus, .pb-select:focus { border-color: var(--ui-border-focus, #48827e); }
.pb-textarea {
    background: var(--ui-bg-input, #141414);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.85); font-size: 12px; font-family: inherit;
    padding: 6px 8px; outline: none; transition: .14s;
    width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
    min-height: 44px; line-height: 1.5;
}
.pb-textarea:focus { border-color: var(--ui-border-focus, #48827e); }
.pb-select { appearance: none; cursor: pointer; }

/* ── Gender buttons ── */
.pb-gender-row { display: flex; gap: 4px; }
.pb-gender-btn {
    padding: 4px 12px;
    border: 1px solid var(--ui-border, #3d3d3d);
    background: var(--ui-bg-input, #141414);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.5); font-size: 12px; font-family: inherit;
    cursor: pointer; transition: .14s;
}
.pb-gender-btn:hover { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.pb-gender-btn.active { border-color: var(--ui-border-focus, #48827e); color: var(--ui-border-focus, #48827e); background: rgba(72,130,126,.1); }

/* ── Status buttons ── */
.pb-status-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.pb-status-btn {
    padding: 4px 10px;
    border: 1px solid var(--ui-border, #3d3d3d);
    background: var(--ui-bg-input, #141414);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.45); font-size: 11px; font-family: inherit; cursor: pointer; transition: .14s;
}
.pb-status-btn:hover { border-color: var(--sc); color: var(--sc); }
.pb-status-btn.active { background: color-mix(in srgb, var(--sc) 12%, transparent); border-color: var(--sc); color: var(--sc); }

/* ── Tags ── */
.pb-tags-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pb-tag {
    display: flex; align-items: center; gap: 3px;
    padding: 2px 7px 2px 8px;
    border-radius: var(--ui-radius-xs, 2px);
    background: rgba(72,130,126,.1); border: 1px solid rgba(72,130,126,.2);
    color: rgba(72,130,126,.9); font-size: 11px;
}
.pb-tag button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 10px; opacity: .6; }
.pb-tag button:hover { opacity: 1; }
.pb-tag-input {
    background: transparent; border: 1px dashed rgba(255,255,255,.18);
    border-radius: var(--ui-radius-xs, 2px);
    color: rgba(255,255,255,.5); font-size: 11px; font-family: inherit;
    padding: 2px 8px; outline: none; min-width: 70px;
}
.pb-tag-input:focus { border-color: rgba(72,130,126,.4); }

/* ── Relationships ── */
.pb-rel-section { display: flex; flex-direction: column; gap: 6px; }
.pb-rel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-rel-label { font-size: 11px; font-weight: 500; min-width: 80px; }
.pb-rel-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.pb-rel-add {
    background: none; border: 1px dashed rgba(255,255,255,.15);
    border-radius: var(--ui-radius-xs, 2px);
    padding: 2px 8px; font-size: 14px; cursor: pointer; transition: .14s;
}
.pb-rel-add:hover { border-color: currentColor; background: rgba(255,255,255,.04); }

/* ── Gallery ── */
.pb-gallery { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-gallery-img {
    width: 80px; height: 60px;
    border-radius: var(--ui-radius-sm, 4px);
    background-size: cover; background-position: center;
    border: 1px solid var(--ui-border, #3d3d3d);
    cursor: pointer; transition: .14s; position: relative; overflow: hidden;
}
.pb-gallery-img::after {
    content: '✕'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(200,80,80,.8); color: #fff; font-size: 16px;
    opacity: 0; transition: .14s;
}
.pb-gallery-img:hover::after { opacity: 1; }
.pb-gallery-add {
    width: 80px; height: 60px;
    border-radius: var(--ui-radius-sm, 4px);
    border: 1px dashed rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.25); font-size: 20px;
    cursor: pointer; transition: .14s;
}
.pb-gallery-add:hover { border-color: rgba(72,130,126,.4); color: var(--ui-border-focus, #48827e); }

/* ── Merge button ── */
.pb-merge-btn {
    padding: 6px 12px; border: 1px solid var(--ui-border, #3d3d3d);
    background: transparent; color: rgba(255,255,255,.4);
    border-radius: var(--ui-radius-sm, 4px);
    cursor: pointer; font-size: 11px; font-family: inherit;
    transition: .14s; align-self: flex-start;
}
.pb-merge-btn:hover { border-color: rgba(200,140,50,.4); color: #c8921a; }

/* ── Sort bar ── */
.pb-sort-bar {
    display: flex; gap: 4px; align-items: center; margin-bottom: 6px;
}
.pb-sort-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 8px; border: 1px solid var(--ui-border, #3d3d3d);
    background: var(--ui-bg-input, #141414);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.5); font-size: 11px; font-family: inherit;
    cursor: pointer; transition: .14s; flex: 1;
}
.pb-sort-btn:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.pb-dir-btn { flex: 0 0 auto; padding: 4px 7px; }
.pb-sort-menu {
    position: absolute; top: calc(100% + 3px); left: 0; z-index: 9999;
    background: var(--ui-bg-deep, #181818);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius, 6px);
    min-width: 140px; padding: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.pb-sort-menu-item {
    padding: 6px 10px; border-radius: var(--ui-radius-sm, 4px);
    font-size: 12px; color: rgba(255,255,255,.7);
    cursor: pointer; transition: .12s;
}
.pb-sort-menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.pb-sort-menu-item.active { color: var(--ui-border-focus, #48827e); }

/* ── Header actions group ── */
.pb-hdr-actions {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0; align-self: flex-start;
}
.pb-hdr-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
    background: transparent; border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.4); cursor: pointer; transition: .14s;
}
.pb-hdr-btn:hover { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); background: rgba(255,255,255,.05); }
.pb-hdr-btn-del:hover { border-color: rgba(220,80,80,.5); color: #e05252; background: rgba(220,80,80,.07); }

/* ── Delete confirmation popup ── */
.pb-del-popup {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
    background: var(--ui-bg-deep, #181818);
    border: 1px solid rgba(220,80,80,.35);
    border-radius: var(--ui-radius, 6px);
    width: 200px; padding: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    animation: pbFadeIn .12s ease;
}
.pb-del-popup-msg { font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 8px; line-height: 1.4; }
.pb-del-popup-msg b { color: #fff; }
.pb-del-popup-btns { display: flex; gap: 6px; }
.pb-del-confirm-yes {
    flex: 1; padding: 5px 8px;
    background: rgba(220,80,80,.15); border: 1px solid rgba(220,80,80,.4);
    border-radius: var(--ui-radius-sm, 4px);
    color: #e05252; font-size: 11px; font-family: inherit; cursor: pointer; transition: .14s;
}
.pb-del-confirm-yes:hover { background: rgba(220,80,80,.25); }
.pb-del-confirm-no {
    flex: 1; padding: 5px 8px;
    background: transparent; border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.4); font-size: 11px; font-family: inherit; cursor: pointer; transition: .14s;
}
.pb-del-confirm-no:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7); }

/* ── Merge icon button (top-right of detail header) ── */
.pb-detail-header { align-items: flex-start; }
.pb-merge-icon-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
    background: transparent; border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius-sm, 4px);
    color: rgba(255,255,255,.4); cursor: pointer; transition: .14s;
}
.pb-merge-icon-btn:hover { border-color: rgba(72,130,126,.5); color: var(--ui-border-focus, #48827e); background: rgba(72,130,126,.08); }

/* ── Merge popup ── */
.pb-merge-popup {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
    background: var(--ui-bg-deep, #181818);
    border: 1px solid var(--ui-border, #3d3d3d);
    border-radius: var(--ui-radius, 6px);
    width: 260px; padding: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    animation: pbFadeIn .12s ease;
}
.pb-merge-popup-title { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.pb-merge-popup-title b { color: #fff; }
.pb-merge-hint { font-size: 10px; color: rgba(255,255,255,.3); margin-bottom: 8px; }
.pb-merge-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pb-merge-item {
    padding: 7px 9px; border-radius: var(--ui-radius-sm, 4px);
    cursor: pointer; transition: .12s; border: 1px solid transparent;
}
.pb-merge-item:hover { background: rgba(255,255,255,.05); border-color: rgba(72,130,126,.2); }
.pb-merge-item-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); }
.pb-merge-item-meta { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 1px; }

/* ── Search with icon ── */
.pb-search-wrap {
    position: relative; margin-bottom: 6px;
}
.pb-search-icon {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.3); pointer-events: none;
}
.pb-search-icon-pad { padding-left: 28px !important; margin-bottom: 0; }
.pb-search { margin-bottom: 6px; }

/* ── Title inline edit ── */
.pb-title-edit { width: 100%; box-sizing: border-box; }

/* ── Inline add row ── */
.pb-inline-add-row {
    display: flex; gap: 4px; align-items: center; margin-bottom: 4px;
}
.pb-inline-add-input {
    flex: 1; min-width: 0;
}

/* ── Empty state ── */
.pb-empty {
    text-align: center; padding: 48px 20px;
    color: rgba(255,255,255,.25); font-size: 13px; line-height: 1.7;
}


/* ⚡ ИИ-заполнение досье библии (Денис): попап у кнопки действий карточки */
.pb-hdr-btn-ai:hover { color: var(--ui-accent, #65dcb4); }
.pb-ai-popup { min-width: 260px; }
.pb-ai-opt {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 11px; color: rgba(255,255,255,.65); margin-bottom: 4px; user-select: none;
}
.pb-ai-opt input { accent-color: var(--ui-accent, #65dcb4); width: 13px; height: 13px; margin: 0; }
.pb-ai-status { font-size: 10px; color: rgba(255,255,255,.45); min-height: 13px; margin: 4px 0 2px; }
/* ⚡ (Денис) Тот же градиент, что у кнопки «Запустить» — единый язык действий */
.pb-ai-run {
    width: 100%; padding: 9px 12px; border-radius: 8px; cursor: pointer; border: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #0a1f17; background: linear-gradient(180deg, #7ce9c4, #46c79a);
    font-size: 12px; font-weight: 800; font-family: inherit; letter-spacing: .02em;
    transition: filter .14s;
}
.pb-ai-run:hover:not(:disabled) { filter: brightness(1.07); }
.pb-ai-run:disabled { opacity: .55; cursor: default; }
.pb-ai-price { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; opacity: .75; }
.pb-ai-price-ic { font-size: 11px; }


/* ⚡ Меню на «+» галереи: загрузить с компьютера / сгенерировать (Денис) */
.pb-addmenu {
    min-width: 210px; padding: 4px; border-radius: 8px;
    background: var(--ui-bg-deep, #141418); border: 1px solid var(--ui-border, rgba(255,255,255,.1));
    box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px;
}
.pb-addmenu-item {
    text-align: left; padding: 8px 10px; border: none; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--ui-text, #e8e8ea); font-size: 12px; font-family: inherit;
}
.pb-addmenu-item:hover { background: rgba(255,255,255,.07); color: var(--ui-accent, #65dcb4); }