/**
 * PowerReader - Analysis Page Styles (Phase 3)
 *
 * Separated from main.css to keep files under 800 lines.
 * Uses CSS custom properties defined in main.css :root.
 */

/* ==============================================
   Analysis Page Layout
   ============================================== */
.analyze-select,
.analyze-blocked,
.analyze-page {
  text-align: center;
}

.analyze-select__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.analyze-article-info {
  text-align: left;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: 12px;
}

.analyze-start-btn {
  width: 100%;
  padding: var(--spacing-md);
  font-size: var(--text-h3);
}

/* ==============================================
   Analysis Status (inference in progress)
   ============================================== */
.analyze-status {
  text-align: center;
  padding: var(--spacing-xl);
}

.analyze-status__message {
  font-size: var(--text-body);
  margin-bottom: var(--spacing-md);
}

.analyze-status__progress {
  width: 60%;
  height: 4px;
  margin: 0 auto var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.analyze-status__progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 2px;
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { left: -50%; }
  100% { left: 100%; }
}

.analyze-status__elapsed {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* ==============================================
   Analysis Result Preview
   ============================================== */
.analyze-result {
  text-align: left;
}

.analyze-result__mode {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.analyze-result__reasoning {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
}

.analyze-result__reasoning h4 {
  font-size: var(--text-caption);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.analyze-result__reasoning p {
  line-height: 1.8;
}

.analyze-result__phrases {
  margin-bottom: var(--spacing-lg);
}

.analyze-result__phrases h4 {
  font-size: var(--text-caption);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.analyze-result__phrases-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.phrase-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--text-small);
  background-color: #E8F0FE;
  color: var(--color-primary);
  border-radius: 12px;
}

.analyze-result__actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.analyze-result__actions .btn {
  flex: 1;
}

.analyze-success {
  text-align: center;
  padding: var(--spacing-xl);
}

.analyze-success p {
  font-size: var(--text-h3);
  margin-bottom: var(--spacing-lg);
  color: var(--color-controversy-low);
}

/* ==============================================
   Blocked State (cooldown / deadline / model)
   ============================================== */
.analyze-blocked__item {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: 8px;
  text-align: left;
}

.analyze-blocked__item--deadline { background-color: #FFF3CD; }
.analyze-blocked__item--cooldown { background-color: #F8D7DA; }
.analyze-blocked__item--model { background-color: #E8F0FE; }
.analyze-blocked__item--auth { background-color: #E8F0FE; }

.cooldown-timer {
  font-size: var(--text-caption);
  color: var(--color-controversy-very-high);
  margin-top: var(--spacing-xs);
}

/* ==============================================
   Deadline Indicator
   ============================================== */
.deadline-indicator {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-small);
  border-radius: 4px;
  margin-top: var(--spacing-sm);
}

.deadline-indicator--active {
  background-color: var(--color-controversy-low);
  color: #FFFFFF;
}

.deadline-indicator--warning {
  background-color: var(--color-controversy-moderate);
  color: #212121;
}

.deadline-indicator--expired {
  background-color: var(--color-controversy-very-high);
  color: #FFFFFF;
}