/* ==========================================
   Intent Confirmation 컴포넌트 스타일 (미니멀리즘)
   오토파일럿 모드에서 모드/난이도 판단 확인 UI
   ========================================== */

/* Intent 확인 메시지 */
.intent-confirmation {
  margin-bottom: 1rem;
}

/* [PERMANENT FIX] Autopilot UI 'Card on Card' 현상 해결
   부모 버블의 배경, 테두리, 그림자, 여백을 모두 제거하여 내부 카드만 보이도록 함 */
.message-bubble.ai.intent-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Intent Confirmation 말풍선 (브랜드 primary 색상 틴트) */
.intent-bubble {
  background: #1e1b2e !important;
  /* 투명하지 않은 진한 남색 배경 */
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  /* [PERMANENT FIX] 말풍선 꼬리 제거 (AI 버블 상속 방지) */
}

.intent-preview-content {
  padding: 20px;
  color: white !important;
  /* 모든 텍스트 흰색 */
  /* 미니멀 라운드 디자인: 그라디언트 배경 */
  background: linear-gradient(145deg, #1e1b2e 0%, #2d2a40 100%);
  border-radius: 20px;
  border: 1px solid rgba(139, 156, 247, 0.45) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.intent-preview-content *:not(button),
.intent-preview-content span,
.intent-preview-content div,
.intent-preview-content p {
  color: white !important;
  /* 버튼 제외한 모든 하위 요소 텍스트 흰색 강제 */
}

/* Intent Confirmation 헤더 텍스트 */
.intent-header-minimal,
.intent-header-minimal *,
.intent-title {
  color: white !important;
}

/* 헤더 - 데모와 일치하도록 중앙 정렬 */
.intent-header-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 400;
}

.intent-header-minimal .intent-icon {
  font-size: 14px;
}

/* 정보 행 (모드, 난이도, 신뢰도) - 데모와 일치 */
.intent-info-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 버튼 기본 스타일 완전 리셋 */
.intent-info-row button,
.intent-info-row button.intent-badge,
.intent-info-row button.mode-badge,
.intent-info-row button.difficulty-badge {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  /* 동일한 그라디언트 배경 */
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  /* 버튼 텍스트는 검은색 */
  color: #1a1a2e !important;
  border: none !important;
  box-shadow: none !important;
}

/* 통일된 칩 스타일 - 데모 미니멀 라운드 디자인 */
.intent-badge,
.mode-badge,
.difficulty-badge,
.intent-confidence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-fast, 0.2s ease);
  box-sizing: border-box;
  color: white !important;
}

/* 모든 칩 내부 텍스트 - 모드/난이도는 검은색 */
.mode-badge *,
.difficulty-badge * {
  color: #1a1a2e !important;
}

/* 신뢰도 배지 텍스트는 흰색 */
.intent-confidence-badge,
.intent-confidence-badge * {
  color: white !important;
}

/* 모드 배지 - 그라디언트 + 검은색 텍스트 */
.mode-badge.mode-passage,
.mode-badge.mode-grammar,
.mode-badge.mode-sentence,
.mode-badge.mode-vocabulary {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #1a1a2e !important;
  border: none !important;
  box-shadow: none !important;
}

/* 난이도 배지 - 모드와 동일한 활성화 스타일 (그라디언트 + 검은색 텍스트) */
.difficulty-badge.difficulty-elementary,
.difficulty-badge.difficulty-intermediate,
.difficulty-badge.difficulty-advanced {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #1a1a2e !important;
  border: none !important;
  box-shadow: none !important;
}

/* 신뢰도 배지 - 반투명 배경 */
.intent-confidence-badge {
  background: rgba(255, 255, 255, 0.08);
  color: white !important;
  border: none;
  box-shadow: none;
  cursor: default;
}

.intent-confidence-badge.low-confidence {
  background: rgba(245, 158, 11, 0.15);
  color: white !important;
  border: none;
  box-shadow: none;
}

/* 클릭 가능한 칩 스타일 - 데모와 일치 */
.intent-badge-clickable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.intent-badge-clickable:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.intent-badge-clickable:active {
  transform: translateY(0);
  opacity: 1;
}

/* 선택 목록 스타일 */
.intent-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-card, rgb(44 47 72 / 80%));
  border-radius: var(--border-radius-small, 10px);
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  /* backdrop-filter 제거 */
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from {
    opacity: 0%;
    transform: translateY(-5px);
  }

  to {
    opacity: 100%;
    transform: translateY(0);
  }
}

