/* ============================================
   R2C2モデルBot 逐語録ビューア — style.css
   ============================================ */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
  min-height: 100vh;
}

/* ============================================
   アップロード画面
   ============================================ */
.upload-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px 16px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
}

.upload-container {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

/* ロゴ */
.upload-logo {
  margin-bottom: 16px;
}

.logo-img {
  width: 120px;
  height: auto;
}

/* タイトル */
.upload-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 12px;
}

/* 説明文 */
.upload-description {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 32px;
  line-height: 1.7;
}

/* ---------- ドロップエリア ---------- */
.drop-area {
  border: 3px dashed #a5d6a7;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  padding: 48px 24px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}

.drop-area:hover,
.drop-area:focus-visible {
  border-color: #2e7d32;
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

.drop-area.drag-over {
  border-color: #2e7d32;
  background: #e8f5e9;
  transform: scale(1.02);
}

.drop-area-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.drop-area-main {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2e7d32;
  margin-bottom: 8px;
}

.drop-area-sub {
  font-size: 0.85rem;
  color: #888;
}

/* エラーメッセージ */
.upload-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: #ffebee;
  color: #c62828;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 使い方案内 */
.upload-guide {
  margin-top: 32px;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 20px 24px;
}

.upload-guide h3 {
  font-size: 1rem;
  color: #2e7d32;
  margin-bottom: 8px;
}

.upload-guide p {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.7;
}

/* ============================================
   チャット表示画面
   ============================================ */
.chat-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- ヘッダー ---------- */
.chat-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #2e7d32, #388e3c);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chat-header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #2e7d32;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-header-title {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
}

.chat-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.header-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ---------- フェーズナビゲーション ---------- */
.phase-nav {
  position: sticky;
  top: 60px; /* ヘッダーの高さ分 */
  z-index: 90;
  background: #e0e7d5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.phase-nav-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ナビスクロールバー（webkit） */
.phase-nav-inner::-webkit-scrollbar {
  height: 4px;
}

.phase-nav-inner::-webkit-scrollbar-thumb {
  background: #a5d6a7;
  border-radius: 2px;
}

.phase-nav-btn {
  flex-shrink: 0;
  background: #fff;
  color: #2e7d32;
  border: 1.5px solid #a5d6a7;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.phase-nav-btn:hover {
  background: #e8f5e9;
  border-color: #2e7d32;
}

.phase-nav-btn.active {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}

/* ---------- チャットエリア ---------- */
.chat-area {
  flex: 1;
  background: #7494c0;
  padding: 16px 0;
}

/* フェーズセクション */
.phase-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px;
}

/* フェーズ見出しバー */
.phase-heading {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: center;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 24px auto 16px;
  max-width: 480px;
  line-height: 1.5;
}

.phase-section:first-child .phase-heading {
  margin-top: 8px;
}

/* ---------- メッセージ行 ---------- */
.message-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 8px;
}

/* 研修医（左） */
.message-row.resident {
  flex-direction: row;
  padding-right: 48px;
}

/* AI（右） */
.message-row.ai {
  flex-direction: row-reverse;
  padding-left: 48px;
}

/* アバター */
.msg-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.65rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.msg-avatar.ai {
  background: #2e7d32;
  font-size: 0.8rem;
}

.msg-avatar.resident {
  background: #5c6bc0;
  font-size: 0.6rem;
}

/* ---------- 吹き出し ---------- */
.msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.7;
  position: relative;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.msg-bubble p {
  margin-bottom: 8px;
}

.msg-bubble p:last-child {
  margin-bottom: 0;
}

.msg-bubble ul {
  margin: 6px 0 8px 20px;
  padding: 0;
}

.msg-bubble ul li {
  margin-bottom: 4px;
}

/* AI吹き出し */
.msg-bubble.ai {
  background: #8de47b;
  color: #1b1b1b;
  border-top-right-radius: 4px;
}

/* 研修医吹き出し */
.msg-bubble.resident {
  background: #ffffff;
  color: #1b1b1b;
  border-top-left-radius: 4px;
}

