/* AI家庭教師ミライ - メインスタイル */
* { box-sizing: border-box; }

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ===== アニメーション ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } }
@keyframes star-pop { 0% { transform: scale(0) rotate(0deg); } 60% { transform: scale(1.3) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes confetti { 0% { transform: translateY(-100%) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

.fade-in { animation: fadeIn 0.4s ease-out; }
.float-anim { animation: float 3s ease-in-out infinite; }
.pulse-btn { animation: pulse-glow 2s infinite; }

/* ===== ナビゲーション ===== */
.nav-item {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nav-item:hover { background: rgba(99, 102, 241, 0.1); }
.nav-item.active { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }

/* ===== カード ===== */
.subject-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.subject-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.subject-card.selected { border-color: #4f46e5; background: #f0f0ff; }

/* ===== チャット ===== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  max-height: 600px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.message-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.5;
  animation: fadeIn 0.3s ease-out;
  white-space: pre-wrap;
  word-break: break-word;
}
.message-bubble.user {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.message-bubble.assistant {
  background: white;
  color: #1f2937;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.message-bubble.typing {
  background: white;
  padding: 16px 20px;
}

.typing-indicator { display: flex; gap: 4px; align-items: center; }
.typing-dot {
  width: 8px; height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ===== スケジュール ===== */
.schedule-item {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  border-left: 4px solid;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.schedule-item:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.schedule-item.completed { opacity: 0.6; border-color: #10b981 !important; }
.schedule-item.skipped { opacity: 0.5; border-color: #ef4444 !important; }

/* ===== ポイント・バッジ ===== */
.badge-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 2px solid #f59e0b;
  animation: star-pop 0.5s ease-out;
}

.points-badge {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1.1rem;
}

/* ===== streak表示 ===== */
.streak-fire {
  font-size: 2rem;
  animation: float 2s ease-in-out infinite;
}

/* ===== ボタン ===== */
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

/* ===== 入力フォーム ===== */
.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.2s;
  outline: none;
}
.input-field:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}
.modal-content {
  background: white;
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

/* ===== 罪悪感デザイン（サボった場合） ===== */
.guilt-overlay {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.guilt-emoji { font-size: 4rem; animation: shake 0.5s ease-in-out; }
.sad-progress-bar {
  height: 8px;
  background: #374151;
  border-radius: 4px;
  overflow: hidden;
}
.sad-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border-radius: 4px;
  transition: width 1s ease;
}

/* ===== 達成感デザイン ===== */
.achievement-banner {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  color: white;
  animation: star-pop 0.5s ease-out;
}

/* ===== カレンダー ===== */
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  position: relative;
}
.calendar-day:hover { background: #f3f4f6; }
.calendar-day.today { background: #4f46e5; color: white; font-weight: bold; }
.calendar-day.has-schedule::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: #10b981;
  border-radius: 50%;
}
.calendar-day.selected { outline: 2px solid #4f46e5; }

/* ===== 写真アップロード ===== */
.photo-upload-area {
  border: 3px dashed #d1d5db;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.photo-upload-area:hover, .photo-upload-area.drag-over {
  border-color: #4f46e5;
  background: #f0f0ff;
}

/* ===== ランキング ===== */
.rank-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.rank-2 { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); }
.rank-3 { background: linear-gradient(135deg, #fed7aa, #fdba74); }

/* ===== レスポンシブ ===== */
@media (max-width: 640px) {
  .chat-container { height: calc(100vh - 180px); }
  .message-bubble { max-width: 90%; }
  .modal-content { padding: 16px; }
}

/* ===== ページトランジション ===== */
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.3s ease-out; }

/* ===== 進捗バー ===== */
.progress-bar {
  height: 10px;
  background: #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s ease;
}

/* ===== タブ ===== */
.tab-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  background: transparent;
  color: #6b7280;
}
.tab-btn.active { background: #4f46e5; color: white; }

/* ===== 通知 ===== */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 14px 20px;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
  max-width: 300px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.toast.success { background: linear-gradient(135deg, #10b981, #059669); }
.toast.error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast.info { background: linear-gradient(135deg, #4f46e5, #7c3aed); }