/* Keep this chooser in the Library's dark navy / teal visual family. */
.youtube-inclusion-chooser,
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) {
  --yi-text: var(--zb-readable-dark-text, #f8fafc);
  --yi-muted: #c1cede;
  --yi-soft: #a6b9ce;
  --yi-border: rgba(166, 185, 216, .24);
  --yi-teal: #5eead4;
  --yi-surface: #0a162a;
}

#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-card {
  box-sizing: border-box;
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
  height: min(860px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
}

#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-header { flex: 0 0 auto; }
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-scroll-region {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-message { flex: 0 0 auto; }
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-body:not([hidden]),
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-body > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser > :not(.youtube-inclusion-sections) { flex-shrink: 0; }
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-sections { flex: 1 1 auto; min-height: 80px; max-height: none; }
#guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-actions:empty { display: none; }

.youtube-inclusion-chooser {
  --text: var(--yi-text);
  --muted: var(--yi-muted);
  position: relative;
  color: var(--yi-text);
  color-scheme: dark;
  display: grid;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

.youtube-inclusion-chooser p, .youtube-inclusion-chooser label { color: inherit; }
.youtube-inclusion-heading { padding-right: 44px; }
.youtube-inclusion-heading h2 { margin: 0 0 7px; font-size: 1.45rem; }
.youtube-inclusion-heading p { margin: 0; color: var(--yi-muted); line-height: 1.45; }
.youtube-inclusion-preview-note { margin: 0; color: var(--yi-soft); font-size: .8rem; line-height: 1.35; }
.youtube-inclusion-discovery-note {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 14px;
  color: var(--yi-muted);
  font-size: .86rem;
  line-height: 1.45;
}
.youtube-inclusion-discovery-note strong { font-size: .9rem; font-weight: 650; }
.youtube-inclusion-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--yi-border);
  border-radius: 50%;
  background: rgba(15, 23, 42, .72);
  color: var(--yi-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.youtube-inclusion-toolbar, .youtube-inclusion-selection-actions, .youtube-inclusion-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.youtube-inclusion-toolbar { justify-content: space-between; }
.youtube-inclusion-summary { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; font-size: .88rem; }
.youtube-inclusion-summary strong { font-weight: 700; }
.youtube-inclusion-library-count { color: var(--yi-soft); font-size: .78rem; }
.youtube-inclusion-filters { display: grid; gap: 8px; }
.youtube-inclusion-filters > label:first-child { display: grid; gap: 5px; font-weight: 600; font-size: .82rem; }
.youtube-inclusion-filters input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(125, 211, 252, .35);
  border-radius: 10px;
  background: #071323;
  color: var(--yi-text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
}
.youtube-inclusion-filters input[type="search"]::placeholder { color: var(--yi-soft); opacity: 1; }
.youtube-inclusion-filters input[type="search"]:focus { border-color: var(--yi-teal); box-shadow: 0 0 0 3px rgba(45, 212, 191, .14); }
.youtube-inclusion-new-filter { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .8rem; }
.youtube-inclusion-new-filter small { color: var(--yi-soft); }
.youtube-inclusion-sections {
  min-height: 120px;
  max-height: min(48vh, 500px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .5) transparent;
  padding: 2px 6px 2px 2px;
  border-radius: 12px;
}
.youtube-inclusion-section { border: 1px solid var(--yi-border); border-radius: 12px; overflow: hidden; background: rgba(6, 16, 32, .6); }
.youtube-inclusion-section + .youtube-inclusion-section { margin-top: 10px; }
.youtube-inclusion-section > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 13px; background: rgba(18, 35, 56, .85); }
.youtube-inclusion-section h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .94rem; font-weight: 700; }
.youtube-inclusion-section > header > span { display: grid; place-items: center; min-width: 24px; padding: 2px 7px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 999px; color: var(--yi-muted); background: rgba(2, 8, 23, .28); font-size: .75rem; line-height: 1.3; }
.youtube-inclusion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-top: 1px solid rgba(148, 163, 184, .13); transition: background .12s ease, box-shadow .12s ease; }
.youtube-inclusion-row[hidden], .youtube-inclusion-no-matches[hidden], .youtube-inclusion-error[hidden], .youtube-inclusion-discovery-note[hidden] { display: none; }
.youtube-inclusion-row:not(.is-blocked):not(.is-already-added):hover { background: rgba(20, 184, 166, .09); }
.youtube-inclusion-row.is-selected {
  background: linear-gradient(105deg, rgba(8, 47, 73, .8), rgba(13, 78, 101, .35));
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .9), inset 0 0 0 1px rgba(45, 212, 191, .18), 0 0 1rem rgba(20, 184, 166, .08);
}
.youtube-inclusion-row.is-already-added, .youtube-inclusion-row.is-blocked { background: rgba(15, 23, 42, .6); box-shadow: inset 3px 0 0 rgba(148, 163, 184, .32); }
.youtube-inclusion-row:is(.is-already-added, .is-blocked) .youtube-inclusion-choice { cursor: default; }
.youtube-inclusion-choice { display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; cursor: pointer; }
.youtube-inclusion-choice input, .youtube-inclusion-new-filter input { accent-color: #2dd4bf; width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: inherit; }
.youtube-inclusion-choice input:disabled { opacity: .8; }
.youtube-inclusion-type-icon { box-sizing: border-box; flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; border: 1px solid rgba(125, 211, 252, .24); border-radius: 9px; background: rgba(14, 116, 144, .13); color: #99f6e4; }
.youtube-inclusion-row.is-selected .youtube-inclusion-type-icon { background: rgba(45, 212, 191, .12); border-color: rgba(94, 234, 212, .38); }
.youtube-inclusion-row:is(.is-already-added, .is-blocked) .youtube-inclusion-type-icon { color: #b4c3d5; border-color: rgba(148, 163, 184, .22); background: rgba(148, 163, 184, .07); }
.youtube-inclusion-label { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.youtube-inclusion-label strong { font-size: .91rem; line-height: 1.3; font-weight: 650; }
.youtube-inclusion-label small { color: var(--yi-soft); font-size: .77rem; line-height: 1.35; }
.youtube-inclusion-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; font-size: .72rem; color: var(--yi-muted); }
.youtube-inclusion-row-meta a { color: #a5dff5; font-size: .73rem; text-decoration: underline; text-underline-offset: 2px; }
.youtube-inclusion-status { border: 1px solid transparent; border-radius: 999px; padding: 2px 7px; font-size: .7rem; line-height: 1.35; }
.youtube-inclusion-status:empty { display: none; }
.youtube-inclusion-row.is-selected .youtube-inclusion-status { color: #b8fff0; background: rgba(20, 184, 166, .13); border-color: rgba(94, 234, 212, .28); }
.youtube-inclusion-row:is(.is-already-added, .is-blocked) .youtube-inclusion-status { color: #c5d2e2; background: rgba(148, 163, 184, .09); border-color: rgba(148, 163, 184, .2); }
.youtube-inclusion-new { border-radius: 999px; background: rgba(59, 130, 246, .15); border: 1px solid rgba(147, 197, 253, .24); color: #bfdbfe; padding: 1px 7px; font-size: .69rem; font-weight: 650; }
.youtube-inclusion-empty, .youtube-inclusion-no-matches { margin: 0; padding: 13px; color: var(--yi-soft); font-size: .84rem; }
.youtube-inclusion-footer { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--yi-border); }
.youtube-inclusion-preview-label { color: var(--yi-soft); font-size: .78rem; }
.youtube-inclusion-chooser .secondary-button { padding: 7px 13px; min-height: 34px; border: 1px solid rgba(166, 185, 216, .32); border-radius: 999px; background: rgba(18, 35, 56, .8); color: var(--yi-text); font-size: .82rem; font-weight: 650; box-shadow: none; }
.youtube-inclusion-footer button { min-height: 40px; }
.youtube-inclusion-footer .system-primary-action { padding: 9px 18px; border: 1px solid rgba(94, 234, 212, .55); border-radius: 999px; background: linear-gradient(135deg, #087f83, #126d91); color: #fff; font-size: .85rem; font-weight: 750; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px rgba(8, 47, 73, .22); }
.youtube-inclusion-chooser button:disabled { opacity: .65; cursor: default; }
.youtube-inclusion-chooser .secondary-button:not(:disabled):hover, .youtube-inclusion-close:not(:disabled):hover { border-color: rgba(94, 234, 212, .6); background: rgba(23, 58, 75, .9); }
.youtube-inclusion-footer .system-primary-action:not(:disabled):hover { filter: brightness(1.12); }
.youtube-inclusion-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(252, 165, 165, .4); border-radius: 8px; background: rgba(127, 29, 29, .22); color: #fecaca; font-size: .86rem; }
.youtube-inclusion-chooser :focus-visible { outline: 2px solid var(--yi-teal); outline-offset: 3px; }

/* The shared modal/readability layers use !important. These overrides are
   limited to this chooser; its list is the only scrolling region. */
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .modal-card.guidance-modal-card {
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  background: radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .07), transparent 24rem), linear-gradient(145deg, #0a162a, #030a18) !important;
  border-color: rgba(125, 211, 252, .26) !important;
  color: var(--yi-text) !important;
}
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-header {
  padding: 17px 64px 12px 20px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) #guidanceModalTitle { color: var(--yi-text) !important; -webkit-text-fill-color: var(--yi-text) !important; font-size: 1.45rem; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .eyebrow { color: #7eead6 !important; -webkit-text-fill-color: #7eead6 !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-message { margin: 0 !important; padding: 0 20px 14px !important; color: var(--yi-muted) !important; -webkit-text-fill-color: var(--yi-muted) !important; font-size: .9rem; line-height: 1.45; font-weight: 400 !important; background: transparent !important; border: 0 !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-body:not([hidden]) { max-height: none !important; padding: 0 20px 17px !important; margin: 0 !important; background: transparent !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-close { top: 17px; right: 18px; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser :is(p, label, strong, h3) { color: var(--yi-text) !important; -webkit-text-fill-color: var(--yi-text) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser :is(small, .youtube-inclusion-preview-note, .youtube-inclusion-preview-label, .youtube-inclusion-library-count, .youtube-inclusion-empty, .youtube-inclusion-no-matches) { color: var(--yi-soft) !important; -webkit-text-fill-color: var(--yi-soft) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser .youtube-inclusion-discovery-note { color: var(--yi-muted) !important; -webkit-text-fill-color: var(--yi-muted) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-row:is(.is-already-added, .is-blocked) strong { color: #c5d2e2 !important; -webkit-text-fill-color: #c5d2e2 !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser input[type="search"] { background: #071323 !important; border-color: rgba(125, 211, 252, .35) !important; color: var(--yi-text) !important; -webkit-text-fill-color: var(--yi-text) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser input[type="search"]:focus { border-color: var(--yi-teal) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser input[type="search"]::placeholder { color: var(--yi-soft) !important; -webkit-text-fill-color: var(--yi-soft) !important; opacity: 1 !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser :is(.secondary-button, .youtube-inclusion-close) { background: rgba(18, 35, 56, .8) !important; border-color: rgba(166, 185, 216, .32) !important; color: var(--yi-text) !important; -webkit-text-fill-color: var(--yi-text) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser :is(.secondary-button, .youtube-inclusion-close):not(:disabled):hover { border-color: rgba(94, 234, 212, .6) !important; background: rgba(23, 58, 75, .9) !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-footer .system-primary-action { background: linear-gradient(135deg, #087f83, #126d91) !important; border-color: rgba(94, 234, 212, .55) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-chooser .youtube-inclusion-error { color: #fecaca !important; -webkit-text-fill-color: #fecaca !important; }

@media (max-height: 760px) {
  .youtube-inclusion-chooser { gap: 9px; }
  .youtube-inclusion-footer { padding-top: 9px; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-header { padding-top: 12px !important; padding-bottom: 8px !important; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-message { padding-bottom: 10px !important; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-body:not([hidden]) { padding-bottom: 12px !important; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .youtube-inclusion-close { top: 12px; }
}

@media (max-width: 600px) {
  .youtube-inclusion-row { align-items: flex-start; gap: 6px; flex-wrap: wrap; }
  .youtube-inclusion-row-meta { padding-left: 28px; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .youtube-inclusion-type-icon { display: none; }
  .youtube-inclusion-summary { gap: 5px; }
  .youtube-inclusion-library-count { width: 100%; }
  .youtube-inclusion-footer button { flex: 1; }
  .youtube-inclusion-preview-label { width: 100%; }
  .youtube-inclusion-sections { max-height: 40vh; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-header { padding-left: 14px !important; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-message { padding-left: 14px !important; padding-right: 14px !important; }
  html body #guidanceModalBackdrop:has(.youtube-inclusion-chooser) .guidance-modal-body:not([hidden]) { padding-left: 12px !important; padding-right: 12px !important; }
}

.youtube-inclusion-progress { margin: 0; padding: 10px 12px; border: 1px solid rgba(94, 234, 212, .3); border-radius: 8px; background: rgba(13, 78, 101, .2); color: var(--yi-text); font-size: .86rem; }
.youtube-inclusion-progress[hidden] { display: none; }