/* ==UserStyle==
@name        Muse アバターボタン自体を大きく
@namespace   shokora
@version     3.5
@description チャット画面では大きく固定、右パネルでも大きくしてアクティビティを下へずらす
@author      Shokora
@match       https://muse.ai/
@match       https://muse.ai/thread/*
==/UserStyle== */

/* コンポーザーがあるときだけ、親を幅判定の基準にする */
html:has([data-hatch-composer-root="true"]) .group\/status-avatar {
  container-type: inline-size !important;
}

/* 中央表示：親の幅が199px以下のときだけ固定表示 */
@container (max-width: 199px) {
  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;
    bottom: -254px !important;
    right: -560px !important;
    left: auto !important;
    top: 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: auto !important;
    left: auto !important;
    right: -445px !important;
    bottom: -284px !important;
    transform: none !important;
    z-index: 999 !important;
  }

  html:has([data-hatch-composer-root="true"]) [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: -540px !important;
    bottom: -234px !important;
    transform: none !important;
    z-index: 1000 !important;
  }
}

/* 右パネル：親の幅が200px以上のときだけ、その場で大きくする */
@container (min-width: 200px) {
  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: relative !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* アバターのすぐ上の親を広げて、下が重ならないようにする */
  html:has([data-hatch-composer-root="true"]) div:has(> [data-hatch-avatar-interaction="true"]) {
    height: auto !important;
    min-height: 320px !important;
    padding-bottom: 20px !important;
  }

  /* 名前などのバブルをアバターの下へ */
  html:has([data-hatch-composer-root="true"]) [data-hatch-avatar-accessory="status-sidebar-bubble"] {
    top: 320px !important;
  }

  /* 編集ボタンをアバターの右下あたりへ */
  html:has([data-hatch-composer-root="true"]) [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
    top: 320px !important;
    inset-inline-end: calc(50% - 115px) !important;
  }
}

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;
}
/* ★ 親コンテナの固定高さを突破して領域を広げる */
div:has(> div[data-hatch-avatar-interaction]),
div:has(> div > div[data-hatch-avatar-interaction]) {
  height: auto !important;
  min-height: 300px !important; /* アバター(200px) + 名前 + 余白分 */
  padding-bottom: 20px !important;
}

