/* Chat Detective v35: consolidated mobile v22/v23 and shared v24-v32 styles. */

/* Chat Detective v22 — the Liquid Glass mobile finish.
   All layout changes below are viewport-scoped; desktop remains unchanged. */

@media (max-width: 780px) {
  /* Navigation must be the same floating menu on every SPA route. */
  body.cdh-dark[data-view] .page-shell #mobile-nav {
    position: absolute;
    top: 68px;
    right: 14px;
    left: auto;
    z-index: 4900;
    width: min(250px, calc(100vw - 28px));
    max-width: none;
    margin: 0;
    padding: 8px;
    gap: 3px;
    border: 1px solid rgba(242, 201, 236, .43);
    border-radius: 14px;
    background: linear-gradient(138deg, rgba(29, 32, 57, .94), rgba(28, 24, 54, .93) 65%, rgba(66, 30, 64, .9));
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    box-shadow: 0 17px 38px rgba(1, 3, 16, .4), inset 0 1px rgba(255, 255, 255, .13);
  }

  body.cdh-dark[data-view] .page-shell #mobile-nav a,
  body.cdh-dark[data-view] .page-shell #mobile-nav button {
    min-height: 42px;
    padding: 11px 13px;
    border-radius: 9px;
    color: #f0eaf5;
    font-size: 14px;
    font-weight: 550;
  }

  body.cdh-dark[data-view] .page-shell #mobile-nav a:is(:hover, :focus-visible),
  body.cdh-dark[data-view] .page-shell #mobile-nav a.active {
    background: linear-gradient(100deg, rgba(239, 135, 187, .2), rgba(255, 255, 255, .055));
    color: #fff;
  }

  body.cdh-dark[data-view] .site-header {
    min-width: 0;
    gap: 8px;
  }

  body.cdh-dark[data-view] .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    overflow: hidden;
  }

  body.cdh-dark[data-view] .site-header .brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.cdh-dark[data-view] .site-header .account-controls {
    flex: 0 0 auto;
    gap: 6px;
    min-width: 0;
  }

  body.cdh-dark[data-view] .site-header .mobile-menu-toggle {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(240, 214, 250, .43);
    border-radius: 9px;
    background: linear-gradient(120deg, rgba(255, 239, 255, .17), rgba(29, 30, 54, .43));
    color: #f4edf7;
    box-shadow: inset 0 1px rgba(255, 255, 255, .17);
  }
}

@media (max-width: 640px) {
  /* Keep the two mode choices and CTA; the demo card is desktop-only. */
  body.cdh-dark[data-view="home"] .cde-preview {
    display: none !important;
  }

  body.cdh-dark[data-view="home"] .cde-layout {
    gap: 0;
  }

  /* Authenticated usernames must never push the hamburger out of the viewport. */
  body.cdh-dark[data-view] .site-header {
    --cd-header-button-height: 39px;
    padding-right: 8px;
    padding-left: 8px;
    gap: 6px;
  }

  body.cdh-dark[data-view] .site-header .brand {
    gap: 5px;
  }

  body.cdh-dark[data-view] .site-header .brand .cdh-logo {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  body.cdh-dark[data-view] .site-header .brand span {
    font-size: clamp(12px, 3.9vw, 16px);
    letter-spacing: .015em;
  }

  body.cdh-dark[data-view] .site-header .account-controls {
    gap: 5px;
  }

  body.cdh-dark[data-view] .site-header .cd-settings-trigger,
  body.cdh-dark[data-view] .site-header #login-button,
  body.cdh-dark[data-view] .site-header .mobile-menu-toggle {
    box-sizing: border-box;
    flex: 0 0 39px;
    width: 39px !important;
    min-width: 39px !important;
    max-width: 39px;
    height: 39px !important;
    min-height: 39px !important;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
  }

  body.cdh-dark[data-view] .site-header #login-button {
    gap: 0;
  }

  /* Zero-width text remains in the accessibility tree; the icon stays visible. */
  body.cdh-dark[data-view] .site-header #login-button > span:not(.cd-account-chevron) {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
  }

  body.cdh-dark[data-view] .site-header #login-button .cd-account-chevron {
    display: none !important;
  }

  body.cdh-dark[data-view] .site-header .mobile-menu-toggle {
    display: grid;
    place-items: center;
  }

  body.cdh-dark[data-view] .page-shell #mobile-nav {
    top: 65px;
    right: 10px;
  }

  /* Gemini controls need room for full labels on narrow screens. */
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
  }

  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions > :first-child {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    font-size: 12px;
  }

  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions :is(select, .cd-menu-trigger) {
    width: 100%;
    min-height: 38px;
  }

  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions .cd-menu-control {
    width: 100%;
    min-width: 0;
  }

  /* Do not let the editor's icon rail force content beyond the right edge. */
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions {
    min-width: 0;
  }

  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row {
    min-width: 0;
  }

  /* Native iOS radio/checkbox controls were black against the purple glass. */
  body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-answer input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid rgba(236, 203, 234, .7);
    border-radius: 50%;
    background: rgba(13, 18, 33, .48);
    box-shadow: inset 0 1px 3px rgba(1, 2, 13, .3);
  }

  body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-answer input[type="radio"]:checked {
    border-color: #ff7bae;
    background: radial-gradient(circle, #fff 0 3px, #ed4784 3.5px 9px);
    box-shadow: 0 0 0 2px rgba(244, 77, 137, .17);
  }

  body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-answer input[type="radio"]:focus-visible {
    outline: 2px solid #ffb2d3;
    outline-offset: 3px;
  }
}

