@layer business {
/* ========================================
   Question UI 样式 - 紧凑卡片式（引导性优化版）
   位置：替换底部输入框
   目标：一眼看出哪个能点、点完会怎样
   ======================================== */

/* accent = 当前基调强调色（记事本=蜂蜜黄） */
.question-input-container {
  --q-accent: var(--color-warning);
  --q-accent-soft: var(--color-warning-soft);
  max-width: var(--max-content-width);
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

/* ========== 标签页导航（多题，保留 tab 切换） ========== */
.question-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) 0;
  border-bottom: 1px solid var(--ruled-line-color);
  overflow-x: auto;
}

.question-tab {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.question-tab:hover {
  background: var(--q-accent-soft);
}

.question-tab.active {
  color: var(--q-accent);
  border-bottom-color: var(--q-accent);
}

.question-tab.answered::after {
  content: '✓';
  margin-left: var(--space-2);
  color: var(--color-success);
}

/* ========== 意图头部条 ========== */
.question-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--q-accent-soft);
  border-bottom: 1px solid var(--ruled-line-color);
}

.question-head-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--q-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}

.question-head-body { flex: 1; min-width: 0; }

.question-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--q-accent);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.question-eyebrow-text { display: inline-flex; align-items: center; gap: 5px; }

.question-multi-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
}

.question-text {
  font-size: var(--font-size-md);
  color: var(--text-main);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

/* ========== 选项列表（卡片式） ========== */
.question-block { margin: 0; }

.question-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

/* 单个选项卡片：明确可点 */
.question-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-input);
  border: 1.5px solid var(--border-color-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  text-align: left;
  width: 100%;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast),
              transform var(--duration-fast), background var(--duration-fast);
}

.question-option:hover {
  border-color: var(--q-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.question-option:hover .option-go {
  opacity: 1;
  transform: none;
}

.question-option.selected {
  border-color: var(--q-accent);
  background: var(--q-accent-soft);
}

/* 去掉原生控件（兼容占位） */
.question-option input[type="radio"],
.question-option input[type="checkbox"] { display: none; }

/* 选择指示符：单选=圆，多选=方 */
.option-mark {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 2px solid var(--border-color-strong);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.68rem;
  transition: all var(--duration-fast);
}
.question-option[data-t="single"] .option-mark { border-radius: var(--radius-circle); }
.question-option[data-t="multi"]  .option-mark { border-radius: var(--radius-sm); }
.option-mark i { opacity: 0; transform: scale(0.5); transition: all var(--duration-fast); }
.question-option.selected .option-mark { border-color: var(--q-accent); background: var(--q-accent); }
.question-option.selected .option-mark i { opacity: 1; transform: scale(1); }
/* 单选选中用实心圆点 */
.question-option[data-t="single"].selected .option-mark { background: #fff; border-width: 5px; }

.option-label {
  flex: 1;
  font-weight: 500;
  color: var(--text-main);
  font-size: var(--font-size-md);
  line-height: var(--line-height-xs);
}

/* hover 时浮现的「发送 →」（单选无预览） */
.option-go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-sm);
  color: var(--q-accent);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--duration-fast);
}

/* ========== 自定义输入 ========== */
.question-option-custom-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.question-option.question-option-custom {
  border-style: dashed;
  color: var(--text-muted);
}
.question-option.question-option-custom .option-mark {
  border: none;
  color: var(--text-muted);
}
.question-option.question-option-custom .option-mark i { opacity: 1; transform: none; }
.question-option.question-option-custom .option-label { color: var(--text-muted); }

.custom-input-inline {
  display: none;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
}

.custom-input {
  flex: 1;
  padding: var(--space-3);
  border: 1.5px solid var(--q-accent);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: var(--font-size-md);
}

.custom-input:focus-visible {
  outline: none;
  border-color: var(--q-accent);
  box-shadow: 0 0 0 2px var(--q-accent-soft);
}

/* ========== 操作按钮 ========== */
.question-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--ruled-line-color);
}

.question-hint {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.question-hint b { color: var(--q-accent); font-weight: 700; }

/* 提交按钮用 accent 强调 */
.btn-question-next,
.btn-question-submit {
  background: var(--q-accent);
  border-color: var(--q-accent);
  color: #fff;
}
.btn-question-next:hover,
.btn-question-submit:hover {
  background: var(--q-accent);
  border-color: var(--q-accent);
  filter: brightness(0.95);
}

/* ========== 内联预览（accordion） ========== */
.question-option-acc {
  display: flex;
  flex-direction: column;
}

/* accordion header = 选项卡片，右侧加「预览」胶囊 */
.question-option-acc-btn {
  /* 复用 .question-option 基础样式 */
}

/* 「预览」胶囊按钮 */
.option-pv-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-default);
  background: var(--bg-card);
  transition: all var(--duration-fast);
}
.option-pv-toggle:hover { color: var(--q-accent); border-color: var(--q-accent); }
.option-pv-toggle i { transition: transform var(--duration-normal); line-height: 1; }
.question-option-acc-btn.expanded .option-pv-toggle i { transform: rotate(180deg); }
.question-option-acc-btn.selected .option-pv-toggle { color: var(--q-accent); border-color: var(--q-accent); }

.acc-preview-body {
  display: none;
  margin: -1px var(--space-5) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-input);
  border: 1px dashed var(--border-color-default);
  border-radius: var(--radius-md);
  max-height: 40vh;
  overflow: auto;
  animation: acc-fadein var(--duration-normal) var(--ease-out);
}
.acc-preview-body.open { display: block; }

@keyframes acc-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* preview 内容类型 */
.acc-preview-body .preview-markdown {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-main);
  margin: 0;
  line-height: 1.5;
}
.acc-preview-body .preview-markdown pre,
.acc-preview-body .preview-markdown code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: var(--bg-card);
  border-radius: 3px;
  padding: 2px 4px;
}
.acc-preview-body .preview-markdown pre {
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
}

.acc-preview-body .preview-table-wrapper { overflow-x: auto; }
.acc-preview-body .preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.76rem;
}
.acc-preview-body .preview-table th,
.acc-preview-body .preview-table td {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-color-default);
  text-align: left;
  white-space: normal;
  word-break: break-word;
}
.acc-preview-body .preview-table th {
  background: var(--bg-card);
  font-weight: 600;
  color: var(--text-main);
}
.acc-preview-body .preview-table td { color: var(--text-muted); }
.acc-preview-body .preview-table-caption {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
  font-style: italic;
}

/* ========== 旧视图（已替换，隐藏） ========== */
.question-preview-panel,
.question-preview-view,
.btn-preview-back { display: none !important; }

/* ========== 响应式 ========== */
@media (max-width: 640px) {
  .question-head { padding: var(--space-3) var(--space-4); }
  .question-options { padding: var(--space-3) var(--space-4); }
  .question-option { padding: var(--space-3) var(--space-4); min-height: 40px; }
  .question-tab { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
}

}