/* bb-doc-center.css — the Document Center (agent dashboard + admin), drawn by
   bb-doc-center.js. Light, quiet surfaces in the portal's ink + blue palette
   (elr-theme.css): sections are white cards, each document is a tile with a
   colored file-type badge, a clean title and icon actions. */

.dc { display: grid; gap: 14px; padding: 16px; }

/* ── Section ─────────────────────────────────────────────────────────────── */
.dc-sec {
  background: #ffffff;
  border: 1px solid rgba(12, 18, 28, 0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* An open ⋯ menu sits above the tiles and sections below it. */
.dc-sec:has(.dc-more[open]) { position: relative; z-index: 5; }
.dc-doc:has(.dc-more[open]) { z-index: 10; }
.dc-sec:hover { border-color: rgba(29, 78, 216, 0.22); }
.dc-sec[open] { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.09); }
.dc-sec-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; list-style: none; user-select: none;
}
.dc-sec-head::-webkit-details-marker { display: none; }
.dc-sec-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; color: #ffffff;
  background: linear-gradient(135deg, #050505 0%, #26272b 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
.dc-sec-icon svg { width: 20px; height: 20px; }
.dc-sec-title { font-size: 16px; font-weight: 700; color: #0a0d12; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sec-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.dc-sec-titles { min-width: 0; flex: 1; }
.dc-chip {
  flex: none; font-size: 12px; font-weight: 600; color: #1e3a8a;
  background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 4px 10px;
}
.dc-chev { flex: none; width: 18px; height: 18px; color: #94a3b8; transition: transform 0.2s ease; }
.dc-sec[open] > .dc-sec-head .dc-chev { transform: rotate(90deg); color: #1d4ed8; }
.dc-sec-body { padding: 14px 16px 16px; border-top: 1px solid rgba(12, 18, 28, 0.06); display: grid; gap: 10px; }

/* ── Sub-section ─────────────────────────────────────────────────────────────
   Each folder is its own panel; every other one is tinted so folders don't run
   together, and the folder name carries a blue accent. */
.dc-sub { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid #edf1f6; background: #ffffff; }
.dc-sub:nth-child(odd) { background: #f3f6fb; border-color: #e3e9f3; }
.dc-sub:nth-child(odd) .dc-doc { background: #ffffff; }
.dc-sub:nth-child(odd) .dc-sub-empty { background: #ffffff; }
.dc-sub-head { display: flex; align-items: center; gap: 10px; }
.dc-sub-title { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1e3a8a; display: inline-flex; align-items: center; gap: 8px; }
.dc-sub-title::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6, #1e3a8a); }
.dc-sub-count { font-size: 11px; font-weight: 700; color: #1e3a8a; background: #e0e7ff; border-radius: 999px; padding: 2px 8px; }
.dc-sub-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(12, 18, 28, 0.10), rgba(12, 18, 28, 0)); }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; }

/* ── Document tile ───────────────────────────────────────────────────────── */
.dc-doc {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 12px 12px 14px; border-radius: 14px;
  background: #f8fafc; border: 1px solid #e5e9f0;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dc-doc:hover { background: #ffffff; border-color: #c7d2fe; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.dc-type {
  flex: none; width: 42px; height: 48px; border-radius: 10px;
  display: grid; place-items: center; color: #ffffff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: #64748b; box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}
.dc-type-pdf { background: linear-gradient(160deg, #f87171, #dc2626); }
.dc-type-doc { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.dc-type-xls { background: linear-gradient(160deg, #4ade80, #15803d); }
.dc-type-ppt { background: linear-gradient(160deg, #fb923c, #c2410c); }
.dc-type-img { background: linear-gradient(160deg, #a78bfa, #6d28d9); }
.dc-type-vid { background: linear-gradient(160deg, #f472b6, #be185d); }
.dc-type-zip { background: linear-gradient(160deg, #94a3b8, #334155); }
.dc-type-link { background: linear-gradient(160deg, #22d3ee, #0e7490); }
.dc-doc-body { min-width: 0; flex: 1; }
.dc-doc-title {
  font-size: 14px; font-weight: 600; color: #0a0d12; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
}
.dc-doc-meta { font-size: 12px; color: #64748b; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-doc-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.dc-icon {
  width: 34px; height: 34px; border-radius: 10px; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  color: #334155; background: transparent; transition: background 0.15s ease, color 0.15s ease;
}
.dc-icon:hover, .dc-icon:focus-visible { background: #eef2ff; color: #1d4ed8; outline: none; }
.dc-icon svg { width: 18px; height: 18px; }

/* Admin "more" menu */
.dc-more { position: relative; }
.dc-more > summary { list-style: none; }
.dc-more > summary::-webkit-details-marker { display: none; }
.dc-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px;
  background: #ffffff; border: 1px solid rgba(12, 18, 28, 0.10); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}
.dc-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: none; border-radius: 8px; padding: 9px 10px;
  font-size: 13px; font-weight: 500; color: #0a0d12; cursor: pointer;
}
.dc-menu button:hover { background: #f1f5f9; }
.dc-menu button.dc-danger { color: #dc2626; }
.dc-menu button.dc-danger:hover { background: #fef2f2; }
.dc-menu button.dc-accent { color: #1d4ed8; }

/* Buttons in a section head (admin) */
.dc-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 12px;
  color: #0a0d12; background: #ffffff; border: 1px solid rgba(12, 18, 28, 0.12);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dc-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dc-btn svg { width: 16px; height: 16px; }
.dc-sub-head .dc-btn { padding: 4px 8px; font-size: 12px; }

/* Admin selection (bulk Move / Archive / Delete) */
.dc-pick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; cursor: pointer; }
.dc-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #1d4ed8; }
.dc-doc.dc-selected { background: #eef2ff; border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1 inset; }
.dc-bulk {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 900; width: min(760px, calc(100vw - 32px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 16px; color: #ffffff;
  background: linear-gradient(135deg, #050505 0%, #1f2023 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.dc-bulk[hidden] { display: none; }
.dc-bulk-count { font-size: 14px; font-weight: 700; }
.dc-bulk select { flex: 1; min-width: 180px; max-width: 100%; padding: 8px 10px; border-radius: 10px; border: 0; font-size: 13px; color: #0a0d12; background: #ffffff; }
.dc-bulk button { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.10); color: #ffffff; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-bulk button:hover { background: rgba(255, 255, 255, 0.22); }
.dc-bulk button:disabled { opacity: 0.5; cursor: default; }
.dc-bulk button.dc-bulk-danger { background: #dc2626; border-color: #dc2626; }
.dc-bulk button.dc-bulk-danger:hover { background: #b91c1c; }

.dc-sub-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 18px 14px; border-radius: 14px; border: 1.5px dashed #cbd5e1; background: #f8fafc;
  color: #64748b; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dc-sub-empty:hover { border-color: #1d4ed8; color: #1d4ed8; background: #eef2ff; }
.dc-sub-empty svg { width: 16px; height: 16px; }
.dc-empty { padding: 40px 16px; text-align: center; color: #64748b; font-size: 14px; }

/* ── Resource Library (bbDocCenter.mount) ────────────────────────────────── */
.dcl { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 20px; padding: 16px; align-items: start; }
.dcl-side {
  position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto;
  background: #ffffff; border: 1px solid #e6eaf0; border-radius: 18px; padding: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05);
}
.dcl-side-h { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin: 14px 10px 6px; }
.dcl-it {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 0; background: none; border-radius: 10px; padding: 8px 10px; margin: 1px 0;
  font-weight: 500; font-size: 13.5px; line-height: 1.3; font-family: inherit; color: #334155;
  transition: background 0.12s ease, color 0.12s ease;
}
.dcl-it:hover { background: #f1f5f9; color: #0a0d12; }
.dcl-it b { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.dcl-it-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcl-it.on { background: #0f172a; color: #ffffff; }
.dcl-it.on b { color: #93c5fd; }
.dcl-it-top { font-weight: 600; }
.dcl-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.dcl-subs { margin: 2px 0 6px; }
.dcl-it-sub { padding-left: 28px; font-size: 13px; color: #64748b; }
.dcl-it-sub.on { background: #eef2ff; color: #1d4ed8; font-weight: 700; }
.dcl-it-sub.on b { color: #6366f1; }
.dcl-it:focus-visible, .dcl-chip:focus-visible, .dcl-tog button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.dcl-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dcl-hero {
  border-radius: 20px; padding: 24px 26px; color: #ffffff;
  /* The portal's black: a deep ink with a soft light in the corner. */
  background: radial-gradient(900px 260px at 92% -40%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #050505 0%, #17181b 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.dcl-hero-top { display: flex; align-items: flex-start; gap: 16px; }
.dcl-hero-top > div:first-child { flex: 1; min-width: 0; }
.dcl-h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; }
.dcl-lead { margin: 6px 0 0; color: #b8bcc4; font-size: 14px; }
.dcl-stats { display: flex; gap: 10px; flex: none; }
.dcl-stat { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 9px 14px; min-width: 92px; }
.dcl-stat b { display: block; font-size: 20px; font-weight: 800; }
.dcl-stat span { font-size: 11.5px; color: #a3a8b1; }
.dcl-search {
  margin-top: 18px; display: flex; align-items: center; gap: 10px; max-width: 720px;
  background: #ffffff; border-radius: 14px; padding: 4px 14px; color: #64748b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.dcl-search svg { width: 18px; height: 18px; flex: none; }
.dcl-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0;
  font-weight: 500; font-size: 15px; font-family: inherit; color: #0a0d12;
}
.dcl-search input::placeholder { color: #94a3b8; }
.dcl-search kbd { flex: none; font-weight: 600; font-size: 11px; font-family: inherit; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 7px; color: #94a3b8; }
.dcl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dcl-chip {
  cursor: pointer; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 12.5px; font-family: inherit;
  color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.12s ease;
}
.dcl-chip span { opacity: 0.65; font-weight: 500; margin-left: 2px; }
.dcl-chip:hover { background: rgba(255, 255, 255, 0.22); }
.dcl-chip.on { background: #ffffff; color: #0b1220; border-color: #ffffff; }

.dcl-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.dcl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dcl-crumb { font-size: 13.5px; color: #64748b; margin-right: auto; min-width: 0; }
.dcl-crumb b { color: #0a0d12; }
.dcl-crumb-a { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: #1d4ed8; font-weight: 600; }
.dcl-crumb-a:hover { text-decoration: underline; }
.dcl-n { color: #94a3b8; }
.dcl-tog { display: flex; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 3px; }
.dcl-tog button { border: 0; background: none; cursor: pointer; padding: 5px 10px; border-radius: 7px; font-weight: 600; font-size: 12px; font-family: inherit; color: #64748b; }
.dcl-tog button.on { background: #0f172a; color: #ffffff; }
.dcl-sort { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 10px; font-weight: 600; font-size: 12.5px; font-family: inherit; color: #334155; cursor: pointer; }
.dcl-groups { display: grid; gap: 10px; }
.dcl-none { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 48px 16px; background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; font-size: 14px; }
.dcl-none b { color: #0a0d12; font-size: 15px; }

/* List view */
.dcl-listwrap { padding: 0; overflow: hidden; background: #ffffff !important; }
.dcl-table { width: 100%; border-collapse: collapse; }
.dcl-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; padding: 11px 14px; background: #fafbfd; border-bottom: 1px solid #eef1f5; }
.dcl-table td { padding: 10px 14px; border-bottom: 1px solid #f1f4f8; font-size: 13.5px; color: #475569; vertical-align: middle; }
.dcl-table tr:last-child td { border-bottom: 0; }
.dcl-table tr.dc-row:hover td { background: #f8fafc; }
.dcl-table tr.dc-selected td { background: #eef2ff; }
.dcl-table tr.dc-row:has(.dc-more[open]) { position: relative; z-index: 10; }
.dcl-c-pick { width: 44px; }
.dcl-c-date { white-space: nowrap; width: 120px; }
.dcl-c-act { width: 1%; white-space: nowrap; }
.dcl-c-act .dc-doc-actions { justify-content: flex-end; }
.dcl-nm { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dcl-ic { width: 34px; height: 40px; border-radius: 8px; font-size: 9px; }
.dcl-nm-t { min-width: 0; display: grid; }
.dcl-nm-t b { color: #0a0d12; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcl-nm-t > span { font-size: 12px; color: #64748b; }
.dcl-m-folder { display: none; }
.dcl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Clickable tiles and rows open the preview */
.dcl [data-dc-open] { cursor: pointer; }
.dcl .dc-doc:focus-visible, .dcl tr.dc-row:focus-visible td, .dcl-pcard:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.dc-pinmark { color: #f59e0b; font-size: 0.95em; }

/* Pinned by your broker */
.dcl-pins { display: grid; gap: 12px; }
.dcl-pins-h { display: flex; align-items: center; gap: 10px; }
.dcl-pins-h h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0a0d12; letter-spacing: -0.01em; margin-right: auto; }
.dcl-pins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.dcl-pcard {
  display: grid; text-align: left; padding: 0; overflow: hidden; cursor: pointer; font-family: inherit;
  background: #ffffff; border: 1px solid #e6eaf0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dcl-pcard:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); }
.dcl-pcard-b { display: grid; gap: 2px; padding: 11px 13px 13px; min-width: 0; }
.dcl-pcard-b b { font-size: 13.5px; color: #0a0d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcl-pcard-b span { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcl-thumb { position: relative; height: 120px; display: grid; place-items: center; background: linear-gradient(160deg, #eef2f7, #e2e8f0); }
.dcl-th-pdf { background: linear-gradient(160deg, #fef2f2, #fee2e2); }
.dcl-th-doc { background: linear-gradient(160deg, #eff6ff, #dbeafe); }
.dcl-th-xls { background: linear-gradient(160deg, #f0fdf4, #dcfce7); }
.dcl-th-ppt { background: linear-gradient(160deg, #fff7ed, #ffedd5); }
.dcl-th-img { background: linear-gradient(160deg, #f5f3ff, #ede9fe); }
.dcl-th-vid { background: linear-gradient(160deg, #fdf2f8, #fce7f3); }
.dcl-th-link { background: linear-gradient(160deg, #ecfeff, #cffafe); }
.dcl-th-badge { position: absolute; left: 10px; top: 10px; width: auto; height: auto; padding: 3px 7px; border-radius: 6px; font-size: 9.5px; }
.dcl-th-pin { position: absolute; right: 10px; top: 7px; color: #f59e0b; font-size: 16px; }
.dcl-th-page { width: 78px; height: 98px; background: #ffffff; border-radius: 5px; padding: 9px 8px; display: grid; gap: 5px; align-content: start; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14); }
.dcl-th-page i { display: block; height: 4px; border-radius: 2px; background: #e2e8f0; }
.dcl-th-page .dcl-th-h { height: 10px; background: #1e3a8a; width: 80%; }
.dcl-th-pdf .dcl-th-h { background: #dc2626; } .dcl-th-doc .dcl-th-h { background: #2563eb; } .dcl-th-xls .dcl-th-h { background: #16a34a; }
.dcl-th-ppt .dcl-th-h { background: #ea580c; } .dcl-th-img .dcl-th-h { background: #7c3aed; } .dcl-th-vid .dcl-th-h { background: #db2777; }
.dcl-th-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* Preview panel */
.dcl-pv-scrim { position: fixed; inset: 0; z-index: 399; background: rgba(15, 23, 42, 0.18); animation: dcl-fade 0.15s ease; }
.dcl-pv {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 400; box-sizing: border-box; width: min(440px, 100vw); overflow-y: auto; outline: 0;
  background: #ffffff; border-left: 1px solid #e6eaf0; box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px; align-content: start;
  animation: dcl-in 0.2s ease; color: #0a0d12;
}
@keyframes dcl-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dcl-fade { from { opacity: 0; } to { opacity: 1; } }
.dcl-pv-top { display: flex; align-items: center; gap: 10px; }
.dcl-pv-badge { width: 34px; height: 40px; border-radius: 8px; font-size: 9px; }
.dcl-pv-kind { font-size: 12.5px; font-weight: 600; color: #64748b; margin-right: auto; }
.dcl-pv-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e2e8f0; background: #ffffff; cursor: pointer; font-size: 22px; line-height: 1; color: #334155; }
.dcl-pv-x:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dcl-pv-media { height: 380px; border-radius: 14px; overflow: hidden; background: #eef2f7; display: grid; place-items: center; }
.dcl-pv-pdf { width: 100%; height: 100%; border: 0; background: #ffffff; }
.dcl-pv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dcl-pv-vid { width: 100%; max-height: 100%; background: #000; }
.dcl-pv-wait { color: #94a3b8; font-size: 13px; }
.dcl-pv-still { display: grid; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.dcl-pv-still .dc-type { width: 64px; height: 76px; border-radius: 14px; font-size: 14px; }
.dcl-pv-still p { margin: 0; color: #475569; font-size: 13.5px; line-height: 1.45; max-width: 280px; }
.dcl-pv-title { margin: 4px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.dcl-pv-path { justify-self: start; font-size: 13px; text-align: left; }
.dcl-pv-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dcl-pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 11px; cursor: pointer;
  border: 1px solid #e2e8f0; background: #ffffff; color: #0a0d12; text-decoration: none; font-weight: 700; font-size: 13px; font-family: inherit;
}
.dcl-pv-btn svg { width: 16px; height: 16px; flex: none; }
.dcl-pv-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
.dcl-pv-primary { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
.dcl-pv-primary:hover { background: #1e40af; color: #ffffff; }
.dcl-pv-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: #334155; background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
.dcl-pv-kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 10px; margin: 0; font-size: 13px; }
.dcl-pv-kv dt { color: #94a3b8; }
.dcl-pv-kv dd { margin: 0; font-weight: 600; color: #0a0d12; min-width: 0; overflow-wrap: anywhere; }
.dcl-pv-fn { font-weight: 500 !important; color: #64748b !important; font-size: 12px; }
.dcl-pv-admin { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.dcl-pv-admin .dc-btn.dcl-danger { color: #dc2626; }
.dcl-pv-admin .dc-btn.dcl-danger:hover { border-color: #dc2626; }
@media (max-width: 520px) {
  .dcl-pv { width: 100vw; border-left: 0; padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
  .dcl-pv-media { height: 300px; }
  .dcl-pv-btns { grid-template-columns: 1fr 1fr; }
  .dcl-pv-btns .dcl-pv-primary { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .dcl-pv, .dcl-pv-scrim { animation: none; } .dcl-pcard:hover { transform: none; } }

/* Stage 3: real thumbnails, AI, usage */
.dcl-thumb { overflow: hidden; }
.dcl-th-real { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 82%; height: calc(100% - 12px); object-fit: cover; object-position: top center; border-radius: 6px 6px 0 0; background: #ffffff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); opacity: 0; transition: opacity 0.25s ease; }
.dcl-th-real.on { opacity: 1; }
.dcl-thumb:has(.dcl-th-real.on) .dcl-th-page { visibility: hidden; }
.dcl-th-badge, .dcl-th-pin { z-index: 1; }
.dcl-pcard-sum { color: #475569 !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; margin-top: 2px; }
.dcl-cardgroup .dcl-pins-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.dcl-cardgroup:nth-child(odd) .dcl-pcard { background: #ffffff; }
.dcl-tag { display: inline-block; vertical-align: 1px; margin-left: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #1d4ed8; }
.dcl-tag-new { background: #ecfdf5; color: #047857; }

.dcl-ask { flex: none; border: 0; cursor: pointer; border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 12.5px; font-family: inherit; color: #ffffff; background: #0a0a0a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.dcl-ask:hover { background: #262626; }
.dcl-hint { margin: 10px 0 0; font-size: 12px; color: #9ca3af; }
.dcl-ai { border-radius: 18px; padding: 16px 18px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; display: grid; gap: 10px; }
.dcl-ai-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dcl-ai-h b { color: #4338ca; font-size: 13.5px; flex: none; }
.dcl-ai-q { color: #64748b; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.dcl-ai-x { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid #c7d2fe; background: #ffffff; cursor: pointer; font-size: 18px; line-height: 1; color: #4338ca; }
.dcl-ai-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #0f172a; }
.dcl-ai-err { margin: 0; color: #b91c1c; font-size: 13.5px; }
.dcl-ai-wait { margin: 0; color: #4338ca; font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.dcl-ai-dots { display: inline-flex; gap: 4px; }
.dcl-ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: #6366f1; animation: dcl-bounce 1s infinite ease-in-out; }
.dcl-ai-dots i:nth-child(2) { animation-delay: 0.15s; } .dcl-ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dcl-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
.dcl-ai-fine { margin: 0; font-size: 11.5px; color: #64748b; }
.dcl-ai-docs .dcl-pcard { background: #ffffff; }

.dcl-pv-ai { border-radius: 14px; padding: 12px 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; display: grid; gap: 6px; justify-items: start; }
.dcl-pv-ai b { font-size: 12.5px; color: #4338ca; }
.dcl-pv-ai p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #1e293b; }
.dcl-pv-ai-empty p { color: #64748b; }
.dcl-pv-ai button[disabled] { opacity: 0.6; cursor: default; }
.dcl-pv-used { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #64748b; }
.dcl-pv-dots { display: inline-flex; }
.dcl-pv-dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff; margin-left: -6px; background: #cbd5e1; }
.dcl-pv-dots i:first-child { margin-left: 0; background: #94a3b8; } .dcl-pv-dots i:last-child { background: #e2e8f0; }
@media (max-width: 900px) { .dcl-ask { padding: 7px 10px; } .dcl-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .dcl-ai-dots i { animation: none; } .dcl-th-real { transition: none; } }

/* Folder tiles: a section's folders, or the library's sections. Click one to go
   in. They match the document tiles: same tile, and a blue badge the shape of a
   file-type badge, inside a "Folders" panel like the documents' panel. */
.dcl-folderwrap { background: #f3f6fb; border-color: #e3e9f3; }
.dcl-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.dcl-folder {
  display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 12px 12px 14px; border-radius: 14px; background: #ffffff; border: 1px solid #e5e9f0;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dcl-folder:hover { border-color: #c7d2fe; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.dcl-folder:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.dcl-folder-ic {
  flex: none; width: 42px; height: 48px; border-radius: 10px; display: grid; place-items: center; color: #ffffff;
  background: linear-gradient(160deg, #60a5fa, #1e3a8a); box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}
.dcl-folder-ic svg { width: 22px; height: 22px; }
.dcl-folder-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dcl-folder-t b { font-size: 14px; font-weight: 600; color: #0a0d12; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcl-folder-t span { font-size: 12px; color: #64748b; }
.dcl-folder .dc-chev { color: #94a3b8; }
.dcl-folder:hover .dc-chev { color: #1d4ed8; }

@media (max-width: 900px) {
  .dcl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; }
  .dcl-side { min-width: 0; position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px; border-radius: 14px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .dcl-side-h { display: none; }
  .dcl-it { width: auto; flex: none; white-space: nowrap; border: 1px solid #e2e8f0; border-radius: 999px; padding: 7px 12px; margin: 0; }
  .dcl-it.on { border-color: #0f172a; }
  .dcl-subs { display: contents; }
  .dcl-it-sub { padding-left: 12px; border-style: dashed; }
  .dcl-it-name { overflow: visible; }
  .dcl-hero { padding: 18px; border-radius: 16px; }
  .dcl-hero-top { flex-direction: column; gap: 12px; }
  .dcl-h1 { font-size: 21px; }
  .dcl-search kbd { display: none; }
  .dcl-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .dcl-chip { flex: none; }
  .dcl-c-folder, .dcl-c-date { display: none; }
  .dcl-m-folder { display: inline; }
  .dcl-table td, .dcl-table th { padding: 10px; }
}

@media (max-width: 720px) {
  .dc { padding: 10px; }
  .dc-sec-head { padding: 14px; gap: 10px; }
  .dc-sec-body { padding: 10px 8px 10px; }
  .dc-sub { padding: 12px 10px 12px; }
  .dc-grid { grid-template-columns: 1fr; }
  .dc-sec-head .dc-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-doc, .dc-chev, .dc-sec, .dcl-folder { transition: none; }
  .dc-doc:hover, .dcl-folder:hover { transform: none; }
}