/* ============================================================
   まちづくりAI - スタイルシート
   モバイルファースト (375px〜430px 基準)
   ============================================================ */

/* ----------------------------------------
   CSS カスタムプロパティ（デザイントークン）
---------------------------------------- */
:root {
  --color-primary:      #2196F3;
  --color-primary-dark: #1976D2;
  --color-primary-light:#BBDEFB;
  --color-bg:           #F5F5F5;
  --color-white:        #FFFFFF;
  --color-ai-bubble:    #FFFFFF;
  --color-user-bubble:  #2196F3;
  --color-download:     #4CAF50;
  --color-download-dark:#388E3C;
  --color-reset:        #9E9E9E;
  --color-reset-dark:   #757575;
  --color-text:         #212121;
  --color-text-muted:   #757575;
  --color-border:       #E0E0E0;
  --color-shadow:       rgba(0, 0, 0, 0.08);

  --radius-bubble: 12px;
  --radius-btn:    8px;
  --radius-send:   50%;

  --font-base: 'Noto Sans JP', sans-serif;
  --font-size-base: 14px;
  --font-size-sm:   12px;
  --font-size-lg:   16px;

  --header-height: 50px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
}

/* ----------------------------------------
   リセット & ベーススタイル
---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: var(--font-base);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  font-family: var(--font-base);
  outline: none;
}

/* ----------------------------------------
   1. ヘッダー
---------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-lg);
  /* iPhone ノッチ・Dynamic Island 対応 */
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.app-header__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.04em;
  user-select: none;
}

/* ----------------------------------------
   2. 元画像表示エリア
---------------------------------------- */
.original-image-section {
  background-color: var(--color-white);
  margin: var(--spacing-lg) var(--spacing-lg) 0;
  border-radius: var(--radius-btn);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.original-image-section__wrapper {
  width: 100%;
  line-height: 0; /* img の下の隙間を除去 */
}

.original-image-section__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.original-image-section__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-white);
}

/* ----------------------------------------
   3. チャットエリア
---------------------------------------- */
.chat-section {
  margin: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 8px var(--color-shadow);
  display: flex;
  flex-direction: column;
  /* overflow:hidden だと sticky な input-area が safe-area 外にはみ出したとき
     送信ボタンを切ってしまうため clip に変更。
     clip は hidden と同様に描画を切るが、スクロールコンテナを作らないので
     sticky positioning が正しく機能する。 */
  overflow: clip;
}

/* メッセージ表示エリア */
.chat-section__messages {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  scroll-behavior: smooth;
  /* スクロールバーを細く */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  background-color: #FAFAFA;
}

.chat-section__messages::-webkit-scrollbar {
  width: 4px;
}

.chat-section__messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-section__messages::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 4px;
}

/* ---- チャットメッセージ共通 ---- */
.chat-message {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  max-width: 100%;
  animation: fadeInUp 0.25s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- AIメッセージ（左寄せ） ---- */
.chat-message--ai {
  flex-direction: row;
  justify-content: flex-start;
}

.chat-message--ai .chat-message__bubble {
  background-color: var(--color-ai-bubble);
  color: var(--color-text);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 2px;
  box-shadow: 0 1px 4px var(--color-shadow);
  border: 1px solid var(--color-border);
}

/* ---- ユーザーメッセージ（右寄せ） ---- */
.chat-message--user {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.chat-message--user .chat-message__bubble {
  background-color: var(--color-user-bubble);
  color: var(--color-white);
  border-radius: var(--radius-bubble) var(--radius-bubble) 2px var(--radius-bubble);
  box-shadow: 0 1px 4px rgba(33, 150, 243, 0.25);
}

/* ---- アバター（AIアイコン） ---- */
.chat-message__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

/* ---- バブル本体 ---- */
.chat-message__bubble {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  line-height: 1.6;
  max-width: calc(100% - 48px); /* アバター幅 + gap を除いた最大幅 */
  word-break: break-word;
}

/* ---- 入力エリア ---- */
.chat-section__input-area {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* 上下: 通常padding / 右: safe-area-inset-right でボタン切れ防止 / 左: 通常padding */
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: calc(var(--spacing-md) + env(safe-area-inset-right, 0px));
  /* iPhone ホームバー（safe-area）対応 */
  padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
  position: sticky;
  bottom: 0;
  width: 100%;       /* 100vw 不使用を明示（スクロールバー分のはみ出し防止） */
  box-sizing: border-box;
}

.chat-section__input {
  flex: 1;
  min-width: 0;      /* flex item が縮小しすぎないよう最小幅を明示 */
  height: 44px;
  min-height: 44px; /* Apple HIG タップターゲット最小サイズ */
  padding: 0 var(--spacing-md);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: border-color 0.2s ease;
}

.chat-section__input::placeholder {
  color: var(--color-text-muted);
}

.chat-section__input:focus {
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

/* 送信ボタン（丸型） */
.chat-section__send-btn {
  flex: none;        /* flex アイテムとして伸縮しない */
  flex-shrink: 0;    /* 縮小禁止（明示） */
  width: 44px;
  min-width: 44px;   /* Apple HIG タップターゲット最小幅 */
  height: 44px;
  min-height: 44px; /* Apple HIG タップターゲット最小サイズ */
  border-radius: var(--radius-send);
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4);
}

.chat-section__send-btn:active {
  background-color: var(--color-primary-dark);
  transform: scale(0.93);
}

.chat-section__send-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateX(1px); /* 視覚的中央補正 */
}

/* ---- 入力欄・送信ボタン disabled 状態 ---- */
.chat-section__input:disabled {
  background-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--color-border);
}