/* The modal close control belongs to its heading, not to the scrolling fields. */
body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-dialog-shell {
  position: relative;
}

body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  float: none;
  z-index: 3;
  outline: none;
}

body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-modal-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: inset 0 1px rgba(255,255,255,.14);
}

body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-modal-close:focus-visible {
  outline: 2px solid #ff91bf;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-modal-close {
    top: 15px;
    right: 15px;
  }

  body.cdh-dark[data-view="moderation"] .mod-editor-dialog .mod-modal-heading {
    padding-right: 48px;
  }
}


/* v23: consistent mobile header popovers and real glass moderation filters. */

@media (max-width: 780px) {
  /* The mobile navigation is now a direct child of .site-header.  It shares
     the same stacking context as settings and the Twitch account menu. */
  body.cdh-dark[data-view] .site-header #mobile-nav {
    position: absolute;
    z-index: 6500;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    margin: 0;
    width: min(250px, calc(100vw - 28px));
    max-width: none;
    border: 1px solid rgba(245, 204, 240, .45);
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(32, 31, 60, .97), rgba(27, 25, 53, .96) 61%, rgba(66, 32, 71, .94));
    -webkit-backdrop-filter: blur(23px) saturate(148%);
    backdrop-filter: blur(23px) saturate(148%);
    box-shadow: 0 19px 44px rgba(2, 2, 16, .52), inset 0 1px rgba(255, 255, 255, .16);
  }

  body.cdh-dark[data-view] .site-header #mobile-nav a.active {
    background: linear-gradient(110deg, rgba(255, 155, 206, .22), rgba(255, 255, 255, .06));
    color: #fff;
  }
}

/* The native iOS select chrome was bypassing the shared Liquid Glass look. */
body.cdh-dark[data-view="moderation"] .mod-filters label:has(> select) {
  position: relative;
  min-width: 0;
}

body.cdh-dark[data-view="moderation"] .mod-filters label:has(> select)::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 17px;
  bottom: 17px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #e7d6ed;
  border-bottom: 2px solid #e7d6ed;
  border-radius: 1px;
  transform: rotate(45deg);
  pointer-events: none;
}

body.cdh-dark[data-view="moderation"] .mod-filters select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  padding: 10px 37px 10px 13px;
  border: 1px solid rgba(241, 206, 239, .48);
  border-radius: 11px;
  background: linear-gradient(120deg, rgba(121, 83, 133, .28), rgba(47, 43, 79, .51) 56%, rgba(123, 42, 90, .24));
  -webkit-backdrop-filter: blur(13px) saturate(145%);
  backdrop-filter: blur(13px) saturate(145%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 6px 15px rgba(9, 6, 26, .12);
  color: #f6eff9;
  font-weight: 530;
  cursor: pointer;
}

