/* Chat Detective v21 — finish the submission studio without changing its flow. */

/* The editor focuses #app while switching views. That non-interactive wrapper
   must not receive a huge browser-default rectangle around the entire page. */
main#app:focus { outline: none; }

/* Keep the reserved scrollbar gutter (prevents width-jumps) but let the
   animated background occupy the entire viewport, including its right edge. */
html { background: #100e22; }
body.cdh-dark[data-view] > .cde-global-mist,
body.cdh-dark[data-view] > .cde-atmosphere {
  /* Stable root scrollbar gutters are excluded from CSS viewport units in
     some engines; 20px overscan reaches the real window edge on Windows. */
  width: calc(100% + 20px);
  max-width: none;
  right: auto;
}
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(222,105,161,.4); border-radius: 20px; }

/* Workshop: identical glass finish for back and restart-tutorial buttons. */
body.cdh-dark[data-view="submit"] .cd-sm-back.round-back {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid rgba(237,192,233,.48);
  border-radius: 11px;
  background: linear-gradient(125deg,rgba(86,68,113,.55),rgba(46,40,76,.58));
  color: #f4eaf8;
  font-size: 0;
  line-height: 0;
  box-shadow: inset 0 1px rgba(255,255,255,.19),0 5px 14px rgba(10,8,28,.13);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
}
body.cdh-dark[data-view="submit"] .cd-sm-back.round-back::before {
  content: '←';
  font: 21px/1 Inter,'Segoe UI',Arial,sans-serif;
  transform: translateY(-1px);
}
body.cdh-dark[data-view="submit"] .cd-sm-back.round-back:is(:hover,:focus-visible),
body.cdh-dark[data-view="submit"] .cd-sm-editbar #submit-guide-open:is(:hover,:focus-visible) {
  border-color: rgba(255,199,231,.83);
  background: linear-gradient(120deg,rgba(155,82,151,.58),rgba(75,54,109,.7));
  box-shadow: inset 0 1px rgba(255,255,255,.24),0 0 0 2px rgba(243,111,182,.09);
  color: #fff;
}
body.cdh-dark[data-view="submit"] .cd-sm-editbar #submit-guide-open,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-toolbar #submit-guide-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  height: auto;
  padding: 6px 11px;
  border: 1px solid rgba(229,184,231,.5);
  border-radius: 9px;
  background: linear-gradient(120deg,rgba(92,66,112,.53),rgba(57,45,89,.64));
  color: #f1dff3;
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 5px 13px rgba(5,5,22,.13);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.cdh-dark[data-view="submit"] #submit-guide-open[hidden] { display: none !important; }
body.cdh-dark[data-view="submit"] #submit-guide-open svg { width: 15px; height: 15px; display: block; }

