/* 综合题弹窗专用样式
 * 说明：
 * - 视觉风格与题库答题弹窗保持一致，依赖 bank.css 中的 .portal-answer-modal 基础样式。
 * - 这里只定义综合题内部布局和子题列表相关样式，避免影响其他模块。
 */

/* 综合题弹窗整体布局：复用 .portal-answer-modal 作为外层，增加标识类 */
.portal-comprehensive-modal .portal-answer-modal__panel {
    max-width: 980px;
}

.portal-comprehensive {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 顶部概览信息（难度、总题数、总分等） */
.portal-comprehensive__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: #9ca3af;
}

.portal-comprehensive__meta-item {
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.8);
}

/* 材料区域 + 子题列表：上下布局 */
.portal-comprehensive__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 材料（阅读文本） */
.portal-comprehensive__material {
    padding: 10px 12px;
    border-radius: 10px;
    background:
        radial-gradient(circle at top left, rgba(56,189,248,0.16) 0, transparent 45%),
        radial-gradient(circle at bottom right, rgba(94,234,212,0.16) 0, transparent 50%),
        rgba(15,23,42,0.96);
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

.portal-comprehensive__material-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
}

.portal-comprehensive__material-content {
    font-size: 13px;
    line-height: 1.7;
    color: #e5e7eb;
    max-height: 260px;
    overflow: auto;
}

/* 子题列表整体容器 */
.portal-comprehensive__subs {
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-comprehensive__subs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #e5e7eb;
}

.portal-comprehensive__subs-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.portal-comprehensive__subs-hint {
    margin: 0;
    font-size: 12px;
    color: #9ca3af;
}

.portal-comprehensive__subs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

/* 综合题弹窗滚动条美化（与题库 / 听力风格一致） */
.portal-comprehensive__material-content,
.portal-comprehensive__subs-list {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(56,189,248,0.8) rgba(15,23,42,0.9);
}

.portal-comprehensive__material-content::-webkit-scrollbar,
.portal-comprehensive__subs-list::-webkit-scrollbar {
    width: 8px;
}

.portal-comprehensive__material-content::-webkit-scrollbar-track,
.portal-comprehensive__subs-list::-webkit-scrollbar-track {
    background: rgba(15,23,42,0.95);
    border-radius: 9999px;
}

.portal-comprehensive__material-content::-webkit-scrollbar-thumb,
.portal-comprehensive__subs-list::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(56,189,248,0.95), rgba(45,212,191,0.9));
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9);
}

.portal-comprehensive__material-content::-webkit-scrollbar-thumb:hover,
.portal-comprehensive__subs-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(56,189,248,1), rgba(45,212,191,1));
}

/* 单个子题卡片 */
.portal-comprehensive-sub {
    border-radius: 10px;
    padding: 8px 10px;
    background:
        radial-gradient(circle at top left, rgba(15,23,42,0.98) 0, rgba(15,23,42,0.94) 70%);
    border: 1px solid rgba(30, 64, 175, 0.7);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

.portal-comprehensive-sub__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.portal-comprehensive-sub__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portal-comprehensive-sub__label {
    font-size: 12px;
    color: #9ca3af;
}

.portal-comprehensive-sub__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
}

.portal-comprehensive-sub__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.portal-comprehensive-sub__type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(56, 189, 248, 0.8);
    color: #bfdbfe;
}

.portal-comprehensive-sub__difficulty {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #e5e7eb;
}

.portal-comprehensive-sub__explain-btn {
    display: none;
    font-size: 11px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    background: transparent;
    color: #e5e7eb;
    padding: 3px 10px;
    cursor: pointer;
}

.portal-comprehensive-sub__explain-btn.is-visible {
    display: inline-flex;
}

/* 子题答题区通用样式 */
.portal-comprehensive-sub__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #e5e7eb;
}

.portal-comprehensive-sub__stem {
    font-size: 13px;
    line-height: 1.6;
}

.portal-comprehensive-sub__options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-comprehensive-sub__option {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(30, 64, 175, 0.6);
    background: rgba(15,23,42,0.7);
}

.portal-comprehensive-sub__option.is-correct {
    border-color: rgba(34, 197, 94, 0.9);
    background: rgba(22, 163, 74, 0.18);
}

.portal-comprehensive-sub__option.is-wrong {
    border-color: rgba(239, 68, 68, 0.95);
    background: rgba(220, 38, 38, 0.18);
}

.portal-comprehensive-sub__option.is-selected {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.8);
}

.portal-comprehensive-sub__feedback {
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(15,23,42,0.8);
    border: 1px solid transparent;
}

.portal-comprehensive-sub__feedback--success {
    border-color: rgba(34, 197, 94, 0.9);
    color: #bbf7d0;
}

.portal-comprehensive-sub__feedback--error {
    border-color: rgba(239, 68, 68, 0.95);
    color: #fecaca;
}

.portal-comprehensive-sub__feedback--warning {
    border-color: rgba(234, 179, 8, 0.9);
    color: #fef3c7;
}

/* 填空题输入控件，复用 bank.css 的视觉风格 */
.portal-comprehensive-sub .portal-fillblank-slot {
    display: inline-flex;
    align-items: baseline;
    border-bottom: 1px solid rgba(148, 163, 184, 0.9);
    padding: 0 2px 1px;
    margin: 0 3px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 2px;
    box-sizing: border-box;
    max-width: 20ch;
}

.portal-comprehensive-sub .portal-fillblank-slot__input {
    border: none;
    outline: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.portal-comprehensive-sub .portal-fillblank-slot--correct {
    border-bottom-color: rgba(34, 197, 94, 0.95);
    background: rgba(22, 163, 74, 0.16);
}

.portal-comprehensive-sub .portal-fillblank-slot--wrong {
    border-bottom-color: rgba(239, 68, 68, 0.95);
    background: rgba(220, 38, 38, 0.12);
}

/* 底部总反馈区域 */
.portal-comprehensive__summary {
    margin-top: 8px;
    font-size: 12px;
    color: #e5e7eb;
}

/* 移动端适配：在小屏幕下优化综合题子题列表布局，避免头部内容横向挤压 */
@media (max-width: 640px) {
    /* 弹窗整体在手机上尽量占满宽度，左右留少量间距 */
    .portal-comprehensive-modal .portal-answer-modal__panel {
        max-width: 100%;
        width: 100%;
        margin: 0 8px;
    }

    /* 子题列表标题和提示文案上下堆叠，避免一行太挤 */
    .portal-comprehensive__subs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .portal-comprehensive__subs-hint {
        font-size: 11px;
    }

    /* 单个子题卡片在手机上稍微压缩内边距 */
    .portal-comprehensive-sub {
        padding: 8px;
    }

    /* 子题头部在手机端只保留题目标题，
       隐藏“第 N 题”序号、题型、难度和“答案详解”按钮，
       避免信息过多导致横向挤压。 */
    .portal-comprehensive-sub__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .portal-comprehensive-sub__label,
    .portal-comprehensive-sub__tags,
    .portal-comprehensive-sub__explain-btn {
        display: none;
    }

    .portal-comprehensive-sub__title {
        font-size: 14px;
        line-height: 1.5;
        word-break: break-word; /* 长标题在小屏正常换行，而不是一列一个字 */
    }

    /* 子题列表在手机上略缩短高度，减少竖向滚动压力 */
    .portal-comprehensive__subs-list {
        max-height: 260px;
    }
}