body.cdh-dark[data-view="moderation"] .mod-filters input[type="search"] {
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(241, 206, 239, .46);
  border-radius: 11px;
  background: linear-gradient(120deg, rgba(122, 81, 132, .24), rgba(46, 45, 80, .44) 57%, rgba(131, 42, 87, .2));
  -webkit-backdrop-filter: blur(13px) saturate(145%);
  backdrop-filter: blur(13px) saturate(145%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 6px 15px rgba(9, 6, 26, .1);
  color: #f7f0fa;
}

body.cdh-dark[data-view="moderation"] .mod-filters :is(select, input[type="search"]):is(:hover, :focus-visible) {
  border-color: rgba(255, 191, 227, .86);
  background: linear-gradient(120deg, rgba(146, 96, 147, .38), rgba(69, 50, 91, .61) 57%, rgba(150, 50, 98, .32));
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 0 0 3px rgba(245, 93, 158, .12);
  outline: none;
}

@media (max-width: 640px) and (orientation: portrait) {
  /* Render the animated sky on a wide virtual canvas and crop its sides.
     This preserves the shape of smoke and lightning instead of compressing
     a landscape composition into a tall phone viewport. */
  body.cdh-dark[data-view] > .cde-global-mist .cde-mist-canvas {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: max(100%, 165dvh);
    height: 100%;
    transform: translateX(-50%);
  }
}


/* Chat Detective v32 — consolidated Liquid Glass UI styles.
   The v24 section precedes v25 exactly as in the former stylesheet order. */

/* Chat Detective v24 — finish the established Liquid Glass interface. */

/* Mode chooser cards retain the same refractive, translucent glass as studio. */
body.cdh-dark[data-view="submit"] .cd-sm-card {
  overflow: hidden;
  border: 1px solid rgba(240, 196, 233, .43) !important;
  border-radius: 17px !important;
  background: linear-gradient(126deg, rgba(82, 54, 104, .34), rgba(29, 30, 55, .58) 54%, rgba(139, 43, 94, .28)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 16px 34px rgba(6,4,24,.2), inset 0 -1px rgba(248,107,169,.11) !important;
  transition: border-color .25s ease, background .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
body.cdh-dark[data-view="submit"] .cd-sm-card:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: rgba(255,202,234,.78) !important;
  background: linear-gradient(125deg,rgba(124,74,136,.43),rgba(51,42,80,.58),rgba(164,48,105,.34)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 22px 42px rgba(6,4,24,.28), 0 0 24px rgba(231,64,139,.12) !important;
  transform: translateY(-3px);
}
body.cdh-dark[data-view="submit"] .cd-sm-card:disabled,
body.cdh-dark[data-view="submit"] .cd-sm-card[aria-disabled="true"] {cursor:not-allowed;transform:none;opacity:.66;}
body.cdh-dark[data-view="submit"] .cd-sm-card-info {
  background: linear-gradient(124deg, rgba(71,50,98,.26),rgba(24,27,51,.18) 55%,rgba(172,49,110,.15));
}
body.cdh-dark[data-view="submit"] .cd-sm-card-art--chat {
  background: radial-gradient(ellipse at 77% 38%,rgba(220,95,164,.18),transparent 45%),
              linear-gradient(118deg,rgba(45,44,77,.62),rgba(49,34,70,.48),rgba(105,48,99,.33)) !important;
}
body.cdh-dark[data-view="submit"] .cd-sm-card-art--chat,
body.cdh-dark[data-view="submit"] .cd-sm-card-art--video {border-bottom:1px solid rgba(240,202,238,.17);}
body.cdh-dark[data-view="submit"] .cd-sm-card-bottom {border-top-color:rgba(241,200,232,.22);}
body.cdh-dark[data-view="submit"] .cd-sm-card-arrow {
  border:1px solid rgba(255,190,220,.67);
  border-radius:10px;
  background:linear-gradient(115deg,#d82f6a,#ed4f8a);
  box-shadow:inset 0 1px rgba(255,255,255,.27),0 4px 12px rgba(233,58,121,.23);
}
body.cdh-dark[data-view="submit"] .cd-sm-art-play {
  background:linear-gradient(145deg,rgba(49,36,64,.72),rgba(13,17,32,.75));
  border:1px solid rgba(255,220,241,.73);
  -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 9px 25px rgba(4,3,20,.38);
}

/* The game is launched *after* the mode is selected; mode buttons no longer navigate. */
body.cdh-dark[data-view="home"] .cde-cta {margin-top:24px;}
body.cdh-dark[data-view="home"] .cde-mode-picker {margin-top:27px;}
body.cdh-dark[data-view="home"] .cde-mode-picker .cde-mode-links button[data-cde-play-mode] {
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
body.cdh-dark[data-view="home"] .cde-mode-picker .cde-mode-links button.is-current {
  color:#fff;
  border-color:rgba(255,182,220,.53);
  background:linear-gradient(122deg,rgba(254,168,213,.22),rgba(176,54,103,.22) 65%,rgba(245,102,170,.17));
  box-shadow:inset 0 1px rgba(255,248,255,.21),0 3px 12px rgba(226,62,130,.17);
}
body.cdh-dark[data-view="home"] .cde-mode-picker .cde-mode-links button.is-current::before {content:none;}
body.cdh-dark[data-view="home"] .cde-mode-picker .cde-mode-links button svg {color:#ff95b9;}
body.cdh-dark[data-view="home"] .cde-mode-picker .cde-mode-links button:is(:hover,:focus-visible) {
  color:#fff;
  border-color:rgba(255,208,233,.71);
  background:linear-gradient(122deg,rgba(255,195,226,.27),rgba(195,63,127,.28));
  box-shadow:inset 0 1px rgba(255,250,255,.26),0 4px 17px rgba(233,61,124,.24);
}
@media(max-width:640px) {
  body.cdh-dark[data-view="home"] .cde-cta {margin-top:20px;}
  body.cdh-dark[data-view="home"] .cde-mode-picker {margin-top:22px;}
}

/* Whole editable answer rows show the correct choice without a second radio circle. */
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row {position:relative;cursor:pointer;}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row input[type="radio"] {
  position:absolute!important;
  width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;
  opacity:0!important;overflow:hidden;clip-path:inset(50%);
  pointer-events:none;
}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row:has(input[type="radio"]:focus-visible) {
  outline:2px solid #ffafd2;outline-offset:2px;
}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row label {flex:0 0 29px;margin-left:0;}
body.cdh-dark[data-view="submit"] #clip-form .answer-editor-row:has(input[type="radio"]:checked) {
  border-color:rgba(255,136,193,.74);
  background:linear-gradient(112deg,rgba(225,81,155,.3),rgba(107,57,121,.31) 60%,rgba(72,44,106,.26));
  box-shadow:inset 3px 0 #f14c8a,inset 0 1px rgba(255,255,255,.13);
}

/* Empty video placeholder: a calm glass stage, never a dead-black rectangle. */
body.cdh-dark[data-view="submit"] #clip-form #clip-inspector:has(>.clip-inspector-placeholder) {
  border:1px solid rgba(236,192,236,.26);
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 45%,rgba(165,76,145,.19),transparent 62%),
             linear-gradient(138deg,rgba(39,43,71,.67),rgba(21,26,50,.77) 57%,rgba(91,41,84,.45))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),inset 0 -1px rgba(246,103,159,.1);
}
body.cdh-dark[data-view="submit"] #clip-form .clip-inspector-placeholder {
  width:100%;min-height:100%;padding:24px;gap:14px;
  color:#c9bcd7;font:500 12px/1.55 Inter,'Segoe UI',system-ui,sans-serif;
}
body.cdh-dark[data-view="submit"] #clip-form .clip-inspector-placeholder span {
  display:grid;place-items:center;
  width:58px;height:58px;padding-left:3px;
  border:1px solid rgba(251,206,236,.51);
  border-radius:50%;
  background:linear-gradient(128deg,rgba(212,126,177,.22),rgba(56,49,86,.47));
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 8px 24px rgba(8,6,28,.26);
  color:#f7e6f5;font-size:21px;
}

