/*
 * 102 Phase 1 Step 4: ドット絵共同制作スペース ロビー画面
 *
 * カードあたりの構成:
 *   .collab-card__thumb    背景画像 (live_event_backgrounds の縮小サムネ)
 *     .collab-card__slots   配置レイヤー (絶対配置)
 *       .collab-card__slot  各 slot (canvas を含む)
 *   .collab-card__stats    参加者数 / 配置数
 *   .collab-card__entry|__enter-button    入室導線または案内文
 */

.collab-lobby {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.collab-lobby__header {
  margin-bottom: 1.25rem;
}

.collab-lobby__title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text-primary);
}

.collab-lobby__empty {
  color: var(--text-secondary);
  padding: 2rem 0;
  text-align: center;
}

.collab-lobby__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.collab-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.75rem;
}

/* --- サムネ枠 (16:9, 大型キャンバス 960x540 と同比率) --- */
.collab-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-secondary);
  background-size: cover;
  background-position: center;
  border-radius: calc(var(--card-radius) * 0.75);
  overflow: hidden;
}

.collab-card__slots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.collab-card__slot {
  position: absolute;
  /* left/top/zIndex は Stimulus 側で設定 */
}

.collab-card__slot canvas {
  display: block;
  image-rendering: pixelated;
}

/* --- LP /pixel_art 用の完全プレビュー (full-render) --- */
/*
 * 仮想 960x540 座標系を decoration_slot_renderer.applyGeometry が px 直値で
 * 配置する。 親 .collab-card__thumb のサムネ実描画幅に応じて --collab-canvas-scale
 * (controller の ResizeObserver で更新) を介して縮小する。
 * show 画面の .collab-space__slots / .collab-space__bg-decoration-layer と同じ仕組み。
 */
.collab-card__bg-decoration-layer,
.collab-card__slots--full {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  transform-origin: top left;
  transform: scale(var(--collab-canvas-scale, 1));
  pointer-events: none;
}

.collab-card__bg-decoration-layer {
  z-index: 0;
}

.collab-card__slots--full {
  z-index: 1;
}

