/*
  bundle-notes.css — Notes tab (BundleNotesPanel, .bn-*) and the "open
  known issues" banner on the bundle header. Reuses .br-* form fields,
  .bfv-md markdown and .bd-btn buttons.
*/
.bn-new { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bn-hint { font-size: .8rem; color: var(--subtle-text-color); }
.bn-blocked {
    display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
    padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border-color);
    background: var(--light-bg-color); color: var(--subtle-text-color); font-size: .84rem;
}
.bn-form {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;
    padding: 16px; border-radius: 14px; border: 1px solid rgba(13, 110, 253, .25); background: rgba(13, 110, 253, .04);
}
.bn-select {
    padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border-color);
    background: var(--card-bg-color); color: var(--text-color); font-size: .88rem;
}
.bn-list { display: flex; flex-direction: column; gap: 10px; }
.bn-note {
    border-radius: 14px; border: 1px solid var(--border-color); background: var(--card-bg-color);
    border-left: 4px solid var(--bn-c); --bn-c: #0d6efd;
}
.bn-note--warning  { --bn-c: #d4a700; }
.bn-note--critical { --bn-c: #dc3545; }
.bn-note--info     { --bn-c: #0d6efd; }
.bn-note--resolved { opacity: .72; border-left-color: #198754; }
.bn-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 4px; }
.bn-sev-icon { color: var(--bn-c); font-size: 1.05rem; margin-top: 3px; }
.bn-note--resolved .bn-sev-icon { color: #198754; }
.bn-head-main { flex: 1; min-width: 0; }
.bn-title { font-weight: 700; color: var(--text-color); }
.bn-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .74rem; color: var(--subtle-text-color); margin-top: 2px; }
.bn-sev { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bn-c); }
.bn-resolved { color: #198754; font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.bn-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bn-armed { background: #dc3545 !important; color: #fff !important; border-color: #dc3545 !important; }
.bn-body { padding: 2px 14px 14px 44px; font-size: .9rem; }
.bn-body > :last-child { margin-bottom: 0; }

/* header banner: open warning / critical notes */
.bn-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 1rem; padding: 10px 14px; border-radius: 12px;
    border: 1px solid rgba(212, 167, 0, .45); background: rgba(255, 193, 7, .09);
    font-size: .85rem; color: var(--text-color); cursor: pointer;
}
.bn-banner--critical { border-color: rgba(220, 53, 69, .45); background: rgba(220, 53, 69, .07); }
.bn-banner > i { color: #d4a700; font-size: 1rem; }
.bn-banner--critical > i { color: #dc3545; }
.bn-banner:hover { filter: brightness(.98); }
@media (max-width: 640px) { .bn-body { padding-left: 14px; } }

/* ── Composer: Write / Preview + @ / # pickers ── */
.bn-composer { border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg-color); overflow: visible; }
.bn-composer-tabs { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border-color); background: var(--light-bg-color); border-radius: 12px 12px 0 0; }
.bn-composer-tabs button {
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
    padding: 5px 12px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--subtle-text-color);
}
.bn-composer-tabs button.active { background: var(--card-bg-color); color: #0d6efd; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.bn-composer-body { position: relative; }
.bn-textarea {
    display: block; width: 100%; min-height: 160px; resize: vertical;
    border: 0; outline: none; padding: 12px 14px; background: transparent; color: var(--text-color);
    font-size: .88rem; line-height: 1.55; border-radius: 0 0 12px 12px;
}
.bn-preview { padding: 12px 14px; min-height: 160px; }
.bn-picker {
    position: absolute; left: 12px; right: 12px; top: 100%; z-index: 30; margin: 4px 0 0; padding: 4px;
    list-style: none; max-height: 260px; overflow-y: auto;
    background: var(--card-bg-color); border: 1px solid rgba(13, 110, 253, .3); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.bn-picker-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
    font-size: .82rem; color: var(--text-color); min-width: 0;
}
.bn-picker-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-picker-item small { color: var(--subtle-text-color); font-family: 'JetBrains Mono', 'Fira Code', monospace; flex-shrink: 0; }
.bn-picker-item i { color: #0d6efd; width: 14px; text-align: center; }
.bn-picker-item.active, .bn-picker-item:hover { background: rgba(13, 110, 253, .08); }
.bn-picker-empty { padding: 6px 10px; font-size: .8rem; color: var(--subtle-text-color); }

/* ── Chips in rendered notes ── */
.bn-mention, .bn-ref {
    display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; margin: 0 1px;
    border-radius: 999px; font-size: .84em; font-weight: 600; cursor: pointer; vertical-align: baseline;
    line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.bn-mention { color: #6f42c1; background: rgba(111, 66, 193, .1); border: 1px solid rgba(111, 66, 193, .25); }
.bn-ref { color: #0d6efd; background: rgba(13, 110, 253, .08); border: 1px solid rgba(13, 110, 253, .25); }
.bn-ref--file { color: #0f9488; background: rgba(20, 184, 166, .1); border-color: rgba(20, 184, 166, .3); }
.bn-ref i { font-size: .8em; }
.bn-mention:hover, .bn-ref:hover { filter: brightness(.95); text-decoration: underline; }

/* ── Note tags (curated taxonomies) ── */
.bn-tags-field {
    position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg-color);
}
.bn-tag-input { flex: 1; min-width: 160px; border: 0; outline: none; background: transparent; color: var(--text-color); font-size: .85rem; padding: 3px 4px; }
.bn-tag-picker { left: 0; right: 0; }
.bn-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #b02a37; background: rgba(220, 53, 69, .08); border: 1px solid rgba(220, 53, 69, .25);
}
.bn-tag button { border: 0; background: none; padding: 0; color: inherit; opacity: .7; font-size: .7rem; }
.bn-tag button:hover { opacity: 1; }
.bn-tag--view { cursor: pointer; }
.bn-tag--view.active { background: rgba(220, 53, 69, .18); }
.bn-quick-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bn-quick-tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px;
    border: 1px dashed rgba(220, 53, 69, .35); background: transparent; color: var(--subtle-text-color);
    font-size: .72rem; font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.bn-quick-tag.active { border-style: solid; color: #b02a37; background: rgba(220, 53, 69, .1); }
.bn-note-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 0 44px; }
@media (max-width: 640px) { .bn-note-tags { padding-left: 14px; } }

/* search + status filter */
.bn-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bn-toolbar .bfp-search { flex: 1; min-width: 220px; }