/* CXE Pre-WorkSpace · dialogue and special-display design · v2
   Loaded after design-plan.css and cxe-preworkspace-polish.css. */
:root { --cxe-question-text: #183660; --cxe-question-blue: #315fea; }
body {
    background:
      radial-gradient(circle at 5% 18%, rgba(93,140,241,.31) 0, transparent 35%),
      radial-gradient(circle at 93% 30%, rgba(53,104,204,.18) 0, transparent 36%),
      linear-gradient(145deg,#d1e1fa 0%,#dae6fc 39%,#c8dafa 100%) fixed !important;
}
body::before { opacity:.5; }

/* Keep full width for the entire analysis/answer stage. */
#result {
    width:100% !important;
    max-width:none !important;
    margin:22px 0 0 !important;
    padding:0 0 36px !important;
    min-width:0;
}
#result .cxe-question-stage-layout {
    display:block;
    width:100%;
    min-width:0;
}
#result .cxe-question-stage-layout:has(#clarification-panel:not(.hidden)) {
    display:grid;
    grid-template-columns:minmax(270px,.76fr) minmax(0,1.9fr);
    gap:22px;
    align-items:start;
}
#result .cxe-question-stage-layout .result-head,
#result .cxe-question-stage-layout .clarification-panel {
    min-width:0;
    margin:0 !important;
    border:1px solid rgba(69,112,228,.17) !important;
    border-radius:23px !important;
    background:linear-gradient(165deg,rgba(255,255,255,.97),rgba(245,249,255,.98)) !important;
    box-shadow:0 22px 48px rgba(30,68,149,.10) !important;
    color:#183660 !important;
}
#result .cxe-question-stage-layout .result-head {
    padding:25px 23px !important;
    position:sticky;
    top:18px;
    max-height:min(82vh,900px);
    overflow:auto;
}
#result .cxe-question-stage-layout .result-head-row {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
}
#result .cxe-question-stage-layout .result-head-row>div:first-child { min-width:0; width:100%; }
#result .cxe-question-stage-layout .result-head h2,
#result .cxe-question-stage-layout #result-title {
    color:#142f5d !important;
    font-size:clamp(21px,2vw,27px) !important;
    font-weight:820 !important;
    line-height:1.22 !important;
    letter-spacing:-.035em !important;
    margin:8px 0 11px !important;
    overflow-wrap:anywhere;
}
#result .cxe-question-stage-layout #result-summary {
    color:#607494 !important;
    font-size:15px !important;
    line-height:1.65 !important;
    margin:0 !important;
    overflow-wrap:anywhere;
}
#result .cxe-question-stage-layout #analysis-meta {
    display:flex;
    flex-wrap:wrap;
    gap:7px !important;
    margin-top:20px !important;
    min-width:0;
}
#result .cxe-question-stage-layout .analysis-chip {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:9px 11px !important;
    color:#50698f !important;
    font-size:13px !important;
    font-weight:600;
    line-height:1.45;
    background:#eff5ff !important;
    border:1px solid #dce7fa !important;
    border-radius:11px !important;
    max-width:100%;
    overflow-wrap:anywhere;
}
#result .cxe-question-stage-layout .analysis-chip strong { color:#1a3979 !important; font-size:13px !important; }
#result .cxe-question-stage-layout .analysis-chip small,
#result .cxe-question-stage-layout .source { color:#6883af !important; font-size:12px !important; }
#result .cxe-question-stage-layout .status {
    padding:8px 12px !important;
    font-size:13px !important;
    font-weight:800 !important;
    border-radius:999px;
}