/* Single glass border around the search toggle; no nested blue outline. */
body.cdh-dark[data-view="submit"] #clip-form > .cd-studio-search-rail {
  padding:0!important;
  border:0!important;
  border-radius:9px;
  background:transparent!important;
  box-shadow:none!important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search-rail .cd-search-edge {
  box-sizing:border-box;
  width:100%;height:39px;min-height:39px;
  padding:0!important;
  border:1px solid rgba(238,200,235,.5)!important;
  border-radius:9px!important;
  background:linear-gradient(120deg,rgba(110,76,121,.36),rgba(41,46,79,.62))!important;
  color:#eed9ee;
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 3px 11px rgba(10,5,28,.14)!important;
  transition:color .2s,border-color .2s,background .2s,transform .23s ease,box-shadow .23s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search-rail .cd-search-edge:is(:hover,:focus-visible) {
  border-color:rgba(255,197,227,.85)!important;
  background:linear-gradient(120deg,rgba(163,93,148,.44),rgba(81,52,105,.74))!important;
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 6px 17px rgba(194,42,108,.19)!important;
}

/* Discreet animation for expanding/collapsing the whole studio search column. */
body.cdh-dark[data-view="submit"] #clip-form > .cd-studio-search {view-transition-name:cd-source-panel;}
body.cdh-dark[data-view="submit"] #clip-form > .cd-studio-video {view-transition-name:cd-video-panel;}
body.cdh-dark[data-view="submit"] #clip-form > .cd-studio-questions {view-transition-name:cd-answers-panel;}
body.cdh-dark[data-view="submit"] #clip-form > .cd-studio-draft-rail {view-transition-name:cd-drafts-panel;}
@keyframes cd-v24-hide {from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(5px)}}
@keyframes cd-v24-show {from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
::view-transition-old(root),::view-transition-new(root){animation:none;}
::view-transition-old(cd-source-panel){animation:.22s ease-in both cd-v24-hide;}
::view-transition-new(cd-source-panel){animation:.25s ease-out both cd-v24-show;}
::view-transition-group(cd-video-panel),::view-transition-group(cd-answers-panel),::view-transition-group(cd-drafts-panel){
  animation-duration:.27s;animation-timing-function:cubic-bezier(.22,.75,.27,1);
}

/* One spotlight border, aligned to one mask cutout, without double rings. */
body.cdh-dark[data-view="submit"] #clip-form .cd-guide-focus {outline:none!important;outline-offset:0!important;}
body.cdh-dark[data-view="submit"] .submit-guide-ring {
  border:2px solid #ff8bb9;border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,224,245,.17),0 0 20px rgba(244,79,151,.32);
}
body.cdh-dark[data-view="submit"] .submit-guide-mask {background:rgba(8,7,23,.76);}

/* The explanation is one accordion, with a readable review notice inside. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra {
  margin:14px 0 0!important;padding:0!important;
  border:0!important;border-radius:12px!important;
  background:transparent!important;box-shadow:none!important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra[open] {
  border:1px solid rgba(242,199,235,.43)!important;
  background:linear-gradient(138deg,rgba(66,53,93,.46),rgba(37,35,69,.48) 70%,rgba(113,47,92,.25))!important;
  overflow:hidden;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary {
  min-height:40px;padding:9px 13px;
  border-color:rgba(238,196,234,.48);
  background:linear-gradient(120deg,rgba(97,72,119,.48),rgba(53,50,87,.63));
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra[open] > summary {
  border:0!important;border-bottom:1px solid rgba(244,210,239,.22)!important;
  border-radius:0!important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-extra-body {
  display:flex;flex-direction:column;gap:9px;padding:13px;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-extra-body > label {
  margin:8px 0 0;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-extra-body textarea {
  width:100%;min-height:74px;margin:0;
  background:rgba(43,42,74,.5);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-extra-body .community-tip {
  margin:9px 0 0;padding:10px 12px;
  border:1px solid rgba(251,188,226,.28);
  border-left:3px solid #ed6fa9;
  border-radius:9px;
  background:linear-gradient(110deg,rgba(146,62,112,.16),rgba(43,44,78,.36));
  color:#d9cbde;font:500 11px/1.55 Inter,'Segoe UI',system-ui,sans-serif;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-extra-body .community-tip::before {
  content:"ⓘ";display:inline-block;margin-right:7px;color:#f8a8cd;font-size:13px;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-ref-submit-footer {
  margin-top:11px!important;padding-top:9px!important;
  border-top:0!important;
}

@media(prefers-reduced-motion:reduce){
  body.cdh-dark[data-view="submit"] .cd-sm-card,
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search-rail .cd-search-edge{transition:none!important;}
  ::view-transition-old(cd-source-panel),::view-transition-new(cd-source-panel){animation:none!important;}
}

/* Chat Detective v25 — one Liquid Glass language for all selectors and controls.
   Earlier per-page geometry remains, but obsolete select skins no longer own the UI. */

:root {
  /* Shared visual tokens for gameplay, submission and moderation controls. */
  --cd-ui-font: Inter, 'Segoe UI', Arial, sans-serif;
  --cd-v25-font: var(--cd-ui-font);
  --cd-ui-control-radius: 11px;
  --cd-ui-control-height: 42px;
  --cd-ui-control-border: rgba(214, 184, 227, .48);
  --cd-ui-control-hot: rgba(255, 195, 231, .83);
  --cd-ui-control-surface: linear-gradient(120deg, rgba(76, 59, 103, .53), rgba(37, 38, 70, .72) 66%, rgba(118, 54, 102, .4));
  --cd-ui-control-hover: linear-gradient(120deg, rgba(122, 75, 133, .65), rgba(62, 46, 93, .77), rgba(155, 60, 111, .53));
  --cd-ui-text: #f4effa;
  --cd-ui-muted: #b9b2c9;
  --cd-ui-focus: rgba(255, 170, 214, .85);
  --cd-ui-focus-soft: rgba(255, 170, 214, .55);
  --cd-ui-speed: .2s;
}

body.cdh-dark[data-view="moderation"] .mod-catalog-view :is(button, input, textarea, label),
body.cdh-dark[data-view="submit"] #clip-form :is(button, input, textarea, label, summary) {
  font-family: var(--cd-ui-font);
}