/* ★ v2.2 追加：パネルが開いている間は拡大を止める（実測に基づく判定）
   実測（2026-11-01）: ファイル/アーティファクトのパネルは
   frame=content-panel で、開くと style が "opacity: 1" になり幅を持つ。
   閉じている枠は "opacity: 0"（スペース無し版もある）で幅0。
   route-panel（Feed/Ideas等）も同じ作りなので一緒に対象にする。
   frame=chat は常時開なので絶対に判定に入れない（v2.0の失敗原因）。
   拡大の土台 container-type を通常に戻すと拡大一式が無効になる。 */
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;
}
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"])
) div:has(> div[data-hatch-avatar-interaction]),
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"])
) div:has(> div > div[data-hatch-avatar-interaction]) {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

/* ★ v2.4：ポップアップ内でも大きなまま、被りだけを直す（実測に基づく判定）
   実測（2026-11-01）: 普通の状態ではステータスパネル側のアバター
   実体は存在しない。ポップアップを開いた時だけ
   [data-hatch-status-panel-card] の中に、目印
   [data-hatch-avatar-frame-snap="true"] 付きの実体が現れる。
   その実体は 320px のまま大きく保ち、名前や付属品が
   アバターの下に通常の流れで並ぶようにする（v2.3の縮小はやめた）。
   普段の拡大（チャット側・右パネル側）には触らない。 */
html [data-hatch-status-panel-card="true"]
  div:has(> [data-hatch-avatar-interaction="true"][data-hatch-avatar-frame-snap="true"]) {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
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"] {
  position: static !important;
  top: auto !important;
  inset-inline-end: auto !important;
}

/* ★ v2.5 追加：ポップアップでは「アバター上・名前下」の縦並びにする
   横並びだと 320px のアバター＋名前でカード幅（約360px）を超えて
   アイコンが切れてしまうため、カード内のサイドバー領域を
   縦並び（カラム）に変え、アバターを中央、名前などをその下に置く。
   はみ出しで切れないよう、カード側の overflow も見える側に倒す。 */
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: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
html [data-hatch-status-panel-card="true"]
  div:has(> [data-hatch-avatar-interaction="true"][data-hatch-avatar-frame-snap="true"]) {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
html [data-hatch-status-panel-surface="true"],
html [data-hatch-status-panel-card="true"] {
  overflow: visible !important;
}

/* ★ v2.6 追加：v2.5でアバターが消えた件の修正
   v2.5ではサイドバー領域の高さを 0 に戻したため、アバター映像の
   高さの連鎖が潰れて見えなくなった可能性が高い。
   縦並びは保ったまま、高さは 320px を明示して連鎖を守り、
   アバター実体にも大きさと「その場に置く」ことを直接指定する。 */
html [data-hatch-status-panel-card="true"] [data-hatch-status-sidebar-avatar="true"] {
  height: auto !important;
  min-height: 320px !important;
}
html [data-hatch-status-panel-card="true"]
  div:has(> [data-hatch-avatar-interaction="true"][data-hatch-avatar-frame-snap="true"]) {
  height: 320px !important;
  min-height: 320px !important;
  align-items: flex-start !important;
}
html [data-hatch-status-panel-surface="true"] [data-hatch-status-sidebar-avatar="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;
}

/* ★ v2.7 追加：横並びの本体は「もう1〜2段上の入れ物」だった
   v2.5/2.6 でサイドバー領域自体を縦並びにしても効かなかったのは、
   名前欄はその外側の入れ物の子で、横並びはそちらで決まっていたため。
   今度はアバター領域を持つ親と祖父の入れ物を縦並びにする。 */
html [data-hatch-status-panel-card="true"]
  div:has(> [data-hatch-status-sidebar-avatar="true"]),
html [data-hatch-status-panel-card="true"]
  div:has(> div > [data-hatch-status-sidebar-avatar="true"]) {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* ★ v2.8 追加：横並びの本体を特定した（名前要素の実測に基づく）
   実測: 名前 span[data-hatch-speech-bubble-name-visible] は
   [data-hatch-avatar-accessory="status-sidebar-bubble"] の子で、
   その直接の親（サイドバー領域の直下にある flex row の div）が
   アバターと名前を横に並べていた。アバターの器が 256px しかなく
   320px の円がはみ出して名前側に被っていたのも、この並びのため。
   この親だけを縦並びにし、アバターの器は幅いっぱいに広げる。 */
html [data-hatch-status-sidebar-avatar="true"]
  > div:has(> [data-hatch-avatar-accessory="status-sidebar-bubble"]) {
  flex-direction: column !important;
  align-items: center !important;
  height: auto !important;
  min-height: 380px !important;
}
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;
  display: flex !important;
  justify-content: center !important;
}
html [data-hatch-status-panel-card="true"] [data-hatch-status-sidebar-avatar="true"] {
  height: auto !important;
  min-height: 388px !important;
}

/* ★ v2.9 追加：ポップアップで名前などを中央に寄せる
   縦並びにはなったが、名前の塊（bubble）が幅いっぱいに伸びて
   文字が左に寄っていた。塊自体を中央に置き、中の並びも中央に。 */
html [data-hatch-status-panel-card="true"]
  [data-hatch-avatar-accessory="status-sidebar-bubble"] {
  align-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
html [data-hatch-status-panel-card="true"]
  [data-hatch-avatar-accessory="status-sidebar-bubble"] > div {
  align-items: center !important;
  justify-content: center !important;
}
html [data-hatch-status-panel-card="true"]
  [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ★ v3.0 追加：名前の塊を右へずらす（中央寄せの微調整）
   v2.9 の中央寄せ指定が効かず名前が左に残ったため、
   塊（bubble）自体を相対配置で右へ 88px ずらす。
   ※ずらし量はこの 88px の数字だけで調整できる。 */
html [data-hatch-status-panel-card="true"]
  [data-hatch-avatar-accessory="status-sidebar-bubble"] {
  position: relative !important;
  left: 66px !important;
  top: 15px !important;
}

/* ★ v3.1 追加：パネルを開いた状態のポップ（モーダル表示）を大きくする
   実測（2026-11-01）: パネルが開いている時にアバターを押すと、
   サイドパネルではなくモーダルとして出てくる。目印は
   [data-hatch-avatar-display-stage="status-modal"] のホストで、
   中のアバターは 128px だった（frame-snap ではなく
   milestone-scale=animated で、こちらは動く）。
   このホストがいる時だけ、その中身を 320px に広げる。
   普段の表示やサイドパネル版ポップ（v3.0まで）には触らない。 */
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"] {
  width: 340px !important;
  height: auto !important;
  min-height: 384px !important;
}
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"] > div,
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"] > div > div {
  width: 100% !important;
  height: auto !important;
  min-height: 320px !important;
  display: flex !important;
  justify-content: center !important;
}
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"]
  [data-hatch-avatar-interaction="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;
  margin: 0 auto !important;
}

/* ★ v3.2 追加：モーダル表示では名前をアバターの下へ逃がす
   モーダルのアバターは画面の土台側に重なる層で、カード側の
   名前の位置は小さいアバター前提のまま。名前の塊（bubble）に
   上の余白を足して、大きくなったアバターの下へ押し下げる。
   下のタブや一覧も一緒に下がる（流れの中で押すため）。
   ※押し下げ量はこの 170px の数字だけで調整できる。 */
html:has([data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"])
  [data-hatch-avatar-accessory="status-sidebar-bubble"] {
  margin-top: 170px !important;
}

/* ★ v3.3 追加：モーダルではカード側（タブ・一覧）を下へ逃がす
   実測: モーダルの名前はアバターのホスト側にあり、位置は
   アバターの下で合っている。一方タブと一覧はカード側にあり、
   小さいアバター前提の高さから始まるため、名前と重なっていた。
   モーダルが出ている時だけ、カードの上に余白を足して
   タブと一覧を名前の下まで押し下げる。
   ※押し下げ量はこの 190px の数字だけで調整できる。 */
html:has([data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"])
  [data-hatch-status-panel-card="true"] {
  padding-top: 190px !important;
}

/* ★ v3.4 追加：モーダルの名前をもう少し下げ、ペンをアバターの右下へ
   名前は v3.2 の 170px から 190px に（+20px）。
   カード側も 190px から 210px に（+20px）して間隔を保つ。
   ペンのアイコンは小さいアバター前提の位置のままで絵に被るため、
   大きなアバターの右下あたりへ置き直す。
   ※数字はそれぞれの行だけで調整できる。 */
html:has([data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"])
  [data-hatch-avatar-accessory="status-sidebar-bubble"] {
  margin-top: 190px !important;
}
html:has([data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"])
  [data-hatch-status-panel-card="true"] {
  padding-top: 210px !important;
}
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"]
  [data-hatch-avatar-accessory="status-avatar-edit-menu"] {
  position: absolute !important;
  top: 288px !important;
  inset-inline-end: 20px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
}

/* ★ v3.5 追加：モーダルの三点セットをまとめて左へずらす
   アイコン・名前・ペンはすべてアバターのホストの中にあるので、
   ホストごと左へずらせば三つが一緒に動く（タブと一覧は動かない）。
   ※ずらし量はこの -40px の数字だけで調整できる
     （左へ大きく → -80px など、右へ戻す → -20px など）。 */
html [data-hatch-avatar-host="true"][data-hatch-avatar-display-stage="status-modal"] {
  margin-left: -40px !important;
}