/**
 * layout_foundation.css — AXIA Layout Foundation Rebuild OS
 * Phase 1+2: Layout Architecture 完全再設計
 *
 * 設計原則:
 *   1. scroll可能なのは .chatScrollArea のみ（body/workspace全体scroll禁止）
 *   2. 100vh は .appLayout のみ使用
 *   3. position:absolute は最小限（モーダル・ドロップダウン等のみ）
 *   4. height管理は flex で統一（calc(100vh - xxx) 禁止）
 *   5. input-area は flex-shrink:0 で固定（position:fixed 廃止）
 */

/* ═══════════════════════════════════════════════════════════
   1. RESET — html/body/#app の完全制御
   ═══════════════════════════════════════════════════════════ */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* body scroll 禁止 */
}

#app,
.app-wrapper,
.app {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   2. APP LAYOUT — 最上位レイアウトコンテナ
   ═══════════════════════════════════════════════════════════ */

.appLayout {
  display: flex;
  height: 100vh;
  height: 100dvh; /* モバイルアドレスバー対応 */
  width: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   3. HEADER — flex-shrink:0 で固定
   ═══════════════════════════════════════════════════════════ */

.app-header,
.header {
  flex-shrink: 0;
  position: relative; /* sticky → relative に変更（appLayout内で固定） */
  z-index: 100;
}

/* ═══════════════════════════════════════════════════════════
   4. MAIN CONTENT — header以下の全体コンテナ
   ═══════════════════════════════════════════════════════════ */

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* flex子要素のoverflow制御に必須 */
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   5. CHAT LAYOUT — 横並びの3カラム
   ═══════════════════════════════════════════════════════════ */

.chat-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   6. THREAD SIDEBAR — 左サイドバー
   ═══════════════════════════════════════════════════════════ */

.thread-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 内部でscroll管理 */
  transition: width 0.2s ease;
}

.thread-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* サイドバー非表示時 */
.thread-sidebar.collapsed {
  width: 0;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   7. CENTER CHAT — メインチャット列
   ═══════════════════════════════════════════════════════════ */

.center-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   8. CHAT SCROLL AREA — 唯一のスクロール可能領域
   ═══════════════════════════════════════════════════════════ */

.chat-area,
#chatArea {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* padding-bottom は入力欄の高さ分だけ確保（固定値ではなくCSS変数で管理） */
  padding-bottom: var(--input-area-height, 80px);
  scroll-behavior: smooth;
}

/* スクロールバースタイル */
.chat-area::-webkit-scrollbar {
  width: 4px;
}
.chat-area::-webkit-scrollbar-track {
  background: transparent;
}
.chat-area::-webkit-scrollbar-thumb {
  background: var(--border, #333);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════
   9. CHAT INPUT AREA — 絶対固定（消えない・押し出されない）
   ═══════════════════════════════════════════════════════════ */

.input-area,
.chat-input-area,
.chat-input-wrapper {
  flex-shrink: 0 !important;
  /* position:fixed を廃止 → flexレイアウトで自然に最下部に固定 */
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 50;
}

/* ═══════════════════════════════════════════════════════════
   10. WORKSPACE PANEL — 右パネル（幅固定・MainColumn圧迫禁止）
   ═══════════════════════════════════════════════════════════ */

.workspace-panel,
.unified-workspace-panel,
#workspacePanel {
  width: 400px;
  min-width: 320px;
  max-width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* position:fixed 廃止 → flex子要素として配置 */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Workspace非表示時 */
.workspace-panel[style*="display:none"],
.workspace-panel[style*="display: none"] {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

/* Workspace内部スクロール */
.workspace-panel .uw-content,
.workspace-panel .workspace-content,
.workspace-panel [class*="-content"] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   11. WORKSPACE OPEN STATE — input-area の right 調整廃止
   ═══════════════════════════════════════════════════════════ */

/* position:fixed 廃止により、.workspace-open .input-area の right 調整は不要 */
.workspace-open .input-area {
  right: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   12. TIMELINE — 内部スクロール（画面を押し広げない）
   ═══════════════════════════════════════════════════════════ */

.uw-timeline,
.timeline-content,
[class*="timeline"] {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   13. STREAM PANEL — チャット内の実行ログパネル
   ═══════════════════════════════════════════════════════════ */

.stream-panel {
  flex-shrink: 0;
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.stream-panel.collapsed {
  max-height: 40px;
}

.stream-log {
  overflow-y: auto;
  max-height: 160px;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   14. CSS VARIABLES — 高さ管理の一元化
   ═══════════════════════════════════════════════════════════ */

:root {
  --header-height: 56px;
  --input-area-height: 80px;
  --sidebar-width: 240px;
  --workspace-width: 400px;
  --workspace-width-mobile: 100%;
}

/* ═══════════════════════════════════════════════════════════
   15. RESPONSIVE — PC / Tablet / Mobile
   ═══════════════════════════════════════════════════════════ */

/* PC: 3カラム（sidebar + chat + workspace） */
@media (min-width: 1024px) {
  .thread-sidebar {
    width: var(--sidebar-width);
  }
  .workspace-panel,
  .unified-workspace-panel,
  #workspacePanel {
    width: var(--workspace-width);
  }
}

/* Tablet: 2カラム（chat + workspace、sidebar非表示） */
@media (min-width: 768px) and (max-width: 1023px) {
  .thread-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
  }
  .workspace-panel,
  .unified-workspace-panel,
  #workspacePanel {
    width: 320px;
    min-width: 280px;
  }
}

/* Mobile: 1カラム（chat優先、workspace Bottom Sheet） */
@media (max-width: 767px) {
  .appLayout {
    flex-direction: column;
  }

  .chat-layout {
    flex-direction: column;
  }

  .thread-sidebar {
    width: 100%;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
  }

  .thread-sidebar.mobile-open {
    height: auto;
    max-height: 60vh;
    overflow-y: auto;
  }

  .center-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .center-chat .chat-area,
  .center-chat #chatArea,
  .center-chat #chatMessages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .center-chat .input-area,
  .center-chat .chat-input-area {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50;
  }

  /* Workspace: Bottom Sheet */
  .workspace-panel,
  .unified-workspace-panel,
  #workspacePanel {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 0;
    max-height: 70vh;
    overflow: hidden;
    z-index: 1200;
    border-radius: 16px 16px 0 0;
    transition: height 0.3s ease;
    flex-shrink: 0;
  }

  .workspace-panel.mobile-open,
  .unified-workspace-panel.mobile-open,
  #workspacePanel.mobile-open {
    height: 60vh;
  }

  /* モバイルでの input-area */
  .input-area,
  .chat-input-area {
    padding: 10px 12px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. OVERFLOW AUDIT — 禁止パターンの上書き
   ═══════════════════════════════════════════════════════════ */

/* body scroll 禁止（パッチによる上書きを防ぐ） */
body {
  overflow: hidden !important;
}

/* workspace が MainColumn を圧迫しないよう保護 */
.center-chat {
  min-width: 0 !important;
  flex: 1 !important;
}

/* 多重 100vh 禁止 */
.page-body,
.main-wrapper {
  min-height: 0 !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   17. ABSOLUTE POSITION 制限
   ═══════════════════════════════════════════════════════════ */

/* モーダル・オーバーレイ: position:fixed は許可 */
.modal-overlay,
.notification-panel,
.upsell-toast,
.dropdown-menu,
[class*="-overlay"],
[class*="-modal"] {
  /* これらのみ position:fixed を許可 */
}

/* input-area の position:fixed を強制解除 */
.input-area:not(.modal-overlay):not([class*="-overlay"]) {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   18. PERFORMANCE — 不要な再描画を防ぐ
   ═══════════════════════════════════════════════════════════ */

.chat-area,
.thread-sidebar-content,
.workspace-panel .uw-content {
  will-change: scroll-position;
  contain: layout style;
}

.workspace-panel {
  contain: layout;
}