/* All public-facing titles and choices use the same Inter family as Home. */
body.cdh-dark[data-view="submit"] :is(.cd-sm-root, .cd-sm-heading, .cd-sm-card, .cd-sm-editbar),
body.cdh-dark[data-view="moderation"] .mod-catalog-view,
body.cdh-dark[data-view="what-next"] .game-main {
  font-family: var(--cd-ui-font);
}

/* Shared interaction contract. Visual hierarchy and layout are still owned by
   each page; hover/focus timing, keyboard contrast and typography are not. */
body.cdh-dark .site-header :is(button, a),
body.cdh-dark[data-view="submit"] :is(.cd-sm-card, .cd-sm-back),
body.cdh-dark[data-view="submit"] #clip-form :is(button, input, textarea),
body.cdh-dark[data-view="moderation"] .mod-catalog-view :is(button, input, textarea),
body.cdh-dark[data-view="what-next"] .game-main :is(button, a) {
  -webkit-tap-highlight-color: transparent;
  font-family: var(--cd-ui-font);
}

body.cdh-dark .site-header :is(button, a):focus-visible,
body.cdh-dark[data-view="submit"] :is(.cd-sm-card, .cd-sm-back):focus-visible,
body.cdh-dark[data-view="submit"] #clip-form :is(button:not(.cd-menu-trigger):not(.cd-menu-option), a[href]):focus-visible,
body.cdh-dark[data-view="moderation"] .mod-catalog-view :is(button:not(.cd-menu-trigger):not(.cd-menu-option), a[href]):focus-visible,
body.cdh-dark[data-view="what-next"] .game-main :is(button, a[href]):focus-visible {
  outline: 2px solid var(--cd-ui-focus) !important;
  outline-offset: 2px;
}

body.cdh-dark[data-view="submit"] #clip-form :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus-visible:not(:disabled),
body.cdh-dark[data-view="moderation"] .mod-catalog-view :is(input, textarea):focus-visible:not(:disabled) {
  border-color: var(--cd-ui-control-hot) !important;
  outline: 2px solid var(--cd-ui-focus-soft) !important;
  outline-offset: 1px;
}

/* Stable hover geometry prevents the old page-specific lift from causing a jump. */
body.cdh-dark[data-view="moderation"] .mod-catalog-view button,
body.cdh-dark[data-view="submit"] #clip-form :is(.cd-auto-scope-tab, .cd-studio-toggle, .workshop-ai-actions button),
body.cdh-dark[data-view="what-next"] .game-main :is(.decision-action, .rating-save) {
  transition-property: background, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--cd-ui-speed);
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  body.cdh-dark .site-header :is(button, a),
  body.cdh-dark[data-view="submit"] :is(.cd-sm-card, .cd-sm-back),
  body.cdh-dark[data-view="submit"] #clip-form :is(button, input, textarea),
  body.cdh-dark[data-view="moderation"] .mod-catalog-view :is(button, input, textarea),
  body.cdh-dark[data-view="what-next"] .game-main :is(button, a) {
    transition: none !important;
  }
}

/* The moderation catalogue starts at its useful content, with no duplicate title bar. */
body.cdh-dark[data-view="moderation"] .mod-catalog-view {
  padding-top: 20px;
  font-family: var(--cd-v25-font);
}
body.cdh-dark[data-view="moderation"] .mod-categories { margin-top: 0; }
body.cdh-dark[data-view="moderation"] .mod-filters {
  position: relative;
  overflow: visible;
}
body.cdh-dark[data-view="moderation"] .mod-filters > label { position: relative; }
body.cdh-dark[data-view="moderation"] .mod-filters > label:has(.cd-menu-trigger[aria-expanded="true"]) {
  z-index: 50;
}

/* The editor's accessible listbox now powers moderation sorting and status too.
   Native select stays in the DOM to keep event-based filtering and forms intact. */
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-native,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-native {
  display: none !important;
}