/* Questions: light cards with clear hierarchy and actual 16px controls. */
#result #clarification-panel {
    padding:26px !important;
}
#result #clarification-panel h3 {
    color:#15315e !important;
    font-size:clamp(23px,2.3vw,30px) !important;
    line-height:1.19 !important;
    margin:0 0 10px !important;
    letter-spacing:-.025em;
}
#result #clarification-panel .clarification-intro {
    color:#657897 !important;
    font-size:15px !important;
    line-height:1.6 !important;
    margin:0 0 22px !important;
}
#result #clarification-panel .clarification-list {
    display:grid;
    grid-template-columns:1fr;
    gap:15px !important;
}
#result #clarification-panel .clarification-item {
    padding:19px 20px 20px !important;
    margin:0 !important;
    border-radius:18px !important;
    border:1px solid #dfE8f8 !important;
    background:linear-gradient(170deg,#fff,#f6faff) !important;
    box-shadow:0 6px 18px rgba(34,79,158,.045) !important;
    color:var(--cxe-question-text) !important;
    min-width:0;
}
#result #clarification-panel .clarification-item.invalid {
    border-color:#dd6982 !important;
    box-shadow:0 0 0 3px #ffdae353 !important;
}
#result #clarification-panel .clarification-number {
    color:#416dd8 !important;
    font-size:12px !important;
    letter-spacing:.105em !important;
    font-weight:800 !important;
}
#result #clarification-panel .clarification-question {
    color:#183a70 !important;
    font-weight:750 !important;
    font-size:17px !important;
    line-height:1.5 !important;
    margin:8px 0 13px !important;
    overflow-wrap:anywhere;
}
#result #clarification-panel .clarification-answer-row {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:10px !important;
    margin:0 !important;
    min-width:0;
}
#result #clarification-panel .clarification-answer,
#result #clarification-panel input.clarification-answer {
    flex:1 1 200px;
    min-width:0;
    min-height:49px;
    background:#fff !important;
    color:#233e69 !important;
    border:1px solid #cedef6 !important;
    border-radius:13px !important;
    padding:11px 13px !important;
    font-size:16px !important;
    box-shadow:none !important;
}
#result #clarification-panel .clarification-answer:focus {
    border-color:#326aff !important;
    outline:3px solid #d8e5ff !important;
}
#result #clarification-panel .auto-answer {
    align-self:stretch;
    min-height:47px;
    padding:10px 15px !important;
    border:1px solid #d9e4f6 !important;
    border-radius:13px !important;
    background:#eef4ff !important;
    color:#31518d !important;
    font-size:14px !important;
    font-weight:700 !important;
    white-space:normal;
}
#result #clarification-panel .auto-answer.active {
    background:#dfeaff !important;
    color:#2052b2 !important;
    border-color:#b8d0ff !important;
}
#result #clarification-panel .clarification-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px !important;
    flex:1 1 100%;
    width:100%;
}
#result #clarification-panel .clarification-radio {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px !important;
    min-height:53px;
    border-radius:13px !important;
    background:#fff !important;
    border:1px solid #d9e4f5 !important;
    color:#243f70 !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s;
}
#result #clarification-panel .clarification-radio:hover {
    background:#f2f7ff !important;
    border-color:#9ab8fa !important;
}
#result #clarification-panel .clarification-radio:has(input:checked) {
    background:#eaf1ff !important;
    border-color:#4776ef !important;
    box-shadow:0 0 0 2px #adc9ff65 !important;
}
#result #clarification-panel .clarification-radio input[type=radio] {
    flex:none;
    width:19px;
    height:19px;
    accent-color:#376dff;
    margin:0;
}
#result #clarification-panel .panel-actions {
    margin-top:24px !important;
    display:flex;
    justify-content:flex-end;
}
#result #clarification-panel #clarification-submit {
    font-size:16px !important;
    padding:14px 22px !important;
    border-radius:13px !important;
    background:linear-gradient(115deg,#315fe6,#5d8aff) !important;
    color:#fff !important;
    box-shadow:0 12px 28px #396bed2f !important;
}

/* Special-displays — standalone component family, starting with radio selection. */
#result .cxe-special-title { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:#406cd8; letter-spacing:.05em; text-transform:uppercase; margin:0 0 8px; }
#result .cxe-special-hint { font-size:15px; line-height:1.5; color:#607aa3; margin:4px 0 13px; }
#result .cxe-special-choices { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#result .cxe-special-choice {
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:96px;
    padding:16px !important;
    background:linear-gradient(145deg,#f8fbff,#edf4ff) !important;
    border:2px solid #dfe9fb !important;
    border-radius:18px !important;
    cursor:pointer;
    transition:border-color .15s, background .15s, box-shadow .15s,transform .15s;
}
#result .cxe-special-choice:hover {
    transform:translateY(-1px);
    border-color:#83a8ff !important;
    background:#eff5ff !important;
}
#result .cxe-special-choice:has(input:checked) {
    background:linear-gradient(145deg,#e8f0ff,#dae8ff) !important;
    border-color:#356cff !important;
    box-shadow:0 0 0 3px #b5ceff7f !important;
}
#result .cxe-special-choice input[type=radio] { position:absolute; left:17px; top:17px; width:20px; height:20px; margin:0; accent-color:#346bff; }
#result .cxe-special-icon {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    background:#deeaff;
    border-radius:15px;
    color:#346bff;
    font-size:25px;
}
#result .cxe-special-choice-copy { display:flex; flex-direction:column; gap:5px; padding-left:0; }
#result .cxe-special-choice-copy strong { display:block; font-size:18px; font-weight:790; color:#193762; }
#result .cxe-special-choice-copy small { color:#617a9b; font-size:13px; font-weight:500; line-height:1.45; }
#result .clarification-item:has(.cxe-special-choices) { padding:23px !important; background:linear-gradient(145deg,#fff,#f1f6ff) !important; }
#result #clarification-panel .cxe-special-choices + .auto-answer { display:none !important; }

@media(max-width:1060px) {
    #result .cxe-question-stage-layout:has(#clarification-panel:not(.hidden)) { grid-template-columns:minmax(240px,.72fr) minmax(0,1.4fr);gap:15px; }
    #result #clarification-panel {padding:20px !important}
}
@media(max-width:830px) {
    #result .cxe-question-stage-layout:has(#clarification-panel:not(.hidden)) {display:grid;grid-template-columns:1fr;gap:15px;}
    #result .cxe-question-stage-layout .result-head { position:static; max-height:none; }
    #result .cxe-question-stage-layout .clarification-panel {width:100%;}
}
@media(max-width:610px) {
    #result #clarification-panel .clarification-options,
    #result .cxe-special-choices { grid-template-columns:1fr; }
    #result .cxe-special-choice { min-height:84px; }
    #result #clarification-panel { padding:17px !important; }
    #result #clarification-panel .clarification-item { padding:15px !important; }
    #result #clarification-panel #clarification-submit { width:100%; }
}
@media(prefers-reduced-motion:reduce) { #result .cxe-special-choice { transition:none; } }