/**
 * LangPont v2 UI Styles
 * Task 216-C: Apple調デザイン実装
 * Created: 2025-11-20
 * Updated: 2025-11-21 (Apple-inspired refinement)
 */

/* ========================================
   CSS Custom Properties (カラーパレット)
   ======================================== */
:root {
  /* Primary Colors (メインカラー) */
  --lp-blue-main:   #1F6FEB;  /* 推奨確定枠・主要ボタン */
  --lp-blue-accent: #2563EB;  /* 翻訳ボタンなど */
  --lp-blue-soft:   #BFDBFE;  /* 推奨暫定枠・背景 */

  /* Background & Surface (背景・カード) */
  --lp-bg-main:     #F8FAFC;  /* ページ背景（わずかに青みのあるグレー） */
  --lp-bg-card:     #FFFFFF;  /* カード背景 */
  --lp-bg-hover:    #F1F5F9;  /* ホバー時背景 */

  /* Borders (枠線) */
  --lp-border-soft: #E2E8F0;  /* 枠線・仕切り */

  /* Text (テキスト) */
  --lp-text-main:   #1E293B;  /* メインテキスト */
  --lp-text-muted:  #475569;  /* 補助テキスト */

  /* State Colors (状態色 - 控えめに使用) */
  --lp-success:     #10B981;
  --lp-warning:     #F59E0B;
  --lp-error:       #EF4444;

  /* Spacing (余白) - Apple調の広めの余白 */
  --lp-spacing-xs:  0.25rem;  /* 4px */
  --lp-spacing-sm:  0.5rem;   /* 8px */
  --lp-spacing-md:  1rem;     /* 16px */
  --lp-spacing-lg:  1.5rem;   /* 24px */
  --lp-spacing-xl:  2rem;     /* 32px */

  /* Layout (レイアウト) - Task 216-G */
  --lp-main-max-width: 1200px;  /* メインコンテンツ最大幅 */

  /* Shadows (影 - 非常に薄く) */
  --lp-shadow-sm:   0 8px 24px rgba(15, 23, 42, 0.04);
  --lp-shadow-md:   0 12px 32px rgba(15, 23, 42, 0.06);
  --lp-shadow-lg:   0 16px 48px rgba(15, 23, 42, 0.08);
  --lp-shadow-btn:  0 6px 18px rgba(37, 99, 235, 0.25);
}

/* ========================================
   Box-sizing Reset (Task216-C)
   ======================================== */
/* Task216-C: v2 全体を border-box に統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ========================================
   Base Styles (ベーススタイル)
   ======================================== */
body {
  background-color: var(--lp-bg-main);
  color: var(--lp-text-main);
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   2-Column Layout (2カラムレイアウト)
   Task244-A: 75%/25%比率、右カラムsticky化
   ======================================== */
.lp-container {
  position: relative; /* Task216-Sub1: トグルボタンの絶対配置用 */
  display: flex;
  gap: 24px;
  max-width: 1440px;  /* Task216-H: DeepLと同じ幅に設定 */
  margin: 0 auto;
  padding: 5px 32px;  /* 上下5px、左右32px */
  align-items: flex-start;  /* Task216-H: サイドカラムの高さでメインカラムを引っ張らない */
}

.lp-main-column {
  /* Task244-A: 右カラムOpen時 75%、Close時 100% */
  flex: 3;  /* 3 / (3+1) = 75% */
  min-width: 0; /* Prevent flex overflow */
  transition: flex 0.3s ease;
}

/* Task244-A: サイドカラムがcollapsedの時、メインカラムを全幅に */
.lp-container--side-collapsed .lp-main-column {
  flex: 1 !important;
  max-width: 100% !important;
}

.lp-side-column {
  /* Task244-A: 右カラム 25% (flex: 1 / (3+1) = 25%) */
  flex: 1;
  max-width: 25%;  /* Task244-A: 最大25%に制限 */
  min-width: 280px;  /* Task244-A: 最小幅を確保 */
  flex-shrink: 0;
  /* Task244-A: Sticky positioning - ビューポート上端固定 */
  position: sticky;
  top: 80px;  /* ヘッダー(72px) + 余白 */
  height: calc(100vh - 100px);  /* ビューポート高さ - ヘッダー - 余白 */
  /* Task244-A-Verify: 右カラム全体はスクロール不可（履歴カード内のみスクロール） */
  overflow-y: hidden;
  /* Task216-E: 右側スライドイン/アウト */
  transition: transform 0.3s ease, opacity 0.3s ease, max-width 0.3s ease;
  /* Task244-A': 縦flex構造 - 履歴を可変、QA/設定を固定表示 */
  display: flex;
  flex-direction: column;
}

/* Task216-E: PC幅では右端に軽い影を付与（開いているとき） */
@media (min-width: 1024px) {
  .lp-side-column {
    box-shadow: -4px 0 12px rgba(15, 23, 42, 0.06);
  }
}

/* Task216-G: 旧 --hidden クラスは削除（--collapsed に統一） */

/* Task216-E: サイドパネルトグルボタン */
/* Task216-G: サイドパネルトグルボタンスタイル削除（ヘッダーには配置しない）
.lp-toggle-side-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
  background-color: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.lp-toggle-side-btn:hover {
  background-color: var(--lp-bg-hover);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
*/

/* Task216-H: 右カラムトグルボタン（Grammarly風 角丸四角ボタン） */
/* containerを基準に、右カラムの左端に配置 */
.lp-container {
  position: relative; /* トグルボタンの配置基準 */
}

.lp-side-toggle-btn {
  /* Task216-H: AWS版ベース + v2調整 */
  position: fixed;
  top: 80px;  /* Task216-I: header(72px) + container padding-top(5px) + panel__header padding-top(3px) = lp-stow-btnと同じ高さ */
  right: -5px;  /* 5px右側にずらして配置（ホバー時の移動を考慮） */
  background: var(--lp-gradient-purple, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  color: white;
  border: none;
  width: 30px;  /* Task216-I: スクロールバーと干渉しないサイズ */
  height: 37px;  /* Task216-I: スクロールバーと干渉しないサイズ */
  padding: 0;  /* width/heightで明示的にサイズ指定 */
  border-radius: 4px 0 0 4px; /* 左側のみ角丸、lp-stow-btnと同じ4px */
  cursor: pointer;
  z-index: 1001;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex;  /* 中央揃え用 */
  align-items: center;  /* 縦方向中央揃え */
  justify-content: center;  /* 横方向中央揃え */
  transition: all 0.3s ease;
}

.lp-side-toggle-btn:hover {
  /* AWS版と同じ */
  background: var(--lp-gradient-purple-hover, linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%));
  transform: translateX(-2px);  /* 左に少し移動 */
}

/* Task216-H: サイドパネル表示時は固定トグルボタンを非表示 */
.lp-side-toggle-btn[data-state="open"] {
  display: none;
}

/* Task216-H: Side Panel Header内のStowボタン */
.lp-stow-btn {
  background: var(--lp-gradient-purple, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  color: white;
  border: none;
  width: 30px;  /* Task216-I: lp-side-toggle-btnと同じサイズ */
  height: 37px;  /* Task216-I: lp-side-toggle-btnと同じサイズ */
  padding: 0;  /* width/heightで明示的にサイズ指定 */
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex;  /* 中央揃え用 */
  align-items: center;  /* 縦方向中央揃え */
  justify-content: center;  /* 横方向中央揃え */
  transition: all 0.3s ease;
}

.lp-stow-btn:hover {
  background: var(--lp-gradient-purple-hover, linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%));
  transform: translateX(-2px);  /* lp-side-toggle-btnと同じホバー効果 */
}

/* Task216-H: Side Panel Headerはホバー時の動きを無効化 */
#side-panel-header .lp-panel__header {
  cursor: default;  /* カーソルをデフォルトに */
}

#side-panel-header .lp-panel__header:hover {
  background-color: transparent;  /* ホバー時の背景色変化を無効化 */
}

/* Task244-A: 右カラムが閉じているときのスライドアウト */
.lp-side-column--collapsed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  /* Task244-A: Flexboxのスペース占有を完全解除 */
  width: 0;
  min-width: 0;
  max-width: 0;
  height: 0;
  flex: 0;
  overflow: hidden;
  position: absolute;  /* Task244-A: sticky解除してレイアウトから除外 */
}

/* Task244-A: Responsive - 1024px未満はモバイル
   Task277: 右カラム非表示を解除し、下に積む形式に変更
   ※このセクションはTask277のメディアクエリ（ファイル末尾）で上書きされます */