body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-trigger,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: var(--cd-ui-control-height);
  min-height: var(--cd-ui-control-height);
  margin: 0;
  padding: 0 37px 0 13px;
  border: 1px solid var(--cd-ui-control-border) !important;
  border-radius: var(--cd-ui-control-radius) !important;
  background: var(--cd-ui-control-surface) !important;
  color: #f8eefa !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 4px 14px rgba(5, 4, 27, .16) !important;
  -webkit-backdrop-filter: blur(16px) saturate(148%);
  backdrop-filter: blur(16px) saturate(148%);
  font: 650 12px/1.35 var(--cd-ui-font) !important;
  text-align: left;
  cursor: pointer;
  transform: none !important;
  filter: none !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-trigger:is(:hover, :focus-visible, [aria-expanded="true"]),
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .23), 0 0 0 2px rgba(245, 94, 167, .09), 0 7px 16px rgba(10, 4, 28, .16) !important;
  outline: none;
  transform: none !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-trigger:focus-visible,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-trigger:focus-visible {
  /* A single focus halo; the old outline + inset ring looked doubled. */
  outline: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .23), 0 0 0 2px rgba(255, 161, 207, .64) !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-trigger:disabled,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-trigger:disabled {
  cursor: not-allowed;
  opacity: .55;
}
/* A chevron is part of the listbox component, not of a particular page. */
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-trigger .cd-menu-arrow,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-trigger .cd-menu-arrow {
  display: block !important;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  color: #f5d7ee;
  pointer-events: none;
  opacity: .92;
  transform: translateY(-72%) rotate(45deg) !important;
  transition: transform .18s ease !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-trigger[aria-expanded="true"] .cd-menu-arrow,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-trigger[aria-expanded="true"] .cd-menu-arrow {
  transform: translateY(-24%) rotate(225deg) !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-caption,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-caption {
  display: block;
  align-self: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
/* The globe/calendar occupy a reserved leading slot, never the label text. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-ref-select-control .cd-menu-trigger {
  padding-left: 43px !important;
  padding-right: 31px !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-ref-select-control > svg {
  display: block;
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translateY(-50%) !important;
  vertical-align: middle;
  z-index: 2;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-auto-actions #cd-auto-next {
  height: var(--cd-ui-control-height);
  min-height: var(--cd-ui-control-height);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions .cd-menu-trigger {
  min-height: 39px;
  height: 39px;
}

/* A continuous, scrollable glass sheet — not stacked unrelated pill-buttons. */
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-list,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  min-width: 100%;
  max-height: min(310px, 48dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px !important;
  border: 1px solid rgba(244, 193, 231, .46) !important;
  border-radius: 12px !important;
  background: linear-gradient(142deg, rgba(47, 39, 76, .97), rgba(28, 30, 56, .98) 64%, rgba(68, 35, 68, .97)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 18px 37px rgba(3, 4, 25, .45), 0 0 26px rgba(216, 72, 143, .09) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 148, 199, .51) rgba(38, 32, 62, .35);
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-list[hidden],
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-list[hidden] {
  display: none !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-group,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-group {
  margin: 3px 0 2px;
  padding: 8px 11px 3px;
  font: 750 10px/1.2 var(--cd-v25-font);
  letter-spacing: .08em;
  color: #b5aecb;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-option,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-option {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 37px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e9e2f1 !important;
  box-shadow: none !important;
  font: 600 12px/1.45 var(--cd-v25-font) !important;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transform: none !important;
  filter: none !important;
  transition: background .16s, border-color .16s, color .16s !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-option:is(:hover, :focus-visible),
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-option:is(:hover, :focus-visible) {
  border-color: rgba(247, 166, 215, .34) !important;
  background: rgba(192, 91, 155, .25) !important;
  color: #fff !important;
  outline: none;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-option.is-selected,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-option.is-selected {
  border-color: rgba(255, 158, 209, .47) !important;
  background: linear-gradient(115deg, rgba(177, 48, 104, .55), rgba(165, 63, 138, .35)) !important;
  color: #ffe4f1 !important;
}
body.cdh-dark[data-view="moderation"] .mod-filters .cd-menu-control .cd-menu-option.is-selected:is(:hover, :focus-visible),
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-control .cd-menu-option.is-selected:is(:hover, :focus-visible) {
  background: linear-gradient(115deg, rgba(212, 59, 126, .61), rgba(181, 73, 151, .43)) !important;
}

/* Stop legacy lifted hover geometry from fighting the current glass controls. */
body.cdh-dark .site-header :is(button, .cd-settings-trigger),
body.cdh-dark[data-view="moderation"] .mod-categories button,
body.cdh-dark[data-view="moderation"] .mod-editor-dialog :is(button, .mod-input),
body.cdh-dark[data-view="submit"] #clip-form :is(.cd-sm-card, .cd-auto-scope-tab, .cd-search-edge, .cd-ref-accordion, .answer-editor-row),
body.cdh-dark[data-view="submit"] #clip-form .workshop-ai-actions button,
body.cdh-dark[data-view="what-next"] .game-main :is(.answer, .decision-action, .cd-original-clip) {
  transform: none !important;
  filter: none !important;
}
body.cdh-dark[data-view="moderation"] .mod-categories button:focus-visible,
body.cdh-dark[data-view="what-next"] .game-main .answer:focus-visible {
  outline: 2px solid rgba(255, 170, 214, .85);
  outline-offset: 2px;
}

/* Keep theme presets in Settings, without a working or misleading toggle. */
.cd-settings-segment button[data-theme]:disabled {
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  opacity: .42;
}
.cd-settings-segment button[data-theme="dark"]:disabled {
  opacity: 1;
  border-color: rgba(255, 193, 230, .45);
  background: linear-gradient(115deg, rgba(176, 60, 117, .5), rgba(112, 48, 99, .45));
  color: #fff;
}

/* Selected answer now visibly progresses through the automatic reveal. */
body.cdh-dark[data-view="what-next"] .game-main .question-sheet .decision-action.is-auto-continuation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(239, 169, 218, .43) !important;
  border-radius: 11px;
  background: linear-gradient(115deg, rgba(93, 57, 105, .67), rgba(54, 46, 86, .8)) !important;
  color: #f4e1ee !important;
  opacity: 1 !important;
  cursor: progress;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13) !important;
}
body.cdh-dark[data-view="what-next"] .game-main .decision-action.is-auto-continuation::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 219, 237, .35);
  border-top-color: #ff96bf;
  border-radius: 50%;
  animation: cd-v25-spin 1s linear infinite;
}
@keyframes cd-v25-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.cdh-dark[data-view="what-next"] .game-main .decision-action.is-auto-continuation::after { animation: none; }
}

/* Keep optional descriptive text as data, without showing commentary after a guess. */
body.cdh-dark[data-view="what-next"] .game-main #feedback-body[hidden] { display: none !important; }

/* v29 — finish the shared glass language in Twitch discovery and the moderator editor.
   Keep the established layout, make the remaining native-looking fields consistent. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #cd-auto-channel {
  box-sizing: border-box;
  width: 100%;
  height: var(--cd-ui-control-height) !important;
  min-height: var(--cd-ui-control-height) !important;
  padding: 0 13px !important;
  border: 1px solid var(--cd-ui-control-border) !important;
  border-radius: var(--cd-ui-control-radius) !important;
  background: var(--cd-ui-control-surface) !important;
  color: var(--cd-ui-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 4px 14px rgba(5,4,27,.13) !important;
  font: 600 12px/1.35 var(--cd-ui-font) !important;
  -webkit-backdrop-filter: blur(16px) saturate(148%);
  backdrop-filter: blur(16px) saturate(148%);
  transition: background var(--cd-ui-speed) ease, border-color var(--cd-ui-speed) ease, box-shadow var(--cd-ui-speed) ease !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #cd-auto-channel::placeholder {
  color: var(--cd-ui-muted);
  opacity: .84;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #cd-auto-channel:hover:not(:disabled) {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #cd-auto-channel:focus-visible {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
  outline: 2px solid var(--cd-ui-focus-soft) !important;
  outline-offset: 1px;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-auto-channel-all {
  height: var(--cd-ui-control-height);
  min-height: var(--cd-ui-control-height);
  border: 1px solid var(--cd-ui-control-border) !important;
  border-radius: var(--cd-ui-control-radius) !important;
  background: var(--cd-ui-control-surface) !important;
  color: var(--cd-ui-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12) !important;
  transition: background var(--cd-ui-speed) ease, border-color var(--cd-ui-speed) ease, box-shadow var(--cd-ui-speed) ease !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-auto-channel-all:is(:hover,:focus-within) {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search .cd-auto-channel-all input:focus-visible {
  outline-color: var(--cd-ui-focus) !important;
}

/* The modal owns one coherent set of text fields, including answer rows and timings. */
body.cdh-dark[data-view="moderation"] #moderation-dialog {
  border-color: rgba(237,190,233,.48);
  background: linear-gradient(125deg,rgba(36,33,63,.96),rgba(29,30,56,.96) 57%,rgba(82,35,77,.92));
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
body.cdh-dark[data-view="moderation"] #moderation-dialog::backdrop {
  background: rgba(4,4,16,.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form .mod-input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--cd-ui-control-border) !important;
  border-radius: var(--cd-ui-control-radius) !important;
  background: var(--cd-ui-control-surface) !important;
  color: var(--cd-ui-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 4px 14px rgba(5,4,27,.1) !important;
  font: 550 13px/1.5 var(--cd-ui-font) !important;
  transition: background var(--cd-ui-speed) ease, border-color var(--cd-ui-speed) ease, box-shadow var(--cd-ui-speed) ease !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form input.mod-input {
  min-height: var(--cd-ui-control-height);
  padding: 9px 13px;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form textarea.mod-input {
  min-height: 70px;
  padding: 11px 13px;
  resize: vertical;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form .mod-input::placeholder {
  color: var(--cd-ui-muted);
  opacity: .88;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form .mod-input:hover:not(:disabled) {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-edit-form .mod-input:focus-visible {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
  outline: 2px solid var(--cd-ui-focus-soft) !important;
  outline-offset: 1px;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog :is(.mod-field-title,.mod-answers legend) {
  color: var(--cd-ui-muted);
  font: 700 12px/1.4 var(--cd-ui-font);
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-answer input[type="radio"],
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-sensitive-setting input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #f34385;
  cursor: pointer;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-sensitive-setting {
  border: 1px solid rgba(216,183,226,.4);
  border-radius: var(--cd-ui-control-radius);
  background: var(--cd-ui-control-surface);
  color: var(--cd-ui-text);
  transition: border-color var(--cd-ui-speed) ease, background var(--cd-ui-speed) ease;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-sensitive-setting:is(:hover,:focus-within) {
  border-color: var(--cd-ui-control-hot);
  background: var(--cd-ui-control-hover);
}

/* Video actions and modal footer share glass button geometry and clear states. */
body.cdh-dark[data-view="moderation"] #moderation-dialog :is(.mod-player-side .secondary-action,.mod-modal-actions button,.mod-modal-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--cd-ui-control-height);
  border: 1px solid var(--cd-ui-control-border) !important;
  border-radius: var(--cd-ui-control-radius) !important;
  background: var(--cd-ui-control-surface) !important;
  color: var(--cd-ui-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 4px 14px rgba(5,4,27,.12) !important;
  font: 700 12px/1.3 var(--cd-ui-font) !important;
  text-align: center;
  transform: none !important;
  filter: none !important;
  transition: background var(--cd-ui-speed) ease, border-color var(--cd-ui-speed) ease, box-shadow var(--cd-ui-speed) ease !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog :is(.mod-player-side .secondary-action,.mod-modal-actions button,.mod-modal-close):hover:not(:disabled) {
  border-color: var(--cd-ui-control-hot) !important;
  background: var(--cd-ui-control-hover) !important;
  color: #fff !important;
  transform: none !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-player-side .secondary-action:first-child,
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-actions .form-action {
  border-color: rgba(255,179,221,.75) !important;
  background: linear-gradient(115deg,#c93173,#ed4185) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.23), 0 8px 22px rgba(199,44,104,.22) !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-player-side .secondary-action:first-child:hover:not(:disabled),
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-actions .form-action:hover:not(:disabled) {
  border-color: #ffd2e9 !important;
  background: linear-gradient(115deg,#d93c7e,#f45a98) !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-actions .mod-reject {
  border-color: rgba(246,135,164,.48) !important;
  color: #ffc5d4 !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-actions .mod-reject:hover:not(:disabled) {
  background: linear-gradient(115deg,rgba(159,44,80,.45),rgba(97,36,77,.66)) !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog :is(.mod-player-side .secondary-action,.mod-modal-actions button,.mod-modal-close):disabled {
  opacity: .54;
  cursor: not-allowed;
  border-color: rgba(177,164,197,.31) !important;
  background: rgba(48,44,74,.46) !important;
  color: #bdb5ca !important;
  box-shadow: none !important;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-close {
  min-height: 38px;
  line-height: 1;
}
body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-player-empty {
  color: #d6cce3;
  font: 600 13px/1.4 var(--cd-ui-font);
}
@media (prefers-reduced-motion: reduce) {
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search :is(#cd-auto-channel,.cd-auto-channel-all),
  body.cdh-dark[data-view="moderation"] #moderation-dialog :is(.mod-input,.mod-sensitive-setting,.mod-player-side .secondary-action,.mod-modal-actions button,.mod-modal-close) {
    transition: none !important;
  }
}


/* v35: keep moderator video actions readable on narrow phones. */
@media (max-width: 480px) {
  body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-player-side {
    grid-template-columns: minmax(0, 1fr);
  }
  body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-player-side > *,
  body.cdh-dark[data-view="moderation"] #moderation-dialog .mod-modal-actions button {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* v42: The editor's transport inherited a teal/black legacy skin while the
   surrounding studio uses violet glass. Match the editor in both two- and
   three-column layouts without changing the video surface or fullscreen. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-panel {
  border-color:rgba(207,170,224,.34);
  background:linear-gradient(120deg,rgba(35,32,62,.98),rgba(51,32,69,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 18px rgba(15,9,29,.16);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-controls,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .cd-time-editor {
  background:transparent;
  color:#e9e1f0;
  border-color:rgba(204,174,225,.22);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-controls .player-icon-button,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-controls .player-timestamp {
  color:#d4c7df;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-controls .player-icon-button:hover,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .submit-player-controls .player-icon-button:focus-visible {
  background:rgba(229,83,151,.19);
  border-color:rgba(246,153,203,.42);
  color:#fff;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .player-track-interactive {
  background:rgba(176,161,207,.3);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .player-track-fill {
  background:linear-gradient(90deg,#e63987,#fa6ca7);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .cd-time-number,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .cd-time-nudge,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .timing-capture {
  background:rgba(39,36,66,.86);
  border-color:rgba(197,173,226,.32);
  color:#e4dcf2;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .cd-time-entry .cd-time-number input {
  border-color:rgba(197,173,226,.35);
  color:#eee6f7;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-video .player-volume-popover {
  background:linear-gradient(140deg,#2a2345,#382348);
  border-color:rgba(220,174,231,.45);
  color:#eee6f7;
}


/* v46: primary AI action stays clear; advanced controls are optional. */
body[data-view="submit"] .cd-ai-primary-actions{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
body[data-view="submit"] .cd-ai-primary-actions .secondary-action{flex:1 1 145px;min-height:44px}
body[data-view="submit"] .cd-ai-advanced{margin-top:10px;border:1px solid rgba(192,170,218,.23);border-radius:14px;padding:0 14px;background:rgba(25,23,42,.28)}
body[data-view="submit"] .cd-ai-advanced summary{cursor:pointer;padding:11px 0;font-size:.88rem;font-weight:600;color:inherit}
body[data-view="submit"] .cd-ai-advanced summary span{float:right;opacity:.7}
body[data-view="submit"] .cd-ai-advanced[open] summary{margin-bottom:8px}
body[data-view="submit"] .cd-ai-advanced label{display:block;font-size:.82rem;margin-bottom:6px}
body[data-view="submit"] .cd-ai-advanced select{display:block;width:100%;min-height:42px}
body[data-view="submit"] .cd-ai-advanced p{font-size:.78rem;line-height:1.55;opacity:.76;margin:9px 0 12px}