.chat-section__send-btn:disabled {
  background-color: var(--color-reset);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ---- タイピングインジケーター（「...」） ---- */
.chat-message__bubble--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  min-width: 52px;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-text-muted);
  animation: typingBounce 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ----------------------------------------
   4. 画像生成結果エリア
---------------------------------------- */
.result-section {
  margin: 0 var(--spacing-lg) var(--spacing-xl);
  background-color: var(--color-white);
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 8px var(--color-shadow);
  overflow: hidden;
}

/* ---- ローディングアニメーション ---- */
.result-section__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
}

.result-section__loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* スピナー */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #E0E0E0;
  border-top: 4px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- 経過時間テキスト ---- */
#elapsed-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-height: 18px;
}

/* ---- 生成画像 ---- */
.result-section__image-wrapper {
  width: 100%;
  line-height: 0;
}

.result-section__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- アクションボタンエリア ---- */
.result-section__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

/* ---- 共通ボタン ---- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  min-height: 44px; /* Apple HIG タップターゲット最小サイズ */
  border-radius: var(--radius-btn);
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.btn:active {
  filter: brightness(0.9);
  transform: scale(0.98);
}

/* ダウンロードボタン（緑） */
.btn--download {
  background-color: var(--color-download);
  color: var(--color-white);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);
}

/* やり直しボタン（グレー） */
.btn--reset {
  background-color: var(--color-reset);
  color: var(--color-white);
  box-shadow: 0 2px 6px rgba(158, 158, 158, 0.3);
}

/* ----------------------------------------
   5. タブUI（元画像 / 生成結果 切り替え）
---------------------------------------- */
.tab-container {
  display: flex;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  margin: var(--spacing-lg) var(--spacing-lg) 0;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--color-shadow);
}

/* タブボタン共通 */
.tab-btn {
  flex: 1;
  padding: 10px 8px;
  min-height: 44px; /* Apple HIG タップターゲット最小サイズ */
  text-align: center;
  font-size: var(--font-size-base);
  font-family: var(--font-base);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 400;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* アクティブタブ */
.tab-btn--active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

/* 画像エリア（タブ切り替え対象） */
.tab-image-section {
  margin: 0 var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--color-shadow);
  line-height: 0;
}

.tab-image-section img {
  width: 100%;
  height: auto;
  display: block;
}

.tab-image-section__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-white);
  line-height: 1.4;
}

/* ----------------------------------------
   6. チャット内エラー「やり直し」ボタン
---------------------------------------- */
.chat-retry-btn {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 10px 14px;
  min-height: 44px; /* Apple HIG タップターゲット最小サイズ */
  background-color: var(--color-reset);
  color: var(--color-white);
  border: none;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-family: var(--font-base);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease;
}

.chat-retry-btn:active {
  filter: brightness(0.88);
}

/* ----------------------------------------
   レスポンシブ：タブレット・PC対応
   （スマホ最適化が基準だが崩れない程度に）
---------------------------------------- */
@media (min-width: 480px) {
  .original-image-section,
  .chat-section,
  .result-section,
  .tab-container,
  .tab-image-section {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .original-image-section {
    margin-top: var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .original-image-section,
  .chat-section,
  .result-section,
  .tab-container,
  .tab-image-section {
    max-width: 600px;
  }
}