@media (max-width: 1023px) {
  .lp-container {
    flex-direction: column;
    padding: 16px;
  }

  /* Task277: 以下のルールはファイル末尾のTask277セクションで上書き */
  /* .lp-side-column { display: none !important; } → display: flex !important に変更 */

  /* Task244-A: モバイルではメイン100% */
  .lp-main-column {
    flex: 1 !important;
    max-width: 100% !important;
  }

  /* Task277: トグルボタンはスマホでも非表示を維持 */
  .lp-side-toggle-btn {
    display: none !important;
  }
}

/* ========================================
   Translation Pair Selection Bar (翻訳ペア選択バー) - Apple調デザイン
   ======================================== */
/* Task 216-H: メインカラム内部に移設したため、独立レイアウト解除 */
.lp-translate-pair-row {
  margin: 0 0 1px 0; /* 下部のみ余白（入力カードとの間隔） */
  padding: 0; /* メインカラムの余白に統合 */
}

/* 詳細設定カード専用スタイル（ネストされた.lp-card） */
.lp-card .lp-card.lp-mt-md {
  margin-top: 8px; /* 上部余白8px（ユーザー要求：上下margin 8px） */
  padding: 0 5px;  /* Task216-D: 上下0px、左右5px */
}

.lp-pair-bar {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  border-radius: 10px;
  box-shadow: var(--lp-shadow-sm);
}

.lp-pair-bar__label {
  font-size: 20px;  /* Task244-D' 修正: 20px */
  font-weight: 500;
  color: var(--lp-text-main); /* 黒色に変更 */
  letter-spacing: -0.01em;
}

.lp-pair-bar__select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--lp-border-soft);
  border-radius: 6px;
  font-size: 20px;  /* Task244-D' Layout修正: 20px */
  background-color: var(--lp-bg-card);
  color: var(--lp-text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.lp-pair-bar__select:hover {
  border-color: var(--lp-border-hover, #CBD5E1);
}

.lp-pair-bar__select:focus {
  outline: none;
  border-color: var(--lp-blue-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.lp-pair-bar__arrow {
  font-size: 20px;
  color: var(--lp-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, transform 0.05s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.lp-pair-bar__arrow:hover {
  color: var(--lp-blue-accent);
  background-color: var(--lp-bg-hover);
}

.lp-pair-bar__arrow:active {
  transform: scale(0.95);
}

/* ========================================
   Cards (カード) - Task216-E: 余白・角丸・影の調整
   ======================================== */
.lp-card {
  background-color: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  border-radius: 10px; /* Task216-E: 12px → 10px に引き締め */
  padding: 5px 16px;  /* 上下5px、左右16px */
  margin-bottom: 8px; /* 下部余白8px */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); /* Task216-E: やや存在感のある影 */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-card:hover {
  box-shadow: var(--lp-shadow-md);
}

/* Task244-D: カードヘッダー - タイトルと要約の配置 */
.lp-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px; /* Task244-D: 5px → 8px（ヘッダーと本文の間に余裕） */
}

.lp-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lp-text-main);
  margin: 0;
}

.lp-card__actions {
  display: flex;
  gap: var(--lp-spacing-sm);
  align-items: center;
  flex-shrink: 0;  /* ヘッダー内で縮小されないようにする */
}

/* Task 216-B HF: 翻訳カード番号バッジ */
/* Task244-D': 丸囲み数字（①②③）のみ表示、タイトルテキストは非表示 */
.result-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--lp-blue-main);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 16px;  /* Task244-D' 修正: 丸全体を下に下げる（8px追加） */
}

/* Task244-D' 3.1.2: ヘッダー内タイトルテキストを非表示（①②③のみ残す） */
.lp-card__header .lp-i18n[data-label-key^="translation_"] {
  display: none;
}

/* Task244-D': 番号+本文+コピーの同一行レイアウト */
.lp-translation-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lp-translation-row .result-number {
  flex-shrink: 0;
  margin-top: 6px; /* Task244-D': 青丸位置調整（10px→6px） */
}

.lp-translation-row .result-text {
  flex: 1;
  min-width: 0; /* flexbox内での長いテキストの折り返しを許可 */
}

.lp-translation-row .copy-btn {
  flex-shrink: 0;
  margin-top: 2px; /* テキストベースラインとの視覚的調整 */
}

/* ========================================
   Translation Result Cards (翻訳結果カード) - Task216-E調整
   ======================================== */
.lp-result-card {
  position: relative; /* Task216-E: コピーボタンのabsolute配置用 */
  background-color: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  border-radius: 10px;
  /* Task244-D' Layout修正: 左右パディング調整（左5px、右10px） */
  padding: 12px 10px 8px 5px;
  /* Task244-D: カード間マージンを調整（詰まり感と分離感のバランス） */
  margin-bottom: 10px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

.lp-result-card:hover {
  box-shadow: var(--lp-shadow-md);
  transform: translateY(-2px);
}

/* 推奨ハイライト: 暫定（薄青・点滅） */
.lp-result-card--recommended-temp {
  border-color: var(--lp-blue-soft);
  box-shadow: 0 0 0 2px var(--lp-blue-soft);
  animation: lp-pulse 1.5s ease-in-out infinite;
}

/* 推奨ハイライト: 確定（濃青・固定） */
.lp-result-card--recommended-final {
  border-color: var(--lp-blue-main);
  box-shadow: 0 0 0 2px var(--lp-blue-main), 0 4px 12px rgba(31, 111, 235, 0.15);
}

/* ユーザー選択（緑枠） */
.lp-result-card--user-selected {
  border-color: var(--lp-success);
  box-shadow: 0 0 0 2px var(--lp-success);
}

/* Task216-E/G: 翻訳カード内部レイアウト調整 */
/* Task244-D: カード内セクション間余白調整 */
.lp-result-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Task244-D: 6px → 8px（段階感を出す） */
}

.lp-translation-section {
  margin-bottom: 0; /* Task216-E: 無駄なマージン削除 */
  /* Task244-D' 修正: 上下左右パディング調整 */
  padding: 5px 10px 5px 10px;  /* 上5px 右10px 下5px 左10px */
}

/* Task244-D': 翻訳ラベル - 主役の見出し */
/* CTO必須修正: !important撤廃 - 親セレクタで詳細度を上げて競合解決 */
.lp-result-card .result-label.lp-translation-label {
  font-size: 13px;               /* !important削除 */
  font-weight: 600;
  color: var(--lp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 38px;             /* コピーボタン高さと揃える */
}

/* Task244-D': 逆翻訳ラベル - 明確に弱い補足見出し */
/* CTO必須修正: !important撤廃 - 親セレクタで詳細度を上げて競合解決 */
.lp-result-card .result-label.lp-reverse-label {
  font-size: 12px;               /* !important削除、翻訳ラベルより1px小さく */
  font-weight: 400;              /* 細く */
  color: var(--lp-text-tertiary, #CBD5E1);  /* slate-300 - より淡く */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 38px;
}

/* Task244-D' 3.2: 翻訳本文 - カード内で最も視認性が高い（主役） */
/* CTO必須修正: !important撤廃 - 親セレクタで詳細度を上げて競合解決 */
.lp-result-card .result-text.lp-translation-text {
  font-size: 22px;             /* 22px維持（元のサイズ） */
  line-height: 1.7;            /* 読みやすい行間 */
  color: var(--lp-text-main);
  margin: 0;
  padding: 0;                  /* Task244-D' 修正: padding削除 */
  /* background削除: 背景グレー撤去 */
}

/* Task244-D' 3.2: 逆翻訳 - 翻訳本文より「明確に一段弱い」見え方 */
/* CTO必須修正: !important撤廃 - 親セレクタで詳細度を上げて競合解決 */
.lp-result-card .result-text.lp-reverse-text {
  font-size: 18px;             /* Task244-D' Layout修正: 18px */
  line-height: 1.5;            /* やや詰めた行間 */
  color: var(--lp-text-secondary, #94A3B8);  /* slate-400 - 本文より明確に淡い */
  margin: 0;
  padding: 0;                  /* Task244-D' 修正: padding削除 */
  /* background削除: 背景グレー撤去 */
}

/* Pulse animation for tentative recommendation */
@keyframes lp-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.6);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 1.0);
  }
}

/* Badge for recommendation */
.lp-result-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--lp-blue-main);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--lp-spacing-sm);
}

.lp-result-card__badge--temp {
  background-color: var(--lp-blue-soft);
  color: var(--lp-blue-main);
}

/* ========================================
   Collapsible Panels (折りたたみパネル) - Apple調デザイン
   ======================================== */