/* ---------- まとめカード ---------- */
.summary-card {
  max-width: 720px;
  margin: 20px auto;
  padding: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.summary-card-header {
  background: linear-gradient(135deg, #2e7d32, #43a047);
  color: #fff;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.summary-card-body {
  padding: 20px;
}

.summary-section {
  margin-bottom: 20px;
}

.summary-section:last-child {
  margin-bottom: 0;
}

.summary-label {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.summary-label.strength {
  background: #43a047;
}

.summary-label.goal {
  background: #1e88e5;
}

.summary-label.action {
  background: #f57c00;
}

.summary-label.note {
  background: #78909c;
}

.summary-section-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #333;
  padding-left: 4px;
}

.summary-section-content ul {
  margin: 4px 0 0 18px;
  padding: 0;
}

.summary-section-content ul li {
  margin-bottom: 4px;
}

/* ---------- フッター ---------- */
.chat-footer {
  background: #e0e7d5;
  text-align: center;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: #666;
}

/* ============================================
   レスポンシブ（600px以下）
   ============================================ */
@media (max-width: 600px) {
  .upload-title {
    font-size: 1.3rem;
  }

  .drop-area {
    padding: 36px 16px;
  }

  .drop-area-icon {
    font-size: 2.4rem;
  }

  .drop-area-main {
    font-size: 1rem;
  }

  .upload-guide {
    padding: 16px 18px;
  }

  /* ヘッダー */
  .chat-header-inner {
    padding: 8px 12px;
    gap: 8px;
  }

  .chat-header-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }

  .chat-header-title {
    font-size: 0.95rem;
  }

  .header-btn {
    padding: 5px 10px;
    font-size: 0.72rem;
  }

  /* ナビ */
  .phase-nav-inner {
    padding: 6px 8px;
    gap: 6px;
  }

  .phase-nav-btn {
    padding: 5px 12px;
    font-size: 0.72rem;
  }

  /* アバター */
  .msg-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.55rem;
  }

  .msg-avatar.ai {
    font-size: 0.7rem;
  }

  /* メッセージ */
  .message-row.resident {
    padding-right: 24px;
  }

  .message-row.ai {
    padding-left: 24px;
  }

  .msg-bubble {
    padding: 8px 12px;
    font-size: 0.88rem;
  }

  /* まとめカード */
  .summary-card-body {
    padding: 14px;
  }

  .summary-card-header {
    font-size: 0.92rem;
    padding: 12px 16px;
  }

  /* フェーズ見出し */
  .phase-heading {
    font-size: 0.78rem;
    padding: 7px 16px;
  }
}

/* ============================================
   印刷 / PDF対応
   ============================================ */
@media print {
  /* アップロード画面非表示 */
  .upload-screen {
    display: none !important;
  }

  /* sticky解除 */
  .chat-header {
    position: static;
    box-shadow: none;
  }

  /* ナビゲーション非表示 */
  .phase-nav {
    display: none !important;
  }

  /* ツールバー非表示 */
  .chat-header-actions {
    display: none !important;
  }

  /* 背景白 */
  body {
    background: #fff;
  }

  .chat-area {
    background: #fff;
    padding: 0;
  }

  /* 吹き出し */
  .msg-bubble.ai {
    background: #8de47b;
    border: 1px solid #aaa;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .msg-bubble.resident {
    background: #fff;
    border: 1px solid #aaa;
  }

  /* フェーズ見出しバー */
  .phase-heading {
    background: #555;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* まとめカード色維持 */
  .summary-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .summary-card-header,
  .summary-label {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* アバター色維持 */
  .msg-avatar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ページ区切り */
  .phase-section {
    page-break-before: auto;
    break-before: auto;
  }

  /* チャットエリア幅 */
  .phase-section {
    max-width: 100%;
  }

  /* フッター */
  .chat-footer {
    background: none;
    border-top: 1px solid #ccc;
  }
}