.collab-card__decoration-slot {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

.collab-card__decoration-slot canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* --- 統計 --- */
.collab-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.collab-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.collab-card__stat dt {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

.collab-card__stat dd {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.collab-card__stat-max {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --- 入室ボタン --- */
.collab-card__enter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.collab-card__enter-button:hover {
  filter: brightness(0.92);
}

.collab-card__enter-button--disabled,
.collab-card__enter-button[aria-disabled="true"] {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border-color);
  pointer-events: none;
}

/* --- ガイダンス (未ログイン / easy_login) --- */
.collab-card__entry--guidance {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.collab-card__entry-message {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.collab-card__entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.collab-card__entry-link {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.875rem;
  text-decoration: none;
}

.collab-card__entry-link:hover {
  background: var(--hover-bg);
}

.collab-card__entry-link--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

.collab-card__entry-link--primary:hover {
  /* base .collab-card__entry-link:hover の background が specificity 同列で先勝ち、
     accent 背景が薄白 (--hover-bg) に上書きされて text-on-accent との対比が崩れる事象を防ぐ。
     accent を明示再指定し brightness で微減のみ */
  background: var(--accent);
  filter: brightness(0.92);
}

/* =================================================================
 * Step 5a: スペース内画面 (show)
 * ================================================================= */

.collab-space {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- 5c-1d: 2 カラムレイアウト (左: 個人エディタ / 右: スペース固有 UI)
   DOM 順序は main → sidebar の順なので grid-template-columns で main を左に配置 --- */
.collab-space__layout {
  display: grid;
  grid-template-columns: minmax(640px, 2fr) minmax(360px, 1fr);
  gap: 1rem;
  align-items: start;
}

.collab-space__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Phase 2 改修: ビュー高さに固定し、内部要素 (canvas-wrap / participants / shelf / chat) を順に並べ、
     チャットを最後に flex 拡張で残りスペースを埋める。サイドバー全体のスクロールは無し。
     一画面でチャットまで見せるための要件。チャット内 messages のみ overflow-y: auto。 */
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  min-height: 0;
}

/* Phase 2 改修: チャットセクションがサイドバー残りスペースを埋め、
   le-chat-panel 内の le-chat-messages のみがスクロール可能。 */
.collab-space__chat.le-chat-section {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 8rem;
}
.collab-space__chat.le-chat-section .le-chat-toggle {
  cursor: default;
  pointer-events: none;
}
.collab-space__chat.le-chat-section .le-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.collab-space__chat.le-chat-section .le-chat-messages {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* 素材棚ヘッダ: 「素材棚」見出しと「素材を探す」ボタンを横並びに */
.collab-space__shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.collab-space__shelf-empty {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* 大型キャンバス右上に absolute 配置する拡大ボタン (旧 .collab-space__canvas-actions 廃止)。
   canvas の上にアイコンだけ重ねる minimal UI。 */
.collab-space__expand-corner {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.55); /* design-allow: color-literal — 明色背景でも視認確保するための半透明黒 */
  color: var(--text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
}
.collab-space__expand-corner:hover {
  background: rgba(0, 0, 0, 0.75); /* design-allow: color-literal — 同上 hover 強調 */
}
/* 拡大表示中 (canvas-wrap--expanded) では右上ボタンを隠す (代わりに上部 toolbar の閉じるを使う) */
.collab-space__canvas-wrap--expanded .collab-space__expand-corner {
  display: none;
}

/* picker モーダル内の素材アイコン (lh-reaction-card 流用)。
   shelf-item は header 内独自スタイル (下部 .collab-space__shelf-item) を使う。 */
.collab-space__material {
  position: relative;
  cursor: pointer;
}
.collab-space__material canvas {
  width: 3rem;
  height: 3rem;
  image-rendering: pixelated;
}
.collab-space__material.lh-reaction-card {
  padding: 0.4rem 0.3rem;
}
/* おすすめ素材は header 内に横一列で並べる。
   shelf-list 自身は両軸 visible (clip しない/スクロールバー出さない)。
   横方向の末尾省略は親 .collab-space__header の overflow-x: clip で行う。 */
.collab-space__shelf-list {
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* shelf-item 自体は lh-reaction-card 不使用 (header 内サイズ最適化のため独自) */
.collab-space__shelf-item {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background: var(--card-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  /* 通常状態の z-index 確保 (隣の item と重なり合っても消えないよう) */
  z-index: 1;
}
.collab-space__shelf-item:hover {
  border-color: var(--accent);
  /* hover 時はエフェクトを優先表示するため最前面に */
  z-index: 5;
}
.collab-space__shelf-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  z-index: 5;
}
.collab-space__shelf-item canvas {
  width: 1.8rem;
  height: 1.8rem;
  image-rendering: pixelated;
  /* drop-shadow / brightness の余白を border 外まで広げるため、はみ出し許可 */
  overflow: visible;
}

/* サイズ不一致 (元素材 size > 編集中 size) でインポート不可な素材の disable 表示。
   shelf / picker モーダル内 material 両方で使える共通スタイル。 */
.collab-space__shelf-item.is-disabled,
.collab-space__material.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.collab-space__shelf-item.is-disabled:hover,
.collab-space__material.is-disabled:hover {
  border-color: var(--border-color);
}

/* クリック不可時の説明ツールチップ。target li の上端に absolute で重ねて 2.4 秒表示 */
.collab-space__shelf-tip {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  color: var(--text-primary);
  font-size: 0.72rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
.collab-space__shelf-tip.is-visible { opacity: 1; }
.collab-space__shelf-unpin {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.collab-space__shelf-unpin:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* picker モーダル内の size フィルタ chip (radio をボタン風に) */
.collab-space__materials-filter {
  margin-bottom: 0.75rem;
}
.collab-space__materials-size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.collab-space__materials-size-chips input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.collab-space__materials-size-chips label {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.collab-space__materials-size-chips input[type="radio"]:checked + label {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.collab-space__main {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.75rem;
  min-width: 0; /* grid 内で子の overflow を防ぐ */
}

.collab-space__editor-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}

.collab-space__editor-loading i {
  margin-right: 0.5rem;
}

/* --- 計画 106 Phase 6: 個人作業エディタの単体 / 合成タブ ---
   観戦モード時は外側 .collab-space--observation-only .collab-space__main の
   pointer-events:none / opacity:0.5 が継承されるためタブも自動で操作不可になる */
.collab-space__personal-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
}

.collab-space__personal-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: calc(var(--card-radius) * 0.5) calc(var(--card-radius) * 0.5) 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin-bottom: -1px;
}

.collab-space__personal-tab:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.collab-space__personal-tab--active {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.collab-space__personal-tab--locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.collab-space__personal-panel {
  min-width: 0;
}

/* --- Phase 5: 観戦モード用フッタ案内 (PC で編集できる旨をスマホで明示) --- */
.collab-space__mobile-notice {
  display: none;
  padding: 0.5rem 0.75rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}

.collab-space__mobile-notice i {
  margin-right: 0.4rem;
}

.collab-space__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  /* shelf-list の幅不足時に末尾を省略する。縦方向は visible で
     shelf-item の drop-shadow / brightness エフェクトが上下にはみ出る余白を許す。
     overflow-x: hidden + overflow-y: visible は CSS 仕様で auto 強制 → スクロールバー出現
     のため、header 自体は overflow: clip で「軸ごとの clip 制御」を使う。
     overflow: clip は scroll context を作らずに clip だけ行う。 */
  overflow-x: clip;
  overflow-y: visible;
}

.collab-space__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* おすすめ素材セクション (header 内に label + 横並び素材 + + ボタン を 1 行で詰める) */
.collab-space__shelf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  /* shelf-item canvas のエフェクト (drop-shadow) が縦方向にはみ出るので clip しない */
  overflow: visible;
}

.collab-space__shelf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.collab-space__shelf-label i {
  color: var(--accent);
}

/* + 追加ボタン (label 付き、見つけやすく) */
.collab-space__shelf-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 0.4rem;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.collab-space__shelf-add:hover {
  background: rgba(var(--accent-rgb), 0.22);
}
.collab-space__shelf-add i { font-size: 0.85rem; }

.collab-space__members {
  margin: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.collab-space__members-max {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --- 大型キャンバス --- */
/* 通常表示の canvas-wrap は「カード枠」をやめて単純なコンテナにする。
   旧実装の background/border/border-radius/padding は canvas (16:9) の
   上下や角に「カード余白」として薄白色が出る原因だった。
   canvas 自体の背景画像 (16:9) を直接表示し、 canvas-actions は gap で下に並べる。 */
.collab-space__canvas-wrap {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Phase 6-3.2: 通常時は LEFDS 同型の周辺 UI (toolbar / selected-info / palette / motion-section) を非表示。
   class 名は live_event_bg_editor.css の lefds-* と共有 (DOM 同型化済) で、 collab-space__lefds-* は
   識別子としての名前空間 prefix。 lefds-* 単体の display 値は LEFDS CSS で「拡大していない時に表示する想定」
   になっているため、 collab 側 prefix で確実に hide する */
.collab-space__lefds-toolbar,
.collab-space__lefds-selected-info,
.collab-space__lefds-palette { display: none; }
/* lefds-motion-section / lefds-drawing-hint は LEFDS 側で hidden 属性ベースで制御済 (= [hidden] で display:none)。
   ここで強制 hide すると drawingHint や motionSection が enable 時に表示できなくなるため触らない */

/* 5c-1l-step2: 拡大表示オーバーレイ。
   画面全体を覆う grid layout で 上部 toolbar / 中央 canvas / 下部 info panel に分離。
   画像 (canvas) の上には UI を一切載せない (decoration_slots editor 風)。

   z-index 9999: pixel_art_editor のモーダル (10000 系) より下、 通常 UI より十分上。
   controller で body 直下に portal 化するため、 sidebar の position:sticky+overflow
   が作る stacking context の影響を受けない。 */
.collab-space__canvas-wrap--expanded {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  padding: 0.75rem;
  border-radius: 0;
  background: var(--canvas-overlay-backdrop-bg);
  /* 105: grid 行 1fr が canvas の natural height で押し広げられて画面外にはみ出る事案への保険。
     overflow: hidden で grid がオーバーレイを超えないようにクリップ */
  overflow: hidden;
  display: grid;
  /* v1.21 (B): lefds-layout と同パターン。 1 行目 toolbar、 2 行目 左 palette + 中央 canvas、
     3 行目 palette continue + info (canvas のすぐ下、 palette の右に並ぶ)。
     palette を 2-3 行 span で縦長にし、 info は canvas 直下に出す (Phase 6-3-g)。
     palette を持たない端末 (狭幅) でも崩れないよう minmax 採用 */
  grid-template-columns: minmax(160px, 200px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "toolbar toolbar"
    "palette canvas"
    "palette info";
  gap: 0.5rem;
  align-items: stretch;
  justify-items: stretch;
}
/* PC でグローバルサイドバー (.sidebar, position:fixed left:0 width:--sidebar-width) が
   表示されている時、 拡大表示の左端 (palette カラム) がサイドバーに被って見えなくなる。
   サイドバーの幅だけ右にずらす。
   - body.sidebar-collapsed 時はサイドバー自体が translateX(-100%) で隠れるため inset:0 のまま
   - スマホ (max-width: 991.98px) もデフォルト translateX(-100%) で隠れるため inset:0 のまま */
@media (min-width: 992px) {
  body:not(.sidebar-collapsed) .collab-space__canvas-wrap--expanded {
    left: var(--sidebar-width);
  }
  /* Phase 6-3-f: 拡大表示中は global sidebar も hide するため、 left オフセットを打ち消して全画面 inset: 0 に戻す */
  body[data-canvas-expanded="true"] .collab-space__canvas-wrap--expanded {
    left: 0;
  }
}
/* Phase 6-3.2: lefds-* 周辺 UI を grid_template_areas に配置。
   拡大時のみ display:flex (LEFDS CSS の値) に復帰させる。 */
.collab-space__canvas-wrap--expanded .collab-space__lefds-toolbar { grid-area: toolbar; display: flex; }
.collab-space__canvas-wrap--expanded .collab-space__lefds-palette  { grid-area: palette; display: flex; flex-direction: column; min-height: 0; }
/* 105: canvas を grid セルに contain させる。 toolbar / info / palette の高さに応じて
   1fr 行が縮んでも canvas が 16:9 を維持したまま中に収まる。 width / height ともにセル境界を上限にし、
   aspect-ratio で常に 16:9 を保持する */
.collab-space__canvas-wrap--expanded .collab-space__canvas         {
  grid-area: canvas;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  align-self: center;
  justify-self: center;
  min-width: 0;
  min-height: 0;
}
.collab-space__canvas-wrap--expanded .collab-space__lefds-selected-info { grid-area: info; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; background: var(--canvas-overlay-button-bg); border-radius: 0.5rem; box-shadow: var(--canvas-overlay-button-shadow); color: var(--text-primary); font-size: 0.875rem; max-height: 40vh; overflow-y: auto; }
/* Phase 6-3-i fix: 上の display:flex は specificity (0,2,0) で `[hidden]` 属性 (0,1,0) に勝ってしまうため、
   未選択時に hidden 属性付与しても visible のまま (実機ユーザー報告 2026-05-09)。
   `[hidden]` 同 specificity の rule で display:none を確実に強制する */
.collab-space__canvas-wrap--expanded .collab-space__lefds-selected-info[hidden] {
  display: none;
}

/* Phase 6-3-t: 自分のドット絵 / 合成タブ内の box 切替 sub-tab。
   palette body 上部に横並び配置、 active box は accent 強調 */
.collab-space__palette-sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.collab-space__palette-sub-tab {
  padding: 0.2rem 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.collab-space__palette-sub-tab:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-primary);
}
.collab-space__palette-sub-tab--active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: var(--accent);
}

/* Phase 6-3-v: palette タイトル行 (タイトル + reload ボタンを横並び) */
.collab-space__palette-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.collab-space__palette-title-row .lefds-palette-title { margin-bottom: 0; }

.collab-space__palette-reload {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.collab-space__palette-reload:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border-color: var(--accent);
}
.collab-space__palette-reload:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Phase 6-3-u: 他ユーザー提供タブ「もっと読み込む」 button */
.collab-space__palette-load-more {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.collab-space__palette-load-more:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}
.collab-space__palette-load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Phase 6-3-k: 経路移動時の motion-section が縦長で使いにくい問題への対応 (実機ユーザー報告 2026-05-09)。
   info panel 内の各 row と一貫して flex 横並び + wrap で配置する。
   Phase 6-3-l: 経路移動設定中であることを視覚的に明示するため、 アクセントカラーで縁取り + 半透明背景 */
.collab-space__canvas-wrap--expanded .collab-space__motion-section,
.collab-space__canvas-wrap--expanded .lefds-motion-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  background: rgba(var(--accent-rgb), 0.08);
}
/* hidden 属性での hide が flex 設定で打ち消されないようにする (Phase 6-3-i fix と同じ手当) */
.collab-space__canvas-wrap--expanded .collab-space__motion-section[hidden],
.collab-space__canvas-wrap--expanded .lefds-motion-section[hidden] {
  display: none;
}

/* 105: lefds-z-controls 系 (重なり / 親子 切替ウィジェット) も [hidden] 強制で確実に消す。
   .lefds-z-controls { display: flex } が [hidden] と specificity 同値で勝つため、
   選択肢ゼロ時の「1/1 が見える」 「使えないボタンが残る」 事案を回避する */
.collab-space__canvas-wrap--expanded .collab-space__overlap-stack[hidden],
.collab-space__canvas-wrap--expanded .collab-space__family-stack[hidden] {
  display: none;
}
/* family の中のボタン単体 hidden も同様に強制 (lefds-z-btn が button 既定 display を上書きする可能性への保険) */
.collab-space__canvas-wrap--expanded .collab-space__family-stack .lefds-z-btn[hidden] {
  display: none;
}

/* 105: 親追従中以外で表示する own-fields ラッパーは、 親 motion-section の flex-wrap context に
   row 単位で参加させる。 ラッパー自身は flex-basis 100% で一度改行を作り、 内部の各 row を
   flex-wrap で詰めて配置することで「経路ボタン / 周期 / 回転 / 角度 / 遅延 / freeze 系チェック」 を
   横スペース最大限に詰める (旧: 1 項目 1 行で縦長になる事案の解消) */
.collab-space__canvas-wrap--expanded .collab-space__motion-own-fields {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}
.collab-space__canvas-wrap--expanded .collab-space__motion-own-fields[hidden] {
  display: none;
}

/* Phase 6-3-i: 未選択時の操作説明 hint。 selected-info と同じ info grid-area に配置、
   selected-info と排他で表示 (controller _renderExpandedInfo で hidden 属性 toggle) */
.collab-space__canvas-wrap--expanded .collab-space__info-empty-hint {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--canvas-overlay-button-bg);
  border-radius: 0.5rem;
  box-shadow: var(--canvas-overlay-button-shadow);
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.collab-space__info-empty-hint[hidden] {
  display: none;
}
/* 通常表示時 (拡大表示外) は empty hint も hide */
.collab-space__info-empty-hint {
  display: none;
}

/* (A) 拡大表示時の z-index 漏れ対策。
   header の overflow-x: clip による stacking context、
   collab-space__main 内の pixel_art_manager が持つ import モーダル / size バッジ
   (`.pxe-import-cell-size` 等) も含め、 拡大画像 (z-index 9999) を貫通して
   手前に出る要素を一括で消す。

   戦略: 拡大時に collab-space__header と collab-space__layout を
   visibility: hidden で消し、 layout の子孫である canvas-wrap--expanded のみ
   visibility: visible で明示復帰する。 visibility は子孫に継承されるため、
   1 段の上書きで拡大画像本体だけ表示状態に戻せる。 position: fixed であっても
   祖先の visibility 継承は効くので、 stacking context の問題に縛られず確実に消せる。
   pointer-events: none も合わせ、 念のためクリックも貫通させない。
   ただし dialog (showModal で top-layer に乗る要素) は body 直下扱いになるため
   collab-space__layout の visibility 継承を受けず、 picker / 背景選択 / 全消し確認
   などはこれまで通り拡大表示の上に重ねて使える。 */
body[data-canvas-expanded="true"] .collab-space__header,
body[data-canvas-expanded="true"] .collab-space__layout {
  visibility: hidden;
  pointer-events: none;
}
body[data-canvas-expanded="true"] .collab-space__canvas-wrap--expanded {
  visibility: visible;
  pointer-events: auto;
}
/* Phase 6-3-f: 拡大表示中はグローバル topbar (検索バー / 言語切替 / 通知 / アバター) と
   グローバル sidebar を hide する。
   理由: collab-space__canvas-wrap--expanded は z-index: 9999 だが、
   親の .collab-space__sidebar が position: sticky で stacking context を作っているため、
   z-index 9999 は sidebar の stacking context 内でしか有効でない。 sidebar 自身は z-index auto で
   root レベルでは topbar (z-index 1030) より下に積まれ、 結果 topbar が canvas-wrap の上に被さる。
   拡大表示中は集中モードなので global UI を消すことで根本解決 (実機ユーザー報告 2026-05-09) */
body[data-canvas-expanded="true"] .topbar,
body[data-canvas-expanded="true"] .sidebar {
  display: none;
}
/* dialog[open] (showModal で top-layer に乗る素材 picker / 背景選択 / 全消し確認 など) は
   layout 配下にあるので visibility 継承で消えてしまう。 拡大時も使えるよう明示復帰。 */
body[data-canvas-expanded="true"] dialog[open] {
  visibility: visible;
  pointer-events: auto;
}

/* Phase 6-3.2: 拡大時のみ表示する palette。 lefds-palette の display は LEFDS CSS でデフォルト
   visible だが、 collab 側 prefix `.collab-space__lefds-palette` で通常時 hide → 拡大時 flex 復帰。
   背景 + shadow は collab overlay 専用の見た目調整 */
.collab-space__canvas-wrap--expanded .collab-space__lefds-palette {
  align-self: stretch;
  padding: 0.5rem 0.6rem;
  background: var(--canvas-overlay-button-bg);
  border-radius: 0.5rem;
  box-shadow: var(--canvas-overlay-button-shadow);
  overflow: hidden;
  min-height: 0;
  /* LEFDS の lefds-palette は固定 width 220px だが、 collab 拡大時は grid_template_columns で
     minmax(160px, 200px) に従わせる必要があるため width を width:auto で上書き */
  width: auto;
  max-height: none;
}

/* Phase 6-3.2: 拡大時の save ボタン (LEFDS の bge-save-btn の見た目を維持しつつ shadow 追加) */
.collab-space__canvas-wrap--expanded .bge-save-btn,
.collab-space__canvas-wrap--expanded .bge-cancel-btn,
.collab-space__canvas-wrap--expanded .bge-action-btn {
  box-shadow: var(--canvas-overlay-button-shadow);
}

/* 5c-1k: 中央の canvas は画像の自然サイズに従う。
   max-width / max-height でビューポートに収まる。 grid 2 行目 */
.collab-space__canvas-wrap--expanded .collab-space__canvas {
  width: auto;
  height: auto;
  border-radius: 0;
  display: flex;
  align-self: center;
  justify-self: center;
}

.collab-space__canvas-wrap--expanded .collab-space__canvas-bg {
  width: auto;
  height: auto;
  /* 上部 toolbar / 下部 info panel + 左 palette (200px + gap) を控除した残りに収める。
     v1.21 で palette が左に追加されたため横方向の控除を増やした */
  max-width: calc(100vw - 200px - 2rem);
  max-height: calc(100vh - 10rem);
}

/* Phase 6-3.2: lefds-selected-info の display flex 復帰は canvas-wrap--expanded の grid 配置 rule で
   設定済 (line ~617)。 共同スペース固有 controls (rotate slider/input + unit) のラッパー rule */
.collab-space__info-rotate-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 105: 親 / 子 関係を持つ slot は wrapper の隅に小さなバッジを出して、 重なって表示された
   時にも視覚的に識別できるようにする。 アクセントカラーで親、 補助色で子 */
.collab-space__slot.is-collab-parent::before,
.collab-space__slot.is-collab-child::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px var(--canvas-overlay-backdrop-bg);
}
.collab-space__slot.is-collab-parent::before {
  background: var(--accent);
}
.collab-space__slot.is-collab-child::before {
  background: var(--text-secondary);
  left: auto;
  right: 2px;
}

/* 個別 effect 選択 (pixel_art_manager と同型のボタン視覚)。
   選択中のエフェクトをサマリーボタン 1 つだけ inline 表示し、 クリックで全候補メニュー
   (.collab-space__info-effect-menu) を popover として展開する。 info パネルの他要素
   (rotate / z-controls 等) と同じ行に並ぶよう relative 配置 + inline-flex を用いる。 */
.collab-space__info-effect.pxe-effect-section {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
}

/* サマリーボタン: 横長レイアウト (アイコン + ラベル + chevron) */
.collab-space__info-effect-current.pxe-effect-btn {
  flex-direction: row;
  gap: 0.35rem;
  padding: 4px 8px;
}
.collab-space__info-effect-current .pxe-effect-btn__name {
  font-size: 0.75rem;
}
.collab-space__info-effect-caret {
  font-size: 0.65rem;
  opacity: 0.6;
  transition: transform 0.15s;
}
.collab-space__info-effect-current[aria-expanded="true"] .collab-space__info-effect-caret {
  transform: rotate(180deg);
}

/* popover メニュー: info パネルが拡大表示の最下行 (grid-area: info) にあるため、
   下方向ではなく上方向 (サマリーボタンの真上) に展開して画面外にはみ出さないようにする。
   親 (canvas-wrap--expanded) は z-index 9999 の独立 stacking context なので popover の
   z-index は親内での相対値として大きめにする (motion-section 等の info 内子要素より上)。 */
.collab-space__info-effect-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 100;
  padding: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--player-menu-shadow);
  width: max-content;
  max-width: min(420px, 90vw);
  justify-content: flex-start;
}
.collab-space__info-effect-menu[hidden] {
  display: none;
}

/* Phase 6-3.2: motion-row / motion-label / motion-range / motion-readout / motion-input /
   motion-radio / motion-check / draw-btn / drawing-hint / z-btn / z-controls / z-btns 等の
   通常 rule は live_event_bg_editor.css の lefds-* prefix で定義済 (LEFDS と同型 DOM)。
   collab 固有 prefix の上書きは不要。 path-layer / path-temp / canvas--drawing は
   描画モード関連で collab 固有なので維持。 */
.collab-space__path-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.collab-space__path-temp {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.85;
}

.collab-space__canvas--drawing {
  cursor: crosshair;
}

/* 通常時の canvas-actions (拡大ボタン) は拡大時に重複しないよう非表示。 grid 4 行目 (空) */
.collab-space__canvas-wrap--expanded .collab-space__canvas-actions {
  display: none;
}

.collab-space__canvas {
  position: relative;
  width: 100%;
  /* 5c-1k: 高さは中の <img.collab-space__canvas-bg> の自然サイズで決まる。
     aspect-ratio や background-color は使わない (上下余白と背景色の出現原因) */
  border-radius: calc(var(--card-radius) * 0.75);
  overflow: hidden;
  /* drag-over 時の視覚的フィードバック (Step 5b-3) */
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.1s ease;
}

.collab-space__canvas-bg {
  display: block;
  width: 100%;
  height: auto;
  /* 配置の % 座標基準は画像領域。画像の上に slot を絶対配置するための土台。 */
  user-select: none;
  -webkit-user-drag: none;
}

/* 背景未設定時の枠 (banned/deleted/未選択)。 元 img と同じ 16:9 領域を確保し、
   破線 + アイコン + 案内文 + 背景変更ボタンを表示する */
.collab-space__canvas-bg--missing {
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 1rem;
}
.collab-space__canvas-bg--missing i {
  font-size: 2.5rem;
  opacity: 0.5;
}
.collab-space__canvas-bg--missing p {
  margin: 0;
  font-size: 0.9rem;
  max-width: 28rem;
}

.collab-space__canvas--drag-over {
  outline-color: var(--accent);
}

.collab-space__slots {
  /* Phase 6-1: 仮想 960x540 座標系で px 直値配置するため、 親と同じ scale 仕組みに揃える。
     bg-decoration-layer と同じく親 .collab-space__canvas に setProperty された
     --collab-canvas-scale を継承して transform で縮小する。
     slot クリックを受け取れるよう pointer-events は親既定 (auto) に依存 */
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  transform-origin: top left;
  transform: scale(var(--collab-canvas-scale));
}

/* Phase 3-1: 背景画像が持つ固定アイテム (lebds) 用の重ねレイヤー。
   配置 (slots) より下、 背景画像より上。
   slot は仮想 960x540 座標系の px 直値で位置されるため、 親 .collab-space__canvas の
   実描画幅に応じて scale で縮小する。 controller (ResizeObserver) が
   --collab-canvas-scale を 「clientWidth / 960」で更新する。
   read-only なので pointer-events は塞ぎ、 拡大時のクリック操作 (slot 選択等) と干渉させない */
.collab-space__bg-decoration-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  transform-origin: top left;
  /* --collab-canvas-scale は theme.css に fallback=1 を定義済。 JS が ResizeObserver で
     canvas 実描画幅に応じて setProperty で更新する */
  transform: scale(var(--collab-canvas-scale));
  pointer-events: none;
  /* 各 slot 自体は absolute 配置 (renderer が style.left/top を設定する) */
}

.collab-space__bg-decoration-slot {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

.collab-space__slot {
  position: absolute;
  /* 通常表示は閲覧専用 (操作 UI は拡大時のみ提供する 5c-1l 方針)。
     拡大表示時のみ pointer-events を有効にしてドラッグ移動 / 選択を受ける。 */
  pointer-events: none;
}

.collab-space__canvas-wrap--expanded .collab-space__slot {
  pointer-events: auto;
  cursor: grab;
}

.collab-space__slot:active {
  cursor: grabbing;
}

/* Phase 6-3-e: outline は wrapper でなく inner に持たせて rotation 追従させる
   (旧実装は wrapper 直下の outline で、 inner だけ rotation するため枠が追従しなかった) */
.collab-space__slot--selected .collab-space__slot-inner {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Phase 3-3 Step 4b/4c: rotation と effect の transform 競合解消用 二重 wrapper。
   inner に rotation transform、 canvas (inner の子) に effect の keyframes。
   resize handle / delete button / lock indicator は wrapper 直下のままで rotation 非追従。
   Phase 6-1: renderSlots (utils/decoration_slot_renderer) が wrapper を px 直値の
   width/height で描画する三層構造に変えたため、 inner は親 wrapper に追従する 100% で良い。
   inner を width auto のまま放置すると position:absolute 親の shrink-to-fit で潰れて
   canvas が 0px になり描画されない */
.collab-space__slot-inner {
  display: block;
  width: 100%;
  height: 100%;
}

/* Phase 3-3 個別 slot ロック関連 CSS (locked-by-other / slot-lock-indicator) は Phase 6-6 で廃止 */

/* 5c-1l-step3: resize ハンドル + delete ボタン (各 slot に直接付与)。
   通常時 / 非選択時 / 非拡大時は非表示。 拡大時 + 選択中の slot にだけ表示する。 */
.collab-space__slot-handle,
.collab-space__slot-delete {
  display: none;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-handle--resize {
  display: block;
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-delete {
  display: flex;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--color-danger);
  color: var(--text-on-accent);
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  pointer-events: auto;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-delete:hover {
  filter: brightness(0.92);
}

/* Phase 6-3.10-fix: button 内の Bootstrap Icons (`<i class="bi bi-x">`) を click event 透過にする。
   実機で × アイコン中央 (= i 領域) を click すると button click listener が起動しない事象あり (2026-05-09)。
   i に pointer-events: none を設定すると click は button まで直接届くため、 中央 click でも削除される */
.collab-space__slot-delete > i,
.collab-space__slot-delete .bi {
  pointer-events: none;
}

/* Phase 6-3-e: rotate handle (slot 上のつまみ)。 inner の child で rotation と一緒に追従する。
   slot 上端の中央から少し上に飛び出す位置で表示し、 接続線 (::before) で slot との関係を可視化する */
.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-handle--rotate {
  display: block;
  position: absolute;
  top: -28px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--accent);
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-handle--rotate:active {
  cursor: grabbing;
}

/* handle と slot 上端を結ぶ縦線 (操作対象の関連を示す) */
.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected
  .collab-space__slot-handle--rotate::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: var(--accent);
}

/* 通常表示や非選択時は rotate handle を隠す (resize / delete と同方針) */
.collab-space__slot-handle--rotate {
  display: none;
}

/* 5c-1l-step3 (B): canvas 端付近の slot では handle/delete を反対側に反転 */
.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected.collab-space__slot--edge-right
  .collab-space__slot-handle--resize {
  right: auto;
  left: -8px;
  cursor: nesw-resize;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected.collab-space__slot--edge-bottom
  .collab-space__slot-handle--resize {
  bottom: auto;
  top: -8px;
  cursor: nesw-resize;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected.collab-space__slot--edge-right.collab-space__slot--edge-bottom
  .collab-space__slot-handle--resize {
  cursor: nwse-resize;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected.collab-space__slot--edge-right
  .collab-space__slot-delete {
  right: auto;
  left: -10px;
}

.collab-space__canvas-wrap--expanded
  .collab-space__slot--selected.collab-space__slot--edge-bottom:not(.collab-space__slot--edge-right)
  .collab-space__slot-delete {
  /* 上端反転だけだと delete の位置は変わらない (元から top に近い)。
     ここでは bottom 端配置 + 右端ではない場合のみ左下に反転して通常右上から退避。
     edge-right が効いている場合は left に既に反転済みなので、 そのまま top 反転 = 左下 */
}

/* 5c-1l-step3 (D): キーボード Tab フォーカス時のリング (拡大時のみ) */
.collab-space__canvas-wrap--expanded .collab-space__slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.collab-space__slot canvas {
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

/* --- セクション共通 --- */
.collab-space__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* --- 5c-1d: 参加者一覧 (アバター + 名前 + WIP サムネ + コメント吹き出し)
   class 名はヘッダーの .collab-space__members (人数 0/20 表示用) と
   衝突しないよう .collab-space__participants を使う --- */
.collab-space__participants {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.75rem;
}

.collab-space__member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}

.collab-space__member-card {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative; /* ホバー吹き出しの基準 */
  border-radius: 0.5rem;
}

.collab-space__member-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ホバー時のコメント吹き出し (CSS のみで表示制御) */
.collab-space__member-comment {
  position: absolute;
  bottom: calc(100% + 0.25rem); /* カード上に表示 */
  left: 50%;
  transform: translateX(-50%);
  max-width: 200px;
  width: max-content;
  padding: 0.375rem 0.625rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-size: 0.8125rem;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 吹き出しの三角 (尖った先) */
.collab-space__member-comment::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-color);
}

.collab-space__member-card:hover .collab-space__member-comment:not([hidden]),
.collab-space__member-card:focus-within .collab-space__member-comment:not([hidden]) {
  opacity: 1;
}

.collab-space__member-thumb {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.collab-space__member-thumb canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.collab-space__member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  margin-top: -0.5rem; /* サムネに少し重ねる */
  border: 2px solid var(--card-bg);
}

.collab-space__member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collab-space__member-avatar-default {
  width: 100%;
  height: 100%;
  background: var(--border-color);
}

.collab-space__member-name {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- 5c-1d: 入室時 Welcome ダイアログ --- */
.collab-space__welcome-intro {
  margin: 0 0 1rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.collab-space__welcome-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.collab-space__welcome-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.collab-space__welcome-hint {
  margin: 0.375rem 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* --- 素材一覧 --- */
.collab-space__materials {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.75rem;
}

.collab-space__materials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.5rem;
}

.collab-space__material {
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.collab-space__material:active {
  cursor: grabbing;
}

.collab-space__material--dragging {
  opacity: 0.5;
}

.collab-space__material canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.collab-space__materials-empty {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
  padding: 0.5rem 0;
}

/* --- スペース内チャット (Phase 2 で本実装。5c-1 ではレイアウト占有のみ) --- */
.collab-space__chat {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.75rem;
}

.collab-space__chat-placeholder {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --- 接続切れトースト (CLS 回避: position fixed) --- */
.collab-space__connection-lost {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: var(--color-danger);
  color: var(--text-on-accent);
  border-radius: 0.5rem;
  z-index: 1000;
  margin: 0;
}

/* --- キャンバス操作ボタン群 (5b-1) --- */
/* canvas-wrap が flex column + gap で配置するため、 actions 側の padding/margin は不要 */
.collab-space__canvas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.collab-space__action-button {
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
}

.collab-space__action-button:hover {
  background: var(--hover-bg);
}

.collab-space__action-button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.collab-space__action-button--danger:hover {
  background: rgba(var(--accent-rgb), 0.05);
}

/* Phase 6-3a: 保存ボタンはアクセント色で目立たせる (LEFDS の bge-save-btn 相当) */
.collab-space__action-button--save {
  border-color: var(--color-success);
  color: var(--color-success);
  font-weight: 600;
}

.collab-space__action-button--save:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

/* Phase 6-3c-1: キャンセルボタン (旧「縮小」)。 拡大表示中の保存しないで閉じる動作。
   保存ボタンと視覚的に区別するため、 中立色で軽く強調 */
.collab-space__action-button--cancel {
  border-color: var(--text-muted);
  color: var(--text-muted);
}

/* --- モーダル共通 (<dialog>) --- */
.collab-modal {
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0;
  background: var(--card-bg);
  color: var(--text-primary);
  max-width: 600px;
  width: calc(100vw - 2rem);
}

.collab-modal::backdrop {
  background: var(--card-overlay-bg);
}

.collab-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.collab-modal__title {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.collab-modal__close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.collab-modal__close:hover {
  color: var(--text-primary);
}

.collab-modal__body {
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

.collab-modal__empty {
  color: var(--text-secondary);
  text-align: center;
  padding: 1.5rem 0;
  margin: 0;
}

.collab-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
}

.collab-modal__button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
}

.collab-modal__button:hover {
  background: var(--hover-bg);
}

.collab-modal__button--danger {
  background: var(--color-danger);
  color: var(--text-on-accent);
  border-color: transparent;
}

.collab-modal__button--danger:hover {
  filter: brightness(0.92);
}

.collab-modal__button--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

.collab-modal__button--primary:hover {
  filter: brightness(0.92);
}

.collab-modal--confirm {
  max-width: 420px;
}

/* --- 背景選択グリッド --- */
.collab-bg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.collab-bg-grid__item {
  margin: 0;
}

.collab-bg-grid__button {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 0;
}

.collab-bg-grid__button:hover {
  border-color: var(--accent);
}

.collab-bg-grid__button--current {
  border-color: var(--accent);
  border-width: 3px;
}

/* --- Phase 5: WIP サムネ拡大モーダル (観戦モード時、 サムネタップで開く) --- */
.collab-wip-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(90vw, 480px);
  width: 100%;
}
.collab-wip-modal::backdrop {
  background: var(--card-overlay-bg);
}
.collab-wip-modal__content {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.collab-wip-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.collab-wip-modal__title {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.collab-wip-modal__title-label {
  flex-shrink: 0;
}
.collab-wip-modal__title-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 0;
}
.collab-wip-modal__title-name:not(:empty)::before {
  content: "— ";
}
.collab-wip-modal__close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.collab-wip-modal__canvas-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.collab-wip-modal__canvas-wrap canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}
.collab-wip-modal__empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem 0.5rem;
  font-size: 0.9rem;
}

/* --- Phase 4: ユーザー作成スペース対応 (ロビーセクション + カード kind 表示 + form) --- */

.collab-lobby__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.collab-lobby__action {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  text-decoration: none;
  font-size: 0.9rem;
}

.collab-lobby__action--primary {
  background: var(--accent-color);
  color: var(--text-on-accent);
  border-color: transparent;
}

.collab-lobby__section {
  margin-bottom: 2rem;
}

.collab-lobby__section-title {
  font-size: 1.15rem;
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
}

.collab-lobby__section-empty {
  color: var(--text-secondary);
  padding: 1.25rem 0;
  font-size: 0.9rem;
}

/* --- カード kind ラベル / badge --- */

.collab-card__head {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.collab-card__kind-label {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.collab-card__kind-label--system {
  background: var(--accent-color);
  color: var(--text-on-accent);
}

.collab-card__kind-label--contest {
  background: var(--warning-color);
  color: var(--text-on-accent);
}

.collab-card__badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.collab-card__thumb--missing {
  background-color: var(--bg-secondary);
}

/* C14: 自分のスペースカードに枠線アクセント + バッジ */
.collab-card--mine {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.collab-card__badge--mine {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

/* --- 作成 / 編集 form ページ --- */

.collab-form-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.collab-form-page__header {
  margin-bottom: 1rem;
}

.collab-form-page__title {
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 0;
}

.collab-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 1.25rem;
}

.collab-form__errors {
  background: var(--bg-secondary);
  border: 1px solid var(--danger-color);
  border-radius: var(--card-radius);
  padding: 0.75rem 1rem;
  color: var(--danger-color);
}

.collab-form__errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.collab-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.collab-form__label {
  font-weight: 600;
  color: var(--text-primary);
}

.collab-form__label--sub {
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.collab-form__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.collab-form__bg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.collab-form__bg-item {
  margin: 0;
}

.collab-form__bg-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border: 2px solid transparent;
  border-radius: calc(var(--card-radius) * 0.75);
}

.collab-form__bg-label:has(.collab-form__bg-radio:checked) {
  border-color: var(--accent-color);
}

.collab-form__bg-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.collab-form__bg-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: calc(var(--card-radius) * 0.5);
  background-color: var(--bg-secondary);
}

.collab-form__pw-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.collab-form__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  margin: 0.25rem 0 0.25rem;
}

.collab-form__toggle-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  accent-color: var(--accent-color);
}

.collab-form__toggle-text {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.collab-form__password-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.collab-form__password {
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--card-radius) * 0.5);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
}

.collab-form__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.collab-form__submit {
  padding: 0.6rem 1.25rem;
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  font-size: 0.95rem;
}

.collab-form__cancel {
  color: var(--text-secondary);
  text-decoration: none;
}

.collab-form__destroy {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--danger-color);
  border-radius: var(--card-radius);
}

.collab-form__destroy-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  color: var(--danger-color);
}

.collab-form__destroy-warning {
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.collab-form__destroy-button {
  padding: 0.5rem 1rem;
  background: var(--danger-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
}

/* --- Phase 4: 参加パスワード認証モーダル + 観戦バナー --- */

.collab-join-modal__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--card-radius) * 0.5);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  margin-top: 0.75rem;
}

.collab-join-modal__error {
  margin: 0.5rem 0 0 0;
  color: var(--danger-color);
  font-size: 0.85rem;
}

.collab-space__observation-banner {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--card-radius);
  font-size: 0.85rem;
}

/* 観戦専用モード: 編集系 UI を視覚的に無効化 + 操作禁止 (CSS のみで achieve、 silent failure 回避のため
   API 側は require_membership で 401 を返す。 CSS は UI ガイダンス用) */
.collab-space--observation-only .collab-space__expand-corner,
.collab-space--observation-only .collab-space__lefds-toolbar,
.collab-space--observation-only .collab-space__lefds-selected-info,
.collab-space--observation-only .collab-space__lefds-palette,
.collab-space--observation-only .collab-space__shelf-add,
.collab-space--observation-only .collab-space__main {
  pointer-events: none;
  opacity: 0.5;
}

.collab-space--observation-only .collab-space__slots {
  pointer-events: none;
}

/* --- Phase 5: スマホ観戦モード (max-width: 1023px) ---
   このブロックは collaboration_spaces.css の末尾に置く。 CSS cascade 上、
   このメディアクエリ以降に同セレクタの通常宣言があると `display: none` が
   打ち消されるため (specificity 同値で後勝ち)、 必ず末尾に置くこと */
@media (max-width: 1023px) {
  /* スマホは観戦モード (チャット + プレビュー + WIP サムネのみ)。
     編集機能 (個人エディタ / 棚 / 拡大 / slot 操作) は CSS で hide。
     JS 側でも _isObservationMode() で編集 action をブロック。 */
  .collab-space__layout {
    grid-template-columns: 1fr;
  }
  /* 個人エディタ (左カラム) は完全 hide */
  .collab-space__main { display: none; }
  /* sidebar は sticky 解除 + height auto でフル表示 */
  .collab-space__sidebar {
    position: static;
    height: auto;
    min-height: calc(100vh - 6rem);
  }
  /* ヘッダの素材棚はスマホでは表示しない (棚操作不可のため) */
  .collab-space__shelf { display: none; }
  /* canvas 右上の拡大ボタン / 拡大時 toolbar を hide */
  .collab-space__expand-corner { display: none; }
  .collab-space__lefds-toolbar,
  .collab-space__lefds-selected-info,
  .collab-space__lefds-palette { display: none; }
  /* slot 編集系 UI (resize handle / delete button / drawing hint) を hide */
  .collab-space__slot-handle--resize,
  .collab-space__slot-delete,
  .collab-space__lefds-drawing-hint { display: none; }
  /* canvas-wrap 全体を読み取り専用に (タッチ pan/zoom / ドラッグ操作を無効化) */
  .collab-space__canvas-wrap {
    touch-action: manipulation;
  }
  .collab-space__slots {
    pointer-events: none;
  }
  /* WIP サムネをタップしやすいサイズに + tap 可能を視覚化 */
  .collab-space__member-thumb {
    cursor: pointer;
  }
  /* 観戦モード案内 (sidebar 先頭、 入室直後に観戦モードであることを明示) */
  .collab-space__mobile-notice { display: block; }
}