/* === quotes.css === Auto-split from style.css === */

/* ===================== QUOTE MODULE ===================== */
.quotes-view { padding: 20px 20px 100px; display: flex; flex-direction: column; gap: 14px; }
.quotes-header { margin-bottom: 2px; }
.quotes-title { font-size: 1.3rem; font-weight: 900; color: var(--text-dark); margin-bottom: 4px; }
.quotes-sub { font-size: 0.82rem; color: var(--text-light); font-weight: 500; }

/* Sub-tabs */
.quote-subtabs { display: flex; gap: 6px; }
.quote-subtab {
  flex: 1; padding: 9px; border: 1.5px solid var(--cream-border);
  border-radius: var(--radius-pill); background: white;
  font-family: var(--font); font-size: 0.8rem; font-weight: 700;
  color: var(--text-mid); cursor: pointer; transition: var(--transition-fast);
}
.quote-subtab.active { background: var(--croc-deep); border-color: var(--croc-deep); color: white; }

/* Add form */
.quote-add-card {
  background: white; border-radius: var(--radius-lg);
  padding: 16px; border: 1px solid var(--cream-border); box-shadow: var(--shadow-sm);
}
.quote-form-label { font-size: 0.78rem; font-weight: 800; color: var(--text-mid); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.quote-textarea {
  width: 100%; border: 1.5px solid var(--cream-border); border-radius: var(--radius-md);
  padding: 12px 14px; font-family: var(--font); font-size: 0.92rem; font-weight: 500;
  color: var(--text-dark); background: var(--croc-foam); resize: none; line-height: 1.7;
  transition: var(--transition-fast); margin-bottom: 8px;
}
.quote-textarea:focus { outline: none; border-color: var(--croc-light); box-shadow: 0 0 0 3px rgba(122,191,140,0.18); }
.quote-meta-row { display: flex; gap: 8px; margin-bottom: 10px; }
.quote-meta-input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 12px; border: 1.5px solid var(--cream-border);
  border-radius: var(--radius-md); font-family: var(--font); font-size: 0.82rem;
  color: var(--text-dark); background: white; transition: var(--transition-fast);
}
.quote-meta-input:focus { outline: none; border-color: var(--croc-light); }
.quote-submit-btn {
  width: 100%; padding: 12px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--croc-mid), var(--croc-deep));
  color: white; font-family: var(--font); font-size: 0.9rem; font-weight: 800;
  cursor: pointer; transition: var(--transition);
}
.quote-submit-btn:disabled { opacity: 0.6; }
.quote-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Search */
.quote-search-row { padding: 0; }
.quote-search-input {
  width: 100%; box-sizing: border-box; padding: 11px 16px; border: 1.5px solid var(--cream-border);
  border-radius: var(--radius-pill); font-family: var(--font); font-size: 0.88rem;
  background: white; color: var(--text-dark); box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.quote-search-input:focus { outline: none; border-color: var(--croc-light); box-shadow: 0 0 0 3px rgba(122,191,140,0.18); }

/* Quote card */
.quote-card {
  position: relative; background: white; border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--cream-border); box-shadow: var(--shadow-sm);
  animation: fadeSlideUp 0.3s ease;
  overflow: hidden; text-overflow: ellipsis;
}
/* Enhanced AI Card Styles */
.lib-card { padding: 18px 20px; border-width: 2px; }
.lib-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.lib-card-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-badge { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.energy-badge { background: white; border: 1.5px solid rgba(0,0,0,0.08); box-shadow: 0 2px 6px rgba(0,0,0,0.04); color: var(--text-dark); }
.cat-badge { background: rgba(0,0,0,0.05); color: var(--text-mid); }
.lib-emoji { font-size: 1.8rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

/* Category Themes (Pastel Morandi) */
.cat-faith { background: linear-gradient(145deg, #fffafa, #ffeaea); border-color: #ffcccc; }
.cat-faith .cat-badge { background: #ffeaea; color: #d04040; }
.cat-growth { background: linear-gradient(145deg, #fffcf5, #ffedd5); border-color: #ffd6a5; }
.cat-growth .cat-badge { background: #fdcba5; color: #c06500; }
.cat-love { background: linear-gradient(145deg, #fdf6fb, #fae8f4); border-color: #f7d2ed; }
.cat-love .cat-badge { background: #fdf6fb; color: #b7579f; }
.cat-wisdom { background: linear-gradient(145deg, #f6fdf9, #e6f7ec); border-color: #c9ebd8; }
.cat-wisdom .cat-badge { background: #e6f7ec; color: #3b8b5e; }
.cat-default { background: linear-gradient(145deg, #fafafa, #f0f0f0); border-color: #e2e2e2; }
.quote-card-content { font-size: 0.95rem; font-weight: 600; color: var(--text-dark); line-height: 1.7; margin-bottom: 6px; overflow-wrap: anywhere; word-break: break-all; }
.quote-card-source { font-size: 0.75rem; color: var(--text-light); font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; word-break: break-all; }
.quote-card-footer { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.quote-cat-pill {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--croc-mist); color: var(--croc-deep);
  font-size: 0.7rem; font-weight: 800;
}
.quote-tag { font-size: 0.7rem; font-weight: 600; color: var(--text-light); }
.quote-ai-badge {
  font-size: 0.65rem; font-weight: 800; color: #8b5cf6;
  background: #f3e8ff; padding: 2px 7px; border-radius: var(--radius-pill);
}
.quote-date { font-size: 0.65rem; color: var(--text-light); margin-left: auto; }
.quote-summary { font-size: 0.78rem; color: var(--text-mid); font-weight: 500; margin-top: 8px; line-height: 1.55; font-style: italic; overflow-wrap: anywhere; word-break: break-word; }
.quote-delete-btn {
  position: absolute; top: 10px; right: 10px;
  border: none; background: none; font-size: 0.8rem; opacity: 0.3;
  cursor: pointer; transition: var(--transition-fast); border-radius: 4px; padding: 2px 4px;
}
.quote-delete-btn:hover { opacity: 1; background: rgba(220,80,80,0.1); }
.quote-mini-card { background: var(--croc-foam); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 6px; overflow: hidden; }
.quote-loading, .quote-empty { font-size: 0.85rem; color: var(--text-light); text-align: center; padding: 20px; font-weight: 500; }

/* Calendar */
.quote-panel { padding-top: 4px; }
.qcal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qcal-label { font-size: 0.95rem; font-weight: 800; color: var(--text-dark); }
.qcal-nav-btn { width: 34px; height: 34px; border: 1.5px solid var(--cream-border); border-radius: 50%; background: white; font-size: 1rem; cursor: pointer; color: var(--text-mid); transition: var(--transition-fast); }
.qcal-nav-btn:hover { background: var(--croc-mist); }
.qcal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-bottom: 12px; }
.qcal-header { font-size: 0.6rem; font-weight: 800; color: var(--text-light); text-align: center; padding: 4px 0; }
.qcal-cell {
  aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer;
  background: white; border: 1px solid var(--cream-border);
  transition: var(--transition-fast);
}
.qcal-cell.empty { background: transparent; border: none; cursor: default; }
.qcal-cell.has-quote { background: var(--croc-foam); border-color: var(--croc-light); }
.qcal-cell.today { border-color: var(--croc-deep); border-width: 2px; }
.qcal-cell:not(.empty):hover { background: var(--croc-mist); }
.qcal-day { font-size: 0.72rem; font-weight: 700; color: var(--text-dark); line-height: 1; }
.qcal-dot { font-size: 0.6rem; font-weight: 800; color: var(--croc-deep); margin-top: 2px; }
.qcal-day-quotes { margin-top: 4px; }

/* Analytics */
.qanalytics-card { background: white; border-radius: var(--radius-lg); padding: 16px; border: 1px solid var(--cream-border); box-shadow: var(--shadow-sm); }
.qanalytics-total { font-size: 0.85rem; font-weight: 700; color: var(--text-mid); margin-bottom: 14px; }
.qanalytics-section-title { font-size: 0.78rem; font-weight: 800; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.qanalytics-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qanalytics-label { font-size: 0.78rem; font-weight: 700; color: var(--text-dark); width: 80px; flex-shrink: 0; }
.qanalytics-bar-bg { flex: 1; height: 8px; background: var(--croc-mist); border-radius: 4px; overflow: hidden; }
.qanalytics-bar-fill { height: 100%; background: linear-gradient(90deg, var(--croc-light), var(--croc-deep)); border-radius: 4px; transition: width 0.6s ease; }
.qanalytics-num { font-size: 0.72rem; font-weight: 800; color: var(--text-light); width: 22px; text-align: right; }
.qtag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.qtag-cloud-item { color: var(--croc-deep); font-weight: 700; }
.qtag-cloud-item small { font-size: 0.62em; color: var(--text-light); margin-left: 2px; }

/* Daily review card (今日頁) */
.daily-quote-card {
  margin: 16px 20px 0; background: white; border-radius: var(--radius-lg);
  padding: 16px; border: 1.5px solid var(--croc-mist); box-shadow: var(--shadow-sm);
  animation: fadeSlideUp 0.4s ease;
  overflow: hidden;
}
.daily-quote-label { font-size: 0.7rem; font-weight: 800; color: var(--croc-deep); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.daily-quote-text { font-size: 0.95rem; font-weight: 600; color: var(--text-dark); line-height: 1.7; margin-bottom: 6px; overflow-wrap: anywhere; word-break: break-all; }
.daily-quote-source { font-size: 0.75rem; color: var(--text-light); font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; word-break: break-all; }
.daily-quote-read-btn { padding: 6px 12px; border: 1.5px solid var(--croc-mist); border-radius: var(--radius-pill); background: white; font-family: var(--font); font-size: 0.75rem; font-weight: 700; color: var(--croc-deep); cursor: pointer; transition: var(--transition-fast); }
.daily-quote-read-btn:hover { background: var(--croc-mist); }