.lp-panel {
  background-color: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--lp-shadow-sm);
  transition: box-shadow 0.2s ease;
  /* Task244-A': デフォルトは固定サイズ（flex: 0 0 auto） */
  flex: 0 0 auto;
}

.lp-panel:hover {
  box-shadow: var(--lp-shadow-md);
}

/* Task244-A': 履歴パネルのみflex:1で残り領域を取得、内部スクロール */
#history-panel {
  flex: 1 1 auto;
  min-height: 0;  /* flexbox内でのスクロール有効化に必須 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Task244-A': 履歴パネル折りたたみ時はflex:0でヘッダーのみ表示 */
#history-panel.lp-panel--collapsed {
  flex: 0 0 auto;  /* 折りたたみ時は固定サイズ（ヘッダーのみ） */
  overflow-y: visible;  /* 折りたたみ時はスクロール不要 */
}

/* Task244-A': 履歴パネルのコンテンツ部分もflex:1でスクロール領域確保 */
#history-panel .lp-panel__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.lp-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 5px;  /* Task216-D: 上下3px、左右5px（カードと幅を合わせる） */
  margin: 0 -5px;  /* Task216-D: 負のmarginでカードの左右paddingを相殺 */
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  border-radius: 10px; /* Task216-D: カードの角丸と一致 */
}

.lp-panel__header:hover {
  background-color: var(--lp-bg-hover); /* Task216-D: ホバー時の背景色（角丸内に収まる） */
}

.lp-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-text-main);
  margin: 0;
  padding-left: 5px;  /* Task216-D: 左寄りすぎを調整 */
  letter-spacing: -0.01em;
}

.lp-panel__toggle {
  font-size: 20px;
  color: var(--lp-text-muted);
  padding-right: 5px;  /* Task216-D: 右寄りすぎを調整 */
  transition: transform 0.2s ease, color 0.15s ease;
}

.lp-panel__header:hover .lp-panel__toggle {
  color: var(--lp-text-main);
}

.lp-panel--collapsed .lp-panel__toggle {
  transform: rotate(-90deg);
}

.lp-panel__content {
  padding: 7px 18px 18px 18px;  /* Task216-H: 上側paddingを7pxに変更 */
  border-top: 1px solid var(--lp-border-soft);
  /* Task244-A: max-height/overflow-y削除 - カード内スクロール撤去 */
  /* 右カラム全体がスクロールするため、個別パネルのスクロールは不要 */
  line-height: 1.6;
}

.lp-panel--collapsed .lp-panel__content {
  display: none;
}

/* Task216-H: Advanced settings indicator */
.lp-advanced-indicator {
  display: inline-block;  /* Task216-H: .lp-hiddenで正しく制御されるよう明示 */
  margin-left: 20px;  /* タイトルとの間隔 20px */
  font-size: 14px;
  color: var(--lp-text-disabled, #9ca3af);  /* グレー色 */
}

.lp-advanced-indicator::before {
  content: '✔︎';
}

/* Task216-I: 履歴カードスタイル（CSSクラス化） */
.lp-history-item {
  padding: 5px 8px;  /* Task216-I: 上下5px、左右8px */
  border: 1px solid var(--lp-border-soft);
  border-radius: 4px;
  background: var(--lp-bg-subtle, #fafafa);
  cursor: pointer;
  margin-bottom: 0;  /* Task216-I: 下マージン削除 */
}

.lp-history-item:hover {
  background: var(--lp-bg-hover);
}

.lp-history-item__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;  /* Task216-I: 8px → 4px */
}

.lp-history-item__lang {
  font-size: 12px;
  color: var(--lp-text-muted);
}

.lp-history-item__time {
  font-size: 12px;
  color: var(--lp-text-disabled, #999);
}

.lp-history-item__text {
  font-size: 13px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

/* 履歴リストコンテナ */
#v2-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;  /* Task216-I: カード間の間隔 */
  /* Task244-A': 履歴パネルがflex:1で残り領域を取得するため、固定max-heightは不要 */
  /* max-height: 60vh は削除 - 親パネルのflex制御に委譲 */
  overflow-y: auto;  /* スクロール可能（OSデフォルトに従う） */
}

/* ========================================
   Bottom Detail Area (下段詳細エリア) - Apple調デザイン
   ======================================== */
/* Task216-H: 詳細分析エリア（シンプル化） */
.lp-detail-area {
  max-width: 1440px;  /* コンテナと同じ幅 */
  margin: 24px auto 0;  /* Task244-A: 下マージンはEnd Spacerに委譲 */
  padding: 0 32px;  /* 左右32px（コンテナと同じ） */
}

/* Task244-A: End Spacer - 終端余白（160-240px） */
.lp-end-spacer {
  height: 200px;  /* 仕様: 160-240pxの中間値 */
  width: 100%;
  background: transparent;
  /* フッター代替：表示要素なし */
}

.lp-detail-area .lp-card {
  max-width: 1376px;  /* カードの最大幅 */
  margin: 0 auto;  /* 中央寄せ */
}

/* 詳細分析カードのコンテンツエリア */
.lp-card__content {
  padding: 20px 24px;
  /* Task244-A: max-height/overflow-y削除 - カード内スクロール撤去 */
  /* ページ全体スクロールに統一 */
  line-height: 1.7;
  font-size: 15px;
}

/* ========================================
   Buttons (ボタン) - Apple調デザイン
   ======================================== */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px; /* pill型 */
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.lp-btn:active {
  transform: scale(0.99);
}

/* Task244-D' 修正: 翻訳/リセットボタンのフォントサイズ18px */
.lp-btn--primary {
  background-color: var(--lp-blue-accent);
  color: white;
  box-shadow: var(--lp-shadow-btn);
  font-size: 18px;
}

.lp-btn--primary:hover {
  background-color: var(--lp-blue-main);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}

.lp-btn--secondary {
  background-color: var(--lp-bg-card);
  color: var(--lp-text-main);
  border: 1px solid var(--lp-border-soft);
  font-size: 18px;  /* Task244-D' 修正: 18px */
}

.lp-btn--secondary:hover {
  background-color: var(--lp-bg-hover);
}

.lp-btn--ghost {
  background-color: transparent;
  color: var(--lp-text-main);
}

.lp-btn--ghost:hover {
  background-color: var(--lp-bg-hover);
}

.lp-btn--small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Task216-I: コピーボタン（簡素化版） */
.result-label.lp-translation-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* Task216-D: center → flex-start（上揃え） */
  margin-bottom: 4px;  /* Task216-D: 逆翻訳ラベルと縦位置を揃える */
  min-height: 38px;  /* Task216-D: コピーボタンの高さを確保 */
}

.copy-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--lp-text-disabled, #8E8E93);
  cursor: pointer;
  flex-shrink: 0;  /* ボタンが縮小しないように */
  transition: background-color 0.15s ease, color 0.15s ease;
}

.copy-btn:hover {
  background-color: var(--lp-bg-hover);
  color: var(--lp-text-main);
}

.copy-btn:active {
  transform: scale(0.95);
}

/* ========================================
   Form Elements (フォーム要素) - Apple調デザイン
   ======================================== */
.lp-textarea {
  width: 100%;
  box-sizing: border-box;  /* Task216-I: paddingとborderをwidth内に含める */
  padding: 6px 16px;  /* 上下6px、左右16px */
  border: 1px solid var(--lp-border-soft);
  border-radius: 8px;
  font-size: 20px;   /* Task244-D' 修正: 入力テキストのフォントサイズ20px */
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--lp-bg-card);
}

.lp-textarea:hover {
  border-color: var(--lp-border-hover, #CBD5E1);
}

.lp-textarea:focus {
  outline: none;
  border-color: var(--lp-blue-accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

/* Task216-D: v2-partner-message の右側paddingのみ調整 */
#v2-partner-message {
  padding: 6px 21px 6px 16px;  /* 上6px 右21px 下6px 左16px */
}

/* Task216-D: v2-partner-message のクリアボタン位置調整 */
#v2-partner-message + .lp-field-with-clear__clear {
  right: 1px;  /* 4px - 3px = 1px（右に3px移動） */
}

/* Task216-D: v2-context-info の右側paddingのみ調整 */
#v2-context-info {
  padding: 6px 21px 6px 16px;  /* 上6px 右21px 下6px 左16px */
}

/* Task216-D: v2-context-info のクリアボタン位置調整 */
#v2-context-info + .lp-field-with-clear__clear {
  right: 1px;  /* 4px - 3px = 1px（右に3px移動） */
}

