/**
 * 統一表示制御CSS
 * JavaScript の style.display 操作を削減し、CSS class 中心の制御に統一
 */

/* =================================================================
   ローディング画面制御（ちらつき防止）
   ================================================================= */

/* ローディング画面のスタイル */
#app-loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
  color: #495057;
}

.loading-logo {
  margin-bottom: 24px;
  opacity: 0.9;
}

.loading-spinner {
  margin: 24px auto;
  width: 40px;
  height: 40px;
}

.spinner-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(108, 117, 125, 0.3);
  border-radius: 50%;
  border-top-color: #6c757d;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin: 0;
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* ローディング中：メインアプリを完全非表示 */
body.app-loading #app {
  display: none !important;
}

/* アプリ準備完了：ローディング画面を非表示 */
body:not(.app-loading) #app-loading-screen {
  display: none !important;
}

/* アクションバー分のマージン制御（ログイン時は不要） */
body.logged-in #app {
  margin-bottom: 10px;
}

body.not-logged-in #app {
  margin-bottom: 0;
}

/* =================================================================
   アプリケーション状態制御
   ================================================================= */

/* 汎用hiddenクラス */
.hidden {
  display: none !important;
}

/* 初期化中は全体を非表示（ちらつき防止） */
body:not(.app-ready) main {
  opacity: 0;
  pointer-events: none;
}

/* アプリ準備完了で滑らかに表示 */
body.app-ready main {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}

/* ちらつき防止強化：認証状態確定前はログインコンテナも非表示 */
body:not(.auth-ready) #login-container {
  visibility: hidden;
}

/* 認証状態確定後に滑らかに表示 */
body.auth-ready #login-container {
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}

/* ローディング中の表示制御 */
body.loading {
  cursor: wait;
}

body.loading .loading-overlay {
  display: block !important;
}

body:not(.loading) #loading-container {
  display: none !important;
}

body.loading #loading-container {
  display: block !important;
}

/* =================================================================
   認証状態別表示制御
   ================================================================= */



/* 初期状態：ログインコンテナ完全非表示（ちらつき防止）- より詳細度の高いセレクタで強制 */
body #login-container,
body.not-logged-in #login-container {
  display: none !important;
}

/* 認証状態確定後：未ログイン時のみログインコンテナを表示 */
body.auth-ready.not-logged-in #login-container {
  display: block !important;
}

body.not-logged-in main {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 認証状態確定後：ログイン時はログイン関連要素を非表示 */
body.auth-ready.logged-in .login-only {
  display: none !important;
}

body.auth-ready.logged-in #login-container {
  display: none !important;
}



body.logged-in #action-bar {
  display: block !important;
}

body.logged-in main {
  display: block;
}

/* =================================================================
   バージョン別表示制御
   ================================================================= */

/* V1専用要素 */
body:not(.version-v1) .v1-only {
  display: none !important;
}

/* V3専用要素 */
body:not(.version-v3) .v3-only {
  display: none !important;
}

/* V1で非表示にする要素（V3専用機能） */
body.version-v1 .v3-feature {
  display: none !important;
}

body.version-v1 #image-attach-section {
  display: block !important;
}

/* V3で非表示にする要素（V1専用機能） */
body.version-v3 .v1-feature {
  display: none !important;
}

body.version-v3 #image-attach-section {
  display: block !important;
}

body.version-v3 .ai-engine-option {
  display: none !important;
}

body.version-v3 .setting-option:has(.llm-selector) {
  display: none !important;
}

/* =================================================================
   レート制限表示制御
   ================================================================= */

/* V3でのみレート制限表示 */
body:not(.version-v3) #rate-limit-status {
  display: none !important;
}

body.version-v3 #rate-limit-status {
  display: inline !important;
}

/* レート制限状態別表示 */
.rate-limit-ok #rate-limit-ok-text {
  display: inline;
}

.rate-limit-ok #rate-limit-exceeded-text {
  display: none;
}

.rate-limit-exceeded #rate-limit-ok-text {
  display: none;
}

.rate-limit-exceeded #rate-limit-exceeded-text {
  display: inline;
}

/* =================================================================
   文字数カウント表示制御
   ================================================================= */

/* 文字数に応じた色変更 */
.char-count-insufficient {
  color: #ff6b6b !important; /* 赤色：文字数不足 */
}

.char-count-sufficient {
  color: #4ecdc4 !important; /* 緑色：文字数十分 */
}

/* チェック可能メッセージ表示制御 */
.char-remaining-message-show {
  display: inline !important;
}

.char-remaining-message-hide {
  display: none !important;
}

/* =================================================================
   結果表示制御
   ================================================================= */

/* 結果表示前は非表示 */
body:not(.results-ready) #result-container {
  display: none !important;
}

body:not(.results-ready) #link-result-container {
  display: none !important;
}

body:not(.results-ready) #legal-result-container {
  display: none !important;
}

body:not(.results-ready) #feedback-section {
  display: none !important;
}

/* 結果準備完了で表示 */
body.results-ready #result-container {
  display: block !important;
}

body.results-ready #feedback-section {
  display: block !important;
}

body.results-ready #result-container, body.results-ready #feedback-section{
  max-width: 600px;
  margin: 20px auto;
  padding-bottom: 20px;
}
/* =================================================================
   レスポンシブ対応
   ================================================================= */

/* スマホ対応 */
@media (max-width: 768px) {
  body.not-logged-in main {
    padding: 20px;
    margin-bottom: 200px
  }
  
  body.not-logged-in #login-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  /* スマホではアニメーション時間を短縮 */
  body.app-ready main {
    transition: opacity 0.2s ease-in-out;
  }
}

/* =================================================================
   アクセシビリティ対応
   ================================================================= */

/* アニメーション無効設定に対応 */
@media (prefers-reduced-motion: reduce) {
  body.app-ready main {
    transition: none;
  }
}

/* ハイコントラスト対応 */
@media (prefers-contrast: high) {
  .char-count-insufficient {
    color: #cc0000 !important;
    font-weight: bold;
  }
  
  .char-count-sufficient {
    color: #007700 !important;
    font-weight: bold;
  }
}