/*
 * Canonical Library presentation.
 *
 * Lifted out of public/command/index.html unchanged so that the Library can
 * be styled wherever it is mounted. Command is no longer the only host: the
 * same module now opens as a picker inside the Admin console and the Pardna
 * customer app, and a browser that arrives without its stylesheet is not the
 * same browser. Every rule below shipped as part of the approved Library.
 */

/* Canonical Library (/js/command-library.js).
   Scoped to .mg-library-host rather than to one panel id, because the
   Library now mounts in more than one place: the account panel and the
   case/service Documents modal. Any future host gets the same surface,
   including the dark adaptation below, by carrying the class. */
body.app-theme-dark #panel-documents { background: var(--cc-worksheet, #111827) !important; }
body.app-theme-dark .mg-library-host .text-gray-500 { color: #9ca3af !important; }
body.app-theme-dark .mg-library-host .text-gray-400 { color: #6b7280 !important; }
body.app-theme-dark .mg-library-host .bg-white { background: var(--cc-worksheet, #111827) !important; }
body.app-theme-dark .mg-library-host .bg-gray-50 { background: var(--cc-worksheet, #111827) !important; }
body.app-theme-dark .mg-library-host .border-gray-200 { border-color: #374151 !important; }
body.app-theme-dark .mg-library-host .border-gray-100, body.app-theme-dark .mg-library-host .divide-gray-100 > * + * { border-color: #2d2d2d !important; }
body.app-theme-dark .mg-library-host section { background: var(--cc-worksheet, #111827) !important; border-color: #374151 !important; }
body.app-theme-dark .mg-library-host summary { color: #e5e7eb !important; }
body.app-theme-dark .mg-library-host .text-mgDark { color: #e5e7eb !important; }
body.app-theme-dark .mg-library-host .text-gray-600 { color: #9ca3af !important; }
body.app-theme-dark .mg-library-host li { color: #d1d5db !important; }
body.app-theme-dark .mg-library-host .vault-rename-btn { color: #9ca3af !important; }
body.app-theme-dark .mg-library-host .vault-rename-btn:hover { background: #374151 !important; }
body.app-theme-dark .mg-library-host .hover\:bg-gray-100:hover { background: #374151 !important; }
body.app-theme-dark .mg-library-host input[type="checkbox"] { background: #374151 !important; border-color: #4b5563 !important; }
body.app-theme-dark .mg-library-host ul.vault-file-list > li.vault-file-card--customer {
  background: linear-gradient(180deg, #2a323c 0%, #232a33 100%) !important;
  border-color: #4b5563 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
}
body.app-theme-dark .mg-library-host ul.vault-file-list > li.vault-file-card--staff {
  background: linear-gradient(180deg, #2d2418 0%, #261f14 100%) !important;
  border-color: rgba(180, 83, 9, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
/* Command Library card: inline preview + single More menu.
   Action buttons keep their original classes and handlers; only their
   placement changes, so the menu restyles children structurally. */
.mg-library-host .vault-file-card { position: relative; }
/* Files render as a responsive grid by default, or as a compact list in row
   mode. auto-fill fills whatever width the Command drawer actually has
   rather than assuming a viewport size. */
.mg-library-host .vault-file-list {
  display: grid;
  /* Photos-style: three tiles per row on the phone canvas, no leftover gutter
     from a 168px min-track that only fitted two cards. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  align-items: start;
}
.mg-library-host .vault-file-list--row { grid-template-columns: 1fr; gap: 6px; }
/* First-load placeholders. They occupy the file region only — the shell
   around them is real — so the panel has its true shape before any
   response arrives instead of collapsing to a line of text. */
.mg-library-host .cmd-doc-skeleton-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.mg-library-host .cmd-doc-skeleton-line {
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef0f2 25%, #e3e6e9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: cmdDocSkeleton 1.4s ease infinite;
}
@keyframes cmdDocSkeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .mg-library-host .cmd-doc-skeleton-line { animation: none; }
}
body.app-theme-dark .mg-library-host .cmd-doc-skeleton-card { border-color: #374151; }
body.app-theme-dark .mg-library-host .cmd-doc-skeleton-line {
  background: linear-gradient(90deg, #2d2d2d 25%, #3a3a3a 37%, #2d2d2d 63%);
  background-size: 400% 100%;
}
/* Two columns leave no room for a long filename to run free. Clamp it and
   keep the full name in the title attribute. */
.mg-library-host .cmd-doc-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mg-library-host .vault-file-card--row .cmd-doc-name { -webkit-line-clamp: 1; }
/* Row mode: thumbnail left, everything else stacked tight on the right.
   Same card, same data, same actions — only the arrangement differs. */
.mg-library-host .vault-file-card--row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: start; padding: 8px; }
/* Row keeps its fixed square thumbnail; both axes are definite here, so the
   grid card's aspect-ratio does not apply. */
.mg-library-host .vault-file-card--row .cmd-doc-preview { aspect-ratio: auto; height: 56px; max-height: none; border-radius: 8px; }
.mg-library-host .vault-file-card--row .cmd-doc-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-library-host .vault-file-card--row .cmd-doc-preview-glyph { font-size: 16px; }
.mg-library-host .vault-file-card--row .cmd-doc-preview-label { display: none; }
/* One compact metadata line instead of a stack of full-width rows. */
.mg-library-host .cmd-doc-meta-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  font-size: 10px; line-height: 1.35; min-width: 0;
}
.mg-library-host .cmd-doc-meta-line > span { min-width: 0; }
.mg-library-host .cmd-doc-meta-sep { opacity: 0.45; }
/* Collapsible inspection detail. The primary status stays outside this. */
.mg-library-host .cmd-doc-inspect-details > summary {
  cursor: pointer; list-style: none; font-size: 10px; font-weight: 600;
  opacity: 0.75; padding: 2px 0; min-height: 24px; display: flex; align-items: center;
}
.mg-library-host .cmd-doc-inspect-details > summary::-webkit-details-marker { display: none; }
.mg-library-host .cmd-doc-inspect-details > summary::after { content: ' \25be'; }
.mg-library-host .cmd-doc-inspect-details[open] > summary::after { content: ' \25b4'; }
.mg-library-host .vault-file-card { min-width: 0; }
.mg-library-host .vault-file-card * { overflow-wrap: anywhere; }
/* The card opens the full preview, so it should look like it does. The
   controls inside it keep the default arrow so they still read as separate
   targets rather than part of one big button. */
.mg-library-host .cmd-doc-card-clickable { cursor: pointer; }
.mg-library-host .cmd-doc-card-clickable button,
.mg-library-host .cmd-doc-card-clickable a,
.mg-library-host .cmd-doc-card-clickable summary { cursor: pointer; }
.mg-library-host .cmd-doc-card-clickable:focus-visible {
  outline: 2px solid #16a34a; outline-offset: 2px;
}
.mg-library-host .cmd-doc-card-clickable:hover { border-color: #16a34a; }
/* The customer picker is a browse-and-choose list, so on a phone it should
   own the viewport rather than sit in a 340px window that shows five rows
   of a long account list. Header and search are fixed by the flex column;
   only the results scroll. */
.mg-acct-picker-panel { height: 92vh; max-height: 92vh; }
@supports (height: 100dvh) {
  .mg-acct-picker-panel { height: 92dvh; max-height: 92dvh; }
}
@media (min-width: 640px) {
  .mg-acct-picker-panel { height: auto; max-height: 85vh; }
}
/* One navigation rail holds three kinds of destination — system category,
   special view and custom folder. They share the tile so the rail reads as
   one place to go rather than three stacked rows, and are separated by a
   hairline group label instead of by a second control. */
.mg-library-host .cmd-doc-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9ca3af;
}
.mg-library-host .cmd-doc-nav-group::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb;
}
body.app-theme-dark .mg-library-host .cmd-doc-nav-group::after { background: #374151; }
.mg-library-host .cmd-doc-folder-rail .cmd-doc-nav-group {
  grid-column: auto;
  margin: 0 2px;
  white-space: nowrap;
}
.mg-library-host .cmd-doc-folder-rail .cmd-doc-nav-group::after { display: none; }
/* Details: the secondary metadata the broad gallery cards no longer print
   on their face. Same helpers, one disclosure deeper. */
.mg-library-host .cmd-doc-details-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mg-library-host .cmd-doc-details-panel {
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.3);
}
body.app-theme-dark .mg-library-host .cmd-doc-details-panel { background: #1e1e1e; }
.mg-library-host .cmd-doc-details-body { overflow-y: auto; padding: 12px 14px; }
.mg-library-host .cmd-doc-details-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid #f3f4f6;
}
body.app-theme-dark .mg-library-host .cmd-doc-details-row { border-color: #2d2d2d; }
.mg-library-host .cmd-doc-details-row dt { flex: 0 0 96px; color: #6b7280; }
.mg-library-host .cmd-doc-details-row dd { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* Folder section: grid is the default presentation, row is the compact
   horizontal treatment. Both render the same canonical folder state. */
.mg-library-host .cmd-doc-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}
.mg-library-host .cmd-doc-folder-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  text-align: left;
}
.mg-library-host .cmd-doc-folder-tile > span { max-width: 100%; overflow-wrap: anywhere; }
body.app-theme-dark .mg-library-host .cmd-doc-folder-tile { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.mg-library-host .cmd-doc-folder-tile.is-active { border-color: #0f7a4f; background: #0f7a4f; color: #fff; }
body.app-theme-dark .mg-library-host .cmd-doc-folder-tile.is-active { background: #0f7a4f; border-color: #0f7a4f; color: #fff; }
/* Grid cards: portrait full-bleed preview (same max length as chat images). */
.mg-library-host .vault-file-card--grid {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mg-library-host .cmd-doc-preview-stack {
  position: relative;
  width: 100%;
  min-width: 0;
}
.mg-library-host .cmd-doc-page-count {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  max-width: calc(100% - 12px);
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #f9fafb;
  background: transparent;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
body.app-theme-dark .mg-library-host .cmd-doc-page-count {
  background: transparent;
  color: #f9fafb;
}
.mg-library-host .cmd-doc-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  max-height: 280px;
  border-radius: 0;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.app-theme-dark .mg-library-host .cmd-doc-preview { background: #1b1b1b; }
.mg-library-host .cmd-doc-preview img,
.mg-library-host .cmd-doc-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Single foot strip: filename + ⋯ on one bar over the preview foot. */
.mg-library-host .cmd-doc-foot-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 55%);
  pointer-events: none;
}
.mg-library-host .cmd-doc-foot-strip > * { pointer-events: auto; }
.mg-library-host .cmd-doc-foot-strip .cmd-doc-name {
  color: #f9fafb !important;
  -webkit-line-clamp: 1;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.mg-library-host .vault-file-card--grid .cmd-doc-more-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #f9fafb !important;
  min-height: 32px;
  min-width: 32px;
  padding: 2px 4px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}
.mg-library-host .cmd-doc-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #6b7280;
  text-align: center;
  padding: 8px;
}
.mg-library-host .cmd-doc-preview-glyph { font-size: 26px; line-height: 1; }
.mg-library-host .cmd-doc-more-wrap { position: relative; flex: 0 0 auto; }
/* The only control on a card, so it stays a comfortable tap target even
   though the card around it got denser. */
.mg-library-host .cmd-doc-more-btn {
  min-height: 36px; min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Row mode keeps a readable tap target with light chrome. */
.mg-library-host .vault-file-card--row .cmd-doc-more-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  color: #4b5563;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
}
body.app-theme-dark .mg-library-host .vault-file-card--row .cmd-doc-more-btn {
  border-color: #374151;
  background: #1f2937;
  color: #e5e7eb;
}
/* Must out-specify the `display:flex` below, which is itself id-scoped and so
   beats Tailwind's plain `.hidden` utility. Without this every card's menu
   paints open on render even though the JS marks it hidden. */
.mg-library-host .cmd-doc-more-menu.hidden { display: none; }
.mg-library-host .cmd-doc-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 208px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Open menus are measured into the viewport so card overflow, the selection
   footer and the mobile nav cannot clip or cover them. */
.mg-library-host .cmd-doc-more-menu.cmd-doc-more-menu--fixed {
  position: fixed;
  z-index: 10060;
  margin: 0;
}
.mg-library-host .cmd-doc-select-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
body.app-theme-dark .mg-library-host .cmd-doc-more-menu {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
/* Normalize the rehomed buttons into menu rows without editing their markup. */
.mg-library-host .cmd-doc-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 40px;
  color: #1f2937;
}
body.app-theme-dark .mg-library-host .cmd-doc-more-menu button { color: #e5e7eb; }
.mg-library-host .cmd-doc-more-menu button:hover { background: #f3f4f6; }
body.app-theme-dark .mg-library-host .cmd-doc-more-menu button:hover { background: #374151; }
.mg-library-host .cmd-doc-more-menu .vault-delete-btn { color: #b91c1c; }
body.app-theme-dark .mg-library-host .cmd-doc-more-menu .vault-delete-btn { color: #f87171; }
/* Destructive actions sit below a rule, away from routine ones. */
.mg-library-host .cmd-doc-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: #e5e7eb;
}
body.app-theme-dark .mg-library-host .cmd-doc-menu-sep { background: #374151; }
.mg-library-host .cmd-doc-folder-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mg-library-host .cmd-doc-folder-rail::-webkit-scrollbar { display: none; }
.mg-library-host .cmd-doc-filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mg-library-host .cmd-doc-filter-bar::-webkit-scrollbar { display: none; }
.mg-library-host .cmd-doc-filter-bar > button { flex: 0 0 auto; }

/* Cases-style Library chrome. Legacy vault/search/folder rails stay in the
   DOM for existing handlers and tests; the module chrome is what is shown. */
.mg-library-host {
  background: #f9fafb;
  color: #111827;
}
body.app-theme-dark .mg-library-host {
  background: #111827;
  color: #f9fafb;
}
/* Sticky Library chrome — glass recipe lives in prdna-canonical-gloss.css
   (--prdna-gloss-*). Keep sticky geometry here. */
.mg-library-host .cmd-lib-chrome {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 0 10px;
  padding: 6px 0 10px;
}
body.app-theme-dark .mg-library-host .cmd-lib-chrome {
  color: #f9fafb;
}
.mg-library-host .cmd-lib-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}
.mg-library-host .cmd-lib-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Cases chrome forces white for the dark top bar; Library sits on the
     worksheet, so light mode must use dark type. */
  color: #111827 !important;
}
body.app-theme-dark .mg-library-host .cmd-lib-title {
  color: #f9fafb !important;
}
.mg-library-host button.cmd-lib-back-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 0 2px;
  color: inherit;
}
.mg-library-host .pcb-svc-cases-back.cmd-lib-title,
.mg-library-host button.cmd-lib-back-btn.pcb-svc-cases-back {
  color: #111827 !important;
}
body.app-theme-dark .mg-library-host .pcb-svc-cases-back.cmd-lib-title,
body.app-theme-dark .mg-library-host button.cmd-lib-back-btn.pcb-svc-cases-back {
  color: #f9fafb !important;
}
/* Customer gate reuses the same title/back treatment outside .mg-library-host. */
#libCustomerGate .pcb-svc-cases-back,
#libCustomerGate .cmd-lib-back-btn {
  color: #111827 !important;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
body.app-theme-dark #libCustomerGate .pcb-svc-cases-back,
body.app-theme-dark #libCustomerGate .cmd-lib-back-btn {
  color: #f9fafb !important;
}
body.app-theme-dark #libCustomerGate .text-mgDark {
  color: #e5e7eb !important;
}
body.app-theme-dark #libCustomerGate .text-gray-500 {
  color: #9ca3af !important;
}
.mg-library-host .cmd-lib-title-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.mg-library-host .pcb-svc-icon-btn,
.mg-library-host .cmd-lib-icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.app-theme-dark .mg-library-host .pcb-svc-icon-btn,
body.app-theme-dark .mg-library-host .cmd-lib-icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f9fafb;
}
.mg-library-host .cmd-lib-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 4px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.app-theme-dark .mg-library-host .cmd-lib-filter-row {
  background: transparent;
  border-color: transparent;
}
.mg-library-host .cmd-lib-filter-cell,
.mg-library-host .pcb-filter-select {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid rgba(128, 128, 128, 0.18);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mg-library-host .cmd-lib-filter-cell:last-child { border-right: 0; }
.mg-library-host .pcb-filter-select-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.mg-library-host .pcb-filter-select-value {
  font-size: 13px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-library-host .cmd-lib-filter-cell.is-active,
.mg-library-host .cmd-lib-filter-cell[aria-expanded="true"] {
  background: rgba(16, 185, 129, 0.12);
}
.mg-library-host .cmd-lib-drawer-root,
.mg-library-host .pcb-filter-popup-root {
  position: relative;
}
.mg-library-host .pcb-filter-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
}
.mg-library-host .pcb-filter-popup,
.mg-library-host .cmd-lib-drawer {
  position: relative;
  z-index: 41;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  padding: 10px 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
body.app-theme-dark .mg-library-host .pcb-filter-popup,
body.app-theme-dark .mg-library-host .cmd-lib-drawer {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}
.mg-library-host .pcb-filter-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mg-library-host .pcb-filter-popup-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.mg-library-host .pcb-filter-popup-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mg-library-host .pcb-filter-popup-hint,
.mg-library-host .cmd-lib-drawer-hint {
  margin: 8px 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.mg-library-host .cmd-lib-drawer-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(50vh, 360px);
  overflow: auto;
}
.mg-library-host .cmd-lib-drawer-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mg-library-host .cmd-lib-drawer-opt.is-selected,
.mg-library-host .cmd-lib-drawer-opt[aria-current="true"] {
  background: rgba(16, 185, 129, 0.16);
}
.mg-library-host .pcb-filter-popup-apply,
.mg-library-host .cmd-lib-drawer-new-folder {
  margin-top: 10px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #0f7a4f;
  background: #0f7a4f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}
.mg-library-host .cmd-lib-drawer-new-folder {
  background: transparent;
  color: #0f7a4f;
}
.mg-library-host .cmd-lib-scroll-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px 4px;
  font-size: 12px;
  color: #6b7280;
}
.mg-library-host .cmd-lib-scroll-status[hidden] { display: none; }
.mg-library-host .cmd-lib-scroll-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #d1d5db;
  border-top-color: #0f7a4f;
  border-radius: 50%;
  animation: cmdLibSpin 0.8s linear infinite;
}
@keyframes cmdLibSpin { to { transform: rotate(360deg); } }
.mg-library-host .cmd-lib-scroll-sentinel { height: 1px; }

.mg-library-host .cmd-doc-vault-bar,
.mg-library-host .cmd-doc-attach-scope-bar,
.mg-library-host .cmd-doc-folder-rail,
.mg-library-host .cmd-doc-folder-grid,
.mg-library-host .cmd-doc-view-actions,
.mg-library-host .cmd-doc-folder-section > .flex.items-center.justify-between,
.mg-library-host .cmd-doc-search,
.mg-library-host nav[aria-label="Breadcrumb"],
.mg-library-host .cmd-doc-active-folder {
  display: none !important;
}
.mg-library-host.cmd-lib-search-open .cmd-lib-search-slot {
  display: block;
  margin: 6px 0 8px;
}
.mg-library-host.cmd-lib-search-open .cmd-lib-search-slot .cmd-doc-search,
.mg-library-host.cmd-lib-search-open .cmd-doc-search {
  display: block !important;
}

#tab-library > .flex-shrink-0 {
  display: none !important;
}
#tab-library {
  background: var(--cc-worksheet, #f9fafb);
}
body.app-theme-dark #tab-library {
  background: var(--cc-worksheet, #111827);
}
/* Library surfaces: no teal top wrapper. Light = white/light; dark = worksheet. */
body.mg-library-surface-open header#ccTopBar {
  display: none !important;
}
body.mg-library-surface-open#commandBody:not(.app-theme-dark),
body.mg-library-surface-open:not(.app-theme-dark) {
  --cc-shell-bg: #ffffff;
  background-color: #ffffff !important;
}
body.app-theme-dark.mg-library-surface-open#commandBody,
body.app-theme-dark.mg-library-surface-open {
  --cc-shell-bg: #111827;
  background-color: #111827 !important;
}
body.mg-library-surface-open main#ccMain {
  margin-top: 0 !important;
  background-color: #ffffff !important;
}
body.app-theme-dark.mg-library-surface-open main#ccMain,
body.app-theme-dark #pdfToolsLibraryMount,
body.app-theme-dark #libInternalLibraryHost,
body.app-theme-dark #libCustomerLibraryHost,
body.app-theme-dark #caseDocumentsLibraryHost {
  background-color: #111827 !important;
}
body.mg-library-surface-open #tab-library {
  padding-top: env(safe-area-inset-top, 0px);
  background-color: #ffffff;
}
body.app-theme-dark.mg-library-surface-open #tab-library {
  background-color: #111827;
}
/* Menu Library mounts inherited tab padding (p-3 sm:p-4), which exposed body/ccMain
   in the side gutters. Full-bleed the worksheet; keep readable inset on chrome only. */
body.mg-library-surface-open #libInternalLibraryView,
body.mg-library-surface-open #libCustomerLibraryView {
  padding: 0 !important;
}
body.mg-library-surface-open #tab-library .flex-1.min-h-0.overflow-auto {
  background: #ffffff;
}
body.app-theme-dark.mg-library-surface-open #tab-library .flex-1.min-h-0.overflow-auto {
  background: #111827 !important;
}
.mg-library-host .cmd-lib-chrome {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.mg-library-host [data-doc-panel-root] > section > .bg-gray-50,
.mg-library-host [data-doc-panel-root] > section > .bg-amber-100\/90 {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

#libLoadMore {
  display: none !important;
}

/* Flatten the file canvas onto the shell: no second slab, photos-tight grid. */
.mg-library-host,
.mg-library-host [data-doc-panel-root] {
  background: var(--cc-worksheet, #f9fafb);
}
body.app-theme-dark .mg-library-host,
body.app-theme-dark .mg-library-host [data-doc-panel-root] {
  background: var(--cc-worksheet, #111827) !important;
}
.mg-library-host [data-doc-panel-root] > section,
body.app-theme-dark .mg-library-host section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
}
.mg-library-host [data-doc-panel-root] > section > .bg-gray-50,
.mg-library-host [data-doc-panel-root] > section > .bg-amber-100\/90,
body.app-theme-dark .mg-library-host .bg-gray-50,
body.app-theme-dark .mg-library-host .bg-white {
  background: transparent !important;
  border: 0 !important;
}
.mg-library-host ul.vault-file-list:not(.vault-file-list--row) {
  padding: 0 !important;
  background: var(--cc-worksheet, #f9fafb);
}
body.app-theme-dark .mg-library-host ul.vault-file-list:not(.vault-file-list--row) {
  background: var(--cc-worksheet, #111827) !important;
}
.mg-library-host ul.vault-file-list:not(.vault-file-list--row) > li.vault-file-card {
  border-radius: 8px;
  border-width: 0 !important;
  box-shadow: none !important;
  background: var(--cc-worksheet, #f9fafb) !important;
}
body.app-theme-dark .mg-library-host ul.vault-file-list:not(.vault-file-list--row) > li.vault-file-card,
body.app-theme-dark .mg-library-host ul.vault-file-list:not(.vault-file-list--row) > li.vault-file-card--customer,
body.app-theme-dark .mg-library-host ul.vault-file-list:not(.vault-file-list--row) > li.vault-file-card--staff {
  background: var(--cc-worksheet, #111827) !important;
  box-shadow: none !important;
}