/* Task216-D: input_text の右側paddingのみ調整 */
#input_text {
  padding: 6px 21px 6px 16px;  /* 上6px 右21px 下6px 左16px */
}

/* Task216-D: input_text のクリアボタン位置調整 */
#input_text + .lp-field-with-clear__clear {
  right: 1px;  /* 4px - 3px = 1px（右に3px移動） */
}

.lp-input {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--lp-border-soft);
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--lp-bg-card);
}

.lp-input:hover {
  border-color: var(--lp-border-hover, #CBD5E1);
}

.lp-input:focus {
  outline: none;
  border-color: var(--lp-blue-accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

/* Field with clear button */
.lp-field-with-clear {
  /* flexbox削除: クリアボタンがtextarea内に配置されるため不要 */
}

.lp-field-with-clear__input {
  margin-left: 16px;  /* Task216-D: textarea を右に移動 */
  margin-right: 10px;  /* Task216-D: .lp-field-with-clear右端から10px */
}

/* Task216-D: textarea wrapper - クリアボタンを中に配置 */
.lp-textarea-wrapper {
  position: relative;
}

.lp-field-with-clear__clear {
  /* Task216-D: 絶対配置でtextarea内右上に配置 */
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-field-with-clear__clear:hover {
  background-color: rgba(0, 0, 0, 0.05);  /* Task216-D: 薄いグレー背景 */
}

/* Task216-D: クリアボタンアイコン */
.lp-clear-icon {
  width: 26px;  /* 16px + 10px（上下左右+5px） */
  height: 26px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.lp-field-with-clear__clear:hover .lp-clear-icon {
  opacity: 1;
}

/* ========================================
   Utility Classes (ユーティリティ)
   ======================================== */
.lp-hidden {
  display: none !important;
}

.lp-text-muted {
  color: var(--lp-text-muted);
}

.lp-mt-md {
  margin-top: var(--lp-spacing-md);
}

.lp-mb-md {
  margin-bottom: var(--lp-spacing-md);
}

/* ========================================
   Task233: インラインスタイル外部化クラス
   ======================================== */

/* flexbox row with center alignment */
.lp-flex-center {
  display: flex;
  align-items: center;
}

/* Panel content margin-top */
.lp-panel-content--spaced {
  margin-top: var(--lp-spacing-sm);  /* 12px相当 → 8pxに調整 */
}

/* Form label styling */
.lp-form-label {
  display: block;
  margin-bottom: var(--lp-spacing-xs);  /* 4px */
  font-size: 0.875rem;
  font-weight: 500;
}

/* Control buttons container */
.lp-controls {
  display: flex;
  gap: var(--lp-spacing-sm);  /* 12px相当 */
  margin-top: var(--lp-spacing-md);  /* 16px */
}

/* Results section margin */
.lp-results-section--spaced {
  margin-top: var(--lp-spacing-md);  /* 16px */
}

/* Side panel header - justify between */
.lp-panel__header--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Empty state placeholder */
.lp-empty-state {
  text-align: center;
  padding: var(--lp-spacing-md);
  color: var(--lp-text-disabled, #999);
}

/* QA send button - full width */
.lp-btn--full-width {
  margin-top: var(--lp-spacing-sm);
  width: 100%;
}

/* Chat history container */
.lp-chat-history {
  margin-top: var(--lp-spacing-md);
  max-height: 300px;
  overflow-y: auto;
}

/* Settings row vertical layout */
.lp-settings-row--vertical {
  flex-direction: column;
  align-items: stretch;
}

/* ========================================
   Task216-H: Footer
   ======================================== */
/* Task216-F: シンプルなフッター */
.lp-footer {
  margin-top: 48px;
  padding: 24px 0;
  background-color: var(--lp-bg-main);
  border-top: 1px solid var(--lp-border-soft);
}

.lp-footer__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

.lp-footer__text {
  margin: 0;
  color: var(--lp-text-muted);
  font-size: 14px;
}

/* ============================================
   Task221: v2専用ヘッダースタイル (.lp-*)
   main.cssから分離して独立化
   ============================================ */

/* ヘッダー全体 */
.lp-header {
  background: #FFFFFF;
  color: #1A1A2E;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between; /* Task216 Phase1: 3分割 */
  align-items: center;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #E5E5E7;
}

/* Task216 Phase1: ヘッダー3分割構造 */
.lp-header__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lp-header__center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

.lp-header__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

/* Task216 Phase1: ユーザー情報表示 */
.lp-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.lp-header-user__name {
  font-size: 14px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-header-user__plan {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.lp-header-user__toggle {
  background: none;
  border: none;
  color: #1A1A2E;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* Task216 Phase1: ドロップダウン */
.lp-header-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}

.lp-header-dropdown[aria-hidden="true"] {
  display: none;
}

.lp-header-dropdown__item {
  display: block;
  padding: 10px 16px;
  color: var(--color-text-primary, #333);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s;
}

.lp-header-dropdown__item:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.lp-header-dropdown__item--disabled {
  color: var(--color-text-muted, #999);
  pointer-events: none;
}

.lp-header-dropdown__item--logout {
  color: var(--color-error, #e74c3c);
}

.lp-header-dropdown__separator {
  height: 1px;
  background: var(--color-border, #eee);
  margin: 4px 0;
}

/* Task216 Phase1: 未ログイン時Loginボタン */
.lp-header-login-btn {
  color: #FFFFFF;
  background: var(--gradient-primary);
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.lp-header-login-btn:hover {
  opacity: 0.85;
}

/* ロゴセクション */
.lp-logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-logo-icon {
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-logo-text {
  font-size: 24px;
  font-weight: 700;
}

.lp-version-badge {
  background: var(--color-warning);
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

/* 使用状況表示 */
.lp-usage-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 300px;
  margin: 0 40px;
}

.lp-usage-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.lp-usage-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.lp-usage-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

/* ヘッダー右側エリア */
.lp-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 認証ボタン */
.lp-auth-button {
  margin-left: 8px;
}

.lp-logout-btn,
.lp-profile-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 16px;  /* Task216-D: 8px→6px（上下を小さく） */
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.lp-logout-btn:hover,
.lp-profile-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.lp-profile-btn {
  background: rgba(52, 199, 89, 0.2);
  border: 1px solid rgba(52, 199, 89, 0.3);
  margin-right: 12px;
}

.lp-profile-btn:hover {
  background: rgba(52, 199, 89, 0.3);
  color: white;
}

/* 管理者ボタン */
.lp-admin-btn {
  background: rgba(255, 149, 0, 0.2);
  border: 1px solid rgba(255, 149, 0, 0.3);
  padding: 6px 16px;  /* Task216-D: 8px→6px（上下を小さく） */
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
  margin-right: 12px;
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
  user-select: none;
}

.lp-admin-btn:hover {
  background: rgba(255, 149, 0, 0.3);
  color: white;
  transform: translateY(-1px);
  z-index: 10000 !important;
}

.lp-admin-btn:active {
  background: rgba(255, 149, 0, 0.5);
  transform: translateY(0);
}

/* ============================================
   Task221-B: 本体レイアウトスタイル（main.cssから移行）
   ============================================ */

/* Task244-D' 3.2.1: 翻訳結果カード内の左右並び（翻訳/逆翻訳） */
/* 左（翻訳）65% / 右（逆翻訳）35% で視覚的主従関係を明確化 */
.result-content {
  display: grid;
  grid-template-columns: 65% 35%;  /* Task244-D' 3.2.1: 50/50 → 65/35 */
  gap: 1px;
  background: var(--lp-bg-divider, #f2f2f7);
  position: relative;  /* 矢印配置用 */
}

/* Task244-D' 3.2.2: 左右カラム間の矢印（→）表示 */
.result-content::after {
  content: "→";
  position: absolute;
  left: 65%;  /* 左カラム端に配置 */
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--lp-text-tertiary, #CBD5E1);  /* slate-300 */
  z-index: 1;
  background: var(--lp-bg-card);
  padding: 2px 4px;
}

.result-panel {
  background: var(--lp-bg-card);
  padding: 5px 10px;  /* Task244-D' 修正: 上下5px、左右10px */
  position: relative;
}

/* Task244-D' 3.1.2: 「翻訳」「逆翻訳」ラベルテキストを非表示（コピーボタンは維持） */
.result-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--lp-text-disabled, #8e8e93);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Task244-D' 3.1.2追加: ラベルテキストのみ非表示（コピーボタン維持） */
/* CTO必須修正: セレクタスコープを翻訳カード領域に限定（他UI影響防止） */
.lp-result-card .result-label .label-text {
  display: none;
}

/* Task244-D': 逆翻訳ラベルは完全非表示（コピーボタンなし） */
.result-label.lp-reverse-label {
  display: none;
}

.result-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-text-main);
}

/* 翻訳ボタン・リセットボタンの中央寄せ */
.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* =====================================================
   Task 224: 推奨翻訳カードのハイライトスタイル
   ===================================================== */

/* 静的ハイライト（ボーダー＋シャドウ）- 推奨翻訳カード用 */
.lp-recommended-highlight {
  border: 2px solid var(--lp-blue-ios, #007AFF) !important;
  box-shadow: 0 0 12px var(--lp-blue-ios-glow, rgba(0, 122, 255, 0.25)) !important;
}

/* =====================================================
   Task 236: 段階表示・フェードインアニメーション
   ===================================================== */

/* フェードイン前の状態（非表示・透明） */
.lp-card-fade-hidden {
  opacity: 0;
  transform: translateY(12px);
}

/* フェードイン後の状態（表示・不透明） */
.lp-card-fade-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* =====================================================
   Task 245-1: エラーバナースタイル
   ===================================================== */

.lp-error-banner {
  position: relative;  /* Task246-3: ×ボタンの絶対配置用 */
  background-color: var(--lp-error-bg, #FFF5F5);
  border: 1px solid var(--lp-error-border, #FED7D7);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Task246-3: ×ボタン（右上配置、丸囲いなし、Window風クローズボタン） */
.lp-error-banner__close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--lp-error-text, #C53030);
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.lp-error-banner__close-x:hover {
  opacity: 1;
}

.lp-error-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.lp-error-banner__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.lp-error-banner__message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-error-text, #C53030);
}

.lp-error-banner__retry {
  min-width: 140px;
}

/* =====================================================
   Task 246: Phase1 エラー/警告バナー追加スタイル
   ===================================================== */

/* Task246: 警告バナー（黄色 - STALLED/DEGRADED用） */
.lp-warning-banner {
  background-color: var(--lp-warning-bg, #FFFBEB);
  border: 1px solid var(--lp-warning-border, #FCD34D);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lp-warning-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.lp-warning-banner__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.lp-warning-banner__message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-warning-text, #92400E);
}

.lp-warning-banner__ok {
  min-width: 100px;
  background-color: var(--lp-warning);
  border-color: var(--lp-warning);
}

.lp-warning-banner__ok:hover {
  background-color: var(--lp-warning-hover, #D97706);
  border-color: var(--lp-warning-hover, #D97706);
}

/* Task246: エラーバナーのボタン行スタイル */
.lp-error-banner__buttons,
.lp-warning-banner__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Task246: スロットエラー（カード内エラー表示） */
.translation-card.has-slot-error {
  border: 2px solid var(--lp-error-border, #FED7D7);
  background-color: var(--lp-error-bg, #FFF5F5);
}

.slot-error-message {
  color: var(--lp-error-text, #C53030);
  font-size: 13px;
  padding: 8px 12px;
  background-color: var(--lp-error-bg-subtle, #FEF2F2);
  border-radius: 4px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-error-message::before {
  content: "⚠";
  font-size: 14px;
}

/* Task246: バナー非表示時のスタイル */
.lp-error-banner.lp-hidden,
.lp-warning-banner.lp-hidden {
  display: none;
}

/* Task246-3: UI状態に応じた無効化スタイル */
/* 汎用無効化クラス - ボタン・リンク・インタラクティブ要素に適用 */
.lp-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}

/* 読み取り専用クラス - テキスト入力・テキストエリアに適用 */
.lp-readonly {
  background-color: var(--lp-bg-disabled, #F5F5F5);
  cursor: not-allowed;
  opacity: 0.8;
}

/* 翻訳ボタン無効化時の追加スタイル */
.lp-translate-btn.lp-disabled {
  background-color: var(--lp-btn-disabled-bg, #CCCCCC);
  border-color: var(--lp-btn-disabled-border, #AAAAAA);
  color: var(--lp-btn-disabled-text, #666666);
}

/* A1/A2/A3ボタン無効化時のスタイル */
.nuance-engine-btn.lp-disabled {
  background-color: var(--lp-btn-disabled-bg-light, #E0E0E0);
  border-color: var(--lp-btn-disabled-border, #CCCCCC);
  color: var(--lp-text-disabled, #999999);
}

/* コピーボタン無効化時のスタイル */
.copy-btn.lp-disabled,
.lp-copy-btn.lp-disabled {
  background-color: var(--lp-bg-disabled, #F0F0F0);
  border-color: var(--lp-border-disabled, #DDDDDD);
  color: var(--lp-text-disabled, #AAAAAA);
}

/* 履歴パネル無効化時のスタイル */
.lp-history-list.lp-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* 履歴パネル内の項目も無効化 */
.lp-history-list.lp-disabled .lp-history-item {
  cursor: not-allowed;
}

/* ========================================
   Task253: Progress Bar with Shimmer Animation
   ======================================== */

/* Progress Bar Container */
/* Task279-4: z-indexは念のため維持（レイアウト影響なし）
   Task279-5: #nuance-status要素削除のためflexbox関連は簡素化 */
.lp-progress {
  width: 100%;
  margin: var(--lp-spacing-md) 0;
  margin-bottom: var(--lp-spacing-md);  /* Task279-5: 翻訳カードとの間隔確保 */
  padding: 0 var(--lp-spacing-sm);
  position: relative;
  z-index: 10;
}

/* Progress Track (背景) */
.lp-progress__track {
  position: relative;
  width: 100%;
  height: 9px;
  background-color: var(--lp-border-soft);
  border-radius: 5px;
  overflow: hidden;
}

/* Progress Fill (進捗部分) */
.lp-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--lp-blue-main);
  border-radius: 5px;
  transition: width 0.3s ease-out;
}

/* Shimmer Overlay (常時動くアニメーション) - Task253強化版 */
.lp-progress__shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 25%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: lp-shimmer 1.2s infinite ease-in-out, lp-pulse 2s infinite ease-in-out;
}

/* Shimmer Animation Keyframes - 左から右へゆっくり流れる */
@keyframes lp-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Pulse Animation - 進捗バー全体の明滅 */
@keyframes lp-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 処理完了時はシマー停止 */
.lp-progress.is-complete .lp-progress__shimmer {
  animation: none;
  opacity: 0;
}

/* エラー時もシマー停止 */
.lp-progress.is-error .lp-progress__shimmer {
  animation: none;
  opacity: 0;
}

/* エラー時は進捗バーを赤色に */
.lp-progress.is-error .lp-progress__fill {
  background-color: var(--lp-error);
}

/* Task279-5: .lp-nuance-status と @keyframes lp-nuance-fade は削除
   （ボタン側で「分析中」状態が表示されるため、進捗バー右側の表示は不要） */


/* ========================================
   Task247: Polling Error UI
   - ポーリング中の404/500/fetchエラー時に表示
   - Task246の赤バナーとは別のUXカテゴリ
   - グレー系の控えめなデザイン
   ======================================== */
.task247-polling-error-banner {
  background-color: var(--lp-bg-subtle, #F3F4F6);
  border: 1px solid var(--lp-border-soft);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  text-align: center;
}

.task247-polling-error-banner.lp-hidden {
  display: none;
}

/* Task247文言修正: メイン1行＋ボタンのみ */
.task247-polling-error__content {
  margin-bottom: 12px;
}

.task247-polling-error__main {
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-main);
}

.task247-polling-error__buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 「もう一度翻訳する」ボタン */
.task247-polling-error__buttons .lp-btn--primary {
  background-color: var(--lp-blue-accent);
  color: var(--lp-text-white, #FFFFFF);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.task247-polling-error__buttons .lp-btn--primary:hover {
  background-color: var(--lp-blue-main);
}

/* ========================================
   Task248: Session Expired Modal
   ======================================== */

/* Modal Overlay (fullscreen backdrop) */
.lp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Modal Container */
.lp-modal {
  background-color: var(--lp-bg-card, #FFFFFF);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 420px;
  width: 90%;
  padding: 0;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header */
.lp-modal__header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--lp-border-soft);
}

.lp-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--lp-text-main);
  margin: 0;
}

.lp-modal__icon {
  font-size: 24px;
}

/* Modal Body */
.lp-modal__body {
  padding: 16px 24px;
}

.lp-modal__message {
  font-size: 15px;
  color: var(--lp-text-sub);
  line-height: 1.6;
  margin: 0;
}

/* Modal Footer */
.lp-modal__footer {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Secondary Button (Copy Input) */
.lp-modal__footer .lp-btn--secondary {
  background-color: var(--lp-bg-soft);
  color: var(--lp-text-main);
  border: 1px solid var(--lp-border-soft);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lp-modal__footer .lp-btn--secondary:hover {
  background-color: var(--lp-border-soft);
  border-color: var(--lp-text-sub);
}

/* Primary Button (Go to Login) */
.lp-modal__footer .lp-btn--primary {
  background-color: var(--lp-blue-main);
  color: var(--lp-text-white, #FFFFFF);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lp-modal__footer .lp-btn--primary:hover {
  background-color: var(--lp-blue-accent);
}

/* ========================================
   Task340: ドロップダウンモーダル追加スタイル
   ======================================== */

/* Task340: モーダルヘッダー（閉じるボタン付き） */
.lp-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--lp-text-sub, #666);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.lp-modal__close:hover {
  color: var(--lp-text-main, #333);
}

/* Task340: モーダル内フィールド表示 */
.lp-modal-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--lp-border-soft, #eee);
}

.lp-modal-field:last-child {
  border-bottom: none;
}

.lp-modal-field__label {
  font-size: 14px;
  color: var(--lp-text-sub, #666);
  font-weight: 500;
}

.lp-modal-field__value {
  font-size: 14px;
  color: var(--lp-text-main, #333);
  font-weight: 600;
}

/* Task293: Usage Modal upgrade CTA */
.lp-modal__upgrade-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light, #f0f0f0);
}

.lp-modal__upgrade-cta a {
  font-size: 14px;
  color: var(--color-primary, #007AFF);
  text-decoration: none;
  font-weight: 500;
}

.lp-modal__upgrade-cta a:hover {
  text-decoration: underline;
}

/* Task340: モーダル補足テキスト */
.lp-modal__note {
  font-size: 13px;
  color: var(--lp-text-sub, #999);
  margin-top: 12px;
  line-height: 1.5;
}

/* Task340: ステータスメッセージ */
.lp-modal__status {
  font-size: 14px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--lp-bg-soft, #f5f5f5);
}

/* Task340: 使用状況プログレスバー */
.lp-usage-bar {
  height: 8px;
  background: var(--lp-bg-soft, #e0e0e0);
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}

/* Task293: モーダル内バーは背景を明確に */
.lp-usage-bar--modal {
  margin-top: 8px;
  background: var(--color-border, #E5E5E7);
}

.lp-usage-bar__fill {
  height: 100%;
  background: var(--lp-blue-main, #007AFF);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Task293: Warning=70%→黄、Danger=90%→赤 */
.lp-usage-bar__fill--warning {
  background: var(--color-warning, #FF9F0A);
}

.lp-usage-bar__fill--danger {
  background: var(--color-error, #FF453A);
}

/* Task293: プランバッジ Warning=70%黄・Danger=90%赤 */
.lp-header-user__plan--warning {
  background: rgba(255, 159, 10, 0.9);
  color: white;
}

.lp-header-user__plan--danger {
  background: rgba(255, 69, 58, 0.9);
  color: white;
}

/* Task340: フルワイドボタン */
.lp-btn--full {
  width: 100%;
  margin-top: 8px;
}

/* Task340: フッター縦積みバリアント（全幅ボタン用） */
.lp-modal__footer--stacked {
  flex-direction: column;
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}

/* Task340: 危険ボタン（全削除用） */
.lp-btn--danger {
  background: var(--color-danger, #e74c3c);
  color: white;
  border: none;
}
.lp-btn--danger:hover {
  background: var(--color-danger-hover, #c0392b);
}

/* Task340: ワイドモーダル（データ管理用） */
.lp-modal--wide {
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.lp-modal--wide .lp-modal__body {
  overflow-y: auto;
  flex: 1;
}

/* Task340 Section 6-2-b: 個別削除リスト */
.lp-data-mgmt-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  margin-top: 8px;
}
.lp-data-mgmt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  gap: 8px;
}
.lp-data-mgmt-item:last-child {
  border-bottom: none;
}
.lp-data-mgmt-item__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.lp-data-mgmt-item__text {
  font-size: 13px;
  color: var(--lp-text-primary, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-data-mgmt-item__meta {
  font-size: 11px;
  color: var(--lp-text-subtle, #64748b);
  margin-top: 2px;
}
.lp-data-mgmt-item__delete {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-danger, #e74c3c);
  color: var(--color-danger, #e74c3c);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lp-data-mgmt-item__delete:hover {
  background: var(--color-danger, #e74c3c);
  color: white;
}
.lp-data-mgmt-item__delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lp-data-mgmt-empty {
  padding: 24px;
  text-align: center;
  color: var(--lp-text-subtle, #64748b);
  font-size: 13px;
}

/* ========================================
   Task244-B/C: ニュアンス要約カード内表示
   ======================================== */

/* Task244-D' 3.3: ニュアンス要約 - 翻訳本文下部に点線枠で配置 */
.lp-card__nuance-summary {
  /* Task244-D' 3.3: 翻訳本文下に配置（flexから通常ブロックへ） */
  display: block;

  /* Task244-D' 3.3修正: フォントサイズ2段階拡大（ユーザー要望） */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-text-subtle, #64748B);  /* slate-500 - 控えめだが読める */

  /* Task244-D' 3.3: 点線枠（控えめな分離） */
  text-align: left;
  margin-top: 10px;
  padding: 8px 10px;
  background: transparent;  /* 背景なし（ノイズ削減） */
  border: 1px dashed var(--lp-border-dashed, #CBD5E1); /* slate-300 点線枠 */
  border-radius: 4px;
}

/* 推奨カード時のみ表示される（JSでlp-hidden除去） */
.lp-card__nuance-summary.lp-hidden {
  display: none;
}

/* ========================================
   Task260: Nuance Details On-Demand Display
   ======================================== */

/* Toggle Section */
#nuance-details-toggle-section {
  margin-top: var(--lp-spacing-md);
  padding: 0;
  background: transparent;
  border: none;
}

#nuance-details-toggle-section .lp-panel__header {
  padding: var(--lp-spacing-sm);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--lp-spacing-sm);
}

/* Toggle Button */
.nuance-details-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-spacing-xs);
  padding: var(--lp-spacing-xs) var(--lp-spacing-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lp-text-muted);
  background: var(--lp-bg-card);
  border: 1px solid var(--lp-border-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nuance-details-toggle-btn:hover {
  background: var(--lp-bg-hover);
  color: var(--lp-text-main);
  border-color: var(--lp-text-muted);
}

.nuance-details-toggle-btn:focus {
  outline: 2px solid var(--lp-blue-soft);
  outline-offset: 2px;
}

/* Toggle Arrow */
.nuance-details-arrow {
  display: inline-block;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.nuance-details-toggle-btn[aria-expanded="true"] .nuance-details-arrow {
  transform: rotate(90deg);
}

/* Status Indicator (Analyzing, Failed) */
/* Task260-1: pointer-events: none でクリック不可にする */
.nuance-details-status {
  font-size: 0.8125rem;
  color: var(--lp-text-muted);
  padding: var(--lp-spacing-xs) var(--lp-spacing-sm);
  border-radius: 4px;
  pointer-events: none;
  cursor: default;
}

/* Task279-2 追修正1: 右カラムの「分析中」ステータスを常時非表示
   - トグルセクション内のステータス表示は不要（進捗バー上に別途表示あり）
   - JS側のshowNuanceAnalyzing()は変更せず、CSS側で非表示化 */
#nuance-details-status {
  display: none !important;
}

.nuance-details-status.analyzing {
  color: var(--lp-blue-main);
  animation: pulse-analyzing 1.5s ease-in-out infinite;
}

.nuance-details-status.failed {
  color: var(--lp-error);
}

@keyframes pulse-analyzing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Collapsible Detail Area */
#full-analysis-area.lp-collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

#full-analysis-area.lp-expanded {
  max-height: 2000px; /* Large enough for any content */
  overflow-y: visible; /* Task216: ベースのoverflow-y:autoを上書き（二重スクロール防止） */
  opacity: 1;
  margin-top: var(--lp-spacing-md);
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

/* Remove lp-hidden when expanded (JS handles this) */
#full-analysis-area.lp-expanded.lp-hidden {
  display: block;
}

/* ========================================
   Task277: Mobile Responsive (320px/390px)
   目的: スマホ幅で破綻しない最低限の体裁確保
   - 横スクロール発生防止
   - ヘッダー要素の潰れ/重なり解消
   - 右カラム相当を下に積む（欠落防止）
   - 翻訳カード内を縦積み（可読性確保）
   ======================================== */

/* === 277-1: ヘッダー破綻修正 === */
@media (max-width: 480px) {
  /* ヘッダー全体: 高さ自動、wrap許可 */
  .lp-header {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ロゴセクション: コンパクト化 */
  .lp-logo-section {
    gap: 8px;
  }

  .lp-logo-text {
    font-size: 20px;
  }

  .lp-version-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* 使用状況: スマホでは非表示（ヘッダー圧迫防止） */
  .lp-usage-stats {
    display: none;
  }

  /* Task216 Phase1: モバイルヘッダー調整 */
  .lp-header {
    flex-wrap: nowrap; /* 折返し禁止 */
  }

  .lp-header__center {
    flex: 1;
    min-width: 0;
  }

  .lp-header-user__name {
    max-width: 80px;
    font-size: 12px;
  }

  .lp-header-user__plan {
    display: none; /* モバイルではPlan非表示 */
  }

  .lp-version-badge {
    display: none; /* モバイルではバージョン非表示 */
  }

  .lp-header-login-btn {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* ヘッダー右側: gap縮小 */
  .lp-header-right {
    gap: 8px;
  }

  /* UI言語セレクタ: ラベル非表示、select縮小 */
  .lp-header-right label[for="ui-lang-select"] {
    display: none;
  }

  #ui-lang-select {
    padding: 4px 6px;
    font-size: 12px;
  }

  /* 認証ボタン: コンパクト化 */
  .lp-logout-btn,
  .lp-profile-btn,
  .lp-admin-btn {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* 認証ボタン内テキスト: スマホでは非表示（アイコンのみ） */
  .lp-logout-btn .lp-i18n,
  .lp-profile-btn .lp-i18n,
  .lp-admin-btn .lp-i18n {
    display: none;
  }
}

/* === 277-2: 右カラム欠落解消（1カラム化で下に積む） === */
@media (max-width: 1023px) {
  /* コンテナ: 縦積み */
  .lp-container {
    flex-direction: column;
    padding: 12px 16px;
    gap: 16px;
  }

  /* メインカラム: 全幅 */
  .lp-main-column {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  /* 右カラム: 非表示を解除し、下に積む */
  .lp-side-column {
    display: flex !important;  /* 元の display: none を上書き */
    flex-direction: column;
    position: static !important;  /* sticky解除 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    order: 2;  /* メインカラムの後に配置 */
    box-shadow: none;
    margin-top: 16px;
    border-top: 1px solid var(--lp-border-soft);
    padding-top: 16px;
    /* Task277: JSでcollapsedクラスが付いても表示を維持 */
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
  }

  /* Task277: collapsed状態でもスマホでは表示を維持 */
  .lp-side-column--collapsed {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    position: static !important;
  }

  /* サイドトグルボタン: スマホでは不要 */
  .lp-side-toggle-btn {
    display: none !important;
  }

  /* Side Panel Header（「>」ボタン含む）: スマホでは非表示 */
  #side-panel-header {
    display: none !important;
  }

  /* 履歴パネルの高さ制限 */
  #history-panel {
    flex: 0 0 auto;
    max-height: 300px;
    overflow-y: auto;
  }

  #v2-history-list {
    max-height: 200px;
    overflow-y: auto;
  }
}

/* === 277-3: 翻訳カード可読性改善（縦積み） === */
@media (max-width: 600px) {
  /* 翻訳カード内: 横並び→縦積み */
  .result-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
  }

  /* 矢印を非表示（縦積みでは不要） */
  .result-content::after {
    display: none;
  }

  /* 各パネル: 全幅 */
  .result-panel {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--lp-bg-card);
  }

  /* 翻訳/逆翻訳の区切り線 */
  .result-panel:not(:last-child) {
    border-bottom: 1px solid var(--lp-border-soft);
    padding-bottom: 12px;
  }

  /* 翻訳本文: フォント縮小 */
  .lp-result-card .result-text.lp-translation-text {
    font-size: 18px;
  }

  /* 逆翻訳: フォント縮小 */
  .lp-result-card .result-text.lp-reverse-text {
    font-size: 15px;
  }

  /* 逆翻訳ラベル: スマホでは表示（縦積みで区別が必要） */
  .result-label.lp-reverse-label {
    display: flex;
    font-size: 11px;
    color: var(--lp-text-secondary, #94A3B8);
    margin-bottom: 4px;
  }

  /* 翻訳ペアバー: 縮小 */
  .lp-pair-bar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-pair-bar__label {
    font-size: 16px;
    width: 100%;
    text-align: center;
  }

  .lp-pair-bar__select {
    font-size: 16px;
    height: 32px;
    padding: 0 8px;
  }

  .lp-pair-bar__arrow {
    font-size: 16px;
    width: 28px;
    height: 28px;
  }

  /* 入力テキストエリア: フォント縮小 */
  .lp-textarea {
    font-size: 16px;
    padding: 8px 12px;
  }

  /* ボタン: 縮小 */
  .lp-btn--primary,
  .lp-btn--secondary {
    font-size: 16px;
    height: 36px;
    padding: 0 14px;
  }

  /* 詳細設定: タップ領域確保 */
  .lp-panel__header {
    padding: 8px 12px;
    min-height: 44px;
  }

  .lp-panel__title {
    font-size: 14px;
  }

  /* 進捗バー: 余白調整 */
  .lp-progress {
    padding: 0;
    margin: 12px 0;
  }
}

/* === 追加: 320px最狭幅対応 === */
@media (max-width: 360px) {
  /* ヘッダー: さらにコンパクト */
  .lp-header {
    padding: 8px 12px;
  }

  .lp-logo-text {
    font-size: 18px;
  }

  /* コンテナ: 余白最小化 */
  .lp-container {
    padding: 8px 12px;
  }

  /* 翻訳ペアバー: さらに縮小 */
  .lp-pair-bar__select {
    font-size: 14px;
    min-width: 0;
    flex: 1;
  }

  /* 翻訳本文: さらに縮小 */
  .lp-result-card .result-text.lp-translation-text {
    font-size: 16px;
  }

  .lp-result-card .result-text.lp-reverse-text {
    font-size: 14px;
  }
}

/* ========================================
   Task285: Global Menu (Left Slide-in)
   - 左からスライドインするグローバルメニュー
   - オーバーレイ方式
   - 排他制御（右パネルと同時展開不可）
   ======================================== */

/* ===== ハンバーガーボタン（ヘッダー左側） ===== */
.lp-hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 12px; /* ロゴとの間隔 */
}

.lp-hamburger-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.lp-hamburger-icon {
  font-size: 32px; /* Task285: 1.3倍に拡大（24px → 32px） */
  color: #1A1A2E;
  line-height: 1;
  /* Task285: Unicode ☰ は視覚的に下寄りなため、padding-topで補正 */
  padding-top: 0;
  padding-bottom: 6px;
}

/* ===== オーバーレイ（半透明背景） ===== */
.lp-global-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1100;
}

.lp-global-menu-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* ===== 左スライドインメニュー ===== */
.lp-global-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--lp-bg-card, #FFFFFF);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.lp-global-menu--open {
  transform: translateX(0);
}

/* メニューヘッダー */
.lp-global-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lp-border-soft, #E5E5E7);
  background: #FFFFFF;
  color: #1A1A2E;
  min-height: 72px;
}

.lp-global-menu__title {
  font-size: 18px;
  font-weight: 600;
}

.lp-global-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lp-global-menu__close:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* メニューナビゲーション */
.lp-global-menu__nav {
  flex: 1;
  padding: 8px 0;
}

/* ===== メニュー項目（共通） ===== */
.lp-menu-item {
  display: block;
  padding: 14px 20px;
  color: var(--lp-text-primary, #1D1D1F);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  transition: background-color 0.15s ease;
}

.lp-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* 無効な項目（設定・アカウントは未実装） */
.lp-menu-item--disabled {
  color: var(--lp-text-muted, #8E8E93);
  pointer-events: none;
  opacity: 0.6;
}

/* Task287-9: Running中（翻訳処理中）に無効化される項目 */
.lp-menu-item--running-disabled {
  color: var(--lp-text-muted, #8E8E93) !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ログアウト項目 */
.lp-menu-item--logout {
  color: var(--lp-text-primary, #1D1D1F);
}

/* 管理者項目 */
.lp-menu-item--admin {
  color: var(--lp-text-primary, #1D1D1F);
}

/* セパレーター（管理者セクションの区切り） */
.lp-menu-separator {
  height: 1px;
  background-color: var(--lp-border-soft, #E5E5E7);
  margin: 8px 0;
}

/* UI言語セレクタ（メニュー内インライン配置） */
.lp-menu-lang-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.02);
}

.lp-menu-lang-select label {
  font-size: 13px;
  color: var(--lp-text-muted, #8E8E93);
  white-space: nowrap;
}

.lp-menu-lang-select select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--lp-border-soft, #E5E5E7);
  border-radius: 6px;
  font-size: 14px;
  background: var(--lp-bg-card, #FFFFFF);
  color: var(--lp-text-primary, #1D1D1F);
  cursor: pointer;
}

/* ===== Body状態：メニュー開放時 ===== */
.lp-body--menu-open {
  overflow: hidden; /* スクロール禁止 */
}

/* ===== Task285: スマホ対応 ===== */
@media (max-width: 480px) {
  .lp-global-menu {
    width: 260px;
  }

  .lp-menu-item {
    padding: 16px 20px;
    font-size: 16px;
  }

  .lp-hamburger-btn {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }

  .lp-hamburger-icon {
    font-size: 28px; /* Task285: スマホでも1.3倍相当 */
  }
}

/* =====================================================
   Task289: Nuance Detail Panel (Main Bottom)
   青枠クリックで展開/折りたたみするNuance詳細パネル
   ===================================================== */

/* 推奨カード: クリック可能に */
.lp-result-card.lp-recommended-highlight {
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.lp-result-card.lp-recommended-highlight:hover {
  box-shadow: 0 8px 24px rgba(31, 111, 235, 0.2);
}

/* Nuance詳細パネル: 閉じボタン */
.lp-detail-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--lp-text-muted, #475569);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lp-detail-close-btn:hover {
  background: var(--lp-bg-hover, #F1F5F9);
  color: var(--lp-text-main, #1E293B);
}

/* Nuance詳細パネル: ヘッダーにposition:relativeを追加 */
#full-analysis-area .lp-card__header {
  position: relative;
  padding-right: 48px; /* 閉じボタン用のスペース */
}

/* Nuance詳細パネル: 展開時のスタイル */
#full-analysis-area {
  margin-top: 16px;
  max-height: 500px;
  overflow-y: auto;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

#full-analysis-area.lp-hidden {
  display: none;
}

/* Task289: Nuance詳細パネル内のコンテンツスタイル */
#full-analysis-area .lp-card__content {
  padding: 16px 20px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--lp-text-main, #1E293B);
}

/* ============================================================
   Task342: Usage Guard styles
   ============================================================ */

/* Inline Guard (below input textarea) - L2/L3 */
.lp-usage-inline-guard {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lp-usage-inline-guard.lp-hidden {
  display: none;
}

/* L2: Caution (yellow) */
.lp-usage-inline-guard--caution {
  background-color: var(--lp-warning-bg, #FFFBEB);
  border: 1px solid var(--lp-warning-border, #FCD34D);
  color: var(--lp-warning-text, #92400E);
}

/* L3: Limit (red) */
.lp-usage-inline-guard--limit {
  background-color: var(--lp-error-bg, #FEF2F2);
  border: 1px solid var(--lp-error-border, #FCA5A5);
  color: var(--lp-error-text, #991B1B);
}

.lp-usage-inline-guard__count {
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.8;
}

/* Task342/343: Usage Guard Banner (L2 caution / L3 limit) */
.lp-usage-guard-banner {
  position: relative;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-usage-guard-banner.lp-hidden {
  display: none;
}

/* Task343: L2 Caution (yellow) - matches lp-warning-banner color scheme */
.lp-usage-guard-banner--caution {
  background-color: var(--lp-warning-bg, #FFFBEB);
  border: 1px solid var(--lp-warning-border, #FCD34D);
}

.lp-usage-guard-banner--caution .lp-usage-guard-banner__message {
  color: var(--lp-warning-text, #92400E);
}

/* Task343: L3 Limit (red) - matches lp-error-banner color scheme */
.lp-usage-guard-banner--limit {
  background-color: var(--lp-error-bg, #FEF2F2);
  border: 1px solid var(--lp-error-border, #FCA5A5);
}

.lp-usage-guard-banner--limit .lp-usage-guard-banner__message,
.lp-usage-guard-banner--limit .lp-usage-guard-banner__countdown {
  color: var(--lp-error-text, #991B1B);
}

/* Task343: Banner content layout */
.lp-usage-guard-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.lp-usage-guard-banner__message {
  font-size: 14px;
  line-height: 1.5;
}

/* Task343: Countdown display (L3 only) */
.lp-usage-guard-banner__countdown {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.lp-usage-guard-banner__countdown.lp-hidden {
  display: none;
}

/* Task343: Close button (L2 only, hidden during L3) */
.lp-usage-guard-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--lp-warning-text, #92400E);
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.lp-usage-guard-banner__close:hover {
  opacity: 1;
}

.lp-usage-guard-banner__close.lp-hidden {
  display: none;
}

/* ============================================================
   Developer Panel — Task358
   表示対象: admin / developer ロールのみ
   ============================================================ */

.lp-dev-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 11px;
  border-top: 2px solid #4a90d9;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}

.lp-dev-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #16213e;
  cursor: default;
}

.lp-dev-panel__toggle,
.lp-dev-panel__copy,
.lp-dev-panel__close {
  background: #2d4a7a;
  color: #e0e0e0;
  border: 1px solid #4a90d9;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
}

.lp-dev-panel__toggle:hover,
.lp-dev-panel__copy:hover,
.lp-dev-panel__close:hover {
  background: #4a90d9;
}

.lp-dev-panel__title {
  font-weight: bold;
  color: #4a90d9;
  white-space: nowrap;
}

.lp-dev-panel__summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a0c4ff;
  font-size: 10px;
}

.lp-dev-panel__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px;
  max-height: 200px;
  overflow-y: auto;
}

.lp-dev-panel__content.lp-dev-panel__content--hidden {
  display: none;
}

.lp-dev-col {
  background: #16213e;
  border: 1px solid #2d4a7a;
  border-radius: 3px;
  padding: 4px 6px;
  overflow: hidden;
}

.lp-dev-col summary {
  font-weight: bold;
  color: #4a90d9;
  cursor: pointer;
  padding: 2px 0;
  list-style: none;
}

.lp-dev-col dl {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
}

.lp-dev-col dt {
  color: #888;
  white-space: nowrap;
}

.lp-dev-col dd {
  margin: 0;
  color: #e0e0e0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.lp-dev-reopen {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 10000;
  background: #2d4a7a;
  color: #e0e0e0;
  border: 1px solid #4a90d9;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: monospace;
}
.lp-dev-reopen:hover {
  background: #4a90d9;
}

/* Task390: コピー完了フィードバック — JSでSVG→✓差し替え方式のためCSS不要 */

/* ================================================================= */
/* Task503 B4: 匿名(trial) UI — 残回数バッジ / 登録誘導の壁モーダル      */
/* ================================================================= */

/* B4-2: 本日残回数バッジ（翻訳ボタン下・常時表示） */
.trial-remaining-badge {
  margin-top: 10px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-bg-hover);
  border: 1px solid var(--lp-border-soft);
  color: var(--lp-text-main);
  font-size: 13px;
  font-weight: 500;
}
.trial-remaining-badge[hidden] { display: none; }

/* B4-3: 登録誘導の壁モーダル */
.trial-wall-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trial-wall-modal[hidden] { display: none; }
.trial-wall-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.trial-wall-modal__card {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  background: var(--lp-bg-card);
  border-radius: 14px;
  padding: 28px 24px 24px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
  text-align: center;
}
.trial-wall-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--lp-text-main);
  cursor: pointer;
  opacity: 0.6;
}
.trial-wall-modal__close:hover { opacity: 1; }
.trial-wall-modal__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--lp-text-main);
}
.trial-wall-modal__body {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-main);
}
.trial-wall-modal__cta {
  display: inline-block;
  text-decoration: none;
}

/* Task503 B4: 匿名(trial)ヘッダの登録導線 — 登録を主(ボタン)・ログインを従(テキストリンク) */
.lp-header-signup-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--lp-blue-main);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.lp-header-signup-btn:hover { background: var(--lp-blue-accent); }
.lp-header-login-link {
  margin-left: 14px;
  color: var(--lp-text-muted, #475569);
  font-size: 13px;
  text-decoration: none;
}
.lp-header-login-link:hover { text-decoration: underline; }