/* ════════════════════════════════════════════════════════════════════════════
   vault.css — Encrypted-project switcher chip + modals
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Workspace top-nav vault chip ──────────────────────────────────────────── */
#vaultBar { display: flex; align-items: center; }

.vault-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border, #e2e2e2);
  background: #fff; color: #1a1a1a;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.vault-chip:hover { border-color: #FF4800; box-shadow: 0 1px 6px rgba(255,72,0,.15); }
.vault-chip--locked { color: #8a4b00; background: #fff7ed; border-color: #fed7aa; }
.vault-chip-ico { display: inline-flex; color: #FF4800; }
.vault-chip--locked .vault-chip-ico { color: #b45309; }
.vault-chip-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-chip-caret { font-size: 10px; opacity: .6; }

/* ── Modal shell ───────────────────────────────────────────────────────────── */
.vault-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 15, 20, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: vaultFade .15s ease;
}
@keyframes vaultFade { from { opacity: 0; } to { opacity: 1; } }

.vault-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 420px;
  padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-height: 90vh; overflow-y: auto; animation: vaultPop .18s ease;
}
.vault-modal--wide { max-width: 760px; }
@keyframes vaultPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.vault-modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.vault-modal-head h2 { font-size: 19px; font-weight: 700; margin: 0; color: #16161a; }
.vault-x { border: none; background: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.vault-x:hover { color: #333; }

.vault-note { font-size: 13px; color: #555; line-height: 1.5; margin: 4px 0 16px; }
.vault-label { display: block; font-size: 12px; font-weight: 600; color: #444; margin: 12px 0 5px; text-transform: uppercase; letter-spacing: .03em; }

.vault-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid #d8d8d8; border-radius: 9px; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.vault-input:focus { outline: none; border-color: #FF4800; box-shadow: 0 0 0 3px rgba(255,72,0,.12); }
select.vault-input { margin-top: 8px; }

.vault-err { color: #c02626; font-size: 13px; margin-top: 10px; min-height: 1em; }
.vault-ok { color: #1a7f43; font-size: 13px; margin-top: 8px; line-height: 1.45; }

/* ── "How does this encryption work?" explainer ────────────────────────────── */
.vault-explain {
  margin-top: 16px; border: 1px solid #eee; border-radius: 10px;
  background: #fafafa; font-size: 12.5px; color: #555;
}
.vault-explain > summary {
  cursor: pointer; padding: 10px 13px; font-weight: 600; color: #333;
  list-style: none; display: flex; align-items: center; gap: 7px;
  border-radius: 10px;
}
.vault-explain > summary::-webkit-details-marker { display: none; }
.vault-explain > summary::before {
  content: '›'; font-size: 15px; line-height: 1; color: #FF4800;
  transition: transform .15s ease;
}
.vault-explain[open] > summary::before { transform: rotate(90deg); }
.vault-explain > summary:hover { color: #FF4800; }
.vault-explain[open] > summary { border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0; }
.vault-explain ul { margin: 0; padding: 11px 15px 13px 28px; }
.vault-explain li { margin-bottom: 8px; line-height: 1.5; }
.vault-explain li:last-child { margin-bottom: 0; }
.vault-explain strong { color: #333; }

.vault-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.vault-btn {
  padding: 9px 16px; border-radius: 9px; border: 1px solid #d8d8d8;
  background: #fff; color: #222; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.vault-btn:hover { border-color: #bbb; }
.vault-btn:disabled { opacity: .6; cursor: default; }
.vault-btn--primary { background: #FF4800; border-color: #FF4800; color: #fff; }
.vault-btn--primary:hover { background: #e63f00; border-color: #e63f00; }
.vault-btn--danger { color: #c02626; border-color: #f0c4c4; }
.vault-btn--danger:hover { background: #fdeaea; }
.vault-btn--sm { padding: 6px 11px; font-size: 12.5px; }

/* ── Members / switcher rows ───────────────────────────────────────────────── */
.vault-members { margin-top: 8px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.vault-member-row, .vault-vault-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid #f0f0f0;
}
/* Only the flat members list collapses its last divider — the switcher's vault
   rows are self-contained bordered cards and must keep all four borders. */
.vault-member-row:last-child { border-bottom: none; }
.vault-member-row--pending { background: #fafafa; opacity: .85; }
.vault-member-email, .vault-vault-name { font-size: 14px; font-weight: 600; color: #222; }
.vault-member-role { font-size: 12px; color: #888; margin-top: 2px; text-transform: capitalize; }

.vault-invite-form { margin-top: 18px; }
.vault-invite-form .vault-btn { margin-top: 10px; }

.vault-switch-body { margin-top: 6px; }
.vault-vault-row { border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; }
.vault-vault-row--active { border-color: #FF4800; background: #fff8f5; }
.vault-row-actions { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; flex-shrink: 0; }
.vault-row-actions .vault-btn { white-space: nowrap; }
.vault-active-tag { color: #FF4800; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-left: 6px; }

/* Discovery titles listed under each vault */
.vault-vault-info { min-width: 0; }
.vault-vault-discoveries { margin-top: 8px; }
.vault-disc-loading, .vault-disc-locked, .vault-disc-empty { font-size: 12px; color: #9aa0ad; font-style: italic; }
.vault-disc-label { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.vault-disc-item {
  font-size: 12.5px; color: #444; padding: 2px 0 2px 14px; position: relative;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.vault-disc-item::before { content: '•'; position: absolute; left: 2px; color: #FF4800; }
.vault-disc-more { font-size: 12px; color: #888; padding: 2px 0 0 14px; }
.vault-pending { margin-bottom: 16px; padding-bottom: 6px; border-bottom: 1px dashed #eee; }

.vault-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.vault-pill--unlocked { background: #e7f7ec; color: #1a7f43; }
.vault-pill--locked { background: #fff1e6; color: #b45309; }

@media (max-width: 640px) {
  .vault-modal { padding: 20px; border-radius: 13px; }
  .vault-vault-row { flex-direction: column; align-items: stretch; }
  .vault-row-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 10px; }
}