/* The original palette has a :is(#id,...) selector whose ID specificity
   overrides later theme files. These narrow overrides intentionally win. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .ai-draft-panel {
  border: 1px solid rgba(231,194,233,.44);
  border-radius: 13px;
  background: linear-gradient(136deg,rgba(77,64,113,.55),rgba(38,41,77,.68) 56%,rgba(116,45,94,.38)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.17),0 12px 24px rgba(7,6,29,.17);
  -webkit-backdrop-filter: blur(17px) saturate(125%);
  backdrop-filter: blur(17px) saturate(125%);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .ai-draft-heading .workshop-help-icon {
  color: #e9cbe2;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .ai-event-tools {
  background: transparent !important;
  border-top-color: rgba(230,192,227,.31);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions :is(select,#workshop-improve) {
  border: 1px solid rgba(231,190,230,.44);
  border-radius: 9px;
  background: linear-gradient(118deg,rgba(77,70,111,.62),rgba(48,46,83,.67)) !important;
  color: #f5ebf7;
  box-shadow: inset 0 1px rgba(255,255,255,.14);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .workshop-ai-actions :is(select,#workshop-improve):is(:hover,:focus-visible) {
  border-color: rgba(255,204,234,.78);
  background: linear-gradient(118deg,rgba(115,70,123,.7),rgba(71,53,100,.74)) !important;
}

/* Questions and all four answers should read as editable glass rows. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row {
  border: 1px solid rgba(226,192,229,.4);
  border-radius: 10px;
  background: linear-gradient(120deg,rgba(65,61,99,.5),rgba(38,44,79,.63)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row:hover,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row:focus-within {
  border-color: rgba(255,196,229,.72);
  background: linear-gradient(120deg,rgba(89,66,116,.65),rgba(54,49,89,.66)) !important;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row:has(input[type="radio"]:checked) {
  border-color: rgba(255,111,176,.82);
  background: linear-gradient(120deg,rgba(143,58,115,.52),rgba(74,47,92,.59)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 0 12px rgba(234,75,145,.12);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .answer-editor-row input.answer-text {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7eff9;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions :is(#clip-question,#clip-explanation,#clip-note,#clip-ai-event-hint),
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #clip-url {
  border: 1px solid rgba(229,192,231,.47);
  border-radius: 10px;
  background: linear-gradient(118deg,rgba(58,58,94,.57),rgba(32,38,68,.74)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  color: #f9f2fc;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions :is(#clip-question,#clip-explanation,#clip-note,#clip-ai-event-hint):focus,
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #clip-url:focus {
  border-color: rgba(255,190,228,.88);
  box-shadow: 0 0 0 2px rgba(242,112,177,.15),inset 0 1px rgba(255,255,255,.17);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #clip-preview-button {
  border: 1px solid rgba(228,194,234,.49);
  border-radius: 10px;
  background: linear-gradient(125deg,rgba(80,72,114,.61),rgba(40,49,84,.67)) !important;
  color: #f9ecfa;
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 5px 15px rgba(6,6,30,.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-search #clip-preview-button:hover:not(:disabled) {
  background: linear-gradient(125deg,rgba(126,77,131,.74),rgba(64,57,100,.77)) !important;
  border-color: rgba(255,204,234,.85);
}

/* Explanation isn't a second bordered card. Its toggle has one neat,
   properly centered chevron and a full-height hit area. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra {
  margin: 12px 0 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid rgba(228,194,231,.28);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 8px 12px;
  gap: 9px;
  border: 1px solid rgba(219,182,227,.36);
  border-radius: 10px;
  background: linear-gradient(120deg,rgba(84,65,110,.37),rgba(53,48,83,.5));
  color: #e8dcea;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary::-webkit-details-marker { display: none; }
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.7px solid #eecee3;
  border-bottom: 1.7px solid #eecee3;
  transform: rotate(-45deg);
  transition: transform .16s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra[open] > summary::before { transform: rotate(45deg); }
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary:is(:hover,:focus-visible) {
  border-color: rgba(255,194,229,.74);
  background: rgba(126,72,128,.44);
}

/* An empty live-status paragraph reserved ~29px under the submit button. */
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions { padding-bottom: 13px; }
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-ref-submit-footer {
  padding-top: 13px;
  margin-top: 0;
  border-top: 1px solid rgba(226,193,231,.24);
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions #clip-form-status:empty {
  display: none;
  min-height: 0;
  margin: 0;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions #clip-form-status:not(:empty) {
  min-height: 0;
  margin: 8px 0 0;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions #clip-send {
  background: linear-gradient(115deg,#d73370,#f34883) !important;
  border-color: rgba(255,186,221,.64);
  box-shadow: inset 0 1px rgba(255,255,255,.2),0 7px 17px rgba(190,44,109,.18);
}

@media (max-width: 650px) {
  body.cdh-dark[data-view="submit"] .cd-sm-back.round-back { width: 34px; height: 34px; }
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions .cd-ref-submit-footer { padding-top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cdh-dark[data-view="submit"] #clip-form .cd-studio-questions details.cd-ref-extra > summary::before { transition: none; }
}