.intent-selection-item {
  padding: 8px 14px;
  border-radius: var(--border-radius-small, 10px);
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  white-space: nowrap;
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intent-selection-item:hover {
  background: rgb(255 255 255 / 10%);
  border-color: var(--primary-color, #8b9cf7);
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-hover-light, 6px 6px 12px rgb(0 0 0 / 40%)),
    var(--shadow-hover-dark, -6px -6px 12px rgb(255 255 255 / 15%));
}

.intent-selection-item.active {
  background: var(--gradient-button, linear-gradient(135deg, #6366f1, #9d7bf0));
  border-color: var(--primary-color-dark, #6366f1);
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%)),
    0 2px 8px rgb(139 156 247 / 20%);
}

/* Intent 결과 메시지 (확인 후 표시) */
.intent-result {
  margin-bottom: 1rem;
}

/* Intent Result 버블 스타일 - 선택자 특이성 높임 */
.intent-result .message-bubble.ai.intent-bubble,
.intent-result .intent-bubble {
  background: #1e1b2e !important;
  /* 브랜드 primary 색상 틴트 제거하고 단색으로 */
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  color: white !important;
  /* 모든 텍스트 흰색 */
}

/* Intent Result 내부 모든 텍스트 요소 흰색 강제 */
.intent-result .intent-header-minimal,
.intent-result .intent-header-minimal *,
.intent-result .intent-title,
.intent-result .intent-icon,
.intent-result .intent-preview-content,
.intent-result .intent-preview-content *,
.intent-result .intent-info-row,
.intent-result .intent-info-row *,
.intent-result span,
.intent-result div,
.intent-result button {
  color: white !important;
  /* 모든 텍스트 흰색 강제 */
}

/* Intent Result 내부 버튼 크기 통일 및 텍스트 색상 강제 */
.intent-result .intent-badge,
.intent-result .mode-badge,
.intent-result .difficulty-badge,
.intent-result .intent-confidence-badge {
  width: 100px !important;
  /* 고정 너비로 크기 통일 */
  height: 32px !important;
  /* 고정 높이로 크기 통일 */
  min-width: 100px !important;
  /* 최소 너비 강제 */
  max-width: 100px !important;
  /* 최대 너비 강제 */
  color: white !important;
  /* 버튼 텍스트 흰색 강제 */
}

.intent-result .intent-badge *,
.intent-result .mode-badge *,
.intent-result .difficulty-badge *,
.intent-result .intent-confidence-badge * {
  color: white !important;
  /* 버튼 내부 모든 요소 흰색 강제 */
}

.intent-result .intent-icon {
  color: #10b981;
  /* 확인 아이콘 색상 */
}

/* 확인 섹션 컴팩트화 */
.intent-confirmation-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, rgb(255 255 255 / 10%));
}

.intent-question-compact {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: white !important;
  flex: 1;
}

.intent-buttons-compact {
  display: flex;
  gap: 8px;
}

/* 확인 버튼 컴팩트 */
.intent-confirm-btn-compact {
  padding: 8px 16px;
  border: none;
  border-radius: var(--border-radius-small, 10px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  white-space: nowrap;
}

.intent-confirm-btn-compact.intent-confirm-yes {
  background: linear-gradient(135deg, #8b9cf7, #a78bfa);
  color: white;
  padding: 10px 28px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(139 156 247 / 30%);
}

.intent-confirm-btn-compact.intent-confirm-yes:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(139 156 247 / 40%);
}

.intent-confirm-btn-compact.intent-confirm-no {
  background: rgb(255 255 255 / 10%);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
}

.intent-confirm-btn-compact.intent-confirm-no:hover:not(:disabled) {
  background: rgb(255 255 255 / 15%);
  border-color: var(--border-light, rgb(255 255 255 / 20%));
}

.intent-confirm-btn-compact:active {
  transform: translateY(0);
}

.intent-confirm-btn-compact:disabled {
  opacity: 60%;
  cursor: not-allowed;
  transform: none;
}

/* 모바일 반응형 */
@media (width <=768px) {
  .intent-preview-content {
    padding: 12px;
  }

  .intent-header-minimal {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .intent-info-row {
    gap: 6px;
    margin-bottom: 12px;
  }

  .intent-badge {
    padding: 5px 10px;
    font-size: 12px;
  }

  .intent-confidence-badge {
    padding: 5px 10px;
    font-size: 11px;
  }

  .intent-confirmation-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 10px;
  }

  .intent-question-compact {
    text-align: center;
    font-size: 12px;
  }

  .intent-buttons-compact {
    width: 100%;
    gap: 8px;
  }

  .intent-confirm-btn-compact {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (width <=480px) {
  .intent-preview-content {
    padding: 10px;
  }

  .intent-header-minimal {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .intent-info-row {
    gap: 4px;
    margin-bottom: 10px;
  }

  .intent-badge {
    padding: 4px 8px;
    font-size: 11px;
  }

  .intent-confidence-badge {
    padding: 4px 8px;
    font-size: 10px;
  }

  .intent-confirmation-compact {
    gap: 8px;
    padding-top: 8px;
  }

  .intent-question-compact {
    font-size: 11px;
  }

  .intent-confirm-btn-compact {
    padding: 8px 12px;
    font-size: 12px;
  }
}