/* ==UserStyle==
@name        アバター拡大（自作・パネル＋チャット版）
@namespace   xxxx
@version     0.7.0
@description muse.ai のステータスパネルとチャット画面でアバターを320pxにする。名前は中心で固定し、作業中もずらさない
==/UserStyle== */

@-moz-document domain("muse.ai") {

  /* 1. パネル内のサイドバー領域：幅いっぱい、高さは中身に合わせる */
  html [data-hatch-status-panel-card="true"]
    [data-hatch-status-sidebar-avatar="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 380px !important;
    overflow: visible !important;
  }

  /* 2. アバターと名前を横並びにしている親を、縦並びに変える
        （320px + 名前を横に置くとカード幅 約360px を超えるため） */
  html [data-hatch-status-sidebar-avatar="true"]
    > div:has(> [data-hatch-avatar-accessory="status-sidebar-bubble"]) {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 3. アバターの器：幅いっぱい・高さ320px、中のアバターを中央に */
  html [data-hatch-status-sidebar-avatar="true"]
    > div:has(> [data-hatch-avatar-accessory="status-sidebar-bubble"])
    > div:has(> [data-hatch-avatar-interaction="true"][data-hatch-avatar-frame-snap="true"]) {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
  }

  /* 4. アバター本体を320pxに。小さい前提の位置・切り抜きを解除する */
  html [data-hatch-status-panel-card="true"]
    [data-hatch-avatar-interaction="true"][data-hatch-avatar-frame-snap="true"] {
    width: 320px !important;
    height: 320px !important;
    min-width: 320px !important;
    min-height: 320px !important;
    max-width: 320px !important;
    max-height: 320px !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    clip-path: none !important;
    flex-shrink: 0 !important;
  }

  /* 5. カード側で大きな円が切り取られないようにする */
  html [data-hatch-status-panel-surface="true"],
  html [data-hatch-status-panel-card="true"] {
    overflow: visible !important;
  }

  /* 6. ★v0.3：名前とペンを、重なりの組み合わせのまま組ごと下へずらす
        v0.2 の static（流れに戻す）方式はやめる。浮いた配置のまま、
        名前（bubble）とペン（edit-menu）の両方に同じ量の
        下方向移動をかけるので、2つの相対位置は変わらない。
        移動には transform ではなく translate プロパティを使う：
        元の transform（中央寄せなど）を壊さずに足し算できるため。
        ※ずらし量はこの 200px だけで調整できる
          （名前をもっと下げる → 220px、上げる → 180px など）。
        200px の根拠：v0.1スクショ実測で名前中心は約240pxの位置、
        アバターの円の下端は約407px、目標は v0.2 実測の
        名前中心 約457px。差は約200px強。 */
  html [data-hatch-status-panel-card="true"]
    [data-hatch-avatar-accessory="status-sidebar-bubble"],
  html [data-hatch-status-panel-card="true"]
    [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
    translate: 0 200px !important;
  }

  /* 7. ★v0.7：パネルのペンを見やすくする
        ペンの丸ボタンは暗い色で、パネルの黒背景と同化して
        見えづらかった。白いリング（box-shadow）と、背景より
        少し明るい地色、落影を足して浮かせる。白いアバター側に
        重なる部分では落影が輪郭になる。
        セレクタはパネル内に限定してあるので、チャット画面の
        ペンには効かない（v0.6で消したチャット部ルールの教訓）。 */
  html [data-hatch-status-panel-card="true"]
    [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
    background-color: rgb(43, 43, 50) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2),
                0 2px 8px rgba(0, 0, 0, 0.65) !important;
  }

  /* ============ チャット画面（v0.4で追加） ============
     対象は、チャット上部の細いアバター表示（幅199px以下のとき）。
     Shokora方式との違いは名前欄（status-pill）の留め方だけ：
     あちらは右端を固定していたため、作業中で欄の幅が広がると
     中心が左へ流れた。ここでは右端の位置を「アバターの中心線」に
     置き、translateX(50%) で幅の半分だけ戻す。すると欄の中心は
     幅がどう変わっても中心線から動かない。
     中心線の根拠：アバターは right:-560px・幅320px なので、
     その中心は右端から 560-160=400px の線。よって pill の
     right は -400px とする（Shokoraの実測配置から逆算）。 */

  /* 拡大の土台：アバター表示の親を幅判定の基準にする */
  html:has([data-hatch-composer-root="true"]) .group\/status-avatar {
    container-type: inline-size !important;
  }

  /* ★v0.5：縦の留め方を「下端基準」から「上端基準」に変える。
     v0.4 までは bottom 基準だったため、作業中に親（group）の
     高さが増えると（名前欄が2行になる等）、親の下端と一緒に
     アバターごと下へ約15pxずれていた。親の上端は動かないので、
     top 基準にすれば作業中も位置が保てる。
     数字の根拠：待機中の親の高さは実測逆算で約103px。
     アバター上端 = 103-66 = 37px、名前欄上端 = 103+256 = 359px、
     編集ボタン上端 = 103+234-32 = 305px（旧 bottom:-234px・高さ32px想定から換算）。
     ※待機中の見た目の位置が v0.4 と数pxずれたら top の値を調整。 */
  @container (max-width: 199px) {
    /* アバター本体：320pxで固定表示、上端基準 */
    html:has([data-hatch-composer-root="true"]) [data-hatch-avatar-interaction="true"] {
      width: 320px !important;
      height: 320px !important;
      min-width: 320px !important;
      min-height: 320px !important;
      max-width: none !important;
      max-height: none !important;
      flex-shrink: 0 !important;
      clip-path: none !important;
      position: fixed !important;
      top: 37px !important;
      right: -560px !important;
      left: auto !important;
      bottom: auto !important;
      transform: none !important;
      margin: 0 !important;
      z-index: 999 !important;
    }

    /* 名前欄：中心をアバターの中心線に固定、上端基準 */
    html:has([data-hatch-composer-root="true"]) [data-hatch-avatar-accessory="status-pill"] {
      position: fixed !important;
      top: 359px !important;
      left: auto !important;
      right: -400px !important;
      bottom: auto !important;
      transform: translateX(50%) !important;
      z-index: 999 !important;
    }

    /* ★v0.6：チャット部の編集ボタンルールは削除した。
       パネル側のペンと同じ accessory 名のため、チャット用の
       fixed 配置がパネル側のペンにも効いて、ペンを画面外へ
       飛ばしていた疑いが強い。チャット画面ではペンは
       目立って使われていなかったので、素の表示に戻す。 */
  }

  /* アバターの動画を器いっぱいに */
  div:has(> video[data-hatch-avatar-slot="current"]) {
    width: 100% !important;
    height: 100% !important;
  }
  video[data-hatch-avatar-slot="current"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ファイル/アーティファクト等のパネルが開いている間は
     チャット画面の拡大を止める（干渉回避） */
  html:has(
    [data-hatch-pane-frame="content-panel"]:not([style*="opacity:0"]):not([style*="opacity: 0"]),
    [data-hatch-pane-frame="route-panel"]:not([style*="opacity:0"]):not([style*="opacity: 0"])
  ) .group\/status-avatar {
    container-type: normal !important;
  }
}